Refine workspaces and event publishing; harden uploads and email delivery

apps/web/src/app/dashboard/events/[id]/event-people.tsx

@@ -1,5 +1,7 @@
 "use client";
 
+import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+
 import { useState } from "react";
 import { toast } from "sonner";
 import type { EventRole } from "@album/contracts";
@@ -7,6 +9,10 @@ import { api } from "@/trpc/react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Badge } from "@/components/ui/badge";
+import { MailIcon } from "lucide-react";
+import { effectiveEvent } from "@/lib/event-lifecycle";
+import { galleryIsPublic } from "@/lib/publishing";
+import { EmailHistory } from "./email-history";
 import {
   Card,
   CardContent,
@@ -16,6 +22,7 @@ import {
 } from "@/components/ui/card";
 
 const roles: EventRole[] = ["owner", "manager", "moderator", "viewer"];
+const roleLabels: Record<EventRole, string> = { owner: "Owner", manager: "Manager", moderator: "Moderator", viewer: "Viewer" };
 
 export function EventPeople({
   eventId,
@@ -28,6 +35,16 @@ export function EventPeople({
 }) {
   const utils = api.useUtils();
   const members = api.manager.members.useQuery({ eventId });
+  const guests = api.manager.guests.useQuery({ eventId }, { refetchInterval: 5000 });
+  const [guestSearch, setGuestSearch] = useState("");
+  const [preview, setPreview] = useState(false);
+  const emailPreview = api.manager.emailPreview.useQuery({ eventId }, { enabled: preview });
+  const notify = api.manager.notifyGuests.useMutation({
+    onSuccess: async (result) => { toast.success(`${result.queued} emails queued`); setPreview(false); await utils.manager.guests.invalidate({ eventId }); },
+    onError: (error) => toast.error(error.message),
+  });
+  const previouslyContacted = new Set((guests.data ?? []).filter((guest) => guest.email && (guest.notifiedAt || guest.notificationClaimedAt)).map((guest) => guest.email!.toLowerCase()));
+  const eligible = new Set((guests.data ?? []).filter((guest) => guest.email && guest.notifyWhenReady && !previouslyContacted.has(guest.email.toLowerCase())).map((guest) => guest.email!.toLowerCase())).size;
   const [email, setEmail] = useState("");
   const [role, setRole] = useState<EventRole>("manager");
   const setMember = api.manager.setMember.useMutation({
@@ -55,10 +72,33 @@ export function EventPeople({
       <CardHeader>
         <CardTitle>People</CardTitle>
         <CardDescription>
-          The couple can both be owners. Managers run the day. Moderators review photos.
+          Guests attend or receive gallery notifications. Accounts have permission to manage this event; attending does not grant account access.
         </CardDescription>
       </CardHeader>
       <CardContent className="flex flex-col gap-4">
+        <h3 className="text-lg font-semibold">Guests</h3>
+        <Input aria-label="Search guests" placeholder="Search guests by name or email" value={guestSearch} onChange={(e) => setGuestSearch(e.target.value)} />
+        {guests.isLoading ? <p>Loading guests…</p> : guests.isError ? <p role="alert">Could not load guests.</p> : !guests.data?.length ? <p className="text-muted-foreground">No guests yet. Guests appear when they register their details or contribute.</p> : null}
+        <ul className="flex flex-col gap-3">
+          {(guests.data ?? []).filter((guest) => `${guest.displayName ?? ""} ${guest.email ?? ""}`.toLowerCase().includes(guestSearch.toLowerCase())).map((guest) => <li key={guest.id} className="flex flex-wrap items-center justify-between gap-3 rounded-lg border p-3">
+            <div><p className="font-medium">{guest.displayName ?? "Anonymous guest"}</p><p className="text-xs text-muted-foreground">{guest.email ?? "No email provided"}</p></div>
+            <Badge variant="secondary">{guest.notifiedAt ? `Emailed ${new Date(guest.notifiedAt).toLocaleDateString()}` : guest.notificationClaimedAt ? "Delivery pending / needs review" : guest.email && guest.notifyWhenReady ? "Opted into gallery email" : "Not subscribed"}</Badge>
+          </li>)}
+        </ul>
+        {event.data?.permissions.includes("gallery.release") ? <div className="flex flex-col gap-3">
+          <Button type="button" variant="outline" onClick={() => setPreview(!preview)}>
+            <MailIcon data-icon="inline-start" aria-hidden="true" />Preview completion email ({eligible})
+          </Button>
+          <p className="text-xs text-muted-foreground">Complete the event and make the gallery public first. Only opted-in guests who have not already been emailed are eligible; repeated addresses are deduplicated.</p>
+          {preview ? <div className="flex flex-col gap-3 rounded-lg border p-4">
+            <p className="font-medium">The gallery for {event.data.title} is ready</p>
+            {emailPreview.data ? <iframe title="Gallery email preview" sandbox="" srcDoc={emailPreview.data.html} className="h-[36rem] w-full rounded-lg border" /> : <p>{emailPreview.isError ? "Could not load the preview." : "Loading preview…"}</p>}
+            <p className="text-sm">Send to {eligible} opted-in email addresses.</p>
+            <Button type="button" disabled={notify.isPending || !eligible || effectiveEvent(event.data).status !== "closed" || !galleryIsPublic(event.data.galleryPolicy, event.data.galleryReleasedAt, event.data.galleryVisibleAt)} onClick={() => notify.mutate({ eventId })}><MailIcon data-icon="inline-start" />{notify.isPending ? "Queueing…" : "Queue completion emails"}</Button>
+          </div> : null}
+        </div> : null}
+        {event.data?.permissions.includes("gallery.release") ? <EmailHistory eventId={eventId} /> : null}
+        <h3 className="text-lg font-semibold">Accounts with access</h3>
         <ul className="flex flex-col gap-2">
           {(members.data ?? []).map((member) => (
             <li key={member.id} className="flex items-center justify-between gap-3">
@@ -67,7 +107,7 @@ export function EventPeople({
                 <p className="text-xs text-muted-foreground">{member.email}</p>
               </div>
               <div className="flex items-center gap-2">
-                <Badge variant="secondary">{member.role}</Badge>
+                <Badge variant="secondary">{roleLabels[member.role]}</Badge>
                 {canManage ? (
                   <Button
                     size="sm"
@@ -103,19 +143,22 @@ export function EventPeople({
               onChange={(event) => setEmail(event.target.value)}
               className="max-w-xs"
             />
-            <select
-              className="rounded-md border bg-background px-2 py-1.5 text-sm"
-              value={role}
-              onChange={(event) => setRole(event.target.value as EventRole)}
-            >
+            <Select value={role} onValueChange={(value) => setRole(value as EventRole)}>
+              <SelectTrigger aria-label="Account role" className="min-w-36">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent position="popper" align="start">
+              <SelectGroup>
               {roles
                 .filter((value) => value !== "owner" || canGrantOwner)
                 .map((value) => (
-                  <option key={value} value={value}>
-                    {value}
-                  </option>
+                  <SelectItem key={value} value={value}>
+                    {roleLabels[value]}
+                  </SelectItem>
                 ))}
-            </select>
+              </SelectGroup>
+              </SelectContent>
+            </Select>
             <Button type="submit" disabled={setMember.isPending}>
               Add existing user
             </Button>