Miguel Palhas
ee61cea64f
CommandBar, ResultList, ActionPage and useCommandBar over the same model docs/COMMAND-BAR.md specifies: sigils, empty-query session order, the drill-in action page, and the keys. The highlight now walks the rows in the order they render. The legacy bar indexed the highlight by display order but activated by rank order, so Enter could act on a different row than the one lit.
35 lines
1.0 KiB
TypeScript
35 lines
1.0 KiB
TypeScript
// A session's action page (docs/COMMAND-BAR.md, "Drill-in"): the same overlay
|
|
// over kill, rename and spawn similar, still fuzzy searchable. The page names
|
|
// the session it acts on, so the target is never ambiguous.
|
|
|
|
import { sessionName, type Session } from "../../types.js";
|
|
import { ResultList } from "./ResultList.js";
|
|
import type { BarGroup } from "./model.js";
|
|
|
|
export interface ActionPageProps {
|
|
session: Session;
|
|
/** The three actions, ranked by the query line — one kind, so no headers. */
|
|
groups: BarGroup[];
|
|
highlighted: number;
|
|
onActivate(index: number): void;
|
|
}
|
|
|
|
export function ActionPage({ session, groups, highlighted, onActivate }: ActionPageProps) {
|
|
return (
|
|
<>
|
|
<div
|
|
role="presentation"
|
|
className="cmdbar-page-header border-b border-border px-sp-3 py-sp-1 text-fs-11 text-muted"
|
|
>
|
|
{`Actions for "${sessionName(session)}"`}
|
|
</div>
|
|
<ResultList
|
|
groups={groups}
|
|
showHeaders={false}
|
|
highlighted={highlighted}
|
|
onActivate={onActivate}
|
|
/>
|
|
</>
|
|
);
|
|
}
|