handling flow state better from overlay

packages/desktop/src/providers/SocketProvider.tsx

@@ -1,10 +1,10 @@
 import { Button, Container, Typography } from '@mui/material';
 import React, { useCallback, useContext, useEffect, useState } from 'react';
 import { Socket, io } from 'socket.io-client';
+import { useMount, useUnmount } from 'react-use';
 
 import toast from 'react-hot-toast';
 import useAuth from './AuthProvider';
-import { useUnmount } from 'react-use';
 
 interface ISocketProvider {
   $ws: Socket;
@@ -63,9 +63,9 @@ export function SocketProvider({ children }: { children: React.ReactNode }) {
     set$ws(socketConnection);
   }, [initiateSocketStabilityListeners, jwtToken, set$ws]);
 
-  useEffect(() => {
+  useMount(() => {
     connect();
-  }, [connect]);
+  });
 
   useUnmount(() => {
     $ws?.disconnect();

packages/desktop/src/tree/FooterControls.tsx

@@ -52,6 +52,16 @@ export default function FooterControls() {
 
   const [openUserSettings, setOpenUserSettings] = useState<boolean>(false);
 
+  const handleTurnOnFlowState = useCallback(() => {
+    // when in overlay mode, we need to toggle main app and then go into flow state
+
+    if (desktopMode === 'overlayOnly') {
+      handleToggleDesktopMode();
+    }
+
+    handleFlowState();
+  }, [handleFlowState, desktopMode, handleToggleDesktopMode]);
+
   const handleClickProfile = useCallback(
     (event: React.MouseEvent<HTMLElement>) => {
       if (desktopMode === 'overlayOnly') {
@@ -137,7 +147,7 @@ export default function FooterControls() {
 
           <Divider orientation="horizontal" flexItem />
 
-          <Button size={'small'} color={'secondary'} variant="text" onClick={handleFlowState}>
+          <Button size={'small'} color={'secondary'} variant="text" onClick={handleTurnOnFlowState}>
             flow
           </Button>