Files
ds-chat/frontend
ksmithandClaude Sonnet 5 53d16973fb Add custom theme colors, full per-token control (#30)
Adds a 5th "Custom" option to the theme swatch grid alongside the
existing 4 presets, opening a picker for all ~12 CSS custom properties
(backgrounds, borders, text, three accent tiers, highlight, danger) plus
a light/dark toggle for native control rendering.

Persisted as a new users.custom_theme_colors JSONB column, validated
server-side against exactly what a native <input type="color"> can ever
produce. Colors survive switching to a preset and back, since there's no
reason picking a preset for a moment should force redoing every color
pick. Applied at runtime as inline custom properties on :root (presets
stay static CSS) via a shared applyTheme() helper, which is also
responsible for clearing those inline overrides when switching away --
otherwise they'd silently keep winning over whatever preset's own
stylesheet values should apply next.

Live preview on every color change; persists only on explicit "Save
colors" (not per keystroke, since a color input fires continuously while
dragging), and closing the modal without saving reverts the preview back
to whatever's actually persisted.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-08-17 06:15:49 -06:00
..

DS Chat frontend (Phase 1)

React + Vite PWA. Login, room list, and chat views wired to the backend's REST API and /ws/chat WebSocket endpoint. See ../README.md and ../backend/README.md for full local setup.

Dev

npm install
npm run dev

The dev server proxies /api and /ws to http://localhost:8000 (see vite.config.ts), so the backend must be running for anything beyond the login page to work.

Build

npm run build

Generates the PWA manifest and service worker via vite-plugin-pwa into dist/.

Layout

src/
  main.tsx, App.tsx        routes: /login, /rooms, /rooms/:roomId
  api/                       fetch wrappers (client, auth, rooms)
  ws/useChatSocket.ts          WebSocket hook (join/send/receive)
  context/AuthContext.tsx        current-user state, hydrated via GET /api/auth/me
  components/                      ProtectedRoute, RoomListItem, MessageList, MessageInput
  pages/                             LoginPage, RoomListPage, ChatRoomPage