From c9ac2bd3b44139aafa979bfebe5cb6c7bc2a0690 Mon Sep 17 00:00:00 2001
From: gosangam <sangam4742@gmail.com>
Date: Sat, 29 Aug 2026 18:34:33 +0530
Subject: [PATCH] feat: broadcast

---
 app/(dashboard)/broadcasts/page.tsx | 292 ++++++++++++++++++++++++++++
 app/(dashboard)/layout.tsx          |   2 +
 lib/api.ts                          |  57 ++++++
 3 files changed, 351 insertions(+)
 create mode 100644 app/(dashboard)/broadcasts/page.tsx

diff --git a/app/(dashboard)/broadcasts/page.tsx b/app/(dashboard)/broadcasts/page.tsx
new file mode 100644
index 0000000..61b8595
--- /dev/null
+++ b/app/(dashboard)/broadcasts/page.tsx
@@ -0,0 +1,292 @@
+"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 { toast } from "sonner";
+import { broadcasts, type Broadcast } from "@/lib/api";
+
+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>
+
+      <Composer onDone={refresh} />
+
+      <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 (file: File) => {
+    setUploading(true);
+    try {
+      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>
+        <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>
+      </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">
+        {!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>
+        )}
+        <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>
+      </div>
+    </li>
+  );
+}
diff --git a/app/(dashboard)/layout.tsx b/app/(dashboard)/layout.tsx
index 1005891..31bec41 100644
--- a/app/(dashboard)/layout.tsx
+++ b/app/(dashboard)/layout.tsx
@@ -5,6 +5,7 @@ import Link from "next/link";
 import { usePathname, useRouter } from "next/navigation";
 import {
   Flag,
+  Megaphone,
   FolderClosed,
   LayoutDashboard,
   LayoutGrid,
@@ -26,6 +27,7 @@ const NAV = [
   { href: "/short-urls", label: "Short URLs", icon: Link2 },
   { href: "/feedback", label: "Feedback", icon: MessageSquare },
   { href: "/reports", label: "Reports", icon: Flag },
+  { href: "/broadcasts", label: "Announcements", icon: Megaphone },
 ];
 
 export default function DashboardLayout({
diff --git a/lib/api.ts b/lib/api.ts
index cb6eec0..733bb91 100644
--- a/lib/api.ts
+++ b/lib/api.ts
@@ -379,3 +379,60 @@ export const api = {
     });
   },
 };
+
+// ─── Broadcasts ─────────────────────────────────────────────────────────────
+
+/**
+ * Announcements pushed to every user and shown once, in a modal.
+ *
+ * No history is kept on the user's side: there is no notification row and no
+ * tray entry, so a broadcast exists only until each person dismisses it.
+ */
+export type Broadcast = {
+  id: string;
+  title: string;
+  body: string;
+  banner_url?: string | null;
+  cta_label?: string | null;
+  cta_url?: string | null;
+  published_at?: string | null;
+  expires_at?: string | null;
+  created_at: string;
+  /** How many people have dismissed it — the only delivery signal there is. */
+  seen_count: number;
+};
+
+export type NewBroadcast = {
+  title: string;
+  body: string;
+  banner_key?: string | null;
+  cta_label?: string | null;
+  cta_url?: string | null;
+  expires_at?: string | null;
+  publish: boolean;
+};
+
+export const broadcasts = {
+  list: () => listed<Broadcast>("/admin/broadcasts?limit=50"),
+
+  create: (input: NewBroadcast) =>
+    call<Broadcast>("/admin/broadcasts", {
+      method: "POST",
+      body: JSON.stringify(input),
+    }).then((r) => r.data),
+
+  publish: (id: string) =>
+    call<Broadcast>(`/admin/broadcasts/${id}/publish`, { method: "POST" }).then(
+      (r) => r.data,
+    ),
+
+  remove: (id: string) =>
+    call<void>(`/admin/broadcasts/${id}`, { method: "DELETE" }),
+
+  /** Presign a banner upload; returns the PUT URL and the key to submit. */
+  presignBanner: (contentType: string) =>
+    call<{ upload_url: string; key: string }>(
+      "/admin/broadcasts/banner-presign",
+      { method: "POST", body: JSON.stringify({ content_type: contentType }) },
+    ).then((r) => r.data),
+};