i actually like it....sidebar with messenger feel and rest of canvas with discord feel

packages/desktop/src/electron/constants.ts

@@ -3,26 +3,26 @@
 // SINCE IT's NOT A NODE PROCESS
 
 enum Channels {
-  ACTIVATE_LOG_IN = "ACTIVATE_LOG_IN",
-  GOOGLE_AUTH_TOKENS = "GOOGLE_AUTH_TOKENS",
-  RESIZE_WINDOW = "RESIZE_WINDOW",
-  ON_WINDOW_BLUR = "ON_WINDOW_BLUR",
+  ACTIVATE_LOG_IN = 'ACTIVATE_LOG_IN',
+  GOOGLE_AUTH_TOKENS = 'GOOGLE_AUTH_TOKENS',
+  RESIZE_WINDOW = 'RESIZE_WINDOW',
+  ON_WINDOW_BLUR = 'ON_WINDOW_BLUR',
 }
 
 export enum STORE_ITEMS {
-  AUTH_SESSION_JWT = "AUTH_SESSION_JWT",
+  AUTH_SESSION_JWT = 'AUTH_SESSION_JWT',
 }
 
 export type Dimensions = { height: number; width: number };
 
 export interface DimensionChangeRequest {
   setAlwaysOnTop: boolean;
-  setPosition?: "topRight" | "center";
+  setPosition?: 'topRight' | 'center';
   dimensions: Dimensions;
   addDimensions: boolean;
 }
 
-export const DEFAULT_APP_PRESET: Dimensions = { height: 875, width: 1210 };
+export const DEFAULT_APP_PRESET: Dimensions = { height: 750, width: 1210 };
 
 export const OVERLAY_ONLY_INITIAL_PRESET: Dimensions = {
   height: 50,

packages/desktop/src/providers/StreamProvider.tsx

@@ -57,13 +57,12 @@ export function StreamProvider({ children }: { children: React.ReactChild }) {
   const localStreamRef = useRef<HTMLVideoElement>(null);
 
   useEffect(() => {
-    navigator.mediaDevices
-      .getUserMedia({ video: true, audio: true })
-      .then((localMediaStream: MediaStream) => {
-        setUserLocalStream(localMediaStream);
-
-        if (localStreamRef.current) localStreamRef.current.srcObject = localMediaStream;
-      });
+    // navigator.mediaDevices
+    //   .getUserMedia({ video: true, audio: true })
+    //   .then((localMediaStream: MediaStream) => {
+    //     setUserLocalStream(localMediaStream);
+    //     if (localStreamRef.current) localStreamRef.current.srcObject = localMediaStream;
+    //   });
   }, [localStreamRef]);
 
   useEffect(() => {

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

@@ -96,46 +96,14 @@ export default function NavBar() {
   );
 
   return (
-    <div
-      className="flex flex-row gap-3 items-center bg-gray-100 border-b border-b-200 p-4"
-      id="titlebar"
-    >
-      <div
-        onKeyDown={() => {
-          //
-        }}
-        onClick={() => {
-          console.log('opening main app');
-        }}
-        role="presentation"
-      >
-        <NoTextLogo type="small" />
-      </div>
-
-      <div className="mx-auto flex flex-row items-center space-x-2 bg-gray-200 p-2 rounded w-[400px]">
-        <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={(e) => setSearchQuery(e.target.value)}
-          value={searchQuery}
-        />
-      </div>
-
-      <button
-        onClick={handleFlowState}
-        className="text-gray-300 text-xs p-3 transition-all hover:bg-gray-200"
-      >
-        flow state
-      </button>
-
+    <div className="flex flex-row gap-3 items-center bg-gray-100 p-4 pb-0" id="titlebar">
       <Dropdown overlay={profileMenu}>
         <div className={'cursor-pointer'}>
           {user.picture && (
             <Avatar
               key={`userHeaderProfilePicture`}
               className="shadow-md hover:scale-110 transition-all"
-              size={'large'}
+              size={'default'}
               alt={user.name}
               src={user.picture}
               shape="square"
@@ -144,6 +112,15 @@ export default function NavBar() {
         </div>
       </Dropdown>
 
+      <span className="font-semibold mx-auto">Channels</span>
+
+      <button
+        onClick={handleFlowState}
+        className="text-gray-300 text-xs p-3 transition-all hover:bg-gray-200"
+      >
+        flow
+      </button>
+
       {/* menu for the output options */}
       {/* <Menu
           open={menuOpen}

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

@@ -104,7 +104,7 @@ function LineDetails() {
   const showCreateChannel = false;
   if (showCreateChannel)
     return (
-      <div className="flex flex-col flex-1 items-center p-10 bg-gray-100 border-l border-l-gray-200">
+      <div className="flex flex-col flex-1 items-center pt-10 bg-gray-100 border-l border-l-gray-200">
         <div className="flex flex-col gap-2 max-w-lg w-full">
           {/* people search */}
           <span className="text-gray-500">People</span>
@@ -185,115 +185,36 @@ function LineDetails() {
   return (
     <div
       className="flex flex-col flex-1 bg-gray-100 
-      border-l border-l-gray-200 relative p-5"
+      border-l border-l-gray-200 relative"
     >
-      {/* 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>
+      {/* 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} />} */}
 
-        <span className={'text-gray-300 text-sm'}>yesterday</span>
+        <div className="flex flex-col items-start mr-auto group">
+          <span className="flex flex-row gap-2 items-center">
+            <h2 className={`text-md text-gray-800 font-semibold`}>
+              {selectedLine.lineDetails.name || selectedLine.otherUserObjects[0].givenName}
+            </h2>
 
-        <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>
-
-          {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-pulse" />
-          <span>right now</span>
-        </span>
-
-        <div
-          className={
-            'rounded flex flex-col items-center gap-2 w-full p-2 shadow-2xl border border-teal-500'
-          }
-        >
-          {selectedLine.otherUserObjects.map((otherUser) => (
-            <div
-              key={`linehistory-${otherUser.name}`}
-              className={'flex flex-row gap-2 w-full items-center animate-pulse p-5'}
+            <button
+              className={`p-1 hidden group-hover:flex justify-center items-center hover:bg-gray-300
+           transition-all hover:scale-105`}
             >
-              <Avatar src={otherUser.picture} shape="square" size={'large'} />
-
-              <span key={`chunk-${otherUser.name}`} className="text-gray-600 font-semibold">
-                {`${otherUser.name}`}
-              </span>
-
-              <span className="text-gray-600 text-md ml-auto">
-                <FiHeadphones />
-              </span>
-            </div>
-          ))}
+              <FiSettings className="text-gray-400 text-xs" />
+            </button>
+          </span>
         </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-3 flex justify-center items-center shadow-lg
+            className={`ml-2 p-2 flex justify-center items-center shadow-lg
           hover:scale-105 transition-all animate-pulse ${
             isUserToggleTuned ? 'bg-gray-800 text-white' : 'text-black'
           }`}
@@ -309,14 +230,118 @@ function LineDetails() {
                   )
             }
           >
-            <FiActivity className="text-lg" />
+            <FiActivity className="text-md" />
           </button>
         </Tooltip>
+      </div>
+
+      {/* main canvas */}
+      <div className="flex flex-row flex-1">
+        {/* line timeline */}
+        <div
+          className="flex flex-col justify-end items-center gap-2 p-5 mx-auto
+         max-w-lg w-full"
+        >
+          <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-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>
+
+          <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>
+        </div>
+
+        <div className="max w-[250px] p-4 shadow-2xl flex flex-col">
+          <span className="text-teal-600 text-sm flex flex-row items-center gap-2">
+            <FiSun /> <span>Right Now</span>
+          </span>
+
+          {selectedLine.otherUserObjects.map((otherUser) => (
+            <div
+              key={otherUser.email}
+              className="flex flex-row gap-2 items-center p-2 
+                hover:bg-gray-200 cursor-pointer rounded"
+            >
+              <Avatar
+                src={otherUser.picture}
+                size={'large'}
+                shape={'square'}
+                className={'shadow-lg'}
+              />
+              <span className="flex flex-col gap-1">
+                <span className="text-md font-semibold text-gray-600">{otherUser.name}</span>
+              </span>
+            </div>
+          ))}
+
+          <span className="text-gray-400 text-sm flex flex-row items-center gap-2">
+            <span>Offline</span>
+          </span>
+        </div>
+      </div>
+
+      <div className="absolute right-5 bottom-5 flex flex-row gap-3">
         <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'
-          }`}
+            hover:scale-105 transition-all ${
+              isUserBroadcasting ? 'bg-teal-800 text-white' : 'text-teal-800 border-teal-800 border'
+            }`}
         >
           <FiSun className="text-lg" />
         </button>

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

@@ -32,10 +32,33 @@ export default function SidePanel() {
     return [tunedLines, restLines];
   }, [roomsMap]);
 
+  const [searchQuery, setSearchQuery] = useState<string>('');
+
   return (
-    <div className="flex flex-col w-[400px] relative group shadow-xl bg-white">
+    <div className="flex flex-col w-[350px] relative group shadow-2xl bg-white">
+      <NavBar />
+
+      <div className="flex flex-row p-4 items-center bg-gray-100 gap-2">
+        <div className="flex-1 flex flex-row items-center space-x-2 bg-gray-200 p-2 rounded">
+          <FiSearch className="text-xs text-gray-400" />
+          <input
+            placeholder="Search for people, channels, clips..."
+            className="flex-1 bg-transparent placeholder-gray-400 text-gray-500 placeholder:text-xs focus:outline-none"
+            onChange={(e) => setSearchQuery(e.target.value)}
+            value={searchQuery}
+          />
+        </div>
+
+        <button
+          className="ml-auto flex flex-row items-center justify-evenly 
+      shadow-xl bg-gray-800 p-2 text-white text-xs"
+        >
+          <FaPlus />
+        </button>
+      </div>
+
       {/* tuned in lines block */}
-      <div className="flex flex-col border-b border-b-gray-100 bg-gray-100 shadow-xl">
+      <div className="flex flex-col bg-gray-100 shadow-xl">
         {/* tuned in header + general controls */}
 
         <Tooltip placement="right" title={'These are your active rooms...'}>
@@ -49,13 +72,6 @@ export default function SidePanel() {
                 toggleTunedLines?.length || 0
               }/3`}</p>
             </span>
-
-            <button
-              className="ml-auto flex flex-row items-center justify-evenly 
-      shadow-xl bg-gray-800 p-2 text-white text-xs"
-            >
-              <FaPlus />
-            </button>
           </div>
         </Tooltip>
 
@@ -79,7 +95,7 @@ export default function SidePanel() {
       )}
 
       {/* rest of the lines */}
-      <div className={'flex flex-col mt-5'}>
+      <div className={'flex flex-col'}>
         {initialRoomsFetch.loading ? (
           <Skeleton />
         ) : (
@@ -93,6 +109,19 @@ export default function SidePanel() {
           ))
         )}
       </div>
+
+      <div
+        className="absolute bottom-4 left-4"
+        onKeyDown={() => {
+          //
+        }}
+        onClick={() => {
+          console.log('opening main app');
+        }}
+        role="presentation"
+      >
+        <NoTextLogo type="small" />
+      </div>
     </div>
   );
 }