fix: stickers and chat UI fix

components/chat/group-members-tab.tsx

@@ -14,6 +14,7 @@ import { toast } from "sonner";
 import { UserAvatar } from "@/components/ui/user-avatar";
 import { Button } from "@/components/ui/button";
 import { AddMembersDialog } from "@/components/chat/add-members-dialog";
+import { ConfirmModal } from "@/components/ui/confirm-modal";
 import { chat, isGroupAdmin, type ConversationDetail } from "@/lib/chat";
 
 const ROLE_LABEL: Record<string, string> = {
@@ -34,6 +35,9 @@ export function GroupMembersTab({
   onChanged: () => void;
 }) {
   const [busy, setBusy] = useState<string | null>(null);
+  // The member being removed. Non-null asks first.
+  const [confirmRemove, setConfirmRemove] =
+    useState<ConversationDetail["participants"][number] | null>(null);
   const [adding, setAdding] = useState(false);
   const iAmAdmin = isGroupAdmin(detail.my_role);
   const iAmOwner = detail.my_role === "owner";
@@ -132,14 +136,8 @@ export function GroupMembersTab({
                   type="button"
                   disabled={busy === m.handle}
                   aria-label={`Remove ${m.name}`}
-                  onClick={() => {
-                    if (!window.confirm(`Remove ${m.name} from the group?`)) return;
-                    void act(
-                      m.handle,
-                      () => chat.removeMember(conversationId, m.handle),
-                      `${m.name} was removed`,
-                    );
-                  }}
+                  // Ask first — the modal calls act() on confirm.
+                  onClick={() => setConfirmRemove(m)}
                   className="shrink-0 rounded-md p-1.5 text-destructive hover:opacity-80 disabled:opacity-40"
                 >
                   <UserMinus className="size-4" />
@@ -158,6 +156,21 @@ export function GroupMembersTab({
           onAdded={onChanged}
         />
       )}
+      <ConfirmModal
+        open={confirmRemove !== null}
+        onClose={() => setConfirmRemove(null)}
+        title={`Remove ${confirmRemove?.name ?? "this member"}?`}
+        message="They'll lose access to the conversation and its history from here on."
+        confirmLabel="Remove"
+        onConfirm={async () => {
+          if (!confirmRemove) return;
+          await act(
+            confirmRemove.handle,
+            () => chat.removeMember(conversationId, confirmRemove.handle),
+            `${confirmRemove.name} was removed`,
+          );
+        }}
+      />
     </div>
   );
 }