[Refactor] decouple settingsMachine from React (#5142)

* Remove unnecessary console.log

* Create a global appMachine

* Strip authMachine of side-effects

* Replace react-bound authMachine use with XState actor use

* Fix import goof

* Register auth commands directly!

* Don't provide anything to settingsMachine from React

* Remove unecessary async

* Make it possible to load project settings via a sent event, without React

* Make settingsMachine ready to be an actor

* Remove settingsLoader use

* Replace all useSettingsAuthContext use with direct actor use

* Add logic to clear project settings, fmt

* fmt

* Clear and load project settings from routeLoaders, but using actor

* Remove useRefreshSettings

* Restore use of useToken() that wasn't working for some reason

* Migrate useFileSystemWatcher use to RouteProvider

* Surface wasm_bindgen unavailable error to console

* Remove unnecessary use of Jest settings wrappers

* Replace dynamic import with actor.getSnapshot

* Migrate system theme and theme color watching from useEffects to actors/actions

* Migrate cursor color effect

* Remove unused code that is now in RouteProvider

* Migrate route commands registration further down for now, out of SettingsAuthProvider

* Migrate settings command registration out of SettingsAuthProvider.tsx

* Delete SettingsAuthProvider.tsx!

* Remove unused settingsLoader!

* fmt and remove comments

* Use actor for routeLoader

* Fix project read error due to uninitialized WASM

* Fix user settings load error due to uninitialized WASM

* Move settingsActor into appActor as a spawned child

* Trying to fix unit tests

* Remove unused imports and demo window attachments

* fmt

* Fix testing issues caused by circular dependency

* Add `setThemeColor` to a few actions list it was missing from

* fmt

* A snapshot a day keeps the bugs away! 📷🐛 (OS: namespace-profile-ubuntu-8-cores)

* Fix "Execute AST" action in browser, where currentProject is `undefined`

* Update commands list when currentProject changes

* Fix `clearProjectSettings`, which was passing along non-settings context

* Fix onboarding test that actually needed the onboarding initially dismissed

* Add scrollIntoView to make this test more reliable

* @lf94's feedback I missed

I got distracted by a million other things last week

* A snapshot a day keeps the bugs away! 📷🐛 (OS: namespace-profile-ubuntu-8-cores)

* Revert "A snapshot a day keeps the bugs away! 📷🐛 (OS: namespace-profile-ubuntu-8-cores)"

This reverts commit 129226c6ef.

* fmt

* revert bad snapshot

* Fix up camera movement test locator

* Fix test that was flipping the user settings without waiting

* A snapshot a day keeps the bugs away! 📷🐛 (OS: namespace-profile-ubuntu-8-cores)

* A snapshot a day keeps the bugs away! 📷🐛 (OS: namespace-profile-ubuntu-8-cores)

* A snapshot a day keeps the bugs away! 📷🐛 (OS: namespace-profile-ubuntu-8-cores)

* A snapshot a day keeps the bugs away! 📷🐛 (OS: namespace-profile-ubuntu-8-cores)

* A snapshot a day keeps the bugs away! 📷🐛 (OS: namespace-profile-ubuntu-8-cores)

* A snapshot a day keeps the bugs away! 📷🐛 (OS: namespace-profile-ubuntu-8-cores)

* A snapshot a day keeps the bugs away! 📷🐛 (OS: namespace-profile-ubuntu-8-cores)

* A snapshot a day keeps the bugs away! 📷🐛 (OS: namespace-profile-ubuntu-8-cores)

* A snapshot a day keeps the bugs away! 📷🐛 (OS: namespace-profile-ubuntu-8-cores)

* A snapshot a day keeps the bugs away! 📷🐛 (OS: namespace-profile-ubuntu-8-cores)

* A snapshot a day keeps the bugs away! 📷🐛 (OS: namespace-profile-ubuntu-8-cores)

* A snapshot a day keeps the bugs away! 📷🐛 (OS: namespace-profile-ubuntu-8-cores)

* A snapshot a day keeps the bugs away! 📷🐛 (OS: namespace-profile-ubuntu-8-cores)

* A snapshot a day keeps the bugs away! 📷🐛 (OS: namespace-profile-ubuntu-8-cores)

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

src/hooks/useCreateFileLinkQueryWatcher.ts

@@ -2,10 +2,10 @@ import { base64ToString } from 'lib/base64'
 import { CREATE_FILE_URL_PARAM, DEFAULT_FILE_NAME } from 'lib/constants'
 import { useEffect } from 'react'
 import { useSearchParams } from 'react-router-dom'
-import { useSettingsAuthContext } from './useSettingsAuthContext'
 import { isDesktop } from 'lib/isDesktop'
 import { FileLinkParams } from 'lib/links'
 import { ProjectsCommandSchema } from 'lib/commandBarConfigs/projectsCommandConfig'
+import { useSettings } from 'machines/appMachine'
 
 // For initializing the command arguments, we actually want `method` to be undefined
 // so that we don't skip it in the command palette.
@@ -26,7 +26,7 @@ export function useCreateFileLinkQuery(
   callback: (args: CreateFileSchemaMethodOptional) => void
 ) {
   const [searchParams] = useSearchParams()
-  const { settings } = useSettingsAuthContext()
+  const settings = useSettings()
 
   useEffect(() => {
     const createFileParam = searchParams.has(CREATE_FILE_URL_PARAM)
@@ -45,7 +45,7 @@ export function useCreateFileLinkQuery(
             ? params.name.replace('.kcl', '')
             : params.name
           : isDesktop()
-          ? settings.context.projects.defaultProjectName.current
+          ? settings.projects.defaultProjectName.current
           : DEFAULT_FILE_NAME,
         code: params.code || '',
         method: isDesktop() ? undefined : 'existingProject',

src/hooks/useRefreshSettings.ts

@@ -1,32 +0,0 @@
-import { useRouteLoaderData } from 'react-router-dom'
-import { useSettingsAuthContext } from './useSettingsAuthContext'
-import { PATHS } from 'lib/paths'
-import { settings } from 'lib/settings/initialSettings'
-import { useEffect } from 'react'
-
-/**
- * I was dismayed to learn that index route in Router.tsx where we initially load up the settings
- * doesn't re-run on subsequent navigations. This hook is a workaround,
- * in conjunction with additional uses of settingsLoader further down the router tree.
- * @param routeId - The id defined in Router.tsx to load the settings from.
- */
-export function useRefreshSettings(routeId: string = PATHS.INDEX) {
-  const ctx = useSettingsAuthContext()
-  const routeData = useRouteLoaderData(routeId) as typeof settings
-
-  if (!ctx) {
-    // Intended to stop the world
-    // eslint-disable-next-line
-    throw new Error(
-      'useRefreshSettings must be used within a SettingsAuthProvider'
-    )
-  }
-
-  useEffect(() => {
-    ctx.settings.send({
-      type: 'Set all settings',
-      settings: routeData,
-      doNotPersist: true,
-    })
-  }, [])
-}

src/hooks/useResolvedTheme.ts

@@ -1,5 +1,5 @@
 import { Themes, getSystemTheme } from 'lib/theme'
-import { useSettingsAuthContext } from 'hooks/useSettingsAuthContext'
+import { useSettings } from 'machines/appMachine'
 
 /**
  * Resolves the current theme based on the theme setting
@@ -7,10 +7,8 @@ import { useSettingsAuthContext } from 'hooks/useSettingsAuthContext'
  * @returns {Themes.Light | Themes.Dark}
  */
 export function useResolvedTheme() {
-  const {
-    settings: { context },
-  } = useSettingsAuthContext()
-  return context.app.theme.current === Themes.System
+  const settings = useSettings()
+  return settings.app.theme.current === Themes.System
     ? getSystemTheme()
-    : context.app.theme.current
+    : settings.app.theme.current
 }

src/hooks/useSettingsAuthContext.ts

@@ -1,6 +0,0 @@
-import { SettingsAuthContext } from 'components/SettingsAuthProvider'
-import { useContext } from 'react'
-
-export const useSettingsAuthContext = () => {
-  return useContext(SettingsAuthContext)
-}