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:
+2
-48
@@ -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 />;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user