New Interface (initial commit)

src/components/setting/setting-verge-advanced.tsx

@@ -1,6 +1,9 @@
 import { useCallback, useRef } from "react";
 import { useTranslation } from "react-i18next";
-import { Typography } from "@mui/material";
+import { check as checkUpdate } from "@tauri-apps/plugin-updater";
+import { version } from "@root/package.json";
+
+// Сервисы и хуки
 import {
   exitApp,
   openAppDir,
@@ -9,11 +12,31 @@ import {
   openDevTools,
   exportDiagnosticInfo,
 } from "@/services/cmds";
-import { check as checkUpdate } from "@tauri-apps/plugin-updater";
-import { useVerge } from "@/hooks/use-verge";
-import { version } from "@root/package.json";
+import { showNotice } from "@/services/noticeService";
+
+// Компоненты
 import { DialogRef } from "@/components/base";
-import { SettingList, SettingItem } from "./mods/setting-comp";
+import { TooltipIcon } from "@/components/base/base-tooltip-icon";
+import { Button } from "@/components/ui/button";
+
+// --- НАЧАЛО ИЗМЕНЕНИЙ 1: Импортируем все нужные иконки ---
+import {
+  Settings,
+  Copy,
+  Info,
+  Archive,
+  FileCode,
+  Folder,
+  FolderCog,
+  FolderClock,
+  RefreshCw,
+  Terminal,
+  Feather,
+  LogOut,
+  ClipboardList,
+} from "lucide-react";
+
+// Модальные окна
 import { ConfigViewer } from "./mods/config-viewer";
 import { HotkeyViewer } from "./mods/hotkey-viewer";
 import { MiscViewer } from "./mods/misc-viewer";
@@ -22,18 +45,43 @@ import { LayoutViewer } from "./mods/layout-viewer";
 import { UpdateViewer } from "./mods/update-viewer";
 import { BackupViewer } from "./mods/backup-viewer";
 import { LiteModeViewer } from "./mods/lite-mode-viewer";
-import { TooltipIcon } from "@/components/base/base-tooltip-icon";
-import { ContentCopyRounded } from "@mui/icons-material";
-import { showNotice } from "@/services/noticeService";
+
 
 interface Props {
   onError?: (err: Error) => void;
 }
 
+// Наш переиспользуемый компонент для строки настроек
+const SettingRow = ({
+  label,
+  extra,
+  children,
+  onClick,
+}: {
+  label: React.ReactNode;
+  extra?: React.ReactNode;
+  children?: React.ReactNode;
+  onClick?: () => void;
+}) => (
+    <div
+      className={`flex items-center justify-between py-3 border-b border-border last:border-b-0 ${onClick ? 'cursor-pointer hover:bg-accent/50 -mx-3 px-3 rounded-md' : ''}`}
+      onClick={onClick}
+    >
+        <div className="flex items-center gap-2">
+            {/* Мы ожидаем, что label теперь может быть сложным компонентом */}
+            <div className="text-sm font-medium">{label}</div>
+            {extra && <div className="text-muted-foreground">{extra}</div>}
+        </div>
+        <div>
+            {children}
+        </div>
+    </div>
+);
+
+
 const SettingVergeAdvanced = ({ onError }: Props) => {
   const { t } = useTranslation();
 
-  const { verge, patchVerge, mutateVerge } = useVerge();
   const configRef = useRef<DialogRef>(null);
   const hotkeyRef = useRef<DialogRef>(null);
   const miscRef = useRef<DialogRef>(null);
@@ -61,84 +109,51 @@ const SettingVergeAdvanced = ({ onError }: Props) => {
     showNotice("success", t("Copy Success"), 1000);
   }, []);
 
+  // Вспомогательная функция для создания лейбла с иконкой
+  const LabelWithIcon = ({ icon, text }: { icon: React.ElementType, text: string }) => {
+    const Icon = icon;
+    return (
+      <span className="flex items-center gap-3">
+        <Icon className="h-4 w-4 text-muted-foreground" />
+        {text}
+      </span>
+    );
+  };
+
   return (
-    <SettingList title={t("Verge Advanced Setting")}>
-      <ThemeViewer ref={themeRef} />
-      <ConfigViewer ref={configRef} />
-      <HotkeyViewer ref={hotkeyRef} />
-      <MiscViewer ref={miscRef} />
-      <LayoutViewer ref={layoutRef} />
-      <UpdateViewer ref={updateRef} />
-      <BackupViewer ref={backupRef} />
-      <LiteModeViewer ref={liteModeRef} />
+    <div>
+      <h3 className="text-lg font-medium mb-4">{t("Verge Advanced Setting")}</h3>
+      <div className="space-y-1">
+        <ThemeViewer ref={themeRef} />
+        <ConfigViewer ref={configRef} />
+        <HotkeyViewer ref={hotkeyRef} />
+        <MiscViewer ref={miscRef} />
+        <LayoutViewer ref={layoutRef} />
+        <UpdateViewer ref={updateRef} />
+        <BackupViewer ref={backupRef} />
+        <LiteModeViewer ref={liteModeRef} />
 
-      <SettingItem
-        onClick={() => backupRef.current?.open()}
-        label={t("Backup Setting")}
-        extra={
-          <TooltipIcon
-            title={t("Backup Setting Info")}
-            sx={{ opacity: "0.7" }}
-          />
-        }
-      />
+        {/* --- НАЧАЛО ИЗМЕНЕНИЙ 2: Добавляем иконки к каждому пункту --- */}
+        <SettingRow onClick={() => backupRef.current?.open()} label={<LabelWithIcon icon={Archive} text={t("Backup Setting")} />} extra={<TooltipIcon tooltip={t("Backup Setting Info")} />} />
+        <SettingRow onClick={() => configRef.current?.open()} label={<LabelWithIcon icon={FileCode} text={t("Runtime Config")} />} />
+        <SettingRow onClick={openAppDir} label={<LabelWithIcon icon={Folder} text={t("Open Conf Dir")} />} extra={<TooltipIcon tooltip={t("Open Conf Dir Info")} />} />
+        <SettingRow onClick={openCoreDir} label={<LabelWithIcon icon={FolderCog} text={t("Open Core Dir")} />} />
+        <SettingRow onClick={openLogsDir} label={<LabelWithIcon icon={FolderClock} text={t("Open Logs Dir")} />} />
+        <SettingRow onClick={onCheckUpdate} label={<LabelWithIcon icon={RefreshCw} text={t("Check for Updates")} />} />
+        <SettingRow onClick={openDevTools} label={<LabelWithIcon icon={Terminal} text={t("Open Dev Tools")} />} />
+        <SettingRow label={<LabelWithIcon icon={Feather} text={t("LightWeight Mode Settings")} />} extra={<TooltipIcon tooltip={t("LightWeight Mode Info")} />} onClick={() => liteModeRef.current?.open()} />
+        <SettingRow onClick={exitApp} label={<LabelWithIcon icon={LogOut} text={t("Exit")} />} />
 
-      <SettingItem
-        onClick={() => configRef.current?.open()}
-        label={t("Runtime Config")}
-      />
+        <SettingRow label={<LabelWithIcon icon={ClipboardList} text={t("Export Diagnostic Info")} />}>
+            <TooltipIcon tooltip={t("Copy")} icon={<Copy className="h-4 w-4"/>} onClick={onExportDiagnosticInfo} />
+        </SettingRow>
 
-      <SettingItem
-        onClick={openAppDir}
-        label={t("Open Conf Dir")}
-        extra={
-          <TooltipIcon
-            title={t("Open Conf Dir Info")}
-            sx={{ opacity: "0.7" }}
-          />
-        }
-      />
-
-      <SettingItem onClick={openCoreDir} label={t("Open Core Dir")} />
-
-      <SettingItem onClick={openLogsDir} label={t("Open Logs Dir")} />
-
-      <SettingItem onClick={onCheckUpdate} label={t("Check for Updates")} />
-
-      <SettingItem onClick={openDevTools} label={t("Open Dev Tools")} />
-
-      <SettingItem
-        label={t("LightWeight Mode Settings")}
-        extra={
-          <TooltipIcon
-            title={t("LightWeight Mode Info")}
-            sx={{ opacity: "0.7" }}
-          />
-        }
-        onClick={() => liteModeRef.current?.open()}
-      />
-
-      <SettingItem
-        onClick={() => {
-          exitApp();
-        }}
-        label={t("Exit")}
-      />
-
-      <SettingItem
-        label={t("Export Diagnostic Info")}
-        extra={
-          <TooltipIcon
-            icon={ContentCopyRounded}
-            onClick={onExportDiagnosticInfo}
-          />
-        }
-      ></SettingItem>
-
-      <SettingItem label={t("Verge Version")}>
-        <Typography sx={{ py: "7px", pr: 1 }}>v{version}</Typography>
-      </SettingItem>
-    </SettingList>
+        <SettingRow label={<LabelWithIcon icon={Info} text={t("Verge Version")} />}>
+          <p className="text-sm font-medium pr-2 font-mono">v{version}</p>
+        </SettingRow>
+        {/* --- КОНЕЦ ИЗМЕНЕНИЙ 2 --- */}
+      </div>
+    </div>
   );
 };