Commit Graph

20 Commits

Author SHA1 Message Date
Nicolas Varrot
f09482e6cb feat: multi-tab split view for 2 sessions side by side
- Add split view button (columns icon) in sidebar session actions
- Click to open any session in a secondary pane alongside the primary
- Resizable divider between panes (drag to resize, persisted in localStorage)
- Secondary pane supports full chat: history, streaming, send, abort
- Close split view via X button or clicking the split icon again
- Each pane has independent scroll, search, and tool collapse
- Keyboard shortcut and i18n support (EN/FR)
2026-02-13 02:44:33 +00:00
Nicolas Varrot
35652eaeb5 feat: drag & drop session reordering in sidebar
- Drag sessions to reorder within pinned/unpinned groups
- Custom order persists in localStorage
- Visual feedback: dragged item fades, drop target highlights
- Disabled during search filtering
- Works alongside existing pin feature (pinned group stays on top)
2026-02-13 02:10:53 +00:00
Nicolas Varrot
b60c0ce3c4 fix: migrate all components to theme-aware CSS variables
Replace ~150 hardcoded Tailwind color classes (bg-zinc-*, text-zinc-*,
border-white/*, text-cyan-*, bg-cyan-*) with CSS custom properties
(--pc-*) across all 17 components.

Add @theme block in index.css for Tailwind v4 theme-aware utility
classes (bg-pc-elevated, text-pc-text, border-pc-border, etc.).

Add --pc-hover, --pc-hover-strong, --pc-separator variables per theme
(white/alpha for dark/OLED, black/alpha for light).

Theme switcher (dark/light/OLED) now actually works — all UI elements
respond to theme changes in real-time.

Fixes #55
2026-02-13 00:29:50 +00:00
Nicolas Varrot
b20bf41bf4 feat: theme switcher — dark, light, OLED modes with configurable accent colors
- Add ThemeContext with CSS custom properties for all base colors
- Three theme modes: Dark (default), Light, OLED Black
- Six accent colors: Cyan, Violet, Emerald, Amber, Rose, Blue
- Theme switcher dropdown in header (palette icon)
- Persisted in localStorage
- CSS variables replace hardcoded hex colors in index.css and components
- i18n support (EN/FR) for theme labels
2026-02-12 23:51:01 +00:00
Nicolas Varrot
53d619c357 feat: relative timestamps, message preview, and recency sort in sidebar
- Show relative time (2m, 3h, 1d) next to each session name
- Display last message preview below session name (truncated to 80 chars)
- Sort sessions by most recently updated (within pinned/unpinned groups)
- Map updatedAt and lastMessagePreview from gateway sessions.list response
2026-02-12 17:59:16 +00:00
Nicolas Varrot
52a1a7f270 feat: human-friendly session titles in header and sidebar
Replace raw session keys/UUIDs with readable names derived from
session metadata (label, kind, channel). Priority: label > kind-based
name (Main, Cron, Task) with channel suffix > cleaned key fallback.

New utility: src/lib/sessionName.ts used by both Header and Sidebar.
2026-02-12 17:35:53 +00:00
Nicolas Varrot
e94325b38a feat: delete session from sidebar with confirmation dialog 2026-02-12 16:57:18 +00:00
Nicolas Varrot
fa9b10ac97 feat: resizable sidebar with drag handle and persisted width 2026-02-12 15:46:39 +00:00
Nicolas Varrot
e24378aa75 feat: add session pinning to sidebar
- Pin icon appears on hover for each session, filled when pinned
- Pinned sessions sort to top of list (preserved across page reloads via localStorage)
- Subtle divider separates pinned from unpinned sessions
- i18n support for pin/unpin labels (EN + FR)
2026-02-12 12:19:18 +00:00
Nicolas Varrot
c0d27a7754 feat: add unread message indicators on sidebar sessions
Show a cyan dot on sessions that received new messages while
viewing a different session. The dot clears when switching to
that session.
2026-02-12 11:36:31 +00:00
Nicolas Varrot
6734b54389 fix: resolve CI lint errors in Sidebar, TypingIndicator, and useGateway
- Sidebar: replace useEffect setState with callback pattern for filter reset
- TypingIndicator: initialize useRef with 0 instead of impure Date.now()
- TypingIndicator: remove redundant setElapsed(0) from mount effect
- useGateway: remove unused eslint-disable directive
2026-02-12 11:27:42 +00:00
Nicolas Varrot
f55a24cb06 feat: add keyboard navigation for session list in sidebar
Arrow Up/Down to navigate sessions, Enter to select, Escape to close.
Sessions use role='option' with aria-selected for screen reader support.
Mouse hover syncs with keyboard focus index for smooth interaction.
2026-02-12 09:56:13 +00:00
Nicolas Varrot
3c5fcdfc73 fix: inject app version from package.json instead of hardcoded 1.0.0
- Add Vite define for __APP_VERSION__ from package.json
- Use dynamic version in gateway connect handshake and userAgent
- Show version number in sidebar footer
- Add globals.d.ts type declaration
2026-02-12 09:37:28 +00:00
Nicolas Varrot
73d9e5f6f2 feat: add channel/type icons to session list in sidebar
Show Discord, Telegram, WhatsApp, Signal, Slack brand icons,
clock icon for cron sessions, bot icon for sub-agents, and
globe icon for webchat sessions. Falls back to message bubble
for unknown channels.

Closes feedback #23
2026-02-12 02:45:33 +00:00
Nicolas Varrot
84c8e24457 style: unify token progress bars with subtle cyan opacity ramp
Replace the disparate gradient/orange/red color scheme with a single
soft sky-blue (rgb 56,189,248) that subtly intensifies as usage grows.
Opacity ramps from 0.35 at low usage to 1.0 at full context.
Applies to both sidebar session bars and header token bar.
2026-02-11 20:15:31 +00:00
Nicolas Varrot
177970988a feat(sidebar): add session search filter with Ctrl+K shortcut
- Search input appears when 4+ sessions exist
- Filters sessions by label/key in real-time
- Ctrl+K / Cmd+K keyboard shortcut to focus search
- Clear button and 'no results' state
- i18n support (EN + FR)
2026-02-11 19:46:28 +00:00
Nicolas Varrot
9b3aed4adc feat: add runtime language selector in header (EN/FR toggle)
- Add LanguageSelector component with globe icon + cycle button
- Refactor i18n to support reactive locale switching via useSyncExternalStore
- Locale priority: localStorage > VITE_LOCALE > navigator.language > 'en'
- All components now use useT() hook for reactive re-rendering on locale change
- Persists choice to localStorage (key: pinchchat-locale)
- No page reload needed — instant switch
2026-02-11 16:18:22 +00:00
Nicolas Varrot
99b7db9793 feat: add i18n support with VITE_LOCALE env var (en/fr)
- Lightweight i18n system in src/lib/i18n.ts (no external deps)
- All UI strings extracted to translation keys
- English (default) and French locales included
- Set VITE_LOCALE=fr in .env for French UI
- Fallback to English for unknown locales
2026-02-11 13:19:20 +00:00
Nicolas Varrot
3370916931 fix: localize UI to English and add ARIA accessibility attributes
- Replace all French UI strings with English (Connected, Thinking, Result, Send, etc.)
- Add role="log" + aria-live="polite" to chat message area
- Add role="form" + aria-label to message input area
- Add aria-label to sidebar toggle, attach file, send, and textarea
- Add role="banner" to header, role="navigation" to sidebar
- Add role="application" to app root
2026-02-11 12:17:54 +00:00
Nicolas Varrot
1f8ff9ae0a Initial commit — ClawChat v1.0.0 2026-02-11 00:48:43 +00:00