mirror of
https://github.com/getpaseo/paseo.git
synced 2026-11-07 00:44:49 +00:00
Mohamed Boudra
a65478d0bf
* feat(app): rank, highlight, and timestamp Command Center results
Workspace and agent rows now show when they were last active, rank by
match quality and then recency, mark the query terms in every result
kind, and lead workspaces with their project icon.
Ties used to be broken by where the match landed in the string, so
"Deliver sidebar usage" beat "expose usage data" on sentence position
and recency almost never decided anything. Built-in rows now compare
only which fields matched and the matcher tier, then the most recent
row wins. The empty query follows the same rule, so it lists the most
recent workspaces and agents instead of alphabetical workspaces and
status-first agents.
Row and section heights live in list-metrics: a layout picks one row
inset and every height derives from it plus shared line boxes, which
the styles also read. The layout is chosen once at the top, so rows
never branch on it, and two-line rows are now vertically centered.
Desktop is denser (32/46); compact keeps 44pt touch rows (44/58).
findHighlightRanges takes the matcher's options so the marks match
what the list matched: the Command Center is not typo-tolerant, the
history list is.
* fix(app): keep the project icon out of Command Center row names
The fallback project icon draws the project's initial as text, which
became the first word of the row's accessible name ("C Command Center
..."), so screen readers announced it. The icon is decorative.
The scroll spec now reads the newest seeded workspace: the empty query
lists the most recent workspaces, so the first one seeded is no longer
among them.
54 lines
2.0 KiB
TypeScript
54 lines
2.0 KiB
TypeScript
import { SPACING } from "@/styles/theme";
|
|
|
|
/**
|
|
* Every vertical size in the Command Center list, in one place.
|
|
*
|
|
* The list is virtualized, so it needs each row's height before rendering it. Rather than keep
|
|
* those numbers in sync with the styles by hand, rows render at exactly the height computed here
|
|
* and center their content. The styles read the line heights below, so this arithmetic is the
|
|
* layout.
|
|
*
|
|
* A layout chooses one thing: the inset above and below a row's text. Both layouts share the same
|
|
* shape, so nothing downstream asks which one it got.
|
|
*/
|
|
export const COMMAND_CENTER_LINE_HEIGHT = {
|
|
/** A row with no subtitle. Also the icon slot, so the icon centers on the title. */
|
|
singleLine: 20,
|
|
title: 18,
|
|
subtitle: 16,
|
|
sectionLabel: 16,
|
|
} as const;
|
|
|
|
/** Space around a section's label and around the rule between sections. */
|
|
export const COMMAND_CENTER_SECTION_GAP = SPACING[2];
|
|
const SECTION_DIVIDER_THICKNESS = 1;
|
|
|
|
export interface CommandCenterListMetrics {
|
|
singleLineRow: number;
|
|
twoLineRow: number;
|
|
/** A section label and the gaps around it. */
|
|
sectionTitle: number;
|
|
/** The rule between two sections and the gaps around it. */
|
|
sectionDivider: number;
|
|
}
|
|
|
|
function listMetrics(rowInset: number): CommandCenterListMetrics {
|
|
const line = COMMAND_CENTER_LINE_HEIGHT;
|
|
return {
|
|
singleLineRow: rowInset + line.singleLine + rowInset,
|
|
twoLineRow: rowInset + line.title + line.subtitle + rowInset,
|
|
sectionTitle: COMMAND_CENTER_SECTION_GAP + line.sectionLabel + COMMAND_CENTER_SECTION_GAP,
|
|
sectionDivider:
|
|
COMMAND_CENTER_SECTION_GAP + SECTION_DIVIDER_THICKNESS + COMMAND_CENTER_SECTION_GAP,
|
|
};
|
|
}
|
|
|
|
/**
|
|
* Desktop is dense for a pointer. Compact keeps single-line rows at the 44pt touch height that
|
|
* `density.rowHeight` uses on compact layouts.
|
|
*/
|
|
export const COMMAND_CENTER_LIST_METRICS = {
|
|
desktop: listMetrics(SPACING[1.5]),
|
|
compact: listMetrics(SPACING[3]),
|
|
} as const satisfies Record<string, CommandCenterListMetrics>;
|