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/components/modals/JoinServer.tsx

@@ -1,48 +1,40 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { Modal } from '../ui/Modal';
 import { useUIStore } from '../../stores/uiStore';
 import { useServerStore } from '../../stores/serverStore';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate, useParams } from 'react-router-dom';
 
 export function JoinServerModal() {
+  const { inviteCode: urlInviteCode } = useParams<{ inviteCode?: string }>();
   const [inviteCode, setInviteCode] = useState('');
   const [error, setError] = useState('');
   const [isLoading, setIsLoading] = useState(false);
   const activeModal = useUIStore((s) => s.activeModal);
   const closeModal = useUIStore((s) => s.closeModal);
-  const loadServers = useServerStore((s) => s.loadServers);
+  const joinByCode = useServerStore((s) => s.joinByCode);
   const navigate = useNavigate();
 
   const isOpen = activeModal === 'joinServer';
 
+  useEffect(() => {
+    if (isOpen && urlInviteCode) {
+      setInviteCode(urlInviteCode);
+    }
+  }, [isOpen, urlInviteCode]);
+
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
     setError('');
 
-    if (!inviteCode.trim()) {
+    const code = inviteCode.trim();
+    if (!code) {
       setError('Invite code is required');
       return;
     }
 
     setIsLoading(true);
     try {
-      const token = localStorage.getItem('opencord_token');
-      const response = await fetch('/api/servers/join', {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-          'Authorization': `Bearer ${token}`,
-        },
-        body: JSON.stringify({ inviteCode: inviteCode.trim() }),
-      });
-
-      if (!response.ok) {
-        const data = await response.json() as { error: string };
-        throw new Error(data.error || 'Failed to join server');
-      }
-
-      const server = await response.json() as { id: string };
-      await loadServers();
+      const server = await joinByCode(code);
       closeModal();
       setInviteCode('');
       navigate(`/channels/${server.id}`);
@@ -60,7 +52,7 @@ export function JoinServerModal() {
           Enter an invite code to join an existing server.
         </p>
         {error && (
-          <div className="mb-3 p-2 bg-discord-red/10 border border-discord-red/30 rounded text-discord-red text-sm">
+          <div className="mb-3 p-2 bg-discord-red/10 border border-discord-red/30 rounded text-discord-text-danger text-sm">
             {error}
           </div>
         )}