maestro/web/src/components/commandBar/ResultList.tsx

// The bar's result list: kind headers over rank-ordered rows
// (docs/COMMAND-BAR.md, "Structure"). Headers are labels, never rows — the
// highlight walks the rows alone, in the order they are rendered.

import { useEffect, useRef } from "react";

import { keyCaps } from "../../commands.js";
import {
  highlightSegments,
  isActionCandidate,
  metaText,
  rowName,
  type BarGroup,
  type BarResult,
} from "./model.js";

export interface ResultListProps {
  groups: BarGroup[];
  /** Dropped while a sigil is in force or on the action page: one kind needs
   * no header. */
  showHeaders: boolean;
  /** Index into the flattened rows, in the order they render. */
  highlighted: number;
  onActivate(index: number): void;
}

function Highlighted({ text, ranges }: { text: string; ranges: BarResult["ranges"] }) {
  return (
    <>
      {highlightSegments(text, ranges).map((segment, i) =>
        segment.hit ? (
          <mark key={i} className="cmdbar-hit bg-transparent font-semibold text-accent">
            {segment.text}
          </mark>
        ) : (
          <span key={i}>{segment.text}</span>
        ),
      )}
    </>
  );
}

function Row({
  result,
  index,
  active,
  onActivate,
}: {
  result: BarResult;
  index: number;
  active: boolean;
  onActivate(index: number): void;
}) {
  const ref = useRef<HTMLDivElement>(null);
  const candidate = result.candidate;

  useEffect(() => {
    if (active) ref.current?.scrollIntoView({ block: "nearest" });
  }, [active]);

  const name = rowName(candidate);
  const nameMatched =
    result.field === "name" || result.field === "label" || result.field === "path";
  const meta = metaText(result);
  const dead = candidate.kind === "session" && candidate.session.status === "Dead";
  const chord =
    candidate.kind === "command" && !isActionCandidate(candidate)
      ? candidate.command.keys[0]
      : undefined;

  return (
    <div
      ref={ref}
      role="option"
      id={`cmdbar-row-${index}`}
      aria-selected={active}
      data-index={index}
      data-kind={candidate.kind}
      data-session-id={candidate.kind === "session" ? candidate.session.id : undefined}
      data-action-id={isActionCandidate(candidate) ? candidate.action.id : undefined}
      data-command-id={
        candidate.kind === "command" && !isActionCandidate(candidate)
          ? candidate.command.id
          : undefined
      }
      data-path={candidate.kind === "directory" ? candidate.path : undefined}
      className={[
        "cmdbar-row flex cursor-pointer items-baseline gap-sp-2 rounded-r-1 px-sp-3 py-sp-1 text-fs-13",
        active ? "is-active bg-surface-2 text-ink" : "text-ink",
        dead ? "is-dead opacity-60" : "",
      ]
        .filter(Boolean)
        .join(" ")}
      onClick={() => onActivate(index)}
    >
      <span className="cmdbar-row-name truncate">
        {nameMatched ? <Highlighted text={name} ranges={result.ranges} /> : name}
      </span>
      {chord !== undefined ? (
        <span className="cmdbar-row-keys ml-auto flex gap-1">
          {keyCaps(chord).map((cap, i) => (
            <kbd
              key={i}
              className="rounded-r-1 border border-border px-1 text-fs-11 text-muted"
            >
              {cap}
            </kbd>
          ))}
        </span>
      ) : meta ? (
        <span className="cmdbar-row-meta ml-auto truncate text-fs-11 text-muted">
          {result.field !== undefined && result.field !== "name" ? (
            <Highlighted text={meta} ranges={result.ranges} />
          ) : (
            meta
          )}
        </span>
      ) : null}
    </div>
  );
}

export function ResultList({ groups, showHeaders, highlighted, onActivate }: ResultListProps) {
  if (groups.length === 0) {
    return (
      <div
        id="cmdbar-results"
        role="listbox"
        aria-label="Results"
        className="cmdbar-results max-h-[50vh] overflow-auto p-sp-1"
      >
        <div className="cmdbar-empty px-sp-3 py-sp-2 text-fs-12 text-muted">No matches</div>
      </div>
    );
  }

  let index = 0;
  return (
    <div
      id="cmdbar-results"
      role="listbox"
      aria-label="Results"
      className="cmdbar-results max-h-[50vh] overflow-auto p-sp-1"
    >
      {groups.map((group) => (
        <div key={group.kind}>
          {showHeaders ? (
            <div
              role="presentation"
              className="cmdbar-group-title px-sp-3 pt-sp-2 pb-1 text-fs-11 uppercase tracking-wide text-muted"
            >
              {group.title}
            </div>
          ) : null}
          {group.results.map((result) => {
            const at = index++;
            return (
              <Row
                key={at}
                result={result}
                index={at}
                active={at === highlighted}
                onActivate={onActivate}
              />
            );
          })}
        </div>
      ))}
    </div>
  );
}