admin
8cab34864e
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>
56 lines
1.0 KiB
CSS
56 lines
1.0 KiB
CSS
.button {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: var(--spacing-sm);
|
|
width: 100%;
|
|
height: var(--button-height);
|
|
padding: 0 var(--spacing-lg);
|
|
border: var(--border-light) solid var(--color-chat-input-border);
|
|
border-radius: var(--radius-full);
|
|
background: rgba(255, 255, 255, 0.04);
|
|
color: var(--color-text-primary);
|
|
font-size: var(--font-size-md);
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
transition: background 0.15s ease, border-color 0.15s ease;
|
|
}
|
|
|
|
.button:hover:not(:disabled) {
|
|
background: rgba(255, 255, 255, 0.08);
|
|
}
|
|
|
|
.button:disabled {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.icon {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
|
|
.facebook {
|
|
background: var(--color-facebook-blue);
|
|
border-color: transparent;
|
|
}
|
|
|
|
.google {
|
|
background: #ffffff;
|
|
color: #1f1f1f;
|
|
border-color: transparent;
|
|
}
|
|
|
|
.apple {
|
|
background: #000000;
|
|
border-color: #ffffff;
|
|
}
|
|
|
|
.label {
|
|
flex: 1 1 auto;
|
|
text-align: center;
|
|
}
|