From 64c53ee1ece6a3371fffa47a3c4bdfc04576c311 Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Wed, 29 Oct 2025 12:44:51 +0000
Subject: [PATCH] feat: Add theme toggle and back button

---
 src/App.tsx                          | 37 ++++++++++++++-------------
 src/components/layout/AppSidebar.tsx | 38 ++++++++++++++++++++++++++--
 2 files changed, 56 insertions(+), 19 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 132dd69..10dc395 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,6 +1,7 @@
 import { Toaster } from "@/components/ui/toaster";
 import { Toaster as Sonner } from "@/components/ui/sonner";
 import { TooltipProvider } from "@/components/ui/tooltip";
+import { ThemeProvider } from "next-themes";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { BrowserRouter, Routes, Route } from "react-router-dom";
 import { AppLayout } from "./components/layout/AppLayout";
@@ -15,23 +16,25 @@ const queryClient = new QueryClient();
 
 const App = () => (
   <QueryClientProvider client={queryClient}>
-    <TooltipProvider>
-      <Toaster />
-      <Sonner />
-      <BrowserRouter>
-        <Routes>
-          <Route element={<AppLayout />}>
-            <Route path="/" element={<Agents />} />
-            <Route path="/prompts" element={<Prompts />} />
-            <Route path="/test" element={<TestPrompt />} />
-            <Route path="/history" element={<History />} />
-            <Route path="/link" element={<LinkPrompt />} />
-          </Route>
-          {/* ADD ALL CUSTOM ROUTES ABOVE THE CATCH-ALL "*" ROUTE */}
-          <Route path="*" element={<NotFound />} />
-        </Routes>
-      </BrowserRouter>
-    </TooltipProvider>
+    <ThemeProvider attribute="class" defaultTheme="light">
+      <TooltipProvider>
+        <Toaster />
+        <Sonner />
+        <BrowserRouter>
+          <Routes>
+            <Route element={<AppLayout />}>
+              <Route path="/" element={<Agents />} />
+              <Route path="/prompts" element={<Prompts />} />
+              <Route path="/test" element={<TestPrompt />} />
+              <Route path="/history" element={<History />} />
+              <Route path="/link" element={<LinkPrompt />} />
+            </Route>
+            {/* ADD ALL CUSTOM ROUTES ABOVE THE CATCH-ALL "*" ROUTE */}
+            <Route path="*" element={<NotFound />} />
+          </Routes>
+        </BrowserRouter>
+      </TooltipProvider>
+    </ThemeProvider>
   </QueryClientProvider>
 );
 
diff --git a/src/components/layout/AppSidebar.tsx b/src/components/layout/AppSidebar.tsx
index 689e51d..43e962d 100644
--- a/src/components/layout/AppSidebar.tsx
+++ b/src/components/layout/AppSidebar.tsx
@@ -1,10 +1,14 @@
 import { NavLink } from "react-router-dom";
+import { useTheme } from "next-themes";
 import {
   Bot,
   FileText,
   TestTube,
   History,
   Link,
+  Sun,
+  Moon,
+  ArrowLeft,
 } from "lucide-react";
 import {
   Sidebar,
@@ -27,8 +31,14 @@ const menuItems = [
 ];
 
 export function AppSidebar() {
+  const { theme, setTheme } = useTheme();
+
+  const toggleTheme = () => {
+    setTheme(theme === "dark" ? "light" : "dark");
+  };
+
   return (
-    <Sidebar className="border-r border-border">
+    <Sidebar className="border-r border-border flex flex-col">
       <SidebarHeader className="border-b border-border px-6 py-4">
         <div className="flex items-center gap-2">
           <div className="h-8 w-8 rounded-lg bg-primary flex items-center justify-center">
@@ -41,7 +51,7 @@ export function AppSidebar() {
         </div>
       </SidebarHeader>
 
-      <SidebarContent>
+      <SidebarContent className="flex-1">
         <SidebarGroup>
           <SidebarGroupLabel className="text-xs font-medium text-muted-foreground px-3">
             Navegação
@@ -72,6 +82,30 @@ export function AppSidebar() {
           </SidebarGroupContent>
         </SidebarGroup>
       </SidebarContent>
+
+      <div className="border-t border-border p-4 space-y-2">
+        <button
+          onClick={toggleTheme}
+          className="w-full flex items-center gap-3 px-3 py-2 rounded-md text-foreground hover:bg-muted transition-colors"
+        >
+          {theme === "dark" ? (
+            <>
+              <Sun className="h-4 w-4" />
+              <span>Tema Claro</span>
+            </>
+          ) : (
+            <>
+              <Moon className="h-4 w-4" />
+              <span>Tema Escuro</span>
+            </>
+          )}
+        </button>
+
+        <button className="w-full flex items-center gap-3 px-3 py-2 rounded-md text-foreground hover:bg-muted transition-colors">
+          <ArrowLeft className="h-4 w-4" />
+          <span>Voltar</span>
+        </button>
+      </div>
     </Sidebar>
   );
 }