nice flow state decent and cleaning things up in terms of router and such

packages/desktop/package.json

@@ -45,7 +45,7 @@
             "port": "4001",
             "loggerPort": "9002",
             "mainConfig": "./webpack.main.config.js",
-            "devContentSecurityPolicy": "connect-src 'self' http://localhost:5000 ws://localhost:5000 'unsafe-eval'",
+            "devContentSecurityPolicy": "connect-src 'self' https://zenquotes.io/api http://localhost:5000 ws://localhost:5000 'unsafe-eval'",
             "renderer": {
               "config": "./webpack.renderer.config.js",
               "entryPoints": [

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

@@ -27,7 +27,7 @@ export default function NirvanaHeader({
   const inputRef = useRef<HTMLInputElement>(null);
   const [searchInput, setSearchInput] = useState<string>("");
 
-  const desktopMode = useRecoilValue($desktopMode);
+  const [desktopMode, setDesktopMode] = useRecoilState($desktopMode);
 
   const [mediaSettings, setMediaSettings] = useRecoilState($mediaSettings);
 
@@ -147,9 +147,21 @@ export default function NirvanaHeader({
         )}
 
         {/* todo: move this ghost button to components */}
-        <button className="text-gray-300 text-xs p-3 transition-all hover:bg-gray-200">
+        {desktopMode === "flowState" ? (
-          flow state
+          <button
-        </button>
+            onClick={() => setDesktopMode("terminal")}
+            className="ml-auto text-gray-300 text-xs p-3 transition-all hover:bg-gray-200"
+          >
+            connect
+          </button>
+        ) : (
+          <button
+            onClick={() => setDesktopMode("flowState")}
+            className="text-gray-300 text-xs p-3 transition-all hover:bg-gray-200"
+          >
+            flow state
+          </button>
+        )}
 
         <Dropdown overlay={profileMenu}>
           <div className={"cursor-pointer ml-2"}>

packages/desktop/src/electron/constants.ts

@@ -22,15 +22,7 @@ export interface DimensionChangeRequest {
   addDimensions: boolean;
 }
 
-export const TERMINAL_PRESET: Dimensions = {
+export const DEFAULT_APP_PRESET: Dimensions = { height: 875, width: 1210 };
-  height: 675,
-  width: 400,
-};
-
-export const TERMINAL_DETAILS_PRESET: Dimensions = {
-  height: 675,
-  width: 800,
-};
 
 export const OVERLAY_ONLY_INITIAL_PRESET: Dimensions = {
   height: 50,

packages/desktop/src/index.ts

@@ -8,7 +8,7 @@ import {
   ipcMain,
   screen,
 } from "electron";
-import Channels, { TERMINAL_PRESET } from "./electron/constants";
+import Channels, { DEFAULT_APP_PRESET } from "./electron/constants";
 
 import { DimensionChangeRequest } from "./electron/constants";
 import { handleGoogleLogin } from "./electron/handleLogin";
@@ -36,7 +36,7 @@ let display: Display;
 const createWindow = (): void => {
   // Create the browser window.
   browserWindow = new BrowserWindow({
-    ...{ height: TERMINAL_PRESET.height, width: TERMINAL_PRESET.width },
+    ...DEFAULT_APP_PRESET,
     webPreferences: {
       preload: MAIN_WINDOW_PRELOAD_WEBPACK_ENTRY,
       sandbox: true,

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

@@ -4,7 +4,10 @@ import {
   $numberActiveLines,
   $selectedLineId,
 } from "../../controller/recoil";
-import Channels, { Dimensions } from "../../electron/constants";
+import Channels, {
+  DEFAULT_APP_PRESET,
+  Dimensions,
+} from "../../electron/constants";
 import { useCallback, useEffect } from "react";
 import { useRecoilState, useRecoilValue } from "recoil";
 
@@ -25,17 +28,13 @@ export default function NirvanaRouter() {
     let finalDimensions: Dimensions = { height: 0, width: 0 };
     let finalPosition: "center" | "topRight";
 
-    const setAlwaysOnTop =
+    const setAlwaysOnTop = desktopMode === "overlayOnly";
-      desktopMode === "overlayOnly" || desktopMode === "flowState";
 
     // go hunting for which dimensions to have
-    if (desktopMode === "terminal") {
+    if (desktopMode === "terminal" || desktopMode == "flowState") {
-      finalDimensions = { height: 875, width: 1210 };
+      finalDimensions = DEFAULT_APP_PRESET;
-    }
-    if (desktopMode === "flowState") {
-      finalPosition = "topRight";
-      finalDimensions = { height: 68, width: 360 };
     }
+
     if (desktopMode === "overlayOnly") {
       finalDimensions = {
         height: 68 + numberOfOverlayRows * 200,
@@ -81,17 +80,32 @@ export default function NirvanaRouter() {
     });
   }, [setDesktopMode, setSelectedLineId]);
 
-  const handleToggleFlowState = useCallback(() => {
-    setDesktopMode("flowState");
-  }, [setDesktopMode]);
-
   return (
-    <LineDataProvider>
+    <div className="flex flex-col flex-1">
-      <div className="flex flex-col flex-1">
+      <NirvanaHeader onHeaderFocus={() => setDesktopMode("terminal")} />
-        <NirvanaHeader onHeaderFocus={() => setDesktopMode("terminal")} />
 
-        <NirvanaTerminal />
+      {desktopMode === "flowState" && <FlowState />}
-      </div>
+
-    </LineDataProvider>
+      {/* remount nirvana terminal */}
+      {(desktopMode === "terminal" || desktopMode === "overlayOnly") && (
+        <LineDataProvider>
+          <NirvanaTerminal overlayOnly={desktopMode === "overlayOnly"} />
+        </LineDataProvider>
+      )}
+    </div>
   );
 }
+
+function FlowState() {
+  useEffect(() => {
+    fetch("http://zenquotes.io/api/random", { method: "GET" })
+      .then((res) => {
+        console.log(res);
+      })
+      .catch(() => {
+        // do nothing, don't bother user, just don't show the quote
+      });
+  }, []);
+
+  return <>{}</>;
+}

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

@@ -16,7 +16,11 @@ import NewLineModal from "./newLine";
 import toast from "react-hot-toast";
 import { useLineDataProvider } from "../../controller/lineDataProvider";
 
-export default function NirvanaTerminal() {
+export default function NirvanaTerminal({
+  overlayOnly,
+}: {
+  overlayOnly: boolean;
+}) {
   const [isModalVisible, setIsModalVisible] = useState<boolean>(false);
 
   const { data: userDetails } = useGetUserDetails();