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

web/src/components/plants/PlantChip.tsx

@@ -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>
+  )
+}

web/src/editor/RecentPlants.tsx

@@ -1,5 +1,4 @@
-import { cn } from '@/lib/cn'
-import { PlantIcon } from '@/components/plants/PlantIcon'
+import { PlantChip } from '@/components/plants/PlantChip'
 import type { Plant } from '@/lib/plants'
 
 /**
@@ -22,27 +21,9 @@ export function RecentPlants({
   return (
     <div className="flex items-center gap-1.5 overflow-x-auto">
       <span className="shrink-0 text-[0.7rem] font-medium uppercase tracking-wide text-muted">Recent</span>
-      {plants.map((p) => {
-        const active = p.id === armedPlantId
-        return (
-          <button
-            key={p.id}
-            type="button"
-            onClick={() => onArm(p)}
-            aria-pressed={active}
-            title={active ? `Placing ${p.name}` : `Place ${p.name}`}
-            className={cn(
-              'inline-flex shrink-0 items-center gap-1.5 rounded-full border py-1 pl-1.5 pr-2.5 text-xs font-medium outline-none transition-colors focus-visible:ring-2 focus-visible:ring-accent/40',
-              active
-                ? 'border-accent bg-accent/10 text-accent-strong'
-                : 'border-border bg-surface text-fg hover:border-accent',
-            )}
-          >
-            <PlantIcon color={p.color} icon={p.icon} className="h-5 w-5 rounded-full text-[0.65rem]" />
-            <span className="max-w-[6rem] truncate">{p.name}</span>
-          </button>
-        )
-      })}
+      {plants.map((p) => (
+        <PlantChip key={p.id} plant={p} active={p.id === armedPlantId} onArm={onArm} />
+      ))}
     </div>
   )
 }

web/src/editor/SeedTray.tsx

@@ -1,5 +1,5 @@
 import { cn } from '@/lib/cn'
-import { PlantIcon } from '@/components/plants/PlantIcon'
+import { PlantChip } from '@/components/plants/PlantChip'
 import type { Plant } from '@/lib/plants'
 
 /**
@@ -26,28 +26,19 @@ export function SeedTray({
       {trayPlants.map((p) => {
         const active = p.id === armedPlantId
         return (
-          <span
-            key={p.id}
-            className={cn(
-              'inline-flex items-center rounded-full border text-xs transition-colors',
-              active ? 'border-accent bg-accent/10 text-accent-strong' : 'border-border bg-surface text-fg',
-            )}
-          >
-            <button
-              type="button"
-              onClick={() => onArm(p)}
-              aria-pressed={active}
-              title={active ? `Placing ${p.name}` : `Place ${p.name}`}
-              className="flex items-center gap-1.5 rounded-full py-1 pl-1.5 pr-1 outline-none focus-visible:ring-2 focus-visible:ring-accent/40"
-            >
-              <PlantIcon color={p.color} icon={p.icon} className="h-5 w-5 rounded-full text-[0.65rem]" />
-              <span className="max-w-[6rem] truncate font-medium">{p.name}</span>
-            </button>
+          <span key={p.id} className="inline-flex items-center">
+            {/* Flat right edge so the remove button below seams into one pill. */}
+            <PlantChip plant={p} active={active} onArm={onArm} rounded={false} />
             <button
               type="button"
               onClick={() => onRemove(p.id)}
               aria-label={`Remove ${p.name} from tray`}
-              className="rounded-full px-1.5 py-1 text-muted outline-none hover:text-fg focus-visible:ring-2 focus-visible:ring-accent/40"
+              className={cn(
+                'rounded-r-full border border-l-0 px-1.5 py-1 text-xs outline-none transition-colors focus-visible:ring-2 focus-visible:ring-accent/40',
+                active
+                  ? 'border-accent bg-accent/10 text-accent-strong hover:text-fg'
+                  : 'border-border bg-surface text-muted hover:text-fg',
+              )}
             >
               ✕
             </button>

web/src/pages/GardenEditorPage.tsx

@@ -45,6 +45,10 @@ import { ApiError } from '@/lib/api'
 
 const routeApi = getRouteApi('/gardens/$gardenId')
 
+// How many recently-planted chips the Plants-mode quick strip shows — a working
+// set, not the whole history; the picker covers the long tail.
+const RECENT_PLANTS_MAX = 8
+
 export function GardenEditorPage() {
   const { gardenId } = routeApi.useParams()
   const gid = Number(gardenId)
@@ -118,7 +122,7 @@ export function GardenEditorPage() {
   const recentPlants = useMemo(
     () =>
       recentlyPlantedIds(plantings)
-        .slice(0, 8)
+        .slice(0, RECENT_PLANTS_MAX)
         .map((id) => plantsById.get(id))
         .filter((p): p is Plant => !!p),
     [plantings, plantsById],