311 lines
9.5 KiB
TypeScript
311 lines
9.5 KiB
TypeScript
"use client";
|
|
|
|
/**
|
|
* /broadcasts — compose and publish an announcement.
|
|
*
|
|
* Publishing is one-way and immediate: it pushes to every subscribed device,
|
|
* nudges everyone currently connected, and each user is shown the modal once.
|
|
* There is no recall, which is why publishing is behind a confirmation and
|
|
* why drafts exist.
|
|
*
|
|
* The only delivery signal is the dismissal count, since nothing is stored on
|
|
* the user's side.
|
|
*/
|
|
|
|
import { useEffect, useState } from "react";
|
|
import { Can } from "@/components/staff-context";
|
|
import { toast } from "sonner";
|
|
import { broadcasts, type Broadcast } from "@/lib/api";
|
|
import { compressImage } from "@/lib/compress-image";
|
|
|
|
export default function BroadcastsPage() {
|
|
const [items, setItems] = useState<Broadcast[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
|
|
const refresh = () =>
|
|
broadcasts
|
|
.list()
|
|
.then((r) => setItems(r.items))
|
|
.catch(() => toast.error("Could not load announcements"))
|
|
.finally(() => setLoading(false));
|
|
|
|
useEffect(() => {
|
|
void refresh();
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, []);
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<header>
|
|
<h1 className="text-xl font-semibold text-foreground">Announcements</h1>
|
|
<p className="mt-1 text-sm text-muted-foreground">
|
|
Pushed to every user and shown once, in a modal. Nothing is saved to
|
|
their notification history.
|
|
</p>
|
|
</header>
|
|
|
|
<Can perm="broadcasts:write">
|
|
<Composer onDone={refresh} />
|
|
</Can>
|
|
|
|
<section className="space-y-2">
|
|
<h2 className="text-sm font-medium text-foreground">Recent</h2>
|
|
{loading ? (
|
|
<p className="text-sm text-muted-foreground">Loading…</p>
|
|
) : items.length === 0 ? (
|
|
<p className="text-sm text-muted-foreground">Nothing sent yet.</p>
|
|
) : (
|
|
<ul className="divide-y divide-border rounded-lg border border-border">
|
|
{items.map((b) => (
|
|
<BroadcastRow key={b.id} item={b} onChanged={refresh} />
|
|
))}
|
|
</ul>
|
|
)}
|
|
</section>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function Composer({ onDone }: { onDone: () => void }) {
|
|
const [title, setTitle] = useState("");
|
|
const [body, setBody] = useState("");
|
|
const [ctaLabel, setCtaLabel] = useState("");
|
|
const [ctaUrl, setCtaUrl] = useState("");
|
|
const [expiresAt, setExpiresAt] = useState("");
|
|
const [bannerKey, setBannerKey] = useState<string | null>(null);
|
|
const [uploading, setUploading] = useState(false);
|
|
const [busy, setBusy] = useState(false);
|
|
|
|
const uploadBanner = async (original: File) => {
|
|
setUploading(true);
|
|
try {
|
|
// Compress before the presigned PUT. A banner renders at roughly 2:1 in
|
|
// a ~448px modal, so a phone-camera original is orders of magnitude
|
|
// larger than anything that reaches a screen — and every devotee
|
|
// downloads it. Falls back to the original on any decode failure, and
|
|
// leaves GIFs alone so an animation isn't flattened.
|
|
const file = await compressImage(original, { maxDimension: 1280 }).catch(
|
|
() => original,
|
|
);
|
|
const { upload_url, key } = await broadcasts.presignBanner(file.type);
|
|
const res = await fetch(upload_url, {
|
|
method: "PUT",
|
|
headers: { "Content-Type": file.type },
|
|
body: file,
|
|
});
|
|
if (!res.ok) throw new Error(String(res.status));
|
|
setBannerKey(key);
|
|
toast.success("Banner uploaded");
|
|
} catch {
|
|
toast.error("Banner upload failed");
|
|
} finally {
|
|
setUploading(false);
|
|
}
|
|
};
|
|
|
|
const submit = async (publish: boolean) => {
|
|
if (!title.trim() || !body.trim()) return;
|
|
if (
|
|
publish &&
|
|
!window.confirm(
|
|
"Publish now? This pushes to every user immediately and cannot be recalled.",
|
|
)
|
|
) {
|
|
return;
|
|
}
|
|
setBusy(true);
|
|
try {
|
|
await broadcasts.create({
|
|
title: title.trim(),
|
|
body: body.trim(),
|
|
banner_key: bannerKey,
|
|
cta_label: ctaLabel.trim() || null,
|
|
cta_url: ctaUrl.trim() || null,
|
|
expires_at: expiresAt ? new Date(expiresAt).toISOString() : null,
|
|
publish,
|
|
});
|
|
toast.success(publish ? "Published" : "Draft saved");
|
|
setTitle("");
|
|
setBody("");
|
|
setCtaLabel("");
|
|
setCtaUrl("");
|
|
setExpiresAt("");
|
|
setBannerKey(null);
|
|
onDone();
|
|
} catch (err) {
|
|
toast.error(err instanceof Error ? err.message : "Could not save");
|
|
} finally {
|
|
setBusy(false);
|
|
}
|
|
};
|
|
|
|
const field =
|
|
"w-full rounded-md border border-border bg-background px-3 py-2 text-sm outline-none focus:ring-1 focus:ring-primary/40";
|
|
|
|
return (
|
|
<section className="space-y-3 rounded-lg border border-border p-4">
|
|
<input
|
|
value={title}
|
|
onChange={(e) => setTitle(e.target.value)}
|
|
maxLength={120}
|
|
placeholder="Title"
|
|
className={field}
|
|
/>
|
|
<textarea
|
|
value={body}
|
|
onChange={(e) => setBody(e.target.value)}
|
|
rows={4}
|
|
maxLength={2000}
|
|
placeholder="Description — *bold*, ~strike~ and `code` work, same as chat."
|
|
className={`${field} resize-y`}
|
|
/>
|
|
|
|
<div className="grid gap-3 sm:grid-cols-2">
|
|
<input
|
|
value={ctaLabel}
|
|
onChange={(e) => setCtaLabel(e.target.value)}
|
|
maxLength={40}
|
|
placeholder="Button label (optional)"
|
|
className={field}
|
|
/>
|
|
<input
|
|
value={ctaUrl}
|
|
onChange={(e) => setCtaUrl(e.target.value)}
|
|
placeholder="Button URL — /chats or https://…"
|
|
className={field}
|
|
/>
|
|
</div>
|
|
|
|
<div className="grid gap-3 sm:grid-cols-2">
|
|
<label className="text-sm text-muted-foreground">
|
|
Stop showing after
|
|
<input
|
|
type="datetime-local"
|
|
value={expiresAt}
|
|
onChange={(e) => setExpiresAt(e.target.value)}
|
|
className={`${field} mt-1`}
|
|
/>
|
|
</label>
|
|
<label className="text-sm text-muted-foreground">
|
|
Banner image
|
|
<input
|
|
type="file"
|
|
accept="image/png,image/jpeg,image/webp"
|
|
disabled={uploading}
|
|
onChange={(e) => {
|
|
const f = e.target.files?.[0];
|
|
if (f) void uploadBanner(f);
|
|
}}
|
|
className={`${field} mt-1`}
|
|
/>
|
|
{bannerKey && (
|
|
<span className="mt-1 block text-xs text-primary">
|
|
Uploaded — it will appear above the text.
|
|
</span>
|
|
)}
|
|
</label>
|
|
</div>
|
|
|
|
<div className="flex justify-end gap-2 pt-1">
|
|
<button
|
|
type="button"
|
|
disabled={busy || !title.trim() || !body.trim()}
|
|
onClick={() => submit(false)}
|
|
className="rounded-md border border-border px-4 py-2 text-sm hover:bg-muted disabled:opacity-50"
|
|
>
|
|
Save draft
|
|
</button>
|
|
<Can perm="broadcasts:publish">
|
|
<button
|
|
type="button"
|
|
disabled={busy || !title.trim() || !body.trim()}
|
|
onClick={() => submit(true)}
|
|
className="rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90 disabled:opacity-50"
|
|
>
|
|
Publish now
|
|
</button>
|
|
</Can>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
function BroadcastRow({
|
|
item,
|
|
onChanged,
|
|
}: {
|
|
item: Broadcast;
|
|
onChanged: () => void;
|
|
}) {
|
|
const [busy, setBusy] = useState(false);
|
|
const live = !!item.published_at;
|
|
|
|
const act = async (fn: () => Promise<unknown>, ok: string) => {
|
|
setBusy(true);
|
|
try {
|
|
await fn();
|
|
toast.success(ok);
|
|
onChanged();
|
|
} catch (err) {
|
|
toast.error(err instanceof Error ? err.message : "Failed");
|
|
} finally {
|
|
setBusy(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<li className="flex items-start gap-3 p-3">
|
|
<div className="min-w-0 flex-1">
|
|
<p className="truncate text-sm font-medium text-foreground">
|
|
{item.title}
|
|
</p>
|
|
<p className="mt-0.5 line-clamp-2 text-xs text-muted-foreground">
|
|
{item.body}
|
|
</p>
|
|
<p className="mt-1 text-xs text-muted-foreground">
|
|
{live
|
|
? `Published · dismissed by ${item.seen_count}`
|
|
: "Draft — not sent"}
|
|
{item.expires_at
|
|
? ` · stops ${new Date(item.expires_at).toLocaleDateString()}`
|
|
: ""}
|
|
</p>
|
|
</div>
|
|
|
|
<div className="flex shrink-0 gap-2">
|
|
<Can perm="broadcasts:publish">
|
|
{!live && (
|
|
<button
|
|
type="button"
|
|
disabled={busy}
|
|
onClick={() =>
|
|
window.confirm("Publish now? This cannot be recalled.") &&
|
|
act(() => broadcasts.publish(item.id), "Published")
|
|
}
|
|
className="rounded-md bg-primary px-3 py-1.5 text-xs font-medium text-primary-foreground hover:bg-primary/90 disabled:opacity-50"
|
|
>
|
|
Publish
|
|
</button>
|
|
)}
|
|
</Can>
|
|
<Can perm="broadcasts:write">
|
|
<button
|
|
type="button"
|
|
disabled={busy}
|
|
onClick={() =>
|
|
window.confirm(
|
|
live
|
|
? "Delete this? Anyone who hasn't seen it never will."
|
|
: "Delete this draft?",
|
|
) && act(() => broadcasts.remove(item.id), "Deleted")
|
|
}
|
|
className="rounded-md border border-border px-3 py-1.5 text-xs text-muted-foreground hover:bg-muted disabled:opacity-50"
|
|
>
|
|
Delete
|
|
</button>
|
|
</Can>
|
|
</div>
|
|
</li>
|
|
);
|
|
}
|