Updated theme switcher component

AGENTS.md

@@ -0,0 +1 @@
+- Make sure to use bun when running scripts

opencode.json

@@ -0,0 +1,14 @@
+{
+  "mcp": {
+    "context7": {
+      "type": "local",
+      "command": [
+        "npx",
+        "-y",
+        "@upstash/context7-mcp"
+      ],
+      "enabled": true
+    }
+  },
+  "$schema": "https://opencode.ai/config.json"
+}

src/app/(admin)/admin/_components/sidebar.tsx

@@ -4,6 +4,7 @@ import { HomeIcon, KeyRoundIcon, LayoutDashboard, List, PanelLeft, Plus, User2 }
 import Link from "next/link"
 import { usePathname } from "next/navigation"
 
+import { ThemeSwitcher } from "@/components/ui/kibo-ui/theme-switcher"
 import {
     Sidebar,
     SidebarContent,

src/app/(public)/layout.tsx

@@ -1,4 +1,4 @@
-import { ThemeToggle } from "@/components/theme-toggle"
+import { ThemeSwitcher } from "@/components/ui/kibo-ui/theme-switcher"
 import { UserDropdown } from "@/components/user-dropdown"
 import Link from "next/link"
 import { ReactNode } from "react"
@@ -22,7 +22,7 @@ export default function PublicLayout({
                         </div>
 
                         <div className="flex gap-2 items-center">
-                            <ThemeToggle />
+                            <ThemeSwitcher />
                             <UserDropdown />
                         </div>
                     </div>

src/components/theme-toggle.tsx

@@ -1,61 +0,0 @@
-"use client"
-
-import { Button } from "@/components/ui/button"
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
-import { Monitor, Moon, Sun } from "lucide-react"
-import { useTheme } from "next-themes"
-import { useEffect, useState } from "react"
-
-export function ThemeToggle() {
-    const { theme, setTheme } = useTheme()
-    const [mounted, setMounted] = useState(false)
-
-    // Prevent hydration mismatch
-    useEffect(() => {
-        setMounted(true)
-    }, [])
-
-    if (!mounted) {
-        return (
-            <Button variant="outline" size="icon" disabled>
-                <Sun className="h-[1.2rem] w-[1.2rem]" />
-            </Button>
-        )
-    }
-
-    const getIcon = () => {
-        switch (theme) {
-            case "light":
-                return <Sun className="h-[1.2rem] w-[1.2rem]" />
-            case "dark":
-                return <Moon className="h-[1.2rem] w-[1.2rem]" />
-            default:
-                return <Monitor className="h-[1.2rem] w-[1.2rem]" />
-        }
-    }
-
-    return (
-        <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-                <Button variant="outline" size="icon">
-                    {getIcon()}
-                    <span className="sr-only">Toggle theme</span>
-                </Button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent align="end">
-                <DropdownMenuItem onClick={() => setTheme("light")}>
-                    <Sun className="mr-2 w-4 h-4" />
-                    <span>Light</span>
-                </DropdownMenuItem>
-                <DropdownMenuItem onClick={() => setTheme("dark")}>
-                    <Moon className="mr-2 w-4 h-4" />
-                    <span>Dark</span>
-                </DropdownMenuItem>
-                <DropdownMenuItem onClick={() => setTheme("system")}>
-                    <Monitor className="mr-2 w-4 h-4" />
-                    <span>System</span>
-                </DropdownMenuItem>
-            </DropdownMenuContent>
-        </DropdownMenu>
-    )
-}

src/components/ui/kibo-ui/theme-switcher/index.tsx

@@ -0,0 +1,88 @@
+"use client"
+
+import { cn } from "@/lib/utils"
+import { Monitor, Moon, Sun } from "lucide-react"
+import { motion } from "motion/react"
+import { useTheme } from "next-themes"
+import { useCallback, useEffect, useState } from "react"
+
+const themes = [
+    {
+        key: "system",
+        icon: Monitor,
+        label: "System theme"
+    },
+    {
+        key: "light",
+        icon: Sun,
+        label: "Light theme"
+    },
+    {
+        key: "dark",
+        icon: Moon,
+        label: "Dark theme"
+    }
+]
+
+export type ThemeSwitcherProps = {
+    className?: string
+    vertical?: boolean
+}
+
+export function ThemeSwitcher({ className, vertical = false }: ThemeSwitcherProps) {
+    const { theme, setTheme } = useTheme()
+    const [mounted, setMounted] = useState(false)
+
+    const handleThemeClick = useCallback(
+        (themeKey: "light" | "dark" | "system") => {
+            setTheme(themeKey)
+        },
+        [setTheme]
+    )
+
+    useEffect(() => {
+        setMounted(true)
+    }, [])
+
+    if (!mounted) {
+        return null
+    }
+
+    return (
+        <div
+            className={cn(
+                "relative isolate flex p-1 rounded-full bg-background ring-1 ring-border",
+                vertical ? "flex-col h-auto w-8" : "h-8",
+                className
+            )}
+        >
+            {themes.map(({ key, icon: Icon, label }) => {
+                const isActive = theme === key
+
+                return (
+                    <button
+                        aria-label={label}
+                        className="relative w-6 h-6 rounded-full"
+                        key={key}
+                        onClick={() => handleThemeClick(key as "light" | "dark" | "system")}
+                        type="button"
+                    >
+                        {isActive && (
+                            <motion.div
+                                className="absolute inset-0 rounded-full bg-secondary"
+                                layoutId={vertical ? "activeThemeVertical" : "activeTheme"}
+                                transition={{ type: "spring", duration: 0.5 }}
+                            />
+                        )}
+                        <Icon
+                            className={cn(
+                                "relative z-10 m-auto h-4 w-4",
+                                isActive ? "text-foreground" : "text-muted-foreground"
+                            )}
+                        />
+                    </button>
+                )
+            })}
+        </div>
+    )
+}