Message indicators

src/app/chat/page.tsx

@@ -91,13 +91,18 @@ export default function Home() {
   const [ whoami, _setWhoAmI ] = useState<{[key:string]:any}>({});
   const whoamiRef = useRef(whoami);
   const setWhoAmI = (x:any) => {whoamiRef.current = x;_setWhoAmI(x);};
-  const [ channel, setChannel ] = useState("");
+  const [ channel, _setChannel ] = useState("");
+  const channelRef = useRef(channel);
+  const setChannel = (x:any) => {channelRef.current = x;_setChannel(x);};
   const [ channels, setChannels ] = useState<{
     name: string,
     action: () => void,
     readable: boolean,
     writable: boolean
   }[]>([]);
+  const [ channelIndicators, _setChannelIndicators ] = useState<{[key:string]:boolean}>({});
+  const channelIndicatorsRef = useRef(channelIndicators);
+  const setChannelIndicators = (x:any) => {channelIndicatorsRef.current = x;_setChannelIndicators(x);};
   const [ users, _setUsers ] = useState<{
     id: string,
     username: string,
@@ -278,6 +283,23 @@ export default function Home() {
     if (index < 0) return;
     setMessages(messagesRef.current.toSpliced(index, 1));
   }
+
+  function addChannelIndicator(channel:string) {
+    const CIs = {
+      ...channelIndicatorsRef.current
+    };
+    CIs[channel] = true;
+    setChannelIndicators(CIs);
+  }
+
+  function removeChannelIndicator(channel:string) {
+    const CIs = {
+      ...channelIndicatorsRef.current
+    };
+    delete CIs[channel];
+    setChannelIndicators(CIs);
+  }
+
   function messagesChatRes({ type, spec, data }:Res) {
     unsetError();
     if (type.includes("ERR")) {
@@ -309,7 +331,10 @@ export default function Home() {
 
   socket.off("RES_CHAT_MESSAGE");
   socket.on("RES_CHAT_MESSAGE", ({ message }) => {
+    if (message.channel == channelRef.current)
       addMessage(message);
+    else
+      addChannelIndicator(message.channel);
   });
 
   socket.off("RES_CHAT_RMMESSAGE");
@@ -352,6 +377,7 @@ export default function Home() {
     } else {
       prevscrtop.current = 0;
       setChannel(data.channel);
+      removeChannelIndicator(data.channel);
       socket.emit('SIG_CHAT_USERS', {}, usersChatRes);
       socket.emit('SIG_CHAT_MESSAGES', {}, messagesChatRes);
     }
@@ -400,6 +426,7 @@ export default function Home() {
       subtitle={error}
       props={{
         channels,
+        channelIndicators,
         users,
         currentChannel: channel,
         connected,

src/layout/ChatLayout/ChatLayout.tsx

@@ -26,6 +26,7 @@ export function ChatLayout<PropFormat>({
       readable: boolean,
       writable: boolean
     }[],
+    channelIndicators: {[key:string]:boolean},
     users: {
       id: string,
       username: string,
@@ -66,7 +67,17 @@ export function ChatLayout<PropFormat>({
               title={`#${channel.name}`}
             >
               <div className={`fw ${styles.Main_List_Button}`}>
-                  <span className="icon">tag</span>
+                  <ConditionalNull condition={props.channelIndicators[channel.name]}>
+                    <span className="icon" style={{
+                      position: "absolute",
+                      left: 8
+                    }}>
+                      arrow_right
+                    </span>
+                  </ConditionalNull>
+                  <span className="icon">
+                    tag
+                  </span>
                   <span>{channel.name}</span>
               </div>
             </button>))}