From 3ab70498e6c66eeea64c7e4c685eca179b4a4785 Mon Sep 17 00:00:00 2001
From: typist <git@mail.typist.cc>
Date: Wed, 29 Oct 2025 08:26:26 +0800
Subject: [PATCH] feat: add ModeToggle component to layout and sidebar

- Integrated ModeToggle component into the layout for theme switching.
- Replaced the existing button in the sidebar footer with SidebarMenuButton for improved styling and functionality.
---
 src/components/sidebar/index.tsx | 13 ++++++-------
 src/layout.tsx                   |  4 +++-
 2 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/src/components/sidebar/index.tsx b/src/components/sidebar/index.tsx
index a43c742..5f6a6a4 100644
--- a/src/components/sidebar/index.tsx
+++ b/src/components/sidebar/index.tsx
@@ -1,11 +1,11 @@
 import type { ReactNode } from "react";
+import { Link } from "react-router-dom";
+import { ChevronRight } from "lucide-react";
+
 import { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarMenuButton, SidebarMenuItem, SidebarMenu, SidebarMenuSub, SidebarMenuSubItem, SidebarMenuSubButton } from "@/components/ui/sidebar";
 import { Collapsible, CollapsibleTrigger, CollapsibleContent } from "@/components/ui/collapsible";
 import { tools, type Tool } from "@/components/tool";
-import { Link } from "react-router-dom";
-import { ModeToggle } from "@/components/theme/toggle";
-import { Button } from "../ui/button";
-import { ChevronRight } from "lucide-react";
+
 
 export const AppSidebar = () => {
   // 递归构建完整路径
@@ -88,10 +88,9 @@ export const AppSidebar = () => {
         </SidebarGroup>
       </SidebarContent>
       <SidebarFooter className="flex flex-row justify-between items-center gap-2">
-        <Button variant="link">
+        <SidebarMenuButton variant="outline" asChild>
           <a href="mailto:litek@mail.typist.cc">need more tools?</a>
-        </Button>
-        <ModeToggle />
+        </SidebarMenuButton>
       </SidebarFooter>
     </Sidebar>
   );
diff --git a/src/layout.tsx b/src/layout.tsx
index 16b1a0c..fc3cfcc 100644
--- a/src/layout.tsx
+++ b/src/layout.tsx
@@ -4,6 +4,8 @@ import { Outlet } from "react-router-dom";
 import { ThemeProvider } from "@/components/theme/provider"
 import { SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar"
 import { AppSidebar } from "@/components/sidebar";
+import { ModeToggle } from "@/components/theme/toggle";
+
 import { useSEO } from "@/hooks/use-seo";
 
 export const Layout: FC = () => {
@@ -17,7 +19,7 @@ export const Layout: FC = () => {
         <div className="p-4 flex flex-col w-full h-[100vh] overflow-hidden">
           <nav className="flex items-center justify-between">
             <SidebarTrigger className="size-10" />
-            <div role="actions" />
+            <ModeToggle />
           </nav>
           <main className="flex-1 overflow-auto p-4 overflow-hidden">
             <Outlet />