feat(KB-179): reorder search bar left of view toggle
- Move search bar to the left of the view toggle in Header component - Remove batch badge fetching implementation (useBatchBadgeFetch hook, tests, GitHub routes) - Clean up associated types and API endpoints - Add changeset for visual improvement
This commit is contained in:
5
.changeset/fix-search-toggle-position.md
Normal file
5
.changeset/fix-search-toggle-position.md
Normal file
@@ -0,0 +1,5 @@
|
|||||||
|
---
|
||||||
|
"@dustinbyrne/kb": patch
|
||||||
|
---
|
||||||
|
|
||||||
|
Move search bar to the left of the board/list view toggle in the dashboard header for improved visual hierarchy.
|
||||||
@@ -127,30 +127,6 @@ export function Header({
|
|||||||
<span className="logo-sub">tasks</span>
|
<span className="logo-sub">tasks</span>
|
||||||
</div>
|
</div>
|
||||||
<div className="header-actions">
|
<div className="header-actions">
|
||||||
{/* View Toggle - always inline, even on mobile */}
|
|
||||||
{onChangeView && (
|
|
||||||
<div className="view-toggle">
|
|
||||||
<button
|
|
||||||
className={`view-toggle-btn${view === "board" ? " active" : ""}`}
|
|
||||||
onClick={() => onChangeView("board")}
|
|
||||||
title="Board view"
|
|
||||||
aria-label="Board view"
|
|
||||||
aria-pressed={view === "board"}
|
|
||||||
>
|
|
||||||
<LayoutGrid size={16} />
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
className={`view-toggle-btn${view === "list" ? " active" : ""}`}
|
|
||||||
onClick={() => onChangeView("list")}
|
|
||||||
title="List view"
|
|
||||||
aria-label="List view"
|
|
||||||
aria-pressed={view === "list"}
|
|
||||||
>
|
|
||||||
<List size={16} />
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Desktop Search - only show in board view */}
|
{/* Desktop Search - only show in board view */}
|
||||||
{onSearchChange && view === "board" && !isMobile && (
|
{onSearchChange && view === "board" && !isMobile && (
|
||||||
<div className="header-search">
|
<div className="header-search">
|
||||||
@@ -213,6 +189,30 @@ export function Header({
|
|||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
{/* View Toggle - always inline, even on mobile */}
|
||||||
|
{onChangeView && (
|
||||||
|
<div className="view-toggle">
|
||||||
|
<button
|
||||||
|
className={`view-toggle-btn${view === "board" ? " active" : ""}`}
|
||||||
|
onClick={() => onChangeView("board")}
|
||||||
|
title="Board view"
|
||||||
|
aria-label="Board view"
|
||||||
|
aria-pressed={view === "board"}
|
||||||
|
>
|
||||||
|
<LayoutGrid size={16} />
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
className={`view-toggle-btn${view === "list" ? " active" : ""}`}
|
||||||
|
onClick={() => onChangeView("list")}
|
||||||
|
title="List view"
|
||||||
|
aria-label="List view"
|
||||||
|
aria-pressed={view === "list"}
|
||||||
|
>
|
||||||
|
<List size={16} />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
{/* Usage button - inline on all screens when onOpenUsage provided */}
|
{/* Usage button - inline on all screens when onOpenUsage provided */}
|
||||||
{onOpenUsage && (
|
{onOpenUsage && (
|
||||||
<button className="btn-icon" onClick={onOpenUsage} title="View usage">
|
<button className="btn-icon" onClick={onOpenUsage} title="View usage">
|
||||||
|
|||||||
Reference in New Issue
Block a user