rstillwell/deckhearth
1
0
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity Actions

feat(design-system): redesign v2 #3 — TopSearchBar + Cmd+K + page-header-glass sweep #105

Merged
varutasu merged 1 commit from redesign-v2-3-top-search-bar into main 2026-06-04 12:14:50 -04:00
Conversation 3 Commits 1 Files changed 10 +425 -39
varutasu commented 2026-06-04 12:10:48 -04:00 (Migrated from github.com)
Copy link

Umbrella: `.convoys/redesign-v2-from-mockups.md`. Builds on PR #102/#103/#104 (sub-convoys #1, #2, #4, #5 merged).

Sub-convoy #3 — the top horizontal chrome strip from the operator mockup, swept globally to all authenticated pages via `` (umbrella § 7.3: "sweep to ALL authenticated pages in this convoy").

What ships

`components/ui/TopSearchBar.js` — search input on left (magnifier + Cmd+K/Ctrl+K hint pill that adapts to platform), notification bell with red badge (hidden when count=0), mail icon, compact user-menu chip (gradient-tile avatar + display name + chevron). Renders `null` for unauthenticated visitors.

`components/ui/CommandPaletteModal.js` — opens on ⌘K / Ctrl+K. Single search input, auto-focused. Enter submits to `/cards?q=`. 3 quick-action buttons (Dashboard / Cards / Scanner) below. Live results / recent searches / federated-search ranking deferred to follow-up per umbrella § 7.2.

`components/Layout.js` — TopSearchBar mounted in the main-content column ABOVE `

` for authenticated users. Global keydown listener at Layout scope toggles the CommandPaletteModal on ⌘K/Ctrl+K with preventDefault. Legacy `showSearch`-gated `` block removed.

page-header-glass sweep — 6 files migrated to plain content padding:

  • pages/dashboard.js
  • pages/my-cards.js
  • pages/community/collections.js
  • components/CollectionsPageView.js
  • components/CollectionPageView.js
  • components/CardsPageView.js

The `.page-header-glass` utility stays in `styles/globals.css` (a downstream sweep convoy can remove it).

Tests

  • `npm run test:run`: 113/113 (was 110; +3 implicit)
  • `npm run lint`: clean
  • `npm run build`: green

Test plan

  • CI green (17 checks)
  • All authenticated pages (/dashboard, /my-cards, /cards, /collections, /community/collections, /collection/, /scanner, /settings) show the same TopSearchBar at the top
  • Pressing ⌘K opens the CommandPaletteModal; Esc closes it
  • Typing a query and pressing Enter routes to /cards?q=
  • Notification bell shows nothing when user.unreadNotifications is 0 or undefined
  • User-menu avatar uses the username's first character; clicking routes to /settings
  • No double-chrome (TopSearchBar + old page-header-glass strip stacked)

Made with Cursor

Umbrella: \`.convoys/redesign-v2-from-mockups.md\`. Builds on PR #102/#103/#104 (sub-convoys #1, #2, #4, #5 merged). Sub-convoy #3 — the top horizontal chrome strip from the operator mockup, swept globally to all authenticated pages via \`<Layout>\` (umbrella § 7.3: "sweep to ALL authenticated pages in this convoy"). ## What ships **\`components/ui/TopSearchBar.js\`** — search input on left (magnifier + Cmd+K/Ctrl+K hint pill that adapts to platform), notification bell with red badge (hidden when count=0), mail icon, compact user-menu chip (gradient-tile avatar + display name + chevron). Renders \`null\` for unauthenticated visitors. **\`components/ui/CommandPaletteModal.js\`** — opens on ⌘K / Ctrl+K. Single search input, auto-focused. Enter submits to \`/cards?q=<query>\`. 3 quick-action buttons (Dashboard / Cards / Scanner) below. Live results / recent searches / federated-search ranking deferred to follow-up per umbrella § 7.2. **\`components/Layout.js\`** — TopSearchBar mounted in the main-content column ABOVE \`<main>\` for authenticated users. Global keydown listener at Layout scope toggles the CommandPaletteModal on ⌘K/Ctrl+K with preventDefault. Legacy \`showSearch\`-gated \`<header>\` block removed. **page-header-glass sweep** — 6 files migrated to plain content padding: - pages/dashboard.js - pages/my-cards.js - pages/community/collections.js - components/CollectionsPageView.js - components/CollectionPageView.js - components/CardsPageView.js The \`.page-header-glass\` utility stays in \`styles/globals.css\` (a downstream sweep convoy can remove it). ## Tests - \`npm run test:run\`: **113/113** (was 110; +3 implicit) - \`npm run lint\`: clean - \`npm run build\`: green ## Test plan - [ ] CI green (17 checks) - [ ] All authenticated pages (/dashboard, /my-cards, /cards, /collections, /community/collections, /collection/<id>, /scanner, /settings) show the same TopSearchBar at the top - [ ] Pressing ⌘K opens the CommandPaletteModal; Esc closes it - [ ] Typing a query and pressing Enter routes to /cards?q=<query> - [ ] Notification bell shows nothing when user.unreadNotifications is 0 or undefined - [ ] User-menu avatar uses the username's first character; clicking routes to /settings - [ ] No double-chrome (TopSearchBar + old page-header-glass strip stacked) Made with [Cursor](https://cursor.com)
vercel[bot] commented 2026-06-04 12:10:53 -04:00 (Migrated from github.com)
Copy link

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
tcg-vault Ready Ready Preview, Comment Jun 4, 2026 4:11pm

Request Review

[vc]: #rxPWLfhFsSNhNnsJGZof3dCe5z+8BcSdmKgnGVOAPxM=:eyJpc01vbm9yZXBvIjp0cnVlLCJ0eXBlIjoiZ2l0aHViIiwicHJvamVjdHMiOlt7Im5hbWUiOiJ0Y2ctdmF1bHQiLCJwcm9qZWN0SWQiOiJwcmpfRjZXOEVvRkd3Y0g3aWVGcnRvRlNlOXdVVkFhNSIsImluc3BlY3RvclVybCI6Imh0dHBzOi8vdmVyY2VsLmNvbS9yYW5kYWxsLXN0aWxsd2VsbHMtcHJvamVjdHMvdGNnLXZhdWx0LzJVejNudzZaR201SlBDU0pqRDZIRTEyZVFvcVMiLCJwcmV2aWV3VXJsIjoidGNnLXZhdWx0LWdpdC1yZWRlc2lnbi12Mi0zLWMxYTczNS1yYW5kYWxsLXN0aWxsd2VsbHMtcHJvamVjdHMudmVyY2VsLmFwcCIsIm5leHRDb21taXRTdGF0dXMiOiJERVBMT1lFRCIsImxpdmVGZWVkYmFjayI6eyJyZXNvbHZlZCI6MCwidW5yZXNvbHZlZCI6MCwidG90YWwiOjAsImxpbmsiOiJ0Y2ctdmF1bHQtZ2l0LXJlZGVzaWduLXYyLTMtYzFhNzM1LXJhbmRhbGwtc3RpbGx3ZWxscy1wcm9qZWN0cy52ZXJjZWwuYXBwIn0sInJvb3REaXJlY3RvcnkiOm51bGx9XSwicmVxdWVzdFJldmlld1VybCI6Imh0dHBzOi8vdmVyY2VsLmNvbS92ZXJjZWwtYWdlbnQvcmVxdWVzdC1yZXZpZXc/b3duZXI9dmFydXRhc3UmcmVwbz10Y2ctdmF1bHQmcHI9MTA1In0= The latest updates on your projects. Learn more about [Vercel for GitHub](https://vercel.link/github-learn-more). | Project | Deployment | Actions | Updated (UTC) | | :--- | :----- | :------ | :------ | | [tcg-vault](https://vercel.com/randall-stillwells-projects/tcg-vault) | ![Ready](https://vercel.com/static/status/ready.svg) [Ready](https://vercel.com/randall-stillwells-projects/tcg-vault/2Uz3nw6ZGm5JPCSJjD6HE12eQoqS) | [Preview](https://tcg-vault-git-redesign-v2-3-c1a735-randall-stillwells-projects.vercel.app), [Comment](https://vercel.live/open-feedback/tcg-vault-git-redesign-v2-3-c1a735-randall-stillwells-projects.vercel.app?via=pr-comment-feedback-link) | Jun 4, 2026 4:11pm | <a href="https://vercel.com/vercel-agent/request-review?owner=varutasu&repo=tcg-vault&pr=105" rel="noreferrer"><picture><source media="(prefers-color-scheme: dark)" srcset="https://agents-vade-review.vercel.sh/request-review-dark.svg"><source media="(prefers-color-scheme: light)" srcset="https://agents-vade-review.vercel.sh/request-review-light.svg"><img src="https://agents-vade-review.vercel.sh/request-review-light.svg" alt="Request Review"></picture></a>
github-actions[bot] commented 2026-06-04 12:11:03 -04:00 (Migrated from github.com)
Copy link

Pipeline Health

Build + CI gates

Gate Status
Vercel build (Preview) ✅ pass
CI: Lint ✅ pass
CI: Schema map fresh ❌ skipped
Preview smoke ✅ pass
Visual diff ✅ pass

Build runs on Vercel; this CI runs lint and schema-map drift only (no duplicate build).

Role reports

Role Status
Reviewer report ⏳ pending
A11y audit ⏳ pending
Design system audit ⏳ pending

See individual comments above for details. This rollup updates automatically.

<!-- pipeline-rollup --> ## Pipeline Health ### Build + CI gates | Gate | Status | | --- | --- | | Vercel build (Preview) | ✅ pass | | CI: Lint | ✅ pass | | CI: Schema map fresh | ❌ skipped | | Preview smoke | ✅ pass | | Visual diff | ✅ pass | _Build runs on Vercel; this CI runs lint and schema-map drift only (no duplicate build)._ ### Role reports | Role | Status | | --- | --- | | Reviewer report | ⏳ pending | | A11y audit | ⏳ pending | | Design system audit | ⏳ pending | See individual comments above for details. This rollup updates automatically.
github-actions[bot] commented 2026-06-04 12:12:21 -04:00 (Migrated from github.com)
Copy link

Visual Diff

Screenshots and diffs uploaded as artifacts: view run

If intentional changes: update snapshots locally with npx playwright test --project=visual --update-snapshots and commit.

## Visual Diff Screenshots and diffs uploaded as artifacts: [view run](https://github.com/varutasu/tcg-vault/actions/runs/26964178261) If intentional changes: update snapshots locally with `npx playwright test --project=visual --update-snapshots` and commit.
Sign in to join this conversation.
Reviewers
No reviewers
Labels
Clear labels   
agent-context-drift

   
bug

Something isn't working

  
documentation

Improvements or additions to documentation

  
duplicate

This issue or pull request already exists

  
enhancement

New feature or request

  
good first issue

Good for newcomers

  
help wanted

Extra attention is needed

  
invalid

This doesn't seem right

  
question

Further information is requested

  
wontfix

This will not be worked on

No labels
agent-context-drift
bug
documentation
duplicate
enhancement
good first issue
help wanted
invalid
question
wontfix
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: rstillwell/deckhearth#105
No description provided.
Delete branch "redesign-v2-3-top-search-bar"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?