feat: add ChatArea component for message display, link previews, and media handling, alongside a new Sidebar component.

packages/shared/src/components/ChatArea.jsx

@@ -522,6 +522,7 @@ const ChatArea = ({ channelId, channelName, channelType, username, channelKey, u
     const typingTimeoutRef = useRef(null);
     const lastTypingEmitRef = useRef(0);
     const isInitialLoadRef = useRef(true);
+    const pingSeededRef = useRef(false);
     const prevScrollHeightRef = useRef(0);
     const isLoadingMoreRef = useRef(false);
     const userSentMessageRef = useRef(false);
@@ -757,6 +758,7 @@ const ChatArea = ({ channelId, channelName, channelType, username, channelKey, u
         // Don't clear messageDecryptionCache — it persists across channel switches
         setDecryptedMessages([]);
         isInitialLoadRef.current = true;
+        pingSeededRef.current = false;
         notifiedMessageIdsRef.current = new Set();
         pendingNotificationIdsRef.current = new Set();
         setReplyingTo(null);
@@ -791,10 +793,11 @@ const ChatArea = ({ channelId, channelName, channelType, username, channelKey, u
         if (!decryptedMessages.length) return;
 
         // Initial load: seed all IDs, no sound
-        if (isInitialLoadRef.current) {
+        if (!pingSeededRef.current) {
             for (const msg of decryptedMessages) {
                 if (msg.id) notifiedMessageIdsRef.current.add(msg.id);
             }
+            pingSeededRef.current = true;
             return;
         }
 

packages/shared/src/components/Sidebar.jsx

@@ -841,10 +841,7 @@ const Sidebar = ({ channels, categories, activeChannel, onSelectChannel, usernam
         if (!unreadQueriesLoaded) return;
 
         const currentIds = new Set(
-            dmChannels.filter(dm =>
-                unreadChannels.has(dm.channel_id) &&
-                !(view === 'me' && activeDMChannel?.channel_id === dm.channel_id)
-            ).map(dm => dm.channel_id)
+            dmChannels.filter(dm => unreadChannels.has(dm.channel_id)).map(dm => dm.channel_id)
         );
 
         if (prevUnreadDMsRef.current === null) {
@@ -864,7 +861,7 @@ const Sidebar = ({ channels, categories, activeChannel, onSelectChannel, usernam
         }
 
         prevUnreadDMsRef.current = currentIds;
-    }, [dmChannels, unreadChannels, unreadQueriesLoaded, view, activeDMChannel, isReceivingScreenShareAudio]);
+    }, [dmChannels, unreadChannels, unreadQueriesLoaded, isReceivingScreenShareAudio]);
 
     const onRenameChannel = () => {};