diff --git a/packages/desktop/src/electron/constants.ts b/packages/desktop/src/electron/constants.ts index 2b332e6..d6c5a4d 100644 --- a/packages/desktop/src/electron/constants.ts +++ b/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 { diff --git a/packages/desktop/src/index.ts b/packages/desktop/src/index.ts index 754c6c4..f76b1fd 100644 --- a/packages/desktop/src/index.ts +++ b/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 diff --git a/packages/desktop/src/providers/ElectronProvider.tsx b/packages/desktop/src/providers/ElectronProvider.tsx index 28f0514..cbafbe2 100644 --- a/packages/desktop/src/providers/ElectronProvider.tsx +++ b/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({ desktopMode: 'mainApp', + + isWindowFocused: false, }); export function ElectronProvider({ children }: { children: React.ReactNode }) { const [desktopMode, setDesktopMode] = useState('mainApp'); + const [isWindowFocused, setIsWindowFocused] = useState(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 ( - + {children} ); diff --git a/packages/desktop/src/tree/protected/terminal/line/LineRow.tsx b/packages/desktop/src/tree/protected/terminal/line/LineRow.tsx index dcb11ab..157321d 100644 --- a/packages/desktop/src/tree/protected/terminal/line/LineRow.tsx +++ b/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 && } + {profilePictures && ( + + + + )} {/* channel name */}

{ @@ -75,7 +75,7 @@ export default function SidePanel() { desktopMode === 'overlayOnly' && 'border-b border-b-gray-200' }`} > -