playing aroudn with scroll and overflow in the sidepanel

packages/desktop/src/providers/TerminalProvider.tsx

@@ -51,7 +51,7 @@ type BroadcastersMap = {
   [lineId: string]: string[];
 };
 
-interface IRealTimeRoomProvider {
+interface ITerminalProvider {
   roomsMap: LineIdToMasterLine;
 
   selectedLineId?: string;
@@ -63,7 +63,7 @@ interface IRealTimeRoomProvider {
   handleShowNewChannelForm?: (showOrHide: 'show' | 'hide') => void;
 }
 
-const RealTimeRoomContext = React.createContext<IRealTimeRoomProvider>({
+const TerminalContext = React.createContext<ITerminalProvider>({
   roomsMap: {},
 
   showNewChannelForm: false,
@@ -110,7 +110,7 @@ const RealTimeRoomContext = React.createContext<IRealTimeRoomProvider>({
 
 // 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 }) {
+export function TerminalProvider({ children }: { children: React.ReactChild }) {
   const { rooms } = useRooms();
   const { user } = useAuth();
   const { $ws } = useSockets();
@@ -348,7 +348,7 @@ export function RealTimeRoomProvider({ children }: { children: React.ReactChild
   useKeyPressEvent('Escape', clearMind);
 
   return (
-    <RealTimeRoomContext.Provider
+    <TerminalContext.Provider
       value={{
         roomsMap: roomMap,
         handleSelectLine,
@@ -358,19 +358,17 @@ export function RealTimeRoomProvider({ children }: { children: React.ReactChild
         handleShowNewChannelForm,
       }}
     >
-      <div className="flex flex-col flex-1">
+      <div className="flex flex-row flex-1 h-full w-full">
-        <div className="flex flex-row flex-1">
+        <SidePanel />
-          <SidePanel />
 
-          {desktopMode === 'mainApp' && <MainPanel />}
+        {desktopMode === 'mainApp' && <MainPanel />}
-        </div>
       </div>
 
       {children}
-    </RealTimeRoomContext.Provider>
+    </TerminalContext.Provider>
   );
 }
 
 export default function useTerminalProvider() {
-  return useContext(RealTimeRoomContext);
+  return useContext(TerminalContext);
 }

packages/desktop/src/styles/index.css

@@ -11,7 +11,9 @@ body {
 }
 
 #root {
-  @apply flex flex-col flex-1;
+  height: inherit;
+  width: inherit;
+  display: flex;
   padding: 0 !important;
   font-family: 'IBM Plex Sans', sans-serif;
 }
@@ -47,3 +49,23 @@ button {
 .ant-modal-footer {
   padding: 0 !important;
 }
+
+/* custom scrollbar */
+::-webkit-scrollbar {
+  width: 20px;
+}
+
+::-webkit-scrollbar-track {
+  background-color: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: #d6dee1;
+  border-radius: 20px;
+  border: 6px solid transparent;
+  background-clip: content-box;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background-color: #a8bbbf;
+}

packages/desktop/src/tree/electronApp.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Toaster } from 'react-hot-toast';
 import { RoomsProvider } from '../providers/RoomsProvider';
-import { RealTimeRoomProvider } from '../providers/TerminalProvider';
+import { TerminalProvider } from '../providers/TerminalProvider';
 import { AuthProvider } from '../providers/AuthProvider';
 import { ElectronProvider } from '../providers/ElectronProvider';
 import { SocketProvider } from '../providers/SocketProvider';
@@ -16,9 +16,9 @@ export default function ElectronApp() {
           <SocketProvider>
             <RoomsProvider>
               <StreamProvider>
-                <RealTimeRoomProvider>
+                <TerminalProvider>
                   <></>
-                </RealTimeRoomProvider>
+                </TerminalProvider>
               </StreamProvider>
             </RoomsProvider>
           </SocketProvider>

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

@@ -49,7 +49,10 @@ export default function SidePanel() {
   }, [handleShowNewChannelForm]);
 
   return (
-    <div className="flex flex-col w-[350px] relative group border-r border-r-gray-200 shadow-xl bg-white z-20">
+    <div
+      className="flex flex-col w-[350px] relative group 
+    border-r border-r-gray-200 shadow-xl bg-white z-20 overflow-y-auto"
+    >
       <NavBar />
 
       <div className="flex flex-row p-4 items-center bg-gray-100 gap-2">
@@ -96,7 +99,7 @@ export default function SidePanel() {
       )}
 
       {/* rest of the lines */}
-      <div className={'flex flex-col'}>
+      <div className={'flex flex-col flex-1 overflow-y-auto'}>
         {initialRoomsFetch.loading ? (
           <Skeleton />
         ) : (
@@ -112,17 +115,18 @@ export default function SidePanel() {
         )}
       </div>
 
+      {/* user control panel */}
       <div
-        className="absolute bottom-4 left-4"
+        className="bg-gray-100
-        onKeyDown={() => {
+       border-t border-t-gray-200 p-4 shadow-2xl z-50 w-full"
-          //
-        }}
-        onClick={() => {
-          console.log('opening main app');
-        }}
-        role="presentation"
       >
-        <NoTextLogo type="small" />
+        <button
+          onClick={() => {
+            console.log('opening main app');
+          }}
+        >
+          <NoTextLogo type="small" />
+        </button>
       </div>
     </div>
   );