Journal UI: write and read season notes where you're already looking (#53) (#67)

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

web/src/editor/EditorRail.tsx

@@ -4,9 +4,9 @@ import { cn } from '@/lib/cn'
 /**
  * The editor's side rail, and the answer to "four things want one rail".
  *
- * The inspector, history, and (later) the journal and chat panel all want the
- * same strip of screen. Rather than each bolting on its own chrome, they are
- * tabs in one rail — which keeps the canvas one width instead of a different
+ * The inspector, history, journal, and (later) the chat panel all want the same
+ * strip of screen. Rather than each bolting on its own chrome, they are tabs in
+ * one rail — which keeps the canvas one width instead of a different
  * width per panel, and means adding the journal or chat is adding a tab.
  *
  * Two constraints shaped it:

web/src/editor/Inspector.tsx

@@ -31,12 +31,20 @@ export function Inspector({
   gardenId,
   unit,
   onFocus,
+  onAddNote,
+  noteCount = 0,
   readOnly = false,
 }: {
   object: EditorObject
   gardenId: number
   unit: UnitPref
   onFocus?: () => void
+  /** Opens the journal scoped to this object. Two taps from a selected bed to
+   *  typing is the bar; anything more and the log stays empty. */
+  onAddNote?: () => void
+  /** How many journal entries are about this object, so the log is discoverable
+   *  from the thing it's about rather than being a panel you have to remember. */
+  noteCount?: number
   readOnly?: boolean
 }) {
   const update = useUpdateObject(gardenId)
@@ -134,6 +142,16 @@ export function Inspector({
         </Button>
       )}
 
+      {onAddNote && (
+        <Button variant="ghost" onClick={onAddNote} className="w-full text-sm">
+          {noteCount > 0
+            ? `📝 ${noteCount} ${noteCount === 1 ? 'note' : 'notes'}`
+            : readOnly
+              ? '📝 No notes'
+              : '📝 Add note'}
+        </Button>
+      )}
+
       {/* A disabled fieldset makes every control below read-only for viewers in
           one shot (no per-input disabled). */}
       <fieldset disabled={readOnly} className="flex min-w-0 flex-col gap-3 border-0 p-0">

web/src/editor/JournalPanel.tsx

@@ -0,0 +1,309 @@
+import { useState } from 'react'
+import { Alert } from '@/components/ui/Alert'
+import { Button } from '@/components/ui/Button'
+import { TextArea } from '@/components/ui/TextArea'
+import { TextField } from '@/components/ui/TextField'
+import { errorMessage } from '@/lib/api'
+import {
+  formatObservedAt,
+  today,
+  useCreateJournalEntry,
+  useDeleteJournalEntry,
+  useJournal,
+  useUpdateJournalEntry,
+  type JournalEntry,
+} from '@/lib/journal'
+import type { EditorObject } from './types'
+import { objectDisplayName } from './kinds'
+
+/**
+ * The garden's journal: write an entry, read the season back.
+ *
+ * Notes get written standing in the garden holding a phone, usually one-handed.
+ * If it takes more than a couple of taps from looking at a bed to typing a
+ * sentence, the log stays empty — so the composer is open by default rather than
+ * behind an "add" button, and selecting a bed pre-scopes it to that bed.
+ */
+export function JournalPanel({
+  gardenId,
+  canEdit,
+  currentUserId,
+  isOwner,
+  objects,
+  scopeObjectId,
+  onScopeChange,
+}: {
+  gardenId: number
+  canEdit: boolean
+  currentUserId?: number
+  isOwner: boolean
+  objects: EditorObject[]
+  /** Which bed the panel is filtered to, if any. */
+  scopeObjectId: number | null
+  onScopeChange: (id: number | null) => void
+}) {
+  const filter = scopeObjectId != null ? { objectId: scopeObjectId } : {}
+  const journal = useJournal(gardenId, filter)
+  const entries = journal.data?.pages.flatMap((p) => p.entries) ?? []
+  const scopedObject = objects.find((o) => o.id === scopeObjectId) ?? null
+
+  return (
+    <div className="flex flex-col gap-3">
+      <div className="flex items-center justify-between gap-2">
+        <h2 className="text-sm font-semibold text-fg">Journal</h2>
+        {objects.length > 0 && (
+          <select
+            value={scopeObjectId ?? ''}
+            onChange={(e) => {
+              const id = Number(e.target.value)
+              onScopeChange(e.target.value === '' || !Number.isFinite(id) ? null : id)
+            }}
+            className="max-w-[9rem] truncate 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="">Whole garden</option>
+            {objects.map((o) => (
+              <option key={o.id} value={o.id}>
+                {objectDisplayName(o)}
+              </option>
+            ))}
+          </select>
+        )}
+      </div>
+
+      {canEdit && (
+        <Composer
+          gardenId={gardenId}
+          objectId={scopeObjectId}
+          scopeLabel={scopedObject ? objectDisplayName(scopedObject) : null}
+        />
+      )}
+
+      {journal.isPending && <p className="text-sm text-muted">Loading…</p>}
+      {journal.isError && entries.length === 0 && (
+        <Alert>{errorMessage(journal.error, 'Could not load the journal.')}</Alert>
+      )}
+
+      {journal.isSuccess && entries.length === 0 && (
+        <p className="text-sm text-muted">
+          {scopedObject
+            ? `Nothing written about ${objectDisplayName(scopedObject)} yet.`
+            : 'Nothing written yet. This is where what happened goes — when something went in, what came up, what the frost got. Next year you get to read it back.'}
+        </p>
+      )}
+
+      <ol className="flex flex-col gap-2">
+        {entries.map((e) => (
+          <Entry
+            key={e.id}
+            entry={e}
+            gardenId={gardenId}
+            objects={objects}
+            canDelete={canEdit && (e.authorId === currentUserId || isOwner)}
+            canRewrite={canEdit && e.authorId === currentUserId}
+          />
+        ))}
+      </ol>
+
+      {journal.hasNextPage && (
+        <Button
+          variant="ghost"
+          className="text-sm"
+          disabled={journal.isFetchingNextPage}
+          onClick={() => void journal.fetchNextPage()}
+        >
+          {journal.isFetchingNextPage ? 'Loading…' : 'Load older'}
+        </Button>
+      )}
+      {journal.isError && entries.length > 0 && (
+        <p className="text-xs text-red-700 dark:text-red-400">
+          {errorMessage(journal.error, "Couldn't load older entries.")}
+        </p>
+      )}
+    </div>
+  )
+}
+
+function Composer({
+  gardenId,
+  objectId,
+  scopeLabel,
+}: {
+  gardenId: number
+  objectId: number | null
+  scopeLabel: string | null
+}) {
+  const create = useCreateJournalEntry(gardenId)
+  const [body, setBody] = useState('')
+  // Editable so an observation can be backdated: you write up Saturday on Sunday.
+  const [observedAt, setObservedAt] = useState(today())
+  const [error, setError] = useState<string | null>(null)
+
+  const submit = () => {
+    const text = body.trim()
+    if (!text) return
+    setError(null)
+    create.mutate(
+      { body: text, observedAt, objectId: objectId ?? undefined },
+      {
+        onSuccess: () => {
+          setBody('')
+          setObservedAt(today())
+        },
+        onError: (err) => setError(errorMessage(err, "Couldn't save that note.")),
+      },
+    )
+  }
+
+  return (
+    <div className="flex flex-col gap-2 rounded-lg border border-border p-2">
+      <TextArea
+        label={scopeLabel ? `Note about ${scopeLabel}` : 'Note'}
+        name="journalBody"
+        rows={3}
+        placeholder="What happened?"
+        value={body}
+        onChange={(e) => setBody(e.target.value)}
+      />
+      <div className="flex items-end gap-2">
+        <div className="flex-1">
+          <TextField
+            label="Observed"
+            name="observedAt"
+            type="date"
+            value={observedAt}
+            onChange={(e) => setObservedAt(e.target.value)}
+          />
+        </div>
+        <Button className="shrink-0" disabled={create.isPending || body.trim() === ''} onClick={submit}>
+          {create.isPending ? 'Saving…' : 'Save note'}
+        </Button>
+      </div>
+      {error && <p className="text-xs text-red-700 dark:text-red-400">{error}</p>}
+    </div>
+  )
+}
+
+function Entry({
+  entry,
+  gardenId,
+  objects,
+  canDelete,
+  canRewrite,
+}: {
+  entry: JournalEntry
+  gardenId: number
+  objects: EditorObject[]
+  /** May remove it: the author, or the garden owner. */
+  canDelete: boolean
+  /** May rewrite the text: the author only — rewriting someone else's
+   *  observation under their name is a different act from removing it. */
+  canRewrite: boolean
+}) {
+  const update = useUpdateJournalEntry(gardenId)
+  const del = useDeleteJournalEntry(gardenId)
+  const [editing, setEditing] = useState(false)
+  const [draft, setDraft] = useState(entry.body)
+  const [error, setError] = useState<string | null>(null)
+  const about = objects.find((o) => o.id === entry.objectId) ?? null
+
+  // Re-sync the draft when the entry changes underneath — a refetch after
+  // someone else's edit, or this entry's own successful save. Skipped while
+  // editing so a background refetch can't clobber what's being typed; the
+  // version guard is what catches a genuine collision.
+  const [syncedBody, setSyncedBody] = useState(entry.body)
+  if (!editing && entry.body !== syncedBody) {
+    setSyncedBody(entry.body)
+    setDraft(entry.body)
+  }
+
+  const save = () => {
+    const text = draft.trim()
+    if (!text) {
+      // Silence here reads as a broken button; say why nothing happened.
+      setError('An entry needs some text. Delete it instead if that\'s what you meant.')
+      return
+    }
+    setError(null)
+    update.mutate(
+      { id: entry.id, version: entry.version, body: text },
+      {
+        onSuccess: () => {
+          setEditing(false)
+          setError(null)
+        },
+        onError: (err) => setError(errorMessage(err, "Couldn't save that edit.")),
+      },
+    )
+  }
+
+  return (
+    <li className="rounded-lg border border-border px-2.5 py-2 text-sm">
+      {editing ? (
+        <div className="flex flex-col gap-2">
+          <TextArea label="Note" name={`entry-${entry.id}`} rows={3} value={draft} onChange={(e) => setDraft(e.target.value)} />
+          <div className="flex justify-end gap-1">
+            <Button
+              variant="ghost"
+              className="px-2 py-1 text-xs"
+              onClick={() => {
+                setDraft(entry.body)
+                setEditing(false)
+                setError(null)
+              }}
+            >
+              Cancel
+            </Button>
+            <Button className="px-2 py-1 text-xs" disabled={update.isPending} onClick={save}>
+              {update.isPending ? 'Saving…' : 'Save'}
+            </Button>
+          </div>
+        </div>
+      ) : (
+        <p className="whitespace-pre-wrap text-fg">{entry.body}</p>
+      )}
+
+      <p className="mt-1 flex flex-wrap items-center gap-x-1.5 gap-y-1 text-xs text-muted">
+        <time dateTime={entry.observedAt}>{formatObservedAt(entry.observedAt)}</time>
+        <span aria-hidden>·</span>
+        <span>{entry.authorName}</span>
+        {about && (
+          <>
+            <span aria-hidden>·</span>
+            <span className="rounded bg-border/60 px-1 py-px">{objectDisplayName(about)}</span>
+          </>
+        )}
+        {entry.plantingId != null && <span className="rounded bg-border/60 px-1 py-px">planting</span>}
+      </p>
+
+      {(canRewrite || canDelete) && !editing && (
+        <div className="mt-1 flex justify-end gap-1">
+          {canRewrite && (
+            <button
+              type="button"
+              onClick={() => setEditing(true)}
+              className="rounded px-1.5 py-0.5 text-xs text-muted outline-none hover:text-fg focus-visible:ring-2 focus-visible:ring-accent/40"
+            >
+              Edit
+            </button>
+          )}
+          {canDelete && (
+            <button
+              type="button"
+              disabled={del.isPending}
+              onClick={() => {
+                setError(null) // clear a previous failure so a retry isn't read as another
+                del.mutate(entry.id, {
+                  onError: (err) => setError(errorMessage(err, "Couldn't delete that note.")),
+                })
+              }}
+              className="rounded px-1.5 py-0.5 text-xs text-red-700 outline-none hover:underline focus-visible:ring-2 focus-visible:ring-accent/40 dark:text-red-400"
+            >
+              Delete
+            </button>
+          )}
+        </div>
+      )}
+      {error && <p className="mt-1 text-xs text-red-700 dark:text-red-400">{error}</p>}
+    </li>
+  )
+}

web/src/editor/store.ts

@@ -38,6 +38,12 @@ interface EditorState {
   seasonYear: number | null
   setSeasonYear: (year: number | null) => void
 
+  // Which bed the journal tab is filtered to, or null for the whole garden.
+  // Separate from selectedId deliberately: you can scope the journal to a bed
+  // and then select something else without the list moving under you.
+  journalObjectId: number | null
+  setJournalObjectId: (id: 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
@@ -88,6 +94,9 @@ export const useEditorStore = create<EditorState>((set) => ({
   seasonYear: null,
   setSeasonYear: (year) => set({ seasonYear: year }),
 
+  journalObjectId: null,
+  setJournalObjectId: (id) => set({ journalObjectId: id }),
+
   armedPlant: null,
   setArmedPlant: (p) => set({ armedPlant: p }),
 
@@ -114,5 +123,6 @@ export const useEditorStore = create<EditorState>((set) => ({
       livePlanting: null,
       railTab: null,
       seasonYear: null,
+      journalObjectId: null,
     }),
 }))