File based settings (#1361)

* Rename GlobalStateContext to SettingsAuthContext

* Naive initial impl of settings persistence to file system

* Update app identifier in tauri config

* Add "show in folder" tauri command

* Load from and save to file system in Tauri app

* Add documents drive to tauri permission scope

* Add recursive prop to default dir selection dialog

* Add success toast to web restore defaults action

* Add a way to validate read-in settings

* Update imports to use separate settings lib file

* Validate localStorage-loaded settings, combine error message

* Add a e2e test for validation

* Clean up state state bugs

* Reverse validation looping so new users don't error

* update settingsMachine typegen to remove conflicts

* Fmt

* Fix TS errors

src/components/GlobalStateProvider.tsx

@@ -1,152 +0,0 @@
-import { useMachine } from '@xstate/react'
-import { useNavigate } from 'react-router-dom'
-import { paths } from 'lib/paths'
-import { authMachine, TOKEN_PERSIST_KEY } from '../machines/authMachine'
-import withBaseUrl from '../lib/withBaseURL'
-import React, { createContext, useEffect, useRef } from 'react'
-import useStateMachineCommands from '../hooks/useStateMachineCommands'
-import { SETTINGS_PERSIST_KEY, settingsMachine } from 'machines/settingsMachine'
-import { toast } from 'react-hot-toast'
-import { setThemeClass, Themes } from 'lib/theme'
-import {
-  AnyStateMachine,
-  ContextFrom,
-  InterpreterFrom,
-  Prop,
-  StateFrom,
-} from 'xstate'
-import { isTauri } from 'lib/isTauri'
-import { settingsCommandBarConfig } from 'lib/commandBarConfigs/settingsCommandConfig'
-import { authCommandBarConfig } from 'lib/commandBarConfigs/authCommandConfig'
-
-type MachineContext<T extends AnyStateMachine> = {
-  state: StateFrom<T>
-  context: ContextFrom<T>
-  send: Prop<InterpreterFrom<T>, 'send'>
-}
-
-type GlobalContext = {
-  auth: MachineContext<typeof authMachine>
-  settings: MachineContext<typeof settingsMachine>
-}
-
-export const GlobalStateContext = createContext({} as GlobalContext)
-
-export const GlobalStateProvider = ({
-  children,
-}: {
-  children: React.ReactNode
-}) => {
-  const navigate = useNavigate()
-
-  // Settings machine setup
-  const retrievedSettings = useRef(
-    localStorage?.getItem(SETTINGS_PERSIST_KEY) || '{}'
-  )
-  const persistedSettings = Object.assign(
-    settingsMachine.initialState.context,
-    JSON.parse(retrievedSettings.current) as Partial<
-      (typeof settingsMachine)['context']
-    >
-  )
-
-  const [settingsState, settingsSend] = useMachine(settingsMachine, {
-    context: persistedSettings,
-    actions: {
-      toastSuccess: (context, event) => {
-        const truncatedNewValue =
-          'data' in event && event.data instanceof Object
-            ? (context[Object.keys(event.data)[0] as keyof typeof context]
-                .toString()
-                .substring(0, 28) as any)
-            : undefined
-        toast.success(
-          event.type +
-            (truncatedNewValue
-              ? ` to "${truncatedNewValue}${
-                  truncatedNewValue.length === 28 ? '...' : ''
-                }"`
-              : '')
-        )
-      },
-    },
-  })
-
-  useStateMachineCommands({
-    machineId: 'settings',
-    state: settingsState,
-    send: settingsSend,
-    commandBarConfig: settingsCommandBarConfig,
-  })
-
-  // Listen for changes to the system theme and update the app theme accordingly
-  // This is only done if the theme setting is set to 'system'.
-  // It can't be done in XState (in an invoked callback, for example)
-  // because there doesn't seem to be a good way to listen to
-  // events outside of the machine that also depend on the machine's context
-  useEffect(() => {
-    const matcher = window.matchMedia('(prefers-color-scheme: dark)')
-    const listener = (e: MediaQueryListEvent) => {
-      if (settingsState.context.theme !== 'system') return
-      setThemeClass(e.matches ? Themes.Dark : Themes.Light)
-    }
-
-    matcher.addEventListener('change', listener)
-    return () => matcher.removeEventListener('change', listener)
-  }, [settingsState.context])
-
-  // Auth machine setup
-  const [authState, authSend] = useMachine(authMachine, {
-    actions: {
-      goToSignInPage: () => {
-        navigate(paths.SIGN_IN)
-
-        logout()
-      },
-      goToIndexPage: () => {
-        if (window.location.pathname.includes(paths.SIGN_IN)) {
-          navigate(paths.INDEX)
-        }
-      },
-    },
-  })
-
-  useStateMachineCommands({
-    machineId: 'auth',
-    state: authState,
-    send: authSend,
-    commandBarConfig: authCommandBarConfig,
-  })
-
-  return (
-    <GlobalStateContext.Provider
-      value={{
-        auth: {
-          state: authState,
-          context: authState.context,
-          send: authSend,
-        },
-        settings: {
-          state: settingsState,
-          context: settingsState.context,
-          send: settingsSend,
-        },
-      }}
-    >
-      {children}
-    </GlobalStateContext.Provider>
-  )
-}
-
-export default GlobalStateProvider
-
-export function logout() {
-  localStorage.removeItem(TOKEN_PERSIST_KEY)
-  return (
-    !isTauri() &&
-    fetch(withBaseUrl('/logout'), {
-      method: 'POST',
-      credentials: 'include',
-    })
-  )
-}