Season view: filter the editor to a year (#54)

"Change the garlic bed to cucumbers this year" has a year in it, and pansy had
no notion of one — the editor showed whatever is currently planted, full stop.

The data has always supported seasons: plantings carry planted_at and
removed_at, and "clear bed" soft-removes rather than deleting. A season is a
date range over data that already exists. No schema change, and specifically no
seasons table — it would duplicate what the dates already say and create a
second source of truth about when something was in the ground.

?year=YYYY on /full returns every plop whose [planted_at, removed_at] interval
overlapped that calendar year, so garlic planted in October and pulled the
following July appears in BOTH years, which is what actually happened. Undated
plantings appear in every year: everything that predates this feature has a null
planted_at, and a rule that excluded them would empty every existing garden the
moment a year was selected. Without the param /full behaves exactly as before —
the existing tests pass unchanged, which was the point of doing it this way.

Widening to past plops means widening the referenced-plant lookup with it.
A plant pulled last July isn't active, but its plops still have to render with
the right icon and colour, so ListReferencedPlants takes an includeRemoved flag
that tracks the same switch.

A past season is READ-ONLY, gated at the single canEdit the palette, inspector,
nudging, placement and drag handles all key off. Editing the past by accident is
the failure mode this feature introduces, so the state is stated in a banner
rather than implied by a dropdown you set a while ago, with the way back to the
live garden next to it.

The season is a separate query under its own key. The optimistic mutations all
patch gardenFullKey(gardenId); folding a year into that key would let them write
into whichever season happened to be on screen. Read-only views never need that
machinery, and keeping them out of it means they can't accidentally join it.

The year selector offers only years the garden holds data for, plus the current
one. A free numeric field invites a typo, and a typo'd year produces a
confidently empty garden that reads as data loss rather than a mistake — the
server bounds the year for the same reason.

Closes #54

Co-Authored-By: Claude Opus 4.8 (1M context) <[email protected]>
Claude-Session: https://claude.ai/code/session_01H3zbym8Doka2d7D48maSgZ

web/src/editor/SeasonPicker.tsx

@@ -0,0 +1,69 @@
+import { cn } from '@/lib/cn'
+
+/**
+ * Which season the canvas is showing.
+ *
+ * "Now" is the live, editable garden — what is in the ground today. A year is a
+ * read-only view of everything whose time in the ground overlapped that calendar
+ * year, plops since removed included. They are genuinely different questions:
+ * "what's growing" versus "what did I grow", and only the first one is editable.
+ *
+ * Only years the garden holds data for are offered. A free numeric field invites
+ * a typo, and a typo'd year produces a confidently empty garden that reads as
+ * data loss rather than a mistake.
+ */
+export function SeasonPicker({
+  years,
+  value,
+  onChange,
+}: {
+  years: number[]
+  value: number | null
+  onChange: (year: number | null) => void
+}) {
+  if (years.length === 0) return null
+  return (
+    <label className="flex items-center gap-1.5 text-xs text-muted">
+      <span>Season</span>
+      <select
+        value={value ?? ''}
+        onChange={(e) => onChange(e.target.value === '' ? null : Number(e.target.value))}
+        className={cn(
+          'rounded-md border border-border bg-surface px-1.5 py-1 text-xs text-fg outline-none',
+          'focus-visible:ring-2 focus-visible:ring-accent/40',
+        )}
+      >
+        <option value="">Now</option>
+        {years.map((y) => (
+          <option key={y} value={y}>
+            {y}
+          </option>
+        ))}
+      </select>
+    </label>
+  )
+}
+
+/**
+ * The banner that stops you thinking you're looking at now. Editing the past by
+ * accident is the failure mode this whole feature introduces, so the state is
+ * stated rather than implied by a dropdown you set a while ago — with the way
+ * back to the live garden right next to it.
+ */
+export function SeasonBanner({ year, onExit }: { year: number; onExit: () => void }) {
+  return (
+    <div className="flex flex-wrap items-center gap-2 rounded-lg border border-amber-500/40 bg-amber-500/10 px-2 py-1.5 text-sm">
+      <span className="font-medium text-amber-800 dark:text-amber-300">Viewing {year}</span>
+      <span className="text-xs text-amber-800/80 dark:text-amber-300/80">
+        read-only, including plantings since removed
+      </span>
+      <button
+        type="button"
+        onClick={onExit}
+        className="ml-auto rounded px-1.5 py-0.5 text-xs font-medium text-amber-900 underline outline-none hover:no-underline focus-visible:ring-2 focus-visible:ring-accent/40 dark:text-amber-200"
+      >
+        Back to now
+      </button>
+    </div>
+  )
+}

web/src/editor/store.ts

@@ -32,6 +32,12 @@ interface EditorState {
   railTab: string | null
   setRailTab: (tab: string | null) => void
 
+  // Which season the canvas is showing: null is "now" (live and editable), a
+  // year is a read-only view of what was in the ground that year. Ephemeral —
+  // which year you were last looking at is not a property of the garden.
+  seasonYear: number | null
+  setSeasonYear: (year: number | null) => void
+
   // The plant armed for placing plops (set after the PlantPicker choice); stays
   // armed for repeat-placement until cleared (Escape / done). null = not placing.
   armedPlant: Plant | null
@@ -79,6 +85,9 @@ export const useEditorStore = create<EditorState>((set) => ({
   railTab: null,
   setRailTab: (tab) => set({ railTab: tab }),
 
+  seasonYear: null,
+  setSeasonYear: (year) => set({ seasonYear: year }),
+
   armedPlant: null,
   setArmedPlant: (p) => set({ armedPlant: p }),
 
@@ -104,5 +113,6 @@ export const useEditorStore = create<EditorState>((set) => ({
       liveObject: null,
       livePlanting: null,
       railTab: null,
+      seasonYear: null,
     }),
 }))

web/src/lib/objects.ts

@@ -86,6 +86,38 @@ export function useGardenFull(gardenId: number) {
   return useQuery(gardenFullQueryOptions(gardenId))
 }
 
+// A past season is a SEPARATE query under its own key, deliberately. The
+// optimistic mutations below all patch gardenFullKey(gardenId); if a year were
+// folded into that key they would write into whichever season happened to be on
+// screen. Season views are read-only, so they never need that machinery — and
+// keeping them out of it means they can't accidentally join it.
+export const gardenSeasonKey = (gardenId: number, year: number) =>
+  ['garden-season', gardenId, year] as const
+
+/** A garden as it stood in a given calendar year: every plop whose time in the
+ *  ground overlapped it, including ones since removed. Read-only. */
+export function useGardenSeason(gardenId: number, year: number | null) {
+  return useQuery({
+    queryKey: gardenSeasonKey(gardenId, year ?? 0),
+    enabled: year !== null,
+    queryFn: async (): Promise<FullGarden> =>
+      fullGardenSchema.parse(await api.get(`/gardens/${gardenId}/full`, { params: { year } })),
+  })
+}
+
+const yearsSchema = z.object({ years: z.array(z.number().int()) })
+
+/** The years this garden holds planting data for, newest first, always
+ *  including the current one. Offering only years with data keeps the selector
+ *  from inviting a typo that produces a confidently empty garden. */
+export function useGardenYears(gardenId: number) {
+  return useQuery({
+    queryKey: ['garden-years', gardenId] as const,
+    queryFn: async (): Promise<number[]> =>
+      yearsSchema.parse(await api.get(`/gardens/${gardenId}/years`)).years,
+  })
+}
+
 /**
  * Ensure a plant is present in the /full cache's `plants` list. The full payload
  * carries only the garden's *referenced* plants (ListReferencedPlants), so a

web/src/pages/GardenEditorPage.tsx

@@ -12,12 +12,21 @@ import { Palette } from '@/editor/Palette'
 import { SeedTray } from '@/editor/SeedTray'
 import { ClearBedModal } from '@/editor/ClearBedModal'
 import { EditorHint } from '@/editor/EditorHint'
+import { SeasonBanner, SeasonPicker } from '@/editor/SeasonPicker'
 import { objectDisplayName } from '@/editor/kinds'
 import { useEditorStore } from '@/editor/store'
 import type { EditorGarden } from '@/editor/types'
 import { ShareGardenModal } from '@/components/gardens/ShareGardenModal'
 import { useMe } from '@/lib/auth'
-import { toEditorObject, useEnsurePlantInFull, useGardenFull, useUpdateObject, useUpdatePlanting } from '@/lib/objects'
+import {
+  toEditorObject,
+  useEnsurePlantInFull,
+  useGardenFull,
+  useGardenSeason,
+  useGardenYears,
+  useUpdateObject,
+  useUpdatePlanting,
+} from '@/lib/objects'
 import { toEditorPlanting } from '@/lib/plantings'
 import type { Plant } from '@/lib/plants'
 import { useSeedTray } from '@/lib/seedTray'
@@ -30,7 +39,14 @@ export function GardenEditorPage() {
   const gid = Number(gardenId)
   const { focus } = routeApi.useSearch()
   const navigate = routeApi.useNavigate()
-  const full = useGardenFull(gid)
+  const seasonYear = useEditorStore((s) => s.seasonYear)
+  const setSeasonYear = useEditorStore((s) => s.setSeasonYear)
+  // Two queries, one shown. The live one stays mounted so returning to "now" is
+  // instant and so the optimistic mutation cache it owns is never displaced.
+  const live = useGardenFull(gid)
+  const season = useGardenSeason(gid, seasonYear)
+  const full = seasonYear === null ? live : season
+  const years = useGardenYears(gid)
   const me = useMe()
   usePageTitle(full.data?.garden.name ?? 'Garden')
 
@@ -68,7 +84,11 @@ export function GardenEditorPage() {
   // Role gating, computed before the effects/returns so the nudge handler can use
   // it. Ownership is the authoritative ownerId==me check.
   const gd = full.data?.garden
-  const canEdit = gd != null && (gd.ownerId === me.data?.id || gd.myRole === 'editor')
+  // A past season is read-only: it is a record of what happened, and editing it
+  // would be editing the past. This is the single gate — the palette, inspector,
+  // nudging, placement and drag handles all key off canEdit.
+  const canEdit =
+    seasonYear === null && gd != null && (gd.ownerId === me.data?.id || gd.myRole === 'editor')
   const isOwner = gd != null && me.data != null && gd.ownerId === me.data.id
 
   // Latest values for the mount-once nudge keydown handler to read, so its effect
@@ -330,9 +350,14 @@ export function GardenEditorPage() {
             Share
           </Button>
         )}
-        {!canEdit && (
+        {!canEdit && seasonYear === null && (
           <p className="mb-2 rounded-md bg-border/40 px-2 py-1 text-xs text-muted">👁 View only</p>
         )}
+        {years.data && years.data.length > 0 && (
+          <div className="mb-2">
+            <SeasonPicker years={years.data} value={seasonYear} onChange={setSeasonYear} />
+          </div>
+        )}
         {focusedObjectId == null && canEdit && <Palette />}
         <Button
           variant="ghost"
@@ -343,7 +368,8 @@ export function GardenEditorPage() {
         </Button>
       </div>
 
-      <div className="relative min-h-0 flex-1">
+      <div className="relative flex min-h-0 flex-1 flex-col gap-2">
+        {seasonYear !== null && <SeasonBanner year={seasonYear} onExit={() => setSeasonYear(null)} />}
         {focusedObject && (
           <div className="absolute left-2 top-2 z-20 flex flex-wrap items-center gap-2 rounded-lg border border-border bg-surface/90 px-2 py-1.5 text-sm shadow-sm backdrop-blur">
             <button type="button" onClick={exitFocus} className="rounded px-1.5 py-0.5 font-medium text-accent-strong hover:underline">
@@ -380,7 +406,9 @@ export function GardenEditorPage() {
               ))}
           </div>
         )}
-        <GardenCanvas garden={garden} objects={objects} plantings={plantings} plantsById={plantsById} canEdit={canEdit} />
+        <div className="relative min-h-0 flex-1">
+          <GardenCanvas garden={garden} objects={objects} plantings={plantings} plantsById={plantsById} canEdit={canEdit} />
+        </div>
 
         {/* Empty-state hints (non-interactive overlays). */}
         {canEdit && focusedObjectId == null && objects.length === 0 && (