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)
-    }
-    mql.addEventListener("change", onChange)
-    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
-    return () => mql.removeEventListener("change", onChange)
-  }, [])
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    };
+    mql.addEventListener("change", onChange);
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    return () => mql.removeEventListener("change", onChange);
+  }, []);
 
-  return !!isMobile
+  return !!isMobile;
 }

src-tauri/webview2.arm64.json

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

src/App.tsx

@@ -3,9 +3,9 @@ import Layout from "./pages/_layout";
 
 function App() {
   return (
-  <AppDataProvider>
-    <Layout />
-  </AppDataProvider>
+    <AppDataProvider>
+      <Layout />
+    </AppDataProvider>
   );
 }
 export default App;

src/components/connection/connection-table.tsx

@@ -73,21 +73,25 @@ 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()}
-          onTouchStart={header.getResizeHandler()}
-          className={cn(
-              "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"
-          )}
-          style={{
-            transform: header.column.getIsResizing() ? `translateX(0px)` : "",
-          }}
-      />
+    <div
+      onMouseDown={header.getResizeHandler()}
+      onTouchStart={header.getResizeHandler()}
+      className={cn(
+        "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",
+      )}
+      style={{
+        transform: header.column.getIsResizing() ? `translateX(0px)` : "",
+      }}
+    />
   );
 };
 
@@ -105,8 +109,8 @@ export const ConnectionTable = (props: Props) => {
     try {
       const saved = localStorage.getItem("connection-table-widths");
       return saved
-          ? JSON.parse(saved)
-          : {
+        ? JSON.parse(saved)
+        : {
             host: 220,
             download: 88,
             upload: 88,
@@ -140,8 +144,8 @@ export const ConnectionTable = (props: Props) => {
 
   useEffect(() => {
     localStorage.setItem(
-        "connection-table-widths",
-        JSON.stringify(columnSizing)
+      "connection-table-widths",
+      JSON.stringify(columnSizing),
     );
   }, [columnSizing]);
 
@@ -151,13 +155,13 @@ export const ConnectionTable = (props: Props) => {
       const chains = [...each.chains].reverse().join(" / ");
       const rule = rulePayload ? `${each.rule}(${rulePayload})` : each.rule;
       const Destination = metadata.destinationIP
-          ? `${metadata.destinationIP}:${metadata.destinationPort}`
-          : `${metadata.remoteDestination}:${metadata.destinationPort}`;
+        ? `${metadata.destinationIP}:${metadata.destinationPort}`
+        : `${metadata.remoteDestination}:${metadata.destinationPort}`;
       return {
         id: each.id,
         host: metadata.host
-            ? `${metadata.host}:${metadata.destinationPort}`
-            : `${metadata.remoteDestination}:${metadata.destinationPort}`,
+          ? `${metadata.host}:${metadata.destinationPort}`
+          : `${metadata.remoteDestination}:${metadata.destinationPort}`,
         download: each.download,
         upload: each.upload,
         dlSpeed: each.curDownload ?? 0,
@@ -175,118 +179,118 @@ export const ConnectionTable = (props: Props) => {
   }, [connections]);
 
   const columns = useMemo<ColumnDef<ConnectionRow>[]>(
-      () => [
-        {
-          accessorKey: "host",
-          header: () => t("Host"),
-          size: columnSizing?.host || 220,
-          minSize: 180,
-          maxSize: 400,
-        },
-        {
-          accessorKey: "download",
-          header: () => t("Downloaded"),
-          size: columnSizing?.download || 88,
-          minSize: 80,
-          maxSize: 150,
-          cell: ({ getValue }) => (
-              <div className="text-right font-mono text-sm">
-                {parseTraffic(getValue<number>()).join(" ")}
-              </div>
-          ),
-        },
-        {
-          accessorKey: "upload",
-          header: () => t("Uploaded"),
-          size: columnSizing?.upload || 88,
-          minSize: 80,
-          maxSize: 150,
-          cell: ({ getValue }) => (
-              <div className="text-right font-mono text-sm">
-                {parseTraffic(getValue<number>()).join(" ")}
-              </div>
-          ),
-        },
-        {
-          accessorKey: "dlSpeed",
-          header: () => t("DL Speed"),
-          size: columnSizing?.dlSpeed || 88,
-          minSize: 80,
-          maxSize: 150,
-          cell: ({ getValue }) => (
-              <div className="text-right font-mono text-sm">
-                {parseTraffic(getValue<number>()).join(" ")}/s
-              </div>
-          ),
-        },
-        {
-          accessorKey: "ulSpeed",
-          header: () => t("UL Speed"),
-          size: columnSizing?.ulSpeed || 88,
-          minSize: 80,
-          maxSize: 150,
-          cell: ({ getValue }) => (
-              <div className="text-right font-mono text-sm">
-                {parseTraffic(getValue<number>()).join(" ")}/s
-              </div>
-          ),
-        },
-        {
-          accessorKey: "chains",
-          header: () => t("Chains"),
-          size: columnSizing?.chains || 340,
-          minSize: 180,
-          maxSize: 500,
-        },
-        {
-          accessorKey: "rule",
-          header: () => t("Rule"),
-          size: columnSizing?.rule || 280,
-          minSize: 180,
-          maxSize: 400,
-        },
-        {
-          accessorKey: "process",
-          header: () => t("Process"),
-          size: columnSizing?.process || 220,
-          minSize: 180,
-          maxSize: 350,
-        },
-        {
-          accessorKey: "time",
-          header: () => t("Time"),
-          size: columnSizing?.time || 120,
-          minSize: 100,
-          maxSize: 180,
-          cell: ({ getValue }) => (
-              <div className="text-right font-mono text-sm">
-                {dayjs(getValue<string>()).fromNow()}
-              </div>
-          ),
-        },
-        {
-          accessorKey: "source",
-          header: () => t("Source"),
-          size: columnSizing?.source || 200,
-          minSize: 130,
-          maxSize: 300,
-        },
-        {
-          accessorKey: "remoteDestination",
-          header: () => t("Destination"),
-          size: columnSizing?.remoteDestination || 200,
-          minSize: 130,
-          maxSize: 300,
-        },
-        {
-          accessorKey: "type",
-          header: () => t("Type"),
-          size: columnSizing?.type || 160,
-          minSize: 100,
-          maxSize: 220,
-        },
-      ],
-      [columnSizing]
+    () => [
+      {
+        accessorKey: "host",
+        header: () => t("Host"),
+        size: columnSizing?.host || 220,
+        minSize: 180,
+        maxSize: 400,
+      },
+      {
+        accessorKey: "download",
+        header: () => t("Downloaded"),
+        size: columnSizing?.download || 88,
+        minSize: 80,
+        maxSize: 150,
+        cell: ({ getValue }) => (
+          <div className="text-right font-mono text-sm">
+            {parseTraffic(getValue<number>()).join(" ")}
+          </div>
+        ),
+      },
+      {
+        accessorKey: "upload",
+        header: () => t("Uploaded"),
+        size: columnSizing?.upload || 88,
+        minSize: 80,
+        maxSize: 150,
+        cell: ({ getValue }) => (
+          <div className="text-right font-mono text-sm">
+            {parseTraffic(getValue<number>()).join(" ")}
+          </div>
+        ),
+      },
+      {
+        accessorKey: "dlSpeed",
+        header: () => t("DL Speed"),
+        size: columnSizing?.dlSpeed || 88,
+        minSize: 80,
+        maxSize: 150,
+        cell: ({ getValue }) => (
+          <div className="text-right font-mono text-sm">
+            {parseTraffic(getValue<number>()).join(" ")}/s
+          </div>
+        ),
+      },
+      {
+        accessorKey: "ulSpeed",
+        header: () => t("UL Speed"),
+        size: columnSizing?.ulSpeed || 88,
+        minSize: 80,
+        maxSize: 150,
+        cell: ({ getValue }) => (
+          <div className="text-right font-mono text-sm">
+            {parseTraffic(getValue<number>()).join(" ")}/s
+          </div>
+        ),
+      },
+      {
+        accessorKey: "chains",
+        header: () => t("Chains"),
+        size: columnSizing?.chains || 340,
+        minSize: 180,
+        maxSize: 500,
+      },
+      {
+        accessorKey: "rule",
+        header: () => t("Rule"),
+        size: columnSizing?.rule || 280,
+        minSize: 180,
+        maxSize: 400,
+      },
+      {
+        accessorKey: "process",
+        header: () => t("Process"),
+        size: columnSizing?.process || 220,
+        minSize: 180,
+        maxSize: 350,
+      },
+      {
+        accessorKey: "time",
+        header: () => t("Time"),
+        size: columnSizing?.time || 120,
+        minSize: 100,
+        maxSize: 180,
+        cell: ({ getValue }) => (
+          <div className="text-right font-mono text-sm">
+            {dayjs(getValue<string>()).fromNow()}
+          </div>
+        ),
+      },
+      {
+        accessorKey: "source",
+        header: () => t("Source"),
+        size: columnSizing?.source || 200,
+        minSize: 130,
+        maxSize: 300,
+      },
+      {
+        accessorKey: "remoteDestination",
+        header: () => t("Destination"),
+        size: columnSizing?.remoteDestination || 200,
+        minSize: 130,
+        maxSize: 300,
+      },
+      {
+        accessorKey: "type",
+        header: () => t("Type"),
+        size: columnSizing?.type || 160,
+        minSize: 100,
+        maxSize: 220,
+      },
+    ],
+    [columnSizing],
   );
 
   const table = useReactTable({
@@ -305,82 +309,82 @@ export const ConnectionTable = (props: Props) => {
 
   if (connRows.length === 0) {
     return (
-        <div className="flex h-full items-center justify-center">
-          <p className="text-muted-foreground">{t("No connections")}</p>
-        </div>
+      <div className="flex h-full items-center justify-center">
+        <p className="text-muted-foreground">{t("No connections")}</p>
+      </div>
     );
   }
 
   return (
-      <div className="rounded-md border relative bg-background">
-        <Table
-            className="w-full border-collapse table-fixed"
-            style={{
-              width: totalTableWidth,
-              minWidth: "100%",
-            }}
-        >
-          <TableHeader>
-            {table.getHeaderGroups().map((headerGroup) => (
-                <TableRow
-                    key={headerGroup.id}
-                    className="hover:bg-transparent border-b-0 h-10"
+    <div className="rounded-md border relative bg-background">
+      <Table
+        className="w-full border-collapse table-fixed"
+        style={{
+          width: totalTableWidth,
+          minWidth: "100%",
+        }}
+      >
+        <TableHeader>
+          {table.getHeaderGroups().map((headerGroup) => (
+            <TableRow
+              key={headerGroup.id}
+              className="hover:bg-transparent border-b-0 h-10"
+            >
+              {headerGroup.headers.map((header) => (
+                <TableHead
+                  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",
+                  )}
+                  style={{
+                    width: header.getSize(),
+                    minWidth: header.column.columnDef.minSize,
+                    maxWidth: header.column.columnDef.maxSize,
+                  }}
                 >
-                  {headerGroup.headers.map((header) => (
-                      <TableHead
-                          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"
-                          )}
-                          style={{
-                            width: header.getSize(),
-                            minWidth: header.column.columnDef.minSize,
-                            maxWidth: header.column.columnDef.maxSize,
-                          }}
-                      >
-                        <div className="flex items-center justify-between h-full">
-                          {header.isPlaceholder
-                              ? null
-                              : flexRender(
-                                  header.column.columnDef.header,
-                                  header.getContext()
-                              )}
-                        </div>
-                        {header.column.getCanResize() && (
-                            <ColumnResizer header={header} />
+                  <div className="flex items-center justify-between h-full">
+                    {header.isPlaceholder
+                      ? null
+                      : flexRender(
+                          header.column.columnDef.header,
+                          header.getContext(),
                         )}
-                      </TableHead>
-                  ))}
-                </TableRow>
-            ))}
-          </TableHeader>
+                  </div>
+                  {header.column.getCanResize() && (
+                    <ColumnResizer header={header} />
+                  )}
+                </TableHead>
+              ))}
+            </TableRow>
+          ))}
+        </TableHeader>
 
-          <TableBody>
-            {table.getRowModel().rows.map((row) => (
-                <TableRow
-                    key={row.id}
-                    data-state={row.getIsSelected() && "selected"}
-                    className="cursor-pointer hover:bg-muted/50 transition-colors"
-                    onClick={() => onShowDetail(row.original.connectionData)}
+        <TableBody>
+          {table.getRowModel().rows.map((row) => (
+            <TableRow
+              key={row.id}
+              data-state={row.getIsSelected() && "selected"}
+              className="cursor-pointer hover:bg-muted/50 transition-colors"
+              onClick={() => onShowDetail(row.original.connectionData)}
+            >
+              {row.getVisibleCells().map((cell) => (
+                <TableCell
+                  key={cell.id}
+                  className="p-2 whitespace-nowrap overflow-hidden text-ellipsis text-sm border-r last:border-r-0"
+                  style={{
+                    width: cell.column.getSize(),
+                    minWidth: cell.column.columnDef.minSize,
+                    maxWidth: cell.column.columnDef.maxSize,
+                  }}
                 >
-                  {row.getVisibleCells().map((cell) => (
-                      <TableCell
-                          key={cell.id}
-                          className="p-2 whitespace-nowrap overflow-hidden text-ellipsis text-sm border-r last:border-r-0"
-                          style={{
-                            width: cell.column.getSize(),
-                            minWidth: cell.column.columnDef.minSize,
-                            maxWidth: cell.column.columnDef.maxSize,
-                          }}
-                      >
-                        {flexRender(cell.column.columnDef.cell, cell.getContext())}
-                      </TableCell>
-                  ))}
-                </TableRow>
-            ))}
-          </TableBody>
-        </Table>
-      </div>
+                  {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                </TableCell>
+              ))}
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </div>
   );
 };

src/components/home/power-button.tsx

@@ -1,64 +1,72 @@
-import React from 'react';
-import { cn } from '@root/lib/utils';
-import { Power } from 'lucide-react';
+import React from "react";
+import { cn } from "@root/lib/utils";
+import { Power } from "lucide-react";
 
-export interface PowerButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-    checked?: boolean;
-    loading?: boolean;
+export interface PowerButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  checked?: boolean;
+  loading?: boolean;
 }
 
-export const PowerButton = React.forwardRef<HTMLButtonElement, PowerButtonProps>(
-    ({ className, checked = false, loading = false, ...props }, ref) => {
-        const state = checked ? 'on' : 'off';
+export const PowerButton = React.forwardRef<
+  HTMLButtonElement,
+  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">
+  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",
+          state === "on" ? "bg-green-400/60" : "bg-red-500/40",
+          props.disabled && "opacity-0",
+        )}
+      />
 
-                <div
-                    className={cn(
-                        'absolute h-28 w-28 rounded-full blur-3xl transition-all duration-500',
-                        state === 'on' ? 'bg-green-400/60' : 'bg-red-500/40',
-                        props.disabled && 'opacity-0'
-                    )}
-                />
+      <button
+        ref={ref}
+        type="button"
+        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",
+          "backdrop-blur-sm bg-white/10 border-white/20",
+          "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]:shadow-[0_0_50px_rgba(34,197,94,1)]",
+          "transition-all duration-300 hover:scale-105 active:scale-95 focus:outline-none",
+          "disabled:cursor-not-allowed disabled:scale-100",
 
-                <button
-                    ref={ref}
-                    type="button"
-                    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',
-                        'backdrop-blur-sm bg-white/10 border-white/20',
-                        '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]:shadow-[0_0_50px_rgba(34,197,94,1)]',
-                        'transition-all duration-300 hover:scale-105 active:scale-95 focus:outline-none',
-                        'disabled:cursor-not-allowed disabled:scale-100',
+          // Стили ТОЛЬКО для отключенного состояния (но не для загрузки)
+          props.disabled &&
+            !loading &&
+            "grayscale opacity-50 shadow-none bg-slate-100/70 border-slate-300/80",
+          className,
+        )}
+        {...props}
+      >
+        <Power
+          className={cn(
+            "h-20 w-20",
+            !props.disabled &&
+              "active:scale-90 transition-transform duration-300",
+          )}
+        />
+      </button>
 
-                        // Стили ТОЛЬКО для отключенного состояния (но не для загрузки)
-                        (props.disabled && !loading) && 'grayscale opacity-50 shadow-none bg-slate-100/70 border-slate-300/80',
-                        className
-                    )}
-                    {...props}
-                >
-                    <Power className={cn(
-                    "h-20 w-20",
-                    !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(
-                            'h-full w-full animate-spin rounded-full border-4',
-                            'border-transparent',
-                            checked ? 'border-t-green-500' : 'border-t-red-500',
-                            'blur-xs'
-                        )} />
-                    </div>
-                )}
-            </div>
-        );
-    }
-);
+      {loading && (
+        <div className="absolute inset-0 flex items-center justify-center z-20">
+          <div
+            className={cn(
+              "h-full w-full animate-spin rounded-full border-4",
+              "border-transparent",
+              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,
-} from "@/components/ui/sidebar"
-import { t } from 'i18next';
-import { cn } from '@root/lib/utils';
+  SidebarMenuItem,
+  useSidebar,
+} from "@/components/ui/sidebar";
+import { t } from "i18next";
+import { cn } from "@root/lib/utils";
 
 import {
   Home,
@@ -19,21 +21,22 @@ import {
   Cable,
   ListChecks,
   FileText,
-  Settings, EarthLock,
-} from 'lucide-react';
+  Settings,
+  EarthLock,
+} from "lucide-react";
 import { UpdateButton } from "@/components/layout/update-button";
 import React from "react";
-import { SheetClose } from '@/components/ui/sheet';
-import logo from "@/assets/image/logo.png"
+import { SheetClose } from "@/components/ui/sheet";
+import logo from "@/assets/image/logo.png";
 
 const menuItems = [
-  { title: 'Home', url: '/home', icon: Home },
-  { title: 'Profiles', url: '/profile', icon: Users },
-  { title: 'Proxies', url: '/proxies', icon: Server },
-  { title: 'Connections', url: '/connections', icon: Cable },
-  { title: 'Rules', url: '/rules', icon: ListChecks },
-  { title: 'Logs', url: '/logs', icon: FileText },
-  { title: 'Settings', url: '/settings', icon: Settings },
+  { title: "Home", url: "/home", icon: Home },
+  { title: "Profiles", url: "/profile", icon: Users },
+  { title: "Proxies", url: "/proxies", icon: Server },
+  { title: "Connections", url: "/connections", icon: Cable },
+  { title: "Rules", url: "/rules", icon: ListChecks },
+  { title: "Logs", url: "/logs", icon: FileText },
+  { 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
-            src={logo}
-            alt="logo"
-            className="h-6 w-6 flex-shrink-0"
-          />
+          <img 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',
-                      'data-[active=true]:font-semibold data-[active=true]:border'
+                      "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",
                     )}
                   >
                     <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)}>
-                    {isMobile ? (
-                        <SheetClose asChild>
-                          {linkElement}
-                        </SheetClose>
+                  <SidebarMenuItem key={item.title} className="my-1">
+                    <SidebarMenuButton
+                      asChild
+                      isActive={isActive}
+                      tooltip={t(item.title)}
+                    >
+                      {isMobile ? (
+                        <SheetClose asChild>{linkElement}</SheetClose>
                       ) : (
                         linkElement
                       )}
-                  </SidebarMenuButton>
-                </SidebarMenuItem>
-                )
+                    </SidebarMenuButton>
+                  </SidebarMenuItem>
+                );
               })}
             </SidebarMenu>
           </SidebarGroupContent>
@@ -104,5 +103,5 @@ export function AppSidebar() {
         </div>
       </SidebarFooter>
     </Sidebar>
-  )
+  );
 }

src/components/layout/update-button.tsx

@@ -6,7 +6,7 @@ import { DialogRef } from "../base";
 import { useVerge } from "@/hooks/use-verge";
 import { Button } from "@/components/ui/button";
 import { t } from "i18next";
-import {Download, RefreshCw} from "lucide-react";
+import { Download, RefreshCw } from "lucide-react";
 import { useSidebar } from "../ui/sidebar";
 
 interface Props {
@@ -17,7 +17,7 @@ export const UpdateButton = (props: Props) => {
   const { className } = props;
   const { verge } = useVerge();
   const { auto_check_update } = verge || {};
-   const { state: sidebarState } = useSidebar();
+  const { state: sidebarState } = useSidebar();
 
   const viewerRef = useRef<DialogRef>(null);
 
@@ -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,26 +15,28 @@ export const useCustomTheme = () => {
   const mode = useThemeMode();
   const setMode = useSetThemeMode();
 
-  const [systemTheme, setSystemTheme] = useState(
-      () => window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"
+  const [systemTheme, setSystemTheme] = useState(() =>
+    window.matchMedia("(prefers-color-scheme: dark)").matches
+      ? "dark"
+      : "light",
   );
 
   useEffect(() => {
     setMode(
-        theme_mode === "light" || theme_mode === "dark" ? theme_mode : "system",
+      theme_mode === "light" || theme_mode === "dark" ? theme_mode : "system",
     );
   }, [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);
-    return () => mediaQuery.removeEventListener('change', handleChange);
+    mediaQuery.addEventListener("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 { useTranslation } from 'react-i18next';
+import React, { useEffect, useState } from "react";
+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
-                    variant="outline"
-                    className="text-xs shadow-sm"
-                  >
+                  <Badge 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">
-                      {parseTraffic(download)}
-                    </span>
+                    <span className="pr-5">{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" />}
-
+                      <span>{parseTraffic(total)}</span>
+                    ) : (
+                      <Infinity className="h-3 w-3 inline mr-1.5" />
+                    )}
                   </div>
                 </div>
               </div>
@@ -510,11 +508,11 @@ export const ProfileItem = (props: Props) => {
       )}
 
       <ConfirmViewer
-          open={confirmOpen}
-          onOpenChange={setConfirmOpen}
-          onConfirm={onDelete}
-          title={t("Delete Profile", { name: truncatedName })}
-          description={t("This action cannot be undone.")}
+        open={confirmOpen}
+        onOpenChange={setConfirmOpen}
+        onConfirm={onDelete}
+        title={t("Delete Profile", { name: truncatedName })}
+        description={t("This action cannot be undone.")}
       />
     </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,23 +168,35 @@ 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('устройств')) {
-          window.dispatchEvent(new CustomEvent('show-hwid-error', { detail: errorMessage }));
+        if (
+          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 });
-              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("info", t("Import failed, retrying with Clash proxy..."));
+          try {
+            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()}`,
+            );
+          }
         } else {
-            showNotice("error", errorMessage);
+          showNotice("error", errorMessage);
         }
       } finally {
         setIsImporting(false);
@@ -302,19 +317,26 @@ export const ProfileViewer = forwardRef<ProfileViewerRef, Props>(
               </div>
 
               {/^(vmess|vless|ss|socks|trojan):\/\//.test(importUrl) && (
-                  <div className="space-y-2">
+                <div className="space-y-2">
                   <Label>{t("Template")}</Label>
-                  <Select value={selectedTemplate} onValueChange={setSelectedTemplate}>
-                      <SelectTrigger>
-                          <SelectValue placeholder="Select a template..." />
-                      </SelectTrigger>
-                      <SelectContent>
-                          <SelectItem value="default">{t("Default Template")}</SelectItem>
-                          <SelectItem value="without_ru">{t("Template without RU Rules")}</SelectItem>
-                      </SelectContent>
+                  <Select
+                    value={selectedTemplate}
+                    onValueChange={setSelectedTemplate}
+                  >
+                    <SelectTrigger>
+                      <SelectValue placeholder="Select a template..." />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="default">
+                        {t("Default Template")}
+                      </SelectItem>
+                      <SelectItem value="without_ru">
+                        {t("Template without RU Rules")}
+                      </SelectItem>
+                    </SelectContent>
                   </Select>
-              </div>
-          )}
+                </div>
+              )}
 
               <Button
                 variant="outline"
@@ -473,15 +495,15 @@ export const ProfileViewer = forwardRef<ProfileViewerRef, Props>(
                       control={control}
                       name="option.update_always"
                       render={({ field }) => (
-                          <FormItem className="flex flex-row items-center justify-between">
-                              <FormLabel>{t("Update on Startup")}</FormLabel>
-                              <FormControl>
-                                <Switch
-                                  checked={field.value}
-                                  onCheckedChange={field.onChange}
-                                />
-                              </FormControl>
-                          </FormItem>
+                        <FormItem className="flex flex-row items-center justify-between">
+                          <FormLabel>{t("Update on Startup")}</FormLabel>
+                          <FormControl>
+                            <Switch
+                              checked={field.value}
+                              onCheckedChange={field.onChange}
+                            />
+                          </FormControl>
+                        </FormItem>
                       )}
                     />
                     <FormField

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);
@@ -149,75 +150,112 @@ export const LayoutViewer = forwardRef<DialogRef>((props, ref) => {
   });
 
   return (
-      <Dialog open={open} onOpenChange={setOpen}>
-        <DialogContent className="sm:max-w-md">
-          <DialogHeader>
-            <DialogTitle>{t("Layout Setting")}</DialogTitle>
-          </DialogHeader>
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle>{t("Layout Setting")}</DialogTitle>
+        </DialogHeader>
 
-          <div className="py-4 space-y-1">
-            {OS === "macos" && (
-                <>
-                  <SettingRow label={t("Tray Icon")}>
-                    <Select
-                        onValueChange={(value) => handleConfigChange({ tray_icon: value as any })}
-                        value={localConfig.tray_icon ?? "monochrome"}
-                    >
-                      <SelectTrigger className="w-40 h-8"><SelectValue /></SelectTrigger>
-                      <SelectContent>
-                        <SelectItem value="monochrome">{t("Monochrome")}</SelectItem>
-                        <SelectItem value="colorful">{t("Colorful")}</SelectItem>
-                      </SelectContent>
-                    </Select>
-                  </SettingRow>
+        <div className="py-4 space-y-1">
+          {OS === "macos" && (
+            <>
+              <SettingRow label={t("Tray Icon")}>
+                <Select
+                  onValueChange={(value) =>
+                    handleConfigChange({ tray_icon: value as any })
+                  }
+                  value={localConfig.tray_icon ?? "monochrome"}
+                >
+                  <SelectTrigger className="w-40 h-8">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="monochrome">
+                      {t("Monochrome")}
+                    </SelectItem>
+                    <SelectItem value="colorful">{t("Colorful")}</SelectItem>
+                  </SelectContent>
+                </Select>
+              </SettingRow>
 
-                  <SettingRow label={t("Enable Tray Icon")}>
-                    <Switch
-                        checked={localConfig.enable_tray_icon ?? true}
-                        onCheckedChange={(checked) => handleConfigChange({ enable_tray_icon: checked })}
-                    />
-                  </SettingRow>
-                </>
-            )}
+              <SettingRow label={t("Enable Tray Icon")}>
+                <Switch
+                  checked={localConfig.enable_tray_icon ?? true}
+                  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")}>
-                {localConfig.common_tray_icon && commonIcon && (
-                    <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")}>
-                {localConfig.sysproxy_tray_icon && sysproxyIcon && (
-                    <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")}>
-                {localConfig.tun_tray_icon && tunIcon && (
-                    <img src={convertFileSrc(tunIcon)} className="h-5 mr-2" alt="tun mode tray icon" />
-                )}
-                {localConfig.tun_tray_icon ? t("Clear") : t("Browse")}
-              </Button>
-            </SettingRow>
-          </div>
-
-          <DialogFooter>
-            <DialogClose asChild>
-              <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" />}
-              {t("Save")}
+          <SettingRow label={t("Common Tray Icon")}>
+            <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"
+                />
+              )}
+              {localConfig.common_tray_icon ? t("Clear") : t("Browse")}
             </Button>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
+          </SettingRow>
+
+          <SettingRow label={t("System Proxy Tray Icon")}>
+            <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"
+                />
+              )}
+              {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")}
+            >
+              {localConfig.tun_tray_icon && tunIcon && (
+                <img
+                  src={convertFileSrc(tunIcon)}
+                  className="h-5 mr-2"
+                  alt="tun mode tray icon"
+                />
+              )}
+              {localConfig.tun_tray_icon ? t("Clear") : t("Browse")}
+            </Button>
+          </SettingRow>
+        </div>
+
+        <DialogFooter>
+          <DialogClose asChild>
+            <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" />}
+            {t("Save")}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
   );
 });

src/components/setting/setting-system.tsx

@@ -1,4 +1,4 @@
-import {useMemo, useRef, useState} from "react";
+import { useMemo, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useLockFn } from "ahooks";
 import { mutate } from "swr";
@@ -43,7 +43,7 @@ import {
   Power,
   BellOff,
   Repeat,
-  Fingerprint
+  Fingerprint,
 } from "lucide-react";
 
 // Модальные окна
@@ -56,7 +56,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
-import {useProfiles} from "@/hooks/use-profiles";
+import { useProfiles } from "@/hooks/use-profiles";
 
 const isWIN = getSystem() === "windows";
 interface Props {
@@ -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/setting/setting-verge-basic.tsx

@@ -188,20 +188,20 @@ const SettingVergeBasic = ({ onError }: Props) => {
 
         {OS !== "linux" && (
           <SettingRow
-              label={
-                <LabelWithIcon
-                    icon={MousePointerClick}
-                    text={t("Tray Click Event")}
-                />
-              }
+            label={
+              <LabelWithIcon
+                icon={MousePointerClick}
+                text={t("Tray Click Event")}
+              />
+            }
           >
             <GuardState
-                value={tray_event ?? "main_window"}
-                onCatch={onError}
-                onFormat={(v) => v}
-                onChange={(e) => onChangeData({ tray_event: e })}
-                onGuard={(e) => patchVerge({ tray_event: e })}
-                onChangeProps="onValueChange"
+              value={tray_event ?? "main_window"}
+              onCatch={onError}
+              onFormat={(v) => v}
+              onChange={(e) => onChangeData({ tray_event: e })}
+              onGuard={(e) => patchVerge({ tray_event: e })}
+              onChangeProps="onValueChange"
             >
               <Select>
                 <SelectTrigger className="w-40 h-8">

src/components/ui/dropdown-menu.tsx

@@ -5,263 +5,263 @@ import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";
 import { cn } from "@root/lib/utils";
 
 function DropdownMenu({
-    ...props
-  }: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
   return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />;
 }
 
 function DropdownMenuPortal({
-      ...props
-    }: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
   return (
-      <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
+    <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
   );
 }
 
 function DropdownMenuTrigger({
-       ...props
-     }: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
-    return (
-      <DropdownMenuPrimitive.Trigger
-          data-slot="dropdown-menu-trigger"
-          {...props}
-      />
-    );
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
+  return (
+    <DropdownMenuPrimitive.Trigger
+      data-slot="dropdown-menu-trigger"
+      {...props}
+    />
+  );
 }
 
 function DropdownMenuContent({
-       className,
-       sideOffset = 4,
-       ...props
-     }: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
-    return (
-      <DropdownMenuPrimitive.Portal>
-        <DropdownMenuPrimitive.Content
-            data-slot="dropdown-menu-content"
-            sideOffset={sideOffset}
-            className={cn(
-                "z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md p-1",
-                "backdrop-blur-sm bg-white/70 border border-white/40",
-                "dark:bg-white/10 dark:border-white/20",
-                "shadow-[0_8px_32px_rgba(0,0,0,0.12)] dark:shadow-[0_8px_32px_rgba(255,255,255,0.05)]",
-                "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-                className,
-            )}
-            {...props}
-        />
-      </DropdownMenuPrimitive.Portal>
+  className,
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
+  return (
+    <DropdownMenuPrimitive.Portal>
+      <DropdownMenuPrimitive.Content
+        data-slot="dropdown-menu-content"
+        sideOffset={sideOffset}
+        className={cn(
+          "z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md p-1",
+          "backdrop-blur-sm bg-white/70 border border-white/40",
+          "dark:bg-white/10 dark:border-white/20",
+          "shadow-[0_8px_32px_rgba(0,0,0,0.12)] dark:shadow-[0_8px_32px_rgba(255,255,255,0.05)]",
+          "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+          className,
+        )}
+        {...props}
+      />
+    </DropdownMenuPrimitive.Portal>
   );
 }
 
 function DropdownMenuGroup({
-     ...props
-    }: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
-    return (
-      <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
-    );
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
+  return (
+    <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
+  );
 }
 
 function DropdownMenuItem({
-    className,
-    inset,
-    variant = "default",
-    ...props
-  }: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
+  className,
+  inset,
+  variant = "default",
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
   inset?: boolean;
   variant?: "default" | "destructive";
 }) {
   return (
-      <DropdownMenuPrimitive.Item
-          data-slot="dropdown-menu-item"
-          data-inset={inset}
-          data-variant={variant}
-          className={cn(
-              "relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8",
-              "hover:backdrop-blur-sm hover:bg-gray-200/80 focus:backdrop-blur-sm focus:bg-gray-200/80",
-              "dark:hover:bg-white/20 dark:focus:bg-white/20",
-              "data-[variant=destructive]:text-destructive data-[variant=destructive]:hover:bg-red-200/80 data-[variant=destructive]:focus:bg-red-200/80",
-              "dark:data-[variant=destructive]:hover:bg-destructive/20 dark:data-[variant=destructive]:focus:bg-destructive/20",
-              "data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive",
-              "[&_svg:not([class*='text-'])]:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-              className,
-          )}
-          {...props}
-      />
+    <DropdownMenuPrimitive.Item
+      data-slot="dropdown-menu-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        "relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8",
+        "hover:backdrop-blur-sm hover:bg-gray-200/80 focus:backdrop-blur-sm focus:bg-gray-200/80",
+        "dark:hover:bg-white/20 dark:focus:bg-white/20",
+        "data-[variant=destructive]:text-destructive data-[variant=destructive]:hover:bg-red-200/80 data-[variant=destructive]:focus:bg-red-200/80",
+        "dark:data-[variant=destructive]:hover:bg-destructive/20 dark:data-[variant=destructive]:focus:bg-destructive/20",
+        "data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive",
+        "[&_svg:not([class*='text-'])]:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    />
   );
 }
 
 function DropdownMenuCheckboxItem({
-    className,
-    children,
-    checked,
-    ...props
-  }: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {
+  className,
+  children,
+  checked,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {
   return (
-      <DropdownMenuPrimitive.CheckboxItem
-          data-slot="dropdown-menu-checkbox-item"
-          className={cn(
-              "relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-              "hover:backdrop-blur-sm hover:bg-gray-200/80 focus:backdrop-blur-sm focus:bg-gray-200/80",
-              "dark:hover:bg-white/20 dark:focus:bg-white/20",
-              "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-              className,
-          )}
-          checked={checked}
-          {...props}
-      >
+    <DropdownMenuPrimitive.CheckboxItem
+      data-slot="dropdown-menu-checkbox-item"
+      className={cn(
+        "relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+        "hover:backdrop-blur-sm hover:bg-gray-200/80 focus:backdrop-blur-sm focus:bg-gray-200/80",
+        "dark:hover:bg-white/20 dark:focus:bg-white/20",
+        "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      checked={checked}
+      {...props}
+    >
       <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
         <DropdownMenuPrimitive.ItemIndicator>
           <CheckIcon className="size-4" />
         </DropdownMenuPrimitive.ItemIndicator>
       </span>
-        {children}
-      </DropdownMenuPrimitive.CheckboxItem>
+      {children}
+    </DropdownMenuPrimitive.CheckboxItem>
   );
 }
 
 function DropdownMenuRadioGroup({
-      ...props
-    }: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
-    return (
-      <DropdownMenuPrimitive.RadioGroup
-          data-slot="dropdown-menu-radio-group"
-          {...props}
-      />
-    );
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
+  return (
+    <DropdownMenuPrimitive.RadioGroup
+      data-slot="dropdown-menu-radio-group"
+      {...props}
+    />
+  );
 }
 
 function DropdownMenuRadioItem({
-     className,
-     children,
-     ...props
-    }: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {
   return (
-      <DropdownMenuPrimitive.RadioItem
-          data-slot="dropdown-menu-radio-item"
-          className={cn(
-              "relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-              "hover:backdrop-blur-sm hover:bg-gray-200/80 focus:backdrop-blur-sm focus:bg-gray-200/80",
-              "dark:hover:bg-white/20 dark:focus:bg-white/20",
-              "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-              className,
-          )}
-          {...props}
-      >
+    <DropdownMenuPrimitive.RadioItem
+      data-slot="dropdown-menu-radio-item"
+      className={cn(
+        "relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+        "hover:backdrop-blur-sm hover:bg-gray-200/80 focus:backdrop-blur-sm focus:bg-gray-200/80",
+        "dark:hover:bg-white/20 dark:focus:bg-white/20",
+        "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    >
       <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
         <DropdownMenuPrimitive.ItemIndicator>
           <CircleIcon className="size-2 fill-current" />
         </DropdownMenuPrimitive.ItemIndicator>
       </span>
-        {children}
-      </DropdownMenuPrimitive.RadioItem>
+      {children}
+    </DropdownMenuPrimitive.RadioItem>
   );
 }
 
 function DropdownMenuLabel({
-     className,
-     inset,
-     ...props
-   }: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
+  className,
+  inset,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
   inset?: boolean;
 }) {
   return (
-      <DropdownMenuPrimitive.Label
-          data-slot="dropdown-menu-label"
-          data-inset={inset}
-          className={cn(
-              "px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
-              "text-foreground/80",
-              className,
-          )}
-          {...props}
-      />
+    <DropdownMenuPrimitive.Label
+      data-slot="dropdown-menu-label"
+      data-inset={inset}
+      className={cn(
+        "px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
+        "text-foreground/80",
+        className,
+      )}
+      {...props}
+    />
   );
 }
 
 function DropdownMenuSeparator({
-     className,
-     ...props
-   }: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
   return (
-      <DropdownMenuPrimitive.Separator
-          data-slot="dropdown-menu-separator"
-          className={cn(
-              "-mx-1 my-1 h-px",
-              "bg-gray-400/50 dark:bg-white/20",
-              className
-          )}
-          {...props}
-      />
+    <DropdownMenuPrimitive.Separator
+      data-slot="dropdown-menu-separator"
+      className={cn(
+        "-mx-1 my-1 h-px",
+        "bg-gray-400/50 dark:bg-white/20",
+        className,
+      )}
+      {...props}
+    />
   );
 }
 
 function DropdownMenuShortcut({
-    className,
-    ...props
-  }: React.ComponentProps<"span">) {
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
   return (
-      <span
-          data-slot="dropdown-menu-shortcut"
-          className={cn(
-              "ml-auto text-xs tracking-widest",
-              "text-foreground/60",
-              className,
-          )}
-          {...props}
-      />
+    <span
+      data-slot="dropdown-menu-shortcut"
+      className={cn(
+        "ml-auto text-xs tracking-widest",
+        "text-foreground/60",
+        className,
+      )}
+      {...props}
+    />
   );
 }
 
 function DropdownMenuSub({
-   ...props
- }: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
   return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />;
 }
 
 function DropdownMenuSubTrigger({
-      className,
-      inset,
-      children,
-      ...props
-    }: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
+  className,
+  inset,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
   inset?: boolean;
 }) {
   return (
-      <DropdownMenuPrimitive.SubTrigger
-          data-slot="dropdown-menu-sub-trigger"
-          data-inset={inset}
-          className={cn(
-              "flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8",
-              "hover:backdrop-blur-sm hover:bg-gray-200/80 focus:backdrop-blur-sm focus:bg-gray-200/80",
-              "data-[state=open]:backdrop-blur-sm data-[state=open]:bg-gray-200/80",
-              "dark:hover:bg-white/20 dark:focus:bg-white/20 dark:data-[state=open]:bg-white/20",
-              className,
-          )}
-          {...props}
-      >
-        {children}
-        <ChevronRightIcon className="ml-auto size-4" />
-      </DropdownMenuPrimitive.SubTrigger>
+    <DropdownMenuPrimitive.SubTrigger
+      data-slot="dropdown-menu-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        "flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8",
+        "hover:backdrop-blur-sm hover:bg-gray-200/80 focus:backdrop-blur-sm focus:bg-gray-200/80",
+        "data-[state=open]:backdrop-blur-sm data-[state=open]:bg-gray-200/80",
+        "dark:hover:bg-white/20 dark:focus:bg-white/20 dark:data-[state=open]:bg-white/20",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="ml-auto size-4" />
+    </DropdownMenuPrimitive.SubTrigger>
   );
 }
 
 function DropdownMenuSubContent({
-      className,
-      ...props
-    }: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
   return (
-      <DropdownMenuPrimitive.SubContent
-          data-slot="dropdown-menu-sub-content"
-          className={cn(
-              "z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md p-1",
-              "backdrop-blur-sm bg-white/70 border border-white/40",
-              "dark:bg-white/10 dark:border-white/20",
-              "shadow-[0_8px_32px_rgba(0,0,0,0.12)] dark:shadow-[0_8px_32px_rgba(255,255,255,0.05)]",
-              "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-              className,
-          )}
-          {...props}
-      />
+    <DropdownMenuPrimitive.SubContent
+      data-slot="dropdown-menu-sub-content"
+      className={cn(
+        "z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md p-1",
+        "backdrop-blur-sm bg-white/70 border border-white/40",
+        "dark:bg-white/10 dark:border-white/20",
+        "shadow-[0_8px_32px_rgba(0,0,0,0.12)] dark:shadow-[0_8px_32px_rgba(255,255,255,0.05)]",
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className,
+      )}
+      {...props}
+    />
   );
 }
 

src/components/ui/select.tsx

@@ -5,191 +5,191 @@ import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react";
 import { cn } from "@root/lib/utils";
 
 function Select({
-        ...props
-    }: React.ComponentProps<typeof SelectPrimitive.Root>) {
-    return <SelectPrimitive.Root data-slot="select" {...props} />;
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Root>) {
+  return <SelectPrimitive.Root data-slot="select" {...props} />;
 }
 
 function SelectGroup({
-         ...props
-     }: React.ComponentProps<typeof SelectPrimitive.Group>) {
-    return <SelectPrimitive.Group data-slot="select-group" {...props} />;
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Group>) {
+  return <SelectPrimitive.Group data-slot="select-group" {...props} />;
 }
 
 function SelectValue({
-         ...props
-     }: React.ComponentProps<typeof SelectPrimitive.Value>) {
-    return <SelectPrimitive.Value data-slot="select-value" {...props} />;
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Value>) {
+  return <SelectPrimitive.Value data-slot="select-value" {...props} />;
 }
 
 function SelectTrigger({
-       className,
-       size = "default",
-       children,
-       ...props
-   }: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
-    size?: "sm" | "default";
+  className,
+  size = "default",
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
+  size?: "sm" | "default";
 }) {
-    return (
-        <SelectPrimitive.Trigger
-            data-slot="select-trigger"
-            data-size={size}
-            className={cn(
-                "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive flex w-fit items-center justify-between gap-2 rounded-md border px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow,background-color] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-                "backdrop-blur-sm bg-white/80 border-gray-300/60",
-                "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",
-                className,
-            )}
-            {...props}
-        >
-            {children}
-            <SelectPrimitive.Icon asChild>
-                <ChevronDownIcon className="size-4 opacity-50" />
-            </SelectPrimitive.Icon>
-        </SelectPrimitive.Trigger>
-    );
+  return (
+    <SelectPrimitive.Trigger
+      data-slot="select-trigger"
+      data-size={size}
+      className={cn(
+        "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive flex w-fit items-center justify-between gap-2 rounded-md border px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow,background-color] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "backdrop-blur-sm bg-white/80 border-gray-300/60",
+        "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",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <SelectPrimitive.Icon asChild>
+        <ChevronDownIcon className="size-4 opacity-50" />
+      </SelectPrimitive.Icon>
+    </SelectPrimitive.Trigger>
+  );
 }
 
 function SelectContent({
-       className,
-       children,
-       position = "popper",
-       ...props
-   }: React.ComponentProps<typeof SelectPrimitive.Content>) {
-    return (
-        <SelectPrimitive.Portal>
-            <SelectPrimitive.Content
-                data-slot="select-content"
-                className={cn(
-                    "relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md",
-                    "backdrop-blur-sm bg-white/70 border border-white/40",
-                    "dark:bg-white/10 dark:border-white/20",
-                    "shadow-[0_8px_32px_rgba(0,0,0,0.12)] dark:shadow-[0_8px_32px_rgba(255,255,255,0.05)]",
-                    "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-                    position === "popper" &&
-                    "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
-                    className,
-                )}
-                position={position}
-                {...props}
-            >
-                <SelectScrollUpButton />
-                <SelectPrimitive.Viewport
-                    className={cn(
-                        "p-1",
-                        position === "popper" &&
-                        "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1",
-                    )}
-                >
-                    {children}
-                </SelectPrimitive.Viewport>
-                <SelectScrollDownButton />
-            </SelectPrimitive.Content>
-        </SelectPrimitive.Portal>
-    );
+  className,
+  children,
+  position = "popper",
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Content>) {
+  return (
+    <SelectPrimitive.Portal>
+      <SelectPrimitive.Content
+        data-slot="select-content"
+        className={cn(
+          "relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md",
+          "backdrop-blur-sm bg-white/70 border border-white/40",
+          "dark:bg-white/10 dark:border-white/20",
+          "shadow-[0_8px_32px_rgba(0,0,0,0.12)] dark:shadow-[0_8px_32px_rgba(255,255,255,0.05)]",
+          "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+          position === "popper" &&
+            "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+          className,
+        )}
+        position={position}
+        {...props}
+      >
+        <SelectScrollUpButton />
+        <SelectPrimitive.Viewport
+          className={cn(
+            "p-1",
+            position === "popper" &&
+              "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1",
+          )}
+        >
+          {children}
+        </SelectPrimitive.Viewport>
+        <SelectScrollDownButton />
+      </SelectPrimitive.Content>
+    </SelectPrimitive.Portal>
+  );
 }
 
 function SelectLabel({
-         className,
-         ...props
-     }: React.ComponentProps<typeof SelectPrimitive.Label>) {
-    return (
-        <SelectPrimitive.Label
-            data-slot="select-label"
-            className={cn("text-muted-foreground px-2 py-1.5 text-xs", className)}
-            {...props}
-        />
-    );
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Label>) {
+  return (
+    <SelectPrimitive.Label
+      data-slot="select-label"
+      className={cn("text-muted-foreground px-2 py-1.5 text-xs", className)}
+      {...props}
+    />
+  );
 }
 
 function SelectItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Item>) {
+  return (
+    <SelectPrimitive.Item
+      data-slot="select-item"
+      className={cn(
+        "relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+        "hover:backdrop-blur-sm hover:bg-gray-200/80 focus:backdrop-blur-sm focus:bg-gray-200/80",
+        "dark:hover:bg-white/20 dark:focus:bg-white/20",
+        "transition-all duration-200",
+        "[&_svg:not([class*='text-'])]:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
         className,
-        children,
-        ...props
-    }: React.ComponentProps<typeof SelectPrimitive.Item>) {
-    return (
-        <SelectPrimitive.Item
-            data-slot="select-item"
-            className={cn(
-                "relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-                "hover:backdrop-blur-sm hover:bg-gray-200/80 focus:backdrop-blur-sm focus:bg-gray-200/80",
-                "dark:hover:bg-white/20 dark:focus:bg-white/20",
-                "transition-all duration-200",
-                "[&_svg:not([class*='text-'])]:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
-                className,
-            )}
-            {...props}
-        >
+      )}
+      {...props}
+    >
       <span className="absolute right-2 flex size-3.5 items-center justify-center">
         <SelectPrimitive.ItemIndicator>
           <CheckIcon className="size-4" />
         </SelectPrimitive.ItemIndicator>
       </span>
-            <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
-        </SelectPrimitive.Item>
-    );
+      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+    </SelectPrimitive.Item>
+  );
 }
 
 function SelectSeparator({
-         className,
-         ...props
-     }: React.ComponentProps<typeof SelectPrimitive.Separator>) {
-    return (
-        <SelectPrimitive.Separator
-            data-slot="select-separator"
-            className={cn("bg-border pointer-events-none -mx-1 my-1 h-px", className)}
-            {...props}
-        />
-    );
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Separator>) {
+  return (
+    <SelectPrimitive.Separator
+      data-slot="select-separator"
+      className={cn("bg-border pointer-events-none -mx-1 my-1 h-px", className)}
+      {...props}
+    />
+  );
 }
 
 function SelectScrollUpButton({
-      className,
-      ...props
-  }: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
-    return (
-        <SelectPrimitive.ScrollUpButton
-            data-slot="select-scroll-up-button"
-            className={cn(
-                "flex cursor-default items-center justify-center py-1",
-                className,
-            )}
-            {...props}
-        >
-            <ChevronUpIcon className="size-4" />
-        </SelectPrimitive.ScrollUpButton>
-    );
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
+  return (
+    <SelectPrimitive.ScrollUpButton
+      data-slot="select-scroll-up-button"
+      className={cn(
+        "flex cursor-default items-center justify-center py-1",
+        className,
+      )}
+      {...props}
+    >
+      <ChevronUpIcon className="size-4" />
+    </SelectPrimitive.ScrollUpButton>
+  );
 }
 
 function SelectScrollDownButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
+  return (
+    <SelectPrimitive.ScrollDownButton
+      data-slot="select-scroll-down-button"
+      className={cn(
+        "flex cursor-default items-center justify-center py-1",
         className,
-        ...props
-    }: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
-    return (
-        <SelectPrimitive.ScrollDownButton
-            data-slot="select-scroll-down-button"
-            className={cn(
-                "flex cursor-default items-center justify-center py-1",
-                className,
-            )}
-            {...props}
-        >
-            <ChevronDownIcon className="size-4" />
-        </SelectPrimitive.ScrollDownButton>
-    );
+      )}
+      {...props}
+    >
+      <ChevronDownIcon className="size-4" />
+    </SelectPrimitive.ScrollDownButton>
+  );
 }
 
 export {
-    Select,
-    SelectContent,
-    SelectGroup,
-    SelectItem,
-    SelectLabel,
-    SelectScrollDownButton,
-    SelectScrollUpButton,
-    SelectSeparator,
-    SelectTrigger,
-    SelectValue,
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
 };

src/components/ui/sidebar.tsx

@@ -1,54 +1,54 @@
-import * as React from "react"
-import { Slot } from "@radix-ui/react-slot"
-import { cva, VariantProps } from "class-variance-authority"
-import { PanelLeftIcon } from "lucide-react"
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva, VariantProps } from "class-variance-authority";
+import { PanelLeftIcon } from "lucide-react";
 
-import { useIsMobile } from "@root/hooks/use-mobile"
-import { cn } from "@root/lib/utils"
-import { Button } from "@root/src/components/ui/button"
-import { Input } from "@root/src/components/ui/input"
-import { Separator } from "@root/src/components/ui/separator"
+import { useIsMobile } from "@root/hooks/use-mobile";
+import { cn } from "@root/lib/utils";
+import { Button } from "@root/src/components/ui/button";
+import { Input } from "@root/src/components/ui/input";
+import { Separator } from "@root/src/components/ui/separator";
 import {
   Sheet,
   SheetContent,
   SheetDescription,
   SheetHeader,
   SheetTitle,
-} from "@root/src/components/ui/sheet"
-import { Skeleton } from "@root/src/components/ui/skeleton"
+} from "@root/src/components/ui/sheet";
+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_MAX_AGE = 60 * 60 * 24 * 7
-const SIDEBAR_WIDTH = "16rem"
-const SIDEBAR_WIDTH_MOBILE = "18rem"
-const SIDEBAR_WIDTH_ICON = "3rem"
-const SIDEBAR_KEYBOARD_SHORTCUT = "b"
+const SIDEBAR_COOKIE_NAME = "sidebar_state";
+const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
+const SIDEBAR_WIDTH = "16rem";
+const SIDEBAR_WIDTH_MOBILE = "18rem";
+const SIDEBAR_WIDTH_ICON = "3rem";
+const SIDEBAR_KEYBOARD_SHORTCUT = "b";
 
 type SidebarContextProps = {
-  state: "expanded" | "collapsed"
-  open: boolean
-  setOpen: (open: boolean) => void
-  openMobile: boolean
-  setOpenMobile: (open: boolean) => void
-  isMobile: boolean
-  toggleSidebar: () => void
-}
+  state: "expanded" | "collapsed";
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  openMobile: boolean;
+  setOpenMobile: (open: boolean) => void;
+  isMobile: boolean;
+  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
-  open?: boolean
-  onOpenChange?: (open: boolean) => void
+  defaultOpen?: boolean;
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
 }) {
-  const isMobile = useIsMobile()
-  const [openMobile, setOpenMobile] = React.useState(false)
+  const isMobile = useIsMobile();
+  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 = openProp ?? _open
+  const [_open, _setOpen] = React.useState(defaultOpen);
+  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)
-  }, [isMobile, setOpen, setOpenMobile])
+    return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open);
+  }, [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()
-        toggleSidebar()
+        event.preventDefault();
+        toggleSidebar();
       }
-    }
+    };
 
-    window.addEventListener("keydown", handleKeyDown)
-    return () => window.removeEventListener("keydown", handleKeyDown)
-  }, [toggleSidebar])
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [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"
-  variant?: "sidebar" | "floating" | "inset"
-  collapsible?: "offcanvas" | "icon" | "none"
+  side?: "left" | "right";
+  variant?: "sidebar" | "floating" | "inset";
+  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)
-        toggleSidebar()
+        onClick?.(event);
+        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
-  isActive?: boolean
-  tooltip?: string | React.ComponentProps<typeof TooltipContent>
+  asChild?: boolean;
+  isActive?: boolean;
+  tooltip?: string | React.ComponentProps<typeof TooltipContent>;
 } & VariantProps<typeof sidebarMenuButtonVariants>) {
-  const Comp = asChild ? Slot : "button"
-  const { isMobile, state } = useSidebar()
+  const Comp = asChild ? Slot : "button";
+  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
-  showOnHover?: boolean
+  asChild?: 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
-  size?: "sm" | "md"
-  isActive?: boolean
+  asChild?: boolean;
+  size?: "sm" | "md";
+  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 { WebviewWindow } from '@tauri-apps/api/webviewWindow';
+import { useEffect, useState, useCallback } from "react";
+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) => {
-    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;
+  const handleZoom = useCallback(
+    (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());
-      return roundedZoom;
-    });
-  }, [appWindow]);
+        appWindow.setZoom(roundedZoom);
+        const newStrokeWidth = 2 / roundedZoom;
+        document.documentElement.style.setProperty(
+          "--icon-stroke-width",
+          newStrokeWidth.toString(),
+        );
+        return roundedZoom;
+      });
+    },
+    [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 'NumpadAdd':
+          case "Equal":
+          case "NumpadAdd":
             event.preventDefault();
             handleZoom(ZOOM_STEP);
             break;
-          case 'Minus':
-          case 'NumpadSubtract':
+          case "Minus":
+          case "NumpadSubtract":
             event.preventDefault();
             handleZoom(-ZOOM_STEP);
             break;
-          case 'Digit0':
-          case 'Numpad0':
+          case "Digit0":
+          case "Numpad0":
             event.preventDefault();
             handleZoom(0, true);
             break;
@@ -82,12 +90,12 @@ export const useZoomControls = () => {
       }
     };
 
-    window.addEventListener('wheel', handleWheel, { passive: false });
-    window.addEventListener('keydown', handleKeyDown);
+    window.addEventListener("wheel", handleWheel, { passive: false });
+    window.addEventListener("keydown", handleKeyDown);
 
     return () => {
-      window.removeEventListener('wheel', handleWheel);
-      window.removeEventListener('keydown', handleKeyDown);
+      window.removeEventListener("wheel", handleWheel);
+      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,16 +48,21 @@ 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('устройств')) {
-        window.dispatchEvent(new CustomEvent('show-hwid-error', { detail: msg }));
-       } else {
-         showNotice("error", msg);
-       }
-       break;
+      console.log(msg);
+      if (
+        msg.toLowerCase().includes("device") ||
+        msg.toLowerCase().includes("устройств")
+      ) {
+        window.dispatchEvent(
+          new CustomEvent("show-hwid-error", { detail: msg }),
+        );
+      } else {
+        showNotice("error", msg);
+      }
+      break;
     case "set_config::error":
       showNotice("error", msg);
       break;
@@ -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;
@@ -445,7 +481,7 @@ const Layout = () => {
   }, [start_page]);
 
   if (!routersEles) {
-      return <div className="h-screen w-screen bg-background" />;
+    return <div className="h-screen w-screen bg-background" />;
   }
 
   const AppLayout = () => {
@@ -454,21 +490,18 @@ const Layout = () => {
     const routersEles = useRoutes(routers);
 
     return (
-        <>
-            <AppSidebar />
-            <main
-                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 })}
-                </div>
-            </main>
-            <HwidErrorDialog />
-        </>
+      <>
+        <AppSidebar />
+        <main 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 })}
+          </div>
+        </main>
+        <HwidErrorDialog />
+      </>
     );
-};
-
-
+  };
 
   return (
     <SWRConfig value={{ errorRetryCount: 3 }}>

src/pages/connections.tsx

@@ -22,9 +22,7 @@ import {
   ConnectionDetail,
   ConnectionDetailRef,
 } from "@/components/connection/connection-detail";
-import {
-  BaseSearchBox,
-} from "@/components/base/base-search-box";
+import { BaseSearchBox } from "@/components/base/base-search-box";
 import { Button } from "@/components/ui/button";
 import {
   Select,
@@ -50,7 +48,7 @@ import {
   ArrowDown,
   ArrowUp,
 } from "lucide-react";
-import {SidebarTrigger} from "@/components/ui/sidebar";
+import { SidebarTrigger } from "@/components/ui/sidebar";
 
 interface IConnectionsItem {
   id: string;
@@ -91,14 +89,15 @@ const ConnectionsPage = () => {
 
   const orderOpts: Record<string, OrderFunc> = {
     Default: (list) =>
-        list.sort(
-            (a, b) =>
-                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)),
+      list.sort(
+        (a, b) =>
+          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)),
     "Download Speed": (list) =>
-        list.sort((a, b) => (b.curDownload ?? 0) - (a.curDownload ?? 0)),
+      list.sort((a, b) => (b.curDownload ?? 0) - (a.curDownload ?? 0)),
   };
 
   const [isPaused, setIsPaused] = useState(false);
@@ -121,7 +120,7 @@ const ConnectionsPage = () => {
     let conns = displayData.connections.filter((conn) => {
       const { host, destinationIP, process } = conn.metadata;
       return (
-          match(host || "") || match(destinationIP || "") || match(process || "")
+        match(host || "") || match(destinationIP || "") || match(process || "")
       );
     });
     if (orderFunc) conns = orderFunc(conns);
@@ -129,24 +128,24 @@ const ConnectionsPage = () => {
   }, [displayData, match, curOrderOpt]);
 
   const [scrollingElement, setScrollingElement] = useState<
-      HTMLElement | Window | null
+    HTMLElement | Window | null
   >(null);
   const [isScrolled, setIsScrolled] = useState(false);
 
   const scrollerRefCallback = useCallback(
-      (node: HTMLElement | Window | null) => {
-        setScrollingElement(node);
-      },
-      [],
+    (node: HTMLElement | Window | null) => {
+      setScrollingElement(node);
+    },
+    [],
   );
 
   useEffect(() => {
     if (!scrollingElement) return;
     const handleScroll = () => {
       const scrollTop =
-          scrollingElement instanceof Window
-              ? scrollingElement.scrollY
-              : scrollingElement.scrollTop;
+        scrollingElement instanceof Window
+          ? scrollingElement.scrollY
+          : scrollingElement.scrollTop;
       setIsScrolled(scrollTop > 5);
     };
 
@@ -157,8 +156,8 @@ const ConnectionsPage = () => {
   const onCloseAll = useLockFn(closeAllConnections);
   const detailRef = useRef<ConnectionDetailRef>(null!);
   const handleSearch = useCallback(
-      (m: (content: string) => boolean) => setMatch(() => m),
-      [],
+    (m: (content: string) => boolean) => setMatch(() => m),
+    [],
   );
   const handlePauseToggle = useCallback(() => {
     setIsPaused((prev) => {
@@ -179,134 +178,134 @@ const ConnectionsPage = () => {
   const headerHeight = "7rem";
 
   return (
-      <div className="relative h-full w-full">
-        <div
-            className="absolute top-0 left-0 right-0 z-20 p-4 bg-background/80 backdrop-blur-sm"
-            style={{ height: headerHeight }}
-        >
-          <div className="flex justify-between items-center">
-            <div className="w-10">
-              <SidebarTrigger />
-            </div>
-            <h2 className="text-2xl font-semibold tracking-tight">
-              {t("Connections")}
-            </h2>
-            <TooltipProvider delayDuration={100}>
-              <div className="flex items-center gap-2">
-                <div className="flex items-center gap-4 text-sm text-muted-foreground">
-                  <div className="flex items-center gap-1">
-                    <ArrowDown className="h-4 w-4 text-green-500" />
-                    {parseTraffic(displayData.downloadTotal)}
-                  </div>
-                  <div className="flex items-center gap-1">
-                    <ArrowUp className="h-4 w-4 text-sky-500" />
-                    {parseTraffic(displayData.uploadTotal)}
-                  </div>
+    <div className="relative h-full w-full">
+      <div
+        className="absolute top-0 left-0 right-0 z-20 p-4 bg-background/80 backdrop-blur-sm"
+        style={{ height: headerHeight }}
+      >
+        <div className="flex justify-between items-center">
+          <div className="w-10">
+            <SidebarTrigger />
+          </div>
+          <h2 className="text-2xl font-semibold tracking-tight">
+            {t("Connections")}
+          </h2>
+          <TooltipProvider delayDuration={100}>
+            <div className="flex items-center gap-2">
+              <div className="flex items-center gap-4 text-sm text-muted-foreground">
+                <div className="flex items-center gap-1">
+                  <ArrowDown className="h-4 w-4 text-green-500" />
+                  {parseTraffic(displayData.downloadTotal)}
+                </div>
+                <div className="flex items-center gap-1">
+                  <ArrowUp className="h-4 w-4 text-sky-500" />
+                  {parseTraffic(displayData.uploadTotal)}
                 </div>
-                <Separator orientation="vertical" className="h-6 mx-2" />
-                <Tooltip>
-                  <TooltipTrigger asChild>
-                    <Button
-                        variant="ghost"
-                        size="icon"
-                        onClick={() =>
-                            setSetting((o) =>
-                                o?.layout !== "table"
-                                    ? { ...o, layout: "table" }
-                                    : { ...o, layout: "list" },
-                            )
-                        }
-                    >
-                      {isTableLayout ? (
-                          <List className="h-5 w-5" />
-                      ) : (
-                          <Table2 className="h-5 w-5" />
-                      )}
-                    </Button>
-                  </TooltipTrigger>
-                  <TooltipContent>
-                    <p>{isTableLayout ? t("List View") : t("Table View")}</p>
-                  </TooltipContent>
-                </Tooltip>
-                <Tooltip>
-                  <TooltipTrigger asChild>
-                    <Button
-                        variant="ghost"
-                        size="icon"
-                        onClick={handlePauseToggle}
-                    >
-                      {isPaused ? (
-                          <PlayCircle className="h-5 w-5" />
-                      ) : (
-                          <PauseCircle className="h-5 w-5" />
-                      )}
-                    </Button>
-                  </TooltipTrigger>
-                  <TooltipContent>
-                    <p>{isPaused ? t("Resume") : t("Pause")}</p>
-                  </TooltipContent>
-                </Tooltip>
-                <Button size="sm" variant="destructive" onClick={onCloseAll}>
-                  {t("Close All")}
-                </Button>
               </div>
-            </TooltipProvider>
-          </div>
-          <div className="flex items-center gap-2 mt-2">
-            {!isTableLayout && (
-                <Select
-                    value={curOrderOpt}
-                    onValueChange={(value) => setOrderOpt(value)}
-                >
-                  <SelectTrigger className="w-[180px]">
-                    <SelectValue placeholder={t("Sort by")} />
-                  </SelectTrigger>
-                  <SelectContent>
-                    {Object.keys(orderOpts).map((opt) => (
-                        <SelectItem key={opt} value={opt}>
-                          {t(opt)}
-                        </SelectItem>
-                    ))}
-                  </SelectContent>
-                </Select>
-            )}
-            <div className="flex-1">
-              <BaseSearchBox onSearch={handleSearch} />
+              <Separator orientation="vertical" className="h-6 mx-2" />
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    onClick={() =>
+                      setSetting((o) =>
+                        o?.layout !== "table"
+                          ? { ...o, layout: "table" }
+                          : { ...o, layout: "list" },
+                      )
+                    }
+                  >
+                    {isTableLayout ? (
+                      <List className="h-5 w-5" />
+                    ) : (
+                      <Table2 className="h-5 w-5" />
+                    )}
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent>
+                  <p>{isTableLayout ? t("List View") : t("Table View")}</p>
+                </TooltipContent>
+              </Tooltip>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    onClick={handlePauseToggle}
+                  >
+                    {isPaused ? (
+                      <PlayCircle className="h-5 w-5" />
+                    ) : (
+                      <PauseCircle className="h-5 w-5" />
+                    )}
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent>
+                  <p>{isPaused ? t("Resume") : t("Pause")}</p>
+                </TooltipContent>
+              </Tooltip>
+              <Button size="sm" variant="destructive" onClick={onCloseAll}>
+                {t("Close All")}
+              </Button>
             </div>
-          </div>
+          </TooltipProvider>
         </div>
-
-        <div
-            ref={scrollerRefCallback}
-            className="absolute left-0 right-0 bottom-0 overflow-y-auto"
-            style={{ top: headerHeight }}
-        >
-          {filterConn.length === 0 ? (
-              <BaseEmpty />
-          ) : isTableLayout ? (
-              <div className="p-4 pt-0">
-                <ConnectionTable
-                    connections={filterConn}
-                    onShowDetail={(detail) => detailRef.current?.open(detail)}
-                    scrollerRef={scrollerRefCallback}
-                />
-              </div>
-          ) : (
-              <Virtuoso
-                  scrollerRef={scrollerRefCallback}
-                  data={filterConn}
-                  className="h-full w-full"
-                  itemContent={(_, item) => (
-                      <ConnectionItem
-                          value={item}
-                          onShowDetail={() => detailRef.current?.open(item)}
-                      />
-                  )}
-              />
+        <div className="flex items-center gap-2 mt-2">
+          {!isTableLayout && (
+            <Select
+              value={curOrderOpt}
+              onValueChange={(value) => setOrderOpt(value)}
+            >
+              <SelectTrigger className="w-[180px]">
+                <SelectValue placeholder={t("Sort by")} />
+              </SelectTrigger>
+              <SelectContent>
+                {Object.keys(orderOpts).map((opt) => (
+                  <SelectItem key={opt} value={opt}>
+                    {t(opt)}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
           )}
-          <ConnectionDetail ref={detailRef} />
+          <div className="flex-1">
+            <BaseSearchBox onSearch={handleSearch} />
+          </div>
         </div>
       </div>
+
+      <div
+        ref={scrollerRefCallback}
+        className="absolute left-0 right-0 bottom-0 overflow-y-auto"
+        style={{ top: headerHeight }}
+      >
+        {filterConn.length === 0 ? (
+          <BaseEmpty />
+        ) : isTableLayout ? (
+          <div className="p-4 pt-0">
+            <ConnectionTable
+              connections={filterConn}
+              onShowDetail={(detail) => detailRef.current?.open(detail)}
+              scrollerRef={scrollerRefCallback}
+            />
+          </div>
+        ) : (
+          <Virtuoso
+            scrollerRef={scrollerRefCallback}
+            data={filterConn}
+            className="h-full w-full"
+            itemContent={(_, item) => (
+              <ConnectionItem
+                value={item}
+                onShowDetail={() => detailRef.current?.open(item)}
+              />
+            )}
+          />
+        )}
+        <ConnectionDetail ref={detailRef} />
+      </div>
+    </div>
   );
 };
 

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";
@@ -48,45 +63,45 @@ const MinimalHomePage: React.FC = () => {
   const [isToggling, setIsToggling] = useState(false);
   const [isUpdating, setIsUpdating] = useState(false);
   const { profiles, patchProfiles, activateSelected, mutateProfiles } =
-      useProfiles();
+    useProfiles();
   const viewerRef = useRef<ProfileViewerRef>(null);
   const [uidToActivate, setUidToActivate] = useState<string | null>(null);
   const { connections } = useAppData();
 
   const profileItems = useMemo(() => {
     const items =
-        profiles && Array.isArray(profiles.items) ? profiles.items : [];
+      profiles && Array.isArray(profiles.items) ? profiles.items : [];
     const allowedTypes = ["local", "remote"];
     return items.filter((i: any) => i && allowedTypes.includes(i.type!));
   }, [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;
 
   const activateProfile = useCallback(
-      async (uid: string, notifySuccess: boolean) => {
-        try {
-          await patchProfiles({ current: uid });
-          await closeAllConnections();
-          await activateSelected();
-          if (notifySuccess) {
-            toast.success(t("Profile Switched"));
-          }
-        } catch (err: any) {
-          toast.error(err.message || err.toString());
-          mutateProfiles();
+    async (uid: string, notifySuccess: boolean) => {
+      try {
+        await patchProfiles({ current: uid });
+        await closeAllConnections();
+        await activateSelected();
+        if (notifySuccess) {
+          toast.success(t("Profile Switched"));
         }
-      },
-      [patchProfiles, activateSelected, mutateProfiles, t],
+      } catch (err: any) {
+        toast.error(err.message || err.toString());
+        mutateProfiles();
+      }
+    },
+    [patchProfiles, activateSelected, mutateProfiles, t],
   );
 
   useEffect(() => {
-    const uidToActivate = sessionStorage.getItem('activateProfile');
-    if (uidToActivate && profileItems.some(p => p.uid === uidToActivate)) {
+    const uidToActivate = sessionStorage.getItem("activateProfile");
+    if (uidToActivate && profileItems.some((p) => p.uid === uidToActivate)) {
       activateProfile(uidToActivate, false);
-      sessionStorage.removeItem('activateProfile');
+      sessionStorage.removeItem("activateProfile");
     }
   }, [profileItems, activateProfile]);
 
@@ -101,7 +116,7 @@ const MinimalHomePage: React.FC = () => {
   const isTunAvailable = isServiceMode || isAdminMode;
   const isProxyEnabled = verge?.enable_system_proxy || verge?.enable_tun_mode;
   const showTunAlert =
-      (verge?.primary_action ?? "tun-mode") === "tun-mode" && !isTunAvailable;
+    (verge?.primary_action ?? "tun-mode") === "tun-mode" && !isTunAvailable;
 
   const handleToggleProxy = useLockFn(async () => {
     const turningOn = !isProxyEnabled;
@@ -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,315 +174,324 @@ const MinimalHomePage: React.FC = () => {
   const statusInfo = useMemo(() => {
     if (isToggling) {
       return {
-        text: isProxyEnabled ? t('Disconnecting...') : t('Connecting...'),
-        color: isProxyEnabled ? '#f59e0b' : '#84cc16',
+        text: isProxyEnabled ? t("Disconnecting...") : t("Connecting..."),
+        color: isProxyEnabled ? "#f59e0b" : "#84cc16",
         isAnimating: true,
       };
     }
     if (isProxyEnabled) {
       return {
-        text: t('Connected'),
-        color: '#22c55e',
+        text: t("Connected"),
+        color: "#22c55e",
         isAnimating: false,
       };
     }
     return {
-      text: t('Disconnected'),
-      color: '#ef4444',
+      text: t("Disconnected"),
+      color: "#ef4444",
       isAnimating: false,
     };
   }, [isToggling, isProxyEnabled, t]);
 
   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
-              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%)',
-                  filter: 'blur(100px)',
-                }}
-            />
-        )}
-
-        <header className="flex-shrink-0 p-5 grid grid-cols-3 items-center z-10">
-          <div className="flex justify-start">
-            <SidebarTrigger />
-          </div>
-          <div className="justify-self-center flex flex-col items-center gap-2">
-            <div className="relative flex items-center justify-center">
-              {profileItems.length > 0 ? (
-                  <>
-                    <div className="absolute right-full mr-2">
-                      <TooltipProvider>
-                        <Tooltip>
-                          <TooltipTrigger asChild>
-                            <Button
-                                variant="outline"
-                                size="icon"
-                                onClick={() => viewerRef.current?.create()}
-                                className={cn(
-                                    "backdrop-blur-sm bg-white/80 border-gray-300/60",
-                                    "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"
-                                )}
-                            >
-                              <PlusCircle className="h-4 w-4" />
-                            </Button>
-                          </TooltipTrigger>
-                          <TooltipContent>
-                            <p>{t("Add Profile")}</p>
-                          </TooltipContent>
-                        </Tooltip>
-                      </TooltipProvider>
-                    </div>
-                    <DropdownMenu>
-                      <DropdownMenuTrigger asChild>
-                        <Button
-                            variant="outline"
-                            className={cn(
-                                "w-full max-w-[250px] sm:max-w-xs",
-                                "backdrop-blur-sm bg-white/80 border-gray-300/60",
-                                "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"
-                            )}
-                        >
-                          <span className="truncate">{currentProfileName}</span>
-                          <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
-                        </Button>
-                      </DropdownMenuTrigger>
-                      <DropdownMenuContent className="w-[--radix-dropdown-menu-trigger-width]">
-                        <DropdownMenuLabel>{t("Profiles")}</DropdownMenuLabel>
-                        <DropdownMenuSeparator />
-                        {profileItems.map((p) => (
-                            <DropdownMenuItem
-                                key={p.uid}
-                                onSelect={() => handleProfileChange(p.uid)}
-                            >
-                              <span className="flex-1 truncate">{p.name}</span>
-                              {profiles?.current === p.uid && (
-                                  <Check className="ml-4 h-4 w-4" />
-                              )}
-                            </DropdownMenuItem>
-                        ))}
-                      </DropdownMenuContent>
-                    </DropdownMenu>
-                    {currentProfile?.type === 'remote' && (
-                        <div className="absolute left-full ml-2">
-                          <TooltipProvider>
-                            <Tooltip>
-                              <TooltipTrigger asChild>
-                                <Button
-                                    variant="ghost"
-                                    size="icon"
-                                    onClick={handleUpdateProfile}
-                                    disabled={isUpdating}
-                                    className={cn(
-                                        "flex-shrink-0",
-                                        "backdrop-blur-sm bg-white/70 border border-gray-300/50",
-                                        "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"
-                                    )}
-                                >
-                                  {isUpdating ? <Loader2 className="h-5 w-5 animate-spin" /> : <RefreshCw className="h-5 w-5" />}
-                                </Button>
-                              </TooltipTrigger>
-                              <TooltipContent><p>{t("Update Profile")}</p></TooltipContent>
-                            </Tooltip>
-                          </TooltipProvider>
-                        </div>
-                    )}
-                  </>
-              ) : (
-                  <>
-                    <div className="absolute right-full mr-2">
-                      <TooltipProvider>
-                        <Tooltip>
-                          <TooltipTrigger asChild>
-                            <Button
-                                variant="outline"
-                                size="icon"
-                                onClick={() => viewerRef.current?.create()}
-                                className={cn(
-                                    "backdrop-blur-sm bg-white/80 border-gray-300/60",
-                                    "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"
-                                )}
-                            >
-                              <PlusCircle className="h-4 w-4" />
-                            </Button>
-                          </TooltipTrigger>
-                          <TooltipContent>
-                            <p>{t("Add Profile")}</p>
-                          </TooltipContent>
-                        </Tooltip>
-                      </TooltipProvider>
-                    </div>
-                    <Button
-                        variant="outline"
-                        disabled
-                        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"
-                        )}
-                    >
-                      <span className="truncate">{t("No profiles available")}</span>
-                      <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-30" />
-                    </Button>
-                  </>
-              )}
-            </div>
-          </div>
-          <div className="flex justify-end">
-          </div>
-        </header>
-
-        <main className="flex-1 overflow-y-auto flex items-center justify-center">
-          <div className="relative flex flex-col items-center gap-8 py-10 w-full max-w-4xl px-4">
-            {currentProfile?.announce && (
-                <div className="absolute -top-15 w-full flex justify-center text-center max-w-lg">
-                  {currentProfile.announce_url ? (
-                      <a
-                          href={currentProfile.announce_url}
-                          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')}
-                      >
-                        <span>{currentProfile.announce.replace(/\\n/g, '\n')}</span>
-                        <ExternalLink className="h-4 w-4 flex-shrink-0" />
-                      </a>
-                  ) : (
-                      <p className="text-base font-semibold text-foreground whitespace-pre-wrap">
-                        {currentProfile.announce}
-                      </p>
-                  )}
-                </div>
-            )}
-            <div className="relative text-center">
-              <h1
-                  className={cn(
-                      "text-4xl mb-2 font-semibold transition-colors duration-300",
-                      statusInfo.isAnimating && "animate-pulse"
-                  )}
-                  style={{ color: statusInfo.color }}
-              >
-                {statusInfo.text}
-              </h1>
-              {isProxyEnabled && (
-                  <div className="absolute top-full left-1/2 -translate-x-1/2 mt-52 flex justify-center items-center text-sm text-muted-foreground gap-6">
-                    <div className="flex items-center gap-1">
-                      <ArrowDown className="h-4 w-4 text-green-500" />
-                      {parseTraffic(connections.downloadTotal)}
-                    </div>
-                    <div className="flex items-center gap-1">
-                      <ArrowUp className="h-4 w-4 text-sky-500" />
-                      {parseTraffic(connections.uploadTotal)}
-                    </div>
-                  </div>
-              )}
-            </div>
-
-            <div className="relative -translate-y-6">
-              <PowerButton
-                  loading={isToggling}
-                  checked={!!isProxyEnabled}
-                  onClick={handleToggleProxy}
-                  disabled={showTunAlert || isToggling || profileItems.length === 0}
-                  aria-label={t("Toggle Proxy")}
-              />
-            </div>
-
-            {showTunAlert && (
-                <div className="w-full max-w-sm">
-                  <Alert
-                      variant="destructive"
-                      className="flex flex-col items-center gap-2 text-center"
-                  >
-                    <AlertTriangle className="h-4 w-4" />
-                    <AlertTitle>{t("Attention Required")}</AlertTitle>
-                    <AlertDescription className="text-xs">
-                      {t("TUN requires Service Mode or Admin Mode")}
-                    </AlertDescription>
-                    {!isServiceMode && !isAdminMode && (
-                        <Button
-                            size="sm"
-                            className="mt-2"
-                            onClick={installServiceAndRestartCore}
-                        >
-                          <Wrench className="mr-2 h-4 w-4" />
-                          {t("Install Service")}
-                        </Button>
-                    )}
-                  </Alert>
-                </div>
-            )}
-
-            <div className="w-full max-w-sm mt-4 flex justify-center">
-              {profileItems.length > 0 ? (
-                  <ProxySelectors />
-              ) : (
-                  <Alert className="flex flex-col items-center gap-2 text-center">
-                    <PlusCircle className="h-4 w-4" />
-                    <AlertTitle>{t("Get Started")}</AlertTitle>
-                    <AlertDescription className="whitespace-pre-wrap">
-                      {t(
-                          "You don't have any profiles yet. Add your first one to begin.",
-                      )}
-                    </AlertDescription>
-                    <Button
-                        className="mt-2"
-                        onClick={() => viewerRef.current?.create()}
-                    >
-                      {t("Add Profile")}
-                    </Button>
-                  </Alert>
-              )}
-            </div>
-          </div>
-        </main>
-        <footer className="flex justify-center p-4 flex-shrink-0">
-          {currentProfile?.support_url && (
-              <div className="flex items-center gap-2 text-sm text-muted-foreground">
-                <span>{t("Support")}:</span>
-                <TooltipProvider>
-                  <Tooltip>
-                    <TooltipTrigger asChild>
-                      <a 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" />
-                        )}
-                      </a>
-                    </TooltipTrigger>
-                    <TooltipContent>
-                      <p>{currentProfile.support_url}</p>
-                    </TooltipContent>
-                  </Tooltip>
-                </TooltipProvider>
-              </div>
-          )}
-        </footer>
-        <ProfileViewer ref={viewerRef} onChange={() => mutateProfiles()} />
+    <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 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%)",
+            filter: "blur(100px)",
+          }}
+        />
+      )}
+
+      <header className="flex-shrink-0 p-5 grid grid-cols-3 items-center z-10">
+        <div className="flex justify-start">
+          <SidebarTrigger />
+        </div>
+        <div className="justify-self-center flex flex-col items-center gap-2">
+          <div className="relative flex items-center justify-center">
+            {profileItems.length > 0 ? (
+              <>
+                <div className="absolute right-full mr-2">
+                  <TooltipProvider>
+                    <Tooltip>
+                      <TooltipTrigger asChild>
+                        <Button
+                          variant="outline"
+                          size="icon"
+                          onClick={() => viewerRef.current?.create()}
+                          className={cn(
+                            "backdrop-blur-sm bg-white/80 border-gray-300/60",
+                            "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",
+                          )}
+                        >
+                          <PlusCircle className="h-4 w-4" />
+                        </Button>
+                      </TooltipTrigger>
+                      <TooltipContent>
+                        <p>{t("Add Profile")}</p>
+                      </TooltipContent>
+                    </Tooltip>
+                  </TooltipProvider>
+                </div>
+                <DropdownMenu>
+                  <DropdownMenuTrigger asChild>
+                    <Button
+                      variant="outline"
+                      className={cn(
+                        "w-full max-w-[250px] sm:max-w-xs",
+                        "backdrop-blur-sm bg-white/80 border-gray-300/60",
+                        "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",
+                      )}
+                    >
+                      <span className="truncate">{currentProfileName}</span>
+                      <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                    </Button>
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent className="w-[--radix-dropdown-menu-trigger-width]">
+                    <DropdownMenuLabel>{t("Profiles")}</DropdownMenuLabel>
+                    <DropdownMenuSeparator />
+                    {profileItems.map((p) => (
+                      <DropdownMenuItem
+                        key={p.uid}
+                        onSelect={() => handleProfileChange(p.uid)}
+                      >
+                        <span className="flex-1 truncate">{p.name}</span>
+                        {profiles?.current === p.uid && (
+                          <Check className="ml-4 h-4 w-4" />
+                        )}
+                      </DropdownMenuItem>
+                    ))}
+                  </DropdownMenuContent>
+                </DropdownMenu>
+                {currentProfile?.type === "remote" && (
+                  <div className="absolute left-full ml-2">
+                    <TooltipProvider>
+                      <Tooltip>
+                        <TooltipTrigger asChild>
+                          <Button
+                            variant="ghost"
+                            size="icon"
+                            onClick={handleUpdateProfile}
+                            disabled={isUpdating}
+                            className={cn(
+                              "flex-shrink-0",
+                              "backdrop-blur-sm bg-white/70 border border-gray-300/50",
+                              "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",
+                            )}
+                          >
+                            {isUpdating ? (
+                              <Loader2 className="h-5 w-5 animate-spin" />
+                            ) : (
+                              <RefreshCw className="h-5 w-5" />
+                            )}
+                          </Button>
+                        </TooltipTrigger>
+                        <TooltipContent>
+                          <p>{t("Update Profile")}</p>
+                        </TooltipContent>
+                      </Tooltip>
+                    </TooltipProvider>
+                  </div>
+                )}
+              </>
+            ) : (
+              <>
+                <div className="absolute right-full mr-2">
+                  <TooltipProvider>
+                    <Tooltip>
+                      <TooltipTrigger asChild>
+                        <Button
+                          variant="outline"
+                          size="icon"
+                          onClick={() => viewerRef.current?.create()}
+                          className={cn(
+                            "backdrop-blur-sm bg-white/80 border-gray-300/60",
+                            "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",
+                          )}
+                        >
+                          <PlusCircle className="h-4 w-4" />
+                        </Button>
+                      </TooltipTrigger>
+                      <TooltipContent>
+                        <p>{t("Add Profile")}</p>
+                      </TooltipContent>
+                    </Tooltip>
+                  </TooltipProvider>
+                </div>
+                <Button
+                  variant="outline"
+                  disabled
+                  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",
+                  )}
+                >
+                  <span className="truncate">{t("No profiles available")}</span>
+                  <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-30" />
+                </Button>
+              </>
+            )}
+          </div>
+        </div>
+        <div className="flex justify-end"></div>
+      </header>
+
+      <main className="flex-1 overflow-y-auto flex items-center justify-center">
+        <div className="relative flex flex-col items-center gap-8 py-10 w-full max-w-4xl px-4">
+          {currentProfile?.announce && (
+            <div className="absolute -top-15 w-full flex justify-center text-center max-w-lg">
+              {currentProfile.announce_url ? (
+                <a
+                  href={currentProfile.announce_url}
+                  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")}
+                >
+                  <span>{currentProfile.announce.replace(/\\n/g, "\n")}</span>
+                  <ExternalLink className="h-4 w-4 flex-shrink-0" />
+                </a>
+              ) : (
+                <p className="text-base font-semibold text-foreground whitespace-pre-wrap">
+                  {currentProfile.announce}
+                </p>
+              )}
+            </div>
+          )}
+          <div className="relative text-center">
+            <h1
+              className={cn(
+                "text-4xl mb-2 font-semibold transition-colors duration-300",
+                statusInfo.isAnimating && "animate-pulse",
+              )}
+              style={{ color: statusInfo.color }}
+            >
+              {statusInfo.text}
+            </h1>
+            {isProxyEnabled && (
+              <div className="absolute top-full left-1/2 -translate-x-1/2 mt-52 flex justify-center items-center text-sm text-muted-foreground gap-6">
+                <div className="flex items-center gap-1">
+                  <ArrowDown className="h-4 w-4 text-green-500" />
+                  {parseTraffic(connections.downloadTotal)}
+                </div>
+                <div className="flex items-center gap-1">
+                  <ArrowUp className="h-4 w-4 text-sky-500" />
+                  {parseTraffic(connections.uploadTotal)}
+                </div>
+              </div>
+            )}
+          </div>
+
+          <div className="relative -translate-y-6">
+            <PowerButton
+              loading={isToggling}
+              checked={!!isProxyEnabled}
+              onClick={handleToggleProxy}
+              disabled={showTunAlert || isToggling || profileItems.length === 0}
+              aria-label={t("Toggle Proxy")}
+            />
+          </div>
+
+          {showTunAlert && (
+            <div className="w-full max-w-sm">
+              <Alert
+                variant="destructive"
+                className="flex flex-col items-center gap-2 text-center"
+              >
+                <AlertTriangle className="h-4 w-4" />
+                <AlertTitle>{t("Attention Required")}</AlertTitle>
+                <AlertDescription className="text-xs">
+                  {t("TUN requires Service Mode or Admin Mode")}
+                </AlertDescription>
+                {!isServiceMode && !isAdminMode && (
+                  <Button
+                    size="sm"
+                    className="mt-2"
+                    onClick={installServiceAndRestartCore}
+                  >
+                    <Wrench className="mr-2 h-4 w-4" />
+                    {t("Install Service")}
+                  </Button>
+                )}
+              </Alert>
+            </div>
+          )}
+
+          <div className="w-full max-w-sm mt-4 flex justify-center">
+            {profileItems.length > 0 ? (
+              <ProxySelectors />
+            ) : (
+              <Alert className="flex flex-col items-center gap-2 text-center">
+                <PlusCircle className="h-4 w-4" />
+                <AlertTitle>{t("Get Started")}</AlertTitle>
+                <AlertDescription className="whitespace-pre-wrap">
+                  {t(
+                    "You don't have any profiles yet. Add your first one to begin.",
+                  )}
+                </AlertDescription>
+                <Button
+                  className="mt-2"
+                  onClick={() => viewerRef.current?.create()}
+                >
+                  {t("Add Profile")}
+                </Button>
+              </Alert>
+            )}
+          </div>
+        </div>
+      </main>
+      <footer className="flex justify-center p-4 flex-shrink-0">
+        {currentProfile?.support_url && (
+          <div className="flex items-center gap-2 text-sm text-muted-foreground">
+            <span>{t("Support")}:</span>
+            <TooltipProvider>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <a
+                    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" />
+                    )}
+                  </a>
+                </TooltipTrigger>
+                <TooltipContent>
+                  <p>{currentProfile.support_url}</p>
+                </TooltipContent>
+              </Tooltip>
+            </TooltipProvider>
+          </div>
+        )}
+      </footer>
+      <ProfileViewer ref={viewerRef} onChange={() => mutateProfiles()} />
+    </div>
   );
 };
 

src/pages/logs.tsx

@@ -31,7 +31,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
-import {SidebarTrigger} from "@/components/ui/sidebar";
+import { SidebarTrigger } from "@/components/ui/sidebar";
 
 const LogPage = () => {
   const { t } = useTranslation();

src/pages/profiles.tsx

@@ -55,13 +55,7 @@ import {
   TooltipTrigger,
 } from "@/components/ui/tooltip";
 
-import {
-  PlusCircle,
-  RefreshCw,
-  Zap,
-  FileText,
-  Loader2,
-} from "lucide-react";
+import { 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: