web: add inline block and unblock actions in contacts panel

web/src/components/ChatList.tsx

@@ -4,7 +4,7 @@ import axios from "axios";
 import { archiveChat, clearChat, createPrivateChat, deleteChat, getChats, getSavedMessagesChat, joinChat, leaveChat, pinChat, unarchiveChat, unpinChat } from "../api/chats";
 import { globalSearch } from "../api/search";
 import type { DiscoverChat, Message, UserSearchItem } from "../chat/types";
-import { addContact, addContactByEmail, listContacts, removeContact } from "../api/users";
+import { addContact, addContactByEmail, blockUser, listBlockedUsers, listContacts, removeContact, unblockUser } from "../api/users";
 import { useAuthStore } from "../store/authStore";
 import { useChatStore } from "../store/chatStore";
 import { NewChatPanel } from "./NewChatPanel";
@@ -33,6 +33,7 @@ export function ChatList() {
   const [contactsSearch, setContactsSearch] = useState("");
   const [contactEmail, setContactEmail] = useState("");
   const [contactEmailError, setContactEmailError] = useState<string | null>(null);
+  const [blockedContactIds, setBlockedContactIds] = useState<Set<number>>(new Set());
   const [ctxChatId, setCtxChatId] = useState<number | null>(null);
   const [ctxPos, setCtxPos] = useState<{ x: number; y: number } | null>(null);
   const [deleteModalChatId, setDeleteModalChatId] = useState<number | null>(null);
@@ -96,13 +97,15 @@ export function ChatList() {
     setContactsLoading(true);
     void (async () => {
       try {
-        const rows = await listContacts();
+        const [rows, blocked] = await Promise.all([listContacts(), listBlockedUsers()]);
         if (!cancelled) {
           setContacts(rows);
+          setBlockedContactIds(new Set(blocked.map((item) => item.id)));
         }
       } catch {
         if (!cancelled) {
           setContacts([]);
+          setBlockedContactIds(new Set());
         }
       } finally {
         if (!cancelled) {
@@ -619,6 +622,31 @@ export function ChatList() {
                       >
                         Remove
                       </button>
+                      <button
+                        className={`rounded px-2 py-1 text-[10px] hover:bg-slate-600 ${
+                          blockedContactIds.has(user.id) ? "bg-emerald-700/80 text-emerald-100" : "bg-slate-700 text-amber-200"
+                        }`}
+                        onClick={async () => {
+                          if (blockedContactIds.has(user.id)) {
+                            await unblockUser(user.id);
+                            setBlockedContactIds((prev) => {
+                              const next = new Set(prev);
+                              next.delete(user.id);
+                              return next;
+                            });
+                          } else {
+                            await blockUser(user.id);
+                            setBlockedContactIds((prev) => {
+                              const next = new Set(prev);
+                              next.add(user.id);
+                              return next;
+                            });
+                          }
+                        }}
+                        type="button"
+                      >
+                        {blockedContactIds.has(user.id) ? "Unblock" : "Block"}
+                      </button>
                     </div>
                   ))
               : null}