1/** @jsxImportSource @alchemy.run/sigil */
2/**
3 * Shared rows for the Plan tree. Review and apply modes both render
4 * namespaces through this component so they look like the same tree.
5 */
6import type { JSX } from "react";
7import { Row, Text, useGlyphs } from "../ui/index.ts";
8import { theme } from "../../CliKit/index.ts";
9import { actionStyle, type PlanAction } from "./statusStyle.ts";
10
11export const namespaceStyle = (
12 action: string,
13): (typeof actionStyle)[PlanAction] =>
14 actionStyle[action as PlanAction] ?? {
15 color: theme.color.muted,
16 icon: "info",
17 };
18
19/** A namespace node: rolled-up action icon + accent-colored id. */
20type NamespaceRowProps = {
21 readonly id: string;
22 readonly depth: number;
23 readonly action: string;
24};
25
26export function NamespaceRow({
27 id,
28 depth,
29 action,
30}: NamespaceRowProps): JSX.Element {
31 const style = namespaceStyle(action);
32 const glyphs = useGlyphs();
33 return (
34 <Row gap={1} paddingLeft={depth * 2}>
35 <Text color={style.color}>{glyphs[style.icon]}</Text>
36 <Text color={theme.color.accent}>{id}</Text>
37 </Row>
38 );
39}