Commit Graph

21 Commits

Author SHA1 Message Date
Ruhani Rabin
87bdaaee37 fix: polish typography settings and storage helpers 2026-03-04 11:45:28 +08:00
Ruhani Rabin
090e39016f feat: Font options for the UI in larger screens, for code and screen fonts display 2026-03-04 11:08:31 +08:00
Nicolas Varrot
a52bca40d5 refactor: remove HighlightedTextarea (cursor desync unfixable) 2026-02-14 00:49:53 +00:00
Nicolas Varrot
d478eee638 fix: cursor desync in highlighted textarea (#68) + update indicator (#67)
- Remove font-style:italic from .ht-italic (different glyph widths cause desync)
- Remove font-weight:600 from .ht-heading (bolder glyphs are wider)
- Remove background/border-radius from code token spans
- Remove text-decoration from .ht-link
- Token spans now ONLY use color — zero text geometry changes
- Use inherit for font-size/line-height in shared .ht-backdrop/.ht-textarea
- Add update check hook: polls GitHub releases, shows indicator in sidebar
2026-02-13 22:01:25 +00:00
Nicolas Varrot
84512b1f15 fix: new message indicator, cursor desync, button overlap, avatar fallback
- #63: 'New messages' label only shows when actual new messages arrive while scrolled up; plain arrow button shown otherwise
- #64: Fix cursor desync in HighlightedTextarea by matching backdrop border width to textarea
- #65: Move floating buttons inside scroll container with sticky positioning to prevent overlap with growing textarea
- #66: Graceful fallback to Bot icon when agent avatar image fails to load
2026-02-13 20:51:09 +00:00
Nicolas Varrot
51de6984b6 feat: message grouping — hide avatar and reduce spacing for consecutive same-role messages
Consecutive messages from the same role within 2 minutes are visually
grouped: subsequent messages hide the avatar (keeping alignment) and
use tighter vertical spacing. Date separators and role changes break
groups. This matches modern chat UX patterns (Discord, Telegram).
2026-02-13 18:12:44 +00:00
Nicolas Varrot
2f25c45942 fix: remove textarea inner border, keep only container border 2026-02-13 17:57:03 +00:00
Nicolas Varrot
a44b6db77d style: add global focus-visible outline for keyboard navigation accessibility
Adds a consistent focus ring (accent-dim color, 2px) on all focusable
elements when navigated via keyboard (:focus-visible). Mouse/touch clicks
no longer show the default browser outline (:focus:not(:focus-visible)).

Elements with existing Tailwind focus:ring-* classes are unaffected since
they already handle their own focus styling.
2026-02-13 14:57:39 +00:00
Nicolas Varrot
388879e14e style: add print stylesheet for conversation export
- Hide sidebar, header, chat input, and scroll button when printing
- Reset backgrounds to white, text to black for readability
- Code blocks get light background with borders
- Tool calls styled for print (compact, bordered)
- External links show their URL in parentheses
- Chat scroll area becomes fully visible (no overflow)
- Messages avoid page-break-inside for clean pagination
- Remove shadows and backdrop filters in print
2026-02-13 14:12:41 +00:00
Nicolas Varrot
13f5c4ac0c fix: textarea overflow and width in highlighted input container 2026-02-13 11:52:39 +00:00
Nicolas Varrot
cbb46115a0 fix: render markdown lists with proper bullet/number styles
Tailwind's preflight resets list-style to none on ul/ol elements.
Add explicit list-style-type rules for markdown-body: disc for ul,
decimal for ol, with circle/square for nested levels.
Also add li margin for spacing.

Closes feedback #61
2026-02-13 09:40:22 +00:00
Nicolas Varrot
b783ae181b feat: optimistic message rendering with send status indicators
- User messages appear instantly with 'sending' state (dimmed, clock icon)
- Transitions to 'sent' (checkmark) when server acknowledges
- Shows error state (alert icon, retry visible) if send fails
- Applied to both primary and secondary sessions
2026-02-13 09:12:09 +00:00
Nicolas Varrot
b0492434d0 feat: syntax highlighting in chat input textarea
Real-time markdown syntax coloring while typing using a transparent
textarea overlay approach. Highlights: code blocks, inline code,
bold, italic, headings, and links. Toggle button (highlighter icon)
to enable/disable, persisted in localStorage.
2026-02-13 02:26:15 +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
73881396d1 fix: hide textarea scrollbar when content doesn't overflow
Set overflow-y: auto on textarea so the vertical scrollbar only
appears when content exceeds max-height. Fixes #43.
2026-02-12 23:11:25 +00:00
Nicolas Varrot
ad7d149f88 fix: hide horizontal scrollbar on textarea for Windows compatibility
Add overflow-x: hidden and word-break styles to textarea to prevent
ugly horizontal scrollbar on Windows. Also hide the horizontal webkit
scrollbar track entirely.
2026-02-12 18:15:08 +00:00
Nicolas Varrot
cecfa3e010 style: custom webkit scrollbar styling for macOS/Chrome
Add ::-webkit-scrollbar rules matching the dark theme. Textarea gets
an even thinner 4px scrollbar. Fixes ugly default scrollbar on macOS.

Closes feedback #36.
2026-02-12 18:05:15 +00:00
Nicolas Varrot
8ef1b428a3 fix: mobile viewport overflow — prevent horizontal clipping on iPhone
- Add overflow-x: hidden on html/body and max-width: 100vw
- Add overflow-x: hidden on root app container
- Add overflow-x: hidden on chat scroll container
- Make markdown tables scrollable with display: block + overflow-x: auto
- Add overflow-hidden + min-w-0 on expanded tool call content
- Fix tool result summary max-width from max-w-md to max-w-full

Fixes #26
2026-02-12 12:42:20 +00:00
Nicolas Varrot
fd66fed96f fix(a11y): add prefers-reduced-motion support for all animations
Disables animations and reduces transition durations to near-zero
when the user has enabled reduced-motion in their OS settings.
Also replaces README screenshot placeholder with link to live demo.
2026-02-11 21:26:08 +00:00
Nicolas Varrot
1f8ff9ae0a Initial commit — ClawChat v1.0.0 2026-02-11 00:48:43 +00:00