deckhearth/components
varutasu f3faeab788
refactor(layout): split sidebar into nav+badge chips; move help/theme to topbar dropdown (#114)
Operator feedback 2026-06-04:
- "make the navigation its own section, separated from the badges
  and progress"
- "move the help and theme toggle into the profile drop-down"

Changes:

components/Layout.js
- Desktop sidebar restructured: the single full-height chip is gone.
  The sidebar column is now <aside className="md:flex md:flex-col
  md:gap-4"> holding two independent floating glass chips:
    1. nav-chip (flex-1, rounded-3xl, glass-surface-mid) — logo,
       wordmark, NavigationContent, and the Sign-in CTA for logged-
       out visitors only.
    2. bottom-chip — for authenticated users this is the
       <DailyEmberWidget /> (already a self-contained glass-panel).
       For logged-out, it's a small glass-panel containing the
       Support + Theme icon row so those affordances stay reachable
       when there's no TopSearchBar dropdown.
  The visible body-gradient gap between the two chips is the new
  separation the operator asked for.
- Authenticated path no longer renders Support / Theme icons in the
  sidebar bottom — they live in the TopSearchBar <UserMenu> dropdown.
- Mobile drawer: bottom Support+Theme row is now gated behind
  `!user`. Authenticated mobile users access the same affordances
  via the TopSearchBar avatar chip (visible on all viewports; the
  name/chevron portion is hidden on < md but the chip itself stays).

components/ui/TopSearchBar.js
- The user-menu chip (previously a <Link href="/settings">) is now
  a real <UserMenu> dropdown sub-component:
    - Profile, Settings, Admin Panel (admins only), Help & Support,
      Theme toggle (button — toggles theme + closes menu),
      separator, Logout.
    - role="menu" + menuitem children; aria-haspopup + aria-expanded
      on the trigger; Escape key closes; click-outside scrim closes.
    - Uses useTheme() so the menu label flips between "Dark mode" /
      "Light mode" with the matching sun/moon icon.
    - Glass-surface-high background + rim-light + ember-rim-subtle
      + elevation-pronounced shadow stack so it reads as a popover
      above the floating header chip.

Tests:
- npm run test:run: 113/113
- npm run lint: 0 errors (1 pre-existing warning, not from this PR)
- npm run build: green

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-06-04 12:16:09 -05:00
..
ui refactor(layout): split sidebar into nav+badge chips; move help/theme to topbar dropdown (#114) 2026-06-04 12:16:09 -05:00
AdminProtected.js feat(design-system): finish Liquid Glass — close all remaining sub-convoys (#96) 2026-06-03 20:34:06 -05:00
AnimatedFireLogo.js fix(lint): clear ESLint baseline in components/ (#61) 2026-06-02 01:03:36 -05:00
AuthLayout.js fix(lint): clear ESLint baseline in components/ (#61) 2026-06-02 01:03:36 -05:00
BulkSelectionToolbar.js Align UI copy: My Collection vs Lists (#54) 2026-05-29 09:53:40 -05:00
CameraScanner.js refactor(scanner): extract CameraScannerView presentational component (#73) 2026-06-02 16:04:02 -05:00
CameraScannerView.js feat(design-system): sweep authenticated body-content panels to glass (#97) 2026-06-03 21:28:52 -05:00
CardDetailDeckModal.js feat(design-system): finish Liquid Glass — close all remaining sub-convoys (#96) 2026-06-03 20:34:06 -05:00
CardDetailQuantityModal.js feat(design-system): finish Liquid Glass — close all remaining sub-convoys (#96) 2026-06-03 20:34:06 -05:00
CardDetailView.js feat(design-system): sweep authenticated body-content panels to glass (#97) 2026-06-03 21:28:52 -05:00
CardEditorForm.js feat(design-system): sweep authenticated body-content panels to glass (#97) 2026-06-03 21:28:52 -05:00
CardEditorPreview.js feat(design-system): sweep authenticated body-content panels to glass (#97) 2026-06-03 21:28:52 -05:00
CardEditorSearchPanel.js feat(design-system): sweep authenticated body-content panels to glass (#97) 2026-06-03 21:28:52 -05:00
CardEditorView.js feat(design-system): sweep authenticated body-content panels to glass (#97) 2026-06-03 21:28:52 -05:00
CardItem.js feat(design-system): redesign v2 #6 — card grid outer-glow (#106) 2026-06-04 11:14:53 -05:00
CardsPageView.js feat(design-system): redesign v2 #3 — TopSearchBar + Cmd+K + sweep page-header-glass (#105) 2026-06-04 11:14:50 -05:00
CollaboratorFacepile.js fix(lint): clear ESLint baseline in components/ (#61) 2026-06-02 01:03:36 -05:00
CollectionDeleteModal.js feat(design-system): Liquid Glass redesign portfolio — foundation + primitives + Layout (#95) 2026-06-03 20:12:33 -05:00
CollectionEditModal.js feat(design-system): finish Liquid Glass — close all remaining sub-convoys (#96) 2026-06-03 20:34:06 -05:00
CollectionPageView.js feat(design-system): redesign v2 #3 — TopSearchBar + Cmd+K + sweep page-header-glass (#105) 2026-06-04 11:14:50 -05:00
CollectionsCreateModal.js feat(design-system): Liquid Glass redesign portfolio — foundation + primitives + Layout (#95) 2026-06-03 20:12:33 -05:00
CollectionsEditModal.js feat(design-system): finish Liquid Glass — close all remaining sub-convoys (#96) 2026-06-03 20:34:06 -05:00
CollectionSelectionModal.js feat(design-system): finish Liquid Glass — close all remaining sub-convoys (#96) 2026-06-03 20:34:06 -05:00
CollectionsPageView.js feat(design-system): redesign v2 #3 — TopSearchBar + Cmd+K + sweep page-header-glass (#105) 2026-06-04 11:14:50 -05:00
CollectionsSuccessModal.js feat(design-system): finish Liquid Glass — close all remaining sub-convoys (#96) 2026-06-03 20:34:06 -05:00
CollectionsThumbnail.js refactor(collections): useCollectionsPage + view (Brief 3) (#87) 2026-06-03 17:10:17 -05:00
DailyEmberWidget.js feat(design-system): redesign v2 #2 + #5 — sidebar pill, wordmark, Daily Ember (#103) 2026-06-04 10:59:44 -05:00
DashboardCardSpotlight.js feat(design-system): redesign v2 #7 + #8 — dashboard rebuild + right-rail Card Spotlight (#107) 2026-06-04 11:21:58 -05:00
DashboardFeaturedCollection.js feat(design-system): redesign v2 #7 + #8 — dashboard rebuild + right-rail Card Spotlight (#107) 2026-06-04 11:21:58 -05:00
DashboardRecentActivity.js feat(design-system): redesign v2 #7 + #8 — dashboard rebuild + right-rail Card Spotlight (#107) 2026-06-04 11:21:58 -05:00
DeckBuilderCardBrowser.js refactor(deck-builder): extract deck list and card browser (Brief 2) (#91) 2026-06-03 17:29:08 -05:00
DeckBuilderDeckList.js refactor(deck-builder): extract deck list and card browser (Brief 2) (#91) 2026-06-03 17:29:08 -05:00
DeckBuilderStatsBar.js refactor(deck-builder): extract stats lib and stats bar (Brief 1) (#89) 2026-06-03 17:24:40 -05:00
DeckBuilderView.js refactor(deck-builder): useDeckBuilder + DeckBuilderView (Brief 3) (#93) 2026-06-03 18:18:28 -05:00
Layout.js refactor(layout): split sidebar into nav+badge chips; move help/theme to topbar dropdown (#114) 2026-06-04 12:16:09 -05:00
Layout.js.backup 🚀 Implement Mobile-First Navigation System 2025-08-01 18:18:21 -05:00
LoginCTA.js Align UI copy: My Collection vs Lists (#54) 2026-05-29 09:53:40 -05:00
ManaSymbols.js fix(lint): clear ESLint baseline in components/ (#61) 2026-06-02 01:03:36 -05:00
ManaSymbolSettings.js fix(lint): clear ESLint baseline in components/ (#61) 2026-06-02 01:03:36 -05:00
MobileNavigation.js feat(design-system): Liquid Glass redesign portfolio — foundation + primitives + Layout (#95) 2026-06-03 20:12:33 -05:00
OCRSettings.js feat(design-system): finish Liquid Glass — close all remaining sub-convoys (#96) 2026-06-03 20:34:06 -05:00
PermissionIndicator.js feat(design-system): sweep authenticated body-content panels to glass (#97) 2026-06-03 21:28:52 -05:00
ProtectedRoute.js Major Scanner Improvements 2025-07-29 14:19:48 -05:00
PublicCardsView.js Extract PublicCardsView from pages/cards.js (Brief 2). (#78) 2026-06-03 12:06:24 -05:00
ScanDisambiguationDialog.js feat(design-system): sweep authenticated body-content panels to glass (#97) 2026-06-03 21:28:52 -05:00
ScannedCardItem.js feat(design-system): sweep authenticated body-content panels to glass (#97) 2026-06-03 21:28:52 -05:00
ScannerDestinationPicker.js feat(design-system): sweep authenticated body-content panels to glass (#97) 2026-06-03 21:28:52 -05:00
ScannerPageView.js feat(design-system): sweep authenticated body-content panels to glass (#97) 2026-06-03 21:28:52 -05:00
ShareModal.js feat(design-system): Liquid Glass redesign portfolio — foundation + primitives + Layout (#95) 2026-06-03 20:12:33 -05:00
UploadImageModal.js feat(design-system): finish Liquid Glass — close all remaining sub-convoys (#96) 2026-06-03 20:34:06 -05:00