feat: quiz

app/(dashboard)/broadcasts/page.tsx

@@ -13,6 +13,7 @@
  */
 
 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";
@@ -43,7 +44,9 @@ export default function BroadcastsPage() {
         </p>
       </header>
 
-      <Composer onDone={refresh} />
+      <Can perm="broadcasts:write">
+        <Composer onDone={refresh} />
+      </Can>
 
       <section className="space-y-2">
         <h2 className="text-sm font-medium text-foreground">Recent</h2>
@@ -212,14 +215,16 @@ function Composer({ onDone }: { onDone: () => void }) {
         >
           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>
+        <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>
   );
@@ -268,33 +273,37 @@ function BroadcastRow({
       </div>
 
       <div className="flex shrink-0 gap-2">
-        {!live && (
+        <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("Publish now? This cannot be recalled.") &&
-              act(() => broadcasts.publish(item.id), "Published")
+              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 bg-primary px-3 py-1.5 text-xs font-medium text-primary-foreground hover:bg-primary/90 disabled:opacity-50"
+            className="rounded-md border border-border px-3 py-1.5 text-xs text-muted-foreground hover:bg-muted disabled:opacity-50"
           >
-            Publish
+            Delete
           </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>
+        </Can>
       </div>
     </li>
   );