@@ -40,7 +33,7 @@ export default function Units() {
className="block w-full px-3 py-1 bg-transparent border border-chalkboard-30"
value={mouseControls.current}
onChange={(e) => {
- send({
+ settingsActor.send({
type: 'set.modeling.mouseControls',
data: {
level: 'user',
diff --git a/src/routes/Onboarding/Introduction.tsx b/src/routes/Onboarding/Introduction.tsx
index ada5d8ab3..b4a9e052e 100644
--- a/src/routes/Onboarding/Introduction.tsx
+++ b/src/routes/Onboarding/Introduction.tsx
@@ -1,6 +1,5 @@
import { OnboardingButtons, useDemoCode } from '.'
import { onboardingPaths } from 'routes/Onboarding/paths'
-import { useSettingsAuthContext } from 'hooks/useSettingsAuthContext'
import { Themes, getSystemTheme } from 'lib/theme'
import { bracket } from 'lib/exampleKcl'
import { createAndOpenNewTutorialProject } from 'lib/desktopFS'
@@ -14,6 +13,7 @@ import { PATHS } from 'lib/paths'
import { useFileContext } from 'hooks/useFileContext'
import { useLspContext } from 'components/LspProvider'
import { reportRejection } from 'lib/trap'
+import { useSettings } from 'machines/appMachine'
/**
* Show either a welcome screen or a warning screen
@@ -120,14 +120,8 @@ function OnboardingIntroductionInner() {
useDemoCode()
const {
- settings: {
- state: {
- context: {
- app: { theme },
- },
- },
- },
- } = useSettingsAuthContext()
+ app: { theme },
+ } = useSettings()
const getLogoTheme = () =>
theme.current === Themes.Light ||
(theme.current === Themes.System && getSystemTheme() === Themes.Light)
diff --git a/src/routes/Onboarding/ParametricModeling.tsx b/src/routes/Onboarding/ParametricModeling.tsx
index 0fa8428ae..ae13f1ef1 100644
--- a/src/routes/Onboarding/ParametricModeling.tsx
+++ b/src/routes/Onboarding/ParametricModeling.tsx
@@ -1,21 +1,17 @@
import { OnboardingButtons, useDemoCode } from '.'
import { onboardingPaths } from 'routes/Onboarding/paths'
import { Themes, getSystemTheme } from 'lib/theme'
-import { useSettingsAuthContext } from 'hooks/useSettingsAuthContext'
import { bracketThicknessCalculationLine } from 'lib/exampleKcl'
import { isDesktop } from 'lib/isDesktop'
+import { useSettings } from 'machines/appMachine'
export default function OnboardingParametricModeling() {
useDemoCode()
const {
- settings: {
- context: {
- app: {
- theme: { current: theme },
- },
- },
+ app: {
+ theme: { current: theme },
},
- } = useSettingsAuthContext()
+ } = useSettings()
const getImageTheme = () =>
theme === Themes.Light ||
(theme === Themes.System && getSystemTheme() === Themes.Light)
diff --git a/src/routes/Onboarding/Units.tsx b/src/routes/Onboarding/Units.tsx
index ad469b983..7ec94ac34 100644
--- a/src/routes/Onboarding/Units.tsx
+++ b/src/routes/Onboarding/Units.tsx
@@ -4,19 +4,14 @@ import { ActionButton } from 'components/ActionButton'
import { SettingsSection } from 'components/Settings/SettingsSection'
import { useDismiss, useNextClick } from '.'
import { onboardingPaths } from 'routes/Onboarding/paths'
-import { useSettingsAuthContext } from 'hooks/useSettingsAuthContext'
+import { settingsActor, useSettings } from 'machines/appMachine'
export default function Units() {
const dismiss = useDismiss()
const next = useNextClick(onboardingPaths.CAMERA)
const {
- settings: {
- send,
- context: {
- modeling: { defaultUnit },
- },
- },
- } = useSettingsAuthContext()
+ modeling: { defaultUnit },
+ } = useSettings()
return (
@@ -31,7 +26,7 @@ export default function Units() {
className="block w-full px-3 py-1 border border-chalkboard-30 bg-transparent"
value={defaultUnit.user}
onChange={(e) => {
- send({
+ settingsActor.send({
type: 'set.modeling.defaultUnit',
data: {
level: 'user',
diff --git a/src/routes/Onboarding/index.tsx b/src/routes/Onboarding/index.tsx
index 16d4f32e8..3d2daef9c 100644
--- a/src/routes/Onboarding/index.tsx
+++ b/src/routes/Onboarding/index.tsx
@@ -5,7 +5,6 @@ import Camera from './Camera'
import Sketching from './Sketching'
import { useCallback, useEffect } from 'react'
import makeUrlPathRelative from '../../lib/makeUrlPathRelative'
-import { useSettingsAuthContext } from 'hooks/useSettingsAuthContext'
import Streaming from './Streaming'
import CodeEditor from './CodeEditor'
import ParametricModeling from './ParametricModeling'
@@ -26,9 +25,10 @@ import { reportRejection } from 'lib/trap'
import { useNetworkContext } from 'hooks/useNetworkContext'
import { NetworkHealthState } from 'hooks/useNetworkStatus'
import { EngineConnectionStateType } from 'lang/std/engineConnection'
+import { settingsActor, useSettings } from 'machines/appMachine'
+import { useSelector } from '@xstate/react'
import { CustomIcon } from 'components/CustomIcon'
import Tooltip from 'components/Tooltip'
-import { commandBarActor } from 'machines/commandBarMachine'
export const kbdClasses =
'py-0.5 px-1 text-sm rounded bg-chalkboard-10 dark:bg-chalkboard-100 border border-chalkboard-50 border-b-2'
@@ -112,25 +112,24 @@ export function useDemoCode() {
export function useNextClick(newStatus: string) {
const filePath = useAbsoluteFilePath()
- const {
- settings: { send },
- } = useSettingsAuthContext()
const navigate = useNavigate()
return useCallback(() => {
- send({
+ settingsActor.send({
type: 'set.app.onboardingStatus',
data: { level: 'user', value: newStatus },
})
navigate(filePath + PATHS.ONBOARDING.INDEX.slice(0, -1) + newStatus)
- }, [filePath, newStatus, send, navigate])
+ }, [filePath, newStatus, settingsActor.send, navigate])
}
export function useDismiss() {
const filePath = useAbsoluteFilePath()
- const {
- settings: { state, send },
- } = useSettingsAuthContext()
+ const settings = useSettings()
+ const send = settingsActor.send
+ const isSettingsActorIdle = useSelector(settingsActor, (s) =>
+ s.matches('idle')
+ )
const navigate = useNavigate()
const settingsCallback = useCallback(() => {
@@ -146,12 +145,17 @@ export function useDismiss() {
*/
useEffect(() => {
if (
- state.context.app.onboardingStatus.user === 'dismissed' &&
- state.matches('idle')
+ settings.app.onboardingStatus.current === 'dismissed' &&
+ isSettingsActorIdle
) {
navigate(filePath)
}
- }, [filePath, navigate, state])
+ }, [
+ filePath,
+ navigate,
+ isSettingsActorIdle,
+ settings.app.onboardingStatus.current,
+ ])
return settingsCallback
}
diff --git a/src/routes/SignIn.tsx b/src/routes/SignIn.tsx
index f78064c90..3772aaf7a 100644
--- a/src/routes/SignIn.tsx
+++ b/src/routes/SignIn.tsx
@@ -3,7 +3,6 @@ import { isDesktop } from '../lib/isDesktop'
import { VITE_KC_SITE_BASE_URL, VITE_KC_API_BASE_URL } from '../env'
import { Themes, getSystemTheme } from '../lib/theme'
import { PATHS } from 'lib/paths'
-import { useSettingsAuthContext } from 'hooks/useSettingsAuthContext'
import { APP_NAME } from 'lib/constants'
import { CSSProperties, useCallback, useState } from 'react'
import { Logo } from 'components/Logo'
@@ -15,6 +14,7 @@ import { toSync } from 'lib/utils'
import { reportRejection } from 'lib/trap'
import toast from 'react-hot-toast'
import { authActor } from 'machines/appMachine'
+import { useSettings } from 'machines/appMachine'
const subtleBorder =
'border border-solid border-chalkboard-30 dark:border-chalkboard-80'
@@ -23,14 +23,8 @@ const cardArea = `${subtleBorder} rounded-lg px-6 py-3 text-chalkboard-70 dark:t
const SignIn = () => {
const [userCode, setUserCode] = useState('')
const {
- settings: {
- state: {
- context: {
- app: { theme },
- },
- },
- },
- } = useSettingsAuthContext()
+ app: { theme },
+ } = useSettings()
const signInUrl = `${VITE_KC_SITE_BASE_URL}${
PATHS.SIGN_IN
}?callbackUrl=${encodeURIComponent(