fix: stickers and chat UI fix

components/chat/chat-profile-header.tsx

@@ -15,6 +15,7 @@ import { useState } from "react";
 import { BellOff, Bell, ShieldBan, ShieldCheck } from "lucide-react";
 import { toast } from "sonner";
 import { Button } from "@/components/ui/button";
+import { ConfirmModal } from "@/components/ui/confirm-modal";
 import { relationships } from "@/lib/social";
 import {
   chat,
@@ -44,6 +45,9 @@ export function ChatProfileHeader({
   onChanged: () => void;
 }) {
   const [busy, setBusy] = useState(false);
+  // Blocking asks first; unblocking is immediate, since it only restores what
+  // was there before.
+  const [confirmBlock, setConfirmBlock] = useState(false);
   const rel = detail.relationship;
   const peer = detail.peer;
   const muted = isMuted(detail);
@@ -64,9 +68,6 @@ export function ChatProfileHeader({
   const toggleBlock = async () => {
     if (!peer) return;
     const blocking = !rel?.blocked;
-    if (blocking && !window.confirm(`Block ${peer.name}? They won't be able to message you.`)) {
-      return;
-    }
     setBusy(true);
     try {
       if (blocking) await relationships.block(peer.handle);
@@ -134,7 +135,9 @@ export function ChatProfileHeader({
             variant={rel?.blocked ? "outline" : "destructive"}
             size="sm"
             disabled={busy}
-            onClick={toggleBlock}
+            onClick={() =>
+              rel?.blocked ? void toggleBlock() : setConfirmBlock(true)
+            }
           >
             {rel?.blocked ? (
               <>
@@ -148,6 +151,14 @@ export function ChatProfileHeader({
           </Button>
         )}
       </div>
+      <ConfirmModal
+        open={confirmBlock}
+        onClose={() => setConfirmBlock(false)}
+        title={`Block ${peer?.name ?? "this person"}?`}
+        message="They won't be able to message you, and you won't see their messages. You can unblock them here later."
+        confirmLabel="Block"
+        onConfirm={toggleBlock}
+      />
     </div>
   );
 }