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:
@@ -0,0 +1,50 @@
|
||||
"use client";
|
||||
/**
|
||||
* Google 登录按钮(GIS 渲染)
|
||||
*
|
||||
* 原始 Dart: lib/ui/auth/widgets/google_sign_in_web.dart
|
||||
*
|
||||
* 通过 `google.accounts.id.renderButton` 把 GIS 官方按钮渲染到指定 div。
|
||||
* 登录成功由 `setOnGoogleSignInSuccess` 设置的回调处理。
|
||||
*/
|
||||
import { useEffect, useRef } from "react";
|
||||
|
||||
import {
|
||||
renderGoogleButton,
|
||||
setOnGoogleSignInSuccess,
|
||||
type GoogleSignInSuccess,
|
||||
} from "@/integrations/google-identity";
|
||||
import styles from "./google-sign-in-button.module.css";
|
||||
|
||||
export interface GoogleSignInButtonProps {
|
||||
onSuccess: (success: GoogleSignInSuccess) => void;
|
||||
}
|
||||
|
||||
export function GoogleSignInButton({ onSuccess }: GoogleSignInButtonProps) {
|
||||
const ref = useRef<HTMLDivElement | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
setOnGoogleSignInSuccess(onSuccess);
|
||||
return () => setOnGoogleSignInSuccess(null);
|
||||
}, [onSuccess]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!ref.current) return;
|
||||
let cancelled = false;
|
||||
// GIS 异步加载,轮询直到可用
|
||||
const tryRender = () => {
|
||||
if (cancelled) return;
|
||||
if (window.google?.accounts?.id) {
|
||||
renderGoogleButton(ref.current!, { theme: "outline", size: "large" });
|
||||
} else {
|
||||
setTimeout(tryRender, 100);
|
||||
}
|
||||
};
|
||||
tryRender();
|
||||
return () => {
|
||||
cancelled = true;
|
||||
};
|
||||
}, []);
|
||||
|
||||
return <div ref={ref} className={styles.slot} />;
|
||||
}
|
||||
Reference in New Issue
Block a user