feat: improved command drawer with desktop modal layout and fixed hydration error- Added slide-up drawer for command bar with terminal styling- Desktop: centered modal with inline action buttons in terminal header- Mobile: bottom sheet with tall stacked action buttons- Added escape key to close, ARIA labels for accessibility- Smooth open/close animations with fadeIn/fadeOut- Fixed ThemeToggle hydration mismatch with mounted state check- Improved scrollbar visibility in command bar

src/components/ui/theme-toggle.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { useState } from "react"
+import { useState, useEffect } from "react"
 import { Moon, Sun } from "lucide-react"
 import { cn } from "@/lib/utils"
 import { useTheme } from "@/hooks/use-theme"
@@ -12,12 +12,27 @@ interface ThemeToggleProps {
 
 export function ThemeToggle({ className }: ThemeToggleProps) {
     const { theme, toggle } = useTheme()
+    const [mounted, setMounted] = useState(false)
+
+    // Prevent hydration mismatch by only rendering after mount
+    useEffect(() => {
+        setMounted(true)
+    }, [])
+
     const isDark = theme === "dark"
 
-    // next-themes
-    // const { resolvedTheme, setTheme } = useTheme()
-    // const isDark = resolvedTheme === "dark"
-    // onClick={() => setTheme(isDark ? "light" : "dark")}
+    // Render placeholder with same dimensions during SSR
+    if (!mounted) {
+        return (
+            <div
+                className={cn(
+                    "flex w-20 h-10 p-1 rounded-full",
+                    "bg-[var(--bg-secondary)] border border-[var(--border-primary)]",
+                    className
+                )}
+            />
+        )
+    }
 
     return (
         <div