nice clean sidebar!!! but no effect of selecting ohh well

packages/desktop/src/styles/index.css

@@ -50,22 +50,31 @@ button {
   padding: 0 !important;
 }
 
-/* custom scrollbar */
+/* Designing for scroll-bar */
 ::-webkit-scrollbar {
-  width: 10px;
+  width: 4px;
 }
 
+/* Track */
 ::-webkit-scrollbar-track {
-  background-color: transparent;
+  background: gainsboro;
+  border-radius: 5px;
 }
 
+/* Handle */
 ::-webkit-scrollbar-thumb {
-  background-color: #d6dee1;
+  @apply bg-gray-400;
-  border-radius: 20px;
+  border-radius: 5px;
-  border: 6px solid transparent;
-  background-clip: content-box;
 }
 
+/* Handle on hover */
 ::-webkit-scrollbar-thumb:hover {
-  background-color: #a8bbbf;
+  background: #555;
+}
+
+.direction-ltr {
+  direction: ltr;
+}
+.flipped {
+  direction: rtl;
 }

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

@@ -34,8 +34,6 @@ export default React.memo(function LineRow({
   );
 
   const handleActivateLine = useCallback(() => {
-    toast('selected channel');
-
     handleSelectLine(line.lineDetails._id.toString());
   }, [handleSelectLine, line.lineDetails, index]);
 
@@ -133,7 +131,7 @@ export default React.memo(function LineRow({
       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 
       ${isUserToggleTuned && ' bg-gray-100 shadow-2xl '}
-      ${isSelected && ' bg-gray-200 scale-110 shadow-2xl translate-x-3 '}
+      ${isSelected && ' bg-gray-200 shadow-2xl'}
       `}
     >
       {/* channel picture */}

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

@@ -99,20 +99,22 @@ export default function SidePanel() {
       )}
 
       {/* rest of the lines */}
-      <div className={'flex flex-col flex-1 mr-[-100px] pr-[100px] overflow-y-auto'}>
+      <div className={'flex-1 overflow-y-auto flipped'}>
-        {initialRoomsFetch.loading ? (
+        <div className="flex flex-col direction-ltr">
-          <Skeleton />
+          {initialRoomsFetch.loading ? (
-        ) : (
+            <Skeleton />
-          allChannels.map((masterLineData, index) => (
+          ) : (
-            <LineRow
+            allChannels.map((masterLineData, index) => (
-              index={index}
+              <LineRow
-              key={`terminalListLines-${masterLineData.lineDetails._id.toString()}`}
+                index={index}
-              line={masterLineData}
+                key={`terminalListLines-${masterLineData.lineDetails._id.toString()}`}
-              handleSelectLine={handleSelectLine}
+                line={masterLineData}
-              isSelected={masterLineData.lineDetails._id.toString() === selectedLineId}
+                handleSelectLine={handleSelectLine}
-            />
+                isSelected={masterLineData.lineDetails._id.toString() === selectedLineId}
-          ))
+              />
-        )}
+            ))
+          )}
+        </div>
       </div>
 
       {/* user control panel */}