refactor: rename states to view controllers

.babelrc

@@ -1,12 +1,4 @@
 {
-  "presets": [
-    "@babel/preset-typescript",
-    "@babel/preset-env"
-  ],
-  "plugins": [
-    ["@babel/plugin-transform-react-jsx", {
-      "pragma": "h",
-      "pragmaFrag": "Fragment"
-    }]
-  ]
+  "presets": ["@babel/preset-typescript", "@babel/preset-env"],
+  "plugins": [["@babel/plugin-transform-react-jsx"]]
 }

app/assets/javascripts/App.tsx

@@ -25,9 +25,9 @@ import { DesktopManagerInterface, SNLog } from '@standardnotes/snjs'
 import ApplicationGroupView from './Components/ApplicationGroupView/ApplicationGroupView'
 import { WebDevice } from './Device/WebDevice'
 import { StartApplication } from './Device/StartApplication'
-import { ApplicationGroup } from './UIModels/ApplicationGroup'
+import { ApplicationGroup } from './Application/ApplicationGroup'
 import { WebOrDesktopDevice } from './Device/WebOrDesktopDevice'
-import { WebApplication } from './UIModels/Application'
+import { WebApplication } from './Application/Application'
 import { createRoot, Root } from 'react-dom/client'
 
 let keyCount = 0

app/assets/javascripts/UIModels/Application.ts → app/assets/javascripts/Application/Application.ts

@@ -5,7 +5,7 @@ import { AutolockService } from '@/Services/AutolockService'
 import { DesktopManager } from '@/Services/DesktopManager'
 import { IOService } from '@/Services/IOService'
 import { ThemeManager } from '@/Services/ThemeManager'
-import { AppState } from '@/UIModels/AppState'
+import { ViewControllerManager } from '@/Services/ViewControllerManager'
 import { WebOrDesktopDevice } from '@/Device/WebOrDesktopDevice'
 import {
   DeinitSource,
@@ -21,7 +21,7 @@ import {
 import { makeObservable, observable } from 'mobx'
 
 type WebServices = {
-  appState: AppState
+  viewControllerManager: ViewControllerManager
   desktopService?: DesktopManager
   autolockService: AutolockService
   archiveService: ArchiveManager
@@ -116,8 +116,8 @@ export class WebApplication extends SNApplication {
     }
   }
 
-  public getAppState(): AppState {
-    return this.webServices.appState
+  public getViewControllerManager(): ViewControllerManager {
+    return this.webServices.viewControllerManager
   }
 
   public getDesktopService(): DesktopManager | undefined {

app/assets/javascripts/UIModels/ApplicationGroup.ts → app/assets/javascripts/Application/ApplicationGroup.ts

@@ -6,7 +6,7 @@ import {
   InternalEventBus,
   isDesktopDevice,
 } from '@standardnotes/snjs'
-import { AppState } from '@/UIModels/AppState'
+import { ViewControllerManager } from '@/Services/ViewControllerManager'
 import { getPlatform, isDesktopApplication } from '@/Utils'
 import { ArchiveManager } from '@/Services/ArchiveManager'
 import { DesktopManager } from '@/Services/DesktopManager'
@@ -32,14 +32,14 @@ const createApplication = (
     webSocketUrl,
   )
 
-  const appState = new AppState(application, device)
+  const viewControllerManager = new ViewControllerManager(application, device)
   const archiveService = new ArchiveManager(application)
   const io = new IOService(platform === Platform.MacWeb || platform === Platform.MacDesktop)
   const autolockService = new AutolockService(application, new InternalEventBus())
   const themeService = new ThemeManager(application)
 
   application.setWebServices({
-    appState,
+    viewControllerManager,
     archiveService,
     desktopService: isDesktopDevice(device) ? new DesktopManager(application, device) : undefined,
     io,

app/assets/javascripts/Components/Abstract/PureComponent.tsx

@@ -1,8 +1,9 @@
 import { ApplicationEvent } from '@standardnotes/snjs'
-import { WebApplication } from '@/UIModels/Application'
-import { AppState, AppStateEvent } from '@/UIModels/AppState'
+import { WebApplication } from '@/Application/Application'
+import { ViewControllerManager, ViewControllerManagerEvent } from '@/Services/ViewControllerManager'
 import { autorun, IReactionDisposer, IReactionPublic } from 'mobx'
 import { Component } from 'react'
+
 export type PureComponentState = Partial<Record<string, any>>
 export type PureComponentProps = Partial<Record<string, any>>
 
@@ -17,7 +18,7 @@ export abstract class PureComponent<P = PureComponentProps, S = PureComponentSta
 
   override componentDidMount() {
     this.addAppEventObserver()
-    this.addAppStateObserver()
+    this.addViewControllerManagerObserver()
   }
 
   deinit(): void {
@@ -38,21 +39,21 @@ export abstract class PureComponent<P = PureComponentProps, S = PureComponentSta
     this.deinit()
   }
 
-  public get appState(): AppState {
-    return this.application.getAppState()
+  public get viewControllerManager(): ViewControllerManager {
+    return this.application.getViewControllerManager()
   }
 
   autorun(view: (r: IReactionPublic) => void): void {
     this.reactionDisposers.push(autorun(view))
   }
 
-  addAppStateObserver() {
-    this.unsubState = this.application.getAppState().addObserver(async (eventName, data) => {
-      this.onAppStateEvent(eventName, data)
+  addViewControllerManagerObserver() {
+    this.unsubState = this.application.getViewControllerManager().addObserver(async (eventName, data) => {
+      this.onViewControllerManagerEvent(eventName, data)
     })
   }
 
-  onAppStateEvent(_eventName: AppStateEvent, _data: unknown) {
+  onViewControllerManagerEvent(_eventName: ViewControllerManagerEvent, _data: unknown) {
     /** Optional override */
   }
 

app/assets/javascripts/Components/AccountMenu/AccountMenu.tsx

@@ -1,31 +1,36 @@
 import { observer } from 'mobx-react-lite'
 import { useCloseOnClickOutside } from '@/Hooks/useCloseOnClickOutside'
-import { AppState } from '@/UIModels/AppState'
-import { WebApplication } from '@/UIModels/Application'
+import { ViewControllerManager } from '@/Services/ViewControllerManager'
+import { WebApplication } from '@/Application/Application'
 import { useCallback, useRef, FunctionComponent, KeyboardEventHandler } from 'react'
-import { ApplicationGroup } from '@/UIModels/ApplicationGroup'
+import { ApplicationGroup } from '@/Application/ApplicationGroup'
 import { AccountMenuPane } from './AccountMenuPane'
 import MenuPaneSelector from './MenuPaneSelector'
 
 type Props = {
-  appState: AppState
+  viewControllerManager: ViewControllerManager
   application: WebApplication
   onClickOutside: () => void
   mainApplicationGroup: ApplicationGroup
 }
 
-const AccountMenu: FunctionComponent<Props> = ({ application, appState, onClickOutside, mainApplicationGroup }) => {
-  const { currentPane, shouldAnimateCloseMenu } = appState.accountMenu
+const AccountMenu: FunctionComponent<Props> = ({
+  application,
+  viewControllerManager,
+  onClickOutside,
+  mainApplicationGroup,
+}) => {
+  const { currentPane, shouldAnimateCloseMenu } = viewControllerManager.accountMenuController
 
   const closeAccountMenu = useCallback(() => {
-    appState.accountMenu.closeAccountMenu()
-  }, [appState])
+    viewControllerManager.accountMenuController.closeAccountMenu()
+  }, [viewControllerManager])
 
   const setCurrentPane = useCallback(
     (pane: AccountMenuPane) => {
-      appState.accountMenu.setCurrentPane(pane)
+      viewControllerManager.accountMenuController.setCurrentPane(pane)
     },
-    [appState],
+    [viewControllerManager],
   )
 
   const ref = useRef<HTMLDivElement>(null)
@@ -59,7 +64,7 @@ const AccountMenu: FunctionComponent<Props> = ({ application, appState, onClickO
         onKeyDown={handleKeyDown}
       >
         <MenuPaneSelector
-          appState={appState}
+          viewControllerManager={viewControllerManager}
           application={application}
           mainApplicationGroup={mainApplicationGroup}
           menuPane={currentPane}

app/assets/javascripts/Components/AccountMenu/AdvancedOptions.tsx

@@ -1,5 +1,5 @@
-import { WebApplication } from '@/UIModels/Application'
-import { AppState } from '@/UIModels/AppState'
+import { WebApplication } from '@/Application/Application'
+import { ViewControllerManager } from '@/Services/ViewControllerManager'
 import { observer } from 'mobx-react-lite'
 import { ChangeEventHandler, FunctionComponent, useCallback, useEffect, useState } from 'react'
 import Checkbox from '@/Components/Checkbox/Checkbox'
@@ -8,21 +8,21 @@ import Icon from '@/Components/Icon/Icon'
 
 type Props = {
   application: WebApplication
-  appState: AppState
+  viewControllerManager: ViewControllerManager
   disabled?: boolean
   onPrivateWorkspaceChange?: (isPrivate: boolean, identifier?: string) => void
   onStrictSignInChange?: (isStrictSignIn: boolean) => void
 }
 
 const AdvancedOptions: FunctionComponent<Props> = ({
-  appState,
+  viewControllerManager,
   application,
   disabled = false,
   onPrivateWorkspaceChange,
   onStrictSignInChange,
   children,
 }) => {
-  const { server, setServer, enableServerOption, setEnableServerOption } = appState.accountMenu
+  const { server, setServer, enableServerOption, setEnableServerOption } = viewControllerManager.accountMenuController
   const [showAdvanced, setShowAdvanced] = useState(false)
 
   const [isPrivateWorkspace, setIsPrivateWorkspace] = useState(false)

app/assets/javascripts/Components/AccountMenu/ConfirmPassword.tsx

@@ -1,6 +1,6 @@
 import { STRING_NON_MATCHING_PASSWORDS } from '@/Strings'
-import { WebApplication } from '@/UIModels/Application'
-import { AppState } from '@/UIModels/AppState'
+import { WebApplication } from '@/Application/Application'
+import { ViewControllerManager } from '@/Services/ViewControllerManager'
 import { observer } from 'mobx-react-lite'
 import { FunctionComponent, KeyboardEventHandler, useCallback, useEffect, useRef, useState } from 'react'
 import { AccountMenuPane } from './AccountMenuPane'
@@ -11,15 +11,21 @@ import Icon from '@/Components/Icon/Icon'
 import IconButton from '@/Components/Button/IconButton'
 
 type Props = {
-  appState: AppState
+  viewControllerManager: ViewControllerManager
   application: WebApplication
   setMenuPane: (pane: AccountMenuPane) => void
   email: string
   password: string
 }
 
-const ConfirmPassword: FunctionComponent<Props> = ({ application, appState, setMenuPane, email, password }) => {
-  const { notesAndTagsCount } = appState.accountMenu
+const ConfirmPassword: FunctionComponent<Props> = ({
+  application,
+  viewControllerManager,
+  setMenuPane,
+  email,
+  password,
+}) => {
+  const { notesAndTagsCount } = viewControllerManager.accountMenuController
   const [confirmPassword, setConfirmPassword] = useState('')
   const [isRegistering, setIsRegistering] = useState(false)
   const [isEphemeral, setIsEphemeral] = useState(false)
@@ -61,8 +67,8 @@ const ConfirmPassword: FunctionComponent<Props> = ({ application, appState, setM
             if (res.error) {
               throw new Error(res.error.message)
             }
-            appState.accountMenu.closeAccountMenu()
-            appState.accountMenu.setCurrentPane(AccountMenuPane.GeneralMenu)
+            viewControllerManager.accountMenuController.closeAccountMenu()
+            viewControllerManager.accountMenuController.setCurrentPane(AccountMenuPane.GeneralMenu)
           })
           .catch((err) => {
             console.error(err)
@@ -77,7 +83,7 @@ const ConfirmPassword: FunctionComponent<Props> = ({ application, appState, setM
         passwordInputRef.current?.focus()
       }
     },
-    [appState, application, confirmPassword, email, isEphemeral, password, shouldMergeLocal],
+    [viewControllerManager, application, confirmPassword, email, isEphemeral, password, shouldMergeLocal],
   )
 
   const handleKeyDown: KeyboardEventHandler = useCallback(

app/assets/javascripts/Components/AccountMenu/CreateAccount.tsx

@@ -1,5 +1,5 @@
-import { WebApplication } from '@/UIModels/Application'
-import { AppState } from '@/UIModels/AppState'
+import { WebApplication } from '@/Application/Application'
+import { ViewControllerManager } from '@/Services/ViewControllerManager'
 import { observer } from 'mobx-react-lite'
 import { FunctionComponent, KeyboardEventHandler, useCallback, useEffect, useRef, useState } from 'react'
 import { AccountMenuPane } from './AccountMenuPane'
@@ -11,7 +11,7 @@ import IconButton from '@/Components/Button/IconButton'
 import AdvancedOptions from './AdvancedOptions'
 
 type Props = {
-  appState: AppState
+  viewControllerManager: ViewControllerManager
   application: WebApplication
   setMenuPane: (pane: AccountMenuPane) => void
   email: string
@@ -21,7 +21,7 @@ type Props = {
 }
 
 const CreateAccount: FunctionComponent<Props> = ({
-  appState,
+  viewControllerManager,
   application,
   setMenuPane,
   email,
@@ -137,7 +137,7 @@ const CreateAccount: FunctionComponent<Props> = ({
       <div className="h-1px my-2 bg-border"></div>
       <AdvancedOptions
         application={application}
-        appState={appState}
+        viewControllerManager={viewControllerManager}
         onPrivateWorkspaceChange={onPrivateWorkspaceChange}
       />
     </>

app/assets/javascripts/Components/AccountMenu/GeneralAccountMenu.tsx

@@ -1,5 +1,5 @@
-import { WebApplication } from '@/UIModels/Application'
-import { AppState } from '@/UIModels/AppState'
+import { WebApplication } from '@/Application/Application'
+import { ViewControllerManager } from '@/Services/ViewControllerManager'
 import { observer } from 'mobx-react-lite'
 import Icon from '@/Components/Icon/Icon'
 import { SyncQueueStrategy } from '@standardnotes/snjs'
@@ -11,11 +11,11 @@ import MenuItem from '@/Components/Menu/MenuItem'
 import MenuItemSeparator from '@/Components/Menu/MenuItemSeparator'
 import { MenuItemType } from '@/Components/Menu/MenuItemType'
 import WorkspaceSwitcherOption from './WorkspaceSwitcher/WorkspaceSwitcherOption'
-import { ApplicationGroup } from '@/UIModels/ApplicationGroup'
+import { ApplicationGroup } from '@/Application/ApplicationGroup'
 import { formatLastSyncDate } from '@/Utils/FormatLastSyncDate'
 
 type Props = {
-  appState: AppState
+  viewControllerManager: ViewControllerManager
   application: WebApplication
   mainApplicationGroup: ApplicationGroup
   setMenuPane: (pane: AccountMenuPane) => void
@@ -26,7 +26,7 @@ const iconClassName = 'color-neutral mr-2'
 
 const GeneralAccountMenu: FunctionComponent<Props> = ({
   application,
-  appState,
+  viewControllerManager,
   setMenuPane,
   closeMenu,
   mainApplicationGroup,
@@ -60,20 +60,20 @@ const GeneralAccountMenu: FunctionComponent<Props> = ({
   const user = useMemo(() => application.getUser(), [application])
 
   const openPreferences = useCallback(() => {
-    appState.accountMenu.closeAccountMenu()
-    appState.preferences.setCurrentPane('account')
-    appState.preferences.openPreferences()
-  }, [appState])
+    viewControllerManager.accountMenuController.closeAccountMenu()
+    viewControllerManager.preferencesController.setCurrentPane('account')
+    viewControllerManager.preferencesController.openPreferences()
+  }, [viewControllerManager])
 
   const openHelp = useCallback(() => {
-    appState.accountMenu.closeAccountMenu()
-    appState.preferences.setCurrentPane('help-feedback')
-    appState.preferences.openPreferences()
-  }, [appState])
+    viewControllerManager.accountMenuController.closeAccountMenu()
+    viewControllerManager.preferencesController.setCurrentPane('help-feedback')
+    viewControllerManager.preferencesController.openPreferences()
+  }, [viewControllerManager])
 
   const signOut = useCallback(() => {
-    appState.accountMenu.setSigningOut(true)
-  }, [appState])
+    viewControllerManager.accountMenuController.setSigningOut(true)
+  }, [viewControllerManager])
 
   const activateRegisterPane = useCallback(() => {
     setMenuPane(AccountMenuPane.Register)
@@ -136,13 +136,16 @@ const GeneralAccountMenu: FunctionComponent<Props> = ({
         </>
       )}
       <Menu
-        isOpen={appState.accountMenu.show}
+        isOpen={viewControllerManager.accountMenuController.show}
         a11yLabel="General account menu"
         closeMenu={closeMenu}
         initialFocus={!application.hasAccount() ? CREATE_ACCOUNT_INDEX : SWITCHER_INDEX}
       >
         <MenuItemSeparator />
-        <WorkspaceSwitcherOption mainApplicationGroup={mainApplicationGroup} appState={appState} />
+        <WorkspaceSwitcherOption
+          mainApplicationGroup={mainApplicationGroup}
+          viewControllerManager={viewControllerManager}
+        />
         <MenuItemSeparator />
         {user ? (
           <MenuItem type={MenuItemType.IconButton} onClick={openPreferences}>
@@ -166,7 +169,7 @@ const GeneralAccountMenu: FunctionComponent<Props> = ({
             <Icon type="help" className={iconClassName} />
             Help &amp; feedback
           </div>
-          <span className="color-neutral">v{appState.version}</span>
+          <span className="color-neutral">v{viewControllerManager.version}</span>
         </MenuItem>
         {user ? (
           <>