# YouCall Messenger A static React messenger prototype with GenMB auth, phone onboarding, local chats, mock channels/calls, and premium in-app call overlay. ## Masterplan - Deliver a mobile-first black-and-white messenger shell with Telegram-like clarity, WhatsApp-familiar tabs, and polished launch/call transitions. - Target authenticated users who want simple chat discovery by app-specific phone number, fast 1:1 messaging, recent calls, channels, and settings. - Current value: real Google/email magic-link auth via GenMB, protected routing, forced first-login phone collection, local chat/contact creation, local message sending, and simulated audio/video call UX. - Future direction: replace local Zustand/mock data with backend realtime messaging, WebRTC signaling/media, push notifications, searchable users, channel roles, read receipts, and RU/EN translations. ## Tech Stack & Architecture - **Runtime:** Static browser app loaded from `index.html`; no bundler, no build step, native ES modules only. - **React:** `react@19.2.0` and `react-dom@19.2.0` from `https://esm.sh`. - **JSX:** There is no JSX transpilation. Every component imports `html` from `src/jsx.js` and returns `htm` templates: ```js import { html } from '../jsx.js'; return html`

...

`; ``` Do not add `.jsx` syntax unless a build step is introduced. - **Routing:** `react-router-dom@7` with `HashRouter` in `src/mainProviders.js`; URLs are hash-based for static hosting. - **State:** - `src/mainProviders.js` owns auth, loading, dark theme, and language state through `AuthContext`. - `useAuth()` exposes `user`, `loading`, `isDark`, `setIsDark`, `lang`, `setLang`, `signIn`, `signOut`, and `sendMagicLink`. - `ThemeContext`/`useTheme()` exists but is not actually populated; use `useAuth()` for current theme state unless refactoring. - `src/store/useChatStore.js` stores local chats/messages and mutators such as `addChat`/`addMessage`. - `src/store/useCallStore.js` stores simulated call status, active call, duration, mute/speaker/video toggles, and call lifecycle methods. - **Styling:** Tailwind CDN in `index.html` plus CSS variables/utilities in `src/styles/main.css`. Components rely heavily on `hsl(var(--...))` tokens. - **Icons:** `lucide-react` from esm.sh. - **Animation:** `framer-motion@11.18.2` is used by `src/pages/Splash.js`; CSS animations such as `animate-slide-up` come from `src/styles/main.css`. - **Auth integration:** GenMB Auth SDK is injected inline in `index.html` and consumed as `window.genmb.auth`. - Supported methods used here: `ready()`, `getUser()`, `signIn()`, `sendMagicLink(email)`, `signOut()`, `onAuthStateChange(callback)`. - User shape: `{ id, email, name, picture }`. - There is no custom app backend/API in this repo. - **App composition:** - `src/main.js` renders ``. - `src/mainProviders.js` waits for GenMB auth readiness, subscribes to auth state, toggles `.dark` on ``, and wraps the app in `HashRouter`. - `src/App.js` always shows `Splash` first, then registers protected routes and globally mounts `CallOverlay`. - `src/components/MainLayout.js` provides the top bar, bottom tabs, chat-only FAB, and nested tab content via ``. ## File Structure ```text index.html Static entry; Tailwind CDN, Inter font, app CSS, injected GenMB auth SDK, #root. CLAUDE.md Existing project doc; update with this app-specific source of truth. src/main.js React root bootstrap; renders Providers and App through htm. src/jsx.js htm binding to React.createElement; required for all component markup. src/mainProviders.js Auth/theme/lang context, GenMB SDK bridge, dark class toggling, HashRouter. src/App.js Splash gate, route table, ProtectedRoute, global CallOverlay mount. src/components/MainLayout.js Authenticated shell with YouCall header, four tabs, search button, chat FAB. src/components/CallOverlay.js Full-screen simulated call UI for ringing/incoming/connected/ended states. src/pages/Splash.js Animated launch sequence: “You” → “Call” → “YC”. src/pages/Login.js Google sign-in and email magic-link form; redirects authed users by phone setup state. src/pages/PhoneEntry.js First-login phone collection; stores unverified +999 number in localStorage. src/pages/ChatList.js Chats tab; renders local Zustand chats, unread badges, online dots. src/pages/ChatDetail.js 1:1 thread view; local send, auto-scroll, audio/video call buttons. src/pages/NewChat.js Adds mock contact by formatted +999 phone number and opens a new chat. src/pages/Calls.js Recent calls tab; currently empty-state UI with mock list path. src/pages/Channels.js Static discover/my/create segmented UI and mock channel cards. src/pages/Settings.js Profile/settings screen; expected to control dark mode, language, and sign-out. src/store/useChatStore.js Zustand chat/message store for local-only conversations. src/store/useCallStore.js Zustand call simulation store for overlay lifecycle and controls. src/styles/main.css CSS variables, dark theme tokens, scroll/animation/glass utilities. ``` ## Key Features ### Authentication - Login route: `#/login`. - `src/pages/Login.js` supports: - Google sign-in via `useAuth().signIn()`. - Email magic link via `useAuth().sendMagicLink(email)`. - Loading and error states. - Authenticated users are redirected away from login: - If `localStorage.getItem("yc_phone_${user.id}")` exists, go to `/`. - Otherwise go to `/phone-setup`. - `ProtectedRoute` in `src/App.js` blocks all app routes except `/login` until `user` exists. ### Phone onboarding - First authenticated session requires an app-local phone number. - Phone numbers are not verified and are only used for in-app search/contact creation. - Storage key is user-specific: ```js yc_phone_${user.id} ``` - The app uses the fake required prefix `+999`. - `src/pages/NewChat.js` enforces the same `+999` flow and formats input as: ```text +999 000 00 00 ``` Internally it limits user-entered digits after the prefix to 9 and rejects incomplete numbers. ### Chats and messages - Chat list is local-only via `src/store/useChatStore.js`. - `src/pages/ChatList.js` renders: - Avatar initials/letters. - Online green dot. - Last message/time. - Unread count. - Sent/read-like `CheckCheck` icon when `chat.own` is truthy. - `src/pages/ChatDetail.js`: - Loads chat by `id` route param. - Reads messages from `messages[id] || []`. - Sends local text messages with sender `"You"`, current local HH:MM time, and `own: true`. - Auto-scrolls to the bottom when messages change. - Uses Enter to send unless Shift+Enter. - There is no persistence guarantee unless implemented inside `useChatStore.js`; do not assume server sync. ### New chat - Route: `#/new-chat`. - `src/pages/NewChat.js` creates a mock contact for any full `+999` number. - New chat id is `Date.now().toString()`. - Mock display name is `Contact ${phone.slice(-2)}`. - After `addChat(...)`, navigation goes directly to `/chat/${chatId}`. - There is no real user lookup despite the “Search by phone number” UI. ### Calls - `src/components/CallOverlay.js` is always mounted by `src/App.js` and returns `null` when `status === 'idle'`. - Calls are simulated through `src/store/useCallStore.js`; no WebRTC, media devices, signaling, ringtone, or TURN/STUN are implemented yet. - `src/pages/ChatDetail.js` starts calls with: ```js startCall(chat, 'audio') startCall(chat, 'video') ``` - Overlay supports: - Incoming accept/reject UI. - Ringing/connected/ended labels. - Live duration formatting for connected calls. - Mute, speaker, and video-off toggles. - Video-mode placeholder background and self-view block. - `src/pages/Calls.js` currently shows an empty recent calls state because `mockCalls = []`. ### Channels - `src/pages/Channels.js` is static/mock only. - Segments shown: Discover, My Channels, Create. - Mock model: ```js { id, name, subs, description, public } ``` - Public channels use `Megaphone`; private channels use `Lock`. - There are no invite links, admin roles, subscriber mutations, posts, or composer yet. ### Settings, theme, and language - `src/mainProviders.js` exposes `isDark/setIsDark` and `lang/setLang`. - Dark mode works by toggling the `.dark` class on ``. - Language is state-only in this current app; most UI strings are hardcoded English, so RU/EN localization is not complete. - Settings page should use `useAuth()` for theme/language/sign-out controls. ## Design Guidelines - Visual identity: strict black-and-white, minimalist, premium mobile messenger. - Typography: Inter from Google Fonts, loaded in `index.html`. - Color system: use CSS variables from `src/styles/main.css` through Tailwind arbitrary values: - `bg-[hsl(var(--background))]` - `text-[hsl(var(--foreground))]` - `border-[hsl(var(--border))]` - `bg-[hsl(var(--secondary))]` - `text-[hsl(var(--muted-foreground))]` - Primary actions are black backgrounds with white icons/text, usually rounded `rounded-2xl`. - Avatars are black squares/rounded blocks with white initials, not image-first except GenMB user profile may expose `picture`. - Layout is mobile-first and locked to app-like behavior: - `index.html` viewport disables zoom: `maximum-scale=1.0, user-scalable=no`. - Main shell uses `h-screen`, fixed bottom tab bar, and overflow-scrolling content. - Microinteractions: - Prefer `active:scale-*`, `transition-*`, `animate-slide-up`, and subtle opacity changes. - Do not add heavy color accents beyond green online/accept and red missed/end/error states. - The FAB appears only on the Chats root path (`location.pathname === '/'`). ## App Flow 1. **Launch** - `src/App.js` initializes `showSplash = true`. - `src/pages/Splash.js` plays the launch animation and calls `onComplete`. - Only after splash completion are routes rendered. 2. **Unauthenticated user** - Any protected route renders ``. - Login offers Google or email magic link. 3. **Authenticated user without phone** - Login effect detects missing `yc_phone_${user.id}` and routes to `#/phone-setup`. - Phone setup saves a local, unverified `+999` number. - After save, user enters main app. 4. **Main navigation** - Root layout has four tabs: - `#/` Chats - `#/calls` Calls - `#/channels` Channels - `#/settings` Settings - `src/components/MainLayout.js` owns this tab shell. 5. **Starting a chat** - From Chats, tap black FAB. - Enter a full `+999` number in `NewChat`. - App creates a local mock contact and navigates to its thread. 6. **Messaging** - Open a chat from `ChatList`. - Send text from `ChatDetail`; empty/whitespace sends are ignored. - Unknown chat ids currently render `null`; consider adding a not-found state if improving UX. 7. **Calling** - In `ChatDetail`, tap phone or video. - `useCallStore.startCall` opens global `CallOverlay`. - Overlay controls mutate simulated state only. - When idle, overlay is not rendered. 8. **Important edge cases** - If GenMB popup is blocked, SDK may redirect full-page; `Login.js` relies on its auth effect after return. - `ProtectedRoute` returns `null` during auth loading, so pages may appear blank briefly after splash. - Phone/contact validation is based on formatted string length in `NewChat.js`; keep formatting and validation in sync if changing the mask. - Hash routing means route paths in code are normal (`/chat/:id`) but browser URLs include `#`. ## Conventions - Use native ESM imports from CDN exactly like existing files; pin React deps through esm.sh query where needed: ```js import React from 'https://esm.sh/react@19.2.0'; import { Link } from 'https://esm.sh/react-router-dom@7?deps=react@19.2.0'; ``` - Components are default-exported functions named after their file: `ChatList`, `NewChat`, `CallOverlay`. - All markup uses `html` tagged templates; close component tags with `` as in existing htm style. - Keep route-protected app pages behind `ProtectedRoute` in `src/App.js`. - To add a new main tab: 1. Create `src/pages/NewPage.js`. 2. Import it in `src/App.js`. 3. Add a nested route under the `/` `MainLayout` route. 4. Add a tab object in `src/components/MainLayout.js`. - To add a non-tab authenticated page: 1. Create the page in `src/pages`. 2. Add a top-level protected `` in `src/App.js`. 3. Include its own header/back button if it should be full-screen like `ChatDetail.js` or `NewChat.js`. - To add chat data/actions, extend `src/store/useChatStore.js` first and consume via selectors: ```js const chats = useChatStore(s => s.chats); const addMessage = useChatStore(s => s.addMessage); ``` - To add call behavior, extend `src/store/useCallStore.js`; `CallOverlay` should remain a pure renderer/controller of store state. - Do not introduce backend claims in UI/docs unless implemented. Current realtime messaging, WebRTC, push notifications, Apple login, SMS auth, read receipts, media, voice messages, search, and full localization are product goals, not current working features. ## Platform (GenMB) This app is built and hosted on GenMB. **Runtime:** Browser sandbox (iframe) or Cloud Run. No Node.js server — all code runs client-side unless `backend/` exists. **Dependencies:** CDN-only (esm.sh, cdn.tailwindcss.com, unpkg). Use ES module imports with full CDN URLs. No `npm install` at runtime. **Entry point:** `index.html` must include all CDN script tags. Tailwind via CDN with inline config. **Built-in services (relative API paths only, never hardcode domains):** - `/api/ai/completion` — AI proxy | `/api/data/{appId}/*` — PostgreSQL (DataConnect SDK) - `/api/storage/{appId}/*` — File uploads (GCS) | `/api/auth/google/*` — Google OAuth - `/api/contact/submit` — Contact form | SDKs: `window.genmb.db`, `.storage`, `.auth` **File structure:** `index.html` (entry), `src/` (source), `styles/` (CSS), `backend/` (optional FastAPI), `CLAUDE.md` (this file). **Cannot:** Install npm packages at runtime, access filesystem, make direct server-side calls from frontend, modify infra.