Fix plant placement + add a Seed Tray (#39) (#42)

Use the full Plant the picker returns (fixes the silent placement failure) and add a per-garden Seed Tray for quick repeat placing. Review fixes: disarm on tray-remove, cap load, consolidate toolbar guards, rename interface, tidy. Closes #39. Co-authored-by: Steve Dudenhoeffer <[email protected]>
2026-07-19 06:09:51 +00:00
parent fef3f601bf
commit 5cdc2779d7
4 changed files with 226 additions and 25 deletions
@@ -0,0 +1,66 @@
+import { cn } from '@/lib/cn'
+import { PlantIcon } from '@/components/plants/PlantIcon'
+import type { Plant } from '@/lib/plants'
+
+/**
+ * The Seed Tray strip in the focus-mode toolbar: a row of the garden's
+ * kept-at-hand plants. Tap a chip to arm that plant for tap-to-place (the armed
+ * chip is highlighted); ✕ removes it from the tray; the trailing "+ Plant" chip
+ * opens the full catalog picker. See useSeedTray for persistence.
+ */
+export function SeedTray({
+  trayPlants,
+  armedPlantId,
+  onArm,
+  onRemove,
+  onOpenPicker,
+}: {
+  trayPlants: Plant[]
+  armedPlantId: number | null
+  onArm: (plant: Plant) => void
+  onRemove: (id: number) => void
+  onOpenPicker: () => void
+}) {
+  return (
+    <div className="flex flex-wrap items-center gap-1.5">
+      {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>
+            <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"
+            >
+              ✕
+            </button>
+          </span>
+        )
+      })}
+      <button
+        type="button"
+        onClick={onOpenPicker}
+        className="inline-flex items-center gap-1 rounded-full border border-dashed border-border px-2.5 py-1 text-xs font-medium text-muted outline-none transition-colors hover:border-accent hover:text-accent-strong focus-visible:ring-2 focus-visible:ring-accent/40"
+      >
+        + Plant
+      </button>
+    </div>
+  )
+}