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

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

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