refactor: format code with prettier and fix quotation marks

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,8 +50,7 @@ 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}
+    />
   );
 }
 
@@ -281,4 +281,4 @@ export {
   DropdownMenuSub,
   DropdownMenuSubTrigger,
   DropdownMenuSubContent,
-};
+};

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 };