further segmentation of components for easier tree follow

packages/desktop/src/providers/RealTimeRoomProvider.tsx

@@ -105,6 +105,8 @@ const RealTimeRoomContext = React.createContext<IRealTimeRoomProvider>({
  * - fetch content blocks for line history - react query
  */
 
+// TODO: many of this can be done in a HOC like <Terminal /> but it doesn't matter, they both just
+// re-render, just make sure to pass in lighter props to children like main panel or lineRow
 export function RealTimeRoomProvider({ children }: { children: React.ReactChild }) {
   const { rooms } = useRooms();
   const { user } = useAuth();
@@ -332,6 +334,7 @@ export function RealTimeRoomProvider({ children }: { children: React.ReactChild
     [setShowNewChannelForm, setSelectedLineId],
   );
 
+  // handle shortcuts
   const clearMind = useCallback(() => {
     setSelectedLineId(undefined);
     setShowNewChannelForm(false);

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

@@ -0,0 +1,129 @@
+import MasterLineData from '@nirvana/core/models/masterLineData.model';
+import React, { useMemo, useState } from 'react';
+
+import { Avatar, Skeleton, Tooltip } from 'antd';
+import { FaPlus, FaSearch } from 'react-icons/fa';
+import { FiActivity, FiPlus, FiSearch, FiSun, FiX } from 'react-icons/fi';
+import useRealTimeRooms from '../../../../providers/RealTimeRoomProvider';
+import useRooms from '../../../../providers/RoomsProvider';
+import useAuth from '../../../../providers/AuthProvider';
+import LineIcon from '../../../../components/lineIcon';
+import moment from 'moment';
+
+export default React.memo(function LineRow({
+  line,
+  handleSelectLine,
+  isSelected,
+}: {
+  line: MasterLineData;
+  handleSelectLine: (newLineId: string) => void;
+  isSelected: boolean;
+}) {
+  const { user } = useAuth();
+
+  const isUserTunedIn = useMemo(
+    () => line.tunedInMemberIds?.includes(user._id.toString()),
+    [line.tunedInMemberIds, user],
+  );
+
+  const renderRightActivity = useMemo(() => {
+    if (isSelected) {
+      return (
+        <Tooltip title={'esc'}>
+          <span className="ml-5 flex flex-col items-center gap-2 cursor-pointer">
+            <FiX className="text-gray-300 text-xl" />
+          </span>
+        </Tooltip>
+      );
+    }
+    // TODO: get the profile pictures of the broadcasters
+    if (line.currentBroadcastersUserIds?.length > 0)
+      return (
+        <Avatar.Group
+          key={`lineRowRightActivityGroup-${line.lineDetails._id.toString()}`}
+          maxCount={2}
+          maxPopoverTrigger="click"
+          size="small"
+          maxStyle={{
+            color: '#f56a00',
+            backgroundColor: '#fde3cf',
+            cursor: 'pointer',
+            borderRadius: '0',
+          }}
+          className="shadow-lg"
+        >
+          {line.otherUserObjects?.map((otherUser, index) => (
+            <Avatar
+              key={`lineListActivitySection-${otherUser._id.toString()}-${index}`}
+              src={otherUser.picture ?? ''}
+              shape="square"
+              size={'small'}
+            />
+          ))}
+        </Avatar.Group>
+      );
+
+    // if there is someone or me broadcasting here
+    if (line.currentBroadcastersUserIds?.length > 0)
+      return <FiSun className="text-teal-500 animate-pulse" />;
+
+    if (isUserTunedIn) return <FiActivity className="text-black animate-pulse" />;
+
+    // if there is new activity blocks for me
+    if (line.currentUserMember.lastVisitDate)
+      return <span className="h-2 w-2 rounded-full bg-slate-800 animate-pulse"></span>;
+
+    // if there is new activity/black dot, then show relative time as little bolder? or too much?
+
+    // TODO: compare last visit date to latest audio block
+    if (line.currentUserMember)
+      return (
+        <span className={`text-gray-400 ml-auto text-xs font-semibold`}>
+          {moment(line.currentUserMember.lastVisitDate).fromNow(true)}
+        </span>
+      );
+
+    return (
+      <span className={`text-gray-300 ml-auto text-xs `}>
+        {moment(line.currentUserMember.lastVisitDate).fromNow(true)}
+      </span>
+    );
+  }, [line, isSelected]);
+
+  const profilePictures = useMemo(() => {
+    const pictureSources: string[] = [];
+
+    // ?don't add in my image as that's useless contextually?
+    // if (userData?.user?.picture) pictureSources.push(userData.user.picture);
+
+    line.otherUserObjects?.forEach((otherUser) => {
+      if (otherUser.picture) pictureSources.push(otherUser.picture);
+    });
+
+    return pictureSources;
+  }, [line, user]);
+
+  return (
+    <div
+      onClick={() => handleSelectLine(line.lineDetails._id.toString())}
+      role={'presentation'}
+      className={`flex flex-row items-center justify-start gap-2 px-4 py-4 hover:bg-gray-200 
+      cursor-pointer transition-all relative z-50 rounded ${
+        isSelected && 'bg-gray-200 scale-110 shadow-2xl translate-x-3'
+      }`}
+    >
+      {/* status dot */}
+      {profilePictures && <LineIcon grayscale={!isUserTunedIn} sourceImages={profilePictures} />}
+
+      <h2
+        className={`text-inherit text-md max-w-[220px] truncate text-slate-800 ${
+          line.currentUserMember.lastVisitDate ? 'font-semibold' : ''
+        }`}
+      >
+        {line.lineDetails.name || line.otherUserObjects[0].givenName}
+      </h2>
+
+      <div className="ml-auto flex-shrink-0">{renderRightActivity}</div>
+    </div>
+  );
+});

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

@@ -11,6 +11,7 @@ import LineIcon from '../../../../components/lineIcon';
 import moment from 'moment';
 import NavBar from '../navbar/Navbar';
 import NoTextLogo from '@nirvana/components/logo/NoTextLogo';
+import LineRow from '../line/LineRow';
 
 export default function SidePanel() {
   // using merely for loading state...better to add to realtimeroom context?
@@ -133,123 +134,3 @@ export default function SidePanel() {
     </div>
   );
 }
-
-const LineRow = React.memo(LineRowTest);
-
-function LineRowTest({
-  line,
-  handleSelectLine,
-  isSelected,
-}: {
-  line: MasterLineData;
-  handleSelectLine: (newLineId: string) => void;
-  isSelected: boolean;
-}) {
-  const { user } = useAuth();
-
-  const isUserTunedIn = useMemo(
-    () => line.tunedInMemberIds?.includes(user._id.toString()),
-    [line.tunedInMemberIds, user],
-  );
-
-  const renderRightActivity = useMemo(() => {
-    if (isSelected) {
-      return (
-        <Tooltip title={'esc'}>
-          <span className="ml-5 flex flex-col items-center gap-2 cursor-pointer">
-            <FiX className="text-gray-300 text-xl" />
-          </span>
-        </Tooltip>
-      );
-    }
-    // TODO: get the profile pictures of the broadcasters
-    if (line.currentBroadcastersUserIds?.length > 0)
-      return (
-        <Avatar.Group
-          key={`lineRowRightActivityGroup-${line.lineDetails._id.toString()}`}
-          maxCount={2}
-          maxPopoverTrigger="click"
-          size="small"
-          maxStyle={{
-            color: '#f56a00',
-            backgroundColor: '#fde3cf',
-            cursor: 'pointer',
-            borderRadius: '0',
-          }}
-          className="shadow-lg"
-        >
-          {line.otherUserObjects?.map((otherUser, index) => (
-            <Avatar
-              key={`lineListActivitySection-${otherUser._id.toString()}-${index}`}
-              src={otherUser.picture ?? ''}
-              shape="square"
-              size={'small'}
-            />
-          ))}
-        </Avatar.Group>
-      );
-
-    // if there is someone or me broadcasting here
-    if (line.currentBroadcastersUserIds?.length > 0)
-      return <FiSun className="text-teal-500 animate-pulse" />;
-
-    if (isUserTunedIn) return <FiActivity className="text-black animate-pulse" />;
-
-    // if there is new activity blocks for me
-    if (line.currentUserMember.lastVisitDate)
-      return <span className="h-2 w-2 rounded-full bg-slate-800 animate-pulse"></span>;
-
-    // if there is new activity/black dot, then show relative time as little bolder? or too much?
-
-    // TODO: compare last visit date to latest audio block
-    if (line.currentUserMember)
-      return (
-        <span className={`text-gray-400 ml-auto text-xs font-semibold`}>
-          {moment(line.currentUserMember.lastVisitDate).fromNow(true)}
-        </span>
-      );
-
-    return (
-      <span className={`text-gray-300 ml-auto text-xs `}>
-        {moment(line.currentUserMember.lastVisitDate).fromNow(true)}
-      </span>
-    );
-  }, [line, isSelected]);
-
-  const profilePictures = useMemo(() => {
-    const pictureSources: string[] = [];
-
-    // ?don't add in my image as that's useless contextually?
-    // if (userData?.user?.picture) pictureSources.push(userData.user.picture);
-
-    line.otherUserObjects?.forEach((otherUser) => {
-      if (otherUser.picture) pictureSources.push(otherUser.picture);
-    });
-
-    return pictureSources;
-  }, [line, user]);
-
-  return (
-    <div
-      onClick={() => handleSelectLine(line.lineDetails._id.toString())}
-      role={'presentation'}
-      className={`flex flex-row items-center justify-start gap-2 px-4 py-4 hover:bg-gray-200 
-      cursor-pointer transition-all relative z-50 rounded ${
-        isSelected && 'bg-gray-200 scale-110 shadow-2xl translate-x-3'
-      }`}
-    >
-      {/* status dot */}
-      {profilePictures && <LineIcon grayscale={!isUserTunedIn} sourceImages={profilePictures} />}
-
-      <h2
-        className={`text-inherit text-md max-w-[220px] truncate text-slate-800 ${
-          line.currentUserMember.lastVisitDate ? 'font-semibold' : ''
-        }`}
-      >
-        {line.lineDetails.name || line.otherUserObjects[0].givenName}
-      </h2>
-
-      <div className="ml-auto flex-shrink-0">{renderRightActivity}</div>
-    </div>
-  );
-}