feat: overhaul AddDmMemberModal with friends-only multi-select

Replace global user search with socialStore friends list, fixing
federation ID mismatch that caused false 'not your friend' errors.
Add multi-select with chips, immediate friend list display, and
client-side search filtering.

packages/web/src/components/modals/AddDmMemberModal.tsx

@@ -1,18 +1,17 @@
-import React, { useState, useRef, useEffect } from 'react';
+import React, { useState, useRef, useEffect, useMemo } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { Modal } from '../ui/Modal';
 import { Avatar } from '../ui/Avatar';
 import { useUIStore } from '../../stores/uiStore';
 import { useSpaceStore } from '../../stores/spaceStore';
 import { useAuthStore } from '../../stores/authStore';
+import { useSocialStore, type TaggedFriend } from '../../stores/socialStore';
 import { api } from '../../api/client';
-import type { User } from '@backspace/shared';
 import { isSelf } from '../../utils/identity';
 
 export function AddDmMemberModal() {
   const [query, setQuery] = useState('');
-  const [results, setResults] = useState<User[]>([]);
-  const [isSearching, setIsSearching] = useState(false);
+  const [selected, setSelected] = useState<Set<string>>(new Set());
   const [error, setError] = useState('');
   const [isAdding, setIsAdding] = useState(false);
   const activeModal = useUIStore((s) => s.activeModal);
@@ -20,110 +19,161 @@ export function AddDmMemberModal() {
   const closeModal = useUIStore((s) => s.closeModal);
   const dmChannels = useSpaceStore((s) => s.dmChannels);
   const addDmChannel = useSpaceStore((s) => s.addDmChannel);
+  const friends = useSocialStore((s) => s.friends);
   const navigate = useNavigate();
   const myUser = useAuthStore((s) => s.user);
   const inputRef = useRef<HTMLInputElement>(null);
-  const searchTimer = useRef<ReturnType<typeof setTimeout>>();
 
   const isOpen = activeModal === 'addDmMember';
   const dmChannelId = modalData.dmChannelId as string | undefined;
   const dmChannel = dmChannels.find(dm => dm.id === dmChannelId);
-  const currentMemberIds = new Set(dmChannel?.members.map(m => m.id) ?? []);
+  const currentMemberIds = useMemo(
+    () => new Set(dmChannel?.members.map(m => m.id) ?? []),
+    [dmChannel?.members],
+  );
   const memberCount = dmChannel?.members.length ?? 0;
+  const maxMembers = 10;
+  const remainingSlots = maxMembers - memberCount;
 
+  // Filter friends: client-side search, exclude self
+  const filteredFriends = useMemo(() => {
+    const q = query.trim().toLowerCase();
+    return friends.filter((f) => {
+      if (isSelf(f, myUser)) return false;
+      if (!q) return true;
+      const displayName = (f.displayName ?? '').toLowerCase();
+      const username = f.username.toLowerCase();
+      return displayName.includes(q) || username.includes(q);
+    });
+  }, [friends, query, myUser]);
+
+  // Reset state when modal opens
   useEffect(() => {
     if (isOpen) {
       setQuery('');
-      setResults([]);
+      setSelected(new Set());
       setError('');
       setIsAdding(false);
       setTimeout(() => inputRef.current?.focus(), 100);
     }
   }, [isOpen]);
 
-  const handleSearch = (value: string) => {
-    setQuery(value);
-    setError('');
-
-    if (searchTimer.current) {
-      clearTimeout(searchTimer.current);
+  const toggleFriend = (friendId: string) => {
+    if (currentMemberIds.has(friendId)) return;
+    setSelected((prev) => {
+      const next = new Set(prev);
+      if (next.has(friendId)) {
+        next.delete(friendId);
+      } else {
+        // Enforce remaining capacity
+        if (next.size >= remainingSlots) return prev;
+        next.add(friendId);
       }
-
-    if (value.trim().length < 2) {
-      setResults([]);
-      return;
-    }
-
-    searchTimer.current = setTimeout(async () => {
-      setIsSearching(true);
-      try {
-        const users = await api.social.search(value.trim());
-        // Filter out users already in the DM
-        setResults(users.filter(u => !currentMemberIds.has(u.id)));
-      } catch {
-        setResults([]);
-      } finally {
-        setIsSearching(false);
-      }
-    }, 300);
+      return next;
+    });
   };
 
-  const handleSelectUser = async (user: User) => {
-    if (!dmChannelId || !dmChannel || isAdding) return;
+  const removeFriend = (friendId: string) => {
+    setSelected((prev) => {
+      const next = new Set(prev);
+      next.delete(friendId);
+      return next;
+    });
+  };
+
+  const selectedFriends = useMemo(
+    () => friends.filter((f) => selected.has(f.id)),
+    [friends, selected],
+  );
+
+  const handleSubmit = async () => {
+    if (!dmChannelId || !dmChannel || isAdding || selectedFriends.length === 0) return;
     setError('');
     setIsAdding(true);
     try {
       if (!dmChannel.ownerId) {
-        // 1-on-1 DM → create a new group DM with all 3 users
+        // 1-on-1 DM → create a new group DM with all selected + existing other member
         const otherMember = dmChannel.members.find(m => !isSelf(m, myUser));
         if (!otherMember) {
           setError('Could not determine the other member of this conversation.');
+          setIsAdding(false);
           return;
         }
-        const newChannel = await api.dm.createGroup({
-          users: [
+        const users = [
           { id: otherMember.id, homeUserId: otherMember.homeUserId, homeInstance: otherMember.homeInstance },
-            { id: user.id, homeUserId: user.homeUserId, homeInstance: user.homeInstance },
-          ],
-        });
+          ...selectedFriends.map((f) => ({
+            id: f.id,
+            homeUserId: f.homeUserId,
+            homeInstance: f.homeInstance,
+          })),
+        ];
+        const newChannel = await api.dm.createGroup({ users });
         addDmChannel(newChannel);
         closeModal();
         navigate(`/channels/@me/${newChannel.id}`);
       } else {
-        // Group DM → add to existing group
-        await api.dm.addMember(dmChannelId, { userId: user.id });
+        // Existing group DM → add each friend sequentially
+        for (const friend of selectedFriends) {
+          await api.dm.addMember(dmChannelId, { userId: friend.id });
+        }
         closeModal();
       }
     } catch (err) {
-      setError((err as Error).message || 'Failed to add member');
+      setError((err as Error).message || 'Failed to add members');
     } finally {
       setIsAdding(false);
     }
   };
 
+  const buttonText = selectedFriends.length === 0
+    ? 'Select Friends'
+    : `Add ${selectedFriends.length} Friend${selectedFriends.length > 1 ? 's' : ''}`;
+
   return (
     <Modal isOpen={isOpen} onClose={closeModal} title="Add Friends to DM" mobileStyle="sheet">
       <div className="space-y-3">
+        {/* Header with member count */}
         <div className="flex items-center justify-between">
           <p className="text-[13px] text-txt-tertiary">
-            Search for a user to add to this conversation.
+            Select friends to add to this conversation.
           </p>
           <span className="text-[12px] text-txt-tertiary flex-shrink-0 ml-2">
-            {memberCount}/10
+            {memberCount}/{maxMembers}
           </span>
         </div>
 
+        {/* Selected chips */}
+        {selectedFriends.length > 0 && (
+          <div className="flex gap-1.5 flex-wrap">
+            {selectedFriends.map((f) => (
+              <span
+                key={f.id}
+                className="flex items-center gap-1 px-2.5 py-1 rounded-full text-[12px] bg-accent-mint/15 text-accent-mint"
+              >
+                {f.displayName ?? f.username}
+                <button
+                  onClick={() => removeFriend(f.id)}
+                  className="opacity-60 hover:opacity-100 transition-opacity text-[14px] leading-none"
+                >
+                  &times;
+                </button>
+              </span>
+            ))}
+          </div>
+        )}
+
+        {/* Search input */}
         <input
           ref={inputRef}
           type="text"
           value={query}
-          onChange={(e) => handleSearch(e.target.value)}
-          placeholder="Search for a user..."
+          onChange={(e) => setQuery(e.target.value)}
+          placeholder="Search friends..."
           className="input-search w-full py-2 text-[14px]"
-          disabled={memberCount >= 10}
+          disabled={remainingSlots <= 0}
         />
 
-        {memberCount >= 10 && (
+        {remainingSlots <= 0 && (
           <p className="text-txt-danger text-[13px]">This group DM has reached the 10-member limit.</p>
         )}
 
@@ -131,32 +181,81 @@ export function AddDmMemberModal() {
           <p className="text-txt-danger text-[13px]">{error}</p>
         )}
 
+        {/* Friend list */}
         <div className="max-h-[300px] overflow-y-auto space-y-[2px]">
-          {isSearching && (
-            <div className="py-4 text-center text-txt-tertiary text-[14px]">Searching...</div>
+          {filteredFriends.length === 0 && (
+            <div className="py-4 text-center text-txt-tertiary text-[14px]">
+              {query.trim() ? 'No friends match your search' : 'No friends yet'}
+            </div>
           )}
 
-          {!isSearching && query.trim().length >= 2 && results.length === 0 && (
-            <div className="py-4 text-center text-txt-tertiary text-[14px]">No users found</div>
-          )}
+          {filteredFriends.map((friend) => {
+            const isInDm = currentMemberIds.has(friend.id);
+            const isSelected = selected.has(friend.id);
+            const atCapacity = !isSelected && selected.size >= remainingSlots;
 
-          {results.map((user) => (
+            return (
               <button
-              key={user.id}
-              onClick={() => handleSelectUser(user)}
-              disabled={isAdding}
-              className="w-full flex items-center gap-3 px-3 py-2 rounded-[4px] hover:bg-interactive-hover transition-colors text-left disabled:opacity-50"
+                key={friend.id}
+                onClick={() => toggleFriend(friend.id)}
+                disabled={isInDm || isAdding || atCapacity}
+                className={`w-full flex items-center gap-3 px-3 py-2 rounded-[4px] transition-colors text-left ${
+                  isInDm
+                    ? 'opacity-40 cursor-not-allowed'
+                    : isSelected
+                      ? 'bg-accent-mint/[0.08]'
+                      : 'hover:bg-interactive-hover'
+                } ${atCapacity && !isInDm ? 'opacity-50 cursor-not-allowed' : ''}`}
               >
-              <Avatar src={user.avatar} name={user.displayName ?? user.username} size={36} status={user.status as any} userId={user.homeUserId ?? user.id} />
+                <Avatar
+                  src={friend.avatar}
+                  name={friend.displayName ?? friend.username}
+                  size={30}
+                  status={friend.status as any}
+                  userId={friend.homeUserId ?? friend.id}
+                />
                 <div className="flex-1 min-w-0">
-                <div className="text-[14px] font-medium text-txt-primary truncate">
-                  {user.displayName ?? user.username}
+                  <div className="text-[13px] font-medium text-txt-primary truncate">
+                    {friend.displayName ?? friend.username}
                   </div>
-                <div className="text-[12px] text-txt-tertiary truncate">@{user.username}</div>
+                  <div className="text-[11px] text-txt-tertiary truncate">
+                    {isInDm
+                      ? 'Already in this DM'
+                      : friend.username.includes('@')
+                        ? `@${friend.username}`
+                        : friend._instanceOrigin
+                          ? `@${friend.username}@${new URL(friend._instanceOrigin).host}`
+                          : `@${friend.username}`}
                   </div>
+                </div>
+                {!isInDm && (
+                  <div
+                    className={`w-[18px] h-[18px] rounded flex-shrink-0 flex items-center justify-center ${
+                      isSelected
+                        ? 'bg-accent-mint'
+                        : 'border-2 border-border-hard'
+                    }`}
+                  >
+                    {isSelected && (
+                      <svg width="12" height="12" viewBox="0 0 12 12" fill="none" className="text-surface-base">
+                        <path d="M2.5 6L5 8.5L9.5 3.5" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+                      </svg>
+                    )}
+                  </div>
+                )}
               </button>
-          ))}
+            );
+          })}
         </div>
+
+        {/* Submit button */}
+        <button
+          onClick={handleSubmit}
+          disabled={selectedFriends.length === 0 || isAdding}
+          className="w-full py-2 rounded-md text-[13px] font-semibold transition-colors bg-accent-mint text-surface-base hover:bg-accent-mint/90 disabled:opacity-50 disabled:cursor-not-allowed"
+        >
+          {isAdding ? 'Adding...' : buttonText}
+        </button>
       </div>
     </Modal>
   );