"use client"; import { useState, useSyncExternalStore, useTransition } from "react"; import { useRouter } from "next/navigation"; import { useTheme } from "next-themes"; import { Moon, Sun, LogOut, Printer, ChevronDown, Check } from "lucide-react"; import { toast } from "sonner"; import { logout } from "@/server/actions/auth"; import { PALETTES, PALETTE_FA, type Palette } from "@/lib/palettes"; import { cx } from "@/lib/format"; const PALETTE_HEX: Record = { blue: "#2563eb", green: "#059669", purple: "#7c3aed", orange: "#ea580c", teal: "#0d9488", rose: "#e11d48", }; function setCookie(name: string, value: string) { document.cookie = `${name}=${value}; path=/; max-age=${60 * 60 * 24 * 365}; samesite=lax`; } export function ThemeToggle() { const { theme, setTheme, resolvedTheme } = useTheme(); // Hydration-safe mounted flag without setState-in-effect. const mounted = useSyncExternalStore( () => () => {}, () => true, () => false, ); const dark = (theme === "system" ? resolvedTheme : theme) === "dark"; return ( ); } export function PaletteSwitcher({ current }: { current: Palette }) { const router = useRouter(); const [open, setOpen] = useState(false); const [pending, start] = useTransition(); const choose = (p: Palette) => { // Persist; the server layout re-renders on refresh. setCookie("palette", p); setOpen(false); start(() => router.refresh()); }; return (
{open ? ( <>
setOpen(false)} />
{PALETTES.map((p) => ( ))}
) : null}
); } export function DigitsToggle({ fa }: { fa: boolean }) { const router = useRouter(); const [pending, start] = useTransition(); return ( ); } export function LogoutButton() { const router = useRouter(); const [pending, start] = useTransition(); return ( ); } export function PrintButton() { return ( ); }