adding some overlay stuff but still need better ux

packages/desktop/src/components/header/index.tsx

@@ -84,7 +84,7 @@ export default function NirvanaHeader() {
       >
         <Logo type="small" />
 
-        <div className="mx-auto flex flex-row items-center space-x-2">
+        <div className="mx-auto flex flex-row items-center space-x-2 ml-2">
           <FaSearch className="text-xs text-gray-300" />
           <input
             placeholder="Type / to search"

packages/desktop/src/components/lines/lineIcon/index.tsx

@@ -0,0 +1,22 @@
+import { Avatar } from "antd";
+
+export default function LineIcon({ sourceImages }: { sourceImages: string[] }) {
+  return (
+    <Avatar.Group
+      maxCount={2}
+      maxPopoverTrigger="click"
+      size="default"
+      maxStyle={{
+        color: "#f56a00",
+        backgroundColor: "#fde3cf",
+        cursor: "pointer",
+        borderRadius: "0",
+      }}
+      className="shadow-lg"
+    >
+      {sourceImages?.map((avatarSrc) => (
+        <Avatar src={avatarSrc} shape="square" size={"default"} />
+      ))}
+    </Avatar.Group>
+  );
+}

packages/desktop/src/components/lines/lineRow.tsx/index.tsx

@@ -3,6 +3,7 @@ import { useCallback, useMemo } from "react";
 import { Avatar } from "antd";
 import { FiSun } from "react-icons/fi";
 import { ILineDetails } from "../../../pages/router/index";
+import LineIcon from "../lineIcon";
 
 export default function LineRow({
   lineDetails,
@@ -87,22 +88,9 @@ export default function LineRow({
       {renderActivityIcon}
 
       <span className="flex flex-row gap-2 items-center justify-start text-slate-800">
-        <Avatar.Group
+        {lineDetails.profilePictures && (
-          maxCount={2}
+          <LineIcon sourceImages={lineDetails.profilePictures} />
-          maxPopoverTrigger="click"
+        )}
-          size="default"
-          maxStyle={{
-            color: "#f56a00",
-            backgroundColor: "#fde3cf",
-            cursor: "pointer",
-            borderRadius: "0",
-          }}
-          className="shadow-lg"
-        >
-          {lineDetails.profilePictures.map((avatarSrc) => (
-            <Avatar src={avatarSrc} shape="square" size={"default"} />
-          ))}
-        </Avatar.Group>
 
         <h2
           className={`text-inherit text-md truncate ${

packages/desktop/src/electron/constants.ts

@@ -6,6 +6,7 @@ enum Channels {
   ACTIVATE_LOG_IN = "ACTIVATE_LOG_IN",
   GOOGLE_AUTH_TOKENS = "GOOGLE_AUTH_TOKENS",
   RESIZE_WINDOW = "RESIZE_WINDOW",
+  ON_WINDOW_BLUR = "ON_WINDOW_BLUR",
 }
 
 export enum STORE_ITEMS {
@@ -22,17 +23,13 @@ export const DimensionPresets = {
     height: 675,
     width: 400,
   },
-  terminalDetailOrOverlay: {
+  terminalAndDetails: {
-    height: 675,
-    width: 800,
-  },
-  terminalDetailOverlay: {
     height: 675,
     width: 800,
   },
   // todo: typically just send whatever dimensions are needed
-  overlayMode: {
+  overlayOnlyMode: {
-    height: -1,
+    height: 800,
     width: 300,
   },
 };

packages/desktop/src/index.ts

@@ -5,6 +5,7 @@ import {
   dialog,
   globalShortcut,
   ipcMain,
+  screen,
 } from "electron";
 import Channels, { Dimensions } from "./electron/constants";
 
@@ -37,11 +38,11 @@ const createWindow = (): void => {
       preload: MAIN_WINDOW_PRELOAD_WEBPACK_ENTRY,
       sandbox: true,
     },
-    alwaysOnTop: true,
     icon: "./assets/1024x1024.icns",
 
     frame: false,
     roundedCorners: false,
+    transparent: true,
   });
 
   // and load the index.html of the app.
@@ -77,13 +78,39 @@ app
     ipcMain.on(Channels.RESIZE_WINDOW, (event, arg) => {
       const { width, height } = arg;
 
-      browserWindow.setSize(width, height, false);
+      if (
+        width === DimensionPresets.overlayOnlyMode.width &&
+        height === DimensionPresets.overlayOnlyMode.height
+      ) {
+        browserWindow.setAlwaysOnTop(true, "floating");
+
+        // move window/overlay to top right
+        let display = screen.getPrimaryDisplay();
+        browserWindow.setPosition(display.bounds.width, display.bounds.height);
+      } else browserWindow.setAlwaysOnTop(false);
+
+      browserWindow.setSize(width, height, true);
     });
   })
   .then(() => {
     // globalShortcut.register("`", () => {
     //   console.log("Electron loves global shortcuts!");
     // });
+
+    // on blur, show overlay, and tell app to trigger overlay mode
+    browserWindow.on("blur", () => {
+      // browserWindow.setAlwaysOnTop(true, "floating");
+
+      // let frontend handshake and then send remote control to change size
+      // const overlayDimensions = DimensionPresets.overlayMode;
+      // browserWindow.setSize(
+      //   overlayDimensions.width,
+      //   overlayDimensions.height,
+      //   true
+      // );
+
+      browserWindow.webContents.send(Channels.ON_WINDOW_BLUR);
+    });
   });
 
 // Quit when all windows are closed, except on macOS. There, it's common

packages/desktop/src/pages/lineDetailsTerminal/index.tsx

@@ -1,4 +1,5 @@
 import { ILineDetails } from "../router";
+import LineIcon from "../../components/lines/lineIcon/index";
 
 export default function LineDetailsTerminal({
   selectedLine,
@@ -6,8 +7,28 @@ export default function LineDetailsTerminal({
   selectedLine: ILineDetails;
 }) {
   return (
-    <div className="flex flex-col flex-1">
+    <div
-      this is the line details for {selectedLine.name}
+      id={`${selectedLine.lineId}-lineDetailsTerminal`}
+      className="flex flex-col flex-1 bg-gray-100 h-full"
+    >
+      {/* line overview header */}
+      <div className="flex flex-row p-3 items-center gap-1">
+        <LineIcon sourceImages={selectedLine.profilePictures} />
+
+        <span className="flex flex-col items-start gap-1">
+          <h2
+            className={`text-inherit text-md truncate ${
+              selectedLine.hasNewActivity ? "font-semibold" : ""
+            }`}
+          >
+            {selectedLine.name}
+          </h2>
+
+          <span className="text-xs text-gray-300">
+            {`${selectedLine.numberMembers} members`}
+          </span>
+        </span>
+      </div>
     </div>
   );
 }

packages/desktop/src/pages/nirvanaApp.tsx

@@ -66,7 +66,11 @@ function NirvanaApp() {
             <ProtectedRoute>
               <NirvanaRouter />
             </ProtectedRoute>
-            <ReactQueryDevtools initialIsOpen={true} position={"bottom-left"} />
+
+            <ReactQueryDevtools
+              initialIsOpen={false}
+              position={"bottom-left"}
+            />
           </RecoilRoot>
         </ThemeProvider>
         <Toaster />

packages/desktop/src/pages/overlay/index.tsx

@@ -1,3 +1,5 @@
 export default function Overlay() {
-  return <div className="flex flex-col flex-1">this is the overlay</div>;
+  return (
+    <div className="flex flex-col bg-transparent">this is the overlay</div>
+  );
 }

packages/desktop/src/pages/router/index.tsx

@@ -1,4 +1,7 @@
-import { DimensionPresets, Dimensions } from "../../electron/constants";
+import Channels, {
+  DimensionPresets,
+  Dimensions,
+} from "../../electron/constants";
 import React, { useState } from "react";
 import { useCallback, useEffect, useMemo } from "react";
 
@@ -224,12 +227,23 @@ const testLines: ILineDetails[] = [
   ),
 ];
 
+type DesktopMode = "overlay" | "terminal" | "terminalAndDetails";
+
 export default function NirvanaRouter() {
   const [selectedLineId, setSelectedLineId] = useState<string>(null);
   const [desktopMode, setDesktopMode] = useState<Dimensions>(
     DimensionPresets.terminal
   );
 
+  useEffect(() => {
+    window.electronAPI.on(Channels.ON_WINDOW_BLUR, () => {
+      console.log(
+        "window blurring now, should be always on top and then ill tell main process to change dimensions"
+      );
+      setDesktopMode(DimensionPresets.overlayOnlyMode);
+    });
+  }, []);
+
   useEffect(() => {
     window.electronAPI.window.resizeWindow(desktopMode);
   }, [desktopMode]);
@@ -237,12 +251,12 @@ export default function NirvanaRouter() {
   useEffect(() => {
     if (selectedLineId) {
       setSelectedLineId(selectedLineId);
-      setDesktopMode(DimensionPresets.terminalDetailOverlay);
+      setDesktopMode(DimensionPresets.terminalAndDetails);
     } else {
       setSelectedLineId(null);
       setDesktopMode(DimensionPresets.terminal);
     }
-  }, [selectedLineId, desktopMode, setDesktopMode]);
+  }, [selectedLineId, setDesktopMode]);
 
   /** show user line details */
   const handleSelectLine = useCallback(
@@ -262,14 +276,18 @@ export default function NirvanaRouter() {
       <NirvanaHeader />
 
       <div className="flex flex-row">
-        <NirvanaTerminal
+        {(desktopMode === DimensionPresets.terminal ||
-          handleSelectLine={handleSelectLine}
+          desktopMode === DimensionPresets.terminalAndDetails) && (
-          allLines={testLines}
+          <NirvanaTerminal
-        />
+            handleSelectLine={handleSelectLine}
+            allLines={testLines}
+          />
+        )}
 
-        {selectedLine && <LineDetailsTerminal selectedLine={selectedLine} />}
+        {desktopMode === DimensionPresets.terminalAndDetails &&
+          selectedLine && <LineDetailsTerminal selectedLine={selectedLine} />}
 
-        {/* <Overlay /> */}
+        <Overlay />
       </div>
     </div>
   );

packages/desktop/src/pages/terminal/index.tsx

@@ -12,6 +12,8 @@ export default function NirvanaTerminal({
   handleSelectLine: (lineId: string) => void;
   allLines: ILineDetails[];
 }) {
+  // todo: sort/order based on activity and activity date and currently broadcasting/live
+
   const toggleTunedLines = useMemo(
     () => allLines.filter((line) => line.isUserToggleTunedIn),
     []