diff --git a/src/renderer/views/CommandPaletteView.tsx b/src/renderer/views/CommandPaletteView.tsx index e26dc5ab..72ade237 100644 --- a/src/renderer/views/CommandPaletteView.tsx +++ b/src/renderer/views/CommandPaletteView.tsx @@ -40,6 +40,54 @@ interface CommandPaletteViewProps { t: (key: string) => string; } +interface PaletteResultSectionProps { + label: string; + items: T[]; + keyPrefix: string; + icon: typeof MagnifyingGlass; + selectedPaletteIndex: number; + paletteActionIndex: Map; + onSelect: (item: T) => void; + renderPrimary: (item: T) => React.ReactNode; + renderRight: (item: T) => React.ReactNode; +} + +function PaletteResultSection({ + label, + items, + keyPrefix, + icon: Icon, + selectedPaletteIndex, + paletteActionIndex, + onSelect, + renderPrimary, + renderRight, +}: PaletteResultSectionProps) { + if (items.length === 0) return null; + return ( + <> +
{label}
+ + {items.map((item) => ( + onSelect(item)} + > +
+
+ + {renderPrimary(item)} +
+ {renderRight(item)} +
+
+ ))} +
+ + ); +} + export function CommandPaletteView({ commandPaletteOpen, setCommandPaletteOpen, @@ -56,13 +104,23 @@ export function CommandPaletteView({ matchedProjects, hasEntityResults, paletteActionIndex, - runs, navigateTo, panelTransition, t, }: CommandPaletteViewProps) { const paletteQuery = commandPaletteSearch.trim().toLowerCase(); + const closeAndReset = () => { + setCommandPaletteOpen(false); + setCommandPaletteSearch(""); + setSelectedPaletteIndex(0); + }; + + const selectAndClose = (section: SectionId, entityId?: string) => { + navigateTo(section, entityId); + closeAndReset(); + }; + return ( {commandPaletteOpen ? ( @@ -71,7 +129,7 @@ export function CommandPaletteView({ animate={{ opacity: 1 }} exit={{ opacity: 0 }} className="fixed inset-0 z-50 flex items-start justify-center bg-background/72 px-4 pt-24 backdrop-blur-sm" - onClick={() => { setCommandPaletteOpen(false); setCommandPaletteSearch(""); }} + onClick={closeAndReset} > { - navigateTo(item.id); - setCommandPaletteOpen(false); - setCommandPaletteSearch(""); - setSelectedPaletteIndex(0); - }} + onClick={() => selectAndClose(item.id)} >
@@ -136,148 +189,76 @@ export function CommandPaletteView({ {hasEntityResults ? (
- {matchedAgents.length > 0 ? ( - <> -
{t("entity.agents")}
- - {matchedAgents.map((agent) => ( - { - navigateTo("agents", agent.id); - setCommandPaletteOpen(false); - setCommandPaletteSearch(""); - setSelectedPaletteIndex(0); - }} - > -
-
- - {agent.name} - {agent.role} -
- -
-
- ))} -
- - ) : null} - - {matchedTasks.length > 0 ? ( - <> -
{t("entity.tasks")}
- - {matchedTasks.map((task) => ( - { - navigateTo("tasks", task.id); - setCommandPaletteOpen(false); - setCommandPaletteSearch(""); - setSelectedPaletteIndex(0); - }} - > -
-
- - {task.title} -
- -
-
- ))} -
- - ) : null} - - {matchedRuns.length > 0 ? ( - <> -
{t("entity.runs")}
- - {matchedRuns.map((run) => ( - { - navigateTo("runs", run.id); - setCommandPaletteOpen(false); - setCommandPaletteSearch(""); - setSelectedPaletteIndex(0); - }} - > -
-
- - - {run.summary || runs.find((entry) => entry.id === run.id)?.id.slice(0, 8) || run.id.slice(0, 8)} - -
- -
-
- ))} -
- - ) : null} - - {matchedGoals.length > 0 ? ( - <> -
{t("entity.goals")}
- - {matchedGoals.map((goal) => ( - { - navigateTo("goals", goal.id); - setCommandPaletteOpen(false); - setCommandPaletteSearch(""); - setSelectedPaletteIndex(0); - }} - > -
-
- - {goal.title} -
- -
-
- ))} -
- - ) : null} - - {matchedProjects.length > 0 ? ( - <> -
{t("entity.projects")}
- - {matchedProjects.map((project) => ( - { - navigateTo("projects", project.id); - setCommandPaletteOpen(false); - setCommandPaletteSearch(""); - setSelectedPaletteIndex(0); - }} - > -
-
- - {project.name} -
- -
-
- ))} -
- - ) : null} + selectAndClose("agents", agent.id)} + renderPrimary={(agent) => ( + <> + {agent.name} + {agent.role} + + )} + renderRight={(agent) => } + /> + selectAndClose("tasks", task.id)} + renderPrimary={(task) => ( + {task.title} + )} + renderRight={(task) => } + /> + selectAndClose("runs", run.id)} + renderPrimary={(run) => ( + + {run.summary || run.id.slice(0, 8)} + + )} + renderRight={(run) => } + /> + selectAndClose("goals", goal.id)} + renderPrimary={(goal) => ( + {goal.title} + )} + renderRight={(goal) => } + /> + selectAndClose("projects", project.id)} + renderPrimary={(project) => ( + {project.name} + )} + renderRight={(project) => } + />
) : null}