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;
         }