Refine workspaces and event publishing; harden uploads and email delivery

apps/web/src/app/e/[slug]/guest-upload.tsx

@@ -2,7 +2,9 @@
 
 import { useEffect, useMemo, useState } from "react";
 import { toast } from "sonner";
-import { ChevronDownIcon, UploadIcon } from "lucide-react";
+import { ChevronDownIcon, SendIcon, UploadIcon } from "lucide-react";
+import { useRouter } from "next/navigation";
+import type { PublishingPolicy } from "@album/contracts";
 import { cn } from "@/lib/utils";
 import { MAX_PHOTO_BYTES } from "@album/contracts";
 import { api } from "@/trpc/react";
@@ -31,14 +33,19 @@ function guestKey(slug: string, field: string) {
 export function GuestUpload({
   slug,
   uploadEnabled,
+  notesEnabled,
+  notesPolicy,
 }: {
   slug: string;
   uploadEnabled: boolean;
+  notesEnabled: boolean;
+  notesPolicy: PublishingPolicy;
 }) {
+  const router = useRouter();
   const [name, setName] = useState("");
   const [email, setEmail] = useState("");
   const [note, setNote] = useState("");
-  const [notify, setNotify] = useState(true);
+  const [notify, setNotify] = useState(false);
   const [detailsOpen, setDetailsOpen] = useState(false);
   const [dragging, setDragging] = useState(false);
   const [queue, setQueue] = useState<QueueItem[]>([]);
@@ -55,6 +62,7 @@ export function GuestUpload({
     setName(storedName);
     setEmail(storedEmail);
     setNote(storedNote);
+    setNotify(localStorage.getItem(guestKey(slug, "notify")) === "true");
     if (storedName || storedEmail || storedNote) setDetailsOpen(true);
   }, [slug]);
 
@@ -63,11 +71,26 @@ export function GuestUpload({
     [queue],
   );
 
+  async function sendNote(detailsOnly = false) {
+    try {
+      await ensureGuest.mutateAsync({ eventSlug: slug, displayName: name.trim() || undefined,
+        email: email.trim() || undefined, notifyWhenReady: Boolean(email.trim()) && notify, note: detailsOnly ? undefined : note.trim() });
+      localStorage.setItem(guestKey(slug, "name"), name.trim());
+      localStorage.setItem(guestKey(slug, "email"), email.trim());
+      localStorage.setItem(guestKey(slug, "notify"), String(notify));
+      if (!detailsOnly) { localStorage.removeItem(guestKey(slug, "note")); setNote(""); }
+      toast.success(detailsOnly ? "Guest details saved" : "Note sent");
+      router.refresh();
+    } catch (error) { toast.error(error instanceof Error ? error.message : "Could not send note"); }
+  }
+
   async function uploadFiles(files: File[]) {
     const accepted = files.filter(isAllowedPhoto);
+    if (!uploadEnabled || busy) return;
     if (accepted.length !== files.length) {
       toast.error("Some files were skipped. Use JPEG, PNG, WebP, or HEIC under 25 MB.");
     }
+    if (!accepted.length) return;
     const items: QueueItem[] = accepted.map((file) => ({
       id: crypto.randomUUID(),
       name: file.name,
@@ -81,6 +104,7 @@ export function GuestUpload({
     localStorage.setItem(guestKey(slug, "name"), trimmedName);
     localStorage.setItem(guestKey(slug, "email"), trimmedEmail);
     localStorage.setItem(guestKey(slug, "note"), trimmedNote);
+    localStorage.setItem(guestKey(slug, "notify"), String(notify));
 
     try {
       await ensureGuest.mutateAsync({
@@ -138,6 +162,7 @@ export function GuestUpload({
         }
       }
       await utils.event.gallery.invalidate(slug);
+      router.refresh();
     } catch (error) {
       toast.error(error instanceof Error ? error.message : "Could not start upload");
       setQueue((current) =>
@@ -150,17 +175,17 @@ export function GuestUpload({
     }
   }
 
-  if (!uploadEnabled) {
+  if (!uploadEnabled && !notesEnabled) {
     return (
       <Alert>
-        <AlertDescription>Uploads are closed for this event.</AlertDescription>
+        <AlertDescription>Submissions are closed for this event.</AlertDescription>
       </Alert>
     );
   }
 
   return (
     <div className="flex flex-col gap-4">
-      <label
+      {uploadEnabled ? <label
         className={cn(
           "flex min-h-52 cursor-pointer flex-col items-center justify-center gap-3 rounded-2xl border border-dashed border-primary/35 bg-card px-5 py-10 text-center shadow-sm transition-all duration-200 hover:border-primary/60 hover:bg-accent/50 motion-reduce:transition-none",
           dragging && "scale-[1.01] border-primary bg-accent/60 shadow-[0_0_0_6px] shadow-primary/15 motion-reduce:scale-100",
@@ -212,7 +237,7 @@ export function GuestUpload({
             {busy ? "Uploading…" : "Choose photos"}
           </span>
         </Button>
-      </label>
+      </label> : null}
       {queue.length > 0 ? (
         <ul className="flex flex-col gap-3" aria-live="polite">
           {queue.map((item) => (
@@ -289,7 +314,18 @@ export function GuestUpload({
                 placeholder="Congratulations — enjoy the day."
                 maxLength={2000}
               />
+              <FieldDescription>
+                {notesPolicy === "automatic" ? "Your note and name will be published automatically."
+                  : notesPolicy === "approved" ? "Your note and name may be published after organizer approval."
+                  : "Your note is private to the event organizers."}
+                {" "}You can send a note without photos. Sending another replaces your previous note.
+              </FieldDescription>
             </Field>
+            <Button type="button" disabled={!notesEnabled || !note.trim() || ensureGuest.isPending || busy} onClick={() => void sendNote()}>
+              <SendIcon data-icon="inline-start" aria-hidden="true" />
+              {ensureGuest.isPending ? "Sending…" : "Send note"}
+            </Button>
+            <Button type="button" variant="outline" disabled={!email.trim() || ensureGuest.isPending || busy} onClick={() => void sendNote(true)}>Save details without a photo or note</Button>
           </FieldGroup>
         </div>
       </details>