Seed shelf UI: source links, lots, and what's left (#51) (#68)

Co-authored-by: Steve Dudenhoeffer <[email protected]>

web/src/editor/PlantPicker.tsx

@@ -4,6 +4,16 @@ import { fieldControlClass } from '@/components/ui/field'
 import { CategoryChips } from '@/components/plants/CategoryChips'
 import { PlantIcon } from '@/components/plants/PlantIcon'
 import { CATEGORY_LABELS, filterPlants, usePlants, type CategoryFilter, type Plant } from '@/lib/plants'
+import {
+  attributableLots,
+  formatQuantity,
+  lotsByPlant,
+  lotState,
+  summarizeLots,
+  useSeedLots,
+  type SeedLot,
+} from '@/lib/seedLots'
+import { LotStateChip } from '@/components/plants/SeedLotList'
 import { formatSpacing, type UnitPref } from '@/lib/units'
 
 const RECENT_KEY = 'pansy:recent-plants'
@@ -41,11 +51,20 @@ export function PlantPicker({
   onClose,
   unit = 'metric',
 }: {
-  onSelect: (plant: Plant) => void
+  // The chosen plant, and the lot it should be attributed to when that isn't
+  // ambiguous. Undefined lot means "don't attribute" — which is the honest
+  // answer when there are no lots, and the deliberate one when the user skips.
+  onSelect: (plant: Plant, lot?: SeedLot) => void
   onClose: () => void
   unit?: UnitPref
 }) {
   const plants = usePlants()
+  const seedLots = useSeedLots()
+  const lotsFor = useMemo(() => lotsByPlant(seedLots.data), [seedLots.data])
+  // Set when a plant with SEVERAL lots is picked: which packet did this come out
+  // of? One lot auto-attributes and zero lots stays silent, because forcing that
+  // question on every placement is how a nicety becomes an obstacle.
+  const [choosingLotFor, setChoosingLotFor] = useState<Plant | null>(null)
   const [query, setQuery] = useState('')
   const [category, setCategory] = useState<CategoryFilter>('all')
   const [recent, setRecent] = useState<number[]>(() => loadRecent())
@@ -74,8 +93,21 @@ export function PlantPicker({
   }, [all, recent, query])
 
   function choose(p: Plant) {
+    const lots = attributableLots(lotsFor.get(p.id) ?? [])
+    if (lots.length > 1) {
+      setChoosingLotFor(p)
+      return
+    }
     setRecent(recordRecent(p.id))
-    onSelect(p)
+    // A single lot attributes even when its count says empty. The count records
+    // what was written down, not a fact about the packet — dropping attribution
+    // there would make a wrong number harder to correct rather than easier.
+    onSelect(p, lots[0])
+  }
+
+  function chooseLot(p: Plant, lot?: SeedLot) {
+    setRecent(recordRecent(p.id))
+    onSelect(p, lot)
   }
 
   // A plant option row. keyPrefix namespaces the key so a plant appearing in
@@ -92,11 +124,22 @@ export function PlantPicker({
         <span className="block truncate font-medium text-fg">{p.name}</span>
         <span className="block text-xs text-muted">
           {CATEGORY_LABELS[p.category]} · {formatSpacing(p.spacingCm, unit)}
+          {remainingLabel(lotsFor.get(p.id) ?? [])}
         </span>
       </span>
     </button>
   )
 
+  // What's left, shown where you're deciding what to plant. Silent when there
+  // are no lots — most plants won't have any, and "0 left" on all of them would
+  // be noise that trains you to ignore the number. summarizeLots owns the
+  // unit-agreement rule; a second copy of it here would drift.
+  function remainingLabel(lots: SeedLot[]): string {
+    if (lots.length === 0) return ''
+    const { remaining, unit } = summarizeLots(lots)
+    return ` · ${formatQuantity(remaining)}${unit ? ` ${unit}` : ''} left`
+  }
+
   return (
     <div
       className="fixed inset-0 z-50 flex items-end justify-center bg-black/40 sm:items-center sm:p-4"
@@ -132,7 +175,41 @@ export function PlantPicker({
           <CategoryChips value={category} onChange={setCategory} size="sm" />
         </div>
 
-        <div className="min-h-0 flex-1 overflow-y-auto p-2">
+        {choosingLotFor && (
+          <div className="min-h-0 flex-1 overflow-y-auto p-2">
+            <p className="px-3 pb-1 pt-2 text-xs font-semibold uppercase tracking-wide text-muted">
+              Which lot of {choosingLotFor.name}?
+            </p>
+            {attributableLots(lotsFor.get(choosingLotFor.id) ?? []).map((lot) => (
+                <button
+                  key={lot.id}
+                  type="button"
+                  onClick={() => chooseLot(choosingLotFor, lot)}
+                  className="flex w-full items-center gap-3 rounded-lg px-3 py-2.5 text-left outline-none transition-colors hover:bg-border/50 focus-visible:bg-border/50"
+                >
+                  <span className="min-w-0 flex-1">
+                    <span className="block truncate text-sm font-medium text-fg">
+                      {lot.vendor || 'Unnamed lot'}
+                      {lot.packedForYear != null ? ` · ${lot.packedForYear}` : ''}
+                    </span>
+                    <span className="block text-xs text-muted">
+                      {formatQuantity(lot.remaining)} of {formatQuantity(lot.quantity)} {lot.unit} left
+                    </span>
+                  </span>
+                  <LotStateChip state={lotState(lot)} />
+                </button>
+            ))}
+            <button
+              type="button"
+              onClick={() => chooseLot(choosingLotFor, undefined)}
+              className="w-full rounded-lg px-3 py-2.5 text-left text-sm text-muted outline-none transition-colors hover:bg-border/50 focus-visible:bg-border/50"
+            >
+              Don't attribute to a lot
+            </button>
+          </div>
+        )}
+
+        <div className={cn('min-h-0 flex-1 overflow-y-auto p-2', choosingLotFor && 'hidden')}>
           {plants.isPending && <p className="p-4 text-sm text-muted">Loading plants…</p>}
           {plants.isError && <p className="p-4 text-sm text-red-600 dark:text-red-400">Couldn't load plants.</p>}