taking out the fancy conditional opacities...not clean for me

.vscode/settings.json

@@ -8,7 +8,7 @@
   "editor.defaultFormatter": "esbenp.prettier-vscode",
   "workbench.colorTheme": "Default Light+",
   "javascript.format.semicolons": "insert",
-  "window.zoomLevel": 2
+  "window.zoomLevel": 1
 
   // "eslint.workingDirectories": ["./packages/desktop"]
 }

packages/desktop/src/providers/StreamProvider.tsx

@@ -118,8 +118,7 @@ export function StreamProvider({ children }: { children: React.ReactChild }) {
         );
 
         // hacking little bug!
-        if (localPeerForMasterAndMe && !localPeerForMasterAndMe.peer.destroyed)
+        if (localPeerForMasterAndMe) localPeerForMasterAndMe.peer.signal(res.simplePeerSignal);
-          localPeerForMasterAndMe.peer.signal(res.simplePeerSignal);
       });
     });
 

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

@@ -158,34 +158,36 @@ export default function LineDetails() {
             );
           })}
         </div>
+      </div>
 
-        {/* canvas action buttons */}
+      {/* canvas action buttons */}
-        <div className="flex flex-row gap-3 p-10 justify-end items-center ">
+      <div className="absolute right-5 bottom-5 flex flex-row gap-3 p-10 justify-end items-center ">
-          <Tooltip
+        <Tooltip
-            placement="left"
+          placement="left"
-            title={`${isUserToggleTuned ? 'click to untoggle' : 'click to stay tuned in'}`}
+          title={`${isUserToggleTuned ? 'click to untoggle' : 'click to stay tuned in'}`}
-          >
+        >
-            <button
+          <button
-              className={`p-2 flex justify-center items-center shadow-lg
+            className={`p-2 flex justify-center items-center shadow-lg
           hover:scale-105 transition-all animate-pulse ${
             isUserToggleTuned ? 'bg-gray-800 text-white' : 'text-black'
           }`}
-              onClick={() =>
+            onClick={() =>
-                isUserToggleTuned
+              isUserToggleTuned
-                  ? handleUpdateLineMemberState(
+                ? handleUpdateLineMemberState(
-                      selectedLine.lineDetails._id.toString(),
+                    selectedLine.lineDetails._id.toString(),
-                      LineMemberState.INBOX,
+                    LineMemberState.INBOX,
-                    )
+                  )
-                  : handleUpdateLineMemberState(
+                : handleUpdateLineMemberState(
-                      selectedLine.lineDetails._id.toString(),
+                    selectedLine.lineDetails._id.toString(),
-                      LineMemberState.TUNED,
+                    LineMemberState.TUNED,
-                    )
+                  )
-              }
+            }
-            >
+          >
-              <FiActivity className="text-md" />
+            <FiActivity className="text-md" />
-            </button>
+          </button>
-          </Tooltip>
+        </Tooltip>
 
+        <Tooltip title={'Press and hold ` or click to join the room'}>
           <button
             className={`p-3 flex justify-center items-center shadow-2xl
             hover:scale-105 transition-all ${
@@ -194,7 +196,7 @@ export default function LineDetails() {
           >
             <FiSun className="text-lg" />
           </button>
-        </div>
+        </Tooltip>
       </div>
     </div>
   );

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

@@ -133,15 +133,9 @@ export default React.memo(function LineRow({
       onClick={handleActivateLine}
       role={'presentation'}
       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  
+      cursor-pointer transition-all relative z-50 
-      ${isUserToggleTuned && isWindowFocused && ' bg-gray-100 shadow-2xl'}
+      
-      ${isUserToggleTuned && !isWindowFocused && ' bg-transparent '}
+      ${isUserToggleTuned && ' bg-gray-100 shadow-2xl'}`}
-      ${isSelected && isWindowFocused && ' bg-gray-200 shadow-2xl '}
-      ${isSelected && !isWindowFocused && ' bg-transparent '}
-
-      ${desktopMode === 'overlayOnly' && !isWindowFocused && ' opacity-20 '}
-
-      ${!isWindowFocused && desktopMode === 'overlayOnly' && !isSelected && ' bg-transparent '}`}
     >
       {/* channel picture */}
       {profilePictures && (

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

@@ -67,14 +67,16 @@ export default function SidePanel() {
   return (
     <div
       className={`flex flex-col w-[350px] group 
-    border-r border-r-gray-200 shadow-xl z-20  ${desktopMode === 'mainApp' && ' bg-white '}`}
+    border-r border-r-gray-200 shadow-xl z-20 bg-white
+    
+    ${!isWindowFocused && desktopMode === 'overlayOnly' && ' opacity-20 '}`}
     >
       {/* user control panel */}
       <div
         className={`bg-gray-100 flex flex-row items-center gap-2
        p-4 pb-2 z-50 w-full titlebar ${
          desktopMode === 'overlayOnly' && 'border-b border-b-gray-200'
-       } ${!isWindowFocused && desktopMode === 'overlayOnly' && ' opacity-20 '}
+       } 
       `}
       >
         <button onClick={handleToggleDesktopMode} className={'mr-auto animate-pulse'}>