organizing stuff better with taking out a layer of abstraction as we don't have many pages and just do everything in the provider

packages/desktop/src/providers/StreamProvider.tsx

@@ -21,9 +21,8 @@
 
 import React, { useEffect, useContext, useState, useRef, useMemo, useCallback } from 'react';
 import Peer from 'simple-peer';
-import useRealTimeRooms from './RealTimeRoomProvider';
 import useAuth from './AuthProvider';
-import { Updater, useImmer } from 'use-immer';
+import { useImmer } from 'use-immer';
 import useSockets from './SocketProvider';
 import {
   RtcReceiveSignalResponse,
@@ -32,6 +31,7 @@ import {
   ServerResponseChannels,
 } from '@nirvana/core/sockets/channels';
 import toast from 'react-hot-toast';
+import useTerminalProvider from './TerminalProvider';
 
 type PeerMap = {
   [userId: string]: Peer;
@@ -45,7 +45,7 @@ const StreamProviderContext = React.createContext<IStreamProvider>({
 });
 
 export function StreamProvider({ children }: { children: React.ReactChild }) {
-  const { roomsMap } = useRealTimeRooms();
+  const { roomsMap } = useTerminalProvider();
   const { user } = useAuth();
 
   const { $ws } = useSockets();

packages/desktop/src/providers/TerminalProvider.tsx

@@ -26,6 +26,9 @@ import { updateLineMemberState } from '../api/NirvanaApi';
 import UpdateLineMemberState from '@nirvana/core/requests/updateLineMemberState.request';
 import useAuth from './AuthProvider';
 import { User } from '@nirvana/core/models/user.model';
+import SidePanel from '../tree/protected/terminal/panels/SidePanel';
+import MainPanel from '../tree/protected/terminal/panels/MainPanel';
+import useElectron from './ElectronProvider';
 
 type LineIdToMasterLine = {
   [lineId: string]: MasterLineData;
@@ -113,6 +116,8 @@ export function RealTimeRoomProvider({ children }: { children: React.ReactChild
   const { $ws } = useSockets();
   const [roomMap, updateRoomMap] = useImmer<LineIdToMasterLine>({});
 
+  const { desktopMode } = useElectron();
+
   const [selectedLineId, setSelectedLineId] = useState<string>();
 
   const [moveLineState, moveLine] = useAsyncFn(updateLineMemberState);
@@ -353,11 +358,19 @@ export function RealTimeRoomProvider({ children }: { children: React.ReactChild
         handleShowNewChannelForm,
       }}
     >
+      <div className="flex flex-col flex-1">
+        <div className="flex flex-row flex-1">
+          <SidePanel />
+
+          {desktopMode === 'mainApp' && <MainPanel />}
+        </div>
+      </div>
+
       {children}
     </RealTimeRoomContext.Provider>
   );
 }
 
-export default function useRealTimeRooms() {
+export default function useTerminalProvider() {
   return useContext(RealTimeRoomContext);
 }

packages/desktop/src/tree/electronApp.tsx

@@ -1,12 +1,11 @@
 import React from 'react';
 import { Toaster } from 'react-hot-toast';
 import { RoomsProvider } from '../providers/RoomsProvider';
-import { RealTimeRoomProvider } from '../providers/RealTimeRoomProvider';
+import { RealTimeRoomProvider } from '../providers/TerminalProvider';
 import { AuthProvider } from '../providers/AuthProvider';
 import { ElectronProvider } from '../providers/ElectronProvider';
 import { SocketProvider } from '../providers/SocketProvider';
 import ProtectedRoute from './protected/ProtectedRoute';
-import Terminal from './protected/terminal/Terminal';
 import { StreamProvider } from '../providers/StreamProvider';
 
 export default function ElectronApp() {
@@ -16,11 +15,11 @@ export default function ElectronApp() {
         <ProtectedRoute>
           <SocketProvider>
             <RoomsProvider>
-              <RealTimeRoomProvider>
+              <StreamProvider>
-                <StreamProvider>
+                <RealTimeRoomProvider>
-                  <Terminal />
+                  <></>
-                </StreamProvider>
+                </RealTimeRoomProvider>
-              </RealTimeRoomProvider>
+              </StreamProvider>
             </RoomsProvider>
           </SocketProvider>
         </ProtectedRoute>

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

@@ -1,26 +0,0 @@
-import React, { useCallback, useState } from 'react';
-import useRealTimeRooms from '../../../providers/RealTimeRoomProvider';
-import useElectron from '../../../providers/ElectronProvider';
-import useAuth from '../../../providers/AuthProvider';
-import NavBar from './navbar/Navbar';
-import MasterLineData from '@nirvana/core/models/masterLineData.model';
-
-import useRooms from '../../../providers/RoomsProvider';
-import toast from 'react-hot-toast';
-import SidePanel from './panels/SidePanel';
-import MainPanel from './panels/MainPanel';
-
-export default function Terminal() {
-  const { roomsMap } = useRealTimeRooms();
-  const { desktopMode } = useElectron();
-
-  return (
-    <div className="flex flex-col flex-1">
-      <div className="flex flex-row flex-1">
-        <SidePanel />
-
-        {desktopMode === 'mainApp' && <MainPanel />}
-      </div>
-    </div>
-  );
-}

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

@@ -1,6 +1,5 @@
 import React, { useMemo, useEffect, useState, useCallback } from 'react';
 import useAuth from '../../../../providers/AuthProvider';
-import useRealTimeRooms from '../../../../providers/RealTimeRoomProvider';
 import useStreams from '../../../../providers/StreamProvider';
 
 import { LineMemberState } from '@nirvana/core/models/line.model';
@@ -19,11 +18,12 @@ import {
 } from 'react-icons/fi';
 import { Avatar, Tooltip } from 'antd';
 import { useKeyPressEvent } from 'react-use';
+import useTerminalProvider from '../../../../providers/TerminalProvider';
 
 export default function LineDetails() {
   const { user } = useAuth();
 
-  const { selectedLineId, roomsMap, handleUpdateLineMemberState } = useRealTimeRooms();
+  const { selectedLineId, roomsMap, handleUpdateLineMemberState } = useTerminalProvider();
 
   const selectedLine = useMemo(() => roomsMap[selectedLineId], [selectedLineId, roomsMap]);
 

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

@@ -40,7 +40,11 @@ export default React.memo(function LineRow({
   }, [handleSelectLine, line.lineDetails, index]);
 
   const hotkeyActivateLine = useCallback(() => {
-    if (isUserToggleTuned) handleActivateLine();
+    // TODO: disable for higher numbers? ehh maybe hidden easter egg to select more?
+
+    // if (isUserToggleTuned) handleActivateLine();
+
+    handleActivateLine();
   }, [isUserToggleTuned, handleActivateLine]);
 
   useKeyPressEvent((index + 1).toString(), hotkeyActivateLine);

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

@@ -1,6 +1,5 @@
 import React, { useMemo, useEffect, useRef, useState } from 'react';
 import useAuth from '../../../../providers/AuthProvider';
-import useRealTimeRooms from '../../../../providers/RealTimeRoomProvider';
 
 import { LineMemberState } from '@nirvana/core/models/line.model';
 import LineIcon from '../../../../components/lineIcon';
@@ -20,11 +19,12 @@ import useStreams from '../../../../providers/StreamProvider';
 import Peer from 'simple-peer';
 import NewChannelForm from '../compose/NewChannelForm';
 import LineDetails from '../line/LineDetails';
+import useTerminalProvider from '../../../../providers/TerminalProvider';
 
 export default function MainPanel() {
   const { user } = useAuth();
 
-  const { selectedLineId, showNewChannelForm, handleShowNewChannelForm } = useRealTimeRooms();
+  const { selectedLineId, showNewChannelForm, handleShowNewChannelForm } = useTerminalProvider();
 
   // already won't see stuff for overlay only mode as per parent configuration
 

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

@@ -2,18 +2,18 @@ import { LineMemberState } from '@nirvana/core/models/line.model';
 import { Skeleton, Tooltip } from 'antd';
 import React, { useCallback, useMemo, useState } from 'react';
 import { FiActivity, FiPlus, FiSearch } from 'react-icons/fi';
-import useRealTimeRooms from '../../../../providers/RealTimeRoomProvider';
 import useRooms from '../../../../providers/RoomsProvider';
 import NavBar from '../navbar/Navbar';
 import NoTextLogo from '@nirvana/components/logo/NoTextLogo';
 import LineRow from '../line/LineRow';
+import useTerminalProvider from '../../../../providers/TerminalProvider';
 
 export default function SidePanel() {
   // using merely for loading state...better to add to realtimeroom context?
   const { rooms: initialRoomsFetch } = useRooms();
 
   const { roomsMap, handleSelectLine, selectedLineId, handleShowNewChannelForm } =
-    useRealTimeRooms();
+    useTerminalProvider();
 
   // todo: sort
   const allChannels = useMemo(() => {
@@ -75,7 +75,7 @@ export default function SidePanel() {
       </div>
 
       {/* tuned in header + general controls */}
-      <div className="flex flex-col shadow-xl bg-gray-100">
+      <div className="flex flex-col shadow-xl bg-gray-100 pb-2">
         <Tooltip placement="right" title={'These are your active rooms...'}>
           <div className="flex flex-row items-center py-3 px-4 pb-0">
             <span className="flex flex-row gap-2 items-center justify-start text-gray-400 animate-pulse">