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

frontend/src/components/Common/Appearance.tsx

@@ -1,6 +1,6 @@
 import { Monitor, Moon, Sun } from "lucide-react"
 
-import { type Theme, useTheme } from "@/components/theme-provider"
+import { useTheme } from "@/components/theme-provider"
 import { Button } from "@/components/ui/button"
 import {
   DropdownMenu,
@@ -8,63 +8,6 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu"
-import {
-  SidebarMenuButton,
-  SidebarMenuItem,
-  useSidebar,
-} from "@/components/ui/sidebar"
-
-type LucideIcon = React.FC<React.SVGProps<SVGSVGElement>>
-
-const ICON_MAP: Record<Theme, LucideIcon> = {
-  system: Monitor,
-  light: Sun,
-  dark: Moon,
-}
-
-export const SidebarAppearance = () => {
-  const { isMobile } = useSidebar()
-  const { setTheme, theme } = useTheme()
-  const Icon = ICON_MAP[theme]
-
-  return (
-    <SidebarMenuItem>
-      <DropdownMenu modal={false}>
-        <DropdownMenuTrigger asChild>
-          <SidebarMenuButton tooltip="Appearance" data-testid="theme-button">
-            <Icon className="size-4 text-muted-foreground" />
-            <span>Appearance</span>
-            <span className="sr-only">Toggle theme</span>
-          </SidebarMenuButton>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent
-          side={isMobile ? "top" : "right"}
-          align="end"
-          className="w-(--radix-dropdown-menu-trigger-width) min-w-56"
-        >
-          <DropdownMenuItem
-            data-testid="light-mode"
-            onClick={() => setTheme("light")}
-          >
-            <Sun className="mr-2 h-4 w-4" />
-            Light
-          </DropdownMenuItem>
-          <DropdownMenuItem
-            data-testid="dark-mode"
-            onClick={() => setTheme("dark")}
-          >
-            <Moon className="mr-2 h-4 w-4" />
-            Dark
-          </DropdownMenuItem>
-          <DropdownMenuItem onClick={() => setTheme("system")}>
-            <Monitor className="mr-2 h-4 w-4" />
-            System
-          </DropdownMenuItem>
-        </DropdownMenuContent>
-      </DropdownMenu>
-    </SidebarMenuItem>
-  )
-}
 
 export const Appearance = () => {
   const { setTheme } = useTheme()

frontend/src/components/Sidebar/AppSidebar.tsx

@@ -1,6 +1,5 @@
-import { Home, Users, Workflow } from "lucide-react"
+import { Home, LogOut, Settings, Users, Workflow } from "lucide-react"
 
-import { SidebarAppearance } from "@/components/Common/Appearance"
 import { Logo } from "@/components/Common/Logo"
 import {
   Sidebar,
@@ -11,7 +10,6 @@ import {
 } from "@/components/ui/sidebar"
 import useAuth from "@/hooks/useAuth"
 import { type Item, Main } from "./Main"
-import { User } from "./User"
 
 const baseItems: Item[] = [
   { icon: Home, title: "Dashboard", path: "/" },
@@ -19,15 +17,20 @@ const baseItems: Item[] = [
 ]
 
 export function AppSidebar() {
-  const { user: currentUser } = useAuth()
+  const { user: currentUser, logout } = useAuth()
 
   const items = currentUser?.is_superuser
     ? [...baseItems, { icon: Users, title: "Admin", path: "/admin" }]
     : baseItems
 
+  const footerItems: Item[] = [
+    { icon: Settings, title: "Settings", path: "/settings" },
+    { icon: LogOut, title: "Log Out", onClick: logout },
+  ]
+
   return (
-    // Floating frosted chrome over the bg-card content region; see the root
-    // DESIGN-GUIDELINES.md → Shells and → Overlay surfaces & content chips.
+    // Floating frosted chrome over whatever surface the shell paints; see the
+    // root DESIGN-GUIDELINES.md → Shells and → Overlay surfaces & content chips.
     <Sidebar
       collapsible="icon"
       variant="floating"
@@ -47,9 +50,9 @@ export function AppSidebar() {
       <SidebarContent>
         <Main items={items} />
       </SidebarContent>
-      <SidebarFooter>
-        <SidebarAppearance />
-        <User user={currentUser} />
+      {/* Main already pads horizontally; the footer only adds the bottom gap. */}
+      <SidebarFooter className="px-0">
+        <Main items={footerItems} />
       </SidebarFooter>
     </Sidebar>
   )

frontend/src/components/Sidebar/Main.tsx

@@ -10,10 +10,12 @@ import {
   useSidebar,
 } from "@/components/ui/sidebar"
 
+/** A nav entry is either a route (`path`) or an action (`onClick`), never both. */
 export type Item = {
   icon: LucideIcon
   title: string
-  path: string
+  path?: string
+  onClick?: () => void
 }
 
 interface MainProps {
@@ -36,22 +38,31 @@ export function Main({ items }: MainProps) {
       <SidebarGroupContent>
         <SidebarMenu>
           {items.map((item) => {
-            const isActive =
-              item.path === "/"
+            const path = item.path
+            const isActive = path
+              ? path === "/"
                 ? currentPath === "/"
-                : currentPath.startsWith(item.path)
+                : currentPath.startsWith(path)
+              : false
+            const label = (
+              <>
+                <item.icon />
+                <span>{item.title}</span>
+              </>
+            )
 
             return (
               <SidebarMenuItem key={item.title}>
                 <SidebarMenuButton
                   tooltip={item.title}
                   isActive={isActive}
-                  asChild
+                  asChild={!!path}
+                  onClick={() => {
+                    handleMenuClick()
+                    item.onClick?.()
+                  }}
                 >
-                  <RouterLink to={item.path} onClick={handleMenuClick}>
-                    <item.icon />
-                    <span>{item.title}</span>
-                  </RouterLink>
+                  {path ? <RouterLink to={path}>{label}</RouterLink> : label}
                 </SidebarMenuButton>
               </SidebarMenuItem>
             )

frontend/src/components/UserSettings/Appearance.tsx

@@ -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

frontend/src/routes/_canvas.tsx

@@ -8,6 +8,11 @@ import { isLoggedIn } from "@/hooks/useAuth"
  * The full-bleed shell. Same frosted sidebar as `_layout`, but the content
  * region is the whole viewport: the flow editor floats its own chrome over the
  * canvas instead of sitting inside a padded column.
+ *
+ * Nothing here paints a surface. The canvas is `--background`, so an opaque
+ * `bg-card` on the shell would sit *under* the floating sidebar and turn its
+ * `bg-card/80 backdrop-blur-md` into a plain `bg-card` slab with a card-coloured
+ * moat around it — the frost has to composite against the canvas to read right.
  */
 export const Route = createFileRoute("/_canvas")({
   component: CanvasLayout,
@@ -20,9 +25,9 @@ export const Route = createFileRoute("/_canvas")({
 
 function CanvasLayout() {
   return (
-    <SidebarProvider className="bg-card">
+    <SidebarProvider>
       <AppSidebar />
-      <SidebarInset className="bg-card">
+      <SidebarInset>
         <main className="relative h-svh overflow-hidden">
           <Outlet />
         </main>

frontend/src/routes/_layout/settings.tsx

@@ -1,5 +1,6 @@
 import { createFileRoute } from "@tanstack/react-router"
 
+import Appearance from "@/components/UserSettings/Appearance"
 import ChangePassword from "@/components/UserSettings/ChangePassword"
 import DeleteAccount from "@/components/UserSettings/DeleteAccount"
 import UserInformation from "@/components/UserSettings/UserInformation"
@@ -9,6 +10,7 @@ import useAuth from "@/hooks/useAuth"
 const tabsConfig = [
   { value: "my-profile", title: "My profile", component: UserInformation },
   { value: "password", title: "Password", component: ChangePassword },
+  { value: "appearance", title: "Appearance", component: Appearance },
   { value: "danger-zone", title: "Danger zone", component: DeleteAccount },
 ]
 
@@ -25,8 +27,9 @@ export const Route = createFileRoute("/_layout/settings")({
 
 function UserSettings() {
   const { user: currentUser } = useAuth()
+  // A superuser deleting its own account would lock everyone out.
   const finalTabs = currentUser?.is_superuser
-    ? tabsConfig.slice(0, 3)
+    ? tabsConfig.filter((tab) => tab.value !== "danger-zone")
     : tabsConfig
 
   if (!currentUser) {

frontend/src/utils.ts

@@ -20,12 +20,3 @@ export const handleError = function (
   const errorMessage = extractErrorMessage(err)
   this(errorMessage)
 }
-
-export const getInitials = (name: string): string => {
-  return name
-    .split(" ")
-    .slice(0, 2)
-    .map((word) => word[0])
-    .join("")
-    .toUpperCase()
-}