Fix theme and sidebar hydration

components/account-settings-dialog.tsx

@@ -2,7 +2,6 @@
 
 import { useState, useTransition } from 'react'
 import { useRouter } from 'next/navigation'
-import { useTheme } from 'next-themes'
 
 import type { User } from '@supabase/supabase-js'
 import {
@@ -38,6 +37,8 @@ import {
 import { Separator } from '@/components/ui/separator'
 import { Spinner } from '@/components/ui/spinner'
 
+import { useTheme } from '@/components/theme-provider'
+
 interface AccountSettingsDialogProps {
   open: boolean
   onOpenChange: (open: boolean) => void

components/app-sidebar.tsx

@@ -1,23 +1,20 @@
 import { Suspense } from 'react'
 import Link from 'next/link'
 
-import { IconPlus as Plus } from '@tabler/icons-react'
-
 import { cn } from '@/lib/utils'
 
 import {
   Sidebar,
   SidebarContent,
   SidebarHeader,
   SidebarMenu,
-  SidebarMenuButton,
-  SidebarMenuItem,
   SidebarRail,
   SidebarTrigger
 } from '@/components/ui/sidebar'
 
 import { ChatHistorySection } from './sidebar/chat-history-section'
 import { ChatHistorySkeleton } from './sidebar/chat-history-skeleton'
+import { NewChatMenuItem } from './sidebar/new-chat-menu-item'
 import { IconLogo } from './ui/icons'
 
 export default function AppSidebar() {
@@ -32,14 +29,7 @@ export default function AppSidebar() {
       </SidebarHeader>
       <SidebarContent className="flex flex-col px-2 py-4 h-full">
         <SidebarMenu>
-          <SidebarMenuItem>
-            <SidebarMenuButton asChild>
-              <Link href="/" className="flex items-center gap-2">
-                <Plus className="size-4" />
-                <span>New</span>
-              </Link>
-            </SidebarMenuButton>
-          </SidebarMenuItem>
+          <NewChatMenuItem />
         </SidebarMenu>
         <div className="flex-1 overflow-y-auto">
           <Suspense fallback={<ChatHistorySkeleton />}>

components/keyboard-shortcut-handler.tsx

@@ -1,7 +1,5 @@
 'use client'
 
-import { useTheme } from 'next-themes'
-
 import { toast } from 'sonner'
 
 import { SHORTCUT_EVENTS, SHORTCUTS } from '@/lib/keyboard-shortcuts'
@@ -12,6 +10,7 @@ import { useKeyboardShortcut } from '@/hooks/use-keyboard-shortcut'
 
 import { useSidebar } from './ui/sidebar'
 import { KeyboardShortcutDialog } from './keyboard-shortcut-dialog'
+import { useTheme } from './theme-provider'
 
 const THEME_CYCLE: Record<string, string> = {
   dark: 'light',

components/sidebar/new-chat-menu-item.tsx

@@ -0,0 +1,20 @@
+'use client'
+
+import Link from 'next/link'
+
+import { IconPlus as Plus } from '@tabler/icons-react'
+
+import { SidebarMenuButton, SidebarMenuItem } from '@/components/ui/sidebar'
+
+export function NewChatMenuItem() {
+  return (
+    <SidebarMenuItem>
+      <SidebarMenuButton asChild>
+        <Link href="/" className="flex items-center gap-2">
+          <Plus className="size-4" />
+          <span>New</span>
+        </Link>
+      </SidebarMenuButton>
+    </SidebarMenuItem>
+  )
+}

components/theme-menu-items.tsx

@@ -1,7 +1,5 @@
 'use client'
 
-import { useTheme } from 'next-themes'
-
 import {
   IconDeviceLaptop as Laptop,
   IconMoon as Moon,
@@ -10,6 +8,8 @@ import {
 
 import { DropdownMenuItem } from '@/components/ui/dropdown-menu'
 
+import { useTheme } from '@/components/theme-provider'
+
 export function ThemeMenuItems() {
   const { setTheme } = useTheme()