fix: stickers and chat UI fix

components/chat/group-settings-tab.tsx

@@ -13,6 +13,7 @@ import { toast } from "sonner";
 import { useRouter } from "next/navigation";
 import { Button } from "@/components/ui/button";
 import { UserAvatar } from "@/components/ui/user-avatar";
+import { ConfirmModal } from "@/components/ui/confirm-modal";
 import { compressImage } from "@/lib/compress-image";
 import {
   chat,
@@ -38,6 +39,7 @@ export function GroupSettingsTab({
   const router = useRouter();
   const [title, setTitle] = useState(detail.title ?? "");
   const [busy, setBusy] = useState(false);
+  const [confirmLeave, setConfirmLeave] = useState(false);
   const [uploading, setUploading] = useState(false);
   const fileRef = useRef<HTMLInputElement>(null);
   const iAmAdmin = isGroupAdmin(detail.my_role);
@@ -96,15 +98,6 @@ export function GroupSettingsTab({
   };
 
   const leave = async () => {
-    if (
-      !window.confirm(
-        detail.my_role === "owner"
-          ? "Leave this group? Another admin will become the owner."
-          : "Leave this group?",
-      )
-    ) {
-      return;
-    }
     setBusy(true);
     try {
       await chat.removeMember(conversationId, selfHandle);
@@ -219,7 +212,7 @@ export function GroupSettingsTab({
           variant="destructive"
           size="sm"
           disabled={busy}
-          onClick={leave}
+          onClick={() => setConfirmLeave(true)}
         >
           <LogOut className="size-4" /> Leave group
         </Button>
@@ -230,6 +223,18 @@ export function GroupSettingsTab({
           </p>
         )}
       </section>
+      <ConfirmModal
+        open={confirmLeave}
+        onClose={() => setConfirmLeave(false)}
+        title="Leave this group?"
+        message={
+          detail.my_role === "owner"
+            ? "You own this group. The longest-serving admin becomes the owner in your place."
+            : "You'll stop receiving messages from this conversation."
+        }
+        confirmLabel="Leave"
+        onConfirm={leave}
+      />
     </div>
   );
 }