cleaning abstractions and rules

packages/desktop/src/providers/TerminalProvider.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useContext, useCallback } from 'react';
+import React, { useEffect, useState, useContext, useCallback, useMemo } from 'react';
 import useRooms from './RoomsProvider';
 import useSockets from './SocketProvider';
 
@@ -54,6 +54,7 @@ type BroadcastersMap = {
 
 interface ITerminalProvider {
   roomsMap: LineIdToMasterLine;
+  allChannels: MasterLineData[];
 
   selectedLineId?: string;
   handleSelectLine?: (newLineId: string) => void;
@@ -62,10 +63,15 @@ interface ITerminalProvider {
 
   showNewChannelForm: boolean;
   handleShowNewChannelForm?: (showOrHide: 'show' | 'hide') => void;
+
+  tunedChannelsCount: number;
 }
 
 const TerminalContext = React.createContext<ITerminalProvider>({
   roomsMap: {},
+  allChannels: [],
+
+  tunedChannelsCount: 0,
 
   showNewChannelForm: false,
 });
@@ -355,10 +361,53 @@ export function TerminalProvider({ children }: { children: React.ReactChild }) {
 
   useKeyPressEvent('Escape', clearMind);
 
+  // todo: sort based on content blocks and my last activity date
+  const allChannels = useMemo(() => {
+    let channels = Object.values(roomMap);
+
+    if (desktopMode === 'overlayOnly') {
+      channels = channels.filter((currentChannel) =>
+        currentChannel.tunedInMemberIds?.includes(user._id.toString()),
+      );
+    }
+
+    channels.sort((channelA, channelB) => {
+      if (
+        channelA.currentUserMember.state === LineMemberState.TUNED &&
+        channelB.currentUserMember.state === LineMemberState.INBOX
+      )
+        return -1;
+
+      if (
+        channelB.currentUserMember.state === LineMemberState.TUNED &&
+        channelA.currentUserMember.state === LineMemberState.INBOX
+      )
+        return 1;
+
+      if (channelA.lineDetails.createdDate > channelB.lineDetails.createdDate) return 1;
+
+      // sort also by activity
+
+      return -1;
+    });
+
+    return channels;
+  }, [roomMap, desktopMode, user]);
+
+  const tunedChannelsCount = useMemo(
+    () =>
+      allChannels?.filter(
+        (currChannel) => currChannel.currentUserMember.state === LineMemberState.TUNED,
+      )?.length,
+    [allChannels],
+  );
+
   return (
     <TerminalContext.Provider
       value={{
         roomsMap: roomMap,
+        allChannels,
+        tunedChannelsCount,
         handleSelectLine,
         selectedLineId,
         handleUpdateLineMemberState,

packages/desktop/src/tree/protected/terminal/line/LineRow.tsx

@@ -51,6 +51,7 @@ export default React.memo(function LineRow({
 
   const profilePictures = useMemo(() => {
     const allMembers: string[] = [];
+    const allMembersWithoutMe: string[] = [];
     const tunedMembers: string[] = [];
     const broadcastMembers: string[] = [];
     const untunedMembers: string[] = [];
@@ -61,6 +62,7 @@ export default React.memo(function LineRow({
     line.otherUserObjects?.forEach((otherUser) => {
       if (otherUser.picture) {
         allMembers.push(otherUser.picture);
+        allMembersWithoutMe.push(otherUser.picture);
 
         if (line.tunedInMemberIds?.includes(otherUser._id.toString())) {
           tunedMembers.push(otherUser.picture);
@@ -80,6 +82,7 @@ export default React.memo(function LineRow({
       allMembers,
       tunedMembers,
       broadcastMembers,
+      allMembersWithoutMe,
     };
   }, [line, user]);
 
@@ -160,7 +163,7 @@ export default React.memo(function LineRow({
             sourceImages={
               profilePictures.tunedMembers.length > 0
                 ? profilePictures.tunedMembers
-                : profilePictures.allMembers
+                : profilePictures.allMembersWithoutMe
             }
           />
         </span>

packages/desktop/src/tree/protected/terminal/panels/SidePanel.tsx

@@ -11,6 +11,7 @@ import useAuth from '../../../../providers/AuthProvider';
 import useSockets from '../../../../providers/SocketProvider';
 import useElectron from '../../../../providers/ElectronProvider';
 import useStreams from '../../../../providers/StreamProvider';
+import { maxToggleTunedChannelCount } from '../rules';
 
 export default function SidePanel() {
   // using merely for loading state...better to add to realtimeroom context?
@@ -18,46 +19,18 @@ export default function SidePanel() {
 
   const { user, handleLogout } = useAuth();
 
-  const { roomsMap, handleSelectLine, selectedLineId, handleShowNewChannelForm } =
-    useTerminalProvider();
+  const {
+    allChannels,
+    tunedChannelsCount,
+    handleSelectLine,
+    selectedLineId,
+    handleShowNewChannelForm,
+  } = useTerminalProvider();
 
   const { handleFlowState } = useSockets();
 
   const { handleToggleDesktopMode, desktopMode, isWindowFocused } = useElectron();
 
-  // todo: sort based on content blocks and my last activity date
-  const allChannels = useMemo(() => {
-    let channels = Object.values(roomsMap);
-
-    if (desktopMode === 'overlayOnly') {
-      channels = channels.filter((currentChannel) =>
-        currentChannel.tunedInMemberIds?.includes(user._id.toString()),
-      );
-    }
-
-    channels.sort((channelA, channelB) => {
-      if (
-        channelA.currentUserMember.state === LineMemberState.TUNED &&
-        channelB.currentUserMember.state === LineMemberState.INBOX
-      )
-        return -1;
-
-      if (
-        channelB.currentUserMember.state === LineMemberState.TUNED &&
-        channelA.currentUserMember.state === LineMemberState.INBOX
-      )
-        return 1;
-
-      if (channelA.lineDetails.createdDate > channelB.lineDetails.createdDate) return 1;
-
-      // sort also by activity
-
-      return -1;
-    });
-
-    return channels;
-  }, [roomsMap, desktopMode, user]);
-
   const [searchQuery, setSearchQuery] = useState<string>('');
 
   const handleCreateNewChannel = useCallback(() => {
@@ -138,8 +111,8 @@ shadow-xl bg-gray-800 p-2 text-white text-xs"
                   <h2 className="text-inherit text-xs">Tuned In</h2>
 
                   <p className="text-slate-300 text-xs ml-auto">{`${
-                    allChannels?.length || 0
-                  }/3`}</p>
+                    tunedChannelsCount || 0
+                  }/${maxToggleTunedChannelCount}`}</p>
                 </span>
               </div>
             </Tooltip>

packages/desktop/src/tree/protected/terminal/rules.ts

@@ -0,0 +1,3 @@
+export const maxChannelUserCount = 5;
+
+export const maxToggleTunedChannelCount = 3;