fix: repair invite links, social features, messaging + Discord UI overhaul

Phase 1 - Feature Repair:
- Fix member kick/leave: add missing db.delete() call in servers.ts
- Stabilize invite codes: return existing code instead of regenerating
- Fix user search: use LIKE instead of exact match in social.ts
- Wire DM button on FriendsPage to create/navigate to DM channels
- Add cancel outgoing friend request (DELETE endpoint + frontend)
- Add accept/decline friend request actions with WS real-time events
- Fix replyToId persistence in message creation
- Hydrate reactions and replyTo in message queries
- Add joinByCode to API client and serverStore
- Add friend_request_received/accepted WebSocket events

Phase 2 - Discord UI Overhaul:
- Remove stray borders between layout columns
- Replace shadow-sm with shadow-header on content headers
- Replace all bg-gray-*/text-gray-* with Discord color tokens
- Ensure flat color contrast (#1E1F22, #2B2D31, #313338)

Testing:
- Set up vitest + @testing-library/react + jsdom
- Add 17 tests across InviteModal, JoinServer, FriendsPage (all passing)
- Fix vite resolve.extensions to prefer .tsx over stale .js files

packages/web/src/stores/chatStore.js

@@ -1,18 +1,25 @@
 import { create } from 'zustand';
 import { api } from '../api/client';
+import { wsSend } from '../hooks/useWebSocket';
+import { useUIStore } from './uiStore';
 export const useChatStore = create((set, get) => ({
     messages: new Map(),
     currentChannelId: null,
     typingUsers: new Map(),
     hasMore: new Map(),
     isLoading: false,
+    replyTo: null,
     setCurrentChannel: (channelId) => set({ currentChannelId: channelId }),
+    setReplyTo: (message) => set({ replyTo: message }),
     loadMessages: async (channelId) => {
         if (get().messages.has(channelId))
             return;
         set({ isLoading: true });
         try {
-            const messages = await api.channels.messages(channelId);
+            const isDm = useUIStore.getState().showDms;
+            const messages = isDm
+                ? await api.dm.messages(channelId)
+                : await api.channels.messages(channelId);
             set((state) => {
                 const newMessages = new Map(state.messages);
                 newMessages.set(channelId, messages);
@@ -35,7 +42,10 @@ export const useChatStore = create((set, get) => ({
         if (!oldestMessage)
             return false;
         try {
-            const olderMessages = await api.channels.messages(channelId, oldestMessage.id);
+            const isDm = useUIStore.getState().showDms;
+            const olderMessages = isDm
+                ? await api.dm.messages(channelId, oldestMessage.id)
+                : await api.channels.messages(channelId, oldestMessage.id);
             set((state) => {
                 const newMessages = new Map(state.messages);
                 const current = newMessages.get(channelId) ?? [];
@@ -51,7 +61,15 @@ export const useChatStore = create((set, get) => ({
         }
     },
     sendMessage: async (channelId, content, attachmentIds) => {
-        await api.channels.sendMessage(channelId, { content, attachments: attachmentIds });
+        const replyToId = get().replyTo?.id;
+        const isDm = useUIStore.getState().showDms;
+        if (isDm) {
+            await api.dm.sendMessage(channelId, { content });
+        }
+        else {
+            await api.channels.sendMessage(channelId, { content, attachments: attachmentIds, replyToId });
+        }
+        set({ replyTo: null });
         // Message will arrive via WebSocket
     },
     editMessage: async (messageId, content) => {
@@ -93,6 +111,50 @@ export const useChatStore = create((set, get) => ({
             return { messages: newMessages };
         });
     },
+    addReaction: (messageId, emoji) => {
+        wsSend({ type: 'reaction_add', messageId, emoji });
+    },
+    removeReaction: (messageId, emoji) => {
+        wsSend({ type: 'reaction_remove', messageId, emoji });
+    },
+    onReactionAdded: (messageId, reaction) => {
+        set((state) => {
+            const newMessages = new Map(state.messages);
+            for (const [channelId, msgs] of newMessages.entries()) {
+                const msgIndex = msgs.findIndex(m => m.id === messageId);
+                if (msgIndex !== -1) {
+                    const newMsgs = [...msgs];
+                    const oldMsg = newMsgs[msgIndex];
+                    newMsgs[msgIndex] = {
+                        ...oldMsg,
+                        reactions: [...(oldMsg.reactions || []), reaction],
+                    };
+                    newMessages.set(channelId, newMsgs);
+                    break;
+                }
+            }
+            return { messages: newMessages };
+        });
+    },
+    onReactionRemoved: (messageId, userId, emoji) => {
+        set((state) => {
+            const newMessages = new Map(state.messages);
+            for (const [channelId, msgs] of newMessages.entries()) {
+                const msgIndex = msgs.findIndex(m => m.id === messageId);
+                if (msgIndex !== -1) {
+                    const newMsgs = [...msgs];
+                    const oldMsg = newMsgs[msgIndex];
+                    newMsgs[msgIndex] = {
+                        ...oldMsg,
+                        reactions: (oldMsg.reactions || []).filter(r => !(r.userId === userId && r.emoji === emoji)),
+                    };
+                    newMessages.set(channelId, newMsgs);
+                    break;
+                }
+            }
+            return { messages: newMessages };
+        });
+    },
     setTyping: (channelId, userId, username) => {
         set((state) => {
             const newTyping = new Map(state.typingUsers);