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

TODO.md

@@ -8,11 +8,4 @@
 
 - Can we add a way to tell the user they are connecting to voice. Like show them its connecting so the user knows something is happening instead of them clicking on the voice stage again and again.
 
-- Add photo / video albums like Commit https://commet.chat/
-
-
-<!-- When we call somone in a private dm call can we play the default_call_sound.mp3 to the person reciving  
-  the call for about 30 seconds. After the 30 seconds we stop ringing. Also it shows "Moyettes is in a call" with a join call button but its to the left side and pushes chat. Can we make it take up the voice stage div and show the user that is calling and 2 buttons. One to join call and one to reject the call.
- -->
-
-  When i switch from a private dm to the server i hear a ping notification even though i have no notifications. Also when i switch from a text channel to another text channel a certain text channel is the one thats triggering it and i dont know why. Its only for one user that its doing it.
+- Add photo / video albums like Commit https://commet.chat/

apps/electron/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@discord-clone/electron",
   "private": true,
-  "version": "1.0.19",
+  "version": "1.0.20",
   "description": "Discord Clone - Electron app",
   "author": "Moyettes",
   "type": "module",

packages/shared/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@discord-clone/shared",
   "private": true,
-  "version": "1.0.19",
+  "version": "1.0.20",
   "type": "module",
   "main": "src/App.jsx",
   "dependencies": {

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 = () => {};