jyapayne/houserules
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(ui): render computed source badge in pinned modifier panel

Browse source
This commit is contained in:
Joey Yakimowich-Payne 2026-04-19 10:15:21 -06:00
commit 0987adbff3
No known key found for this signature in database
1 changed files with 33 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

47
packages/chess/src/ui/ModifierPinnedPanel.tsx
View file

@ -69,20 +69,39 @@ export function ModifierPinnedPanel({ pieceId, engine, onClose }: Props) {
<div className="px-4 py-3">
{modifierRows.length > 0 ? (
<ul className="space-y-0">
{modifierRows.map((row) => (
<li
key={row.id}
data-testid="pinned-modifier-row"
className="flex items-center justify-between gap-3 py-1.5 border-b border-neutral-100 last:border-0"
>
<span className="text-xs text-neutral-500 shrink-0">
{row.label}
</span>
<span className="text-xs font-semibold text-neutral-800 text-right">
{row.description}
</span>
</li>
))}
{modifierRows.map((row) => {
const sourceBadge =
row.source.kind === "per-instance"
? { text: `per-instance: ${row.source.square}`, cls: "text-cyan-700 bg-cyan-50" }
: row.source.kind === "per-type"
? {
text: `per-type: all ${row.source.color} ${row.source.pieceType}s`,
cls: "text-purple-700 bg-purple-50",
}
: row.source.kind === "preset"
? { text: `from ${row.source.presetName}`, cls: "text-emerald-700 bg-emerald-50" }
: { text: "default", cls: "text-neutral-500 bg-neutral-50" };
return (
<li
key={row.id}
data-testid="pinned-modifier-row"
className="flex flex-col gap-1 py-1.5 border-b border-neutral-100 last:border-0"
>
<div className="flex items-center justify-between gap-3">
<span className="text-xs text-neutral-500 shrink-0">{row.label}</span>
<span className="text-xs font-semibold text-neutral-800 text-right">
{row.description}
</span>
</div>
<span
data-testid={`source-badge-${row.id}`}
className={`text-[10px] px-1.5 py-0.5 rounded self-end ${sourceBadge.cls}`}
>
{sourceBadge.text}
</span>
</li>
);
})}
</ul>
) : (
<p className="text-xs text-neutral-400 italic">No active modifiers</p>