Disable actions when stream disconnected (#1483)

* pull out network indicator logic

* rename callbacks

* re-execute on reconnection

* make sure tool bar is disabled on start up

* clean up

* node safety

* disable toolbar buttons properly

* grey scale action icon icons dodgy

* test tweaks

* Revert "grey scale action icon icons dodgy"

This reverts commit c3d12a0f05.

* Disable modeling commands when network is bad (#1486)

* Disable modeling commands when network is bad

* disabel on execute too

* fmt

---------

Co-authored-by: Kurt Hutten Irev-Dev <k.hutten@protonmail.ch>

* disable playwright snapshots temporarily

* disable export test instead

* A snapshot a day keeps the bugs away! 📷🐛 (OS: ubuntu)

---------

Co-authored-by: Frank Noirot <frank@zoo.dev>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

src/components/TextEditor.tsx

@@ -12,7 +12,7 @@ import { useCommandsContext } from 'hooks/useCommandsContext'
 import { useGlobalStateContext } from 'hooks/useGlobalStateContext'
 import { useConvertToVariable } from 'hooks/useToolbarGuards'
 import { Themes } from 'lib/theme'
-import { useMemo, useRef } from 'react'
+import { useEffect, useMemo, useRef } from 'react'
 import { linter, lintGutter } from '@codemirror/lint'
 import { useStore } from 'useStore'
 import { processCodeMirrorRanges } from 'lib/selections'
@@ -32,6 +32,7 @@ import { sceneInfra } from 'clientSideScene/sceneInfra'
 import { copilotPlugin } from 'editor/plugins/lsp/copilot'
 import { isTauri } from 'lib/isTauri'
 import type * as LSP from 'vscode-languageserver-protocol'
+import { NetworkHealthState, useNetworkStatus } from './NetworkHealthIndicator'
 import { useHotkeys } from 'react-hotkeys-hook'
 
 export const editorShortcutMeta = {
@@ -78,6 +79,15 @@ export const TextEditor = ({
   }))
   const { code, errors } = useKclContext()
   const lastEvent = useRef({ event: '', time: Date.now() })
+  const { overallState } = useNetworkStatus()
+  const isNetworkOkay = overallState === NetworkHealthState.Ok
+
+  useEffect(() => {
+    if (typeof window === 'undefined') return
+    const onlineCallback = () => kclManager.setCodeAndExecute(kclManager.code)
+    window.addEventListener('online', onlineCallback)
+    return () => window.removeEventListener('online', onlineCallback)
+  }, [])
 
   useHotkeys('mod+z', (e) => {
     e.preventDefault()
@@ -185,8 +195,9 @@ export const TextEditor = ({
   }, [copilotLspClient, isCopilotLspServerReady, project])
 
   // const onChange = React.useCallback((value: string, viewUpdate: ViewUpdate) => {
-  const onChange = (newCode: string) => {
-    kclManager.setCodeAndExecute(newCode)
+  const onChange = async (newCode: string) => {
+    if (isNetworkOkay) kclManager.setCodeAndExecute(newCode)
+    else kclManager.setCode(newCode)
   } //, []);
   const onUpdate = (viewUpdate: ViewUpdate) => {
     if (!editorView) {