Address review: shared PlantChip + named recent-plants cap

Gadfly on #100: - Extracted the tap-to-arm chip (icon + name + armed state) into a shared PlantChip, used by both RecentPlants and SeedTray, so the two quick-pick surfaces can't drift. SeedTray composes it (rounded={false}) with its remove button into one seamless pill. - Named the recent-strip cap: RECENT_PLANTS_MAX = 8, was a bare slice(0, 8). Verified live: recent chips and the tray render identically post-refactor. Co-Authored-By: Claude Opus 4.8 (1M context) <[email protected]> Claude-Session: https://claude.ai/code/session_01H3zbym8Doka2d7D48maSgZ
2026-07-22 01:58:06 -04:00
parent 97c8a36bac
commit 7297138630
4 changed files with 60 additions and 43 deletions
@@ -0,0 +1,41 @@
+import { cn } from '@/lib/cn'
+import { PlantIcon } from '@/components/plants/PlantIcon'
+import type { Plant } from '@/lib/plants'
+
+/**
+ * A small tap-to-arm plant chip (icon + name), highlighted when it's the armed
+ * plant. Shared by the Seed Tray (which wraps it with a remove button) and the
+ * Recent-plants strip, so the two quick-pick surfaces stay visually identical.
+ * `rounded` is false when a caller (the tray) attaches a trailing control and
+ * needs a flat right edge.
+ */
+export function PlantChip({
+  plant,
+  active,
+  onArm,
+  rounded = true,
+}: {
+  plant: Plant
+  active: boolean
+  onArm: (plant: Plant) => void
+  rounded?: boolean
+}) {
+  return (
+    <button
+      type="button"
+      onClick={() => onArm(plant)}
+      aria-pressed={active}
+      title={active ? `Placing ${plant.name}` : `Place ${plant.name}`}
+      className={cn(
+        'inline-flex shrink-0 items-center gap-1.5 border py-1 pl-1.5 text-xs font-medium outline-none transition-colors focus-visible:ring-2 focus-visible:ring-accent/40',
+        rounded ? 'rounded-full pr-2.5' : 'rounded-l-full pr-1',
+        active
+          ? 'border-accent bg-accent/10 text-accent-strong'
+          : 'border-border bg-surface text-fg hover:border-accent',
+      )}
+    >
+      <PlantIcon color={plant.color} icon={plant.icon} className="h-5 w-5 rounded-full text-[0.65rem]" />
+      <span className="max-w-[6rem] truncate">{plant.name}</span>
+    </button>
+  )
+}