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>
This commit is contained in:
2026-06-09 13:30:54 +08:00
parent b362945195
commit 8cab34864e
114 changed files with 6744 additions and 276 deletions
+2 -41
View File
@@ -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 />;
}