nice overlay working

packages/desktop/src/index.ts

@@ -7,13 +7,13 @@ import {
   globalShortcut,
   ipcMain,
   screen,
-} from "electron";
-import Channels, { DEFAULT_APP_PRESET } from "./electron/constants";
+} from 'electron';
+import Channels, { DEFAULT_APP_PRESET } from './electron/constants';
 
-import { DimensionChangeRequest } from "./electron/constants";
-import { handleGoogleLogin } from "./electron/handleLogin";
-import path from "path";
-import store from "./electron/store";
+import { DimensionChangeRequest } from './electron/constants';
+import { handleGoogleLogin } from './electron/handleLogin';
+import path from 'path';
+import store from './electron/store';
 
 // This allows TypeScript to pick up the magic constant that's auto-generated by Forge's Webpack
 // plugin that tells the Electron app where to look for the Webpack-bundled app code (depending on
@@ -22,7 +22,7 @@ declare const MAIN_WINDOW_WEBPACK_ENTRY: string;
 declare const MAIN_WINDOW_PRELOAD_WEBPACK_ENTRY: string;
 
 // Handle creating/removing shortcuts on Windows when installing/uninstalling.
-if (require("electron-squirrel-startup")) {
+if (require('electron-squirrel-startup')) {
   // eslint-disable-line global-require
   app.quit();
 }
@@ -41,7 +41,7 @@ const createWindow = (): void => {
       preload: MAIN_WINDOW_PRELOAD_WEBPACK_ENTRY,
       sandbox: true,
     },
-    icon: "./assets/1024x1024.icns",
+    icon: './assets/1024x1024.icns',
 
     // transparent: true,
 
@@ -60,7 +60,7 @@ const createWindow = (): void => {
   browserWindow.loadURL(MAIN_WINDOW_WEBPACK_ENTRY);
 
   // Open the DevTools.
-  browserWindow.webContents.openDevTools({ mode: "detach" });
+  browserWindow.webContents.openDevTools({ mode: 'detach' });
 
   display = screen.getPrimaryDisplay();
 };
@@ -74,15 +74,15 @@ app
   .then(() => {
     // activate login
     ipcMain.on(Channels.ACTIVATE_LOG_IN, async (event, arg) => {
-      console.log("initiating log in");
+      console.log('initiating log in');
       await handleGoogleLogin();
     });
 
     // access storage/cookies
-    ipcMain.on("electron-store-set", async (event, key, val) => {
+    ipcMain.on('electron-store-set', async (event, key, val) => {
       store.set(key, val);
     });
-    ipcMain.handle("electron-store-get", async (event, val) => {
+    ipcMain.handle('electron-store-get', async (event, val) => {
       const result = await store.get(val);
       return result;
     });
@@ -90,7 +90,7 @@ app
     // dynamically changing the window bounds
     ipcMain.on(Channels.RESIZE_WINDOW, (event, req: DimensionChangeRequest) => {
       if (req.setAlwaysOnTop) {
-        browserWindow.setAlwaysOnTop(true, "floating");
+        browserWindow.setAlwaysOnTop(true, 'floating');
       } else {
         browserWindow.setAlwaysOnTop(false);
       }
@@ -100,26 +100,21 @@ app
         browserWindow.setSize(
           currentDimensions[0] + req.dimensions.width,
           currentDimensions[1] + req.dimensions.height,
-          false
+          false,
         );
       } else {
-        browserWindow.setSize(
-          req.dimensions.width,
-          req.dimensions.height,
-          false
-        );
+        browserWindow.setSize(req.dimensions.width, req.dimensions.height, false);
       }
 
       if (req.setPosition) {
-        if (req.setPosition === "center") {
+        if (req.setPosition === 'center') {
           browserWindow.center();
         }
 
-        if (req.setPosition === "topRight") {
-          browserWindow.setPosition(
-            display.bounds.width - req.dimensions.width,
-            0
-          );
+        if (req.setPosition === 'topRight') {
+          browserWindow.setPosition(display.bounds.width - req.dimensions.width, 0);
+
+          console.log(display.bounds);
         }
       }
     });
@@ -130,7 +125,7 @@ app
     // });
 
     // on blur, show overlay, and tell app to trigger overlay mode
-    browserWindow.on("blur", () => {
+    browserWindow.on('blur', () => {
       browserWindow.webContents.send(Channels.ON_WINDOW_BLUR);
     });
   });
@@ -138,13 +133,13 @@ app
 // Quit when all windows are closed, except on macOS. There, it's common
 // for applications and their menu bar to stay active until the user quits
 // explicitly with Cmd + Q.
-app.on("window-all-closed", () => {
-  if (process.platform !== "darwin") {
+app.on('window-all-closed', () => {
+  if (process.platform !== 'darwin') {
     app.quit();
   }
 });
 
-app.on("activate", () => {
+app.on('activate', () => {
   // On OS X it's common to re-create a window in the app when the
   // dock icon is clicked and there are no other windows open.
   if (BrowserWindow.getAllWindows().length === 0) {
@@ -158,17 +153,17 @@ app.on("activate", () => {
 // open deep links from nirvana web app
 if (process.defaultApp) {
   if (process.argv.length >= 2) {
-    app.setAsDefaultProtocolClient("nirvana-desktop", process.execPath, [
+    app.setAsDefaultProtocolClient('nirvana-desktop', process.execPath, [
       path.resolve(process.argv[1]),
     ]);
   }
 } else {
-  app.setAsDefaultProtocolClient("nirvana-desktop");
+  app.setAsDefaultProtocolClient('nirvana-desktop');
 }
 
 // Handle the protocol. In this case, we choose to show an Error Box.
-app.on("open-url", (event, url) => {
-  console.log("welcome back, you arrived from: ", url);
+app.on('open-url', (event, url) => {
+  console.log('welcome back, you arrived from: ', url);
 
   browserWindow.focus();
 });

packages/desktop/src/providers/ElectronProvider.tsx

@@ -27,12 +27,14 @@ export function ElectronProvider({ children }: { children: React.ReactNode }) {
     if (desktopMode === 'mainApp') {
       stayOnTop = false;
       finalDimensions = DEFAULT_APP_PRESET;
+      finalPosition = 'center';
     } else if (desktopMode === 'overlayOnly') {
       stayOnTop = true;
       finalDimensions = {
-        height: 668,
-        width: 360,
+        height: 273,
+        width: 350,
       };
+      finalPosition = 'topRight';
     }
 
     // send the final dimensions to main process
@@ -54,7 +56,7 @@ export function ElectronProvider({ children }: { children: React.ReactNode }) {
         'window blurring now, should be always on top and then ill tell main process to change dimensions',
       );
       // 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

packages/desktop/src/styles/index.css

@@ -22,7 +22,7 @@ button {
   @apply transition-all rounded;
 }
 
-#titlebar {
+.titlebar {
   -webkit-user-select: none;
   -webkit-app-region: drag;
 

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

@@ -90,7 +90,7 @@ export default function LineDetails() {
     <div className="flex flex-col flex-1 bg-white relative">
       {/* line details */}
       <div
-        className="p-5 z-30
+        className="p-5 z-30 titlebar
         flex flex-row items-center justify-end border-b-gray-200 border-b shadow-2xl group"
       >
         {profilePictures && <LineIcon grayscale={false} sourceImages={profilePictures} />}

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

@@ -9,6 +9,7 @@ import LineRow from '../line/LineRow';
 import useTerminalProvider from '../../../../providers/TerminalProvider';
 import useAuth from '../../../../providers/AuthProvider';
 import useSockets from '../../../../providers/SocketProvider';
+import useElectron from '../../../../providers/ElectronProvider';
 
 export default function SidePanel() {
   // using merely for loading state...better to add to realtimeroom context?
@@ -21,9 +22,17 @@ export default function SidePanel() {
 
   const { handleFlowState } = useSockets();
 
+  const { handleOpenMainApp, desktopMode } = useElectron();
+
   // todo: sort
   const allChannels = useMemo(() => {
-    const channels = Object.values(roomsMap);
+    let channels = Object.values(roomsMap);
+
+    if (desktopMode === 'overlayOnly') {
+      channels = channels.filter((currentChannel) =>
+        currentChannel.tunedInMemberIds?.includes(user._id.toString()),
+      );
+    }
 
     channels.sort((channelA, channelB) => {
       if (
@@ -46,7 +55,7 @@ export default function SidePanel() {
     });
 
     return channels;
-  }, [roomsMap]);
+  }, [roomsMap, desktopMode, user]);
 
   const [searchQuery, setSearchQuery] = useState<string>('');
 
@@ -61,19 +70,18 @@ export default function SidePanel() {
     >
       {/* user control panel */}
       <div
-        className="bg-gray-100 flex flex-row items-center gap-2
-       p-4 z-50 w-full"
+        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={() => {
-            console.log('opening main app');
-          }}
-          className={'mr-auto'}
-        >
+        <button onClick={handleOpenMainApp} className={'mr-auto'}>
           <NoTextLogo type="small" />
         </button>
 
-        <span className="text-gray-800 font-semibold mx-auto">Channels</span>
+        {desktopMode === 'mainApp' && (
+          <span className="text-gray-800 font-semibold mx-auto">Channels</span>
+        )}
 
         <button
           onClick={handleFlowState}
@@ -94,43 +102,48 @@ export default function SidePanel() {
         )}
       </div>
 
-      {/* secondary header with search and create */}
-      <div className="flex flex-row p-4 items-center bg-gray-100 gap-2">
-        <div className="flex-1 flex flex-row items-center space-x-2 bg-gray-200 p-2 rounded">
-          <FiSearch className="text-xs text-gray-400" />
-          <input
-            placeholder="Search or start a conversation"
-            className="flex-1 bg-transparent placeholder-gray-400 text-gray-500 placeholder:text-xs focus:outline-none"
-            onChange={(e) => setSearchQuery(e.target.value)}
-            value={searchQuery}
-          />
-        </div>
+      {/* search + other stuff  */}
+      {desktopMode === 'mainApp' && (
+        <>
+          <div className="flex flex-row p-4 items-center bg-gray-100 gap-2">
+            <div className="flex-1 flex flex-row items-center space-x-2 bg-gray-200 p-2 rounded">
+              <FiSearch className="text-xs text-gray-400" />
+              <input
+                placeholder="Search or start a conversation"
+                className="flex-1 bg-transparent placeholder-gray-400 text-gray-500 placeholder:text-xs focus:outline-none"
+                onChange={(e) => setSearchQuery(e.target.value)}
+                value={searchQuery}
+              />
+            </div>
 
-        <Tooltip title={'New channel'}>
-          <button
-            onClick={handleCreateNewChannel}
-            className="ml-auto flex flex-row items-center justify-evenly 
-      shadow-xl bg-gray-800 p-2 text-white text-xs"
-          >
-            <FiPlus />
-          </button>
-        </Tooltip>
-      </div>
-
-      {/* tuned in header + general controls */}
-      <div className="flex flex-col shadow-xl bg-gray-100 pb-2">
-        <Tooltip placement="right" title={'These are your active rooms...'}>
-          <div className="flex flex-row items-center py-3 px-4 pb-0">
-            <span className="flex flex-row gap-2 items-center justify-start text-gray-400 animate-pulse">
-              <FiActivity className="text-sm" />
-
-              <h2 className="text-inherit text-xs">Tuned In</h2>
-
-              <p className="text-slate-300 text-xs ml-auto">{`${allChannels?.length || 0}/3`}</p>
-            </span>
+            <Tooltip title={'New channel'}>
+              <button
+                onClick={handleCreateNewChannel}
+                className="ml-auto flex flex-row items-center justify-evenly 
+shadow-xl bg-gray-800 p-2 text-white text-xs"
+              >
+                <FiPlus />
+              </button>
+            </Tooltip>
           </div>
-        </Tooltip>
-      </div>
+
+          <div className="flex flex-col shadow-xl bg-gray-100 pb-2">
+            <Tooltip placement="right" title={'These are your active rooms...'}>
+              <div className="flex flex-row items-center py-3 px-4 pb-0">
+                <span className="flex flex-row gap-2 items-center justify-start text-gray-400 animate-pulse">
+                  <FiActivity className="text-sm" />
+
+                  <h2 className="text-inherit text-xs">Tuned In</h2>
+
+                  <p className="text-slate-300 text-xs ml-auto">{`${
+                    allChannels?.length || 0
+                  }/3`}</p>
+                </span>
+              </div>
+            </Tooltip>
+          </div>
+        </>
+      )}
 
       {!(allChannels.length > 0) && (
         <span className="text-gray-300 text-sm my-5 text-center">