nice sort of opacity

packages/desktop/src/index.ts

@@ -43,9 +43,9 @@ const createWindow = (): void => {
     },
     icon: './assets/1024x1024.icns',
 
-    // transparent: true,
+    transparent: true,
 
-    // backgroundColor: "#00000000",
+    backgroundColor: '#00000000',
 
     frame: false,
     roundedCorners: true,

packages/desktop/src/styles/index.css

@@ -8,6 +8,8 @@ body {
   display: flex;
   flex-direction: column;
   flex: 1;
+
+  background: #00000000;
 }
 
 #root {

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

@@ -22,7 +22,7 @@ export default function SidePanel() {
 
   const { handleFlowState } = useSockets();
 
-  const { handleToggleDesktopMode, desktopMode } = useElectron();
+  const { handleToggleDesktopMode, desktopMode, isWindowFocused } = useElectron();
 
   // todo: sort
   const allChannels = useMemo(() => {
@@ -65,15 +65,16 @@ export default function SidePanel() {
 
   return (
     <div
-      className="flex flex-col w-[350px] group 
+      className={`flex flex-col w-[350px] group 
-    border-r border-r-gray-200 shadow-xl bg-white z-20 "
+    border-r border-r-gray-200 shadow-xl bg-white z-20
+    ${!isWindowFocused && ' 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'
-       }`}
+       } `}
       >
         <button onClick={handleToggleDesktopMode} className={'mr-auto animate-pulse'}>
           <NoTextLogo type="small" />