yiekheng/cm_whatsapp_bot_v1
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
apps/web/src/app/login/page.tsx
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";
export const metadata = {
@ -14,12 +14,9 @@ export default async function LoginPage({ searchParams }: PageProps) {
const next = sp.next ?? "/";
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">
<CardHeader>
<CardTitle>Sign in</CardTitle>
</CardHeader>
<CardContent>
<CardContent className="pt-6">
<LoginFormClient next={next} />
</CardContent>
</Card>

36
apps/web/src/components/app-shell.tsx
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
// ---------------------------------------------------------------------------
@ -188,6 +212,18 @@ interface 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 (
<>
{/* Desktop sidebar */}