fix(theme): add persistence & update icon

apps/rowboat/app/projects/layout/components/sidebar.tsx

@@ -13,6 +13,7 @@ import {
   ChevronLeftIcon,
   ChevronRightIcon,
   Moon,
+  Sun,
   HelpCircle
 } from "lucide-react";
 import { getProjectConfig } from "@/app/actions/project_actions";
@@ -213,7 +214,7 @@ export default function Sidebar({ projectId, useRag, useAuth, collapsed = false,
                 text-zinc-600 dark:text-zinc-400
               `}
             >
-              <Moon size={COLLAPSED_ICON_SIZE} />
+              { theme == "light" ? <Moon size={COLLAPSED_ICON_SIZE} /> : <Sun size={COLLAPSED_ICON_SIZE} /> }
               {!collapsed && <span>Appearance</span>}
             </button>
           </Tooltip>

apps/rowboat/app/providers/theme-provider.tsx

@@ -15,21 +15,28 @@ type ThemeProviderState = {
 }
 
 const ThemeProviderContext = createContext<ThemeProviderState | undefined>(undefined)
+const root = window.document.documentElement
 
 export function ThemeProvider({
   children,
   defaultTheme = 'light',
 }: ThemeProviderProps) {
-  const [theme, setTheme] = useState<Theme>(defaultTheme)
+  const [theme, setTheme] = useState<Theme>(() => {
+    const storedTheme = localStorage.getItem("theme")
+    return storedTheme === 'dark' || storedTheme === 'light' ? storedTheme : defaultTheme
+  })
 
   useEffect(() => {
-    const root = window.document.documentElement
     root.classList.remove('light', 'dark')
     root.classList.add(theme)
   }, [theme])
 
   const toggleTheme = () => {
-    setTheme(theme === 'light' ? 'dark' : 'light')
+    setTheme((prevTheme) => {
+      const newTheme = prevTheme === 'light' ? 'dark' : 'light'
+      localStorage.setItem("theme", newTheme)
+      return newTheme
+    })
   }
 
   return (
@@ -45,4 +52,4 @@ export function useTheme() {
     throw new Error('useTheme must be used within a ThemeProvider')
   }
   return context
-} 
+}