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>
   )