fix: stickers and chat UI fix

app/(app)/chats/[id]/page.tsx

@@ -35,6 +35,7 @@ import { toast } from "sonner";
 import { channelAuthorizer } from "@/lib/realtime";
 import { cn } from "@/lib/utils";
 import { useVisualViewport } from "@/lib/use-visual-viewport";
+import { ConfirmModal } from "@/components/ui/confirm-modal";
 import { useNotifications } from "@/components/notifications/notifications-provider";
 import {
   chat,
@@ -71,6 +72,9 @@ export default function ChatThreadPage() {
   const [replyTo, setReplyTo] = useState<ChatMessage | null>(null);
   const [menu, setMenu] = useState<{ message: ChatMessage; point: MenuPoint } | null>(null);
   const [forwarding, setForwarding] = useState<ChatMessage | null>(null);
+  // Non-null asks before deleting for everyone. Deleting only for yourself is
+  // reversible by the others still having it, so it goes straight through.
+  const [confirmDelete, setConfirmDelete] = useState<ChatMessage | null>(null);
   const [starredIds, setStarredIds] = useState<Set<string>>(new Set());
   // user id → when they last typed. Kept as timestamps rather than a boolean
   // so the indicator expires on its own: there is no "stopped typing" event,
@@ -295,12 +299,6 @@ export default function ChatThreadPage() {
 
   const deleteMessage = useCallback(
     async (m: ChatMessage, scope: "me" | "everyone") => {
-      if (
-        scope === "everyone" &&
-        !window.confirm("Delete this message for everyone?")
-      ) {
-        return;
-      }
       try {
         await chat.deleteMessage(id, m.id, scope);
         if (scope === "me") {
@@ -695,7 +693,8 @@ export default function ChatThreadPage() {
             // Only the sender may erase a message for everyone.
             onDeleteForEveryone:
               menu.message.sender_id === user.id
-                ? () => void deleteMessage(menu.message, "everyone")
+                ? // Ask first — the modal calls deleteMessage on confirm.
+                  () => setConfirmDelete(menu.message)
                 : undefined,
             // Reporting your own message is meaningless.
             onReport:
@@ -714,6 +713,17 @@ export default function ChatThreadPage() {
         />
       )}
 
+      <ConfirmModal
+        open={confirmDelete !== null}
+        onClose={() => setConfirmDelete(null)}
+        title="Delete for everyone?"
+        message="This removes the message from the conversation for all participants. It can't be undone."
+        confirmLabel="Delete"
+        onConfirm={async () => {
+          if (confirmDelete) await deleteMessage(confirmDelete, "everyone");
+        }}
+      />
+
       {forwarding && (
         <ForwardDialog
           message={forwarding}