Melvin StroblandClaude Opus 5
6b73ca3645
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
65 lines
1.9 KiB
TypeScript
65 lines
1.9 KiB
TypeScript
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"
|
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
|
|
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 },
|
|
]
|
|
|
|
export const Route = createFileRoute("/_layout/settings")({
|
|
component: UserSettings,
|
|
head: () => ({
|
|
meta: [
|
|
{
|
|
title: "Settings - Fluksio",
|
|
},
|
|
],
|
|
}),
|
|
})
|
|
|
|
function UserSettings() {
|
|
const { user: currentUser } = useAuth()
|
|
// A superuser deleting its own account would lock everyone out.
|
|
const finalTabs = currentUser?.is_superuser
|
|
? tabsConfig.filter((tab) => tab.value !== "danger-zone")
|
|
: tabsConfig
|
|
|
|
if (!currentUser) {
|
|
return null
|
|
}
|
|
|
|
return (
|
|
<div className="flex flex-col gap-6">
|
|
<div>
|
|
<h1 className="text-2xl font-bold tracking-tight">User Settings</h1>
|
|
<p className="text-muted-foreground">
|
|
Manage your account settings and preferences
|
|
</p>
|
|
</div>
|
|
|
|
<Tabs defaultValue="my-profile">
|
|
<TabsList>
|
|
{finalTabs.map((tab) => (
|
|
<TabsTrigger key={tab.value} value={tab.value}>
|
|
{tab.title}
|
|
</TabsTrigger>
|
|
))}
|
|
</TabsList>
|
|
{finalTabs.map((tab) => (
|
|
<TabsContent key={tab.value} value={tab.value}>
|
|
<tab.component />
|
|
</TabsContent>
|
|
))}
|
|
</Tabs>
|
|
</div>
|
|
)
|
|
}
|