feat(web): bare login header — only centred brand mark

The login page lived inside the authenticated AppShell, so the desktop
sidebar (with all nav items) and the mobile menu drawer were rendering
on the sign-in screen. AppShell now branches on pathname=/login and
renders a single centred header (cm + WhatsApp Bot) with no nav, plus
the form. Drops the redundant in-card title since the header carries
the brand.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
yiekheng 2026-05-10 18:14:03 +08:00
parent 1b7f553e24
commit 050292a282
2 changed files with 39 additions and 6 deletions

View File

@ -1,4 +1,4 @@
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; import { Card, CardContent } from "@/components/ui/card";
import { LoginFormClient } from "./login-form-client"; import { LoginFormClient } from "./login-form-client";
export const metadata = { export const metadata = {
@ -14,12 +14,9 @@ export default async function LoginPage({ searchParams }: PageProps) {
const next = sp.next ?? "/"; const next = sp.next ?? "/";
return ( return (
<div className="min-h-dvh flex items-center justify-center px-4 py-8"> <div className="flex items-center justify-center px-4 py-8 min-h-[calc(100dvh-3.5rem)]">
<Card className="w-full max-w-sm"> <Card className="w-full max-w-sm">
<CardHeader> <CardContent className="pt-6">
<CardTitle>Sign in</CardTitle>
</CardHeader>
<CardContent>
<LoginFormClient next={next} /> <LoginFormClient next={next} />
</CardContent> </CardContent>
</Card> </Card>

View File

@ -180,6 +180,30 @@ function Sidebar() {
); );
} }
// ---------------------------------------------------------------------------
// Bare header for unauthenticated routes (/login). No sidebar, no mobile
// menu, no nav — just the centered brand mark + name. The user explicitly
// asked for nothing else here so the sign-in screen feels like a separate
// surface from the authenticated app.
// ---------------------------------------------------------------------------
function BareHeader() {
return (
<header className="fixed top-0 left-0 right-0 z-40 flex h-14 items-center justify-center border-b border-border bg-background/95 backdrop-blur-sm px-3">
<div className="flex items-center gap-2">
<span
aria-hidden
className="flex size-6 items-center justify-center rounded-md bg-primary text-[10px] font-bold uppercase text-primary-foreground"
>
cm
</span>
<span className="text-sm font-semibold tracking-tight">
WhatsApp Bot
</span>
</div>
</header>
);
}
// --------------------------------------------------------------------------- // ---------------------------------------------------------------------------
// AppShell — the outer container // AppShell — the outer container
// --------------------------------------------------------------------------- // ---------------------------------------------------------------------------
@ -188,6 +212,18 @@ interface AppShellProps {
} }
export function AppShell({ children }: AppShellProps) { export function AppShell({ children }: AppShellProps) {
const pathname = usePathname();
const isAuthRoute = pathname === "/login";
if (isAuthRoute) {
return (
<>
<BareHeader />
<main className="min-h-dvh pt-14">{children}</main>
</>
);
}
return ( return (
<> <>
{/* Desktop sidebar */} {/* Desktop sidebar */}