feat(ui): migrate Flutter UI library to Next.js 16 (App Router)

Migrate all 87 Dart files from /Users/chase/Documents/cozsweet/lib/ui/
to TypeScript React components, replacing Flutter-native features with
Web equivalents and reimplementing the BLoC pattern with React
Context + useReducer.

Highlights
- 1:1 BLoC -> Context+useReducer+side-effects mapping for auth, chat,
  user, and sidebar features (4 providers wired in root-providers.tsx)
- 500px MobileShell primitive eliminates per-screen layout boilerplate
- Headless Dialog primitive (createPortal + ESC + scroll lock) powers
  quota / pwa-install / username / pronouns / subscription / other-options
  dialogs
- New integrations/: facebook-sdk, google-identity, pwa-install,
  media-recorder (Web Speech API + MediaRecorder), browser-detect,
  chat-websocket (singleton), message-queue (throttled send)
- CSS Modules + existing design tokens (no new styling system);
  extended with breakpoints.css and dimensions.css
- Custom hooks: useBreakpoint (useSyncExternalStore),
  useFullVisibility (IntersectionObserver), usePwaInstall,
  usePullToRefresh
- Vitest + jsdom; 15 unit tests (chat-reducer, auth-validators)
- React 19.2.4, Next.js 16.2.7, Zod 4, lottie-react, classnames

Workarounds
- next.config.ts: experimental.staticGenerationRetryCount = 0 to
  bypass Next.js 16.2.7 /_global-error workStore prerender bug
- src/app/global-error.tsx: required Client Component
- src/types/globals.d.ts: centralized window.google / FB /
  SpeechRecognition declarations

Routes (/, /splash, /auth, /chat, /chat/deviceid/[deviceId],
/sidebar) all build and lint clean.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

src/app/auth/page.tsx

@@ -1,84 +1,7 @@
 "use client";
 
-/**
- * Auth 页（路由骨架版）
- *
- * 对齐 Flutter `lib/ui/auth/auth_screen.dart` 的语义：
- *   - 已登录用户：自动跳 `/chat`
- *   - 未登录：渲染返回 splash + disabled 登录表单占位
- */
-
-import { useEffect } from "react";
-import Link from "next/link";
-import { useRouter } from "next/navigation";
-
-import { useAuthGate } from "@/lib/auth/use-auth-gate";
-import { ROUTES } from "@/lib/routes";
+import { AuthScreen } from "@/components/auth/auth-screen";
 
 export default function AuthPage() {
-  const router = useRouter();
-  const { isAuthed } = useAuthGate();
-
-  useEffect(() => {
-    if (isAuthed) {
-      router.replace(ROUTES.chat);
-    }
-  }, [isAuthed, router]);
-
-  if (!isAuthed) {
-    return (
-      <main
-        className="flex flex-1 flex-col items-center justify-center gap-xl p-lg"
-        style={{
-          minHeight: "100dvh",
-          background: "var(--color-page-background)",
-          color: "var(--color-text-foreground)",
-        }}
-      >
-        <h1 className="text-3xl font-semibold">Auth</h1>
-        <p
-          className="max-w-md text-center text-sm"
-          style={{ color: "var(--color-text-secondary)" }}
-        >
-          Auth placeholder · login form coming soon.
-        </p>
-
-        <div className="flex flex-col gap-md">
-          <button
-            type="button"
-            disabled
-            className="rounded-md px-xl py-sm text-sm opacity-60"
-            style={{
-              background: "var(--color-accent)",
-              color: "var(--color-text-primary)",
-              cursor: "not-allowed",
-            }}
-          >
-            Login form coming soon
-            {/* TODO: 接入 emailLogin / googleLogin / appleLogin / facebookLogin 后启用 */}
-          </button>
-          <Link
-            href={ROUTES.splash}
-            className="rounded-md border px-xl py-sm text-center text-sm"
-            style={{ borderColor: "var(--color-border)" }}
-          >
-            Back to Splash
-          </Link>
-        </div>
-      </main>
-    );
-  }
-
-  return (
-    <div
-      className="flex flex-1 items-center justify-center"
-      style={{ minHeight: "100dvh" }}
-    >
-      <div
-        aria-label="Redirecting"
-        className="size-10 animate-spin rounded-full border-4 border-t-transparent"
-        style={{ borderColor: "var(--color-accent)" }}
-      />
-    </div>
-  );
+  return <AuthScreen />;
 }

src/app/chat/page.tsx

@@ -1,53 +1,7 @@
 "use client";
 
-/**
- * Chat 页（路由骨架版）
- *
- * **不**做鉴权重定向：Flutter 端允许游客态直接进聊天（`auth_refresh_interceptor`
- * 会同时处理登录与游客 token）。这里只放占位 UI。
- */
-
-import Link from "next/link";
-
-import { ROUTES } from "@/lib/routes";
+import { ChatScreen } from "@/components/chat/chat-screen";
 
 export default function ChatPage() {
-  return (
-    <main
-      className="flex flex-1 flex-col items-center justify-center gap-xl p-lg"
-      style={{
-        minHeight: "100dvh",
-        background: "var(--color-page-background)",
-        color: "var(--color-text-foreground)",
-      }}
-    >
-      <h1 className="text-3xl font-semibold">Chat</h1>
-      <p
-        className="max-w-md text-center text-sm"
-        style={{ color: "var(--color-text-secondary)" }}
-      >
-        Chat placeholder · guest mode supported · real chat UI coming soon.
-      </p>
-
-      <div className="flex flex-col gap-md">
-        <Link
-          href={ROUTES.sidebar}
-          className="rounded-md border px-xl py-sm text-center text-sm"
-          style={{ borderColor: "var(--color-border)" }}
-        >
-          Open Sidebar
-        </Link>
-        <Link
-          href={ROUTES.auth}
-          className="rounded-md px-xl py-sm text-center text-sm"
-          style={{
-            background: "var(--color-accent)",
-            color: "var(--color-text-primary)",
-          }}
-        >
-          Log in
-        </Link>
-      </div>
-    </main>
-  );
+  return <ChatScreen />;
 }

src/app/global-error.tsx

@@ -0,0 +1,58 @@
+"use client";
+
+/**
+ * 全局 Error Boundary
+ *
+ * Next.js 16 文档要求 global-error 必须是 Client Component。
+ * 16.2.7 存在 prerender `/_global-error` 的内部 bug（workStore 未初始化），
+ * 本文件通过不挂任何 Client Context 副作用、纯静态 HTML 输出来规避。
+ *
+ * 当根 layout 自身抛出错误时渲染；必须包含 `<html>` + `<body>`，
+ * 因为它会替换根 layout。
+ */
+
+interface GlobalErrorProps {
+  error: Error & { digest?: string };
+  unstable_retry?: () => void;
+}
+
+export default function GlobalError({ error }: GlobalErrorProps) {
+  return (
+    <html lang="en">
+      <body
+        style={{
+          fontFamily: "system-ui, sans-serif",
+          padding: "2rem",
+          background: "#111",
+          color: "#fff",
+          minHeight: "100vh",
+        }}
+      >
+        <h1 style={{ fontSize: "1.5rem", marginBottom: "1rem" }}>
+          Something went wrong
+        </h1>
+        <p style={{ marginBottom: "1rem", opacity: 0.8 }}>
+          {error.message || "An unexpected error occurred."}
+        </p>
+        <button
+          type="button"
+          onClick={() => {
+            window.location.href = "/";
+          }}
+          style={{
+            display: "inline-block",
+            padding: "0.5rem 1rem",
+            background: "#4f46e5",
+            color: "#fff",
+            borderRadius: "0.5rem",
+            border: 0,
+            cursor: "pointer",
+            fontSize: "1rem",
+          }}
+        >
+          Back to start
+        </button>
+      </body>
+    </html>
+  );
+}

src/app/globals.css

@@ -5,6 +5,8 @@
 @import "../design/radius.css";
 @import "../design/border-widths.css";
 @import "../design/icon-sizes.css";
+@import "../design/breakpoints.css";
+@import "../design/dimensions.css";
 
 /* ============================================================
  * Tailwind 4 @theme - 将 CSS 变量注册为 utility 类
@@ -59,6 +61,19 @@
   );
   --color-page-background: var(--color-page-background);
 
+  /* 扩展色 */
+  --color-sidebar-background: var(--color-sidebar-background);
+  --color-dark-background: var(--color-dark-background);
+  --color-dark-gray: var(--color-dark-gray);
+  --color-bubble-background: var(--color-bubble-background);
+  --color-chat-input-border: var(--color-chat-input-border);
+  --color-input-placeholder: var(--color-input-placeholder);
+  --color-pwa-button-text: var(--color-pwa-button-text);
+  --color-facebook-blue: var(--color-facebook-blue);
+  --color-dialog-background: var(--color-dialog-background);
+  --color-dialog-border: var(--color-dialog-border);
+  --color-blur-background: var(--color-blur-background);
+
   /* ==================== 间距 ==================== */
   --spacing-xs: var(--spacing-xs);
   --spacing-sm: var(--spacing-sm);
@@ -78,7 +93,7 @@
 
   /* ==================== 字体 ==================== */
   --font-sans: var(--font-system);
-  --font-athelas: var(--font-athelas);
+  --font-athelas: var(--color-athelas, var(--font-athelas));
 
   /* ==================== 边框宽度 ==================== */
   --border-thin: var(--border-thin);

src/app/layout.tsx

@@ -1,5 +1,6 @@
 import type { Metadata } from "next";
 import { Geist, Geist_Mono } from "next/font/google";
+import Script from "next/script";
 import "./globals.css";
 
 import { RootProviders } from "@/providers/root-providers";
@@ -33,6 +34,16 @@ export default function RootLayout({
       className={`${geistSans.variable} ${geistMono.variable} h-full antialiased`}
     >
       <body className="min-h-full flex flex-col">
+        {/* Facebook SDK JS（auth + splash 入口会用到 FB.login） */}
+        <Script
+          src="https://connect.facebook.net/en_US/sdk.js"
+          strategy="afterInteractive"
+        />
+        {/* Google Identity Services（auth 入口会用到 google.accounts.id） */}
+        <Script
+          src="https://accounts.google.com/gsi/client"
+          strategy="afterInteractive"
+        />
         <RootProviders>{children}</RootProviders>
       </body>
     </html>

src/app/sidebar/page.tsx

@@ -1,46 +1,7 @@
 "use client";
 
-/**
- * Sidebar 页（路由骨架版）
- *
- * 对齐 Flutter `lib/ui/sidebar/sidebar_screen.dart` 的 `onBackPressed` 行为：
- * 顶部一个"返回 /chat"按钮。
- */
-
-import { useRouter } from "next/navigation";
-
-import { ROUTES } from "@/lib/routes";
+import { SidebarScreen } from "@/components/sidebar/sidebar-screen";
 
 export default function SidebarPage() {
-  const router = useRouter();
-
-  return (
-    <main
-      className="flex flex-1 flex-col items-center justify-center gap-xl p-lg"
-      style={{
-        minHeight: "100dvh",
-        background: "var(--color-sidebar-background)",
-        color: "var(--color-text-primary)",
-      }}
-    >
-      <h1 className="text-3xl font-semibold">Sidebar</h1>
-      <p
-        className="max-w-md text-center text-sm"
-        style={{ color: "var(--color-text-secondary)" }}
-      >
-        Sidebar placeholder · profile / settings coming soon.
-      </p>
-      <button
-        type="button"
-        onClick={() => router.push(ROUTES.chat)}
-        className="rounded-md px-xl py-sm text-sm"
-        style={{
-          background: "var(--color-accent)",
-          color: "var(--color-text-primary)",
-        }}
-      >
-        Back to Chat
-      </button>
-    </main>
-  );
+  return <SidebarScreen />;
 }

src/app/splash/page.tsx

@@ -1,94 +1,7 @@
 "use client";
 
-/**
- * Splash 页（路由骨架版）
- *
- * 对齐 Flutter `lib/ui/splash/splash_screen.dart` 的语义：
- *   - 已登录用户：自动跳 `/chat`（替代 Flutter 的 `BlocListener<AuthBloc>`）
- *   - 未登录：渲染品牌占位 + Skip 按钮 + Facebook 登录占位
- *
- * 占位 UI 不复刻 Flutter 视觉（待 `src/components/` 落地后再做），仅做路由行为验证。
- */
-
-import { useEffect } from "react";
-import { useRouter } from "next/navigation";
-
-import { useAuthGate } from "@/lib/auth/use-auth-gate";
-import { ROUTES } from "@/lib/routes";
+import { SplashScreen } from "@/components/splash/splash-screen";
 
 export default function SplashPage() {
-  const router = useRouter();
-  const { isAuthed } = useAuthGate();
-
-  // 已登录 → 自动跳 /chat。
-  useEffect(() => {
-    if (isAuthed) {
-      router.replace(ROUTES.chat);
-    }
-  }, [isAuthed, router]);
-
-  // `useAuthGate` 在 SSR / 客户端水合首帧都返回 `isAuthed=false`，
-  // 因此这里会先渲染 spinner 占位（也避免水合闪屏），等水合完成、
-  // React 自动重读 localStorage 拿到真值后，若仍为 false 则展示下方 UI。
-  if (!isAuthed) {
-    return (
-      <main
-        className="flex flex-1 flex-col items-center justify-center gap-xl p-lg"
-        style={{
-          minHeight: "100dvh",
-          background: "var(--color-sidebar-background)",
-          color: "var(--color-text-primary)",
-        }}
-      >
-        <h1 className="text-3xl font-semibold">cozsweet</h1>
-        <p
-          className="max-w-md text-center text-sm"
-          style={{ color: "var(--color-text-secondary)" }}
-        >
-          Splash placeholder · authed → {String(isAuthed)}
-        </p>
-
-        <div className="flex flex-col gap-md">
-          <button
-            type="button"
-            onClick={() => router.push(ROUTES.chat)}
-            className="rounded-md px-xl py-sm text-sm"
-            style={{
-              background: "var(--color-accent)",
-              color: "var(--color-text-primary)",
-            }}
-          >
-            Skip
-          </button>
-          <button
-            type="button"
-            disabled
-            className="rounded-md px-xl py-sm text-sm opacity-60"
-            style={{
-              background: "var(--color-facebook-blue)",
-              color: "var(--color-text-primary)",
-              cursor: "not-allowed",
-            }}
-          >
-            Continue with Facebook
-            {/* TODO: 接入 facebookLogin 后启用 */}
-          </button>
-        </div>
-      </main>
-    );
-  }
-
-  // 已登录：上面的 useEffect 会触发 router.replace；这里短暂渲染占位。
-  return (
-    <div
-      className="flex flex-1 items-center justify-center"
-      style={{ minHeight: "100dvh" }}
-    >
-      <div
-        aria-label="Redirecting"
-        className="size-10 animate-spin rounded-full border-4 border-t-transparent"
-        style={{ borderColor: "var(--color-accent)" }}
-      />
-    </div>
-  );
+  return <SplashScreen />;
 }