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/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) {