kubus/hatchat
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Redesign web UI with compact layout and drawer navigation #10

Merged
kubus merged 1 commit from t3code/ui-cleanup-compact into main 2026-09-29 22:28:27 +00:00
Conversation 0 Commits 1 Files changed 17 +1169 -558
kubus commented 2026-09-29 22:27:41 +00:00
Owner
Copy link

Summary

  • Introduce drawer-based navigation for narrow screens; sidebar overlays the chat on mobile
  • Refactor composer bar: move model picker and settings to icon-triggered popover menu (ComposerMenu)
  • Extract usage meter into a separate component with ring visualization at 80%+ context use
  • Redesign sidebar: group sessions by recency (Active/Today/Week/Older); show status badges and detail in two lines
  • Add Hat mark logo to empty state and sidebar header
  • Update mobile theme: accent color changed to hat red (#dc3e42 light, #e5484d dark); user message bubbles now neutral (not blue); toggle switches use success color
  • Add variable font dependencies (Inter, JetBrains Mono)
  • Major CSS refactor: 787 lines added/removed to support compact layout, drawer states, and new components

Testing

  • Desktop: verify layout at full width; model/effort/tools controls in composer bar as icons or with labels
  • Narrow screens (mobile/tablet): open drawer with menu button; navigation overlays chat with scrim; all drawer actions close it
  • Empty state: displays hat mark and "What can I help with?"
  • Session list: active and busy sessions appear at top; others grouped by recency
  • iOS mobile: verify theme colors (red accent, neutral user bubbles, success toggles); running status dot is now grey
  • Context meter: ring appears only when near limit (80%+) or when showing token count with no window size
  • ComposerMenu: clicking trigger opens popover; ESC or outside click closes it; keepOpen option works for allowlist mode
  • Not run: E2E with different model types and reasoning effort support
## Summary - Introduce drawer-based navigation for narrow screens; sidebar overlays the chat on mobile - Refactor composer bar: move model picker and settings to icon-triggered popover menu (ComposerMenu) - Extract usage meter into a separate component with ring visualization at 80%+ context use - Redesign sidebar: group sessions by recency (Active/Today/Week/Older); show status badges and detail in two lines - Add Hat mark logo to empty state and sidebar header - Update mobile theme: accent color changed to hat red (#dc3e42 light, #e5484d dark); user message bubbles now neutral (not blue); toggle switches use success color - Add variable font dependencies (Inter, JetBrains Mono) - Major CSS refactor: 787 lines added/removed to support compact layout, drawer states, and new components ## Testing - Desktop: verify layout at full width; model/effort/tools controls in composer bar as icons or with labels - Narrow screens (mobile/tablet): open drawer with menu button; navigation overlays chat with scrim; all drawer actions close it - Empty state: displays hat mark and "What can I help with?" - Session list: active and busy sessions appear at top; others grouped by recency - iOS mobile: verify theme colors (red accent, neutral user bubbles, success toggles); running status dot is now grey - Context meter: ring appears only when near limit (80%+) or when showing token count with no window size - ComposerMenu: clicking trigger opens popover; ESC or outside click closes it; keepOpen option works for allowlist mode - Not run: E2E with different model types and reasoning effort support
Redesign web UI with compact layout and drawer navigation
Some checks failed
ci / check (pull_request) Has been cancelled
Details
05b4d84c41 
- Reorganize composer controls: model picker, reasoning effort, tool policy into a single bar with ComposerMenu component
- Add drawer-based navigation for narrow screens with nav-toggle button
- Move usage meter to dedicated component; only show text when context is high or unknown
- Implement session grouping in sidebar (today, yesterday, etc.) and status indicators
- Update mobile theme: change accent from systemBlue to red, user bubbles from blue to neutral
- Add @fontsource-variable dependencies for Inter and JetBrains Mono
- Extract session grouping and time-ago helpers into reusable utilities with tests
kubus merged commit d6997f8f86 into main 2026-09-29 22:28:27 +00:00
Sign in to join this conversation.
Reviewers
No reviewers
Labels
Clear labels
No items
No labels
Milestone
Clear milestone
No items
No milestone
Projects
Clear projects
No items
No project
Assignees
Clear assignees
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
kubus/hatchat!10
No description provided.