stroblme
267980f63e
Four tabs over three cards was navigation for its own sake, and the two shells disagreed about what a settings screen looks like. It is one grid of cards now, matching the portal: the account card carries changing a password and deleting the account in its footer, appearance is a card with one row, and remote access — an operator's concern, not a personal preference — is a card of its own for a superuser. SettingRow, alert-dialog and UserAvatar come across from the portal, so an account renders the same face in both shells.
64 lines
1.9 KiB
TypeScript
64 lines
1.9 KiB
TypeScript
import { createFileRoute } from "@tanstack/react-router"
|
|
import { motion } from "motion/react"
|
|
|
|
import Appearance from "@/components/UserSettings/Appearance"
|
|
import RemoteAccess from "@/components/UserSettings/RemoteAccess"
|
|
import UserInformation from "@/components/UserSettings/UserInformation"
|
|
import useAuth from "@/hooks/useAuth"
|
|
import { listStagger, slideUp } from "@/lib/motion"
|
|
|
|
export const Route = createFileRoute("/_layout/settings")({
|
|
component: UserSettings,
|
|
head: () => ({
|
|
meta: [
|
|
{
|
|
title: "Settings - Fluksio",
|
|
},
|
|
],
|
|
}),
|
|
})
|
|
|
|
function UserSettings() {
|
|
const { user: currentUser } = useAuth()
|
|
|
|
if (!currentUser) {
|
|
return null
|
|
}
|
|
|
|
return (
|
|
<div className="flex flex-col gap-6">
|
|
<div>
|
|
<h1 className="font-display text-3xl font-semibold">Settings</h1>
|
|
<p className="max-w-2xl text-sm text-muted-foreground">
|
|
Manage your account settings and preferences
|
|
</p>
|
|
</div>
|
|
|
|
{/* Panels rather than tabs, the way the portal does it: there are few
|
|
enough of these to read at once, and hiding four behind a tab bar was
|
|
navigation over three cards. Changing a password and deleting an
|
|
account belong to the account, so they live in that card's footer. */}
|
|
<motion.div
|
|
className="grid items-start gap-6 lg:grid-cols-2"
|
|
variants={listStagger}
|
|
initial="hidden"
|
|
animate="visible"
|
|
>
|
|
<motion.div variants={slideUp}>
|
|
<UserInformation />
|
|
</motion.div>
|
|
<motion.div variants={slideUp}>
|
|
<Appearance />
|
|
</motion.div>
|
|
{/* Whether this whole installation can be reached from outside is not
|
|
a personal preference, so it only exists for an operator. */}
|
|
{currentUser.is_superuser && (
|
|
<motion.div variants={slideUp}>
|
|
<RemoteAccess />
|
|
</motion.div>
|
|
)}
|
|
</motion.div>
|
|
</div>
|
|
)
|
|
}
|