Sharing UI: invite by email, roles, read-only viewer mode (#17)

Co-authored-by: Steve Dudenhoeffer <[email protected]>
2026-07-19 04:14:30 +00:00
parent 2a86f87b50
commit c2dd93a93d
12 changed files with 598 additions and 238 deletions
@@ -27,11 +27,13 @@ export function Inspector({
  gardenId,
  unit,
  onFocus,
+  readOnly = false,
 }: {
  object: EditorObject
  gardenId: number
  unit: UnitPref
  onFocus?: () => void
+  readOnly?: boolean
 }) {
  const update = useUpdateObject(gardenId)
  const del = useDeleteObject(gardenId)
@@ -64,8 +66,10 @@ export function Inspector({
    setColor(object.color ?? DEFAULT_COLOR)
  }, [object.version, object.widthCm, object.heightCm, object.xCm, object.yCm, object.rotationDeg, object.name, object.notes, object.color, unit])

-  const patch = (fields: Partial<Omit<EditorObject, 'id' | 'version'>>) =>
+  const patch = (fields: Partial<Omit<EditorObject, 'id' | 'version'>>) => {
+    if (readOnly) return // a blur mustn't fire a mutation if the role changed mid-edit
    update.mutate({ id: object.id, version: object.version, ...fields })
+  }

  // Commit a dimension/position field. `positive` gates width/height (must be
  // ≥ the server minimum) but not x/y, which may be zero or negative. Compare at
@@ -96,148 +100,157 @@ export function Inspector({
        </button>
      </div>

-      {object.plantable && onFocus && (
+      {readOnly && (
+        <p className="rounded-md bg-border/40 px-2 py-1 text-xs text-muted">View only — you can't edit this garden.</p>
+      )}
+
+      {!readOnly && object.plantable && onFocus && (
        <Button onClick={onFocus} className="w-full">
          🌱 Plant here
        </Button>
      )}

-      <TextField
-        label="Name"
-        name="name"
-        value={name}
-        onChange={(e) => setName(e.target.value)}
-        onBlur={() => name !== object.name && patch({ name })}
-      />
+      {/* 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">
+        <TextField
+          label="Name"
+          name="name"
+          value={name}
+          onChange={(e) => setName(e.target.value)}
+          onBlur={() => name !== object.name && patch({ name })}
+        />

-      <div className="grid grid-cols-2 gap-2">
-        <TextField
-          label={`Width (${u})`}
-          name="width"
-          type="number"
-          inputMode="decimal"
-          step="any"
-          value={width}
-          onChange={(e) => setWidth(e.target.value)}
-          onBlur={() => commitDim(width, object.widthCm, (cm) => patch({ widthCm: cm }), true)}
-        />
-        <TextField
-          label={`Height (${u})`}
-          name="height"
-          type="number"
-          inputMode="decimal"
-          step="any"
-          value={height}
-          onChange={(e) => setHeight(e.target.value)}
-          onBlur={() => commitDim(height, object.heightCm, (cm) => patch({ heightCm: cm }), true)}
-        />
-        <TextField
-          label={`X (${u})`}
-          name="x"
-          type="number"
-          inputMode="decimal"
-          step="any"
-          value={x}
-          onChange={(e) => setX(e.target.value)}
-          onBlur={() => commitDim(x, object.xCm, (cm) => patch({ xCm: cm }))}
-        />
-        <TextField
-          label={`Y (${u})`}
-          name="y"
-          type="number"
-          inputMode="decimal"
-          step="any"
-          value={y}
-          onChange={(e) => setY(e.target.value)}
-          onBlur={() => commitDim(y, object.yCm, (cm) => patch({ yCm: cm }))}
-        />
-      </div>
-
-      <TextField
-        label="Rotation (°)"
-        name="rotation"
-        type="number"
-        inputMode="numeric"
-        step="1"
-        value={rotation}
-        onChange={(e) => setRotation(e.target.value)}
-        onBlur={() => {
-          const v = parseFloat(rotation)
-          if (Number.isFinite(v) && v !== object.rotationDeg) patch({ rotationDeg: v })
-        }}
-      />
-
-      <div className="flex items-end gap-2">
-        <div className="flex flex-col gap-1.5">
-          <label htmlFor="obj-color" className="text-sm font-medium text-fg">
-            Color
-          </label>
-          <input
-            id="obj-color"
-            type="color"
-            value={color}
-            // onChange fires continuously while dragging in the native picker;
-            // track it locally for the live swatch and commit one PATCH on blur.
-            onChange={(e: ChangeEvent<HTMLInputElement>) => setColor(e.target.value)}
-            onBlur={() => color !== (object.color ?? DEFAULT_COLOR) && patch({ color })}
-            className="h-9 w-14 cursor-pointer rounded-md border border-border bg-surface"
+        <div className="grid grid-cols-2 gap-2">
+          <TextField
+            label={`Width (${u})`}
+            name="width"
+            type="number"
+            inputMode="decimal"
+            step="any"
+            value={width}
+            onChange={(e) => setWidth(e.target.value)}
+            onBlur={() => commitDim(width, object.widthCm, (cm) => patch({ widthCm: cm }), true)}
+          />
+          <TextField
+            label={`Height (${u})`}
+            name="height"
+            type="number"
+            inputMode="decimal"
+            step="any"
+            value={height}
+            onChange={(e) => setHeight(e.target.value)}
+            onBlur={() => commitDim(height, object.heightCm, (cm) => patch({ heightCm: cm }), true)}
+          />
+          <TextField
+            label={`X (${u})`}
+            name="x"
+            type="number"
+            inputMode="decimal"
+            step="any"
+            value={x}
+            onChange={(e) => setX(e.target.value)}
+            onBlur={() => commitDim(x, object.xCm, (cm) => patch({ xCm: cm }))}
+          />
+          <TextField
+            label={`Y (${u})`}
+            name="y"
+            type="number"
+            inputMode="decimal"
+            step="any"
+            value={y}
+            onChange={(e) => setY(e.target.value)}
+            onBlur={() => commitDim(y, object.yCm, (cm) => patch({ yCm: cm }))}
          />
        </div>
-        {object.color && (
-          <Button
-            variant="ghost"
-            className="px-2 py-1.5 text-xs"
-            onClick={() => {
-              setColor(DEFAULT_COLOR)
-              patch({ color: null })
-            }}
-          >
-            Clear
-          </Button>
-        )}
-      </div>

-      <label className="flex items-center gap-2 text-sm text-fg">
-        <input
-          type="checkbox"
-          checked={object.plantable}
-          onChange={(e) => patch({ plantable: e.target.checked })}
-          className="h-4 w-4 rounded border-border"
+        <TextField
+          label="Rotation (°)"
+          name="rotation"
+          type="number"
+          inputMode="numeric"
+          step="1"
+          value={rotation}
+          onChange={(e) => setRotation(e.target.value)}
+          onBlur={() => {
+            const v = parseFloat(rotation)
+            if (Number.isFinite(v) && v !== object.rotationDeg) patch({ rotationDeg: v })
+          }}
        />
-        Plantable
-      </label>

-      <TextArea
-        label="Notes"
-        name="notes"
-        rows={2}
-        value={notes}
-        onChange={(e) => setNotes(e.target.value)}
-        onBlur={() => notes !== object.notes && patch({ notes })}
-      />
-
-      {confirmingDelete ? (
-        <div className="flex items-center gap-2">
-          <Button
-            variant="danger"
-            className="flex-1"
-            disabled={del.isPending}
-            onClick={() => {
-              select(null)
-              del.mutate(object.id)
-            }}
-          >
-            Confirm delete
-          </Button>
-          <Button variant="ghost" onClick={() => setConfirmingDelete(false)}>
-            Cancel
-          </Button>
+        <div className="flex items-end gap-2">
+          <div className="flex flex-col gap-1.5">
+            <label htmlFor="obj-color" className="text-sm font-medium text-fg">
+              Color
+            </label>
+            <input
+              id="obj-color"
+              type="color"
+              value={color}
+              // onChange fires continuously while dragging in the native picker;
+              // track it locally for the live swatch and commit one PATCH on blur.
+              onChange={(e: ChangeEvent<HTMLInputElement>) => setColor(e.target.value)}
+              onBlur={() => color !== (object.color ?? DEFAULT_COLOR) && patch({ color })}
+              className="h-9 w-14 cursor-pointer rounded-md border border-border bg-surface"
+            />
+          </div>
+          {object.color && (
+            <Button
+              variant="ghost"
+              className="px-2 py-1.5 text-xs"
+              onClick={() => {
+                setColor(DEFAULT_COLOR)
+                patch({ color: null })
+              }}
+            >
+              Clear
+            </Button>
+          )}
        </div>
-      ) : (
-        <Button variant="ghost" className="text-red-600 dark:text-red-400" onClick={() => setConfirmingDelete(true)}>
-          Delete object
-        </Button>
-      )}
+
+        <label className="flex items-center gap-2 text-sm text-fg">
+          <input
+            type="checkbox"
+            checked={object.plantable}
+            onChange={(e) => patch({ plantable: e.target.checked })}
+            className="h-4 w-4 rounded border-border"
+          />
+          Plantable
+        </label>
+
+          <TextArea
+            label="Notes"
+            name="notes"
+            rows={2}
+            value={notes}
+            onChange={(e) => setNotes(e.target.value)}
+            onBlur={() => notes !== object.notes && patch({ notes })}
+          />
+      </fieldset>
+
+      {!readOnly &&
+        (confirmingDelete ? (
+          <div className="flex items-center gap-2">
+            <Button
+              variant="danger"
+              className="flex-1"
+              disabled={del.isPending}
+              onClick={() => {
+                select(null)
+                del.mutate(object.id)
+              }}
+            >
+              Confirm delete
+            </Button>
+            <Button variant="ghost" onClick={() => setConfirmingDelete(false)}>
+              Cancel
+            </Button>
+          </div>
+        ) : (
+          <Button variant="ghost" className="text-red-600 dark:text-red-400" onClick={() => setConfirmingDelete(true)}>
+            Delete object
+          </Button>
+        ))}
    </div>
  )
 }