style(desktop): hide search when there's nothing to search

Empty datasets no longer render a search field. Adds a `searchHidden` prop
to PageSearchShell (artifacts/skills/messaging) and gates cron + command
center sessions search on a non-empty list. The chat sidebar already did
this via showSessionSections.
This commit is contained in:
Brooklyn Nicholson
2026-06-03 23:55:04 -05:00
parent 9e02b18828
commit aecdc75bb0
6 changed files with 33 additions and 21 deletions

View File

@ -501,6 +501,7 @@ export function ArtifactsView({ setStatusbarItemGroup: _setStatusbarItemGroup, .
<PageSearchShell
{...props}
onSearchChange={setQuery}
searchHidden={counts.all === 0}
searchPlaceholder="Search artifacts..."
searchValue={query}
tabs={

View File

@ -300,7 +300,7 @@ export function CommandCenterView({
</p>
</div>
<div className="flex shrink-0 items-center gap-2">
{section === 'sessions' && (
{section === 'sessions' && sessions.length > 0 && (
<SearchField
containerClassName="max-w-[40vw]"
onChange={next => setQuery(next)}

View File

@ -419,14 +419,16 @@ export function CronView({ onClose }: CronViewProps) {
return (
<OverlayView closeLabel="Close cron" onClose={onClose}>
<div className="flex min-h-0 flex-1 flex-col pt-[calc(var(--titlebar-height)+0.5rem)]">
<div className="mx-auto flex w-full max-w-4xl items-center gap-2 px-4 pb-2">
<SearchField
containerClassName="max-w-[60vw]"
onChange={setQuery}
placeholder="Search cron jobs…"
value={query}
/>
</div>
{totalCount > 0 && (
<div className="mx-auto flex w-full max-w-4xl items-center gap-2 px-4 pb-2">
<SearchField
containerClassName="max-w-[60vw]"
onChange={setQuery}
placeholder="Search cron jobs…"
value={query}
/>
</div>
)}
{!jobs ? (
<PageLoader label="Loading cron jobs..." />
) : visibleJobs.length === 0 ? (

View File

@ -347,6 +347,7 @@ export function MessagingView({ setStatusbarItemGroup: _setStatusbarItemGroup, .
<PageSearchShell
{...props}
onSearchChange={setQuery}
searchHidden={(platforms?.length ?? 0) === 0}
searchPlaceholder="Search messaging..."
searchValue={query}
>

View File

@ -12,6 +12,8 @@ interface PageSearchShellProps extends React.ComponentProps<'section'> {
onSearchChange: (value: string) => void
searchPlaceholder: string
searchValue: string
/** Hide the search field when there's nothing to search (empty dataset). */
searchHidden?: boolean
}
export function PageSearchShell({
@ -22,6 +24,7 @@ export function PageSearchShell({
onSearchChange,
searchPlaceholder,
searchValue,
searchHidden = false,
...props
}: PageSearchShellProps) {
return (
@ -46,19 +49,23 @@ export function PageSearchShell({
(see app-shell.tsx), so window dragging still works here.
*/}
<div className="shrink-0">
<div className="flex items-center gap-3 px-3 pb-2 pt-[calc(var(--titlebar-height)+0.5rem)]">
{tabs ? (
<div className="flex min-w-0 flex-1 flex-wrap items-center gap-x-2 gap-y-1">{tabs}</div>
) : null}
<div className={cn('flex shrink-0 items-center', !tabs && 'flex-1')}>
<SearchField
containerClassName="max-w-[45vw]"
onChange={onSearchChange}
placeholder={searchPlaceholder}
value={searchValue}
/>
{(tabs || !searchHidden) && (
<div className="flex items-center gap-3 px-3 pb-2 pt-[calc(var(--titlebar-height)+0.5rem)]">
{tabs ? (
<div className="flex min-w-0 flex-1 flex-wrap items-center gap-x-2 gap-y-1">{tabs}</div>
) : null}
{!searchHidden && (
<div className={cn('flex shrink-0 items-center', !tabs && 'flex-1')}>
<SearchField
containerClassName="max-w-[45vw]"
onChange={onSearchChange}
placeholder={searchPlaceholder}
value={searchValue}
/>
</div>
)}
</div>
</div>
)}
{filters ? (
<div className="flex flex-wrap items-center gap-x-2 gap-y-1 px-3 pb-2">{filters}</div>
) : null}

View File

@ -197,6 +197,7 @@ export function SkillsView({ setStatusbarItemGroup: _setStatusbarItemGroup, ...p
) : undefined
}
onSearchChange={setQuery}
searchHidden={mode === 'skills' ? (skills?.length ?? 0) === 0 : (toolsets?.length ?? 0) === 0}
searchPlaceholder={mode === 'skills' ? 'Search skills...' : 'Search toolsets...'}
searchValue={query}
tabs={