Sanitized mirror from private repository - 2026-04-19 08:15:48 UTC

2026-04-19 08:15:48 +00:00
commit 57b1fe47f2
1437 changed files with 363051 additions and 0 deletions
--- a/dashboard/ui/components/theme-switcher.tsx
+++ b/dashboard/ui/components/theme-switcher.tsx
@@ -0,0 +1,108 @@
+"use client";
+
+import { useState, useRef, useEffect } from "react";
+import { useTheme } from "@/components/theme-provider";
+import { themes } from "@/lib/themes";
+
+export function ThemeSwitcher() {
+  const { theme, setTheme } = useTheme();
+  const [open, setOpen] = useState(false);
+  const ref = useRef<HTMLDivElement>(null);
+
+  // Close dropdown on outside click
+  useEffect(() => {
+    function handleClick(e: MouseEvent) {
+      if (ref.current && !ref.current.contains(e.target as Node)) {
+        setOpen(false);
+      }
+    }
+    if (open) {
+      document.addEventListener("mousedown", handleClick);
+      return () => document.removeEventListener("mousedown", handleClick);
+    }
+  }, [open]);
+
+  // Close on Escape
+  useEffect(() => {
+    function handleKey(e: KeyboardEvent) {
+      if (e.key === "Escape") setOpen(false);
+    }
+    if (open) {
+      document.addEventListener("keydown", handleKey);
+      return () => document.removeEventListener("keydown", handleKey);
+    }
+  }, [open]);
+
+  return (
+    <div ref={ref} className="relative">
+      <button
+        onClick={() => setOpen(!open)}
+        className="flex items-center gap-2 px-2.5 py-1.5 text-xs rounded-lg transition-all duration-200 hover:bg-[var(--nav-hover)]"
+        aria-label="Switch theme"
+      >
+        <span
+          className="w-3 h-3 rounded-full shrink-0 border border-white/10"
+          style={{
+            background: `linear-gradient(135deg, ${theme.swatch[0]}, ${theme.swatch[1]})`,
+          }}
+        />
+        <span className="text-muted-foreground hidden sm:inline">{theme.label}</span>
+      </button>
+
+      {open && (
+        <div
+          className="absolute right-0 top-full mt-2 w-52 rounded-xl p-1.5 z-[100] shadow-2xl max-h-[70vh] overflow-y-auto"
+          style={{
+            background: theme.isDark ? "rgba(10, 10, 25, 0.95)" : "rgba(255, 255, 255, 0.97)",
+            border: "1px solid rgba(255, 255, 255, 0.15)",
+            backdropFilter: "blur(30px) saturate(180%)",
+            WebkitBackdropFilter: "blur(30px) saturate(180%)",
+          }}
+        >
+          <div className="px-2.5 py-1.5 text-[10px] uppercase tracking-wider" style={{ color: theme.isDark ? "#64748b" : "#94a3b8" }}>
+            Themes
+          </div>
+          {themes.map((t) => (
+            <button
+              key={t.name}
+              onClick={() => {
+                setTheme(t.name);
+                setOpen(false);
+              }}
+              className="w-full flex items-center gap-3 px-3 py-2 rounded-lg text-xs transition-all duration-150"
+              style={{
+                background: theme.name === t.name
+                  ? (theme.isDark ? "rgba(255,255,255,0.1)" : "rgba(0,0,0,0.06)")
+                  : "transparent",
+                color: theme.name === t.name
+                  ? (theme.isDark ? "#f1f5f9" : "#1e293b")
+                  : (theme.isDark ? "#94a3b8" : "#64748b"),
+              }}
+              onMouseEnter={(e) => {
+                if (theme.name !== t.name)
+                  e.currentTarget.style.background = theme.isDark ? "rgba(255,255,255,0.06)" : "rgba(0,0,0,0.03)";
+              }}
+              onMouseLeave={(e) => {
+                if (theme.name !== t.name)
+                  e.currentTarget.style.background = "transparent";
+              }}
+            >
+              <span
+                className="w-4 h-4 rounded-full shrink-0"
+                style={{
+                  background: `linear-gradient(135deg, ${t.swatch[0]}, ${t.swatch[1]})`,
+                  boxShadow: `0 0 8px ${t.swatch[0]}40`,
+                  border: "1px solid rgba(255,255,255,0.15)",
+                }}
+              />
+              <span className="flex-1 text-left font-medium">{t.label}</span>
+              {theme.name === t.name && (
+                <span style={{ color: t.swatch[0], fontSize: "14px" }}>●</span>
+              )}
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}