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,45 @@
|
||||
"use client";
|
||||
/**
|
||||
* 响应式断点 hook
|
||||
*
|
||||
* 原始 Dart: lib/ui/core/responsive.dart 的 `Responsive` widget + `isDesktop/isTablet/isMobile` 静态方法。
|
||||
*
|
||||
* 实现要点（与 `src/lib/auth/use-auth-gate.tsx` 同款 `useSyncExternalStore` 模式）：
|
||||
* - `subscribe` 监听 3 个 media query 的 change 事件，调用方重读 snapshot。
|
||||
* - `getServerSnapshot` 返回 `"mobile"`（最保守的默认）以避免 SSR/水合首帧不一致。
|
||||
* - `getSnapshot` 在客户端按 desktop → tablet → mobile 优先级匹配。
|
||||
*
|
||||
* 用法：
|
||||
* const size = useBreakpoint();
|
||||
* if (size === "mobile") return <MobileLayout />;
|
||||
*/
|
||||
import { useSyncExternalStore } from "react";
|
||||
|
||||
import type { DeviceSize } from "@/lib/breakpoints";
|
||||
|
||||
const QUERIES = {
|
||||
mobile: "(max-width: 599.98px)",
|
||||
tablet: "(min-width: 600px) and (max-width: 1023.98px)",
|
||||
desktop: "(min-width: 1024px)",
|
||||
} as const satisfies Record<DeviceSize, string>;
|
||||
|
||||
const subscribe = (cb: () => void): (() => void) => {
|
||||
if (typeof window === "undefined") return () => {};
|
||||
const mqls = Object.values(QUERIES).map((q) => window.matchMedia(q));
|
||||
const handler = () => cb();
|
||||
mqls.forEach((mql) => mql.addEventListener("change", handler));
|
||||
return () => mqls.forEach((mql) => mql.removeEventListener("change", handler));
|
||||
};
|
||||
|
||||
const getSnapshot = (): DeviceSize => {
|
||||
if (typeof window === "undefined") return "mobile";
|
||||
if (window.matchMedia(QUERIES.desktop).matches) return "desktop";
|
||||
if (window.matchMedia(QUERIES.tablet).matches) return "tablet";
|
||||
return "mobile";
|
||||
};
|
||||
|
||||
const getServerSnapshot = (): DeviceSize => "mobile";
|
||||
|
||||
export function useBreakpoint(): DeviceSize {
|
||||
return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
|
||||
}
|
||||
@@ -0,0 +1,69 @@
|
||||
"use client";
|
||||
/**
|
||||
* 下拉刷新 hook（占位实现）
|
||||
*
|
||||
* 原始 Dart: `easy_refresh` 包的 `EasyRefresh.builder`（chat_area.dart 用来加载更多历史消息）。
|
||||
*
|
||||
* 当前实现：最小可用版本 —— 监听顶部 overscroll 触发 onRefresh。
|
||||
* 后续可替换为 react-use / react-easy-refresh。
|
||||
*/
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
|
||||
export function usePullToRefresh(
|
||||
onRefresh: () => Promise<void> | void,
|
||||
options: { threshold?: number; disabled?: boolean } = {},
|
||||
): {
|
||||
isRefreshing: boolean;
|
||||
pullDistance: number;
|
||||
containerRef: React.RefObject<HTMLDivElement | null>;
|
||||
} {
|
||||
const { threshold = 80, disabled = false } = options;
|
||||
const [isRefreshing, setIsRefreshing] = useState(false);
|
||||
const [pullDistance, setPullDistance] = useState(0);
|
||||
const startY = useRef<number | null>(null);
|
||||
const containerRef = useRef<HTMLDivElement | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (disabled || typeof window === "undefined") return;
|
||||
const el = containerRef.current;
|
||||
if (!el) return;
|
||||
|
||||
const onTouchStart = (e: TouchEvent) => {
|
||||
if (el.scrollTop > 0) return;
|
||||
startY.current = e.touches[0]?.clientY ?? null;
|
||||
};
|
||||
const onTouchMove = (e: TouchEvent) => {
|
||||
if (startY.current == null) return;
|
||||
const y = e.touches[0]?.clientY ?? startY.current;
|
||||
const delta = y - startY.current;
|
||||
if (delta > 0 && el.scrollTop <= 0) {
|
||||
setPullDistance(Math.min(delta, threshold * 1.5));
|
||||
}
|
||||
};
|
||||
const onTouchEnd = async () => {
|
||||
if (startY.current == null) return;
|
||||
if (pullDistance >= threshold && !isRefreshing) {
|
||||
setIsRefreshing(true);
|
||||
try {
|
||||
await onRefresh();
|
||||
} finally {
|
||||
setIsRefreshing(false);
|
||||
setPullDistance(0);
|
||||
}
|
||||
} else {
|
||||
setPullDistance(0);
|
||||
}
|
||||
startY.current = null;
|
||||
};
|
||||
el.addEventListener("touchstart", onTouchStart, { passive: true });
|
||||
el.addEventListener("touchmove", onTouchMove, { passive: true });
|
||||
el.addEventListener("touchend", onTouchEnd);
|
||||
return () => {
|
||||
el.removeEventListener("touchstart", onTouchStart);
|
||||
el.removeEventListener("touchmove", onTouchMove);
|
||||
el.removeEventListener("touchend", onTouchEnd);
|
||||
};
|
||||
}, [threshold, disabled, isRefreshing, onRefresh, pullDistance]);
|
||||
|
||||
return { isRefreshing, pullDistance, containerRef };
|
||||
}
|
||||
@@ -0,0 +1,47 @@
|
||||
"use client";
|
||||
/**
|
||||
* PWA Install 提示 hook
|
||||
*
|
||||
* 原始 Dart: `pwa_install` 包的 BeforeInstallPrompt 事件封装
|
||||
* （`lib/ui/chat/widgets/pwa_install_overlay.dart` + `pwa_install_dialog.dart`）。
|
||||
*
|
||||
* 浏览器 API：`beforeinstallprompt` 事件 → 用户触发 → 浏览器展示原生安装提示。
|
||||
*
|
||||
* 用法：
|
||||
* const { canInstall, promptInstall } = usePwaInstall();
|
||||
* if (canInstall) <button onClick={promptInstall}>Install</button>;
|
||||
*/
|
||||
import { useEffect, useState } from "react";
|
||||
|
||||
interface BeforeInstallPromptEvent extends Event {
|
||||
prompt(): Promise<void>;
|
||||
userChoice: Promise<{ outcome: "accepted" | "dismissed" }>;
|
||||
}
|
||||
|
||||
export function usePwaInstall(): {
|
||||
canInstall: boolean;
|
||||
promptInstall: () => Promise<"accepted" | "dismissed" | "unavailable">;
|
||||
} {
|
||||
const [deferred, setDeferred] = useState<BeforeInstallPromptEvent | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (typeof window === "undefined") return;
|
||||
const handler = (e: Event) => {
|
||||
e.preventDefault();
|
||||
setDeferred(e as BeforeInstallPromptEvent);
|
||||
};
|
||||
window.addEventListener("beforeinstallprompt", handler);
|
||||
return () => window.removeEventListener("beforeinstallprompt", handler);
|
||||
}, []);
|
||||
|
||||
return {
|
||||
canInstall: deferred !== null,
|
||||
promptInstall: async () => {
|
||||
if (!deferred) return "unavailable";
|
||||
await deferred.prompt();
|
||||
const choice = await deferred.userChoice;
|
||||
setDeferred(null);
|
||||
return choice.outcome;
|
||||
},
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,42 @@
|
||||
"use client";
|
||||
/**
|
||||
* 元素全可见性 hook
|
||||
*
|
||||
* 原始 Dart: `visibility_detector` 包的 `VisibilityDetector`（chat_screen 用法：
|
||||
* onVisibilityChanged: (info) { if (info.visibleFraction == 1.0) ... }）。
|
||||
*
|
||||
* 用 IntersectionObserver，threshold=1.0 触发 `isIntersecting` 即视为「完全可见」。
|
||||
* 返回 `[isVisible, ref]`，与 Flutter `VisibilityDetector` 的语义对齐。
|
||||
*
|
||||
* 用法：
|
||||
* const [isVisible, ref] = useFullVisibility();
|
||||
* useEffect(() => { dispatch(isVisible ? Visible() : Invisible()); }, [isVisible]);
|
||||
*/
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
|
||||
export function useFullVisibility(
|
||||
threshold = 1.0,
|
||||
): readonly [boolean, React.RefObject<HTMLDivElement | null>] {
|
||||
const ref = useRef<HTMLDivElement | null>(null);
|
||||
const [visible, setVisible] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const el = ref.current;
|
||||
if (!el || typeof IntersectionObserver === "undefined") return;
|
||||
|
||||
const observer = new IntersectionObserver(
|
||||
(entries) => {
|
||||
const entry = entries[0];
|
||||
if (!entry) return;
|
||||
setVisible(
|
||||
entry.isIntersecting && entry.intersectionRatio >= threshold,
|
||||
);
|
||||
},
|
||||
{ threshold: [threshold] },
|
||||
);
|
||||
observer.observe(el);
|
||||
return () => observer.disconnect();
|
||||
}, [threshold]);
|
||||
|
||||
return [visible, ref] as const;
|
||||
}
|
||||
Reference in New Issue
Block a user