nicer cleaner read of information?

packages/desktop/src/tree/protected/terminal/Terminal.tsx

@@ -16,8 +16,6 @@ export default function Terminal() {
 
   return (
     <div className="flex flex-col flex-1">
-      <NavBar />
-
       <div className="flex flex-row flex-1">
         <SidePanel />
 

packages/desktop/src/tree/protected/terminal/navbar/Navbar.tsx

@@ -100,21 +100,25 @@ export default function NavBar() {
   );
 
   return (
-    <div
-      className="flex flex-row items-center bg-gray-100 p-4 border-b border-b-gray-200"
-      id="titlebar"
-    >
-      <div
-        onKeyDown={handleOpenMainApp}
-        onClick={() => {
-          console.log('opening main app');
-        }}
-        role="presentation"
-      >
-        <NoTextLogo type="small" />
-      </div>
+    <div className="flex flex-row items-center bg-white p-4" id="titlebar">
+      <Dropdown overlay={profileMenu}>
+        <div className={'cursor-pointer'}>
+          {user.picture && (
+            <Avatar
+              key={`userHeaderProfilePicture`}
+              className="shadow-md hover:scale-110 transition-all"
+              size={'default'}
+              alt={user.name}
+              src={user.picture}
+              shape="square"
+            />
+          )}
+        </div>
+      </Dropdown>
 
-      {!shouldHideSearch && (
+      <span className="text-gray-600 font-semibold mx-auto">Channels</span>
+
+      {/* {!shouldHideSearch && (
         <div className="mx-auto flex flex-row items-center space-x-2">
           <FaSearch className="text-xs text-gray-300" />
           <input
@@ -125,30 +129,15 @@ export default function NavBar() {
             value={searchInput}
           />
         </div>
-      )}
+      )} */}
 
       <button
         onClick={handleFlowState}
         className="text-gray-300 text-xs p-3 transition-all hover:bg-gray-200"
       >
-        flow state
+        flow
       </button>
 
-      <Dropdown overlay={profileMenu}>
-        <div className={'cursor-pointer ml-2'}>
-          {user.picture && (
-            <Avatar
-              key={`userHeaderProfilePicture`}
-              className="shadow-md hover:scale-110 transition-all"
-              size={'large'}
-              alt={user.name}
-              src={user.picture}
-              shape="square"
-            />
-          )}
-        </div>
-      </Dropdown>
-
       {/* menu for the output options */}
       {/* <Menu
           open={menuOpen}

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

@@ -103,46 +103,111 @@ function LineDetails() {
   return (
     <div
       className="flex flex-col flex-1 bg-gray-100 
-      border-l border-l-gray-200 relative"
+      border-l border-l-gray-200 relative p-10"
     >
-      {/* line details */}
-      <div
-        className="p-4
-        flex flex-row items-center gap-2 justify-end border-b-gray-200 border-b"
-      >
-        {profilePictures && <LineIcon grayscale={false} sourceImages={profilePictures} />}
+      {/* line timeline */}
+      <div className="flex flex-col items-center gap-2 my-2 mx-auto max-w-lg w-full">
+        <span className={'text-gray-300 text-sm cursor-pointer hover:underline'}>load more</span>
 
-        <div className="flex flex-col items-start mr-auto group">
-          <span className="flex flex-row gap-2 items-center">
-            <h2 className={`text-lg text-slate-800 font-semibold`}>
-              {selectedLine.lineDetails.name || selectedLine.otherUserObjects[0].givenName}
-            </h2>
+        <span className={'text-gray-300 text-sm'}>yesterday</span>
 
-            <button
-              className={`p-1 hidden group-hover:flex justify-center items-center hover:bg-gray-300
-           transition-all hover:scale-105`}
-            >
-              <FiSettings className="text-gray-400 text-xs" />
-            </button>
-          </span>
+        <div className={'rounded flex flex-row items-center gap-2 w-full p-5'}>
+          <Avatar.Group key={`lineHistoryMessage-yesterday-afternoon}`}>
+            {selectedLine.otherUserObjects.map((otherUser) => (
+              <Avatar
+                key={`linehistory-${1}`}
+                src={otherUser.picture}
+                shape="square"
+                size={'large'}
+                // grayscale if not playing?
+                className={`${true && 'grayscale'}`}
+              />
+            ))}
+          </Avatar.Group>
 
-          <span className="flex flex-row gap-2 items-center">
-            <span className="text-gray-300 text-xs">{`${
-              selectedLine.otherMembers?.length + 1 ?? 0
-            } members`}</span>
-            <span className="h-1 w-1 bg-gray-800 rounded-full"></span>
-            <span className="text-teal-500 text-xs">{`${
-              selectedLine.tunedInMemberIds?.length ?? 0
-            } in this room`}</span>
-          </span>
+          {selectedLine.otherUserObjects.map((otherUser) => (
+            <span key={`chunk-${otherUser.name}`} className="text-gray-500">
+              {`${otherUser.givenName}, `}
+            </span>
+          ))}
+
+          <span className="ml-auto text-xs text-gray-300">{`${Math.floor(Math.random() * 10) + 1}:${
+            Math.floor(Math.random() * 100) + 10
+          }pm |`}</span>
+
+          <span className="text-gray-400 text-md">{`${
+            Math.floor(Math.random() * 60) + 1
+          } seconds`}</span>
         </div>
 
+        <span className={'text-gray-300 text-sm'}>today</span>
+
+        <div className={'rounded flex flex-row items-center gap-2 w-full shadow-lg p-5'}>
+          <Avatar.Group key={`lineHistoryMessage-yesterday-afternoon}`}>
+            {selectedLine.otherUserObjects.map((otherUser) => (
+              <Avatar
+                key={`linehistory-${1}`}
+                src={otherUser.picture}
+                shape="square"
+                size={'large'}
+                // grayscale if not playing?
+                className={`${true && 'grayscale'}`}
+              />
+            ))}
+          </Avatar.Group>
+
+          {selectedLine.otherUserObjects.map((otherUser) => (
+            <span key={`chunk-${otherUser.name}`} className="text-gray-500">
+              {`${otherUser.givenName}, `}
+            </span>
+          ))}
+
+          <span className="ml-auto text-xs text-gray-300">{`${Math.floor(Math.random() * 10) + 1}:${
+            Math.floor(Math.random() * 100) + 10
+          }pm |`}</span>
+
+          <span className="text-gray-400 text-md">{`${
+            Math.floor(Math.random() * 60) + 1
+          } seconds`}</span>
+        </div>
+
+        {/* <LineStreams broadcasters={selectedLine.tunedInMemberIds} /> */}
+      </div>
+
+      {/* live broadcasters */}
+      <div className="flex flex-col items-center gap-2 mx-auto w-full max-w-lg mt-auto">
+        <span className={'flex flex-row gap-2 items-center text-teal-500 text-sm'}>
+          <FiSun className="animate-ping" />
+          <span>right now</span>
+        </span>
+
+        <div className={'rounded flex flex-col items-center gap-2 w-full p-2 shadow-2xl'}>
+          {selectedLine.otherUserObjects.map((otherUser) => (
+            <div
+              key={`linehistory-${otherUser.name}`}
+              className={'flex flex-row gap-2 w-full items-center animate-pulse p-5'}
+            >
+              <Avatar src={otherUser.picture} shape="square" size={'large'} />
+
+              <span key={`chunk-${otherUser.name}`} className="text-gray-500">
+                {`${otherUser.givenName}`}
+              </span>
+
+              <span className="text-gray-600 text-md">
+                <FiHeadphones />
+              </span>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      <div className="absolute right-3 bottom-3 flex flex-row gap-3 ">
         <Tooltip
           placement="left"
           title={`${isUserToggleTuned ? 'click to untoggle' : 'click to stay tuned in'}`}
         >
           <button
-            className={`p-2 flex justify-center items-center shadow-lg
+            className={`p-3 flex justify-center items-center shadow-lg
           hover:scale-105 transition-all animate-pulse ${
             isUserToggleTuned ? 'bg-gray-800 text-white' : 'text-black'
           }`}
@@ -158,135 +223,18 @@ function LineDetails() {
                   )
             }
           >
-            <FiActivity className="text-md" />
+            <FiActivity className="text-lg" />
           </button>
         </Tooltip>
-      </div>
-
-      <div className="flex flex-row flex-1">
-        {/* line timeline */}
-        <div className="flex flex-col items-center gap-2 my-2 mx-auto max-w-lg w-full px-5">
-          <span className={'text-gray-300 text-sm cursor-pointer hover:underline'}>load more</span>
-
-          <span className={'text-gray-300 text-sm'}>yesterday</span>
-
-          <div className={'rounded flex flex-row items-center gap-2 w-full p-2'}>
-            <Avatar.Group key={`lineHistoryMessage-yesterday-afternoon}`}>
-              {selectedLine.otherUserObjects.map((otherUser) => (
-                <Avatar
-                  key={`linehistory-${1}`}
-                  src={otherUser.picture}
-                  shape="square"
-                  size={'large'}
-                  // grayscale if not playing?
-                  className={`${true && 'grayscale'}`}
-                />
-              ))}
-            </Avatar.Group>
-
-            {selectedLine.otherUserObjects.map((otherUser) => (
-              <span key={`chunk-${otherUser.name}`} className="text-gray-500">
-                {`${otherUser.givenName}, `}
-              </span>
-            ))}
-
-            <span className="ml-auto text-xs text-gray-300">{`${
-              Math.floor(Math.random() * 10) + 1
-            }:${Math.floor(Math.random() * 100) + 10}pm |`}</span>
-
-            <span className="text-gray-400 text-md">{`${
-              Math.floor(Math.random() * 60) + 1
-            } seconds`}</span>
-          </div>
-
-          <span className={'text-gray-300 text-sm'}>today</span>
-
-          <div className={'rounded flex flex-row items-center gap-2 w-full p-2  shadow-xl'}>
-            <Avatar.Group key={`lineHistoryMessage-yesterday-afternoon}`}>
-              {selectedLine.otherUserObjects.map((otherUser) => (
-                <Avatar
-                  key={`linehistory-${1}`}
-                  src={otherUser.picture}
-                  shape="square"
-                  size={'large'}
-                  // grayscale if not playing?
-                  className={`${true && 'grayscale'}`}
-                />
-              ))}
-            </Avatar.Group>
-
-            {selectedLine.otherUserObjects.map((otherUser) => (
-              <span key={`chunk-${otherUser.name}`} className="text-gray-500">
-                {`${otherUser.givenName}, `}
-              </span>
-            ))}
-
-            <span className="ml-auto text-xs text-gray-300">{`${
-              Math.floor(Math.random() * 10) + 1
-            }:${Math.floor(Math.random() * 100) + 10}pm |`}</span>
-
-            <span className="text-gray-400 text-md">{`${
-              Math.floor(Math.random() * 60) + 1
-            } seconds`}</span>
-          </div>
-
-          {/* live broadcasters */}
-          <span className={'flex flex-row gap-2 items-center text-teal-500 text-sm'}>
-            <FiSun className="animate-ping" />
-            <span>right now</span>
-          </span>
-
-          {/* change to show only the broadcasters */}
-          {/* <LineStreams broadcasters={selectedLine.tunedInMemberIds} /> */}
-        </div>
-
-        <div className="flex-1 flex flex-col shadow-2xl p-2">
-          {selectedLine.otherUserObjects.map((otherUser) => (
-            <div
-              key={`rightNowLineHistory-${otherUser._id.toString()}`}
-              className="flex flex-row p-2 gap-2 items-center bg-transparent"
-            >
-              <Avatar
-                key={`linehistory-${1}`}
-                src={otherUser.picture}
-                shape="square"
-                size={'large'}
-                // grayscale if not playing?
-                className={`shadow-lg`}
-              />
-              <span className="text-gray-600 font-semibold">{otherUser.name}</span>
-
-              <Tooltip title={'audio only'}>
-                <FiHeadphones className="text-gray-600 text-md ml-auto" />
-              </Tooltip>
-            </div>
-          ))}
-
-          <div
-            key={`rightNowLineHistory-${user._id.toString()}`}
-            className="flex flex-row p-2 gap-2 items-center bg-transparent"
-          >
-            <Avatar
-              key={`linehistory-${1}`}
-              src={user.picture}
-              shape="square"
-              size={'large'}
-              // grayscale if not playing?
-              className={`shadow-lg grayscale`}
-            />
-            <span className="text-gray-400">{user.name}</span>
-          </div>
-        </div>
-      </div>
-
-      <button
-        className={`p-3 absolute right-3 bottom-3 flex justify-center items-center shadow-2xl
+        <button
+          className={`p-3 flex justify-center items-center shadow-2xl
           hover:scale-105 transition-all ${
             isUserBroadcasting ? 'bg-teal-800 text-white' : 'text-teal-800 border-teal-800 border'
           }`}
-      >
-        <FiSun className="text-lg" />
-      </button>
+        >
+          <FiSun className="text-lg" />
+        </button>
+      </div>
     </div>
   );
 }

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

@@ -2,13 +2,15 @@ import { LineMemberState } from '@nirvana/core/models/line.model';
 import MasterLineData from '@nirvana/core/models/masterLineData.model';
 import { Avatar, Skeleton, Tooltip } from 'antd';
 import React, { useCallback, useMemo, useEffect } from 'react';
-import { FaPlus } from 'react-icons/fa';
-import { FiActivity, FiSun } from 'react-icons/fi';
+import { FaPlus, FaSearch } from 'react-icons/fa';
+import { FiActivity, FiSearch, FiSun } 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';
+import NavBar from '../navbar/Navbar';
+import NoTextLogo from '@nirvana/components/logo/NoTextLogo';
 
 export default function SidePanel() {
   // using merely for loading state...better to add to realtimeroom context?
@@ -31,9 +33,32 @@ export default function SidePanel() {
   }, [roomsMap]);
 
   return (
-    <div className="flex flex-col bg-white w-[400px] relative group">
+    <div className="flex flex-col w-[350px] relative group shadow-xl bg-white">
+      <NavBar />
+
+      <div className="px-4 flex flex-row items-center gap-2">
+        <div className="flex flex-row items-center space-x-2 bg-gray-100 p-2 rounded flex-1">
+          <FiSearch className="text-xs text-gray-300" />
+          <input
+            placeholder="Search for people, channels, clips..."
+            className="flex-1 bg-transparent placeholder-gray-300 placeholder:text-xs focus:outline-none"
+            onChange={() => {
+              //
+            }}
+            value={''}
+          />
+        </div>
+
+        <button
+          className="flex flex-row gap-2 items-center justify-evenly 
+      shadow-xl bg-gray-800 p-2 text-white text-xs"
+        >
+          <FaPlus />
+        </button>
+      </div>
+
       {/* tuned in lines block */}
-      <div className="bg-gray-100 flex flex-col shadow-lg">
+      <div className="flex flex-col border-b border-b-gray-100 mt-5">
         {/* tuned in header + general controls */}
 
         <Tooltip placement="right" title={'These are your active rooms...'}>
@@ -41,9 +66,11 @@ export default function SidePanel() {
             <span className="flex flex-row gap-2 items-center justify-start text-gray-400 animate-pulse">
               <FiActivity className="text-sm" />
 
-              <h2 className="text-inherit text-sm">Tuned In</h2>
+              <h2 className="text-inherit text-xs">Tuned In</h2>
 
-              <p className="text-slate-300 text-xs">{`${toggleTunedLines?.length || 0}/3`}</p>
+              <p className="text-slate-300 text-xs ml-auto">{`${
+                toggleTunedLines?.length || 0
+              }/3`}</p>
             </span>
           </div>
         </Tooltip>
@@ -68,7 +95,7 @@ export default function SidePanel() {
       )}
 
       {/* rest of the lines */}
-      <div className={'flex flex-col'}>
+      <div className={'flex flex-col mt-5'}>
         {initialRoomsFetch.loading ? (
           <Skeleton />
         ) : (
@@ -84,16 +111,16 @@ export default function SidePanel() {
       </div>
 
       <div
-        className="absolute bottom-3 right-3 z-10 scale-0 
-    group-hover:scale-100 ease-in-out hover:transition group-hover:transition delay-100 duration-200"
+        onKeyDown={() => {
+          //
+        }}
+        onClick={() => {
+          console.log('opening main app');
+        }}
+        role="presentation"
+        className="absolute bottom-5 left-5"
       >
-        <button
-          className="flex flex-row gap-2 items-center justify-evenly 
-      shadow-xl bg-gray-800 p-2 text-white text-xs"
-        >
-          <FaPlus />
-          <span>New line</span>
-        </button>
+        <NoTextLogo type="small" />
       </div>
     </div>
   );
@@ -155,8 +182,6 @@ function LineRowTest({
     if (line.currentUserMember.lastVisitDate)
       return <span className="h-2 w-2 rounded-full bg-slate-800 animate-pulse"></span>;
 
-    return <span className="h-2 w-2 rounded-full bg-white 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
@@ -191,9 +216,9 @@ function LineRowTest({
     <div
       onClick={() => handleSelectLine(line.lineDetails._id.toString())}
       role={'presentation'}
-      className={`flex flex-row items-center justify-start gap-2 px-4 py-6 hover:bg-gray-200 cursor-pointer transition-all
-last:border-b-0 border-b border-b-gray-200 relative z-50 rounded ${
-        isSelected && 'bg-gray-200 scale-110 shadow-2xl translate-x-3'
+      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-2'
       }`}
     >
       {/* status dot */}