Address #123 review: viewers can read plop notes; tighten the API
Build image / build-and-push (push) Successful in 11s

- The "add note" affordance no longer hides from viewers (it claimed
  parity with the bed inspector but gated on !readOnly). A viewer now sees
  "📓 Notes about this plant" and can open the plop's journal to read it;
  the composer stays edit-gated, so they can't write. Real parity now.
- onScopePlantingChange is required, matching onScopeChange (its bed twin),
  so a caller can't pass a plop scope with no way to clear it. Dropped the
  now-dead guard on the "Show all" button.
- Pulled the plop-over-bed scope-label priority into one `scopeLabel`,
  shared by the filter's sibling logic and the composer, so they can't
  drift; trimmed the invariant comment that was restated a third time.

Co-Authored-By: Claude Opus 4.8 (1M context) <[email protected]>
Claude-Session: https://claude.ai/code/session_01H3zbym8Doka2d7D48maSgZ
This commit is contained in:
2026-07-22 21:41:11 -04:00
co-authored by Claude Opus 4.8
parent 7015148edf
commit f14875557b
2 changed files with 22 additions and 23 deletions
+17 -20
View File
@@ -37,7 +37,7 @@ export function JournalPanel({
objects, objects,
scopeObjectId, scopeObjectId,
onScopeChange, onScopeChange,
scopePlantingId = null, scopePlantingId,
onScopePlantingChange, onScopePlantingChange,
}: { }: {
gardenId: number gardenId: number
@@ -48,17 +48,19 @@ export function JournalPanel({
/** Which bed the panel is filtered to, if any. */ /** Which bed the panel is filtered to, if any. */
scopeObjectId: number | null scopeObjectId: number | null
onScopeChange: (id: number | null) => void onScopeChange: (id: number | null) => void
/** Which single plop the panel is filtered to, if any (#85). Mutually /** Which single plop the panel is filtered to, if any (#85). The store keeps
* exclusive with scopeObjectId — the editor store enforces that. */ * this mutually exclusive with scopeObjectId. Required like its bed twin. */
scopePlantingId?: number | null scopePlantingId: number | null
onScopePlantingChange?: (id: number | null) => void onScopePlantingChange: (id: number | null) => void
}) { }) {
// Date-range narrowing (#85): the backend and JournalFilter already supported // Date-range narrowing (#85): the backend and JournalFilter already supported
// from/to; they just had no UI. Empty inputs don't filter. // from/to; they just had no UI. Empty inputs don't filter.
const [from, setFrom] = useState('') const [from, setFrom] = useState('')
const [to, setTo] = useState('') const [to, setTo] = useState('')
// A plop scope wins over a bed scope — the two are mutually exclusive in the const scopedObject = objects.find((o) => o.id === scopeObjectId) ?? null
// store, but guard here too so the filter is never double-scoped. // One source of scope priority — plop over bed — for both the filter and the
// composer's label, so they can't drift.
const scopeLabel = scopePlantingId != null ? 'this planting' : scopedObject ? objectDisplayName(scopedObject) : null
const filter = { const filter = {
...(scopePlantingId != null ...(scopePlantingId != null
? { plantingId: scopePlantingId } ? { plantingId: scopePlantingId }
@@ -70,7 +72,6 @@ export function JournalPanel({
} }
const journal = useJournal(gardenId, filter) const journal = useJournal(gardenId, filter)
const entries = journal.data?.pages.flatMap((p) => p.entries) ?? [] const entries = journal.data?.pages.flatMap((p) => p.entries) ?? []
const scopedObject = objects.find((o) => o.id === scopeObjectId) ?? null
return ( return (
<div className="flex flex-col gap-3"> <div className="flex flex-col gap-3">
@@ -98,15 +99,13 @@ export function JournalPanel({
{scopePlantingId != null && ( {scopePlantingId != null && (
<div className="flex items-center justify-between gap-2 rounded-md bg-accent/10 px-2 py-1 text-xs"> <div className="flex items-center justify-between gap-2 rounded-md bg-accent/10 px-2 py-1 text-xs">
<span className="text-accent-strong">Notes about one planting</span> <span className="text-accent-strong">Notes about one planting</span>
{onScopePlantingChange && ( <button
<button type="button"
type="button" onClick={() => onScopePlantingChange(null)}
onClick={() => onScopePlantingChange(null)} className="rounded px-1 text-muted outline-none hover:text-fg focus-visible:ring-2 focus-visible:ring-accent/40"
className="rounded px-1 text-muted outline-none hover:text-fg focus-visible:ring-2 focus-visible:ring-accent/40" >
> Show all
Show all </button>
</button>
)}
</div> </div>
)} )}
@@ -150,9 +149,7 @@ export function JournalPanel({
gardenId={gardenId} gardenId={gardenId}
objectId={scopePlantingId != null ? null : scopeObjectId} objectId={scopePlantingId != null ? null : scopeObjectId}
plantingId={scopePlantingId} plantingId={scopePlantingId}
scopeLabel={ scopeLabel={scopeLabel}
scopePlantingId != null ? 'this planting' : scopedObject ? objectDisplayName(scopedObject) : null
}
/> />
)} )}
+5 -3
View File
@@ -35,7 +35,9 @@ export function PlopInspector({
onChangePlant: () => void onChangePlant: () => void
onClose: () => void onClose: () => void
/** Scope the journal to this plop and open it — the plop parallel of the bed /** Scope the journal to this plop and open it — the plop parallel of the bed
* inspector's "add note" (#85). Absent for a viewer, who can't write notes. */ * inspector's "add note" (#85). Offered to viewers too (to READ the plop's
* notes, like the bed inspector does); the journal's composer is separately
* gated on edit rights, so a viewer just sees the entries. */
onAddNote?: () => void onAddNote?: () => void
readOnly?: boolean readOnly?: boolean
}) { }) {
@@ -176,9 +178,9 @@ export function PlopInspector({
/> />
</fieldset> </fieldset>
{!readOnly && onAddNote && ( {onAddNote && (
<Button variant="ghost" className="justify-start px-2 py-1 text-sm" onClick={onAddNote}> <Button variant="ghost" className="justify-start px-2 py-1 text-sm" onClick={onAddNote}>
📓 Add a note about this plant 📓 {readOnly ? 'Notes about this plant' : 'Add a note about this plant'}
</Button> </Button>
)} )}