emma-hermes/web/src/pages
Austin Pickett c9410b3462
feat(web): add collapsible sidebar for the dashboard (#33421)
* feat(web): add collapsible sidebar for the dashboard

The desktop sidebar can now be collapsed to an icon-only rail via a
toggle button in the sidebar header.  State is persisted in
localStorage so it survives page reloads.

When collapsed (lg+ only):
- Sidebar shrinks from w-64 to w-14 with a smooth width transition
- Nav items show only their icon with a native title tooltip
- Brand text, plugin headings, system actions, theme/language
  switchers, auth widget, and footer are hidden
- Mobile drawer behavior is unchanged (always full-width)

Co-authored-by: Cursor <cursoragent@cursor.com>

* fix(web): align sidebar tooltips to sidebar edge consistently

Tooltip left position now uses the sidebar's right edge instead of the
anchor element's right edge, so narrow anchors (theme/language switchers)
align with full-width anchors (nav links, system actions).

Co-authored-by: Cursor <cursoragent@cursor.com>

* feat(web): add tooltip animations, restore theme label, rename Sessions tab

- Sidebar tooltips now animate in with a subtle 120ms ease-out slide;
  subsequent tooltips within the same hover sequence appear instantly
  (no delay/animation) following Emil Kowalski's tooltip pattern
- Restore theme name label when sidebar is expanded
- Rename Sessions segment tab to "History" across all 16 locales

Co-authored-by: Cursor <cursoragent@cursor.com>

* fix(web): smooth sidebar collapse animation

- Remove icon centering on collapse; icons stay left-aligned at px-5
  so they don't jump during the width transition
- Text labels fade out with opacity transition instead of instant
  display:none, clipped naturally by overflow-hidden
- Slow collapse duration from 450ms to 600ms for a more relaxed feel
- Gateway dot always rendered with opacity toggle so it doesn't
  slide in from the right on collapse
- Pin gateway dot at fixed left offset (pl-[1.625rem]) to align
  with nav icons
- Align header toggle button with justify-center when collapsed
- Bottom switchers use items-start when collapsed to prevent reflow

Co-authored-by: Cursor <cursoragent@cursor.com>

---------

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-05-27 23:58:41 -04:00
..
AnalyticsPage.tsx refactor(web): dashboard typography & contrast pass 2026-05-22 19:50:32 -07:00
ChatPage.tsx fix(dashboard-auth): ChatPage cleanup closes WS via wsRef.current 2026-05-27 02:12:27 -07:00
ConfigPage.tsx refactor(web): dashboard typography & contrast pass 2026-05-22 19:50:32 -07:00
CronPage.tsx refactor(web): dashboard typography & contrast pass 2026-05-22 19:50:32 -07:00
DocsPage.tsx fix(web): force light color-scheme on docs iframe 2026-05-07 04:55:47 -07:00
EnvPage.tsx refactor(web): dashboard typography & contrast pass 2026-05-22 19:50:32 -07:00
LogsPage.tsx refactor(web): dashboard typography & contrast pass 2026-05-22 19:50:32 -07:00
ModelsPage.tsx refactor(web): dashboard typography & contrast pass 2026-05-22 19:50:32 -07:00
PluginsPage.tsx refactor(web): dashboard typography & contrast pass 2026-05-22 19:50:32 -07:00
ProfilesPage.tsx refactor(web): dashboard typography & contrast pass 2026-05-22 19:50:32 -07:00
SessionsPage.tsx feat(web): add collapsible sidebar for the dashboard (#33421) 2026-05-27 23:58:41 -04:00
SkillsPage.tsx refactor(web): dashboard typography & contrast pass 2026-05-22 19:50:32 -07:00