refactor: format code with prettier and fix quotation marks

.github/FUNDING.yml

@@ -1 +1,5 @@
-custom: ['https://t.me/tribute/app?startapp=dtfk','https://t.me/tribute/app?startapp=dtLE']
+custom:
+  [
+    "https://t.me/tribute/app?startapp=dtfk",
+    "https://t.me/tribute/app?startapp=dtLE",
+  ]

.github/workflows/release.yml

@@ -603,4 +603,3 @@ jobs:
           token: ${{ secrets.TELEGRAM_TOKEN }}
           message_file: release.txt
           format: markdown
-

UPDATELOG.md

@@ -27,7 +27,6 @@
 - corrected side menu in compressed window
 - added check at the main toggle switch, now it cannot be enabled if there are no profiles.
 
-
 ## v0.2.1
 
 - added headers "announce-url", "update-always"

hooks/use-mobile.ts

@@ -1,19 +1,21 @@
-import * as React from "react"
+import * as React from "react";
 
-const MOBILE_BREAKPOINT = 768
+const MOBILE_BREAKPOINT = 768;
 
 export function useIsMobile() {
-  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(
+    undefined,
+  );
 
   React.useEffect(() => {
-    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
     const onChange = () => {
-      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
-    }
+    };
-    mql.addEventListener("change", onChange)
+    mql.addEventListener("change", onChange);
-    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
-    return () => mql.removeEventListener("change", onChange)
+    return () => mql.removeEventListener("change", onChange);
-  }, [])
+  }, []);
 
-  return !!isMobile
+  return !!isMobile;
 }

src-tauri/webview2.arm64.json

@@ -31,4 +31,3 @@
     }
   }
 }
-

src/components/connection/connection-table.tsx

@@ -73,7 +73,11 @@ interface Props {
   scrollerRef: (element: HTMLElement | Window | null) => void;
 }
 
-const ColumnResizer = ({ header }: { header: Header<ConnectionRow, unknown> }) => {
+const ColumnResizer = ({
+  header,
+}: {
+  header: Header<ConnectionRow, unknown>;
+}) => {
   return (
     <div
       onMouseDown={header.getResizeHandler()}
@@ -82,7 +86,7 @@ const ColumnResizer = ({ header }: { header: Header<ConnectionRow, unknown> }) =
         "absolute right-0 top-0 h-full w-1 cursor-col-resize select-none touch-none",
         "bg-transparent hover:bg-primary/50 active:bg-primary",
         "transition-colors duration-150",
-              header.column.getIsResizing() && "bg-primary"
+        header.column.getIsResizing() && "bg-primary",
       )}
       style={{
         transform: header.column.getIsResizing() ? `translateX(0px)` : "",
@@ -141,7 +145,7 @@ export const ConnectionTable = (props: Props) => {
   useEffect(() => {
     localStorage.setItem(
       "connection-table-widths",
-        JSON.stringify(columnSizing)
+      JSON.stringify(columnSizing),
     );
   }, [columnSizing]);
 
@@ -286,7 +290,7 @@ export const ConnectionTable = (props: Props) => {
         maxSize: 220,
       },
     ],
-      [columnSizing]
+    [columnSizing],
   );
 
   const table = useReactTable({
@@ -331,7 +335,7 @@ export const ConnectionTable = (props: Props) => {
                   key={header.id}
                   className={cn(
                     "sticky top-0 z-10",
-                              "p-2 text-xs font-semibold select-none border-r last:border-r-0 bg-background h-10"
+                    "p-2 text-xs font-semibold select-none border-r last:border-r-0 bg-background h-10",
                   )}
                   style={{
                     width: header.getSize(),
@@ -344,7 +348,7 @@ export const ConnectionTable = (props: Props) => {
                       ? null
                       : flexRender(
                           header.column.columnDef.header,
-                                  header.getContext()
+                          header.getContext(),
                         )}
                   </div>
                   {header.column.getCanResize() && (

src/components/home/power-button.tsx

@@ -1,24 +1,26 @@
-import React from 'react';
+import React from "react";
-import { cn } from '@root/lib/utils';
+import { cn } from "@root/lib/utils";
-import { Power } from 'lucide-react';
+import { Power } from "lucide-react";
 
-export interface PowerButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+export interface PowerButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   checked?: boolean;
   loading?: boolean;
 }
 
-export const PowerButton = React.forwardRef<HTMLButtonElement, PowerButtonProps>(
+export const PowerButton = React.forwardRef<
-    ({ className, checked = false, loading = false, ...props }, ref) => {
+  HTMLButtonElement,
-        const state = checked ? 'on' : 'off';
+  PowerButtonProps
+>(({ className, checked = false, loading = false, ...props }, ref) => {
+  const state = checked ? "on" : "off";
 
   return (
     <div className="relative flex items-center justify-center h-44 w-44">
-
       <div
         className={cn(
-                        'absolute h-28 w-28 rounded-full blur-3xl transition-all duration-500',
+          "absolute h-28 w-28 rounded-full blur-3xl transition-all duration-500",
-                        state === 'on' ? 'bg-green-400/60' : 'bg-red-500/40',
+          state === "on" ? "bg-green-400/60" : "bg-red-500/40",
-                        props.disabled && 'opacity-0'
+          props.disabled && "opacity-0",
         )}
       />
 
@@ -28,37 +30,43 @@ export const PowerButton = React.forwardRef<HTMLButtonElement, PowerButtonProps>
         disabled={loading || props.disabled}
         data-state={state}
         className={cn(
-                        'relative z-10 flex items-center justify-center h-36 w-36 rounded-full border-2',
+          "relative z-10 flex items-center justify-center h-36 w-36 rounded-full border-2",
-                        'backdrop-blur-sm bg-white/10 border-white/20',
+          "backdrop-blur-sm bg-white/10 border-white/20",
-                        'text-red-500 shadow-[0_0_30px_rgba(239,68,68,0.6)]',
+          "text-red-500 shadow-[0_0_30px_rgba(239,68,68,0.6)]",
-                        'data-[state=on]:text-green-500 dark:data-[state=on]:text-white',
+          "data-[state=on]:text-green-500 dark:data-[state=on]:text-white",
-                        'data-[state=on]:shadow-[0_0_50px_rgba(34,197,94,1)]',
+          "data-[state=on]:shadow-[0_0_50px_rgba(34,197,94,1)]",
-                        'transition-all duration-300 hover:scale-105 active:scale-95 focus:outline-none',
+          "transition-all duration-300 hover:scale-105 active:scale-95 focus:outline-none",
-                        'disabled:cursor-not-allowed disabled:scale-100',
+          "disabled:cursor-not-allowed disabled:scale-100",
 
           // Стили ТОЛЬКО для отключенного состояния (но не для загрузки)
-                        (props.disabled && !loading) && 'grayscale opacity-50 shadow-none bg-slate-100/70 border-slate-300/80',
+          props.disabled &&
-                        className
+            !loading &&
+            "grayscale opacity-50 shadow-none bg-slate-100/70 border-slate-300/80",
+          className,
         )}
         {...props}
       >
-                    <Power className={cn(
+        <Power
+          className={cn(
             "h-20 w-20",
-                    !props.disabled && "active:scale-90 transition-transform duration-300"
+            !props.disabled &&
-                    )} />
+              "active:scale-90 transition-transform duration-300",
+          )}
+        />
       </button>
 
       {loading && (
         <div className="absolute inset-0 flex items-center justify-center z-20">
-                        <div className={cn(
+          <div
-                            'h-full w-full animate-spin rounded-full border-4',
+            className={cn(
-                            'border-transparent',
+              "h-full w-full animate-spin rounded-full border-4",
-                            checked ? 'border-t-green-500' : 'border-t-red-500',
+              "border-transparent",
-                            'blur-xs'
+              checked ? "border-t-green-500" : "border-t-red-500",
-                        )} />
+              "blur-xs",
+            )}
+          />
         </div>
       )}
     </div>
   );
-    }
+});
-);

src/components/layout/sidebar.tsx

@@ -1,16 +1,18 @@
-import { Link } from 'react-router-dom';
+import { Link } from "react-router-dom";
 import {
   Sidebar,
-  SidebarContent, SidebarFooter,
+  SidebarContent,
+  SidebarFooter,
   SidebarGroup,
   SidebarGroupContent,
   SidebarHeader,
   SidebarMenu,
   SidebarMenuButton,
-  SidebarMenuItem, useSidebar,
+  SidebarMenuItem,
-} from "@/components/ui/sidebar"
+  useSidebar,
-import { t } from 'i18next';
+} from "@/components/ui/sidebar";
-import { cn } from '@root/lib/utils';
+import { t } from "i18next";
+import { cn } from "@root/lib/utils";
 
 import {
   Home,
@@ -19,21 +21,22 @@ import {
   Cable,
   ListChecks,
   FileText,
-  Settings, EarthLock,
+  Settings,
-} from 'lucide-react';
+  EarthLock,
+} from "lucide-react";
 import { UpdateButton } from "@/components/layout/update-button";
 import React from "react";
-import { SheetClose } from '@/components/ui/sheet';
+import { SheetClose } from "@/components/ui/sheet";
-import logo from "@/assets/image/logo.png"
+import logo from "@/assets/image/logo.png";
 
 const menuItems = [
-  { title: 'Home', url: '/home', icon: Home },
+  { title: "Home", url: "/home", icon: Home },
-  { title: 'Profiles', url: '/profile', icon: Users },
+  { title: "Profiles", url: "/profile", icon: Users },
-  { title: 'Proxies', url: '/proxies', icon: Server },
+  { title: "Proxies", url: "/proxies", icon: Server },
-  { title: 'Connections', url: '/connections', icon: Cable },
+  { title: "Connections", url: "/connections", icon: Cable },
-  { title: 'Rules', url: '/rules', icon: ListChecks },
+  { title: "Rules", url: "/rules", icon: ListChecks },
-  { title: 'Logs', url: '/logs', icon: FileText },
+  { title: "Logs", url: "/logs", icon: FileText },
-  { title: 'Settings', url: '/settings', icon: Settings },
+  { title: "Settings", url: "/settings", icon: Settings },
 ];
 
 export function AppSidebar() {
@@ -41,18 +44,15 @@ export function AppSidebar() {
   return (
     <Sidebar variant="floating" collapsible="icon">
       <SidebarHeader>
-        <SidebarMenuButton size="lg"
+        <SidebarMenuButton
+          size="lg"
           className={cn(
             "flex h-12 items-center transition-all duration-200",
             "group-data-[state=expanded]:w-full group-data-[state=expanded]:gap-2 group-data-[state=expanded]:px-3",
-            "group-data-[state=collapsed]:w-full group-data-[state=collapsed]:justify-center"
+            "group-data-[state=collapsed]:w-full group-data-[state=collapsed]:justify-center",
           )}
         >
-          <img
+          <img src={logo} alt="logo" className="h-6 w-6 flex-shrink-0" />
-            src={logo}
-            alt="logo"
-            className="h-6 w-6 flex-shrink-0"
-          />
           <span className="font-semibold whitespace-nowrap group-data-[state=collapsed]:hidden">
             Koala Clash
           </span>
@@ -69,30 +69,29 @@ export function AppSidebar() {
                     key={item.title}
                     to={item.url}
                     className={cn(
-                      'flex items-center gap-3 rounded-lg px-3 py-2 text-muted-foreground transition-all hover:text-primary',
+                      "flex items-center gap-3 rounded-lg px-3 py-2 text-muted-foreground transition-all hover:text-primary",
-                      'data-[active=true]:font-semibold data-[active=true]:border'
+                      "data-[active=true]:font-semibold data-[active=true]:border",
                     )}
                   >
                     <item.icon className="h-4 w-4 drop-shadow-md" />
                     {t(item.title)}
                   </Link>
-                )
+                );
                 return (
                   <SidebarMenuItem key={item.title} className="my-1">
                     <SidebarMenuButton
                       asChild
                       isActive={isActive}
-                    tooltip={t(item.title)}>
+                      tooltip={t(item.title)}
+                    >
                       {isMobile ? (
-                        <SheetClose asChild>
+                        <SheetClose asChild>{linkElement}</SheetClose>
-                          {linkElement}
-                        </SheetClose>
                       ) : (
                         linkElement
                       )}
                     </SidebarMenuButton>
                   </SidebarMenuItem>
-                )
+                );
               })}
             </SidebarMenu>
           </SidebarGroupContent>
@@ -104,5 +103,5 @@ export function AppSidebar() {
         </div>
       </SidebarFooter>
     </Sidebar>
-  )
+  );
 }

src/components/layout/update-button.tsx

@@ -36,7 +36,7 @@ export const UpdateButton = (props: Props) => {
   return (
     <>
       <UpdateViewer ref={viewerRef} />
-      {sidebarState === 'collapsed' ? (
+      {sidebarState === "collapsed" ? (
         <Button
           variant="outline"
           size="icon"

src/components/layout/use-custom-theme.ts

@@ -1,7 +1,10 @@
 import { useEffect, useMemo, useState } from "react";
 import { useSetThemeMode, useThemeMode } from "@/services/states";
 import { useVerge } from "@/hooks/use-verge";
-import { getCurrentWebviewWindow, WebviewWindow } from "@tauri-apps/api/webviewWindow";
+import {
+  getCurrentWebviewWindow,
+  WebviewWindow,
+} from "@tauri-apps/api/webviewWindow";
 import { Theme } from "@tauri-apps/api/window";
 
 export const useCustomTheme = () => {
@@ -12,8 +15,10 @@ export const useCustomTheme = () => {
   const mode = useThemeMode();
   const setMode = useSetThemeMode();
 
-  const [systemTheme, setSystemTheme] = useState(
+  const [systemTheme, setSystemTheme] = useState(() =>
-      () => window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"
+    window.matchMedia("(prefers-color-scheme: dark)").matches
+      ? "dark"
+      : "light",
   );
 
   useEffect(() => {
@@ -23,15 +28,15 @@ export const useCustomTheme = () => {
   }, [theme_mode, setMode]);
 
   useEffect(() => {
-    if (mode !== 'system') return;
+    if (mode !== "system") return;
 
     const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
     const handleChange = (e: MediaQueryListEvent) => {
       setSystemTheme(e.matches ? "dark" : "light");
     };
 
-    mediaQuery.addEventListener('change', handleChange);
+    mediaQuery.addEventListener("change", handleChange);
-    return () => mediaQuery.removeEventListener('change', handleChange);
+    return () => mediaQuery.removeEventListener("change", handleChange);
   }, [mode]);
 
   useEffect(() => {
@@ -45,7 +50,6 @@ export const useCustomTheme = () => {
     } else {
       appWindow.setTheme(activeTheme as Theme).catch(console.error);
     }
-
   }, [mode, systemTheme, appWindow, theme_mode]);
 
   return {};

src/components/profile/hwid-error-dialog.tsx

@@ -1,12 +1,12 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState } from "react";
-import { useTranslation } from 'react-i18next';
+import { useTranslation } from "react-i18next";
 import {
   Dialog,
   DialogContent,
   DialogHeader,
   DialogTitle,
   DialogDescription,
-  DialogFooter
+  DialogFooter,
 } from "@/components/ui/dialog";
 import { Button } from "@/components/ui/button";
 import { AlertTriangle } from "lucide-react";
@@ -21,10 +21,10 @@ export const HwidErrorDialog = () => {
       setErrorMessage(customEvent.detail);
     };
 
-    window.addEventListener('show-hwid-error', handleShowHwidError);
+    window.addEventListener("show-hwid-error", handleShowHwidError);
 
     return () => {
-      window.removeEventListener('show-hwid-error', handleShowHwidError);
+      window.removeEventListener("show-hwid-error", handleShowHwidError);
     };
   }, []);
 

src/components/profile/profile-item.tsx

@@ -65,7 +65,8 @@ import {
   ListTree,
   CheckCircle,
   Infinity,
-  RefreshCw, Network,
+  RefreshCw,
+  Network,
 } from "lucide-react";
 import { t } from "i18next";
 
@@ -299,7 +300,8 @@ export const ProfileItem = (props: Props) => {
   };
 
   const MAX_NAME_LENGTH = 25;
-  const truncatedName = name.length > MAX_NAME_LENGTH
+  const truncatedName =
+    name.length > MAX_NAME_LENGTH
       ? `${name.slice(0, MAX_NAME_LENGTH)}...`
       : name;
 
@@ -344,10 +346,7 @@ export const ProfileItem = (props: Props) => {
                   ) : null}
                 </div>
                 <div className="flex items-center flex-shrink-0">
-                  <Badge
+                  <Badge variant="outline" className="text-xs shadow-sm">
-                    variant="outline"
-                    className="text-xs shadow-sm"
-                  >
                     {type}
                   </Badge>
                 </div>
@@ -389,14 +388,13 @@ export const ProfileItem = (props: Props) => {
                 <div className="flex items-center justify-between">
                   <div className="flex items-center">
                     <Download className="h-3 w-3 inline mr-1.5" />
-                    <span className="pr-5">
+                    <span className="pr-5">{parseTraffic(download)}</span>
-                      {parseTraffic(download)}
-                    </span>
                     <Network className="h-3 w-3 inline mr-1.5" />
                     {total > 0 ? (
                       <span>{parseTraffic(total)}</span>
-                    ) : <Infinity className="h-3 w-3 inline mr-1.5" />}
+                    ) : (
-
+                      <Infinity className="h-3 w-3 inline mr-1.5" />
+                    )}
                   </div>
                 </div>
               </div>

src/components/profile/profile-viewer.tsx

@@ -12,7 +12,8 @@ import {
   createProfile,
   patchProfile,
   importProfile,
-  enhanceProfiles, createProfileFromShareLink,
+  enhanceProfiles,
+  createProfileFromShareLink,
 } from "@/services/cmds";
 import { useProfiles } from "@/hooks/use-profiles";
 import { showNotice } from "@/services/noticeService";
@@ -138,7 +139,9 @@ export const ProfileViewer = forwardRef<ProfileViewerRef, Props>(
       setIsCheckingUrl(true);
 
       const handler = setTimeout(() => {
-        const isValid = /^(https?|vmess|vless|ss|socks|trojan):\/\//.test(importUrl);
+        const isValid = /^(https?|vmess|vless|ss|socks|trojan):\/\//.test(
+          importUrl,
+        );
         setIsUrlValid(isValid);
         setIsCheckingUrl(false);
       }, 500);
@@ -165,20 +168,32 @@ export const ProfileViewer = forwardRef<ProfileViewerRef, Props>(
         await enhanceProfiles();
         setOpen(false);
       } catch (err: any) {
-        const errorMessage = typeof err === 'string' ? err : (err.message || String(err));
+        const errorMessage =
+          typeof err === "string" ? err : err.message || String(err);
         const lowerErrorMessage = errorMessage.toLowerCase();
-        if (lowerErrorMessage.includes('device') || lowerErrorMessage.includes('устройств')) {
+        if (
-          window.dispatchEvent(new CustomEvent('show-hwid-error', { detail: errorMessage }));
+          lowerErrorMessage.includes("device") ||
+          lowerErrorMessage.includes("устройств")
+        ) {
+          window.dispatchEvent(
+            new CustomEvent("show-hwid-error", { detail: errorMessage }),
+          );
         } else if (!isShareLink && errorMessage.includes("failed to fetch")) {
           showNotice("info", t("Import failed, retrying with Clash proxy..."));
           try {
-              await importProfile(importUrl, { with_proxy: false, self_proxy: true });
+            await importProfile(importUrl, {
+              with_proxy: false,
+              self_proxy: true,
+            });
             showNotice("success", t("Profile Imported with Clash proxy"));
             props.onChange();
             await enhanceProfiles();
             setOpen(false);
           } catch (retryErr: any) {
-              showNotice("error", `${t("Import failed even with Clash proxy")}: ${retryErr?.message || retryErr.toString()}`);
+            showNotice(
+              "error",
+              `${t("Import failed even with Clash proxy")}: ${retryErr?.message || retryErr.toString()}`,
+            );
           }
         } else {
           showNotice("error", errorMessage);
@@ -304,13 +319,20 @@ export const ProfileViewer = forwardRef<ProfileViewerRef, Props>(
               {/^(vmess|vless|ss|socks|trojan):\/\//.test(importUrl) && (
                 <div className="space-y-2">
                   <Label>{t("Template")}</Label>
-                  <Select value={selectedTemplate} onValueChange={setSelectedTemplate}>
+                  <Select
+                    value={selectedTemplate}
+                    onValueChange={setSelectedTemplate}
+                  >
                     <SelectTrigger>
                       <SelectValue placeholder="Select a template..." />
                     </SelectTrigger>
                     <SelectContent>
-                          <SelectItem value="default">{t("Default Template")}</SelectItem>
+                      <SelectItem value="default">
-                          <SelectItem value="without_ru">{t("Template without RU Rules")}</SelectItem>
+                        {t("Default Template")}
+                      </SelectItem>
+                      <SelectItem value="without_ru">
+                        {t("Template without RU Rules")}
+                      </SelectItem>
                     </SelectContent>
                   </Select>
                 </div>

src/components/proxy/proxy-groups.tsx

@@ -24,7 +24,6 @@ import delayManager from "@/services/delay";
 import { useTranslation } from "react-i18next";
 import { ScrollTopButton } from "../layout/scroll-top-button";
 
-
 function throttle<T extends (...args: any[]) => any>(
   func: T,
   wait: number,
@@ -53,7 +52,6 @@ function throttle<T extends (...args: any[]) => any>(
   };
 }
 
-
 interface Props {
   mode: string;
 }
@@ -72,7 +70,6 @@ export const ProxyGroups = memo((props: Props) => {
   const scrollerRef = useRef<Element | null>(null);
   const [showScrollTop, setShowScrollTop] = useState(false);
 
-
   // Обработчик скролла для показа/скрытия кнопки "Наверх"
   const handleScroll = useCallback(
     throttle((e: any) => {

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

@@ -112,7 +112,7 @@ export const LayoutViewer = forwardRef<DialogRef>((props, ref) => {
   }));
 
   const handleConfigChange = (patch: Partial<IVergeConfig>) => {
-    setLocalConfig(prev => ({ ...prev, ...patch }));
+    setLocalConfig((prev) => ({ ...prev, ...patch }));
   };
 
   const handleIconChange = useLockFn(
@@ -133,7 +133,8 @@ export const LayoutViewer = forwardRef<DialogRef>((props, ref) => {
           handleConfigChange({ [key]: true });
         }
       }
-    });
+    },
+  );
 
   const handleSave = useLockFn(async () => {
     setLoading(true);
@@ -160,12 +161,18 @@ export const LayoutViewer = forwardRef<DialogRef>((props, ref) => {
             <>
               <SettingRow label={t("Tray Icon")}>
                 <Select
-                        onValueChange={(value) => handleConfigChange({ tray_icon: value as any })}
+                  onValueChange={(value) =>
+                    handleConfigChange({ tray_icon: value as any })
+                  }
                   value={localConfig.tray_icon ?? "monochrome"}
                 >
-                      <SelectTrigger className="w-40 h-8"><SelectValue /></SelectTrigger>
+                  <SelectTrigger className="w-40 h-8">
+                    <SelectValue />
+                  </SelectTrigger>
                   <SelectContent>
-                        <SelectItem value="monochrome">{t("Monochrome")}</SelectItem>
+                    <SelectItem value="monochrome">
+                      {t("Monochrome")}
+                    </SelectItem>
                     <SelectItem value="colorful">{t("Colorful")}</SelectItem>
                   </SelectContent>
                 </Select>
@@ -174,34 +181,63 @@ export const LayoutViewer = forwardRef<DialogRef>((props, ref) => {
               <SettingRow label={t("Enable Tray Icon")}>
                 <Switch
                   checked={localConfig.enable_tray_icon ?? true}
-                        onCheckedChange={(checked) => handleConfigChange({ enable_tray_icon: checked })}
+                  onCheckedChange={(checked) =>
+                    handleConfigChange({ enable_tray_icon: checked })
+                  }
                 />
               </SettingRow>
             </>
           )}
 
           <SettingRow label={t("Common Tray Icon")}>
-              <Button variant="outline" size="sm" className="h-8" onClick={() => handleIconChange("common")}>
+            <Button
+              variant="outline"
+              size="sm"
+              className="h-8"
+              onClick={() => handleIconChange("common")}
+            >
               {localConfig.common_tray_icon && commonIcon && (
-                    <img src={convertFileSrc(commonIcon)} className="h-5 mr-2" alt="common tray icon" />
+                <img
+                  src={convertFileSrc(commonIcon)}
+                  className="h-5 mr-2"
+                  alt="common tray icon"
+                />
               )}
               {localConfig.common_tray_icon ? t("Clear") : t("Browse")}
             </Button>
           </SettingRow>
 
           <SettingRow label={t("System Proxy Tray Icon")}>
-              <Button variant="outline" size="sm" className="h-8" onClick={() => handleIconChange("sysproxy")}>
+            <Button
+              variant="outline"
+              size="sm"
+              className="h-8"
+              onClick={() => handleIconChange("sysproxy")}
+            >
               {localConfig.sysproxy_tray_icon && sysproxyIcon && (
-                    <img src={convertFileSrc(sysproxyIcon)} className="h-5 mr-2" alt="system proxy tray icon" />
+                <img
+                  src={convertFileSrc(sysproxyIcon)}
+                  className="h-5 mr-2"
+                  alt="system proxy tray icon"
+                />
               )}
               {localConfig.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")}>
+            <Button
+              variant="outline"
+              size="sm"
+              className="h-8"
+              onClick={() => handleIconChange("tun")}
+            >
               {localConfig.tun_tray_icon && tunIcon && (
-                    <img src={convertFileSrc(tunIcon)} className="h-5 mr-2" alt="tun mode tray icon" />
+                <img
+                  src={convertFileSrc(tunIcon)}
+                  className="h-5 mr-2"
+                  alt="tun mode tray icon"
+                />
               )}
               {localConfig.tun_tray_icon ? t("Clear") : t("Browse")}
             </Button>
@@ -210,7 +246,9 @@ export const LayoutViewer = forwardRef<DialogRef>((props, ref) => {
 
         <DialogFooter>
           <DialogClose asChild>
-              <Button type="button" variant="outline">{t("Cancel")}</Button>
+            <Button type="button" variant="outline">
+              {t("Cancel")}
+            </Button>
           </DialogClose>
           <Button type="button" onClick={handleSave} disabled={loading}>
             {loading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}

src/components/setting/setting-system.tsx

@@ -43,7 +43,7 @@ import {
   Power,
   BellOff,
   Repeat,
-  Fingerprint
+  Fingerprint,
 } from "lucide-react";
 
 // Модальные окна
@@ -110,7 +110,7 @@ const SettingSystem = ({ onError }: Props) => {
   const { profiles } = useProfiles();
   const hasProfiles = useMemo(() => {
     const items = profiles?.items ?? [];
-    return items.some(p => p.type === 'local' || p.type === 'remote');
+    return items.some((p) => p.type === "local" || p.type === "remote");
   }, [profiles]);
 
   const {
@@ -261,7 +261,10 @@ const SettingSystem = ({ onError }: Props) => {
                 );
               }
               if (e) {
-                return patchVerge({ enable_tun_mode: true, enable_system_proxy: false });
+                return patchVerge({
+                  enable_tun_mode: true,
+                  enable_system_proxy: false,
+                });
               } else {
                 return patchVerge({ enable_tun_mode: false });
               }

src/components/ui/dropdown-menu.tsx

@@ -188,7 +188,7 @@ function DropdownMenuSeparator({
       className={cn(
         "-mx-1 my-1 h-px",
         "bg-gray-400/50 dark:bg-white/20",
-              className
+        className,
       )}
       {...props}
     />

src/components/ui/sidebar.tsx

@@ -1,54 +1,54 @@
-import * as React from "react"
+import * as React from "react";
-import { Slot } from "@radix-ui/react-slot"
+import { Slot } from "@radix-ui/react-slot";
-import { cva, VariantProps } from "class-variance-authority"
+import { cva, VariantProps } from "class-variance-authority";
-import { PanelLeftIcon } from "lucide-react"
+import { PanelLeftIcon } from "lucide-react";
 
-import { useIsMobile } from "@root/hooks/use-mobile"
+import { useIsMobile } from "@root/hooks/use-mobile";
-import { cn } from "@root/lib/utils"
+import { cn } from "@root/lib/utils";
-import { Button } from "@root/src/components/ui/button"
+import { Button } from "@root/src/components/ui/button";
-import { Input } from "@root/src/components/ui/input"
+import { Input } from "@root/src/components/ui/input";
-import { Separator } from "@root/src/components/ui/separator"
+import { Separator } from "@root/src/components/ui/separator";
 import {
   Sheet,
   SheetContent,
   SheetDescription,
   SheetHeader,
   SheetTitle,
-} from "@root/src/components/ui/sheet"
+} from "@root/src/components/ui/sheet";
-import { Skeleton } from "@root/src/components/ui/skeleton"
+import { Skeleton } from "@root/src/components/ui/skeleton";
 import {
   Tooltip,
   TooltipContent,
   TooltipProvider,
   TooltipTrigger,
-} from "@root/src/components/ui/tooltip"
+} from "@root/src/components/ui/tooltip";
 
-const SIDEBAR_COOKIE_NAME = "sidebar_state"
+const SIDEBAR_COOKIE_NAME = "sidebar_state";
-const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
+const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
-const SIDEBAR_WIDTH = "16rem"
+const SIDEBAR_WIDTH = "16rem";
-const SIDEBAR_WIDTH_MOBILE = "18rem"
+const SIDEBAR_WIDTH_MOBILE = "18rem";
-const SIDEBAR_WIDTH_ICON = "3rem"
+const SIDEBAR_WIDTH_ICON = "3rem";
-const SIDEBAR_KEYBOARD_SHORTCUT = "b"
+const SIDEBAR_KEYBOARD_SHORTCUT = "b";
 
 type SidebarContextProps = {
-  state: "expanded" | "collapsed"
+  state: "expanded" | "collapsed";
-  open: boolean
+  open: boolean;
-  setOpen: (open: boolean) => void
+  setOpen: (open: boolean) => void;
-  openMobile: boolean
+  openMobile: boolean;
-  setOpenMobile: (open: boolean) => void
+  setOpenMobile: (open: boolean) => void;
-  isMobile: boolean
+  isMobile: boolean;
-  toggleSidebar: () => void
+  toggleSidebar: () => void;
-}
+};
 
-const SidebarContext = React.createContext<SidebarContextProps | null>(null)
+const SidebarContext = React.createContext<SidebarContextProps | null>(null);
 
 function useSidebar() {
-  const context = React.useContext(SidebarContext)
+  const context = React.useContext(SidebarContext);
   if (!context) {
-    throw new Error("useSidebar must be used within a SidebarProvider.")
+    throw new Error("useSidebar must be used within a SidebarProvider.");
   }
 
-  return context
+  return context;
 }
 
 function SidebarProvider({
@@ -60,36 +60,36 @@ function SidebarProvider({
   children,
   ...props
 }: React.ComponentProps<"div"> & {
-  defaultOpen?: boolean
+  defaultOpen?: boolean;
-  open?: boolean
+  open?: boolean;
-  onOpenChange?: (open: boolean) => void
+  onOpenChange?: (open: boolean) => void;
 }) {
-  const isMobile = useIsMobile()
+  const isMobile = useIsMobile();
-  const [openMobile, setOpenMobile] = React.useState(false)
+  const [openMobile, setOpenMobile] = React.useState(false);
 
   // This is the internal state of the sidebar.
   // We use openProp and setOpenProp for control from outside the component.
-  const [_open, _setOpen] = React.useState(defaultOpen)
+  const [_open, _setOpen] = React.useState(defaultOpen);
-  const open = openProp ?? _open
+  const open = openProp ?? _open;
   const setOpen = React.useCallback(
     (value: boolean | ((value: boolean) => boolean)) => {
-      const openState = typeof value === "function" ? value(open) : value
+      const openState = typeof value === "function" ? value(open) : value;
       if (setOpenProp) {
-        setOpenProp(openState)
+        setOpenProp(openState);
       } else {
-        _setOpen(openState)
+        _setOpen(openState);
       }
 
       // This sets the cookie to keep the sidebar state.
-      document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`
+      document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
     },
-    [setOpenProp, open]
+    [setOpenProp, open],
-  )
+  );
 
   // Helper to toggle the sidebar.
   const toggleSidebar = React.useCallback(() => {
-    return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open)
+    return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open);
-  }, [isMobile, setOpen, setOpenMobile])
+  }, [isMobile, setOpen, setOpenMobile]);
 
   // Adds a keyboard shortcut to toggle the sidebar.
   React.useEffect(() => {
@@ -98,18 +98,18 @@ function SidebarProvider({
         event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
         (event.metaKey || event.ctrlKey)
       ) {
-        event.preventDefault()
+        event.preventDefault();
-        toggleSidebar()
+        toggleSidebar();
-      }
       }
+    };
 
-    window.addEventListener("keydown", handleKeyDown)
+    window.addEventListener("keydown", handleKeyDown);
-    return () => window.removeEventListener("keydown", handleKeyDown)
+    return () => window.removeEventListener("keydown", handleKeyDown);
-  }, [toggleSidebar])
+  }, [toggleSidebar]);
 
   // We add a state so that we can do data-state="expanded" or "collapsed".
   // This makes it easier to style the sidebar with Tailwind classes.
-  const state = open ? "expanded" : "collapsed"
+  const state = open ? "expanded" : "collapsed";
 
   const contextValue = React.useMemo<SidebarContextProps>(
     () => ({
@@ -121,8 +121,8 @@ function SidebarProvider({
       setOpenMobile,
       toggleSidebar,
     }),
-    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]
+    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar],
-  )
+  );
 
   return (
     <SidebarContext.Provider value={contextValue}>
@@ -138,7 +138,7 @@ function SidebarProvider({
           }
           className={cn(
             "group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full",
-            className
+            className,
           )}
           {...props}
         >
@@ -146,7 +146,7 @@ function SidebarProvider({
         </div>
       </TooltipProvider>
     </SidebarContext.Provider>
-  )
+  );
 }
 
 function Sidebar({
@@ -157,11 +157,11 @@ function Sidebar({
   children,
   ...props
 }: React.ComponentProps<"div"> & {
-  side?: "left" | "right"
+  side?: "left" | "right";
-  variant?: "sidebar" | "floating" | "inset"
+  variant?: "sidebar" | "floating" | "inset";
-  collapsible?: "offcanvas" | "icon" | "none"
+  collapsible?: "offcanvas" | "icon" | "none";
 }) {
-  const { isMobile, state, openMobile, setOpenMobile } = useSidebar()
+  const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
 
   if (collapsible === "none") {
     return (
@@ -169,13 +169,13 @@ function Sidebar({
         data-slot="sidebar"
         className={cn(
           "bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col",
-          className
+          className,
         )}
         {...props}
       >
         {children}
       </div>
-    )
+    );
   }
 
   if (isMobile) {
@@ -200,7 +200,7 @@ function Sidebar({
           <div className="flex h-full w-full flex-col">{children}</div>
         </SheetContent>
       </Sheet>
-    )
+    );
   }
 
   return (
@@ -221,7 +221,7 @@ function Sidebar({
           "group-data-[side=right]:rotate-180",
           variant === "floating" || variant === "inset"
             ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]"
-            : "group-data-[collapsible=icon]:w-(--sidebar-width-icon)"
+            : "group-data-[collapsible=icon]:w-(--sidebar-width-icon)",
         )}
       />
       <div
@@ -235,7 +235,7 @@ function Sidebar({
           variant === "floating" || variant === "inset"
             ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]"
             : "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l",
-          className
+          className,
         )}
         {...props}
       >
@@ -248,7 +248,7 @@ function Sidebar({
         </div>
       </div>
     </div>
-  )
+  );
 }
 
 function SidebarTrigger({
@@ -256,7 +256,7 @@ function SidebarTrigger({
   onClick,
   ...props
 }: React.ComponentProps<typeof Button>) {
-  const { toggleSidebar } = useSidebar()
+  const { toggleSidebar } = useSidebar();
 
   return (
     <Button
@@ -266,19 +266,19 @@ function SidebarTrigger({
       size="icon"
       className={cn("size-7", className)}
       onClick={(event) => {
-        onClick?.(event)
+        onClick?.(event);
-        toggleSidebar()
+        toggleSidebar();
       }}
       {...props}
     >
       <PanelLeftIcon />
       <span className="sr-only">Toggle Sidebar</span>
     </Button>
-  )
+  );
 }
 
 function SidebarRail({ className, ...props }: React.ComponentProps<"button">) {
-  const { toggleSidebar } = useSidebar()
+  const { toggleSidebar } = useSidebar();
 
   return (
     <button
@@ -295,11 +295,11 @@ function SidebarRail({ className, ...props }: React.ComponentProps<"button">) {
         "hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full",
         "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
         "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
-        className
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function SidebarInset({ className, ...props }: React.ComponentProps<"main">) {
@@ -309,11 +309,11 @@ function SidebarInset({ className, ...props }: React.ComponentProps<"main">) {
       className={cn(
         "bg-background relative flex w-full flex-1 flex-col",
         "md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2",
-        className
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function SidebarInput({
@@ -327,7 +327,7 @@ function SidebarInput({
       className={cn("bg-background h-8 w-full shadow-none", className)}
       {...props}
     />
-  )
+  );
 }
 
 function SidebarHeader({ className, ...props }: React.ComponentProps<"div">) {
@@ -338,7 +338,7 @@ function SidebarHeader({ className, ...props }: React.ComponentProps<"div">) {
       className={cn("flex flex-col gap-2 p-2", className)}
       {...props}
     />
-  )
+  );
 }
 
 function SidebarFooter({ className, ...props }: React.ComponentProps<"div">) {
@@ -349,7 +349,7 @@ function SidebarFooter({ className, ...props }: React.ComponentProps<"div">) {
       className={cn("flex flex-col gap-2 p-2", className)}
       {...props}
     />
-  )
+  );
 }
 
 function SidebarSeparator({
@@ -363,7 +363,7 @@ function SidebarSeparator({
       className={cn("bg-sidebar-border mx-2 w-auto", className)}
       {...props}
     />
-  )
+  );
 }
 
 function SidebarContent({ className, ...props }: React.ComponentProps<"div">) {
@@ -373,11 +373,11 @@ function SidebarContent({ className, ...props }: React.ComponentProps<"div">) {
       data-sidebar="content"
       className={cn(
         "flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
-        className
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function SidebarGroup({ className, ...props }: React.ComponentProps<"div">) {
@@ -388,7 +388,7 @@ function SidebarGroup({ className, ...props }: React.ComponentProps<"div">) {
       className={cn("relative flex w-full min-w-0 flex-col p-2", className)}
       {...props}
     />
-  )
+  );
 }
 
 function SidebarGroupLabel({
@@ -396,7 +396,7 @@ function SidebarGroupLabel({
   asChild = false,
   ...props
 }: React.ComponentProps<"div"> & { asChild?: boolean }) {
-  const Comp = asChild ? Slot : "div"
+  const Comp = asChild ? Slot : "div";
 
   return (
     <Comp
@@ -405,11 +405,11 @@ function SidebarGroupLabel({
       className={cn(
         "text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
         "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
-        className
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function SidebarGroupAction({
@@ -417,7 +417,7 @@ function SidebarGroupAction({
   asChild = false,
   ...props
 }: React.ComponentProps<"button"> & { asChild?: boolean }) {
-  const Comp = asChild ? Slot : "button"
+  const Comp = asChild ? Slot : "button";
 
   return (
     <Comp
@@ -428,11 +428,11 @@ function SidebarGroupAction({
         // Increases the hit area of the button on mobile.
         "after:absolute after:-inset-2 md:after:hidden",
         "group-data-[collapsible=icon]:hidden",
-        className
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function SidebarGroupContent({
@@ -446,7 +446,7 @@ function SidebarGroupContent({
       className={cn("w-full text-sm", className)}
       {...props}
     />
-  )
+  );
 }
 
 function SidebarMenu({ className, ...props }: React.ComponentProps<"ul">) {
@@ -457,7 +457,7 @@ function SidebarMenu({ className, ...props }: React.ComponentProps<"ul">) {
       className={cn("flex w-full min-w-0 flex-col gap-1", className)}
       {...props}
     />
-  )
+  );
 }
 
 function SidebarMenuItem({ className, ...props }: React.ComponentProps<"li">) {
@@ -468,7 +468,7 @@ function SidebarMenuItem({ className, ...props }: React.ComponentProps<"li">) {
       className={cn("group/menu-item relative", className)}
       {...props}
     />
-  )
+  );
 }
 
 const sidebarMenuButtonVariants = cva(
@@ -490,8 +490,8 @@ const sidebarMenuButtonVariants = cva(
       variant: "default",
       size: "default",
     },
-  }
+  },
-)
+);
 
 function SidebarMenuButton({
   asChild = false,
@@ -502,12 +502,12 @@ function SidebarMenuButton({
   className,
   ...props
 }: React.ComponentProps<"button"> & {
-  asChild?: boolean
+  asChild?: boolean;
-  isActive?: boolean
+  isActive?: boolean;
-  tooltip?: string | React.ComponentProps<typeof TooltipContent>
+  tooltip?: string | React.ComponentProps<typeof TooltipContent>;
 } & VariantProps<typeof sidebarMenuButtonVariants>) {
-  const Comp = asChild ? Slot : "button"
+  const Comp = asChild ? Slot : "button";
-  const { isMobile, state } = useSidebar()
+  const { isMobile, state } = useSidebar();
 
   const button = (
     <Comp
@@ -518,16 +518,16 @@ function SidebarMenuButton({
       className={cn(sidebarMenuButtonVariants({ variant, size }), className)}
       {...props}
     />
-  )
+  );
 
   if (!tooltip) {
-    return button
+    return button;
   }
 
   if (typeof tooltip === "string") {
     tooltip = {
       children: tooltip,
-    }
+    };
   }
 
   return (
@@ -540,7 +540,7 @@ function SidebarMenuButton({
         {...tooltip}
       />
     </Tooltip>
-  )
+  );
 }
 
 function SidebarMenuAction({
@@ -549,10 +549,10 @@ function SidebarMenuAction({
   showOnHover = false,
   ...props
 }: React.ComponentProps<"button"> & {
-  asChild?: boolean
+  asChild?: boolean;
-  showOnHover?: boolean
+  showOnHover?: boolean;
 }) {
-  const Comp = asChild ? Slot : "button"
+  const Comp = asChild ? Slot : "button";
 
   return (
     <Comp
@@ -568,11 +568,11 @@ function SidebarMenuAction({
         "group-data-[collapsible=icon]:hidden",
         showOnHover &&
           "peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0",
-        className
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function SidebarMenuBadge({
@@ -590,11 +590,11 @@ function SidebarMenuBadge({
         "peer-data-[size=default]/menu-button:top-1.5",
         "peer-data-[size=lg]/menu-button:top-2.5",
         "group-data-[collapsible=icon]:hidden",
-        className
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function SidebarMenuSkeleton({
@@ -602,12 +602,12 @@ function SidebarMenuSkeleton({
   showIcon = false,
   ...props
 }: React.ComponentProps<"div"> & {
-  showIcon?: boolean
+  showIcon?: boolean;
 }) {
   // Random width between 50 to 90%.
   const width = React.useMemo(() => {
-    return `${Math.floor(Math.random() * 40) + 50}%`
+    return `${Math.floor(Math.random() * 40) + 50}%`;
-  }, [])
+  }, []);
 
   return (
     <div
@@ -632,7 +632,7 @@ function SidebarMenuSkeleton({
         }
       />
     </div>
-  )
+  );
 }
 
 function SidebarMenuSub({ className, ...props }: React.ComponentProps<"ul">) {
@@ -643,11 +643,11 @@ function SidebarMenuSub({ className, ...props }: React.ComponentProps<"ul">) {
       className={cn(
         "border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5",
         "group-data-[collapsible=icon]:hidden",
-        className
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function SidebarMenuSubItem({
@@ -661,7 +661,7 @@ function SidebarMenuSubItem({
       className={cn("group/menu-sub-item relative", className)}
       {...props}
     />
-  )
+  );
 }
 
 function SidebarMenuSubButton({
@@ -671,11 +671,11 @@ function SidebarMenuSubButton({
   className,
   ...props
 }: React.ComponentProps<"a"> & {
-  asChild?: boolean
+  asChild?: boolean;
-  size?: "sm" | "md"
+  size?: "sm" | "md";
-  isActive?: boolean
+  isActive?: boolean;
 }) {
-  const Comp = asChild ? Slot : "a"
+  const Comp = asChild ? Slot : "a";
 
   return (
     <Comp
@@ -689,11 +689,11 @@ function SidebarMenuSubButton({
         size === "sm" && "text-xs",
         size === "md" && "text-sm",
         "group-data-[collapsible=icon]:hidden",
-        className
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 export {
@@ -721,4 +721,4 @@ export {
   SidebarSeparator,
   SidebarTrigger,
   useSidebar,
-}
+};

src/components/ui/skeleton.tsx

@@ -1,4 +1,4 @@
-import { cn } from "@root/lib/utils"
+import { cn } from "@root/lib/utils";
 
 function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
   return (
@@ -7,7 +7,7 @@ function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
       className={cn("bg-accent animate-pulse rounded-md", className)}
       {...props}
     />
-  )
+  );
 }
 
-export { Skeleton }
+export { Skeleton };

src/hooks/useZoomControls.ts

@@ -1,5 +1,5 @@
-import { useEffect, useState, useCallback } from 'react';
+import { useEffect, useState, useCallback } from "react";
-import { WebviewWindow } from '@tauri-apps/api/webviewWindow';
+import { WebviewWindow } from "@tauri-apps/api/webviewWindow";
 
 // Константы для управления масштабом
 const ZOOM_STEP = 0.1;
@@ -22,7 +22,9 @@ export const useZoomControls = () => {
 
       let initialZoom = 1.0;
 
-      console.log(`Physical width: ${size.width}, Scale Factor: ${scaleFactor}, Logical width: ${logicalWidth}`);
+      console.log(
+        `Physical width: ${size.width}, Scale Factor: ${scaleFactor}, Logical width: ${logicalWidth}`,
+      );
 
       // 3. Используем логическую ширину для принятия решения
       if (logicalWidth < 1300) {
@@ -38,18 +40,24 @@ export const useZoomControls = () => {
     setInitialZoom();
   }, []);
 
-  const handleZoom = useCallback((delta: number, isReset = false) => {
+  const handleZoom = useCallback(
-    setZoomLevel(currentZoom => {
+    (delta: number, isReset = false) => {
+      setZoomLevel((currentZoom) => {
         const newZoom = isReset ? 1.0 : currentZoom + delta;
         const clampedZoom = Math.max(MIN_ZOOM, Math.min(newZoom, MAX_ZOOM));
         const roundedZoom = Math.round(clampedZoom * 100) / 100;
 
         appWindow.setZoom(roundedZoom);
         const newStrokeWidth = 2 / roundedZoom;
-      document.documentElement.style.setProperty('--icon-stroke-width', newStrokeWidth.toString());
+        document.documentElement.style.setProperty(
+          "--icon-stroke-width",
+          newStrokeWidth.toString(),
+        );
         return roundedZoom;
       });
-  }, [appWindow]);
+    },
+    [appWindow],
+  );
 
   useEffect(() => {
     const handleWheel = (event: WheelEvent) => {
@@ -63,18 +71,18 @@ export const useZoomControls = () => {
     const handleKeyDown = (event: KeyboardEvent) => {
       if (event.ctrlKey || event.metaKey) {
         switch (event.code) {
-          case 'Equal':
+          case "Equal":
-          case 'NumpadAdd':
+          case "NumpadAdd":
             event.preventDefault();
             handleZoom(ZOOM_STEP);
             break;
-          case 'Minus':
+          case "Minus":
-          case 'NumpadSubtract':
+          case "NumpadSubtract":
             event.preventDefault();
             handleZoom(-ZOOM_STEP);
             break;
-          case 'Digit0':
+          case "Digit0":
-          case 'Numpad0':
+          case "Numpad0":
             event.preventDefault();
             handleZoom(0, true);
             break;
@@ -82,12 +90,12 @@ export const useZoomControls = () => {
       }
     };
 
-    window.addEventListener('wheel', handleWheel, { passive: false });
+    window.addEventListener("wheel", handleWheel, { passive: false });
-    window.addEventListener('keydown', handleKeyDown);
+    window.addEventListener("keydown", handleKeyDown);
 
     return () => {
-      window.removeEventListener('wheel', handleWheel);
+      window.removeEventListener("wheel", handleWheel);
-      window.removeEventListener('keydown', handleKeyDown);
+      window.removeEventListener("keydown", handleKeyDown);
     };
   }, [handleZoom]);
 };

src/index.css

@@ -2,7 +2,7 @@
 @import "tw-animate-css";
 
 @theme {
-  --tailwind-darkMode: 'class';
+  --tailwind-darkMode: "class";
 }
 
 @theme inline {
@@ -132,7 +132,6 @@ svg {
   stroke-width: var(--icon-stroke-width, 2);
 }
 
-
 @keyframes gradient-wave {
   0% {
     background-position: -200% center;

src/pages/_layout.tsx

@@ -27,7 +27,6 @@ import { AppSidebar } from "@/components/layout/sidebar";
 import { useZoomControls } from "@/hooks/useZoomControls";
 import { HwidErrorDialog } from "@/components/profile/hwid-error-dialog";
 
-
 const appWindow = getCurrentWebviewWindow();
 export let portableFlag = false;
 
@@ -49,12 +48,17 @@ const handleNoticeMessage = (
       mutate("getProfiles");
       navigate("/");
       showNotice("success", t("Import Subscription Successful"));
-      sessionStorage.setItem('activateProfile', msg);
+      sessionStorage.setItem("activateProfile", msg);
       break;
     case "import_sub_url::error":
       console.log(msg);
-       if (msg.toLowerCase().includes('device') || msg.toLowerCase().includes('устройств')) {
+      if (
-        window.dispatchEvent(new CustomEvent('show-hwid-error', { detail: msg }));
+        msg.toLowerCase().includes("device") ||
+        msg.toLowerCase().includes("устройств")
+      ) {
+        window.dispatchEvent(
+          new CustomEvent("show-hwid-error", { detail: msg }),
+        );
       } else {
         showNotice("error", msg);
       }
@@ -172,7 +176,10 @@ const Layout = () => {
         try {
           handleNoticeMessage(status, msg, t, navigate);
         } catch (error) {
-          console.error("[Layout] Failure to process a notification message:", error);
+          console.error(
+            "[Layout] Failure to process a notification message:",
+            error,
+          );
         }
       }, 0);
     },
@@ -233,11 +240,17 @@ const Layout = () => {
                 try {
                   unlisten();
                 } catch (error) {
-                  console.error("[Layout] Failed to clear event listener:", error);
+                  console.error(
+                    "[Layout] Failed to clear event listener:",
+                    error,
+                  );
                 }
               })
               .catch((error) => {
-                console.error("[Layout] Failed to get unlisten function:", error);
+                console.error(
+                  "[Layout] Failed to get unlisten function:",
+                  error,
+                );
               });
           }
         });
@@ -259,7 +272,9 @@ const Layout = () => {
 
   useEffect(() => {
     if (initRef.current) {
-      console.log("[Layout] Initialization code has already been executed, skip");
+      console.log(
+        "[Layout] Initialization code has already been executed, skip",
+      );
       return;
     }
     console.log("[Layout] Begin executing initialization code");
@@ -305,7 +320,9 @@ const Layout = () => {
       }
 
       initializationAttempts++;
-      console.log(`[Layout] Start ${initializationAttempts} for the first time`);
+      console.log(
+        `[Layout] Start ${initializationAttempts} for the first time`,
+      );
 
       try {
         removeLoadingOverlay();
@@ -326,7 +343,9 @@ const Layout = () => {
           checkReactMount();
 
           setTimeout(() => {
-            console.log("[Layout] React components mount check timeout, continue execution");
+            console.log(
+              "[Layout] React components mount check timeout, continue execution",
+            );
             resolve();
           }, 2000);
         });
@@ -342,7 +361,9 @@ const Layout = () => {
         await notifyBackend("UI ready");
 
         isInitialized = true;
-        console.log(`[Layout] The ${initializationAttempts} initialization is complete`);
+        console.log(
+          `[Layout] The ${initializationAttempts} initialization is complete`,
+        );
       } catch (error) {
         console.error(
           `[Layout] Initialization failure at ${initializationAttempts}:`,
@@ -355,7 +376,9 @@ const Layout = () => {
           );
           setTimeout(performInitialization, 500);
         } else {
-          console.error("[Layout] All initialization attempts fail, perform emergency initialization");
+          console.error(
+            "[Layout] All initialization attempts fail, perform emergency initialization",
+          );
 
           removeLoadingOverlay();
           try {
@@ -375,14 +398,19 @@ const Layout = () => {
         console.log("[Layout] Start listening for startup completion events");
         const unlisten = await listen("verge://startup-completed", () => {
           if (!hasEventTriggered) {
-            console.log("[Layout] Receive startup completion event, start initialization");
+            console.log(
+              "[Layout] Receive startup completion event, start initialization",
+            );
             hasEventTriggered = true;
             performInitialization();
           }
         });
         return unlisten;
       } catch (err) {
-        console.error("[Layout] Failed to listen for startup completion event:", err);
+        console.error(
+          "[Layout] Failed to listen for startup completion event:",
+          err,
+        );
         return () => {};
       }
     };
@@ -393,18 +421,24 @@ const Layout = () => {
         await invoke("update_ui_stage", { stage: "Loading" });
 
         if (!hasEventTriggered && !isInitialized) {
-          console.log("[Layout] Backend is ready, start initialization immediately");
+          console.log(
+            "[Layout] Backend is ready, start initialization immediately",
+          );
           hasEventTriggered = true;
           performInitialization();
         }
       } catch (err) {
-        console.log("[Layout] Backend not yet ready, waiting for startup completion event");
+        console.log(
+          "[Layout] Backend not yet ready, waiting for startup completion event",
+        );
       }
     };
 
     const backupInitialization = setTimeout(() => {
       if (!hasEventTriggered && !isInitialized) {
-        console.warn("[Layout] Standby initialization trigger: initialization not started within 1.5 seconds");
+        console.warn(
+          "[Layout] Standby initialization trigger: initialization not started within 1.5 seconds",
+        );
         hasEventTriggered = true;
         performInitialization();
       }
@@ -412,7 +446,9 @@ const Layout = () => {
 
     const emergencyInitialization = setTimeout(() => {
       if (!isInitialized) {
-        console.error("[Layout] Emergency initialization trigger: initialization not completed within 5 seconds");
+        console.error(
+          "[Layout] Emergency initialization trigger: initialization not completed within 5 seconds",
+        );
         removeLoadingOverlay();
         notifyBackend("UI ready").catch(() => {});
         isInitialized = true;
@@ -456,11 +492,10 @@ const Layout = () => {
     return (
       <>
         <AppSidebar />
-            <main
+        <main className="h-screen w-full overflow-y-auto transition-[margin] duration-200 ease-linear">
-                className="h-screen w-full overflow-y-auto transition-[margin] duration-200 ease-linear"
-            >
           <div className="h-full w-full relative">
-                    {routersEles && React.cloneElement(routersEles, { key: location.pathname })}
+            {routersEles &&
+              React.cloneElement(routersEles, { key: location.pathname })}
           </div>
         </main>
         <HwidErrorDialog />
@@ -468,8 +503,6 @@ const Layout = () => {
     );
   };
 
-
-
   return (
     <SWRConfig value={{ errorRetryCount: 3 }}>
       <SidebarProvider defaultOpen={false}>

src/pages/connections.tsx

@@ -22,9 +22,7 @@ import {
   ConnectionDetail,
   ConnectionDetailRef,
 } from "@/components/connection/connection-detail";
-import {
+import { BaseSearchBox } from "@/components/base/base-search-box";
-  BaseSearchBox,
-} from "@/components/base/base-search-box";
 import { Button } from "@/components/ui/button";
 import {
   Select,
@@ -96,7 +94,8 @@ const ConnectionsPage = () => {
           new Date(b.start || "0").getTime()! -
           new Date(a.start || "0").getTime()!,
       ),
-    "Upload Speed": (list) => list.sort((a, b) => (b.curUpload ?? 0) - (a.curUpload ?? 0)),
+    "Upload Speed": (list) =>
+      list.sort((a, b) => (b.curUpload ?? 0) - (a.curUpload ?? 0)),
     "Download Speed": (list) =>
       list.sort((a, b) => (b.curDownload ?? 0) - (a.curDownload ?? 0)),
   };

src/pages/home.tsx

@@ -1,4 +1,10 @@
-import React, {useRef, useMemo, useCallback, useState, useEffect} from "react";
+import React, {
+  useRef,
+  useMemo,
+  useCallback,
+  useState,
+  useEffect,
+} from "react";
 import { useLockFn } from "ahooks";
 import { useTranslation } from "react-i18next";
 import { toast } from "sonner";
@@ -25,7 +31,11 @@ import {
   AlertTriangle,
   Loader2,
   Globe,
-  Send, ExternalLink, RefreshCw, ArrowDown, ArrowUp,
+  Send,
+  ExternalLink,
+  RefreshCw,
+  ArrowDown,
+  ArrowUp,
 } from "lucide-react";
 import { useVerge } from "@/hooks/use-verge";
 import { useSystemState } from "@/hooks/use-system-state";
@@ -34,7 +44,12 @@ import { Switch } from "@/components/ui/switch";
 import { ProxySelectors } from "@/components/home/proxy-selectors";
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import { closeAllConnections } from "@/services/api";
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
 import { updateProfile } from "@/services/cmds";
 import { SidebarTrigger } from "@/components/ui/sidebar";
 import parseTraffic from "@/utils/parse-traffic";
@@ -61,7 +76,7 @@ const MinimalHomePage: React.FC = () => {
   }, [profiles]);
 
   const currentProfile = useMemo(() => {
-    return profileItems.find(p => p.uid === profiles?.current);
+    return profileItems.find((p) => p.uid === profiles?.current);
   }, [profileItems, profiles?.current]);
   const currentProfileName = currentProfile?.name || profiles?.current;
 
@@ -83,10 +98,10 @@ const MinimalHomePage: React.FC = () => {
   );
 
   useEffect(() => {
-    const uidToActivate = sessionStorage.getItem('activateProfile');
+    const uidToActivate = sessionStorage.getItem("activateProfile");
-    if (uidToActivate && profileItems.some(p => p.uid === uidToActivate)) {
+    if (uidToActivate && profileItems.some((p) => p.uid === uidToActivate)) {
       activateProfile(uidToActivate, false);
-      sessionStorage.removeItem('activateProfile');
+      sessionStorage.removeItem("activateProfile");
     }
   }, [profileItems, activateProfile]);
 
@@ -143,7 +158,7 @@ const MinimalHomePage: React.FC = () => {
   });
 
   const handleUpdateProfile = useLockFn(async () => {
-    if (!currentProfile?.uid || currentProfile.type !== 'remote') return;
+    if (!currentProfile?.uid || currentProfile.type !== "remote") return;
     setIsUpdating(true);
     try {
       await updateProfile(currentProfile.uid);
@@ -159,21 +174,21 @@ const MinimalHomePage: React.FC = () => {
   const statusInfo = useMemo(() => {
     if (isToggling) {
       return {
-        text: isProxyEnabled ? t('Disconnecting...') : t('Connecting...'),
+        text: isProxyEnabled ? t("Disconnecting...") : t("Connecting..."),
-        color: isProxyEnabled ? '#f59e0b' : '#84cc16',
+        color: isProxyEnabled ? "#f59e0b" : "#84cc16",
         isAnimating: true,
       };
     }
     if (isProxyEnabled) {
       return {
-        text: t('Connected'),
+        text: t("Connected"),
-        color: '#22c55e',
+        color: "#22c55e",
         isAnimating: false,
       };
     }
     return {
-      text: t('Disconnected'),
+      text: t("Disconnected"),
-      color: '#ef4444',
+      color: "#ef4444",
       isAnimating: false,
     };
   }, [isToggling, isProxyEnabled, t]);
@@ -181,19 +196,16 @@ const MinimalHomePage: React.FC = () => {
   return (
     <div className="h-full w-full flex flex-col">
       <div className="absolute inset-0 opacity-20 pointer-events-none z-0 [transform:translateZ(0)]">
-          <img
+        <img src={map} alt="World map" className="w-full h-full object-cover" />
-              src={map}
-              alt="World map"
-              className="w-full h-full object-cover"
-          />
       </div>
 
       {isProxyEnabled && (
         <div
           className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 h-[500px] w-[500px] rounded-full pointer-events-none z-0 transition-opacity duration-500"
           style={{
-                  background: 'radial-gradient(circle, rgba(34,197,94,0.3) 0%, transparent 70%)',
+            background:
-                  filter: 'blur(100px)',
+              "radial-gradient(circle, rgba(34,197,94,0.3) 0%, transparent 70%)",
+            filter: "blur(100px)",
           }}
         />
       )}
@@ -219,7 +231,7 @@ const MinimalHomePage: React.FC = () => {
                             "dark:bg-white/5 dark:border-white/15",
                             "hover:bg-white/90 hover:border-gray-400/70",
                             "dark:hover:bg-white/10 dark:hover:border-white/20",
-                                    "transition-all duration-200"
+                            "transition-all duration-200",
                           )}
                         >
                           <PlusCircle className="h-4 w-4" />
@@ -241,7 +253,7 @@ const MinimalHomePage: React.FC = () => {
                         "dark:bg-white/5 dark:border-white/15",
                         "hover:bg-white/90 hover:border-gray-400/70",
                         "dark:hover:bg-white/10 dark:hover:border-white/20",
-                                "transition-all duration-200"
+                        "transition-all duration-200",
                       )}
                     >
                       <span className="truncate">{currentProfileName}</span>
@@ -264,7 +276,7 @@ const MinimalHomePage: React.FC = () => {
                     ))}
                   </DropdownMenuContent>
                 </DropdownMenu>
-                    {currentProfile?.type === 'remote' && (
+                {currentProfile?.type === "remote" && (
                   <div className="absolute left-full ml-2">
                     <TooltipProvider>
                       <Tooltip>
@@ -280,13 +292,19 @@ const MinimalHomePage: React.FC = () => {
                               "dark:bg-white/5 dark:border-white/10",
                               "hover:bg-white/85 hover:border-gray-400/60",
                               "dark:hover:bg-white/10 dark:hover:border-white/15",
-                                        "transition-all duration-200"
+                              "transition-all duration-200",
                             )}
                           >
-                                  {isUpdating ? <Loader2 className="h-5 w-5 animate-spin" /> : <RefreshCw className="h-5 w-5" />}
+                            {isUpdating ? (
+                              <Loader2 className="h-5 w-5 animate-spin" />
+                            ) : (
+                              <RefreshCw className="h-5 w-5" />
+                            )}
                           </Button>
                         </TooltipTrigger>
-                              <TooltipContent><p>{t("Update Profile")}</p></TooltipContent>
+                        <TooltipContent>
+                          <p>{t("Update Profile")}</p>
+                        </TooltipContent>
                       </Tooltip>
                     </TooltipProvider>
                   </div>
@@ -307,7 +325,7 @@ const MinimalHomePage: React.FC = () => {
                             "dark:bg-white/5 dark:border-white/15",
                             "hover:bg-white/90 hover:border-gray-400/70",
                             "dark:hover:bg-white/10 dark:hover:border-white/20",
-                                    "transition-all duration-200"
+                            "transition-all duration-200",
                           )}
                         >
                           <PlusCircle className="h-4 w-4" />
@@ -325,7 +343,7 @@ const MinimalHomePage: React.FC = () => {
                   className={cn(
                     "max-w-[250px] sm:max-w-xs opacity-50 cursor-not-allowed",
                     "backdrop-blur-sm bg-white/50 border-gray-300/40",
-                            "dark:bg-white/3 dark:border-white/10"
+                    "dark:bg-white/3 dark:border-white/10",
                   )}
                 >
                   <span className="truncate">{t("No profiles available")}</span>
@@ -335,8 +353,7 @@ const MinimalHomePage: React.FC = () => {
             )}
           </div>
         </div>
-          <div className="flex justify-end">
+        <div className="flex justify-end"></div>
-          </div>
       </header>
 
       <main className="flex-1 overflow-y-auto flex items-center justify-center">
@@ -349,9 +366,9 @@ const MinimalHomePage: React.FC = () => {
                   target="_blank"
                   rel="noopener noreferrer"
                   className="inline-flex items-center gap-2 text-base font-semibold text-foreground hover:underline hover:opacity-80 transition-all whitespace-pre-wrap"
-                          title={currentProfile.announce_url.replace(/\\n/g, '\n')}
+                  title={currentProfile.announce_url.replace(/\\n/g, "\n")}
                 >
-                        <span>{currentProfile.announce.replace(/\\n/g, '\n')}</span>
+                  <span>{currentProfile.announce.replace(/\\n/g, "\n")}</span>
                   <ExternalLink className="h-4 w-4 flex-shrink-0" />
                 </a>
               ) : (
@@ -365,7 +382,7 @@ const MinimalHomePage: React.FC = () => {
             <h1
               className={cn(
                 "text-4xl mb-2 font-semibold transition-colors duration-300",
-                      statusInfo.isAnimating && "animate-pulse"
+                statusInfo.isAnimating && "animate-pulse",
               )}
               style={{ color: statusInfo.color }}
             >
@@ -450,8 +467,15 @@ const MinimalHomePage: React.FC = () => {
             <TooltipProvider>
               <Tooltip>
                 <TooltipTrigger asChild>
-                      <a href={currentProfile.support_url} target="_blank" rel="noopener noreferrer" className="transition-colors hover:text-primary">
+                  <a
-                        {(currentProfile.support_url.includes('t.me') || currentProfile.support_url.includes('telegram') || currentProfile.support_url.startsWith('tg://')) ? (
+                    href={currentProfile.support_url}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="transition-colors hover:text-primary"
+                  >
+                    {currentProfile.support_url.includes("t.me") ||
+                    currentProfile.support_url.includes("telegram") ||
+                    currentProfile.support_url.startsWith("tg://") ? (
                       <Send className="h-5 w-5" />
                     ) : (
                       <Globe className="h-5 w-5" />

src/pages/profiles.tsx

@@ -55,13 +55,7 @@ import {
   TooltipTrigger,
 } from "@/components/ui/tooltip";
 
-import {
+import { PlusCircle, RefreshCw, Zap, FileText, Loader2 } from "lucide-react";
-  PlusCircle,
-  RefreshCw,
-  Zap,
-  FileText,
-  Loader2,
-} from "lucide-react";
 import { SidebarTrigger } from "@/components/ui/sidebar";
 
 const ProfilePage = () => {

src/pages/rules.tsx

@@ -1,4 +1,10 @@
-import React, { useState, useMemo, useRef, useEffect, useCallback } from "react";
+import React, {
+  useState,
+  useMemo,
+  useRef,
+  useEffect,
+  useCallback,
+} from "react";
 import { useTranslation } from "react-i18next";
 import { Virtuoso, VirtuosoHandle } from "react-virtuoso";
 import { useAppData } from "@/providers/app-data-provider";

src/services/cmds.ts

@@ -401,6 +401,9 @@ export async function getNextUpdateTime(uid: string) {
   return invoke<number | null>("get_next_update_time", { uid });
 }
 
-export async function createProfileFromShareLink(link: string, templateName: string) {
+export async function createProfileFromShareLink(
+  link: string,
+  templateName: string,
+) {
   return invoke<void>("create_profile_from_share_link", { link, templateName });
 }

src/services/noticeService.ts

@@ -1,21 +1,25 @@
 import { toast } from "sonner";
 
-type NoticeType = 'success' | 'error' | 'info' | 'warning';
+type NoticeType = "success" | "error" | "info" | "warning";
 
-export const showNotice = (type: NoticeType, message: string, duration?: number) => {
+export const showNotice = (
+  type: NoticeType,
+  message: string,
+  duration?: number,
+) => {
   const options = duration ? { duration } : {};
 
   switch (type) {
-    case 'success':
+    case "success":
       toast.success(message, options);
       break;
-    case 'error':
+    case "error":
       toast.error(message, options);
       break;
-    case 'info':
+    case "info":
       toast.info(message, options);
       break;
-    case 'warning':
+    case "warning":
       toast.warning(message, options);
       break;
     default: