refactor: format code with prettier and fix quotation marks

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