feat: real-time sync, notification & social system overhaul

- Add WS events: dm_channel_created, dm_channel_closed, friend_removed,
  channel_created/updated/deleted, server_updated
- Fix first-ever DM: broadcast dm_channel_created to recipient
- Add DELETE /api/dm/:id for closing DMs with re-open support
- Wire Close DM button in sidebar
- Fix dm_message_created for unknown channels (safety net)
- Broadcast friend_removed on friend deletion
- Sound system: track realtimeMessageEvents separately from API loads,
  play notification for messages in all channels, not just current
- Optimistic updates: send/edit/delete messages appear instantly with
  rollback on failure, temp message deduplication on WS echo
- Channel CRUD broadcasts to all server members
- Server update broadcast on PATCH
- Server join registers user in connectionManager immediately
- Reconnect: only reload current channel, preserve other channel caches
- Activity panel, right panel, member list toggle components

packages/web/src/components/voice/SoundController.tsx

@@ -139,20 +139,17 @@ export function SoundController() {
       }
     });
 
-    // 2. Listen to Chat State Changes (New Messages)
+    // 2. Listen to Chat State Changes (New Real-Time Messages from any channel)
     const unsubscribeChat = useChatStore.subscribe((state, prevState) => {
       if (isInitialMount.current) return;
 
-      // Check for new messages in the current channel
-      if (state.currentChannelId) {
-        const messages = state.messages.get(state.currentChannelId) || [];
-        const prevMessages = prevState.messages.get(state.currentChannelId) || [];
-        
-        if (messages.length > prevMessages.length) {
-          const lastMessage = messages[messages.length - 1];
-          // Don't play sound for our own messages
-          if (lastMessage && lastMessage.userId !== currentUser?.id) {
+      // Only trigger on NEW realtimeMessageEvents entries (not API loads)
+      if (state.realtimeMessageEvents.length > prevState.realtimeMessageEvents.length) {
+        const newEvents = state.realtimeMessageEvents.slice(prevState.realtimeMessageEvents.length);
+        for (const { message } of newEvents) {
+          if (message.userId !== currentUser?.id) {
             audioManager.playSound('message');
+            break; // one sound per batch
           }
         }
       }