feat(KB-089): add board search functionality

- Add search state and filter logic to Board component (id, title, description)

- Add search input to Header with search icon and clear button

- Wire search query state through App component

- Add CSS styles for search input and visual states

- Include changeset for patch release
This commit is contained in:
gsxdsm
2026-03-29 23:07:51 -07:00
parent 1a245b4f2b
commit 94f599a3df
5 changed files with 136 additions and 4 deletions

View File

@@ -1,4 +1,4 @@
import { Settings, Pause, Play, Square, Download, LayoutGrid, List, Terminal, Lightbulb } from "lucide-react";
import { Settings, Pause, Play, Square, Download, LayoutGrid, List, Terminal, Lightbulb, Search, X } from "lucide-react";
interface HeaderProps {
onOpenSettings?: () => void;
@@ -11,6 +11,8 @@ interface HeaderProps {
onToggleEnginePause?: () => void;
view?: "board" | "list";
onChangeView?: (view: "board" | "list") => void;
searchQuery?: string;
onSearchChange?: (query: string) => void;
}
export function Header({
@@ -24,6 +26,8 @@ export function Header({
onToggleEnginePause,
view = "board",
onChangeView,
searchQuery = "",
onSearchChange,
}: HeaderProps) {
return (
<header className="header">
@@ -56,6 +60,28 @@ export function Header({
</button>
</div>
)}
{/* Search - only show in board view */}
{onSearchChange && view === "board" && (
<div className="header-search">
<Search size={14} className="header-search-icon" />
<input
type="text"
placeholder="Search tasks..."
value={searchQuery}
onChange={(e) => onSearchChange(e.target.value)}
className="header-search-input"
/>
{searchQuery && (
<button
className="header-search-clear"
onClick={() => onSearchChange("")}
aria-label="Clear search"
>
<X size={14} />
</button>
)}
</div>
)}
{/* Import from GitHub */}
<button className="btn-icon" onClick={onOpenGitHubImport} title="Import from GitHub">
<Download size={16} />