From 050292a2826ef77bce0553934738b99df55d5383 Mon Sep 17 00:00:00 2001
From: yiekheng <yiekheng@04080616.xyz>
Date: Sun, 10 May 2026 18:14:03 +0800
Subject: [PATCH] =?UTF-8?q?feat(web):=20bare=20login=20header=20=E2=80=94?=
 =?UTF-8?q?=20only=20centred=20brand=20mark?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 apps/web/src/app/login/page.tsx       |  9 +++----
 apps/web/src/components/app-shell.tsx | 36 +++++++++++++++++++++++++++
 2 files changed, 39 insertions(+), 6 deletions(-)

diff --git a/apps/web/src/app/login/page.tsx b/apps/web/src/app/login/page.tsx
index 2d29e57..bee1ad0 100644
--- a/apps/web/src/app/login/page.tsx
+++ b/apps/web/src/app/login/page.tsx
@@ -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>
diff --git a/apps/web/src/components/app-shell.tsx b/apps/web/src/components/app-shell.tsx
index 945b410..dcea32f 100644
--- a/apps/web/src/components/app-shell.tsx
+++ b/apps/web/src/components/app-shell.tsx
@@ -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 */}