mirror of
https://github.com/multica-ai/multica.git
synced 2026-07-31 17:10:43 +02:00
ea8511340e
* feat(properties): add custom icons Co-authored-by: multica-agent <github@multica.ai> * fix(migrations): use unique property icon prefix Co-authored-by: multica-agent <github@multica.ai> * fix(properties): replace emoji icons with Lucide picker Co-authored-by: multica-agent <github@multica.ai> --------- Co-authored-by: Lambda <lambda@multica.ai> Co-authored-by: multica-agent <github@multica.ai>
55 lines
1.8 KiB
TypeScript
55 lines
1.8 KiB
TypeScript
import type { ReactNode } from "react";
|
|
|
|
/**
|
|
* Two-column property row used in detail-page sidebars: a muted label on the
|
|
* left and a flexible value on the right.
|
|
*
|
|
* Uses **subgrid**, so the parent must declare the column tracks:
|
|
*
|
|
* <div className="grid grid-cols-[auto_1fr] gap-x-2 gap-y-0.5">
|
|
* <PropRow label="…">…</PropRow>
|
|
* <PropRow label="…">…</PropRow>
|
|
* </div>
|
|
*
|
|
* The `auto` track sizes to the widest label across all rows in the parent
|
|
* grid, so labels always fit and values stay aligned across rows without
|
|
* picking a magic pixel width. Earlier versions used a fixed `w-16` label;
|
|
* that broke whenever a label (e.g. "Concurrency") rendered wider than 64px
|
|
* — the label would overflow into the gap and collide with the value.
|
|
*
|
|
* `interactive` (default `true`) controls whether the row gets a hover
|
|
* highlight. Most rows wrap a Picker/Popover trigger and are clickable
|
|
* anywhere across the row, so the highlight tells users "this is one
|
|
* target". Read-only rows (Owner / Created / Updated) should pass
|
|
* `interactive={false}` so they don't pretend to be clickable when they
|
|
* aren't.
|
|
*
|
|
* Used by:
|
|
* - issue detail sidebar (Status / Priority / Assignee / …)
|
|
* - agent detail inspector (Runtime / Model / Visibility / …)
|
|
*/
|
|
export function PropRow({
|
|
label,
|
|
children,
|
|
interactive = true,
|
|
}: {
|
|
label: ReactNode;
|
|
children: ReactNode;
|
|
interactive?: boolean;
|
|
}) {
|
|
return (
|
|
<div
|
|
className={`-mx-2 col-span-2 grid min-h-8 grid-cols-subgrid items-center rounded-md px-2 ${
|
|
interactive ? "transition-colors hover:bg-accent/50" : ""
|
|
}`}
|
|
>
|
|
<span className="flex min-w-0 items-center gap-1.5 text-xs text-muted-foreground">
|
|
{label}
|
|
</span>
|
|
<div className="flex min-w-0 items-center gap-1.5 truncate text-xs">
|
|
{children}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|