New Interface (initial commit)

src/components/profile/log-viewer.tsx

@@ -1,16 +1,19 @@
 import { Fragment } from "react";
 import { useTranslation } from "react-i18next";
+
+// Новые импорты
 import {
-  Button,
-  Chip,
   Dialog,
-  DialogActions,
   DialogContent,
+  DialogHeader,
   DialogTitle,
-  Divider,
-  Typography,
-} from "@mui/material";
+  DialogFooter,
+  DialogClose,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Badge, badgeVariants } from "@/components/ui/badge";
 import { BaseEmpty } from "@/components/base";
+import { cn } from "@root/lib/utils";
 
 interface Props {
   open: boolean;
@@ -20,50 +23,47 @@ interface Props {
 
 export const LogViewer = (props: Props) => {
   const { open, logInfo, onClose } = props;
-
   const { t } = useTranslation();
 
+  // Вспомогательная функция для определения варианта Badge
+  const getLogLevelVariant = (level: string): "destructive" | "secondary" => {
+    return level === "error" || level === "exception" ? "destructive" : "secondary";
+  };
+
   return (
-    <Dialog open={open} onClose={onClose}>
-      <DialogTitle>{t("Script Console")}</DialogTitle>
+    <Dialog open={open} onOpenChange={(isOpen) => !isOpen && onClose()}>
+      <DialogContent className="sm:max-w-lg">
+        <DialogHeader>
+          <DialogTitle>{t("Script Console")}</DialogTitle>
+        </DialogHeader>
 
-      <DialogContent
-        sx={{
-          width: 400,
-          height: 300,
-          overflowX: "hidden",
-          userSelect: "text",
-          pb: 1,
-        }}
-      >
-        {logInfo.map(([level, log], index) => (
-          <Fragment key={index.toString()}>
-            <Typography color="text.secondary" component="div">
-              <Chip
-                label={level}
-                size="small"
-                variant="outlined"
-                color={
-                  level === "error" || level === "exception"
-                    ? "error"
-                    : "default"
-                }
-                sx={{ mr: 1 }}
-              />
-              {log}
-            </Typography>
-            <Divider sx={{ my: 0.5 }} />
-          </Fragment>
-        ))}
+        {/* Контейнер для логов с прокруткой */}
+        <div className="h-[300px] overflow-y-auto space-y-2 p-1">
+          {logInfo.length > 0 ? (
+            logInfo.map(([level, log], index) => (
+              <div key={index} className="pb-2 border-b border-border last:border-b-0">
+                <div className="flex items-start gap-3">
+                  <Badge variant={getLogLevelVariant(level)} className="mt-0.5">
+                    {level}
+                  </Badge>
+                  {/* `whitespace-pre-wrap` сохраняет переносы строк и пробелы в логах */}
+                  <p className="flex-1 text-sm whitespace-pre-wrap break-words font-mono">
+                    {log}
+                  </p>
+                </div>
+              </div>
+            ))
+          ) : (
+            <BaseEmpty />
+          )}
+        </div>
 
-        {logInfo.length === 0 && <BaseEmpty />}
+        <DialogFooter>
+          <DialogClose asChild>
+            <Button type="button" variant="outline">{t("Close")}</Button>
+          </DialogClose>
+        </DialogFooter>
       </DialogContent>
-
-      <DialogActions>
-        <Button onClick={onClose} variant="outlined">
-          {t("Close")}
-        </Button>
-      </DialogActions>
     </Dialog>
   );
 };