Search function added

This commit is contained in:
NPS Agent
2026-05-12 10:15:34 +09:30
parent 1edde60317
commit 5968294081
4 changed files with 108 additions and 37 deletions
+41 -17
View File
@@ -106,30 +106,54 @@ function BrandMark({ size = 22 }) {
);
}
function TopBar({ me, dbUsers = [], isAdmin, tab, setTab, onAdd, onLogs, onLogout, onProfile, workspace }) {
function TopBar({ me, dbUsers = [], isAdmin, tab, setTab, onAdd, onLogs, onLogout, onProfile, workspace, searchQuery, setSearchQuery, showSearch, onToggleSearch }) {
return (
<header className="topbar">
<div className="topbar__left">
<span className="topbar__brand"><BrandMark /><span>Dashy</span></span>
<span className="topbar__divider" />
<span className="topbar__workspace">{workspace ? workspace.name : 'loading…'}</span>
{showSearch ? (
<div className="topbar__search">
<Icon.Search />
<input
className="topbar__search-input"
autoFocus
placeholder="Search tasks, descriptions, tags…"
value={searchQuery}
onChange={e => setSearchQuery(e.target.value)}
/>
<IconBtn label="Close search" onClick={onToggleSearch}>
<Icon.Close />
</IconBtn>
</div>
) : (
<>
<span className="topbar__brand"><BrandMark /><span>Dashy</span></span>
<span className="topbar__divider" />
<span className="topbar__workspace">{workspace ? workspace.name : 'loading…'}</span>
</>
)}
</div>
<nav className="tabs" role="tablist">
<Tab id="overview" label="Overview" tab={tab} setTab={setTab} />
{dbUsers.map(u => (
<Tab key={u.id} id={u.id} label={u.name} tab={tab} setTab={setTab} user={u} />
))}
{isAdmin && <Tab id="deleted" label="Deleted" tab={tab} setTab={setTab} />}
</nav>
{!showSearch && (
<nav className="tabs" role="tablist">
<Tab id="overview" label="Overview" tab={tab} setTab={setTab} />
{dbUsers.map(u => (
<Tab key={u.id} id={u.id} label={u.name} tab={tab} setTab={setTab} user={u} />
))}
{isAdmin && <Tab id="deleted" label="Deleted" tab={tab} setTab={setTab} />}
</nav>
)}
<div className="topbar__right">
<button className="btn btn--soft" onClick={onAdd}>
<Icon.Plus /> New task
</button>
<IconBtn label="Search">
<Icon.Search />
</IconBtn>
{!showSearch && (
<>
<button className="btn btn--soft" onClick={onAdd}>
<Icon.Plus /> New task
</button>
<IconBtn label="Search" onClick={onToggleSearch}>
<Icon.Search />
</IconBtn>
</>
)}
{isAdmin && (
<IconBtn label="Audit log" onClick={onLogs}>
<Icon.Logs />