Put settings in the sidebar and let the sidebar frost composite

The footer was a user card with the theme picker and log out buried in its dropdown. It is now two plain entries, Settings and Log Out, and the theme moved into the settings page as its own tab. The dark sidebar never matched the canvas because _canvas.tsx painted bg-card across the whole viewport underneath it, so the floating panel's bg-card/80 resolved to card over card and its gutter was card too. Nothing there should paint a surface; the panel now reads the same as the other frosted chrome. The superuser guard sliced the first three tabs, which silently changed meaning when a fourth arrived. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01KkmeRiyeYmVZqJVwuyHq9o
2026-08-15 21:19:41 +02:00
parent ca7a16c8bc
commit 6b73ca3645
7 changed files with 94 additions and 88 deletions
@@ -0,0 +1,50 @@
+import { type LucideIcon, Monitor, Moon, Sun } from "lucide-react"
+
+import { type Theme, useTheme } from "@/components/theme-provider"
+import { cn } from "@/lib/utils"
+
+const options: { value: Theme; title: string; icon: LucideIcon }[] = [
+  { value: "light", title: "Light", icon: Sun },
+  { value: "dark", title: "Dark", icon: Moon },
+  { value: "system", title: "System", icon: Monitor },
+]
+
+const Appearance = () => {
+  const { theme, setTheme } = useTheme()
+
+  return (
+    <div className="max-w-md">
+      <h3 className="text-lg font-semibold py-4">Appearance</h3>
+      <p className="text-sm text-muted-foreground pb-4">
+        Choose how Fluksio looks to you. System follows your device setting.
+      </p>
+      {/* The one segmented shape: a single border pill, transparent segments,
+          bg-accent on the selected one (root DESIGN-GUIDELINES.md). */}
+      <div
+        data-testid="theme-button"
+        className="flex w-fit items-center gap-1 rounded-full border border-border p-1"
+      >
+        {options.map((option) => (
+          <button
+            key={option.value}
+            type="button"
+            aria-pressed={theme === option.value}
+            data-testid={`${option.value}-mode`}
+            onClick={() => setTheme(option.value)}
+            className={cn(
+              "flex items-center gap-2 rounded-full px-3 py-1.5 text-sm transition-colors",
+              theme === option.value
+                ? "bg-accent text-accent-foreground"
+                : "text-muted-foreground hover:bg-accent/50",
+            )}
+          >
+            <option.icon className="size-4" />
+            {option.title}
+          </button>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+export default Appearance