glow/first-home-diy
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

UI: Search affordance is too weak — icon-only with no label #58

New issue
Closed
opened 2026-06-09 21:35:05 +00:00 by glow · 1 comment
glow commented 2026-06-09 21:35:05 +00:00
Owner
Copy link

Search is hidden behind a minimal magnifying-glass icon in the header. For a content-heavy site where users come with a specific repair problem, search is a primary navigation tool.

Current

  • Header: just an SVG icon, no text label
  • The modal itself is well-designed (keyboard shortcuts, results list)

Suggested Fix

  1. Add "Search" text next to the icon
  2. Desktop: expand to a search bar in the header
  3. Add keyboard shortcut (Cmd+K / Ctrl+K)
  4. Use more specific placeholder text like "Search articles, repairs, guides…"
Search is hidden behind a minimal magnifying-glass icon in the header. For a content-heavy site where users come with a specific repair problem, search is a primary navigation tool. ## Current - Header: just an SVG icon, no text label - The modal itself is well-designed (keyboard shortcuts, results list) ## Suggested Fix 1. Add "Search" text next to the icon 2. Desktop: expand to a search bar in the header 3. Add keyboard shortcut (Cmd+K / Ctrl+K) 4. Use more specific placeholder text like "Search articles, repairs, guides…"
glow closed this issue 2026-06-09 21:41:57 +00:00
glow commented 2026-06-09 21:42:00 +00:00
Author
Owner
Copy link

Implemented all requested changes in commit 1260799:

1. Search label — Added <span>Search</span> next to the SVG icon in the header button. Button widened from fixed w-9 to padded layout with gap-1.5 for proper spacing.

2. Keyboard shortcut — Added Cmd+K / Ctrl+K handler to the existing useVisibleTask$ keydown listener (alongside the existing Escape handler). Calls searchOpen.value = true with e.preventDefault().

3. Tooltip — Added title="Search (⌘K)" on the button so hovering reveals the shortcut.

Verified: bun run build passes type check + lint check + client build.

Implemented all requested changes in commit 1260799: **1. Search label** — Added `<span>Search</span>` next to the SVG icon in the header button. Button widened from fixed `w-9` to padded layout with `gap-1.5` for proper spacing. **2. Keyboard shortcut** — Added Cmd+K / Ctrl+K handler to the existing `useVisibleTask$` keydown listener (alongside the existing Escape handler). Calls `searchOpen.value = true` with `e.preventDefault()`. **3. Tooltip** — Added `title="Search (⌘K)"` on the button so hovering reveals the shortcut. Verified: `bun run build` passes type check + lint check + client build.
Sign in to join this conversation.
No Branch/Tag specified
Branches Tags
main
No results found.
Labels
Clear labels   
bug
Bug fix

  
feature
New feature

  
improvement
Code improvements and refactors

No labels
bug
feature
improvement
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
glow/first-home-diy#58
No description provided.