soconnor/manyangles
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refine workspaces and event publishing; harden uploads and email delivery

Browse Source
This commit is contained in:
soconnor
2026-09-09 15:44:00 -04:00
parent f5702caaea
commit 574f29a68e
93 changed files with 2885 additions and 535 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/app/e/[slug]/guest-gallery.tsx
+2 -2
View File
@@ -18,7 +18,7 @@ import {
} from "@/components/ui/dialog";
export function GuestGallery({ slug }: { slug: string }) {
const gallery = api.event.gallery.useQuery(slug);
const gallery = api.event.gallery.useQuery(slug, { refetchInterval: 10_000 });
const [active, setActive] = useState<string | null>(null);
if (gallery.isLoading) {
@@ -40,7 +40,7 @@ export function GuestGallery({ slug }: { slug: string }) {
<EmptyHeader>
<EmptyTitle>No photos in the gallery yet</EmptyTitle>
<EmptyDescription>
Photos will appear here after the event people release the gallery.
Photos will appear here when they are processed and approved for publishing.
</EmptyDescription>
</EmptyHeader>
</Empty>
apps/web/src/app/e/[slug]/guest-upload.tsx
+42 -6
View File
@@ -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>
apps/web/src/app/e/[slug]/page.tsx
+41 -5
View File
@@ -1,7 +1,10 @@
import { notFound } from "next/navigation";
import { MapPinIcon } from "lucide-react";
import { EventMap } from "@/components/event-map";
import { createServerCaller } from "@/trpc/server";
import { formatEventDate } from "@/lib/utils";
import { Separator } from "@/components/ui/separator";
import { galleryIsPublic } from "@/lib/publishing";
import { GuestGallery } from "./guest-gallery";
import { GuestUpload } from "./guest-upload";
@@ -20,11 +23,17 @@ export default async function EventPage({
}
const when = formatEventDate(event.startsAt);
const galleryLive = Boolean(event.galleryReleasedAt);
const galleryLive = galleryIsPublic(event.galleryPolicy, event.galleryReleasedAt, event.galleryVisibleAt);
const community = await caller.event.community(slug);
return (
<main className="page-pad mx-auto flex w-full max-w-4xl flex-col gap-8 py-8 sm:gap-10 sm:py-12">
<header className="reveal flex flex-col gap-3">
{event.bannerUrl ? (
// eslint-disable-next-line @next/next/no-img-element
<img src={event.bannerUrl} alt="" width={1600} height={600}
className="mb-3 aspect-[8/3] w-full rounded-2xl object-cover" />
) : null}
<p className="text-xs font-medium tracking-[0.22em] text-primary uppercase">
Guest gallery
</p>
@@ -32,18 +41,45 @@ export default async function EventPage({
{event.title}
</h1>
{when ? <p className="text-muted-foreground">{when}</p> : null}
{event.location ? (
<p className="flex items-start gap-2 text-sm text-muted-foreground">
<MapPinIcon aria-hidden="true" className="mt-0.5 size-4 shrink-0" />{event.location}
</p>
) : null}
{event.description ? (
<p className="max-w-2xl text-muted-foreground">{event.description}</p>
<p className="max-w-2xl whitespace-pre-line text-muted-foreground">{event.description}</p>
) : null}
</header>
{Object.values(community.stats).some((value) => value !== null) ? (
<dl className="flex flex-wrap gap-6 rounded-xl border bg-card p-4">
{([["photos", "Images uploaded"], ["submitters", "Submitters"], ["notes", "Notes sent"]] as const).map(([key, label]) =>
community.stats[key] !== null ? <div key={key}><dt className="text-sm text-muted-foreground">{label}</dt><dd className="text-2xl font-semibold">{community.stats[key]}</dd></div> : null)}
</dl>
) : null}
{event.latitude !== null && event.longitude !== null ? (
<section aria-label="Event location" className="flex flex-col gap-3">
<h2 className="text-2xl font-semibold">Getting Here</h2>
<EventMap latitude={event.latitude} longitude={event.longitude} location={event.location ?? event.title} />
</section>
) : null}
<section id="upload" className="reveal-2 scroll-mt-24 flex flex-col gap-4">
<h2 className="sr-only">Add a photo</h2>
<h2 className="sr-only">Add photos or send a note</h2>
<GuestUpload
slug={event.slug}
uploadEnabled={event.uploadEnabled && event.status === "published"}
notesEnabled={event.status === "published" && (!event.submissionsOpenAt || event.submissionsOpenAt <= new Date())}
notesPolicy={event.notesPolicy}
/>
</section>
<Separator />
{event.notesPolicy !== "never" && community.notes.length > 0 ? (
<section className="flex flex-col gap-4" aria-label="Guest notes">
<h2 className="text-2xl font-semibold">Guest notes</h2>
{community.notes.map((note) => <blockquote key={note.id} className="rounded-xl border bg-card p-4">
<p className="whitespace-pre-wrap">{note.note}</p><footer className="mt-2 text-sm text-muted-foreground">{note.displayName ?? "Anonymous"}</footer>
</blockquote>)}
</section>
) : null}
{event.galleryPolicy !== "never" ? <><Separator />
<section className="reveal-3 flex flex-col gap-4">
<h2 className="text-2xl font-semibold tracking-tight">Gallery</h2>
{galleryLive ? (
@@ -53,7 +89,7 @@ export default async function EventPage({
Photos will appear here when the event people release the gallery.
</p>
)}
</section>
</section></> : null}
</main>
);
}