web/src/editor/JournalPanel.tsx

@@ -37,7 +37,7 @@ export function JournalPanel({
   objects,
   scopeObjectId,
   onScopeChange,
-  scopePlantingId = null,
+  scopePlantingId,
   onScopePlantingChange,
 }: {
   gardenId: number
@@ -48,17 +48,19 @@ export function JournalPanel({
   /** Which bed the panel is filtered to, if any. */
   scopeObjectId: number | null
   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
   // from/to; they just had no UI. Empty inputs don't filter.
   const [from, setFrom] = 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 = {
     ...(scopePlantingId != null
       ? { plantingId: scopePlantingId }
@@ -70,7 +72,6 @@ export function JournalPanel({
   }
   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">
@@ -98,7 +99,6 @@ export function JournalPanel({
       {scopePlantingId != null && (
         <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>
-          {onScopePlantingChange && (
           <button
             type="button"
             onClick={() => onScopePlantingChange(null)}
@@ -106,7 +106,6 @@ export function JournalPanel({
           >
             Show all
           </button>
-          )}
         </div>
       )}
 
@@ -150,9 +149,7 @@ export function JournalPanel({
           gardenId={gardenId}
           objectId={scopePlantingId != null ? null : scopeObjectId}
           plantingId={scopePlantingId}
-          scopeLabel={
+          scopeLabel={scopeLabel}
-            scopePlantingId != null ? 'this planting' : scopedObject ? objectDisplayName(scopedObject) : null
-          }
         />
       )}
 

web/src/editor/PlopInspector.tsx

@@ -35,7 +35,9 @@ export function PlopInspector({
   onChangePlant: () => void
   onClose: () => void
   /** 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
   readOnly?: boolean
 }) {
@@ -176,9 +178,9 @@ export function PlopInspector({
         />
       </fieldset>
 
-      {!readOnly && onAddNote && (
+      {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>
       )}