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

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

web/src/components/gardens/GardenCard.tsx

@@ -1,20 +1,30 @@
 import { Link } from '@tanstack/react-router'
 import type { Garden } from '@/lib/gardens'
 import { formatDimensions } from '@/lib/units'
+import { cardActionClass, cardDangerClass } from '@/components/ui/cardActions'
 
 /**
- * One garden as a card: the body links into the editor (/gardens/:id); the
- * footer has edit/delete actions (kept out of the link so they don't navigate).
+ * One garden as a card: the body links into the editor. The footer differs by
+ * role — the owner gets Share / Edit / Delete; a recipient sees a "shared · role"
+ * badge and a Leave action (garden metadata edit + sharing are owner-only).
+ * Ownership is the authoritative ownerId==me check, not the my_role hint.
  */
 export function GardenCard({
   garden,
+  currentUserId,
+  onShare,
   onEdit,
   onDelete,
+  onLeave,
 }: {
   garden: Garden
+  currentUserId?: number
+  onShare: () => void
   onEdit: () => void
   onDelete: () => void
+  onLeave: () => void
 }) {
+  const owner = currentUserId != null && garden.ownerId === currentUserId
   return (
     <div className="flex flex-col rounded-xl border border-border bg-surface transition-colors hover:border-accent/50">
       <Link
@@ -22,27 +32,37 @@ export function GardenCard({
         params={{ gardenId: String(garden.id) }}
         className="flex-1 rounded-t-xl p-4 outline-none focus-visible:ring-2 focus-visible:ring-accent/40"
       >
-        <h3 className="truncate font-semibold text-fg">{garden.name}</h3>
+        <div className="flex items-center gap-2">
+          <h3 className="truncate font-semibold text-fg">{garden.name}</h3>
+          {!owner && garden.myRole && (
+            <span className="shrink-0 rounded bg-border/60 px-1.5 py-0.5 text-[10px] font-medium uppercase tracking-wide text-muted">
+              shared · {garden.myRole}
+            </span>
+          )}
+        </div>
         <p className="mt-1 text-sm text-muted">
           {formatDimensions(garden.widthCm, garden.heightCm, garden.unitPref)}
         </p>
         {garden.notes && <p className="mt-2 line-clamp-2 text-sm text-muted">{garden.notes}</p>}
       </Link>
       <div className="flex justify-end gap-1 border-t border-border px-2 py-1.5">
-        <button
-          type="button"
-          onClick={onEdit}
-          className="rounded-md px-2.5 py-1 text-sm font-medium text-muted outline-none transition-colors hover:bg-border/50 hover:text-fg focus-visible:ring-2 focus-visible:ring-accent/40"
-        >
-          Edit
-        </button>
-        <button
-          type="button"
-          onClick={onDelete}
-          className="rounded-md px-2.5 py-1 text-sm font-medium text-muted outline-none transition-colors hover:bg-red-500/10 hover:text-red-600 focus-visible:ring-2 focus-visible:ring-red-500/40 dark:hover:text-red-400"
-        >
-          Delete
-        </button>
+        {owner ? (
+          <>
+            <button type="button" onClick={onShare} className={cardActionClass}>
+              Share
+            </button>
+            <button type="button" onClick={onEdit} className={cardActionClass}>
+              Edit
+            </button>
+            <button type="button" onClick={onDelete} className={cardDangerClass}>
+              Delete
+            </button>
+          </>
+        ) : (
+          <button type="button" onClick={onLeave} className={cardDangerClass}>
+            Leave
+          </button>
+        )}
       </div>
     </div>
   )

web/src/components/gardens/LeaveGardenModal.tsx

@@ -0,0 +1,47 @@
+import { useState } from 'react'
+import { Modal } from '@/components/ui/Modal'
+import { Alert } from '@/components/ui/Alert'
+import { Button } from '@/components/ui/Button'
+import { errorMessage } from '@/lib/api'
+import { useMe } from '@/lib/auth'
+import type { Garden } from '@/lib/gardens'
+import { useRemoveShare } from '@/lib/shares'
+
+/** Confirmation for a recipient leaving a garden shared with them (removes their
+ *  own share). */
+export function LeaveGardenModal({ garden, onClose }: { garden: Garden; onClose: () => void }) {
+  const me = useMe()
+  const remove = useRemoveShare(garden.id)
+  const [error, setError] = useState<string | null>(null)
+
+  async function onConfirm() {
+    if (!me.data) return
+    setError(null)
+    try {
+      await remove.mutateAsync(me.data.id)
+      onClose()
+    } catch (err) {
+      setError(errorMessage(err, 'Could not leave the garden.'))
+    }
+  }
+
+  return (
+    <Modal title="Leave garden" onClose={onClose} busy={remove.isPending}>
+      <div className="flex flex-col gap-4">
+        <p className="text-sm text-muted">
+          Leave <span className="font-medium text-fg">{garden.name}</span>? You'll lose access until the owner
+          shares it with you again.
+        </p>
+        {error && <Alert>{error}</Alert>}
+        <div className="flex justify-end gap-2">
+          <Button type="button" variant="ghost" onClick={onClose} disabled={remove.isPending}>
+            Cancel
+          </Button>
+          <Button type="button" variant="danger" onClick={onConfirm} disabled={remove.isPending || !me.data}>
+            {remove.isPending ? 'Leaving…' : 'Leave'}
+          </Button>
+        </div>
+      </div>
+    </Modal>
+  )
+}

web/src/components/gardens/ShareGardenModal.tsx

@@ -0,0 +1,132 @@
+import { useState, type FormEvent } from 'react'
+import { Modal } from '@/components/ui/Modal'
+import { Alert } from '@/components/ui/Alert'
+import { Button } from '@/components/ui/Button'
+import { Select } from '@/components/ui/Select'
+import { TextField } from '@/components/ui/TextField'
+import { cn } from '@/lib/cn'
+import { fieldControlClass } from '@/components/ui/field'
+import { errorMessage } from '@/lib/api'
+import type { Garden } from '@/lib/gardens'
+import { useAddShare, useRemoveShare, useShares, useUpdateShareRole, type ShareRole } from '@/lib/shares'
+
+const roleOptions = [
+  { value: 'viewer', label: 'Viewer (read-only)' },
+  { value: 'editor', label: 'Editor (can edit)' },
+]
+
+/**
+ * Owner-only dialog to manage a garden's shares: invite an existing user by
+ * email as viewer/editor, change a share's role, or remove it. Targets existing
+ * accounts only (v1 has no invitation emails) — an unknown email surfaces a
+ * friendly "no account with that email".
+ */
+export function ShareGardenModal({ garden, onClose }: { garden: Garden; onClose: () => void }) {
+  const shares = useShares(garden.id)
+  const add = useAddShare(garden.id)
+  const updateRole = useUpdateShareRole(garden.id)
+  const remove = useRemoveShare(garden.id)
+
+  const [email, setEmail] = useState('')
+  const [role, setRole] = useState<ShareRole>('viewer')
+  const [error, setError] = useState<string | null>(null)
+
+  async function onInvite(e: FormEvent) {
+    e.preventDefault()
+    setError(null)
+    if (!email.trim()) {
+      setError('Enter an email address.')
+      return
+    }
+    try {
+      await add.mutateAsync({ email: email.trim(), role })
+      setEmail('')
+    } catch (err) {
+      setError(errorMessage(err, 'Could not share the garden.'))
+    }
+  }
+
+  const onMutationError = (fallback: string) => (err: unknown) => setError(errorMessage(err, fallback))
+
+  return (
+    <Modal title="Share garden" onClose={onClose} busy={add.isPending || updateRole.isPending || remove.isPending}>
+      <div className="flex flex-col gap-4">
+        <form onSubmit={onInvite} className="flex flex-col gap-2">
+          <TextField
+            label="Invite by email"
+            name="email"
+            type="email"
+            placeholder="[email protected]"
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+          />
+          <div className="flex items-end gap-2">
+            <Select
+              label="Role"
+              name="role"
+              value={role}
+              onChange={(e) => setRole(e.target.value as ShareRole)}
+              options={roleOptions}
+              className="flex-1"
+            />
+            <Button type="submit" disabled={add.isPending}>
+              {add.isPending ? 'Sharing…' : 'Share'}
+            </Button>
+          </div>
+          {error && <Alert>{error}</Alert>}
+        </form>
+
+        <div>
+          <h3 className="mb-2 text-sm font-medium text-fg">Shared with</h3>
+          {shares.isPending && <p className="text-sm text-muted">Loading…</p>}
+          {shares.isError && <Alert>Could not load who this garden is shared with.</Alert>}
+          {shares.isSuccess && shares.data.length === 0 && (
+            <p className="text-sm text-muted">Not shared with anyone yet.</p>
+          )}
+          <ul className="flex flex-col gap-2">
+            {shares.data?.map((sh) => (
+              <li key={sh.userId} className="flex items-center gap-2">
+                <div className="min-w-0 flex-1">
+                  <p className="truncate text-sm font-medium text-fg">{sh.displayName}</p>
+                  <p className="truncate text-xs text-muted">{sh.email}</p>
+                </div>
+                <select
+                  value={sh.role}
+                  onChange={(e) => {
+                    setError(null)
+                    updateRole.mutate(
+                      { userId: sh.userId, role: e.target.value as ShareRole },
+                      { onError: onMutationError('Could not change that role.') },
+                    )
+                  }}
+                  aria-label={`Role for ${sh.displayName}`}
+                  className={cn(fieldControlClass, 'w-auto px-2 py-1 text-sm')}
+                >
+                  <option value="viewer">Viewer</option>
+                  <option value="editor">Editor</option>
+                </select>
+                <button
+                  type="button"
+                  onClick={() => {
+                    setError(null)
+                    remove.mutate(sh.userId, { onError: onMutationError('Could not remove that person.') })
+                  }}
+                  aria-label={`Remove ${sh.displayName}`}
+                  className="rounded-md px-2 py-1 text-sm text-muted transition-colors hover:bg-red-500/10 hover:text-red-600 dark:hover:text-red-400"
+                >
+                  ✕
+                </button>
+              </li>
+            ))}
+          </ul>
+        </div>
+
+        <div className="flex justify-end">
+          <Button variant="ghost" onClick={onClose}>
+            Done
+          </Button>
+        </div>
+      </div>
+    </Modal>
+  )
+}

web/src/components/plants/PlantCard.tsx

@@ -1,14 +1,8 @@
 import { PlantIcon } from './PlantIcon'
+import { cardActionClass, cardDangerClass } from '@/components/ui/cardActions'
 import { CATEGORY_LABELS, isBuiltin, type Plant } from '@/lib/plants'
 import { formatSpacing, type UnitPref } from '@/lib/units'
 
-const actionClass =
-  'rounded-md px-2.5 py-1 text-sm font-medium text-muted outline-none transition-colors ' +
-  'hover:bg-border/50 hover:text-fg focus-visible:ring-2 focus-visible:ring-accent/40'
-const dangerClass =
-  'rounded-md px-2.5 py-1 text-sm font-medium text-muted outline-none transition-colors ' +
-  'hover:bg-red-500/10 hover:text-red-600 focus-visible:ring-2 focus-visible:ring-red-500/40 dark:hover:text-red-400'
-
 /**
  * One catalog plant as a card: icon tile tinted with the plant's color, name,
  * category + mature spacing (unit-aware), and actions. Built-ins are badged and
@@ -53,16 +47,16 @@ export function PlantCard({
         />
       </div>
       <div className="flex justify-end gap-1 border-t border-border px-2 py-1.5">
-        <button type="button" onClick={onDuplicate} className={actionClass}>
+        <button type="button" onClick={onDuplicate} className={cardActionClass}>
           Duplicate
         </button>
         {!builtin && (
-          <button type="button" onClick={onEdit} className={actionClass}>
+          <button type="button" onClick={onEdit} className={cardActionClass}>
             Edit
           </button>
         )}
         {!builtin && (
-          <button type="button" onClick={onDelete} className={dangerClass}>
+          <button type="button" onClick={onDelete} className={cardDangerClass}>
             Delete
           </button>
         )}

web/src/components/ui/cardActions.ts

@@ -0,0 +1,10 @@
+// Shared footer-action button styling for list cards (garden/plant), so the
+// verbatim class strings don't drift between them.
+
+export const cardActionClass =
+  'rounded-md px-2.5 py-1 text-sm font-medium text-muted outline-none transition-colors ' +
+  'hover:bg-border/50 hover:text-fg focus-visible:ring-2 focus-visible:ring-accent/40'
+
+export const cardDangerClass =
+  'rounded-md px-2.5 py-1 text-sm font-medium text-muted outline-none transition-colors ' +
+  'hover:bg-red-500/10 hover:text-red-600 focus-visible:ring-2 focus-visible:ring-red-500/40 dark:hover:text-red-400'