New Interface (initial commit)

src/components/setting/mods/layout-viewer.tsx

@@ -1,41 +1,40 @@
-import { forwardRef, useEffect, useImperativeHandle, useState } from "react";
+import { forwardRef, useImperativeHandle, useState, useEffect, useCallback } from "react";
 import { useTranslation } from "react-i18next";
-import {
-  List,
-  Button,
-  Select,
-  MenuItem,
-  styled,
-  ListItem,
-  ListItemText,
-  Box,
-} from "@mui/material";
-import { useVerge } from "@/hooks/use-verge";
-import { BaseDialog, DialogRef, Switch } from "@/components/base";
-import { TooltipIcon } from "@/components/base/base-tooltip-icon";
-import { GuardState } from "./guard-state";
+import { useLockFn } from "ahooks";
 import { open as openDialog } from "@tauri-apps/plugin-dialog";
 import { convertFileSrc } from "@tauri-apps/api/core";
-import { copyIconFile, getAppDir } from "@/services/cmds";
-import { join } from "@tauri-apps/api/path";
 import { exists } from "@tauri-apps/plugin-fs";
-import getSystem from "@/utils/get-system";
+import { join } from "@tauri-apps/api/path";
+
+// Новые импорты
+import { useVerge } from "@/hooks/use-verge";
+import { DialogRef, Switch } from "@/components/base";
+import { TooltipIcon } from "@/components/base/base-tooltip-icon";
+import { GuardState } from "./guard-state";
+import { copyIconFile, getAppDir } from "@/services/cmds";
 import { showNotice } from "@/services/noticeService";
+import { Button } from "@/components/ui/button";
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogClose } from "@/components/ui/dialog";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import getSystem from "@/utils/get-system";
 
 const OS = getSystem();
 
 const getIcons = async (icon_dir: string, name: string) => {
   const updateTime = localStorage.getItem(`icon_${name}_update_time`) || "";
-
   const icon_png = await join(icon_dir, `${name}-${updateTime}.png`);
   const icon_ico = await join(icon_dir, `${name}-${updateTime}.ico`);
-
-  return {
-    icon_png,
-    icon_ico,
-  };
+  return { icon_png, icon_ico };
 };
 
+// Наш переиспользуемый компонент для строки настроек
+const SettingRow = ({ label, extra, children }: { label: React.ReactNode; extra?: React.ReactNode; children?: React.ReactNode; }) => (
+    <div className="flex items-center justify-between py-3 border-b border-border last:border-b-0">
+        <div className="flex items-center gap-2"><p className="text-sm font-medium">{label}</p>{extra && <div className="text-muted-foreground">{extra}</div>}</div>
+        <div>{children}</div>
+    </div>
+);
+
 export const LayoutViewer = forwardRef<DialogRef>((props, ref) => {
   const { t } = useTranslation();
   const { verge, patchVerge, mutateVerge } = useVerge();
@@ -45,42 +44,21 @@ export const LayoutViewer = forwardRef<DialogRef>((props, ref) => {
   const [sysproxyIcon, setSysproxyIcon] = useState("");
   const [tunIcon, setTunIcon] = useState("");
 
-  useEffect(() => {
-    initIconPath();
+  const initIconPath = useCallback(async () => {
+    const appDir = await getAppDir();
+    const icon_dir = await join(appDir, "icons");
+    const { icon_png: common_icon_png, icon_ico: common_icon_ico } = await getIcons(icon_dir, "common");
+    const { icon_png: sysproxy_icon_png, icon_ico: sysproxy_icon_ico } = await getIcons(icon_dir, "sysproxy");
+    const { icon_png: tun_icon_png, icon_ico: tun_icon_ico } = await getIcons(icon_dir, "tun");
+
+    setCommonIcon(await exists(common_icon_ico) ? common_icon_ico : common_icon_png);
+    setSysproxyIcon(await exists(sysproxy_icon_ico) ? sysproxy_icon_ico : sysproxy_icon_png);
+    setTunIcon(await exists(tun_icon_ico) ? tun_icon_ico : tun_icon_png);
   }, []);
 
-  async function initIconPath() {
-    const appDir = await getAppDir();
-
-    const icon_dir = await join(appDir, "icons");
-
-    const { icon_png: common_icon_png, icon_ico: common_icon_ico } =
-      await getIcons(icon_dir, "common");
-
-    const { icon_png: sysproxy_icon_png, icon_ico: sysproxy_icon_ico } =
-      await getIcons(icon_dir, "sysproxy");
-
-    const { icon_png: tun_icon_png, icon_ico: tun_icon_ico } = await getIcons(
-      icon_dir,
-      "tun",
-    );
-
-    if (await exists(common_icon_ico)) {
-      setCommonIcon(common_icon_ico);
-    } else {
-      setCommonIcon(common_icon_png);
-    }
-    if (await exists(sysproxy_icon_ico)) {
-      setSysproxyIcon(sysproxy_icon_ico);
-    } else {
-      setSysproxyIcon(sysproxy_icon_png);
-    }
-    if (await exists(tun_icon_ico)) {
-      setTunIcon(tun_icon_ico);
-    } else {
-      setTunIcon(tun_icon_png);
-    }
-  }
+  useEffect(() => {
+    if (open) initIconPath();
+  }, [open, initIconPath]);
 
   useImperativeHandle(ref, () => ({
     open: () => setOpen(true),
@@ -95,298 +73,129 @@ export const LayoutViewer = forwardRef<DialogRef>((props, ref) => {
     mutateVerge({ ...verge, ...patch }, false);
   };
 
+  const handleIconChange = useLockFn(async (type: 'common' | 'sysproxy' | 'tun') => {
+    const key = `${type}_tray_icon` as keyof IVergeConfig;
+    if (verge?.[key]) {
+        onChangeData({ [key]: false });
+        await patchVerge({ [key]: false });
+    } else {
+        const selected = await openDialog({
+            directory: false, multiple: false,
+            filters: [{ name: "Tray Icon Image", extensions: ["png", "ico"] }],
+        });
+        if (selected) {
+            const path = Array.isArray(selected) ? selected[0] : selected;
+            await copyIconFile(path, type);
+            await initIconPath();
+            onChangeData({ [key]: true });
+            await patchVerge({ [key]: true });
+        }
+    }
+  });
+
   return (
-    <BaseDialog
-      open={open}
-      title={t("Layout Setting")}
-      contentSx={{ width: 450 }}
-      disableOk
-      cancelBtn={t("Close")}
-      onClose={() => setOpen(false)}
-      onCancel={() => setOpen(false)}
-    >
-      <List>
-        <Item>
-          <ListItemText primary={t("Traffic Graph")} />
-          <GuardState
-            value={verge?.traffic_graph ?? true}
-            valueProps="checked"
-            onCatch={onError}
-            onFormat={onSwitchFormat}
-            onChange={(e) => onChangeData({ traffic_graph: e })}
-            onGuard={(e) => patchVerge({ traffic_graph: e })}
-          >
-            <Switch edge="end" />
-          </GuardState>
-        </Item>
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle>{t("Layout Setting")}</DialogTitle>
+        </DialogHeader>
 
-        <Item>
-          <ListItemText primary={t("Memory Usage")} />
-          <GuardState
-            value={verge?.enable_memory_usage ?? true}
-            valueProps="checked"
-            onCatch={onError}
-            onFormat={onSwitchFormat}
-            onChange={(e) => onChangeData({ enable_memory_usage: e })}
-            onGuard={(e) => patchVerge({ enable_memory_usage: e })}
-          >
-            <Switch edge="end" />
-          </GuardState>
-        </Item>
+        <div className="py-4 space-y-1">
+            <SettingRow label={t("Traffic Graph")}>
+                <GuardState value={verge?.traffic_graph ?? true} valueProps="checked" onCatch={onError} onFormat={onSwitchFormat} onChange={(e) => onChangeData({ traffic_graph: e })} onGuard={(e) => patchVerge({ traffic_graph: e })}>
+                    <Switch />
+                </GuardState>
+            </SettingRow>
 
-        <Item>
-          <ListItemText primary={t("Proxy Group Icon")} />
-          <GuardState
-            value={verge?.enable_group_icon ?? true}
-            valueProps="checked"
-            onCatch={onError}
-            onFormat={onSwitchFormat}
-            onChange={(e) => onChangeData({ enable_group_icon: e })}
-            onGuard={(e) => patchVerge({ enable_group_icon: e })}
-          >
-            <Switch edge="end" />
-          </GuardState>
-        </Item>
+            <SettingRow label={t("Memory Usage")}>
+                <GuardState value={verge?.enable_memory_usage ?? true} valueProps="checked" onCatch={onError} onFormat={onSwitchFormat} onChange={(e) => onChangeData({ enable_memory_usage: e })} onGuard={(e) => patchVerge({ enable_memory_usage: e })}>
+                    <Switch />
+                </GuardState>
+            </SettingRow>
 
-        <Item>
-          <ListItemText
-            primary={
-              <Box sx={{ display: "flex", alignItems: "center", gap: 0.5 }}>
-                <span>{t("Hover Jump Navigator")}</span>
-                <TooltipIcon
-                  title={t("Hover Jump Navigator Info")}
-                  sx={{ opacity: "0.7" }}
-                />
-              </Box>
-            }
-          />
-          <GuardState
-            value={verge?.enable_hover_jump_navigator ?? true}
-            valueProps="checked"
-            onCatch={onError}
-            onFormat={onSwitchFormat}
-            onChange={(e) => onChangeData({ enable_hover_jump_navigator: e })}
-            onGuard={(e) => patchVerge({ enable_hover_jump_navigator: e })}
-          >
-            <Switch edge="end" />
-          </GuardState>
-        </Item>
+            <SettingRow label={t("Proxy Group Icon")}>
+                <GuardState value={verge?.enable_group_icon ?? true} valueProps="checked" onCatch={onError} onFormat={onSwitchFormat} onChange={(e) => onChangeData({ enable_group_icon: e })} onGuard={(e) => patchVerge({ enable_group_icon: e })}>
+                    <Switch />
+                </GuardState>
+            </SettingRow>
 
-        <Item>
-          <ListItemText primary={t("Nav Icon")} />
-          <GuardState
-            value={verge?.menu_icon ?? "monochrome"}
-            onCatch={onError}
-            onFormat={(e: any) => e.target.value}
-            onChange={(e) => onChangeData({ menu_icon: e })}
-            onGuard={(e) => patchVerge({ menu_icon: e })}
-          >
-            <Select size="small" sx={{ width: 140, "> div": { py: "7.5px" } }}>
-              <MenuItem value="monochrome">{t("Monochrome")}</MenuItem>
-              <MenuItem value="colorful">{t("Colorful")}</MenuItem>
-              <MenuItem value="disable">{t("Disable")}</MenuItem>
-            </Select>
-          </GuardState>
-        </Item>
+            <SettingRow label={t("Hover Jump Navigator")} extra={<TooltipIcon tooltip={t("Hover Jump Navigator Info")} />}>
+                <GuardState value={verge?.enable_hover_jump_navigator ?? true} valueProps="checked" onCatch={onError} onFormat={onSwitchFormat} onChange={(e) => onChangeData({ enable_hover_jump_navigator: e })} onGuard={(e) => patchVerge({ enable_hover_jump_navigator: e })}>
+                    <Switch />
+                </GuardState>
+            </SettingRow>
 
-        {OS === "macos" && (
-          <Item>
-            <ListItemText primary={t("Tray Icon")} />
-            <GuardState
-              value={verge?.tray_icon ?? "monochrome"}
-              onCatch={onError}
-              onFormat={(e: any) => e.target.value}
-              onChange={(e) => onChangeData({ tray_icon: e })}
-              onGuard={(e) => patchVerge({ tray_icon: e })}
-            >
-              <Select
-                size="small"
-                sx={{ width: 140, "> div": { py: "7.5px" } }}
-              >
-                <MenuItem value="monochrome">{t("Monochrome")}</MenuItem>
-                <MenuItem value="colorful">{t("Colorful")}</MenuItem>
-              </Select>
-            </GuardState>
-          </Item>
-        )}
-        {/* {OS === "macos" && (
-          <Item>
-            <ListItemText primary={t("Enable Tray Speed")} />
-            <GuardState
-              value={verge?.enable_tray_speed ?? false}
-              valueProps="checked"
-              onCatch={onError}
-              onFormat={onSwitchFormat}
-              onChange={(e) => onChangeData({ enable_tray_speed: e })}
-              onGuard={(e) => patchVerge({ enable_tray_speed: e })}
-            >
-              <Switch edge="end" />
-            </GuardState>
-          </Item>
-        )} */}
-        {OS === "macos" && (
-          <Item>
-            <ListItemText primary={t("Enable Tray Icon")} />
-            <GuardState
-              value={
-                verge?.enable_tray_icon === false &&
-                verge?.enable_tray_speed === false
-                  ? true
-                  : (verge?.enable_tray_icon ?? true)
-              }
-              valueProps="checked"
-              onCatch={onError}
-              onFormat={onSwitchFormat}
-              onChange={(e) => onChangeData({ enable_tray_icon: e })}
-              onGuard={(e) => patchVerge({ enable_tray_icon: e })}
-            >
-              <Switch edge="end" />
-            </GuardState>
-          </Item>
-        )}
+            <SettingRow label={t("Nav Icon")}>
+                <GuardState value={verge?.menu_icon ?? "monochrome"} onCatch={onError} onFormat={v => v} onChange={(e) => onChangeData({ menu_icon: e })} onGuard={(e) => patchVerge({ menu_icon: e })}>
+                    {/* --- НАЧАЛО ИЗМЕНЕНИЙ 1 --- */}
+                    <Select
+                      onValueChange={(value) => onChangeData({ menu_icon: value as any })}
+                      value={verge?.menu_icon}
+                    >
+                    {/* --- КОНЕЦ ИЗМЕНЕНИЙ 1 --- */}
+                        <SelectTrigger className="w-40 h-8"><SelectValue /></SelectTrigger>
+                        <SelectContent>
+                            <SelectItem value="monochrome">{t("Monochrome")}</SelectItem>
+                            <SelectItem value="colorful">{t("Colorful")}</SelectItem>
+                            <SelectItem value="disable">{t("Disable")}</SelectItem>
+                        </SelectContent>
+                    </Select>
+                </GuardState>
+            </SettingRow>
 
-        <Item>
-          <ListItemText primary={t("Common Tray Icon")} />
-          <GuardState
-            value={verge?.common_tray_icon}
-            onCatch={onError}
-            onChange={(e) => onChangeData({ common_tray_icon: e })}
-            onGuard={(e) => patchVerge({ common_tray_icon: e })}
-          >
-            <Button
-              variant="outlined"
-              size="small"
-              startIcon={
-                verge?.common_tray_icon &&
-                commonIcon && (
-                  <img height="20px" src={convertFileSrc(commonIcon)} />
-                )
-              }
-              onClick={async () => {
-                if (verge?.common_tray_icon) {
-                  onChangeData({ common_tray_icon: false });
-                  patchVerge({ common_tray_icon: false });
-                } else {
-                  const selected = await openDialog({
-                    directory: false,
-                    multiple: false,
-                    filters: [
-                      {
-                        name: "Tray Icon Image",
-                        extensions: ["png", "ico"],
-                      },
-                    ],
-                  });
+            {OS === "macos" && (
+                <>
+                    <SettingRow label={t("Tray Icon")}>
+                        <GuardState value={verge?.tray_icon ?? "monochrome"} onCatch={onError} onFormat={v => v} onChange={(e) => onChangeData({ tray_icon: e })} onGuard={(e) => patchVerge({ tray_icon: e })}>
+                            {/* --- НАЧАЛО ИЗМЕНЕНИЙ 2 --- */}
+                            <Select
+                              onValueChange={(value) => onChangeData({ tray_icon: value as any })}
+                              value={verge?.tray_icon}
+                            >
+                            {/* --- КОНЕЦ ИЗМЕНЕНИЙ 2 --- */}
+                                <SelectTrigger className="w-40 h-8"><SelectValue /></SelectTrigger>
+                                <SelectContent>
+                                    <SelectItem value="monochrome">{t("Monochrome")}</SelectItem>
+                                    <SelectItem value="colorful">{t("Colorful")}</SelectItem>
+                                </SelectContent>
+                            </Select>
+                        </GuardState>
+                    </SettingRow>
 
-                  if (selected) {
-                    await copyIconFile(`${selected}`, "common");
-                    await initIconPath();
-                    onChangeData({ common_tray_icon: true });
-                    patchVerge({ common_tray_icon: true });
-                    console.log();
-                  }
-                }
-              }}
-            >
-              {verge?.common_tray_icon ? t("Clear") : t("Browse")}
-            </Button>
-          </GuardState>
-        </Item>
+                    <SettingRow label={t("Enable Tray Icon")}>
+                        <GuardState value={verge?.enable_tray_icon ?? true} valueProps="checked" onCatch={onError} onFormat={onSwitchFormat} onChange={(e) => onChangeData({ enable_tray_icon: e })} onGuard={(e) => patchVerge({ enable_tray_icon: e })}>
+                            <Switch />
+                        </GuardState>
+                    </SettingRow>
+                </>
+            )}
 
-        <Item>
-          <ListItemText primary={t("System Proxy Tray Icon")} />
-          <GuardState
-            value={verge?.sysproxy_tray_icon}
-            onCatch={onError}
-            onChange={(e) => onChangeData({ sysproxy_tray_icon: e })}
-            onGuard={(e) => patchVerge({ sysproxy_tray_icon: e })}
-          >
-            <Button
-              variant="outlined"
-              size="small"
-              startIcon={
-                verge?.sysproxy_tray_icon &&
-                sysproxyIcon && (
-                  <img height="20px" src={convertFileSrc(sysproxyIcon)} />
-                )
-              }
-              onClick={async () => {
-                if (verge?.sysproxy_tray_icon) {
-                  onChangeData({ sysproxy_tray_icon: false });
-                  patchVerge({ sysproxy_tray_icon: false });
-                } else {
-                  const selected = await openDialog({
-                    directory: false,
-                    multiple: false,
-                    filters: [
-                      {
-                        name: "Tray Icon Image",
-                        extensions: ["png", "ico"],
-                      },
-                    ],
-                  });
-                  if (selected) {
-                    await copyIconFile(`${selected}`, "sysproxy");
-                    await initIconPath();
-                    onChangeData({ sysproxy_tray_icon: true });
-                    patchVerge({ sysproxy_tray_icon: true });
-                  }
-                }
-              }}
-            >
-              {verge?.sysproxy_tray_icon ? t("Clear") : t("Browse")}
-            </Button>
-          </GuardState>
-        </Item>
+            <SettingRow label={t("Common Tray Icon")}>
+                <Button variant="outline" size="sm" className="h-8" onClick={() => handleIconChange('common')}>
+                    {verge?.common_tray_icon && commonIcon && <img src={convertFileSrc(commonIcon)} className="h-5 mr-2" alt="common tray icon" />}
+                    {verge?.common_tray_icon ? t("Clear") : t("Browse")}
+                </Button>
+            </SettingRow>
 
-        <Item>
-          <ListItemText primary={t("Tun Tray Icon")} />
-          <GuardState
-            value={verge?.tun_tray_icon}
-            onCatch={onError}
-            onChange={(e) => onChangeData({ tun_tray_icon: e })}
-            onGuard={(e) => patchVerge({ tun_tray_icon: e })}
-          >
-            <Button
-              variant="outlined"
-              size="small"
-              startIcon={
-                verge?.tun_tray_icon &&
-                tunIcon && <img height="20px" src={convertFileSrc(tunIcon)} />
-              }
-              onClick={async () => {
-                if (verge?.tun_tray_icon) {
-                  onChangeData({ tun_tray_icon: false });
-                  patchVerge({ tun_tray_icon: false });
-                } else {
-                  const selected = await openDialog({
-                    directory: false,
-                    multiple: false,
-                    filters: [
-                      {
-                        name: "Tun Icon Image",
-                        extensions: ["png", "ico"],
-                      },
-                    ],
-                  });
-                  if (selected) {
-                    await copyIconFile(`${selected}`, "tun");
-                    await initIconPath();
-                    onChangeData({ tun_tray_icon: true });
-                    patchVerge({ tun_tray_icon: true });
-                  }
-                }
-              }}
-            >
-              {verge?.tun_tray_icon ? t("Clear") : t("Browse")}
-            </Button>
-          </GuardState>
-        </Item>
-      </List>
-    </BaseDialog>
+            <SettingRow label={t("System Proxy Tray Icon")}>
+                 <Button variant="outline" size="sm" className="h-8" onClick={() => handleIconChange('sysproxy')}>
+                    {verge?.sysproxy_tray_icon && sysproxyIcon && <img src={convertFileSrc(sysproxyIcon)} className="h-5 mr-2" alt="system proxy tray icon"/>}
+                    {verge?.sysproxy_tray_icon ? t("Clear") : t("Browse")}
+                </Button>
+            </SettingRow>
+
+            <SettingRow label={t("Tun Tray Icon")}>
+                 <Button variant="outline" size="sm" className="h-8" onClick={() => handleIconChange('tun')}>
+                    {verge?.tun_tray_icon && tunIcon && <img src={convertFileSrc(tunIcon)} className="h-5 mr-2" alt="tun mode tray icon"/>}
+                    {verge?.tun_tray_icon ? t("Clear") : t("Browse")}
+                </Button>
+            </SettingRow>
+        </div>
+
+        <DialogFooter>
+            <DialogClose asChild><Button type="button" variant="outline">{t("Close")}</Button></DialogClose>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
   );
 });
-
-const Item = styled(ListItem)(() => ({
-  padding: "5px 2px",
-}));