nice fluidity and control

packages/desktop/src/electron/constants.ts

@@ -7,6 +7,7 @@ enum Channels {
   GOOGLE_AUTH_TOKENS = 'GOOGLE_AUTH_TOKENS',
   RESIZE_WINDOW = 'RESIZE_WINDOW',
   ON_WINDOW_BLUR = 'ON_WINDOW_BLUR',
+  ON_WINDOW_FOCUS = 'ON_WINDOW_FOCUS',
 }
 
 export enum STORE_ITEMS {

packages/desktop/src/index.ts

@@ -128,6 +128,10 @@ app
     browserWindow.on('blur', () => {
       browserWindow.webContents.send(Channels.ON_WINDOW_BLUR);
     });
+
+    browserWindow.on('focus', () => {
+      browserWindow.webContents.send(Channels.ON_WINDOW_FOCUS);
+    });
   });
 
 // Quit when all windows are closed, except on macOS. There, it's common

packages/desktop/src/providers/ElectronProvider.tsx

@@ -5,17 +5,22 @@ interface IElectronProvider {
   // pass handlers and current dimensions?
   desktopMode: DesktopMode;
 
-  handleOpenMainApp?: () => void;
+  handleToggleDesktopMode?: () => void;
+
+  isWindowFocused: boolean;
 }
 
 type DesktopMode = 'overlayOnly' | 'mainApp';
 
 const ElectronContext = React.createContext<IElectronProvider>({
   desktopMode: 'mainApp',
+
+  isWindowFocused: false,
 });
 
 export function ElectronProvider({ children }: { children: React.ReactNode }) {
   const [desktopMode, setDesktopMode] = useState<DesktopMode>('mainApp');
+  const [isWindowFocused, setIsWindowFocused] = useState<boolean>(false);
 
   // handle all window resizing logic
   useEffect(() => {
@@ -55,21 +60,28 @@ export function ElectronProvider({ children }: { children: React.ReactNode }) {
       console.log(
         'window blurring now, should be always on top and then ill tell main process to change dimensions',
       );
+      setIsWindowFocused(false);
+
       // TODO: testing mode... uncomment both instructions below
-      setDesktopMode('overlayOnly');
+      // setDesktopMode('overlayOnly');
 
       // todo: make sure that if I am toggle broadcasted into a line, then don't deselect selected line
       // the overlay should be showing selected line if I am broadcasting toggled into it as well as of course all other toggle tuned ones
       // setSelectedLineId(null);
     });
-  }, [setDesktopMode]);
 
-  const handleOpenMainApp = useCallback(() => {
-    setDesktopMode('mainApp');
+    window.electronAPI.on(Channels.ON_WINDOW_FOCUS, () => {
+      console.log('window focusing now');
+      setIsWindowFocused(true);
+    });
+  }, [setDesktopMode, setIsWindowFocused]);
+
+  const handleToggleDesktopMode = useCallback(() => {
+    setDesktopMode((prevMode) => (prevMode === 'mainApp' ? 'overlayOnly' : 'mainApp'));
   }, [setDesktopMode]);
 
   return (
-    <ElectronContext.Provider value={{ desktopMode, handleOpenMainApp }}>
+    <ElectronContext.Provider value={{ desktopMode, handleToggleDesktopMode, isWindowFocused }}>
       {children}
     </ElectronContext.Provider>
   );

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

@@ -129,13 +129,17 @@ 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 rounded 
+      cursor-pointer transition-all relative z-50 rounded  
       ${isUserToggleTuned && ' bg-gray-100 shadow-2xl '}
       ${isSelected && ' bg-gray-200 shadow-2xl'}
       `}
     >
       {/* channel picture */}
-      {profilePictures && <LineIcon grayscale={!isUserTunedIn} sourceImages={profilePictures} />}
+      {profilePictures && (
+        <span className={`${isSelected && ' scale-110 transition-all'}`}>
+          <LineIcon grayscale={!isUserTunedIn} sourceImages={profilePictures} />
+        </span>
+      )}
 
       {/* channel name */}
       <h2

packages/desktop/src/tree/protected/terminal/navbar/Navbar.tsx

@@ -14,7 +14,7 @@ import NoTextLogo from '@nirvana/components/logo/NoTextLogo';
  */
 export default function NavBar() {
   const { user, handleLogout } = useAuth();
-  const { desktopMode, handleOpenMainApp } = useElectron();
+  const { desktopMode, handleToggleDesktopMode } = useElectron();
 
   const { handleFlowState } = useSockets();
 

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

@@ -22,7 +22,7 @@ export default function SidePanel() {
 
   const { handleFlowState } = useSockets();
 
-  const { handleOpenMainApp, desktopMode } = useElectron();
+  const { handleToggleDesktopMode, desktopMode } = useElectron();
 
   // todo: sort
   const allChannels = useMemo(() => {
@@ -75,7 +75,7 @@ export default function SidePanel() {
          desktopMode === 'overlayOnly' && 'border-b border-b-gray-200'
        }`}
       >
-        <button onClick={handleOpenMainApp} className={'mr-auto'}>
+        <button onClick={handleToggleDesktopMode} className={'mr-auto'}>
           <NoTextLogo type="small" />
         </button>