diff --git a/apps/desktop/index.html b/apps/desktop/index.html index 25a0ca7..0270fe3 100644 --- a/apps/desktop/index.html +++ b/apps/desktop/index.html @@ -4,7 +4,8 @@ - ChatApp + + Netralax
diff --git a/apps/desktop/public/favicon.svg b/apps/desktop/public/favicon.svg new file mode 100644 index 0000000..3906605 --- /dev/null +++ b/apps/desktop/public/favicon.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + \ No newline at end of file diff --git a/apps/desktop/src-tauri/tauri.conf.json b/apps/desktop/src-tauri/tauri.conf.json index 3a495be..869de65 100644 --- a/apps/desktop/src-tauri/tauri.conf.json +++ b/apps/desktop/src-tauri/tauri.conf.json @@ -1,7 +1,7 @@ { "$schema": "https://schema.tauri.app/config/2", "productName": "ChatApp", - "version": "0.4.4", + "version": "0.5.0", "identifier": "com.meinname.chatapp", "build": { "beforeDevCommand": "pnpm vite:dev", diff --git a/apps/desktop/src/lib/avatarUpload.ts b/apps/desktop/src/lib/avatarUpload.ts new file mode 100644 index 0000000..eaf340c --- /dev/null +++ b/apps/desktop/src/lib/avatarUpload.ts @@ -0,0 +1,77 @@ +import { supabase } from './supabase'; + +const BUCKET = 'profile-avatars'; +const MAX_DIM = 512; +const QUALITY = 0.85; + +// Resizes the source image to a centred-cropped square ≤ MAX_DIM and +// re-encodes as WebP. Falls back to JPEG if WebP isn't supported (rare). +async function resizeToSquare(file: File): Promise { + const url = URL.createObjectURL(file); + try { + const img = await new Promise((resolve, reject) => { + const i = new Image(); + i.onload = () => resolve(i); + i.onerror = () => reject(new Error('image load failed')); + i.src = url; + }); + + const minSide = Math.min(img.naturalWidth, img.naturalHeight); + const sx = (img.naturalWidth - minSide) / 2; + const sy = (img.naturalHeight - minSide) / 2; + const target = Math.min(MAX_DIM, minSide); + + const canvas = document.createElement('canvas'); + canvas.width = target; + canvas.height = target; + const ctx = canvas.getContext('2d'); + if (!ctx) throw new Error('canvas context unavailable'); + ctx.drawImage(img, sx, sy, minSide, minSide, 0, 0, target, target); + + const blob = await new Promise((resolve) => + canvas.toBlob(resolve, 'image/webp', QUALITY), + ); + if (blob) return blob; + + const jpeg = await new Promise((resolve) => + canvas.toBlob(resolve, 'image/jpeg', QUALITY), + ); + if (!jpeg) throw new Error('canvas toBlob returned null'); + return jpeg; + } finally { + URL.revokeObjectURL(url); + } +} + +export async function uploadAvatar(userId: string, file: File): Promise { + if (!file.type.startsWith('image/')) { + throw new Error('only image files are accepted'); + } + const blob = await resizeToSquare(file); + const ext = blob.type === 'image/webp' ? 'webp' : 'jpg'; + // Random filename so old uploads don't get overwritten before we update + // the profile row — Supabase Storage CDN caches by URL, so a fresh path + // also forces clients to fetch the new image. + const name = + userId + '/' + Date.now().toString(36) + '-' + Math.random().toString(36).slice(2, 8) + '.' + ext; + const { error: upErr } = await supabase.storage.from(BUCKET).upload(name, blob, { + contentType: blob.type, + cacheControl: '604800', + upsert: false, + }); + if (upErr) throw upErr; + const { data: pub } = supabase.storage.from(BUCKET).getPublicUrl(name); + return pub.publicUrl; +} + +export async function deleteAvatarObject(publicUrl: string): Promise { + // Public URLs look like + // https:///storage/v1/object/public/profile-avatars/ + // Extract and remove. + const marker = '/object/public/' + BUCKET + '/'; + const idx = publicUrl.indexOf(marker); + if (idx === -1) return; + const path = publicUrl.slice(idx + marker.length); + const { error } = await supabase.storage.from(BUCKET).remove([path]); + if (error) throw error; +} diff --git a/apps/desktop/src/lib/conversationKeySync.ts b/apps/desktop/src/lib/conversationKeySync.ts index 4abd69b..a285117 100644 --- a/apps/desktop/src/lib/conversationKeySync.ts +++ b/apps/desktop/src/lib/conversationKeySync.ts @@ -24,19 +24,24 @@ function rawFrom(table: string) { return (supabase as unknown as { from: (t: string) => any }).from(table); } +// Module-level flag — gap-fill runs once per (user, device) combo per +// process lifetime. Page reloads / route changes don't re-trigger it. +const backfilledKey = new Set(); + export function startConversationKeySync( ownUserId: string, ownDeviceId: string, ): () => void { let cancelled = false; let priv: Uint8Array | null = null; + const dedupeKey = ownUserId + ':' + ownDeviceId; void loadDevicePrivateKey(devLocalSecretStore, ownUserId, ownDeviceId).then(async (pk) => { if (cancelled) return; priv = pk; if (!priv) return; - // Run a full backfill once we have the private key — covers devices that - // registered while we were offline. + if (backfilledKey.has(dedupeKey)) return; + backfilledKey.add(dedupeKey); await syncAllExistingGaps({ myUserId: ownUserId, myDeviceId: ownDeviceId, priv }); }); diff --git a/apps/desktop/src/pages/SettingsPage.tsx b/apps/desktop/src/pages/SettingsPage.tsx index a7755b8..8020d4c 100644 --- a/apps/desktop/src/pages/SettingsPage.tsx +++ b/apps/desktop/src/pages/SettingsPage.tsx @@ -4,12 +4,13 @@ import { SUPPORTED_LOCALES, type SupportedLocale, } from '@chat-app/shared/i18n'; -import { useEffect, useState } from 'react'; +import { useEffect, useRef, useState } from 'react'; import { useTranslation } from 'react-i18next'; import { LockIcon } from '../components/icons'; import { useAuth } from '../context/AuthContext'; import { loadDevicePrivateKey, saveDevicePrivateKey } from '@chat-app/shared/auth'; +import { deleteAvatarObject, uploadAvatar } from '../lib/avatarUpload'; import { exportDeviceKey, importDeviceKey } from '../lib/deviceBackup'; import { devLocalSecretStore } from '../lib/secretStore'; import { @@ -83,6 +84,10 @@ export function SettingsPage() { {/* Account */}
+ @@ -327,6 +332,123 @@ function AudioQualityControls() { ); } +interface AvatarControlsProps { + patchProfile: (patch: Parameters[1]) => Promise; + busy: boolean; +} + +function AvatarControls({ patchProfile, busy }: AvatarControlsProps) { + const { t } = useTranslation(['app']); + const { profile } = useAuth(); + const inputRef = useRef(null); + const [uploading, setUploading] = useState(false); + const [error, setError] = useState(null); + + const userId = profile?.userId; + const url = profile?.avatarUrl ?? null; + const letter = (profile?.displayName ?? profile?.username ?? '?') + .trim() + .charAt(0) + .toUpperCase() || '?'; + + async function handleFile(file: File) { + if (!userId) return; + setError(null); + setUploading(true); + try { + const newUrl = await uploadAvatar(userId, file); + const oldUrl = url; + await patchProfile({ avatarUrl: newUrl }); + if (oldUrl) { + // Best-effort cleanup of the previous file (don't block on it). + void deleteAvatarObject(oldUrl).catch(() => { + /* ignore */ + }); + } + } catch (err: unknown) { + setError(err instanceof Error ? err.message : 'upload failed'); + } finally { + setUploading(false); + if (inputRef.current) inputRef.current.value = ''; + } + } + + async function handleRemove() { + if (!userId || !url) return; + setError(null); + setUploading(true); + try { + await patchProfile({ avatarUrl: null }); + void deleteAvatarObject(url).catch(() => undefined); + } catch (err: unknown) { + setError(err instanceof Error ? err.message : 'remove failed'); + } finally { + setUploading(false); + } + } + + return ( +
+
+ {url ? ( + + ) : ( +
+ {letter} +
+ )} +
+ +
+
+ {t('app:settings.avatar', { defaultValue: 'Avatar' })} +
+
+ {t('app:settings.avatar_hint', { + defaultValue: 'Quadratisch, max 512×512, WebP. Sichtbar für deine Freunde.', + })} +
+ {error && ( +
{error}
+ )} +
+ + { + const f = e.target.files?.[0]; + if (f) void handleFile(f); + }} + /> + + {url && ( + + )} +
+ ); +} + function DeviceKeyBackupControls() { const { t } = useTranslation(['app']); const { profile, device } = useAuth(); diff --git a/design_handoff_chatapp/ChatApp Redesign.html b/design_handoff_chatapp/ChatApp Redesign.html new file mode 100644 index 0000000..229028b --- /dev/null +++ b/design_handoff_chatapp/ChatApp Redesign.html @@ -0,0 +1,150 @@ + + + + +ChatApp Redesign — 6 Varianten + + + + + + + + + + + + + + + + + + +
+ +
+ + +
+

Tweaks

+
+ + +
+
+ + +
+
+ Tipp: Klicke oben auf die Varianten um zu wechseln. +
+
+ + + + + + + + + + diff --git a/design_handoff_chatapp/README.md b/design_handoff_chatapp/README.md new file mode 100644 index 0000000..1274a9a --- /dev/null +++ b/design_handoff_chatapp/README.md @@ -0,0 +1,314 @@ +# Handoff: ChatApp — Clean Rail Redesign + Discord-Style Call UI + +## Overview + +This package contains the full design spec for redesigning the existing ChatApp (Netralax) interface around a **Clean Rail** layout aesthetic, plus a complete **Discord-style call system** (incoming call, in-call dock, picture-in-picture, fullscreen cinema mode). + +The redesign covers: +1. The main chat interface (icon-rail sidebar + chat list + conversation area) in both **light** and **dark** mode. +2. The call UX: incoming call overlay → active call docked above the chat (so users can keep typing while on a call) → fullscreen cinema mode → minimizable PiP bubble. + +## About the Design Files + +The files in this bundle are **design references created in HTML/React/CSS** — prototypes showing the intended look, layout, and behavior. They are **not production code** to copy verbatim. + +Your task is to **recreate these designs inside the existing ChatApp codebase**, using its established patterns (existing React components, styling conventions, state management, icon library, etc.). If some tokens or helper components don't exist yet in the codebase, add them but keep them aligned with what's already there. + +The design files are organized as: +- `ChatApp Redesign.html` — entry HTML that boots the prototype +- `components/app.jsx` — main layout (rail + chat list + chat area, plus call state machine) +- `components/call.jsx` — all call UI components (IncomingCallScreen, ActiveCallScreen, ParticipantTile, CallControls, PipCall) +- `components/icons.jsx` — SVG icon set used +- `components/data.jsx` — dummy chat/message data +- `styles/base.css` — shared base tokens + layout primitives +- `styles/variants.css` — `variant-clean` light + dark token definitions (this is the look you're targeting) +- `styles/rail.css` — rail-layout specifics +- `styles/call.css` — **all call UI styles** (the most important file for the call feature) +- `screenshots/` — reference images of each state + +## Fidelity + +**High-fidelity.** Exact colors, radii, spacing, typography and motion are specified. Recreate pixel-perfectly using the codebase's existing component library — but prefer the codebase's primitives over duplicating the prototype's raw CSS where equivalents exist. + +--- + +## Design Tokens (Clean Rail) + +### Colors — Light mode (`.variant-clean`) +``` +--bg: #fafaf9 (app background) +--bg-2: #f4f4f2 (secondary surfaces, hover, search input) +--bg-3: #ffffff (elevated surfaces — chat list, chat area, cards) +--fg: #0a0a0f (primary text) +--fg-muted: #737380 (secondary text, icons) +--line: rgba(10,10,15,0.08) (dividers, borders) +--accent: #4F46E5 (indigo — primary actions, active states, my-bubble) +--accent-fg: #ffffff +``` + +### Colors — Dark mode (`.variant-clean.dark`) +``` +--bg: #050507 +--bg-2: #111118 +--bg-3: #0A0A0F +--fg: #f4f4f5 +--fg-muted: #8a8a99 +--line: rgba(255,255,255,0.07) +--accent: #6D73FF (slightly lighter indigo for contrast) +--accent-fg: #ffffff +``` + +### Status / Semantic Colors (both modes) +``` +Speaking/Online/Success: #16a34a light · #22c55e / #4ade80 dark +Danger/Decline/Hangup: #dc2626 (hover #b91c1c) · #fb7185 dark accent +Warning/Idle: #f59e0b +Live/Recording: #ef4444 +E2EE indicator (light): #16a34a (dark: #4ade80) +``` + +### Avatar color swatches (assigned per chat) +``` +violet: bg #ddd6fe / fg #5b21b6 (dark: #312E81 / #C4B5FD) +amber: bg #fde68a / fg #78350f +rose: bg #fecdd3 / fg #881337 +teal: bg #99f6e4 / fg #134e4a (dark: #134e4a / #99f6e4) +``` + +### Typography +- Family: `'Inter', system-ui, sans-serif` — Inter is the base. Display/headline use `'Outfit'` (participant name in IncomingCall). +- Scale: + - Chat title / participant name large: 24px / 700 + - Primary labels, chat name: 14–15px / 600 + - Body (bubbles, messages): 14px / 400–500 + - Meta, timestamps, presence: 11–12px / 400–500 + - Rail tooltips, badges: 10–11px / 500–600 + - Uppercase eyebrow (e.g. "EINGEHENDER ANRUF"): 12px / 600 / letter-spacing 0.12em + +### Spacing +- Container padding: 16px (call-stage), 14–20px (topbars, composer) +- Tile gap in grid: 8–10px +- Control-button row gap: 8–10px +- Border radius scale: 4 (small), 8 (tiles/badges), 10 (buttons), 14 (cards, large buttons), 18 (bubbles, bottom-fs controls), 24 (modal/card) + +### Shadows +- Elevated card light: `0 20px 60px rgba(0,0,0,0.1)` +- Elevated card dark: `0 20px 60px rgba(0,0,0,0.5)` +- Accent button: `0 4px 14px rgba(22,163,74,0.3)` (green accept) / same pattern for accent +- PiP glow: `0 12px 40px rgba(0,0,0,0.2), 0 0 0 3px rgba(79,70,229,0.15)` + +### Motion +- Standard UI transition: `all 0.15s` +- Pulse ring (incoming call): `2s ease-out infinite`, scale 0.85→1.25, opacity 0.6→0 +- Audio pulse (speaking ring): `1.3s ease-out infinite`, scale 1→1.3 +- Live dot: `1.5s ease-in-out infinite`, opacity 1↔0.4 +- PiP entrance: `slideInCall 0.4s cubic-bezier(0.22,1,0.36,1)` +- Fullscreen hint fade: 3.5s total (0–15% fade in, 75–100% fade out) + +--- + +## Screens / Views + +### 1. Main Chat — Clean Rail Layout + +**Structure (left → right):** +- **Icon Rail** (72px wide): brand logo at top, tab buttons (Chats / Friends / Admin), spacer, Settings + theme-toggle at bottom. Active tab shows a vertical pill indicator on the left edge. +- **Chat List** (280px wide): header with title + "new chat" icon, search input, list of `ChatItem`s (avatar + name + time + preview, optional unread dot), `rail-user` footer showing own profile + quick mute/settings. +- **Chat Area** (flex, fills rest): chat header (counterpart avatar + name + presence/handle + search/voice/video buttons), messages scroll area, composer at bottom. + +**Chat header actions (right side):** search icon, phone icon, video icon. Phone triggers voice call (`callScreen → 'active'`, `callState.video = false`), Video triggers video call (`callState.video = true`). + +**Message bubbles:** +- Mine (outgoing): filled accent bg, white text, radius `18px 18px 4px 18px`. +- Theirs (incoming): transparent bg, 1px line border, fg text, radius `18px 18px 18px 4px`. +- Avatars appear only on the **last message of a run** from that sender. +- Reactions: pill row below bubble, `.mine` = filled accent. +- System events ("Kaiwandi hat einen Anruf gestartet — Anruf beitreten"): centered `event-pill`, muted bg, muted fg, 11px. + +**Composer:** plus button (attach), rounded input bar with inline emoji + mic icons, send button. + +--- + +### 2. Incoming Call Overlay + +Full-bleed overlay replacing the chat area (takes over `.chat-area` space), radial-gradient background tinted with accent. + +Centered card (420px wide): +- Eyebrow "EINGEHENDER ANRUF" (uppercase, 12px, tracked) +- Large avatar (96px) with **two pulsing rings** (staggered 1s) +- Caller name (24px / 700 / Outfit) +- Subtitle row: lock icon + "E2E verschlüsselt · Voice Call" +- Two side-by-side action buttons: + - **Ablehnen**: transparent, red border/text, hover = 8% red bg + - **Annehmen**: green #16a34a, white, shadow + +### 3. Active Call — Docked (Default) + +**CRITICAL layout decision:** The active call does NOT take over the chat area. Instead it renders as a **dock above the messages**, taking roughly 50% of the chat-area height (min 280px, max 420px). The chat header is **hidden** while the dock is active (redundant — call topbar shows the channel name). Messages + composer remain fully visible and usable below, so users can keep chatting during the call. This is the Discord desktop pattern. + +**Dock content:** +- **Call topbar**: left side shows group icon + "Die Squad" + duration (tabular-nums), with E2E verschlüsselt below in success-green. Right side has 3 mode toggles: Grid / Focus / Fullscreen. +- **Call stage**: fills the remaining space, renders either: + - **Grid**: CSS grid, 2×2 for 4 people, 3×2 for 5–6, 1fr 1fr for 2. + - **Focus**: main speaker tile takes most height, bottom strip with 110px-tall smaller tiles for others. + - **Fullscreen**: switches to `mode === 'fullscreen'` — see screen 4. +- **Call controls bar** at the bottom of the dock: Mic, Video, Screen-share, Participants, **Hangup** (wider, red). Compact 36px buttons when docked. + +### 4. Active Call — Fullscreen Cinema Mode + +When mode = `fullscreen`: +- Entire call-dock container becomes absolute-positioned and takes over everything below the window bar (chat list still visible on the left). +- The **call topbar is hidden** entirely. +- Main speaker fills the whole frame, no border/radius. +- Participants strip moves to a **floating column in the bottom-right** (`.fs-strip`): 180px wide, 100px tall tiles, glass-blurred bg. +- **Call controls bar floats** at bottom center — glass pill: `rgba(10,10,15,0.7)` + `backdrop-filter: blur(20px)` + subtle border + 18px radius. +- **"Esc zum Verlassen" hint** fades in top-center on entry and auto-fades out over 3.5s. Pressing Esc or clicking Grid/Focus buttons exits. +- **No visible X button** (intentional — keyboard-only exit, confirmed design decision). + +### 5. Participant Tile — Shared Component + +A participant is either in **audio-only**, **video**, or **sharing screen** mode. +- Tile border: 1px `var(--line)`, radius 14 (10 in dock). Hover → border becomes accent. `.speaking` → 2px green border + green glow shadow. `.focused` → accent border. +- **Audio-only**: centered avatar (72px large, 44px small). When `speaking`, a green ring pulses around the avatar (`::before` pseudo). +- **Video**: placeholder stub (gradient background + centered avatar, since real video not in scope here). +- **Screenshare**: renders a "fake window" — chrome row with 3 dots, content row with grey skeleton lines + one accent-tinted block. A glass badge top-left: monitor icon + "Max teilt Bildschirm" (badge hidden on small tiles). +- **Meta row** (absolute, bottom 8px, glass): left shows crown (if me) + name + lock (if E2EE), right shows muted mic icon (red chip) and/or sharing icon (green chip). + +### 6. Picture-in-Picture (PiP) + +A compact 260px pill docked bottom-right of the chat area: +- 44px preview square (avatar of speaker, or mini shared-window placeholder if someone's sharing) +- Title "Die Squad · {participantCount}" +- Subtitle row: red pulsing dot + "Live · tippe zum Öffnen" +- Circular red hangup button on the right +- Whole thing is clickable → expands back to active call +- Entrance animation: slide from bottom + fade in (`slideInCall`) +- Shadow: standard + 3px accent glow ring + +--- + +## Interactions & Behavior + +### Call State Machine (lives in `ChatApp`) + +```js +// Primary state +const [callScreen, setCallScreen] = useState('none'); // 'none' | 'incoming' | 'active' | 'pip' +const [callMode, setCallMode] = useState('grid'); // 'grid' | 'focus' | 'fullscreen' +const [focusedId, setFocusedId] = useState(firstSharingOrSpeakerId); +const [callState, setCallState] = useState({ muted: false, sharing: false, video: false, duration }); +``` + +### Triggers & Transitions +- Chat-header **phone icon** click → `setCallScreen('active')`, `callState.video = false` +- Chat-header **video icon** click → `setCallScreen('active')`, `callState.video = true` +- Grid tile click → `setFocusedId(id); setCallMode('focus')` +- Focus/Grid/Fullscreen buttons in call topbar → set mode directly +- Incoming "Annehmen" → `setCallScreen('active')` +- Incoming "Ablehnen" → `setCallScreen('none')` +- Hangup → `setCallScreen('none')` +- PiP clicked → `setCallScreen('active')` +- PiP hangup (circle red btn) → `stopPropagation()` + `setCallScreen('none')` +- **Esc key** (global listener while `callScreen === 'active' && callMode === 'fullscreen'`) → `setCallMode('grid')` + +### Chat Header Visibility Rule +``` +if (callScreen === 'active' && callMode !== 'fullscreen') → hide chat header +else → show chat header +``` + +### Keyboard +- `Esc` exits fullscreen (only). No other global keybindings. + +--- + +## State Management + +Data shapes to wire up (see `components/call.jsx`): + +```ts +type Participant = { + id: string; + name: string; + initial: string; + color: 'violet' | 'amber' | 'rose' | 'teal'; + speaking: boolean; + muted: boolean; + video: boolean; + sharing?: boolean; + me?: boolean; + e2ee: boolean; +}; + +type CallState = { + muted: boolean; + sharing: boolean; + video: boolean; + duration: string; // "HH:MM:SS" +}; +``` + +In production these all come from your real-time signaling layer (WebRTC, LiveKit, etc.). The prototype uses static data for layout purposes only — wire them to your call store. + +--- + +## Assets + +No custom imagery. Everything is SVG icons (inlined in `components/icons.jsx`) and CSS. Fonts from Google Fonts: `Inter`, `Outfit`. + +Icons used in this scope: Chat, Friends, Shield, Settings, Logo, AddUser, Search, Phone, Video, Plus, Smile, Mic, MicOff, Send, Sun, Moon, Monitor, Lock, Crown, Grid, Focus, Maximize, PhoneOff. + +Replace with your codebase's icon library if one exists (e.g. lucide-react, heroicons) — names match lucide conventions. + +--- + +## Implementation Checklist + +1. **Tokens**: add the Clean-variant light + dark CSS variables to your theme layer. If you already have a token system, map them to your existing names; otherwise create `--bg`, `--bg-2`, `--bg-3`, `--fg`, `--fg-muted`, `--line`, `--accent`, `--accent-fg`. +2. **Icon rail + chat list + chat area**: refactor the current top-nav layout into the 3-column rail layout. Use your existing `Avatar`, `ChatItem`, `Message` components — only restyle. +3. **Message bubbles**: outlined `them` / filled `me`, asymmetric radius, avatars only on last-of-run. +4. **Call state machine**: add the four `useState` hooks to whatever component owns the chat screen. Hook the Esc key effect. +5. **IncomingCallScreen**: new component, full-bleed overlay of `.chat-area`. +6. **Call dock**: new component, renders above `.messages`. Hide chat-header while docked. +7. **ParticipantTile**: audio / video / sharing modes, speaking ring, meta overlay. +8. **Fullscreen mode**: switch call container to position absolute, floating strip + floating controls + Esc hint. +9. **PiP**: minimizable widget bottom-right of chat area. +10. **Wire real data**: replace `CALL_PARTICIPANTS` dummy with your live call-session participants. + +--- + +## Files in This Handoff + +``` +design_handoff_chatapp/ +├── README.md (this file) +├── ChatApp Redesign.html (entry — open in browser to see the prototype) +├── components/ +│ ├── app.jsx (chat app + rail layout + call state machine) +│ ├── call.jsx (Incoming / Active / Pip / ParticipantTile / CallControls) +│ ├── icons.jsx (all SVG icons) +│ └── data.jsx (dummy chats, messages) +├── styles/ +│ ├── base.css +│ ├── variants.css (Clean light + dark tokens — this is your theme) +│ ├── rail.css (rail layout) +│ └── call.css (all call UI — highest priority file) +└── screenshots/ + ├── 01-chat-light.png + ├── 03-chat-dark.png + ├── 04-incoming-dark.png + ├── 05-incall-grid-dark.png + ├── 06-incall-focus-dark.png + ├── 07-incall-fullscreen-dark.png + ├── 09-pip-dark.png + └── 11-incall-light.png +``` + +--- + +## Notes for Claude Code + +- The Clean Rail variant is **Variante 2** in the prototype's variant switcher — ignore the other 5 aesthetic variants (Playful, Y2K, Cyberpunk, Warm, Brutal), they were design exploration and not the chosen direction. +- Prefer composition over copying raw CSS. If the codebase has a `Card`, `Button`, `Tooltip`, use them. +- Duration ("00:12:47") should tick live from the call start timestamp, not be static. +- For WebRTC/media handling: this package specifies **UI only**. The media/signaling layer is out of scope and already exists in the codebase (see `CallUI.tsx`, `InCallPanel.tsx`). diff --git a/design_handoff_chatapp/components/app.jsx b/design_handoff_chatapp/components/app.jsx new file mode 100644 index 0000000..ef8c1ef --- /dev/null +++ b/design_handoff_chatapp/components/app.jsx @@ -0,0 +1,439 @@ +// Main ChatApp component — layout shared across all variants + +const Avatar = ({ chat, size = '' }) => ( +
+ {chat.initial} + {chat.presence &&
} +
+); + +const ChatItem = ({ chat, onClick }) => ( +
+ +
+
+ {chat.name} + {chat.time} +
+
+ {chat.preview} + {chat.unread && } +
+
+
+); + +const Reactions = ({ reactions }) => ( +
+ {reactions.map((r, i) => ( +
+ {r.emoji} + {r.count} +
+ ))} +
+); + +const Bubble = ({ msg }) => ( +
+ {msg.text} + {msg.time}{msg.read && msg.from === 'me' ? ' · Gelesen' : ''} +
+); + +const MediaBubble = ({ msg }) => ( +
+
+
{msg.label}
+
+ {msg.filename} + {msg.size} +
+
+ {msg.time} +
+); + +const EventPill = ({ evt }) => { + const IconComp = evt.icon === 'phone' ? Icon.Phone : Icon.PhoneOff; + return ( +
+
+ + {evt.text} + {evt.duration && · {evt.duration}} + · {evt.time} +
+
+ ); +}; + +const TypingIndicator = () => ( +
+
+
+); + +const MessageItem = ({ msg, showAvatar, chat, myChat }) => { + if (msg.type === 'event') return ; + + const wrapWithAvatar = (inner) => ( +
+ {msg.from === 'them' && ( +
+ {showAvatar && } +
+ )} +
+ {inner} +
+ {msg.from === 'me' && ( +
+ {showAvatar && } +
+ )} +
+ ); + + if (msg.type === 'typing') { + return wrapWithAvatar(); + } + if (msg.type === 'media') { + return wrapWithAvatar(); + } + return wrapWithAvatar( + <> + + {msg.reactions && } + + ); +}; + +const ProfileCard = ({ chat, position }) => ( +
+
+
+
+ {chat.initial} +
+
{chat.name}
+
{chat.handle}
+
+
🟢 Online · seit 2h
+
📍 Beigetreten am 14. Mär 2026
+
🎮 Zockt gerade: Valorant
+
+
+
+); + +const CallOverlay = ({ chat }) => ( +
+ +
+
Max ruft an…
+
Voice Call · klingelt
+
+
+ + +
+
+); + +const ChatApp = ({ variant, showCall, showProfile, isDark, onToggleDark }) => { + const [activeChat, setActiveChat] = React.useState(CHATS[0]); + const [activeTab, setActiveTab] = React.useState('chats'); + + // Call state: 'none' | 'incoming' | 'active' | 'pip' + const [callScreen, setCallScreen] = React.useState('none'); + const [callMode, setCallMode] = React.useState('grid'); // grid | focus | fullscreen + const [focusedId, setFocusedId] = React.useState('max'); + const [callState, setCallState] = React.useState({ + muted: false, sharing: false, video: false, duration: '00:12:47' + }); + + // Esc exits fullscreen + React.useEffect(() => { + const onKey = (e) => { + if (e.key === 'Escape' && callScreen === 'active' && callMode === 'fullscreen') { + setCallMode('grid'); + } + }; + window.addEventListener('keydown', onKey); + return () => window.removeEventListener('keydown', onKey); + }, [callScreen, callMode]); + + const chats = CHATS.map(c => ({...c, active: c.id === activeChat.id})); + const messagesEndRef = React.useRef(null); + + React.useEffect(() => { + if (messagesEndRef.current) { + messagesEndRef.current.parentElement.scrollTop = messagesEndRef.current.parentElement.scrollHeight; + } + }, []); + + return ( +
+
+
+
+
+
+
+
+
ChatApp — {variant.label}
+
+
+ +
+ {variant.layout === 'rail' ? ( +
+ {/* Icon rail left */} +
+
+
+ + + +
+ + +
+ {/* Chatlist + user profile at bottom */} +
+
+
Chats
+ +
+ +
+ {chats.map(c => ( + setActiveChat(c)} /> + ))} +
+
+ +
+
dennis
+
● Online
+
+ + +
+
+ {/* Chat area (unchanged below) */} +
+ {!(callScreen === 'active' && callMode !== 'fullscreen') && ( +
+ +
+
{activeChat.name}
+
+ {activeChat.presence === 'online' ? '● Online' : + activeChat.presence === 'idle' ? '● Abwesend' : + activeChat.presence === 'dnd' ? '● Nicht stören' : + '● Offline · zuletzt vor 2h'} + {' · '}{activeChat.handle} +
+
+
+ + + +
+
+ )} + {/* Call dock — rendered above messages, Discord-style */} + {callScreen === 'active' && callMode !== 'fullscreen' && ( +
+ setCallScreen('none')} + callState={callState} + setCallState={setCallState} + /> +
+ )} +
+ {MESSAGES.map((m, i) => { + const next = MESSAGES[i+1]; + const isLastOfRun = (m.from === 'them' || m.from === 'me') && (!next || next.from !== m.from || next.type === 'event'); + const myChat = { initial: 'D', color: 'teal' }; + return ; + })} +
+
+
+ +
+ + + +
+ +
+
+
+ ) : ( + <> +
+
+ + Netralax +
+
+ + + + +
+
+ +
+
dennis
+
@dennis
+
+ +
+ {variant.key === 'clean' && ( + + )} +
+ +
+
+
+
Chats
+ +
+ +
+ {chats.map(c => ( + setActiveChat(c)} /> + ))} +
+
+ +
+
+ +
+
{activeChat.name}
+
+ {activeChat.presence === 'online' ? '● Online' : + activeChat.presence === 'idle' ? '● Abwesend' : + activeChat.presence === 'dnd' ? '● Nicht stören' : + '● Offline · zuletzt vor 2h'} + {' · '}{activeChat.handle} +
+
+
+ + + +
+
+ +
+ {MESSAGES.map((m, i) => { + const next = MESSAGES[i+1]; + const isLastOfRun = (m.from === 'them' || m.from === 'me') && (!next || next.from !== m.from || next.type === 'event'); + const myChat = { initial: 'D', color: 'teal' }; + return ; + })} +
+
+ +
+ +
+ + + +
+ +
+
+
+ + )} +
+ + {/* Call screen switcher — only in Clean Rail */} + {variant.layout === 'rail' && ( +
+ + + + +
+ )} + + {/* Incoming call is a full overlay */} + {callScreen === 'incoming' && ( +
+ setCallScreen('active')} + onDecline={() => setCallScreen('none')} + /> +
+ )} + {/* Fullscreen call hides chat entirely */} + {callScreen === 'active' && callMode === 'fullscreen' && ( +
+ setCallScreen('none')} + callState={callState} + setCallState={setCallState} + /> +
+ )} + {callScreen === 'pip' && ( + setCallScreen('active')} + onHangup={() => setCallScreen('none')} + /> + )} + + {showCall && callScreen === 'none' && } +
+
+ ); +}; + +Object.assign(window, { ChatApp, Avatar, ChatItem, MessageItem, CallOverlay }); diff --git a/design_handoff_chatapp/components/call.jsx b/design_handoff_chatapp/components/call.jsx new file mode 100644 index 0000000..9f16e79 --- /dev/null +++ b/design_handoff_chatapp/components/call.jsx @@ -0,0 +1,194 @@ +// Call UI components — Discord-style, matched to Clean-Rail aesthetic + +const CALL_PARTICIPANTS = [ + { id: 'dennis', name: 'dennis', initial: 'D', color: 'teal', speaking: false, muted: false, video: false, me: true, e2ee: true }, + { id: 'max', name: 'Max', initial: 'M', color: 'teal', speaking: true, muted: false, video: true, sharing: true, e2ee: true }, + { id: 'lena', name: 'Lena', initial: 'L', color: 'amber', speaking: false, muted: true, video: false, e2ee: true }, + { id: 'tom', name: 'Tom', initial: 'T', color: 'violet', speaking: false, muted: false, video: false, e2ee: true }, + { id: 'nico', name: 'nico', initial: 'N', color: 'teal', speaking: true, muted: false, video: false, e2ee: true }, +]; + +const ParticipantTile = ({ p, focused, onClick, small }) => ( +
+ {p.video || p.sharing ? ( +
+ {p.sharing ? ( +
+
+
+
+
+
+
+
+
+
+
+
+ {p.name} teilt Bildschirm +
+
+ ) : ( +
+ +
+ )} +
+ ) : ( +
+
+ +
+
+ )} +
+
+ {p.me && } + {p.name}{p.me ? ' (du)' : ''} + {p.e2ee && } +
+
+ {p.muted && } + {p.sharing && } +
+
+
+); + +const CallControls = ({ muted, onToggleMute, sharing, onToggleShare, video, onToggleVideo, onHangup, compact }) => ( +
+ + + + + +
+); + +const IncomingCallScreen = ({ chat, onAccept, onDecline }) => ( +
+
+
Eingehender Anruf
+
+
+
+ +
+
{chat.name}
+
+ E2E verschlüsselt · Voice Call +
+
+ + +
+
+
+); + +const ActiveCallScreen = ({ participants, mode, setMode, focused, setFocused, onHangup, callState, setCallState }) => { + const speaker = participants.find(p => p.id === focused) || participants.find(p => p.sharing) || participants[0]; + const others = participants.filter(p => p.id !== speaker.id); + const sharingParticipant = participants.find(p => p.sharing); + + return ( +
+
+
+
+ + Die Squad + · + {callState.duration} +
+
E2E verschlüsselt
+
+
+ + + +
+
+ +
+ {mode === 'grid' && ( +
+ {participants.map(p => ( + { setFocused(p.id); setMode('focus'); }} /> + ))} +
+ )} + {mode === 'focus' && ( +
+
+ +
+
+ {others.map(p => ( + setFocused(p.id)} /> + ))} +
+
+ )} + {mode === 'fullscreen' && ( +
+ +
+ {others.slice(0,4).map(p => ( + setFocused(p.id)} /> + ))} +
+
Esc zum Verlassen
+
+ )} +
+ + setCallState(s => ({...s, muted: !s.muted}))} + sharing={callState.sharing} + onToggleShare={() => setCallState(s => ({...s, sharing: !s.sharing}))} + video={callState.video} + onToggleVideo={() => setCallState(s => ({...s, video: !s.video}))} + onHangup={onHangup} + /> +
+ ); +}; + +const PipCall = ({ onExpand, onHangup, participants }) => { + const speaker = participants.find(p => p.sharing) || participants.find(p => p.speaking) || participants[0]; + return ( +
+
+ {speaker.sharing ? ( +
+ ) : ( + + )} +
+
+
Die Squad · {participants.length}
+
+ + Live · tippe zum Öffnen +
+
+ +
+ ); +}; + +Object.assign(window, { CALL_PARTICIPANTS, ParticipantTile, CallControls, IncomingCallScreen, ActiveCallScreen, PipCall }); diff --git a/design_handoff_chatapp/components/data.jsx b/design_handoff_chatapp/components/data.jsx new file mode 100644 index 0000000..d3add03 --- /dev/null +++ b/design_handoff_chatapp/components/data.jsx @@ -0,0 +1,28 @@ +// Sample data + +const CHATS = [ + { id: 'test', name: 'test', handle: '@test', color: 'violet', initial: 'T', preview: 'Hallo 👋', time: '21:13', unread: false, presence: 'offline', active: true }, + { id: 'max', name: 'Max', handle: '@maxx', color: 'teal', initial: 'M', preview: 'bro du musst das sehen', time: '20:44', unread: true, presence: 'online' }, + { id: 'squad', name: 'Die Squad', handle: '5 Mitglieder', color: 'rose', initial: 'S', preview: 'leon: bin gleich da', time: '19:12', unread: true, presence: 'online', isGroup: true }, + { id: 'lena', name: 'Lena', handle: '@lenae', color: 'amber', initial: 'L', preview: 'Du: ok passt', time: 'Gestern', unread: false, presence: 'idle' }, + { id: 'tom', name: 'Tom', handle: '@tomg', color: 'violet', initial: 'T', preview: 'sent a photo', time: 'Gestern', unread: false, presence: 'dnd' }, + { id: 'nico', name: 'nico', handle: '@nicoo', color: 'teal', initial: 'N', preview: 'gg wp', time: 'Mo.', unread: false, presence: 'offline' }, +]; + +const MESSAGES = [ + { type: 'message', from: 'them', text: 'Hi', time: '20:12' }, + { type: 'message', from: 'them', text: 'Lol', time: '20:14' }, + { type: 'message', from: 'them', text: 'Wie gehts', time: '20:24' }, + { type: 'message', from: 'them', text: 'einer da?', time: '20:25' }, + { type: 'message', from: 'them', text: 'Hallo', time: '21:03', reactions: [{emoji: '👋', count: 1, mine: true}] }, + { type: 'event', kind: 'call', icon: 'phone', text: 'Eingehender Anruf', duration: '1:01', time: '21:06' }, + { type: 'event', kind: 'rejected', icon: 'phone-off', text: 'Anruf abgelehnt', time: '21:06' }, + { type: 'event', kind: 'rejected', icon: 'phone-off', text: 'Anruf abgelehnt', time: '21:06' }, + { type: 'message', from: 'me', text: 'sry war afk', time: '21:09', reactions: [{emoji: '😅', count: 2}, {emoji: '❤️', count: 1, mine: true}] }, + { type: 'media', from: 'me', filename: 'IMG_4120.jpg', size: '2.4 MB', label: '[ PLACEHOLDER IMAGE ]', time: '21:10' }, + { type: 'message', from: 'them', text: 'pushhh sick', time: '21:12' }, + { type: 'message', from: 'me', text: 'Hallo', time: '21:13', read: true }, + { type: 'typing', from: 'them' }, +]; + +Object.assign(window, { CHATS, MESSAGES }); diff --git a/design_handoff_chatapp/components/icons.jsx b/design_handoff_chatapp/components/icons.jsx new file mode 100644 index 0000000..d9cc71a --- /dev/null +++ b/design_handoff_chatapp/components/icons.jsx @@ -0,0 +1,87 @@ +// Shared SVG icon components +const Icon = { + Logo: () => ( + + + + + + ), + Chat: () => ( + + ), + Friends: () => ( + + ), + Settings: () => ( + + ), + Shield: () => ( + + ), + Phone: () => ( + + ), + PhoneOff: () => ( + + ), + Video: () => ( + + ), + Search: () => ( + + ), + Plus: () => ( + + ), + Send: () => ( + + ), + AddUser: () => ( + + ), + Chevron: () => ( + + ), + Paperclip: () => ( + + ), + Smile: () => ( + + ), + Mic: () => ( + + ), + Sun: () => ( + + ), + Moon: () => ( + + ), + MicOff: () => ( + + ), + Monitor: () => ( + + ), + Lock: () => ( + + ), + Crown: () => ( + + ), + Grid: () => ( + + ), + Focus: () => ( + + ), + Maximize: () => ( + + ), + Minimize: () => ( + + ), +}; + +Object.assign(window, { Icon }); diff --git a/design_handoff_chatapp/screenshots/01-chat-light.png b/design_handoff_chatapp/screenshots/01-chat-light.png new file mode 100644 index 0000000..7e947b0 Binary files /dev/null and b/design_handoff_chatapp/screenshots/01-chat-light.png differ diff --git a/design_handoff_chatapp/screenshots/02-chat-light-alt.png b/design_handoff_chatapp/screenshots/02-chat-light-alt.png new file mode 100644 index 0000000..7e947b0 Binary files /dev/null and b/design_handoff_chatapp/screenshots/02-chat-light-alt.png differ diff --git a/design_handoff_chatapp/screenshots/03-chat-dark.png b/design_handoff_chatapp/screenshots/03-chat-dark.png new file mode 100644 index 0000000..a999fc0 Binary files /dev/null and b/design_handoff_chatapp/screenshots/03-chat-dark.png differ diff --git a/design_handoff_chatapp/screenshots/04-incoming-dark.png b/design_handoff_chatapp/screenshots/04-incoming-dark.png new file mode 100644 index 0000000..8852c71 Binary files /dev/null and b/design_handoff_chatapp/screenshots/04-incoming-dark.png differ diff --git a/design_handoff_chatapp/screenshots/05-incall-grid-dark.png b/design_handoff_chatapp/screenshots/05-incall-grid-dark.png new file mode 100644 index 0000000..bacac80 Binary files /dev/null and b/design_handoff_chatapp/screenshots/05-incall-grid-dark.png differ diff --git a/design_handoff_chatapp/screenshots/06-incall-focus-dark.png b/design_handoff_chatapp/screenshots/06-incall-focus-dark.png new file mode 100644 index 0000000..a8cf2da Binary files /dev/null and b/design_handoff_chatapp/screenshots/06-incall-focus-dark.png differ diff --git a/design_handoff_chatapp/screenshots/07-incall-fullscreen-dark.png b/design_handoff_chatapp/screenshots/07-incall-fullscreen-dark.png new file mode 100644 index 0000000..51a6760 Binary files /dev/null and b/design_handoff_chatapp/screenshots/07-incall-fullscreen-dark.png differ diff --git a/design_handoff_chatapp/screenshots/08-incall-grid-back-dark.png b/design_handoff_chatapp/screenshots/08-incall-grid-back-dark.png new file mode 100644 index 0000000..bacac80 Binary files /dev/null and b/design_handoff_chatapp/screenshots/08-incall-grid-back-dark.png differ diff --git a/design_handoff_chatapp/screenshots/09-pip-dark.png b/design_handoff_chatapp/screenshots/09-pip-dark.png new file mode 100644 index 0000000..76790e1 Binary files /dev/null and b/design_handoff_chatapp/screenshots/09-pip-dark.png differ diff --git a/design_handoff_chatapp/screenshots/10-chat-light-back.png b/design_handoff_chatapp/screenshots/10-chat-light-back.png new file mode 100644 index 0000000..7e947b0 Binary files /dev/null and b/design_handoff_chatapp/screenshots/10-chat-light-back.png differ diff --git a/design_handoff_chatapp/screenshots/11-incall-light.png b/design_handoff_chatapp/screenshots/11-incall-light.png new file mode 100644 index 0000000..99ba00d Binary files /dev/null and b/design_handoff_chatapp/screenshots/11-incall-light.png differ diff --git a/design_handoff_chatapp/styles/base.css b/design_handoff_chatapp/styles/base.css new file mode 100644 index 0000000..85ed306 --- /dev/null +++ b/design_handoff_chatapp/styles/base.css @@ -0,0 +1,459 @@ +/* ================= BASE ================= */ +* { box-sizing: border-box; margin: 0; padding: 0; } + +html, body { + width: 100%; + min-height: 100vh; + overflow-x: hidden; +} + +body { + font-family: var(--font-body, 'Inter', system-ui, sans-serif); + background: var(--bg, #0e0e12); + color: var(--fg, #eaeaea); + -webkit-font-smoothing: antialiased; + transition: background 0.3s ease; +} + +button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; } +input, textarea { font-family: inherit; } + +/* Variant switcher — top fixed */ +.variant-switcher { + position: fixed; + top: 12px; left: 50%; transform: translateX(-50%); + z-index: 100; + display: flex; gap: 6px; + padding: 6px; + background: rgba(20,20,24,0.85); + backdrop-filter: blur(20px); + border: 1px solid rgba(255,255,255,0.08); + border-radius: 14px; + box-shadow: 0 10px 40px rgba(0,0,0,0.5); +} +.variant-switcher button { + padding: 8px 14px; + font-size: 12px; + font-weight: 500; + color: rgba(255,255,255,0.6); + border-radius: 9px; + transition: all 0.2s; + white-space: nowrap; + font-family: 'Inter', system-ui, sans-serif; +} +.variant-switcher button:hover { color: #fff; background: rgba(255,255,255,0.05); } +.variant-switcher button.active { + color: #fff; + background: rgba(255,255,255,0.12); +} + +.variant-container { + padding-top: 72px; + min-height: 100vh; +} + +/* Variant wrapper */ +.variant { + display: none; + width: 100%; +} +.variant.active { display: block; } + +/* Device frame — desktop window */ +.app-window { + width: min(1320px, 96vw); + margin: 0 auto 60px; + border-radius: 16px; + overflow: hidden; + box-shadow: 0 30px 80px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.05); + height: 820px; + display: flex; + flex-direction: column; +} + +.window-bar { + height: 38px; + flex-shrink: 0; + display: flex; + align-items: center; + padding: 0 14px; + gap: 8px; +} +.window-bar .dots { display: flex; gap: 7px; } +.window-bar .dot { width: 12px; height: 12px; border-radius: 50%; } +.window-bar .title { + flex: 1; text-align: center; font-size: 12px; + letter-spacing: 0.02em; +} + +.app-body { + flex: 1; + display: flex; + flex-direction: column; + overflow: hidden; +} + +.top-nav { + height: 56px; + display: flex; + align-items: center; + padding: 0 20px; + gap: 20px; + flex-shrink: 0; +} + +.nav-brand { + display: flex; align-items: center; gap: 10px; + font-weight: 700; + letter-spacing: -0.02em; +} + +.nav-tabs { + display: flex; + gap: 4px; + flex: 1; + margin-left: 20px; +} +.nav-tab { + padding: 8px 14px; + font-size: 13px; + border-radius: 8px; + display: flex; align-items: center; gap: 8px; + transition: all 0.15s; +} + +.nav-user { + display: flex; + align-items: center; + gap: 10px; + padding: 4px 10px 4px 4px; + border-radius: 999px; +} + +.main-area { + flex: 1; + display: grid; + grid-template-columns: 320px 1fr; + overflow: hidden; + min-height: 0; +} + +/* Chat list */ +.chat-list { + display: flex; + flex-direction: column; + overflow: hidden; +} +.chat-list-header { + padding: 16px 18px; + display: flex; + justify-content: space-between; + align-items: center; +} +.chat-list-title { font-weight: 600; font-size: 14px; letter-spacing: 0.01em; } +.chat-search { + margin: 0 14px 10px; + padding: 9px 12px; + border-radius: 10px; + font-size: 13px; + outline: none; + border: none; +} +.chat-items { flex: 1; overflow-y: auto; padding: 4px 10px; } +.chat-item { + display: flex; align-items: center; gap: 12px; + padding: 10px 12px; + border-radius: 10px; + cursor: pointer; + margin-bottom: 2px; + transition: background 0.15s; +} +.chat-item-body { flex: 1; min-width: 0; } +.chat-item-name { font-weight: 600; font-size: 14px; display: flex; justify-content: space-between; align-items: center; } +.chat-item-preview { + font-size: 12px; + opacity: 0.6; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + margin-top: 2px; +} +.chat-item-time { font-size: 10px; opacity: 0.5; font-weight: 400; } +.unread-dot { + width: 8px; height: 8px; border-radius: 50%; + margin-left: 6px; + flex-shrink: 0; +} + +/* Avatar */ +.avatar { + width: 38px; height: 38px; + border-radius: 50%; + display: flex; align-items: center; justify-content: center; + font-weight: 600; + font-size: 14px; + flex-shrink: 0; + position: relative; +} +.avatar.sm { width: 28px; height: 28px; font-size: 11px; } +.avatar.lg { width: 44px; height: 44px; font-size: 16px; } + +.presence { + position: absolute; + bottom: -1px; right: -1px; + width: 12px; height: 12px; + border-radius: 50%; + border: 2px solid var(--bg, #0e0e12); +} +.presence.online { background: #22c55e; } +.presence.idle { background: #f59e0b; } +.presence.dnd { background: #ef4444; } +.presence.offline { background: #71717a; } + +/* Chat area */ +.chat-area { + display: flex; + flex-direction: column; + overflow: hidden; + min-width: 0; +} + +.chat-header { + height: 64px; + padding: 0 22px; + display: flex; + align-items: center; + gap: 14px; + flex-shrink: 0; +} +.chat-header-info { flex: 1; min-width: 0; } +.chat-header-name { font-weight: 600; font-size: 15px; } +.chat-header-status { font-size: 11px; opacity: 0.6; margin-top: 2px; } +.chat-header-actions { display: flex; gap: 4px; } +.icon-btn { + width: 34px; height: 34px; + border-radius: 9px; + display: flex; align-items: center; justify-content: center; + transition: background 0.15s; +} + +.messages { + flex: 1; + overflow-y: auto; + padding: 20px 26px; + display: flex; + flex-direction: column; + gap: 4px; +} + +.message-row { + display: flex; + gap: 8px; + align-items: flex-end; + margin-bottom: 14px; + width: 100%; +} +.message-row.me { justify-content: flex-end; } +.message-row.them { justify-content: flex-start; } +.message-avatar-slot { + width: 28px; + flex-shrink: 0; +} +.message-row .message-group { + margin-bottom: 0; + min-width: 0; + max-width: calc(100% - 40px); + flex: 1 1 auto; + align-items: flex-start; +} +.message-row.me .message-group { align-items: flex-end; } + +.message-row .bubble { max-width: 100%; width: fit-content; } +.message-row.me .bubble { margin-left: auto; } + +.message-group { display: flex; flex-direction: column; gap: 2px; margin-bottom: 14px; } +.message-group.me { align-items: flex-end; } +.message-group.them { align-items: flex-start; } +.message-sender { + font-size: 11px; + font-weight: 600; + margin-bottom: 4px; + opacity: 0.7; + padding: 0 4px; +} + +.bubble { + max-width: 70%; + min-width: 60px; + padding: 10px 14px; + border-radius: 18px; + font-size: 14px; + line-height: 1.45; + position: relative; + word-wrap: break-word; + white-space: normal; +} +.bubble .ts { + font-size: 10px; + opacity: 0.5; + margin-top: 2px; + display: block; + white-space: nowrap; +} + +.reactions { + display: flex; + gap: 4px; + margin-top: 4px; + flex-wrap: wrap; +} +.reaction { + font-size: 11px; + padding: 3px 8px; + border-radius: 999px; + display: flex; align-items: center; gap: 4px; + cursor: pointer; + transition: all 0.15s; +} +.reaction .count { font-weight: 600; opacity: 0.8; } + +/* System events (calls etc) */ +.event-row { display: flex; justify-content: center; margin: 10px 0; } +.event-pill { + display: flex; align-items: center; gap: 8px; + padding: 6px 12px; + border-radius: 999px; + font-size: 11px; + font-weight: 500; + white-space: nowrap; +} +.event-pill svg { width: 12px; height: 12px; } + +/* Media preview */ +.media-preview { + width: 240px; + border-radius: 14px; + overflow: hidden; + position: relative; +} +.media-preview .media-image { + width: 100%; + aspect-ratio: 4/3; + background: repeating-linear-gradient( + 45deg, + rgba(255,255,255,0.04), + rgba(255,255,255,0.04) 10px, + rgba(255,255,255,0.07) 10px, + rgba(255,255,255,0.07) 20px + ); + display: flex; align-items: center; justify-content: center; + font-size: 10px; font-family: 'JetBrains Mono', monospace; opacity: 0.5; + letter-spacing: 0.1em; +} +.media-preview .media-meta { + padding: 10px 12px; + font-size: 11px; + display: flex; justify-content: space-between; + font-family: 'JetBrains Mono', monospace; + opacity: 0.7; +} + +/* Composer */ +.composer { + padding: 14px 20px 18px; + flex-shrink: 0; + display: flex; + align-items: center; + gap: 10px; +} +.composer-box { + flex: 1; + display: flex; + align-items: center; + gap: 8px; + padding: 4px 4px 4px 12px; + border-radius: 12px; + min-height: 44px; +} +.composer-box input { + flex: 1; + background: none; + border: none; + outline: none; + color: inherit; + font-size: 14px; + padding: 8px 0; +} +.composer-btn { + width: 36px; height: 36px; + border-radius: 9px; + display: flex; align-items: center; justify-content: center; + flex-shrink: 0; +} + +/* Incoming call overlay */ +.call-overlay { + position: absolute; + right: 24px; + bottom: 100px; + width: 300px; + border-radius: 16px; + padding: 16px; + display: flex; + align-items: center; + gap: 14px; + box-shadow: 0 20px 60px rgba(0,0,0,0.4); + animation: slideInCall 0.4s cubic-bezier(0.22, 1, 0.36, 1); +} +@keyframes slideInCall { + from { transform: translateX(120%); opacity: 0; } + to { transform: translateX(0); opacity: 1; } +} +.call-info { flex: 1; min-width: 0; } +.call-name { font-weight: 600; font-size: 14px; } +.call-sub { font-size: 11px; opacity: 0.7; margin-top: 2px; } +.call-actions { display: flex; gap: 6px; } +.call-btn { + width: 36px; height: 36px; + border-radius: 50%; + display: flex; align-items: center; justify-content: center; + color: white; +} +.call-btn.accept { background: #22c55e; } +.call-btn.decline { background: #ef4444; } + +/* Profile hover card */ +.profile-card { + position: absolute; + z-index: 10; + width: 280px; + border-radius: 14px; + overflow: hidden; + box-shadow: 0 20px 50px rgba(0,0,0,0.4); +} +.profile-card-banner { height: 64px; } +.profile-card-body { padding: 14px; margin-top: -20px; position: relative; } +.profile-card-avatar { + width: 60px; height: 60px; + border-radius: 50%; + border: 4px solid var(--bg); + display: flex; align-items: center; justify-content: center; + font-weight: 700; + font-size: 22px; +} +.profile-card-name { font-weight: 700; font-size: 16px; margin-top: 10px; } +.profile-card-handle { font-size: 12px; opacity: 0.6; } +.profile-card-meta { + margin-top: 10px; + padding-top: 10px; + border-top: 1px solid rgba(255,255,255,0.08); + font-size: 11px; + display: flex; flex-direction: column; gap: 6px; + opacity: 0.8; +} + +/* Scrollbars */ +::-webkit-scrollbar { width: 6px; height: 6px; } +::-webkit-scrollbar-track { background: transparent; } +::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 3px; } +::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.2); } diff --git a/design_handoff_chatapp/styles/call.css b/design_handoff_chatapp/styles/call.css new file mode 100644 index 0000000..d7f6591 --- /dev/null +++ b/design_handoff_chatapp/styles/call.css @@ -0,0 +1,529 @@ +/* ============ CALL UI — Clean Rail matched ============ */ + +/* Discord-style call dock: call takes top portion, chat continues below */ +.call-dock { + flex-shrink: 0; + height: 50%; + max-height: 420px; + min-height: 280px; + border-bottom: 1px solid var(--line); + display: flex; + flex-direction: column; + overflow: hidden; + background: var(--bg-2); +} +.call-dock > .active-call { + flex: 1; + min-height: 0; +} +.call-dock .call-topbar { padding: 8px 14px; } +.call-dock .call-stage { padding: 10px; } +.call-dock .grid { gap: 8px; } +.call-dock .participant-tile { border-radius: 10px; } +.call-dock .audio-ring .avatar.lg { width: 52px; height: 52px; font-size: 20px; } +.call-dock .participant-meta { padding: 4px 8px; font-size: 11px; bottom: 6px; left: 6px; right: 6px; } +.call-dock .participant-name { font-size: 11px; } +.call-dock .pi { width: 18px; height: 18px; } +/* When docked, compact the controls */ +.call-dock .call-controls { padding: 8px; gap: 8px; } +.call-dock .cc-btn { width: 36px; height: 36px; border-radius: 10px; } +.call-dock .cc-btn.hangup { width: 54px; } +.call-dock .ss-content { padding: 8px; gap: 4px; } +.call-dock .ss-line { height: 4px; } +.call-dock .ss-block { height: 20px; } +.call-dock .ss-badge { font-size: 9px; padding: 3px 7px; } + +/* Screen switcher pill (top-right of window) */ +.screen-switcher { + position: absolute; + top: 52px; + right: 20px; + z-index: 50; + display: flex; + gap: 4px; + padding: 4px; + background: var(--bg-2); + border: 1px solid var(--line); + border-radius: 10px; + font-size: 11px; +} +.screen-switcher button { + padding: 6px 10px; + border-radius: 7px; + color: var(--fg-muted); + font-weight: 500; +} +.screen-switcher button.active { background: var(--accent); color: #fff; } + +/* Call stage overlay */ +.call-screen { + position: absolute; + inset: 38px 0 0 0; /* below window bar */ + background: var(--bg); + display: flex; + flex-direction: column; + overflow: hidden; +} + +/* === Incoming Call === */ +.incoming-call { + flex: 1; + display: flex; + align-items: center; + justify-content: center; + background: + radial-gradient(circle at 30% 20%, rgba(79,70,229,0.15), transparent 50%), + radial-gradient(circle at 70% 80%, rgba(109,115,255,0.1), transparent 50%), + var(--bg); +} +.incoming-card { + width: 420px; + padding: 40px 32px 28px; + background: var(--bg-3); + border: 1px solid var(--line); + border-radius: 24px; + text-align: center; + box-shadow: 0 20px 60px rgba(0,0,0,0.1); +} +.variant-clean.dark .incoming-card { box-shadow: 0 20px 60px rgba(0,0,0,0.5); } +.incoming-ringing { + font-size: 12px; + text-transform: uppercase; + letter-spacing: 0.12em; + color: var(--fg-muted); + font-weight: 600; +} +.incoming-avatar { + margin: 22px auto 18px; + width: 112px; height: 112px; + position: relative; + display: flex; align-items: center; justify-content: center; +} +.incoming-avatar .avatar.lg { + width: 96px; height: 96px; + font-size: 40px; + font-weight: 700; + border: 3px solid var(--bg-3); +} +.pulse-ring { + position: absolute; + inset: 0; + border: 2px solid var(--accent); + border-radius: 50%; + opacity: 0; + animation: pulseRing 2s ease-out infinite; +} +.pulse-ring.d2 { animation-delay: 1s; } +@keyframes pulseRing { + 0% { transform: scale(0.85); opacity: 0.6; } + 100% { transform: scale(1.25); opacity: 0; } +} +.incoming-name { + font-size: 24px; + font-weight: 700; + font-family: 'Outfit', 'Inter', sans-serif; + letter-spacing: -0.02em; +} +.incoming-sub { + margin-top: 6px; + font-size: 12px; + color: var(--fg-muted); + display: flex; align-items: center; justify-content: center; gap: 6px; +} +.incoming-actions { + margin-top: 28px; + display: flex; + gap: 12px; + justify-content: center; +} +.incoming-btn { + flex: 1; + padding: 14px 20px; + border-radius: 14px; + font-size: 14px; + font-weight: 600; + display: flex; + align-items: center; + justify-content: center; + gap: 8px; + transition: all 0.15s; +} +.incoming-btn.decline { + background: transparent; + color: #dc2626; + border: 1px solid rgba(220,38,38,0.3); +} +.variant-clean.dark .incoming-btn.decline { color: #fb7185; border-color: rgba(251,113,133,0.3); } +.incoming-btn.decline:hover { background: rgba(220,38,38,0.08); } +.incoming-btn.accept { + background: #16a34a; + color: #fff; + box-shadow: 0 4px 14px rgba(22,163,74,0.3); +} +.incoming-btn.accept:hover { background: #15803d; } + +/* === Active Call === */ +.active-call { + flex: 1; + display: flex; + flex-direction: column; + overflow: hidden; + background: linear-gradient(180deg, var(--bg-2), var(--bg)); +} +.call-topbar { + padding: 14px 20px; + display: flex; + justify-content: space-between; + align-items: center; + border-bottom: 1px solid var(--line); + background: var(--bg-3); +} +.call-topbar-left { display: flex; flex-direction: column; gap: 2px; } +.call-title { + display: flex; align-items: center; gap: 8px; + font-weight: 600; font-size: 14px; +} +.call-dot { opacity: 0.4; } +.call-duration { font-variant-numeric: tabular-nums; color: var(--fg-muted); font-size: 13px; } +.call-e2ee { + display: flex; align-items: center; gap: 5px; + font-size: 11px; color: #16a34a; font-weight: 500; +} +.variant-clean.dark .call-e2ee { color: #4ade80; } +.call-topbar-right { display: flex; gap: 4px; } + +.call-stage { + flex: 1; + padding: 16px; + overflow: hidden; + display: flex; +} + +/* Participant tiles */ +.participant-tile { + position: relative; + background: var(--bg-3); + border: 1px solid var(--line); + border-radius: 14px; + overflow: hidden; + cursor: pointer; + transition: all 0.2s; + display: flex; + flex-direction: column; +} +.participant-tile:hover { border-color: var(--accent); } +.participant-tile.speaking { border-color: #16a34a; box-shadow: 0 0 0 2px rgba(22,163,74,0.25); } +.participant-tile.focused { border-color: var(--accent); } +.participant-tile.small { min-width: 140px; } + +.participant-audio, .participant-video { + flex: 1; + display: flex; + align-items: center; + justify-content: center; + min-height: 0; + overflow: hidden; +} +.audio-ring { + position: relative; + display: flex; + align-items: center; + justify-content: center; +} +.audio-ring .avatar.lg { + width: 72px; height: 72px; + font-size: 28px; + font-weight: 700; +} +.participant-tile.small .audio-ring .avatar.lg { width: 44px; height: 44px; font-size: 18px; } +.audio-ring.pulse::before { + content: ''; + position: absolute; + inset: -6px; + border-radius: 50%; + border: 2px solid #22c55e; + animation: audioPulse 1.3s ease-out infinite; +} +@keyframes audioPulse { + 0% { transform: scale(1); opacity: 0.8; } + 100% { transform: scale(1.3); opacity: 0; } +} + +.video-stub { + width: 100%; height: 100%; + background: + radial-gradient(circle at 30% 40%, rgba(109,115,255,0.2), transparent 60%), + linear-gradient(135deg, #1a1a24, #0A0A0F); + display: flex; + align-items: center; + justify-content: center; +} +.variant-clean:not(.dark) .video-stub { background: linear-gradient(135deg, #e0e7ff, #c7d2fe); } + +/* Screenshare stub */ +.screenshare-stub { + width: 100%; height: 100%; + position: relative; + background: #0A0A0F; + padding: 12px; + display: flex; + align-items: center; + justify-content: center; +} +.variant-clean:not(.dark) .screenshare-stub { background: #111118; } +.ss-window { + width: 90%; height: 85%; + background: #1a1a24; + border-radius: 8px; + overflow: hidden; + border: 1px solid rgba(255,255,255,0.06); +} +.ss-chrome { + height: 20px; + background: #252533; + display: flex; + align-items: center; + padding: 0 8px; + gap: 4px; +} +.ss-chrome span { width: 6px; height: 6px; border-radius: 50%; background: #3A3A4D; } +.ss-content { padding: 14px; display: flex; flex-direction: column; gap: 8px; } +.ss-line { height: 6px; background: #3A3A4D; border-radius: 3px; } +.ss-block { height: 40px; background: rgba(109,115,255,0.25); border-radius: 4px; margin: 4px 0; } +.participant-tile.small .ss-content { padding: 6px; gap: 3px; } +.participant-tile.small .ss-line { height: 3px; } +.participant-tile.small .ss-block { height: 14px; } +.ss-badge { + position: absolute; + top: 12px; left: 12px; + padding: 4px 10px; + background: rgba(0,0,0,0.6); + backdrop-filter: blur(8px); + color: #fff; + border-radius: 8px; + font-size: 10px; + font-weight: 500; + display: flex; align-items: center; gap: 5px; +} +.participant-tile.small .ss-badge { display: none; } + +.participant-meta { + position: absolute; + bottom: 8px; left: 8px; right: 8px; + display: flex; + justify-content: space-between; + align-items: center; + gap: 8px; + padding: 6px 10px; + background: rgba(0,0,0,0.55); + backdrop-filter: blur(10px); + border-radius: 8px; + color: #fff; +} +.participant-tile.small .participant-meta { padding: 4px 8px; font-size: 10px; } +.participant-name { + display: flex; align-items: center; gap: 5px; + font-size: 12px; + font-weight: 600; + min-width: 0; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} +.e2ee-dot { opacity: 0.7; display: flex; } +.participant-icons { display: flex; gap: 4px; } +.pi { + width: 20px; height: 20px; + border-radius: 6px; + display: flex; align-items: center; justify-content: center; +} +.pi.muted { background: rgba(220,38,38,0.8); } +.pi.sharing { background: rgba(34,197,94,0.8); } + +/* Grid layouts */ +.grid { + display: grid; + gap: 10px; + width: 100%; height: 100%; +} +.grid-1 { grid-template-columns: 1fr; } +.grid-2 { grid-template-columns: 1fr 1fr; } +.grid-3 { grid-template-columns: repeat(3, 1fr); } +.grid-4 { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); } +.grid-5, .grid-6 { grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); } + +/* Focus layout */ +.focus-layout { + width: 100%; height: 100%; + display: flex; + flex-direction: column; + gap: 10px; +} +.focus-main { flex: 1; min-height: 0; } +.focus-main .participant-tile { height: 100%; } +.focus-strip { + height: 110px; + display: flex; + gap: 10px; + overflow-x: auto; +} +.focus-strip .participant-tile { min-width: 160px; height: 100%; } + +/* Fullscreen layout (hides topbar, pure cinema) */ +.active-call.mode-fullscreen .call-topbar { display: none; } +.active-call.mode-fullscreen .call-stage { padding: 0; position: relative; } +.fullscreen-layout { + width: 100%; height: 100%; + position: relative; +} +.fullscreen-layout > .participant-tile { width: 100%; height: 100%; border-radius: 0; border: none; } +.fs-strip { + position: absolute; + bottom: 90px; + right: 16px; + display: flex; + flex-direction: column; + gap: 8px; + width: 180px; +} +.fs-strip .participant-tile { height: 100px; backdrop-filter: blur(20px); background: rgba(0,0,0,0.4); } + +/* Call controls bar */ +.call-controls { + padding: 16px; + display: flex; + justify-content: center; + gap: 10px; + background: var(--bg-3); + border-top: 1px solid var(--line); +} +.active-call.mode-fullscreen .call-controls { + position: absolute; + bottom: 16px; left: 50%; transform: translateX(-50%); + background: rgba(10,10,15,0.7); + backdrop-filter: blur(20px); + border: 1px solid rgba(255,255,255,0.1); + border-radius: 18px; + padding: 10px; +} +.cc-btn { + width: 48px; height: 48px; + border-radius: 14px; + background: var(--bg-2); + color: var(--fg); + display: flex; align-items: center; justify-content: center; + transition: all 0.15s; + border: 1px solid var(--line); +} +.cc-btn:hover { background: var(--bg); transform: translateY(-1px); } +.cc-btn.sm { width: 32px; height: 32px; border-radius: 8px; } +.cc-btn.active-brand { background: var(--accent); color: #fff; border-color: var(--accent); } +.cc-btn.active-danger { background: #dc2626; color: #fff; border-color: #dc2626; } +.cc-btn.hangup { background: #dc2626; color: #fff; border-color: #dc2626; width: 72px; } +.cc-btn.hangup:hover { background: #b91c1c; } + +.active-call.mode-fullscreen .cc-btn { background: rgba(255,255,255,0.08); color: #fff; border-color: rgba(255,255,255,0.1); } +.active-call.mode-fullscreen .cc-btn.active-brand { background: var(--accent); border-color: var(--accent); } +.active-call.mode-fullscreen .cc-btn.active-danger { background: #dc2626; border-color: #dc2626; } +.active-call.mode-fullscreen .cc-btn.hangup { background: #dc2626; border-color: #dc2626; } + +/* Exit fullscreen button */ +.fs-exit { + position: absolute; + top: 16px; + right: 16px; + z-index: 10; + padding: 8px 14px; + background: rgba(10,10,15,0.7); + backdrop-filter: blur(20px); + border: 1px solid rgba(255,255,255,0.15); + border-radius: 10px; + color: #fff; + font-size: 12px; + font-weight: 500; + display: flex; + align-items: center; + gap: 6px; + transition: all 0.15s; +} +.fs-exit:hover { background: rgba(10,10,15,0.9); transform: translateY(-1px); } + +/* Fullscreen hint — subtle, fades in then out */ +.fs-hint { + position: absolute; + top: 20px; + left: 50%; + transform: translateX(-50%); + padding: 6px 14px; + background: rgba(10,10,15,0.6); + backdrop-filter: blur(16px); + border: 1px solid rgba(255,255,255,0.08); + border-radius: 8px; + color: rgba(255,255,255,0.7); + font-size: 11px; + font-weight: 500; + letter-spacing: 0.02em; + z-index: 10; + animation: fsHintFade 3.5s ease-out forwards; + pointer-events: none; +} +@keyframes fsHintFade { + 0% { opacity: 0; transform: translate(-50%, -6px); } + 15%, 75% { opacity: 1; transform: translate(-50%, 0); } + 100% { opacity: 0; transform: translate(-50%, -6px); } +} + +/* PiP in chat view */ +.pip-call { + position: absolute; + bottom: 82px; right: 20px; + width: 260px; + padding: 10px; + display: flex; + align-items: center; + gap: 10px; + background: var(--bg-3); + border: 1px solid var(--accent); + border-radius: 14px; + box-shadow: 0 12px 40px rgba(0,0,0,0.2), 0 0 0 3px rgba(79,70,229,0.15); + cursor: pointer; + z-index: 30; + animation: slideInCall 0.4s cubic-bezier(0.22,1,0.36,1); + transition: transform 0.15s; +} +.pip-call:hover { transform: translateY(-2px); } +.pip-preview { + width: 44px; height: 44px; + border-radius: 10px; + background: var(--bg-2); + display: flex; align-items: center; justify-content: center; + overflow: hidden; +} +.pip-preview .ss-window.mini { + width: 36px; height: 28px; + background: #1a1a24; + border-radius: 4px; +} +.pip-info { flex: 1; min-width: 0; } +.pip-title { font-weight: 600; font-size: 13px; } +.pip-sub { + font-size: 11px; color: var(--fg-muted); + margin-top: 2px; + display: flex; align-items: center; gap: 5px; +} +.live-dot { + width: 6px; height: 6px; border-radius: 50%; + background: #ef4444; + animation: liveDotPulse 1.5s ease-in-out infinite; +} +@keyframes liveDotPulse { + 0%, 100% { opacity: 1; } + 50% { opacity: 0.4; } +} +.pip-hangup { + width: 32px; height: 32px; + border-radius: 50%; + background: #dc2626; + color: #fff; + display: flex; align-items: center; justify-content: center; +} diff --git a/design_handoff_chatapp/styles/rail.css b/design_handoff_chatapp/styles/rail.css new file mode 100644 index 0000000..588afb0 --- /dev/null +++ b/design_handoff_chatapp/styles/rail.css @@ -0,0 +1,53 @@ +/* Rail layout — Discord-style icon sidebar */ +.rail-layout { + flex: 1; + display: grid; + grid-template-columns: 64px 280px 1fr; + overflow: hidden; + min-height: 0; +} +.icon-rail { + display: flex; + flex-direction: column; + align-items: center; + padding: 12px 0; + gap: 6px; +} +.rail-brand { + width: 44px; height: 44px; + border-radius: 14px; + display: flex; align-items: center; justify-content: center; + background: var(--accent, #4F46E5); + color: #fff; + margin-bottom: 4px; +} +.rail-divider { width: 32px; height: 2px; background: rgba(128,128,128,0.2); border-radius: 1px; margin: 4px 0; } +.rail-btn { + width: 44px; height: 44px; + border-radius: 14px; + display: flex; align-items: center; justify-content: center; + color: var(--fg-muted); + position: relative; + transition: all 0.15s; +} +.rail-btn:hover { background: rgba(128,128,128,0.1); color: var(--fg); border-radius: 12px; } +.rail-btn.active { background: var(--accent); color: #fff; border-radius: 12px; } +.rail-pill { + position: absolute; + left: -12px; top: 50%; transform: translateY(-50%); + width: 4px; height: 24px; + background: var(--fg); + border-radius: 0 3px 3px 0; +} +.rail-chatlist { display: flex; flex-direction: column; } +.rail-chatlist .chat-items { flex: 1; } +.rail-user { + padding: 10px 12px; + display: flex; align-items: center; gap: 10px; + flex-shrink: 0; +} + +.variant-clean.layout-rail .icon-rail { background: var(--bg-2); border-right: 1px solid var(--line); } +.variant-clean.layout-rail .rail-chatlist { background: var(--bg-3); border-right: 1px solid var(--line); } +.variant-clean.layout-rail .rail-user { background: var(--bg-2); border-top: 1px solid var(--line); } +.variant-clean.layout-rail .rail-brand { background: var(--accent); color: #fff; } diff --git a/design_handoff_chatapp/styles/variants.css b/design_handoff_chatapp/styles/variants.css new file mode 100644 index 0000000..480dc43 --- /dev/null +++ b/design_handoff_chatapp/styles/variants.css @@ -0,0 +1,461 @@ +/* ================= VARIANT 1: CLEAN MINIMAL (Light) ================= */ +.variant-clean { + --bg: #fafaf9; + --bg-2: #f4f4f2; + --bg-3: #ffffff; + --fg: #0a0a0f; + --fg-muted: #737380; + --line: rgba(10,10,15,0.08); + --accent: #4F46E5; + --accent-fg: #ffffff; + background: var(--bg); + color: var(--fg); + font-family: 'Inter', system-ui, sans-serif; +} +.variant-clean .nav-brand { font-family: 'Outfit', 'Inter', sans-serif; font-weight: 700; letter-spacing: -0.02em; } + +/* Dark mode for Clean */ +.variant-clean.dark { + --bg: #050507; + --bg-2: #111118; + --bg-3: #0A0A0F; + --fg: #f4f4f5; + --fg-muted: #8a8a99; + --line: rgba(255,255,255,0.07); + --accent: #6D73FF; + --accent-fg: #ffffff; +} +.variant-clean.dark .app-window { background: var(--bg-3); box-shadow: 0 30px 80px rgba(0,0,0,0.5), 0 0 0 1px var(--line); } +.variant-clean.dark .avatar { background: #1A1A24; color: #DDE0FF; } +.variant-clean.dark .avatar[data-color="violet"] { background: #312E81; color: #C4B5FD; } +.variant-clean.dark .avatar[data-color="amber"] { background: #422e05; color: #fde68a; } +.variant-clean.dark .avatar[data-color="rose"] { background: #4a1d29; color: #fecdd3; } +.variant-clean.dark .avatar[data-color="teal"] { background: #134e4a; color: #99f6e4; } +.variant-clean.dark .bubble.them { border-color: rgba(255,255,255,0.1); } +.variant-clean.dark .bubble.me { background: var(--accent); color: #fff; } +.variant-clean.dark .nav-tab.active { background: var(--accent); } +.variant-clean.dark .reaction.mine { background: var(--accent); } +.variant-clean.dark .composer-btn { background: var(--accent); } +.variant-clean .app-window { background: var(--bg-3); box-shadow: 0 30px 80px rgba(0,0,0,0.08), 0 0 0 1px var(--line); } +.variant-clean .window-bar { background: var(--bg-2); border-bottom: 1px solid var(--line); } +.variant-clean .window-bar .title { color: var(--fg-muted); font-weight: 500; } +.variant-clean .top-nav { border-bottom: 1px solid var(--line); background: var(--bg-3); } +.variant-clean .nav-brand svg { color: #0a0a0a; } +.variant-clean .nav-tab { color: var(--fg-muted); } +.variant-clean .nav-tab:hover { background: var(--bg-2); color: var(--fg); } +.variant-clean .nav-tab.active { background: var(--accent); color: var(--accent-fg); } +.variant-clean .nav-user { border: 1px solid var(--line); } +.variant-clean .chat-list { border-right: 1px solid var(--line); background: var(--bg-3); } +.variant-clean .chat-list-header { border-bottom: 1px solid var(--line); } +.variant-clean .chat-search { background: var(--bg-2); color: var(--fg); } +.variant-clean .chat-item:hover { background: var(--bg-2); } +.variant-clean .chat-item.active { background: var(--bg-2); } +.variant-clean .avatar { background: #e5e5e5; color: #0a0a0a; } +.variant-clean .avatar[data-color="violet"] { background: #ddd6fe; color: #5b21b6; } +.variant-clean .avatar[data-color="amber"] { background: #fde68a; color: #78350f; } +.variant-clean .avatar[data-color="rose"] { background: #fecdd3; color: #881337; } +.variant-clean .avatar[data-color="teal"] { background: #99f6e4; color: #134e4a; } +.variant-clean .chat-header { border-bottom: 1px solid var(--line); } +.variant-clean .icon-btn { color: var(--fg-muted); } +.variant-clean .icon-btn:hover { background: var(--bg-2); color: var(--fg); } +.variant-clean .bubble.me { background: var(--accent); color: var(--accent-fg); border-radius: 18px 18px 4px 18px; } +.variant-clean .bubble.them { background: transparent; color: var(--fg); border: 1px solid var(--line); border-radius: 18px 18px 18px 4px; } +.variant-clean .reaction { background: var(--bg-2); border: 1px solid var(--line); } +.variant-clean .reaction.mine { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); } +.variant-clean .event-pill { background: var(--bg-2); color: var(--fg-muted); } +.variant-clean .composer { border-top: 1px solid var(--line); } +.variant-clean .composer-box { background: var(--bg-2); } +.variant-clean .composer-btn { background: var(--accent); color: var(--accent-fg); } +.variant-clean .presence { border-color: var(--bg-3); } + + +/* ================= VARIANT 2: PLAYFUL DISCORD-VIBES ================= */ +.variant-playful { + --bg: #1a1625; + --bg-2: #2a2338; + --bg-3: #221b30; + --fg: #f5f3ff; + --fg-muted: #9691b3; + --accent: #a78bfa; + --accent-2: #f472b6; + --accent-3: #60a5fa; + background: radial-gradient(ellipse at top left, #3d1a54 0%, #1a1625 50%); + color: var(--fg); + font-family: 'Plus Jakarta Sans', 'Inter', sans-serif; +} +.variant-playful .app-window { background: var(--bg-3); } +.variant-playful .window-bar { background: rgba(0,0,0,0.25); } +.variant-playful .window-bar .title { color: #fff; font-weight: 700; font-size: 13px; } +.variant-playful .top-nav { background: linear-gradient(90deg, #2a1a48 0%, #1a1625 100%); border-bottom: 1px solid rgba(255,255,255,0.05); } +.variant-playful .nav-brand { font-size: 18px; background: linear-gradient(135deg, #f472b6, #a78bfa); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } +.variant-playful .nav-tab { color: var(--fg-muted); font-weight: 600; } +.variant-playful .nav-tab:hover { background: rgba(255,255,255,0.06); color: #fff; } +.variant-playful .nav-tab.active { background: linear-gradient(135deg, #a78bfa, #f472b6); color: #fff; box-shadow: 0 4px 14px rgba(167,139,250,0.4); } +.variant-playful .nav-user { background: rgba(255,255,255,0.05); } +.variant-playful .chat-list { background: rgba(0,0,0,0.15); border-right: 1px solid rgba(255,255,255,0.04); } +.variant-playful .chat-search { background: rgba(0,0,0,0.3); color: #fff; } +.variant-playful .chat-item:hover { background: rgba(255,255,255,0.04); } +.variant-playful .chat-item.active { background: linear-gradient(90deg, rgba(167,139,250,0.2), rgba(244,114,182,0.1)); } +.variant-playful .avatar { background: linear-gradient(135deg, #a78bfa, #f472b6); color: #fff; font-weight: 800; } +.variant-playful .avatar[data-color="teal"] { background: linear-gradient(135deg, #34d399, #60a5fa); } +.variant-playful .avatar[data-color="amber"] { background: linear-gradient(135deg, #fbbf24, #f472b6); } +.variant-playful .avatar[data-color="rose"] { background: linear-gradient(135deg, #fb7185, #a78bfa); } +.variant-playful .avatar[data-color="violet"] { background: linear-gradient(135deg, #a78bfa, #60a5fa); } +.variant-playful .chat-header { background: rgba(0,0,0,0.2); border-bottom: 1px solid rgba(255,255,255,0.05); } +.variant-playful .icon-btn:hover { background: rgba(255,255,255,0.08); } +.variant-playful .messages { background: radial-gradient(ellipse at bottom right, rgba(244,114,182,0.06), transparent 50%); } +.variant-playful .bubble.me { background: linear-gradient(135deg, #a78bfa, #8b5cf6); color: #fff; border-radius: 20px 20px 4px 20px; box-shadow: 0 4px 14px rgba(167,139,250,0.25); } +.variant-playful .bubble.them { background: rgba(255,255,255,0.06); color: #fff; border-radius: 20px 20px 20px 4px; backdrop-filter: blur(10px); } +.variant-playful .reaction { background: rgba(255,255,255,0.08); } +.variant-playful .reaction.mine { background: rgba(167,139,250,0.3); border: 1px solid #a78bfa; } +.variant-playful .event-pill { background: rgba(52,211,153,0.15); color: #34d399; } +.variant-playful .event-pill.rejected { background: rgba(251,113,133,0.15); color: #fb7185; } +.variant-playful .composer { background: rgba(0,0,0,0.2); } +.variant-playful .composer-box { background: rgba(255,255,255,0.06); } +.variant-playful .composer-btn { background: linear-gradient(135deg, #a78bfa, #f472b6); color: #fff; box-shadow: 0 4px 14px rgba(167,139,250,0.4); } +.variant-playful .presence { border-color: var(--bg-3); } + + +/* ================= VARIANT 3: Y2K GLASSMORPHISM ================= */ +.variant-y2k { + --bg: #0a0a1f; + --fg: #f8fafc; + --fg-muted: rgba(248,250,252,0.6); + --accent: #c7d2fe; + color: var(--fg); + font-family: 'Space Grotesk', 'Inter', sans-serif; + background: + radial-gradient(ellipse 80% 50% at 20% 20%, rgba(168,85,247,0.4), transparent), + radial-gradient(ellipse 60% 40% at 80% 80%, rgba(59,130,246,0.35), transparent), + radial-gradient(ellipse 70% 60% at 50% 50%, rgba(236,72,153,0.2), transparent), + #0a0a1f; +} +.variant-y2k .app-window { + background: rgba(255,255,255,0.04); + backdrop-filter: blur(30px); + -webkit-backdrop-filter: blur(30px); + border: 1px solid rgba(255,255,255,0.12); + box-shadow: 0 30px 80px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.15); +} +.variant-y2k .window-bar { background: rgba(255,255,255,0.04); border-bottom: 1px solid rgba(255,255,255,0.08); } +.variant-y2k .window-bar .title { color: rgba(255,255,255,0.7); font-weight: 500; letter-spacing: 0.08em; font-size: 11px; text-transform: uppercase; } +.variant-y2k .top-nav { background: rgba(255,255,255,0.02); border-bottom: 1px solid rgba(255,255,255,0.08); } +.variant-y2k .nav-brand { font-weight: 700; letter-spacing: -0.03em; font-size: 18px; } +.variant-y2k .nav-tab { + color: var(--fg-muted); + font-weight: 500; + border: 1px solid transparent; +} +.variant-y2k .nav-tab:hover { background: rgba(255,255,255,0.06); color: #fff; border-color: rgba(255,255,255,0.1); } +.variant-y2k .nav-tab.active { + background: rgba(255,255,255,0.15); + color: #fff; + border-color: rgba(255,255,255,0.25); + backdrop-filter: blur(10px); + box-shadow: inset 0 1px 0 rgba(255,255,255,0.2); +} +.variant-y2k .nav-user { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); } +.variant-y2k .chat-list { background: rgba(255,255,255,0.02); border-right: 1px solid rgba(255,255,255,0.08); } +.variant-y2k .chat-search { background: rgba(255,255,255,0.06); color: #fff; border: 1px solid rgba(255,255,255,0.08); } +.variant-y2k .chat-item:hover { background: rgba(255,255,255,0.05); } +.variant-y2k .chat-item.active { + background: rgba(255,255,255,0.1); + border: 1px solid rgba(255,255,255,0.15); + box-shadow: inset 0 1px 0 rgba(255,255,255,0.1); +} +.variant-y2k .avatar { + background: linear-gradient(135deg, #e0e7ff, #c7d2fe); + color: #312e81; + border: 1px solid rgba(255,255,255,0.3); +} +.variant-y2k .avatar[data-color="violet"] { background: linear-gradient(135deg, #e9d5ff, #c4b5fd); color: #4c1d95; } +.variant-y2k .avatar[data-color="rose"] { background: linear-gradient(135deg, #fecdd3, #f9a8d4); color: #831843; } +.variant-y2k .avatar[data-color="teal"] { background: linear-gradient(135deg, #a7f3d0, #7dd3fc); color: #064e3b; } +.variant-y2k .avatar[data-color="amber"] { background: linear-gradient(135deg, #fde68a, #fdba74); color: #7c2d12; } +.variant-y2k .chat-header { background: rgba(255,255,255,0.02); border-bottom: 1px solid rgba(255,255,255,0.08); } +.variant-y2k .icon-btn:hover { background: rgba(255,255,255,0.08); } +.variant-y2k .bubble.me { + background: linear-gradient(135deg, rgba(199,210,254,0.9), rgba(196,181,253,0.8)); + color: #1e1b4b; + border-radius: 20px 20px 6px 20px; + backdrop-filter: blur(10px); + border: 1px solid rgba(255,255,255,0.3); + box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), 0 4px 14px rgba(124,58,237,0.2); +} +.variant-y2k .bubble.them { + background: rgba(255,255,255,0.08); + color: #fff; + border: 1px solid rgba(255,255,255,0.12); + border-radius: 20px 20px 20px 6px; + backdrop-filter: blur(20px); + box-shadow: inset 0 1px 0 rgba(255,255,255,0.1); +} +.variant-y2k .reaction { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.1); backdrop-filter: blur(10px); } +.variant-y2k .reaction.mine { background: rgba(199,210,254,0.25); border-color: rgba(199,210,254,0.5); } +.variant-y2k .event-pill { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.8); border: 1px solid rgba(255,255,255,0.1); backdrop-filter: blur(10px); } +.variant-y2k .event-pill.rejected { background: rgba(251,113,133,0.15); color: #fda4af; border-color: rgba(251,113,133,0.3); } +.variant-y2k .composer { background: rgba(255,255,255,0.02); border-top: 1px solid rgba(255,255,255,0.08); } +.variant-y2k .composer-box { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); backdrop-filter: blur(10px); } +.variant-y2k .composer-btn { background: linear-gradient(135deg, #e0e7ff, #c4b5fd); color: #312e81; border: 1px solid rgba(255,255,255,0.3); box-shadow: inset 0 1px 0 rgba(255,255,255,0.4); } +.variant-y2k .presence { border-color: #0a0a1f; } + + +/* ================= VARIANT 4: CYBERPUNK NEON ================= */ +.variant-cyber { + --bg: #05050a; + --fg: #e0e0e8; + --fg-muted: #6b7280; + --neon-cyan: #00f0ff; + --neon-magenta: #ff00aa; + --neon-lime: #b6ff3d; + color: var(--fg); + font-family: 'JetBrains Mono', 'Courier New', monospace; + background: + repeating-linear-gradient(0deg, transparent 0, transparent 2px, rgba(0,240,255,0.015) 2px, rgba(0,240,255,0.015) 4px), + radial-gradient(ellipse at center, #0c0c18 0%, #05050a 70%); +} +.variant-cyber .app-window { + background: #08080f; + border: 1px solid rgba(0,240,255,0.2); + box-shadow: 0 0 40px rgba(255,0,170,0.15), 0 0 80px rgba(0,240,255,0.08); +} +.variant-cyber .window-bar { background: #05050a; border-bottom: 1px solid rgba(0,240,255,0.15); } +.variant-cyber .window-bar .title { color: var(--neon-cyan); font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; } +.variant-cyber .window-bar .title::before { content: "// "; opacity: 0.5; } +.variant-cyber .top-nav { background: #05050a; border-bottom: 1px solid rgba(0,240,255,0.15); } +.variant-cyber .nav-brand { color: var(--neon-cyan); text-transform: uppercase; letter-spacing: 0.1em; font-size: 13px; text-shadow: 0 0 10px rgba(0,240,255,0.5); } +.variant-cyber .nav-tab { color: var(--fg-muted); text-transform: uppercase; letter-spacing: 0.1em; font-size: 11px; font-weight: 500; border: 1px solid transparent; } +.variant-cyber .nav-tab:hover { color: var(--neon-cyan); border-color: rgba(0,240,255,0.2); } +.variant-cyber .nav-tab.active { color: var(--neon-lime); border-color: var(--neon-lime); background: rgba(182,255,61,0.05); box-shadow: 0 0 10px rgba(182,255,61,0.2); } +.variant-cyber .nav-tab.active::before { content: "> "; } +.variant-cyber .nav-user { border: 1px solid rgba(0,240,255,0.15); } +.variant-cyber .chat-list { background: #05050a; border-right: 1px solid rgba(0,240,255,0.15); } +.variant-cyber .chat-list-title { color: var(--neon-cyan); text-transform: uppercase; letter-spacing: 0.15em; font-size: 11px; } +.variant-cyber .chat-list-title::before { content: "[ "; opacity: 0.5; } +.variant-cyber .chat-list-title::after { content: " ]"; opacity: 0.5; } +.variant-cyber .chat-search { background: #0c0c18; border: 1px solid rgba(0,240,255,0.15); color: var(--fg); } +.variant-cyber .chat-item:hover { background: rgba(0,240,255,0.04); } +.variant-cyber .chat-item.active { background: rgba(0,240,255,0.06); border-left: 2px solid var(--neon-cyan); padding-left: 10px; } +.variant-cyber .chat-item-name { color: var(--fg); } +.variant-cyber .avatar { + background: #0c0c18; + border: 1px solid var(--neon-cyan); + color: var(--neon-cyan); + border-radius: 4px; + font-family: 'JetBrains Mono', monospace; + text-shadow: 0 0 8px rgba(0,240,255,0.5); +} +.variant-cyber .avatar[data-color="violet"] { border-color: var(--neon-magenta); color: var(--neon-magenta); text-shadow: 0 0 8px rgba(255,0,170,0.5); } +.variant-cyber .avatar[data-color="amber"] { border-color: var(--neon-lime); color: var(--neon-lime); text-shadow: 0 0 8px rgba(182,255,61,0.5); } +.variant-cyber .avatar[data-color="rose"] { border-color: #ff5500; color: #ff5500; text-shadow: 0 0 8px rgba(255,85,0,0.5); } +.variant-cyber .avatar[data-color="teal"] { border-color: var(--neon-cyan); color: var(--neon-cyan); } +.variant-cyber .chat-header { background: #05050a; border-bottom: 1px solid rgba(0,240,255,0.15); } +.variant-cyber .chat-header-name { color: var(--neon-cyan); font-family: 'JetBrains Mono', monospace; } +.variant-cyber .chat-header-name::before { content: "@"; opacity: 0.5; } +.variant-cyber .icon-btn { color: var(--neon-cyan); } +.variant-cyber .icon-btn:hover { background: rgba(0,240,255,0.1); } +.variant-cyber .bubble.me { + background: transparent; + color: var(--neon-magenta); + border: 1px solid var(--neon-magenta); + border-radius: 4px; + box-shadow: 0 0 15px rgba(255,0,170,0.15), inset 0 0 15px rgba(255,0,170,0.05); + font-family: 'JetBrains Mono', monospace; + font-size: 13px; +} +.variant-cyber .bubble.them { + background: transparent; + color: var(--neon-cyan); + border: 1px solid var(--neon-cyan); + border-radius: 4px; + box-shadow: 0 0 15px rgba(0,240,255,0.15), inset 0 0 15px rgba(0,240,255,0.05); + font-family: 'JetBrains Mono', monospace; + font-size: 13px; +} +.variant-cyber .bubble .ts { color: rgba(255,255,255,0.4); font-size: 9px; letter-spacing: 0.1em; } +.variant-cyber .reaction { background: #0c0c18; border: 1px solid rgba(0,240,255,0.2); border-radius: 2px; color: var(--neon-lime); } +.variant-cyber .reaction.mine { border-color: var(--neon-lime); box-shadow: 0 0 10px rgba(182,255,61,0.2); } +.variant-cyber .event-pill { background: transparent; border: 1px dashed var(--neon-lime); color: var(--neon-lime); border-radius: 2px; text-transform: uppercase; letter-spacing: 0.1em; font-size: 10px; } +.variant-cyber .event-pill.rejected { border-color: var(--neon-magenta); color: var(--neon-magenta); } +.variant-cyber .composer { background: #05050a; border-top: 1px solid rgba(0,240,255,0.15); } +.variant-cyber .composer-box { background: #0c0c18; border: 1px solid rgba(0,240,255,0.2); border-radius: 4px; } +.variant-cyber .composer-box::before { content: ">"; color: var(--neon-lime); margin-right: 6px; font-weight: bold; } +.variant-cyber .composer-btn { background: var(--neon-lime); color: #05050a; border-radius: 4px; box-shadow: 0 0 15px rgba(182,255,61,0.3); } +.variant-cyber .presence { border-color: #08080f; } + + +/* ================= VARIANT 5: WARM SOFT ================= */ +.variant-warm { + --bg: #f7f2e9; + --bg-2: #efe6d4; + --bg-3: #fdfaf3; + --fg: #3d2e1f; + --fg-muted: #8a7560; + --accent: #c75d3a; + --accent-2: #e8a87c; + --line: rgba(61,46,31,0.1); + background: var(--bg); + color: var(--fg); + font-family: 'Inter', sans-serif; +} +.variant-warm .nav-brand { font-family: 'Fraunces', 'Playfair Display', serif; font-weight: 700; font-size: 20px; letter-spacing: -0.02em; } +.variant-warm .chat-header-name { font-family: 'Fraunces', 'Playfair Display', serif; font-size: 17px; } +.variant-warm .chat-list-title { font-family: 'Fraunces', serif; font-size: 16px; font-weight: 600; } +.variant-warm .app-window { background: var(--bg-3); box-shadow: 0 20px 60px rgba(61,46,31,0.12); border: 1px solid var(--line); } +.variant-warm .window-bar { background: var(--bg-2); border-bottom: 1px solid var(--line); } +.variant-warm .window-bar .title { color: var(--fg-muted); font-weight: 500; } +.variant-warm .top-nav { background: var(--bg-3); border-bottom: 1px solid var(--line); } +.variant-warm .nav-tab { color: var(--fg-muted); font-weight: 500; border-radius: 999px; } +.variant-warm .nav-tab:hover { background: var(--bg-2); color: var(--fg); } +.variant-warm .nav-tab.active { background: var(--accent); color: #fff; } +.variant-warm .nav-user { background: var(--bg-2); border-radius: 999px; } +.variant-warm .chat-list { background: var(--bg-2); } +.variant-warm .chat-search { background: var(--bg-3); border: 1px solid var(--line); color: var(--fg); border-radius: 999px; } +.variant-warm .chat-item { border-radius: 14px; } +.variant-warm .chat-item:hover { background: rgba(255,255,255,0.5); } +.variant-warm .chat-item.active { background: var(--bg-3); box-shadow: 0 2px 8px rgba(61,46,31,0.06); } +.variant-warm .avatar { background: #e8a87c; color: #7c3a1e; font-family: 'Fraunces', serif; font-weight: 700; } +.variant-warm .avatar[data-color="violet"] { background: #bfa4c9; color: #4a2a5c; } +.variant-warm .avatar[data-color="amber"] { background: #e8c87c; color: #5c3e1a; } +.variant-warm .avatar[data-color="rose"] { background: #e8a4a4; color: #5c1e1e; } +.variant-warm .avatar[data-color="teal"] { background: #a4c9bf; color: #1e4a3e; } +.variant-warm .chat-header { background: var(--bg-3); border-bottom: 1px solid var(--line); } +.variant-warm .icon-btn:hover { background: var(--bg-2); } +.variant-warm .messages { background: var(--bg-3); } +.variant-warm .bubble.me { background: var(--accent); color: #fff; border-radius: 20px 20px 6px 20px; } +.variant-warm .bubble.them { background: var(--bg-2); color: var(--fg); border-radius: 20px 20px 20px 6px; } +.variant-warm .reaction { background: var(--bg-2); border: 1px solid var(--line); } +.variant-warm .reaction.mine { background: var(--accent); color: #fff; } +.variant-warm .event-pill { background: var(--bg-2); color: var(--fg-muted); border: 1px solid var(--line); } +.variant-warm .event-pill.rejected { background: rgba(199,93,58,0.1); color: var(--accent); } +.variant-warm .composer { background: var(--bg-3); border-top: 1px solid var(--line); } +.variant-warm .composer-box { background: var(--bg-2); border-radius: 999px; padding-left: 16px; } +.variant-warm .composer-btn { background: var(--accent); color: #fff; border-radius: 50%; } +.variant-warm .presence { border-color: var(--bg-3); } + + +/* ================= VARIANT 6: BRUTAL GAMING ================= */ +.variant-brutal { + --bg: #0d0d0d; + --bg-2: #161616; + --bg-3: #1a1a1a; + --fg: #ffffff; + --fg-muted: #808080; + --lime: #d4ff3d; + --line: #2a2a2a; + background: var(--bg); + color: var(--fg); + font-family: 'Inter', sans-serif; +} +.variant-brutal .nav-brand { + font-family: 'Archivo Black', 'Inter', sans-serif; + font-weight: 900; + font-size: 22px; + text-transform: uppercase; + letter-spacing: -0.03em; +} +.variant-brutal .chat-header-name { font-weight: 800; font-size: 16px; text-transform: uppercase; letter-spacing: -0.01em; } +.variant-brutal .chat-list-title { font-weight: 900; font-size: 18px; text-transform: uppercase; letter-spacing: -0.02em; } +.variant-brutal .app-window { background: var(--bg); border: 2px solid var(--lime); border-radius: 0; box-shadow: 12px 12px 0 var(--lime); } +.variant-brutal .window-bar { background: var(--bg); border-bottom: 2px solid var(--lime); } +.variant-brutal .window-bar .title { color: var(--lime); font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; font-size: 11px; } +.variant-brutal .top-nav { background: var(--bg); border-bottom: 2px solid var(--line); } +.variant-brutal .nav-tab { color: var(--fg-muted); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; font-size: 12px; border-radius: 0; border: 2px solid transparent; } +.variant-brutal .nav-tab:hover { color: var(--fg); background: var(--bg-2); } +.variant-brutal .nav-tab.active { background: var(--lime); color: #000; } +.variant-brutal .nav-user { background: var(--bg-2); border: 2px solid var(--line); border-radius: 0; } +.variant-brutal .chat-list { background: var(--bg); border-right: 2px solid var(--line); } +.variant-brutal .chat-search { background: var(--bg-2); border: 2px solid var(--line); color: var(--fg); border-radius: 0; font-weight: 500; } +.variant-brutal .chat-item { border-radius: 0; border-left: 4px solid transparent; } +.variant-brutal .chat-item:hover { background: var(--bg-2); } +.variant-brutal .chat-item.active { background: var(--bg-2); border-left-color: var(--lime); } +.variant-brutal .chat-item-name { font-weight: 800; text-transform: uppercase; font-size: 13px; letter-spacing: -0.01em; } +.variant-brutal .avatar { background: var(--lime); color: #000; border-radius: 0; font-weight: 900; font-family: 'Archivo Black', sans-serif; } +.variant-brutal .avatar[data-color="violet"] { background: #a78bfa; } +.variant-brutal .avatar[data-color="amber"] { background: #fbbf24; } +.variant-brutal .avatar[data-color="rose"] { background: #fb7185; } +.variant-brutal .avatar[data-color="teal"] { background: #2dd4bf; } +.variant-brutal .chat-header { background: var(--bg); border-bottom: 2px solid var(--line); } +.variant-brutal .icon-btn { border-radius: 0; border: 2px solid var(--line); } +.variant-brutal .icon-btn:hover { background: var(--lime); color: #000; border-color: var(--lime); } +.variant-brutal .bubble.me { background: var(--lime); color: #000; border-radius: 0; font-weight: 600; border: 2px solid #000; box-shadow: 4px 4px 0 #fff; } +.variant-brutal .bubble.them { background: var(--fg); color: #000; border-radius: 0; font-weight: 600; border: 2px solid var(--fg); box-shadow: 4px 4px 0 var(--lime); } +.variant-brutal .bubble .ts { color: rgba(0,0,0,0.6); font-weight: 700; font-size: 10px; text-transform: uppercase; } +.variant-brutal .reaction { background: var(--bg-2); border: 2px solid var(--line); border-radius: 0; font-weight: 700; } +.variant-brutal .reaction.mine { background: var(--lime); color: #000; border-color: var(--lime); } +.variant-brutal .event-pill { background: var(--bg-2); border: 2px solid var(--line); border-radius: 0; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 800; font-size: 11px; } +.variant-brutal .event-pill.rejected { border-color: #fb7185; color: #fb7185; } +.variant-brutal .composer { background: var(--bg); border-top: 2px solid var(--line); } +.variant-brutal .composer-box { background: var(--bg-2); border: 2px solid var(--line); border-radius: 0; } +.variant-brutal .composer-btn { background: var(--lime); color: #000; border-radius: 0; font-weight: 900; } +.variant-brutal .presence { border-color: var(--bg); border-width: 3px; } + +/* Profile card & call overlay — inherit from variant */ +.variant-clean .profile-card { background: #fff; border: 1px solid var(--line); } +.variant-clean .profile-card-banner { background: linear-gradient(135deg, #e5e5e5, #d4d4d4); } +.variant-clean .profile-card-avatar { border-color: #fff; } +.variant-clean .profile-card-meta { border-top-color: var(--line); color: var(--fg-muted); } +.variant-clean .call-overlay { background: #fff; border: 1px solid var(--line); color: var(--fg); } + +.variant-playful .profile-card { background: linear-gradient(180deg, #2a1a48, #1a1625); border: 1px solid rgba(255,255,255,0.08); } +.variant-playful .profile-card-banner { background: linear-gradient(135deg, #a78bfa, #f472b6); } +.variant-playful .profile-card-avatar { border-color: #2a1a48; } +.variant-playful .call-overlay { background: linear-gradient(135deg, #2a1a48, #1a1625); border: 1px solid rgba(167,139,250,0.3); } + +.variant-y2k .profile-card { background: rgba(255,255,255,0.08); backdrop-filter: blur(30px); border: 1px solid rgba(255,255,255,0.15); } +.variant-y2k .profile-card-banner { background: linear-gradient(135deg, #c4b5fd, #f9a8d4); } +.variant-y2k .profile-card-avatar { border-color: #1a1a2e; } +.variant-y2k .call-overlay { background: rgba(255,255,255,0.08); backdrop-filter: blur(30px); border: 1px solid rgba(255,255,255,0.15); } + +.variant-cyber .profile-card { background: #0c0c18; border: 1px solid var(--neon-cyan); box-shadow: 0 0 30px rgba(0,240,255,0.2); } +.variant-cyber .profile-card-banner { background: repeating-linear-gradient(90deg, #00f0ff, #00f0ff 2px, transparent 2px, transparent 8px), linear-gradient(135deg, #ff00aa 0%, #00f0ff 100%); } +.variant-cyber .profile-card-avatar { border-color: #0c0c18; border-radius: 4px; } +.variant-cyber .call-overlay { background: #0c0c18; border: 1px solid var(--neon-lime); box-shadow: 0 0 30px rgba(182,255,61,0.2); } + +.variant-warm .profile-card { background: var(--bg-3); border: 1px solid var(--line); color: var(--fg); } +.variant-warm .profile-card-banner { background: linear-gradient(135deg, #e8a87c, #c75d3a); } +.variant-warm .profile-card-avatar { border-color: var(--bg-3); } +.variant-warm .profile-card-meta { border-top-color: var(--line); } +.variant-warm .call-overlay { background: var(--bg-3); border: 1px solid var(--line); color: var(--fg); } + +.variant-brutal .profile-card { background: var(--bg); border: 2px solid var(--lime); border-radius: 0; box-shadow: 8px 8px 0 var(--lime); } +.variant-brutal .profile-card-banner { background: var(--lime); } +.variant-brutal .profile-card-avatar { border-color: var(--bg); border-radius: 0; border-width: 3px; } +.variant-brutal .profile-card-meta { border-top-color: var(--line); } +.variant-brutal .call-overlay { background: var(--bg); border: 2px solid var(--lime); border-radius: 0; box-shadow: 6px 6px 0 var(--lime); } + + +/* Typing indicator */ +.typing { display: inline-flex; gap: 3px; padding: 4px 2px; } +.typing span { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.4; animation: typingDot 1.3s infinite; } +.typing span:nth-child(2) { animation-delay: 0.15s; } +.typing span:nth-child(3) { animation-delay: 0.3s; } +@keyframes typingDot { + 0%, 60%, 100% { transform: translateY(0); opacity: 0.4; } + 30% { transform: translateY(-4px); opacity: 1; } +} + +/* Tweaks panel */ +.tweaks-panel { + position: fixed; + bottom: 20px; + right: 20px; + width: 280px; + background: rgba(20,20,24,0.95); + backdrop-filter: blur(20px); + border: 1px solid rgba(255,255,255,0.1); + border-radius: 14px; + padding: 16px; + z-index: 200; + color: #fff; + font-family: 'Inter', system-ui, sans-serif; + box-shadow: 0 20px 50px rgba(0,0,0,0.5); + display: none; +} +.tweaks-panel.open { display: block; } +.tweaks-panel h3 { font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; opacity: 0.7; margin-bottom: 14px; font-weight: 600; } +.tweaks-row { margin-bottom: 12px; } +.tweaks-row label { display: block; font-size: 11px; opacity: 0.6; margin-bottom: 6px; } +.tweaks-row input[type="color"] { width: 100%; height: 34px; border-radius: 8px; background: transparent; border: 1px solid rgba(255,255,255,0.1); cursor: pointer; } +.tweaks-row input[type="range"] { width: 100%; } +.tweaks-row select { width: 100%; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); color: #fff; padding: 8px; border-radius: 8px; font-size: 12px; } diff --git a/packages/shared/src/chat/convKeys.ts b/packages/shared/src/chat/convKeys.ts index 28421b2..8b2b01b 100644 --- a/packages/shared/src/chat/convKeys.ts +++ b/packages/shared/src/chat/convKeys.ts @@ -126,9 +126,17 @@ async function fetchKeyBundle( }; } +// Strips the leading `\x` postgres bytea hex prefix so the RPC's +// `decode(text, 'hex')` accepts it. +function hexNoPrefix(bytes: Uint8Array): string { + return bytesToPgHex(bytes).slice(2); +} + // Bootstraps a brand-new conv-key, wrapping it for every member device that // currently exists (including the caller's own devices). Used the first time -// a conversation needs a key, or when rotation is requested. +// a conversation needs a key, or when rotation is requested. All inserts go +// through `share_conv_keys` (SECURITY DEFINER) — silently skips invalid +// recipients, no per-row 403 console spam. export async function bootstrapConvKey( client: AppSupabaseClient, conversationId: string, @@ -141,29 +149,23 @@ export async function bootstrapConvKey( throw new Error('cannot bootstrap conv key — no recipient devices'); } - const rows: Array<{ - conversation_id: string; - recipient_device_id: string; - key_version: number; - sender_device_id: string; - encrypted_key: string; - nonce: string; - }> = []; + const bundles: Array<{ recipient_device_id: string; encrypted_key: string; nonce: string }> = []; for (const r of recipients) { const wrapped = await wrapConvKeyForRecipient(convKey, r.publicKey, own.privateKey); - rows.push({ - conversation_id: conversationId, + bundles.push({ recipient_device_id: r.deviceId, - key_version: keyVersion, - sender_device_id: own.deviceId, - encrypted_key: bytesToPgHex(wrapped.ciphertext), - nonce: bytesToPgHex(wrapped.nonce), + encrypted_key: hexNoPrefix(wrapped.ciphertext), + nonce: hexNoPrefix(wrapped.nonce), }); } - const { error } = await rawFrom(client, 'conversation_keys').upsert(rows, { - onConflict: 'conversation_id,recipient_device_id,key_version', - ignoreDuplicates: true, + // eslint-disable-next-line @typescript-eslint/no-explicit-any + const rpc = (client as unknown as { rpc: (n: string, p: object) => Promise<{ error: any }> }).rpc; + const { error } = await rpc.call(client, 'share_conv_keys', { + p_conv_id: conversationId, + p_sender_device_id: own.deviceId, + p_key_version: keyVersion, + p_bundles: bundles, }); if (error) throw error; @@ -265,20 +267,20 @@ export async function shareConvKeyToDevice( recipientPublicKey, own.privateKey, ); - const { error } = await rawFrom(client, 'conversation_keys').upsert( - { - conversation_id: conversationId, - recipient_device_id: recipientDeviceId, - key_version: version, - sender_device_id: own.deviceId, - encrypted_key: bytesToPgHex(wrapped.ciphertext), - nonce: bytesToPgHex(wrapped.nonce), - }, - { - onConflict: 'conversation_id,recipient_device_id,key_version', - ignoreDuplicates: true, - }, - ); + // eslint-disable-next-line @typescript-eslint/no-explicit-any + const rpc = (client as unknown as { rpc: (n: string, p: object) => Promise<{ error: any }> }).rpc; + const { error } = await rpc.call(client, 'share_conv_keys', { + p_conv_id: conversationId, + p_sender_device_id: own.deviceId, + p_key_version: version, + p_bundles: [ + { + recipient_device_id: recipientDeviceId, + encrypted_key: hexNoPrefix(wrapped.ciphertext), + nonce: hexNoPrefix(wrapped.nonce), + }, + ], + }); if (error) throw error; } diff --git a/supabase/migrations/20260419000002_share_conv_key_rpc.sql b/supabase/migrations/20260419000002_share_conv_key_rpc.sql new file mode 100644 index 0000000..f1ef228 --- /dev/null +++ b/supabase/migrations/20260419000002_share_conv_key_rpc.sql @@ -0,0 +1,109 @@ +-- 1) Test-Daten-Wipe: alle conversation/message Daten weg, User+Devices+ +-- Friendships+Invites bleiben erhalten so dass bestehende Logins weiter +-- funktionieren. Cascade räumt mitlaufende rows (envelopes, attachments, +-- reactions, reads, conversation_keys, conversation_members). + +truncate + public.message_reactions, + public.message_reads, + public.message_attachments, + public.messages, + public.conversation_keys, + public.conversation_members, + public.conversations + restart identity cascade; + +-- 2) RPC: share conv-key bundles to multiple recipients atomically. +-- Runs as SECURITY DEFINER so RLS doesn't reject individual rows. The +-- function itself enforces the same invariants as the policy. This avoids +-- the per-row 403 console spam we got with direct inserts. + +create or replace function public.share_conv_keys( + p_conv_id uuid, + p_sender_device_id uuid, + p_key_version int, + p_bundles jsonb +) returns int +language plpgsql +security definer +set search_path = public +as $$ +declare + caller uuid := auth.uid(); + bundle jsonb; + recipient_user_id uuid; + inserted int := 0; + recipient_did uuid; + enc_key_hex text; + nonce_hex text; +begin + if caller is null then + raise exception 'not authenticated'; + end if; + + -- Caller must be an accepted member of the conversation. + if not exists ( + select 1 + from public.conversation_members + where conversation_id = p_conv_id + and user_id = caller + and accepted = true + ) then + raise exception 'caller is not an accepted member of %', p_conv_id; + end if; + + -- Sender device must belong to the caller. + if not exists ( + select 1 + from public.devices + where id = p_sender_device_id + and user_id = caller + ) then + raise exception 'sender_device % not owned by caller', p_sender_device_id; + end if; + + -- Iterate bundles and only insert ones whose recipient is a current + -- accepted member. Silently skip otherwise (no error → no 403 noise). + for bundle in + select * from jsonb_array_elements(p_bundles) + loop + recipient_did := (bundle->>'recipient_device_id')::uuid; + enc_key_hex := bundle->>'encrypted_key'; + nonce_hex := bundle->>'nonce'; + + select user_id + into recipient_user_id + from public.devices + where id = recipient_did; + if recipient_user_id is null then continue; end if; + + if not exists ( + select 1 + from public.conversation_members + where conversation_id = p_conv_id + and user_id = recipient_user_id + and accepted = true + ) then continue; end if; + + insert into public.conversation_keys + (conversation_id, recipient_device_id, key_version, + sender_device_id, encrypted_key, nonce) + values + (p_conv_id, recipient_did, p_key_version, + p_sender_device_id, + decode(enc_key_hex, 'hex'), + decode(nonce_hex, 'hex')) + on conflict (conversation_id, recipient_device_id, key_version) + do nothing; + + if found then + inserted := inserted + 1; + end if; + end loop; + + return inserted; +end; +$$; + +revoke execute on function public.share_conv_keys(uuid, uuid, int, jsonb) from public, anon; +grant execute on function public.share_conv_keys(uuid, uuid, int, jsonb) to authenticated; diff --git a/supabase/migrations/20260419000003_profile_avatars.sql b/supabase/migrations/20260419000003_profile_avatars.sql new file mode 100644 index 0000000..aced641 --- /dev/null +++ b/supabase/migrations/20260419000003_profile_avatars.sql @@ -0,0 +1,54 @@ +-- Profile-Avatar storage bucket. +-- +-- Layout: /.webp +-- Public read so peers can see each other's avatar without auth roundtrip +-- (avatars are non-sensitive). Write/update/delete restricted to the owning +-- user via path prefix matching their auth.uid(). + +insert into storage.buckets (id, name, public) +values ('profile-avatars', 'profile-avatars', true) +on conflict (id) do nothing; + +-- Read: anyone authenticated can view any avatar (public bucket also lets +-- unauth fetch by URL but our RLS keeps the table-level policy explicit). +drop policy if exists profile_avatars_select on storage.objects; +create policy profile_avatars_select + on storage.objects + for select + to authenticated, anon + using (bucket_id = 'profile-avatars'); + +-- Write only into your own folder (first path segment must equal auth.uid()). +drop policy if exists profile_avatars_insert_own on storage.objects; +create policy profile_avatars_insert_own + on storage.objects + for insert + to authenticated + with check ( + bucket_id = 'profile-avatars' + and (storage.foldername(name))[1] = auth.uid()::text + ); + +drop policy if exists profile_avatars_update_own on storage.objects; +create policy profile_avatars_update_own + on storage.objects + for update + to authenticated + using ( + bucket_id = 'profile-avatars' + and (storage.foldername(name))[1] = auth.uid()::text + ) + with check ( + bucket_id = 'profile-avatars' + and (storage.foldername(name))[1] = auth.uid()::text + ); + +drop policy if exists profile_avatars_delete_own on storage.objects; +create policy profile_avatars_delete_own + on storage.objects + for delete + to authenticated + using ( + bucket_id = 'profile-avatars' + and (storage.foldername(name))[1] = auth.uid()::text + );