twotalesanimation
40b99f3add
Deploy / deploy (push) Successful in 3m19s
At phone width the sidebar stayed 240px wide, leaving pages a ~135px strip. Below md it is now hidden behind a menu button in the header and opens as a drawer (closes on navigation, backdrop, X or Escape); from md up the sidebar is unchanged. Page wrappers use p-4 on phones and keep p-6/p-8 from md. Shot detail: on phones the thumbnail takes the full width with the details below it instead of pushing them off screen, the action buttons wrap, and the tab bar scrolls sideways. Desktop sizing is kept as it was. Every change is behind a md: breakpoint, so the desktop layout is the same. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
74 lines
2.6 KiB
TypeScript
74 lines
2.6 KiB
TypeScript
import { auth } from "@/auth";
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
|
|
import { getInitials } from "@/lib/utils";
|
|
import { ChangePasswordForm } from "@/components/settings/ChangePasswordForm";
|
|
import { HetznerConfigForm } from "@/components/settings/HetznerConfigForm";
|
|
import { SketchTemplatesSection } from "@/components/settings/SketchTemplatesSection";
|
|
import { HideArchivedToggle } from "@/components/settings/HideArchivedToggle";
|
|
import { getHetznerConfig } from "@/actions/settings";
|
|
|
|
export const metadata = { title: "Settings" };
|
|
|
|
export default async function SettingsPage() {
|
|
const session = await auth();
|
|
if (!session?.user) return null;
|
|
|
|
const isAdmin = session.user.role === "ADMIN";
|
|
const canManageTemplates = ["ADMIN", "PRODUCER", "SUPERVISOR"].includes(session.user.role ?? "");
|
|
const hetznerConfig = isAdmin ? await getHetznerConfig() : null;
|
|
|
|
return (
|
|
<div className="p-4 md:p-6 space-y-6 max-w-2xl mx-auto">
|
|
<h1 className="text-2xl font-bold">Account Settings</h1>
|
|
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle className="text-base">Your Profile</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="flex items-center gap-4">
|
|
<Avatar className="h-14 w-14">
|
|
{session.user.image && <AvatarImage src={session.user.image} />}
|
|
<AvatarFallback className="text-lg">
|
|
{getInitials(session.user.name)}
|
|
</AvatarFallback>
|
|
</Avatar>
|
|
<div>
|
|
<p className="font-semibold">{session.user.name ?? "—"}</p>
|
|
<p className="text-sm text-muted-foreground">{session.user.email}</p>
|
|
<p className="text-xs text-muted-foreground mt-0.5 capitalize">
|
|
{session.user.role?.toLowerCase()}
|
|
</p>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle className="text-base">Display Preferences</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<HideArchivedToggle />
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<ChangePasswordForm mustChangePassword={session.user.mustChangePassword ?? false} />
|
|
|
|
{isAdmin && hetznerConfig && (
|
|
<div className="space-y-2">
|
|
<h2 className="text-lg font-semibold">Admin — Storage Configuration</h2>
|
|
<HetznerConfigForm initialConfig={hetznerConfig} />
|
|
</div>
|
|
)}
|
|
|
|
{canManageTemplates && (
|
|
<Card>
|
|
<CardContent className="pt-6">
|
|
<SketchTemplatesSection />
|
|
</CardContent>
|
|
</Card>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|