refactor: rename states to view controllers (#1060)

app/assets/javascripts/Components/Preferences/PaneSelector.tsx

@@ -12,7 +12,7 @@ import { PreferencesProps } from './PreferencesProps'
 
 const PaneSelector: FunctionComponent<PreferencesProps & { menu: PreferencesMenu }> = ({
   menu,
-  appState,
+  viewControllerManager,
   application,
   mfaProvider,
   userProvider,
@@ -21,21 +21,26 @@ const PaneSelector: FunctionComponent<PreferencesProps & { menu: PreferencesMenu
     case 'general':
       return (
         <General
-          appState={appState}
+          viewControllerManager={viewControllerManager}
           application={application}
           extensionsLatestVersions={menu.extensionsLatestVersions}
         />
       )
     case 'account':
-      return <AccountPreferences application={application} appState={appState} />
+      return <AccountPreferences application={application} viewControllerManager={viewControllerManager} />
     case 'appearance':
       return <Appearance application={application} />
     case 'security':
       return (
-        <Security mfaProvider={mfaProvider} userProvider={userProvider} appState={appState} application={application} />
+        <Security
+          mfaProvider={mfaProvider}
+          userProvider={userProvider}
+          viewControllerManager={viewControllerManager}
+          application={application}
+        />
       )
     case 'backups':
-      return <Backups application={application} appState={appState} />
+      return <Backups application={application} viewControllerManager={viewControllerManager} />
     case 'listed':
       return <Listed application={application} />
     case 'shortcuts':
@@ -49,7 +54,7 @@ const PaneSelector: FunctionComponent<PreferencesProps & { menu: PreferencesMenu
     default:
       return (
         <General
-          appState={appState}
+          viewControllerManager={viewControllerManager}
           application={application}
           extensionsLatestVersions={menu.extensionsLatestVersions}
         />

app/assets/javascripts/Components/Preferences/Panes/Account/AccountPreferences.tsx

@@ -1,6 +1,6 @@
 import { observer } from 'mobx-react-lite'
-import { WebApplication } from '@/UIModels/Application'
-import { AppState } from '@/UIModels/AppState'
+import { WebApplication } from '@/Application/Application'
+import { ViewControllerManager } from '@/Services/ViewControllerManager'
 import Authentication from './Authentication'
 import Credentials from './Credentials'
 import Sync from './Sync'
@@ -11,22 +11,24 @@ import PreferencesPane from '../../PreferencesComponents/PreferencesPane'
 
 type Props = {
   application: WebApplication
-  appState: AppState
+  viewControllerManager: ViewControllerManager
 }
 
-const AccountPreferences = ({ application, appState }: Props) => (
+const AccountPreferences = ({ application, viewControllerManager }: Props) => (
   <PreferencesPane>
     {!application.hasAccount() ? (
-      <Authentication application={application} appState={appState} />
+      <Authentication application={application} viewControllerManager={viewControllerManager} />
     ) : (
       <>
-        <Credentials application={application} appState={appState} />
+        <Credentials application={application} viewControllerManager={viewControllerManager} />
         <Sync application={application} />
       </>
     )}
-    <Subscription application={application} appState={appState} />
-    {application.hasAccount() && appState.features.hasFiles && <FilesSection application={application} />}
-    <SignOutWrapper application={application} appState={appState} />
+    <Subscription application={application} viewControllerManager={viewControllerManager} />
+    {application.hasAccount() && viewControllerManager.featuresController.hasFiles && (
+      <FilesSection application={application} />
+    )}
+    <SignOutWrapper application={application} viewControllerManager={viewControllerManager} />
   </PreferencesPane>
 )
 

app/assets/javascripts/Components/Preferences/Panes/Account/Advanced.tsx

@@ -1,8 +1,8 @@
 import { FunctionComponent } from 'react'
 import OfflineSubscription from '@/Components/Preferences/Panes/Account/OfflineSubscription'
-import { WebApplication } from '@/UIModels/Application'
+import { WebApplication } from '@/Application/Application'
 import { observer } from 'mobx-react-lite'
-import { AppState } from '@/UIModels/AppState'
+import { ViewControllerManager } from '@/Services/ViewControllerManager'
 import Extensions from '@/Components/Preferences/Panes/Extensions/Extensions'
 import { ExtensionsLatestVersions } from '@/Components/Preferences/Panes/Extensions/ExtensionsLatestVersions'
 import AccordionItem from '@/Components/Shared/AccordionItem'
@@ -11,18 +11,18 @@ import PreferencesSegment from '../../PreferencesComponents/PreferencesSegment'
 
 type Props = {
   application: WebApplication
-  appState: AppState
+  viewControllerManager: ViewControllerManager
   extensionsLatestVersions: ExtensionsLatestVersions
 }
 
-const Advanced: FunctionComponent<Props> = ({ application, appState, extensionsLatestVersions }) => {
+const Advanced: FunctionComponent<Props> = ({ application, viewControllerManager, extensionsLatestVersions }) => {
   return (
     <PreferencesGroup>
       <PreferencesSegment>
         <AccordionItem title={'Advanced Settings'}>
           <div className="flex flex-row items-center">
             <div className="flex-grow flex flex-col">
-              <OfflineSubscription application={application} appState={appState} />
+              <OfflineSubscription application={application} viewControllerManager={viewControllerManager} />
               <Extensions
                 className={'mt-3'}
                 application={application}

app/assets/javascripts/Components/Preferences/Panes/Account/Authentication.tsx

@@ -1,7 +1,7 @@
 import Button from '@/Components/Button/Button'
 import { Text, Title } from '@/Components/Preferences/PreferencesComponents/Content'
-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 } from 'react'
 import { AccountIllustration } from '@standardnotes/icons'
@@ -11,20 +11,20 @@ import PreferencesSegment from '../../PreferencesComponents/PreferencesSegment'
 
 type Props = {
   application: WebApplication
-  appState: AppState
+  viewControllerManager: ViewControllerManager
 }
 
-const Authentication: FunctionComponent<Props> = ({ appState }) => {
+const Authentication: FunctionComponent<Props> = ({ viewControllerManager }) => {
   const clickSignIn = () => {
-    appState.preferences.closePreferences()
-    appState.accountMenu.setCurrentPane(AccountMenuPane.SignIn)
-    appState.accountMenu.setShow(true)
+    viewControllerManager.preferencesController.closePreferences()
+    viewControllerManager.accountMenuController.setCurrentPane(AccountMenuPane.SignIn)
+    viewControllerManager.accountMenuController.setShow(true)
   }
 
   const clickRegister = () => {
-    appState.preferences.closePreferences()
-    appState.accountMenu.setCurrentPane(AccountMenuPane.Register)
-    appState.accountMenu.setShow(true)
+    viewControllerManager.preferencesController.closePreferences()
+    viewControllerManager.accountMenuController.setCurrentPane(AccountMenuPane.Register)
+    viewControllerManager.accountMenuController.setShow(true)
   }
 
   return (

app/assets/javascripts/Components/Preferences/Panes/Account/ChangeEmail/ChangeEmail.tsx

@@ -4,7 +4,7 @@ import ModalDialogDescription from '@/Components/Shared/ModalDialogDescription'
 import ModalDialogLabel from '@/Components/Shared/ModalDialogLabel'
 import Button from '@/Components/Button/Button'
 import { FunctionComponent, useState } from 'react'
-import { WebApplication } from '@/UIModels/Application'
+import { WebApplication } from '@/Application/Application'
 import { useBeforeUnload } from '@/Hooks/useBeforeUnload'
 import ChangeEmailForm from './ChangeEmailForm'
 import ChangeEmailSuccess from './ChangeEmailSuccess'

app/assets/javascripts/Components/Preferences/Panes/Account/ClearSessionDataView.tsx

@@ -1,5 +1,5 @@
 import Button from '@/Components/Button/Button'
-import { AppState } from '@/UIModels/AppState'
+import { ViewControllerManager } from '@/Services/ViewControllerManager'
 import { observer } from 'mobx-react-lite'
 import { FunctionComponent } from 'react'
 import { Title, Text } from '../../PreferencesComponents/Content'
@@ -7,8 +7,8 @@ import PreferencesGroup from '../../PreferencesComponents/PreferencesGroup'
 import PreferencesSegment from '../../PreferencesComponents/PreferencesSegment'
 
 const ClearSessionDataView: FunctionComponent<{
-  appState: AppState
-}> = ({ appState }) => {
+  viewControllerManager: ViewControllerManager
+}> = ({ viewControllerManager }) => {
   return (
     <PreferencesGroup>
       <PreferencesSegment>
@@ -19,7 +19,7 @@ const ClearSessionDataView: FunctionComponent<{
           dangerStyle={true}
           label="Clear workspace"
           onClick={() => {
-            appState.accountMenu.setSigningOut(true)
+            viewControllerManager.accountMenuController.setSigningOut(true)
           }}
         />
       </PreferencesSegment>

app/assets/javascripts/Components/Preferences/Panes/Account/Credentials.tsx

@@ -1,19 +1,19 @@
 import { Subtitle, Text, Title } from '@/Components/Preferences/PreferencesComponents/Content'
 import Button from '@/Components/Button/Button'
-import { WebApplication } from '@/UIModels/Application'
+import { WebApplication } from '@/Application/Application'
 import { observer } from '@node_modules/mobx-react-lite'
 import HorizontalSeparator from '@/Components/Shared/HorizontalSeparator'
 import { dateToLocalizedString } from '@standardnotes/snjs'
 import { useCallback, useState, FunctionComponent } from 'react'
 import ChangeEmail from '@/Components/Preferences/Panes/Account/ChangeEmail/ChangeEmail'
-import { AppState } from '@/UIModels/AppState'
+import { ViewControllerManager } from '@/Services/ViewControllerManager'
 import PasswordWizard from '@/Components/PasswordWizard/PasswordWizard'
 import PreferencesGroup from '../../PreferencesComponents/PreferencesGroup'
 import PreferencesSegment from '../../PreferencesComponents/PreferencesSegment'
 
 type Props = {
   application: WebApplication
-  appState: AppState
+  viewControllerManager: ViewControllerManager
 }
 
 const Credentials: FunctionComponent<Props> = ({ application }: Props) => {

app/assets/javascripts/Components/Preferences/Panes/Account/Files.tsx

@@ -1,4 +1,4 @@
-import { WebApplication } from '@/UIModels/Application'
+import { WebApplication } from '@/Application/Application'
 import { formatSizeToReadableString } from '@standardnotes/filepicker'
 import { SubscriptionSettingName } from '@standardnotes/snjs'
 import { FunctionComponent, useEffect, useState } from 'react'

app/assets/javascripts/Components/Preferences/Panes/Account/OfflineSubscription.tsx

@@ -2,8 +2,8 @@ import React, { FunctionComponent, useEffect, useState } from 'react'
 import { Subtitle } from '@/Components/Preferences/PreferencesComponents/Content'
 import DecoratedInput from '@/Components/Input/DecoratedInput'
 import Button from '@/Components/Button/Button'
-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 { STRING_REMOVE_OFFLINE_KEY_CONFIRMATION } from '@/Strings'
 import { ButtonType, ClientDisplayableError } from '@standardnotes/snjs'
@@ -11,7 +11,7 @@ import HorizontalSeparator from '@/Components/Shared/HorizontalSeparator'
 
 type Props = {
   application: WebApplication
-  appState: AppState
+  viewControllerManager: ViewControllerManager
 }
 
 const OfflineSubscription: FunctionComponent<Props> = ({ application }) => {

app/assets/javascripts/Components/Preferences/Panes/Account/SignOutView.tsx

@@ -1,8 +1,8 @@
 import Button from '@/Components/Button/Button'
 import OtherSessionsSignOutContainer from '@/Components/OtherSessionsSignOut/OtherSessionsSignOut'
 import HorizontalSeparator from '@/Components/Shared/HorizontalSeparator'
-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 } from 'react'
 import { Subtitle, Title, Text } from '../../PreferencesComponents/Content'
@@ -12,10 +12,10 @@ import ClearSessionDataView from './ClearSessionDataView'
 
 type Props = {
   application: WebApplication
-  appState: AppState
+  viewControllerManager: ViewControllerManager
 }
 
-const SignOutView: FunctionComponent<Props> = observer(({ application, appState }) => {
+const SignOutView: FunctionComponent<Props> = observer(({ application, viewControllerManager }) => {
   return (
     <>
       <PreferencesGroup>
@@ -30,10 +30,14 @@ const SignOutView: FunctionComponent<Props> = observer(({ application, appState
               variant="normal"
               label="Sign out other sessions"
               onClick={() => {
-                appState.accountMenu.setOtherSessionsSignOut(true)
+                viewControllerManager.accountMenuController.setOtherSessionsSignOut(true)
               }}
             />
-            <Button variant="normal" label="Manage sessions" onClick={() => appState.openSessionsModal()} />
+            <Button
+              variant="normal"
+              label="Manage sessions"
+              onClick={() => viewControllerManager.openSessionsModal()}
+            />
           </div>
         </PreferencesSegment>
         <HorizontalSeparator classes="my-4" />
@@ -45,23 +49,23 @@ const SignOutView: FunctionComponent<Props> = observer(({ application, appState
             dangerStyle={true}
             label="Sign out workspace"
             onClick={() => {
-              appState.accountMenu.setSigningOut(true)
+              viewControllerManager.accountMenuController.setSigningOut(true)
             }}
           />
         </PreferencesSegment>
       </PreferencesGroup>
-      <OtherSessionsSignOutContainer appState={appState} application={application} />
+      <OtherSessionsSignOutContainer viewControllerManager={viewControllerManager} application={application} />
     </>
   )
 })
 
 SignOutView.displayName = 'SignOutView'
 
-const SignOutWrapper: FunctionComponent<Props> = ({ application, appState }) => {
+const SignOutWrapper: FunctionComponent<Props> = ({ application, viewControllerManager }) => {
   if (!application.hasAccount()) {
-    return <ClearSessionDataView appState={appState} />
+    return <ClearSessionDataView viewControllerManager={viewControllerManager} />
   }
-  return <SignOutView appState={appState} application={application} />
+  return <SignOutView viewControllerManager={viewControllerManager} application={application} />
 }
 
 export default observer(SignOutWrapper)

app/assets/javascripts/Components/Preferences/Panes/Account/Subscription/NoSubscription.tsx

@@ -1,7 +1,7 @@
 import { FunctionComponent, useState } from 'react'
 import { LinkButton, Text } from '@/Components/Preferences/PreferencesComponents/Content'
 import Button from '@/Components/Button/Button'
-import { WebApplication } from '@/UIModels/Application'
+import { WebApplication } from '@/Application/Application'
 import { loadPurchaseFlowUrl } from '@/Components/PurchaseFlow/PurchaseFlowFunctions'
 
 type Props = {

app/assets/javascripts/Components/Preferences/Panes/Account/Subscription/StatusText.tsx

@@ -1,8 +1,8 @@
-import { SubscriptionState } from '@/UIModels/AppState/SubscriptionState'
+import { SubscriptionController } from '@/Controllers/Subscription/SubscriptionController'
 import { observer } from 'mobx-react-lite'
 import { Text } from '@/Components/Preferences/PreferencesComponents/Content'
 
-type Props = { subscriptionState: SubscriptionState }
+type Props = { subscriptionState: SubscriptionController }
 
 const StatusText = ({ subscriptionState }: Props) => {
   const {

app/assets/javascripts/Components/Preferences/Panes/Account/Subscription/Subscription.tsx

@@ -1,20 +1,20 @@
 import { Title } from '@/Components/Preferences/PreferencesComponents/Content'
-import { WebApplication } from '@/UIModels/Application'
+import { WebApplication } from '@/Application/Application'
 import SubscriptionInformation from './SubscriptionInformation'
 import NoSubscription from './NoSubscription'
 import { observer } from 'mobx-react-lite'
 import { FunctionComponent } from 'react'
-import { AppState } from '@/UIModels/AppState'
+import { ViewControllerManager } from '@/Services/ViewControllerManager'
 import PreferencesGroup from '@/Components/Preferences/PreferencesComponents/PreferencesGroup'
 import PreferencesSegment from '@/Components/Preferences/PreferencesComponents/PreferencesSegment'
 
 type Props = {
   application: WebApplication
-  appState: AppState
+  viewControllerManager: ViewControllerManager
 }
 
-const Subscription: FunctionComponent<Props> = ({ application, appState }: Props) => {
-  const subscriptionState = appState.subscription
+const Subscription: FunctionComponent<Props> = ({ application, viewControllerManager }: Props) => {
+  const subscriptionState = viewControllerManager.subscriptionController
   const { userSubscription } = subscriptionState
 
   const now = new Date().getTime()

app/assets/javascripts/Components/Preferences/Panes/Account/Subscription/SubscriptionInformation.tsx

@@ -1,12 +1,12 @@
 import { observer } from 'mobx-react-lite'
-import { SubscriptionState } from '@/UIModels/AppState/SubscriptionState'
+import { SubscriptionController } from '@/Controllers/Subscription/SubscriptionController'
 import Button from '@/Components/Button/Button'
-import { WebApplication } from '@/UIModels/Application'
+import { WebApplication } from '@/Application/Application'
 import { openSubscriptionDashboard } from '@/Utils/ManageSubscription'
 import StatusText from './StatusText'
 
 type Props = {
-  subscriptionState: SubscriptionState
+  subscriptionState: SubscriptionController
   application: WebApplication
 }
 

app/assets/javascripts/Components/Preferences/Panes/Account/Sync.tsx

@@ -3,7 +3,7 @@ import Button from '@/Components/Button/Button'
 import { SyncQueueStrategy } from '@standardnotes/snjs'
 import { STRING_GENERIC_SYNC_ERROR } from '@/Strings'
 import { observer } from 'mobx-react-lite'
-import { WebApplication } from '@/UIModels/Application'
+import { WebApplication } from '@/Application/Application'
 import { FunctionComponent, useState } from 'react'
 import { formatLastSyncDate } from '@/Utils/FormatLastSyncDate'
 import PreferencesGroup from '../../PreferencesComponents/PreferencesGroup'

app/assets/javascripts/Components/Preferences/Panes/Appearance.tsx

@@ -3,7 +3,7 @@ import { DropdownItem } from '@/Components/Dropdown/DropdownItem'
 import { usePremiumModal } from '@/Hooks/usePremiumModal'
 import HorizontalSeparator from '@/Components/Shared/HorizontalSeparator'
 import Switch from '@/Components/Switch/Switch'
-import { WebApplication } from '@/UIModels/Application'
+import { WebApplication } from '@/Application/Application'
 import { ContentType, FeatureIdentifier, FeatureStatus, PrefKey, GetFeatures, SNTheme } from '@standardnotes/snjs'
 import { observer } from 'mobx-react-lite'
 import { FunctionComponent, useEffect, useState } from 'react'

app/assets/javascripts/Components/Preferences/Panes/Backups/Backups.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 { FunctionComponent } from 'react'
 import PreferencesPane from '@/Components/Preferences/PreferencesComponents/PreferencesPane'
 import CloudLink from './CloudBackups/CloudBackups'
@@ -9,14 +9,14 @@ import FileBackupsCrossPlatform from './Files/FileBackupsCrossPlatform'
 import { observer } from 'mobx-react-lite'
 
 type Props = {
-  appState: AppState
+  viewControllerManager: ViewControllerManager
   application: WebApplication
 }
 
-const Backups: FunctionComponent<Props> = ({ application, appState }) => {
+const Backups: FunctionComponent<Props> = ({ application, viewControllerManager }) => {
   return (
     <PreferencesPane>
-      <DataBackups application={application} appState={appState} />
+      <DataBackups application={application} viewControllerManager={viewControllerManager} />
       <FileBackupsCrossPlatform application={application} />
       <EmailBackups application={application} />
       <CloudLink application={application} />

app/assets/javascripts/Components/Preferences/Panes/Backups/CloudBackups/CloudBackupProvider.tsx

@@ -15,7 +15,7 @@ import {
   GoogleDriveBackupFrequency,
   OneDriveBackupFrequency,
 } from '@standardnotes/snjs'
-import { WebApplication } from '@/UIModels/Application'
+import { WebApplication } from '@/Application/Application'
 import Button from '@/Components/Button/Button'
 import { isDev, openInNewTab } from '@/Utils'
 import { Subtitle } from '@/Components/Preferences/PreferencesComponents/Content'

app/assets/javascripts/Components/Preferences/Panes/Backups/CloudBackups/CloudBackups.tsx

@@ -1,6 +1,6 @@
 import CloudBackupProvider from './CloudBackupProvider'
 import { useCallback, useEffect, useState, FunctionComponent, Fragment } from 'react'
-import { WebApplication } from '@/UIModels/Application'
+import { WebApplication } from '@/Application/Application'
 import { Subtitle, Text, Title } from '@/Components/Preferences/PreferencesComponents/Content'
 import HorizontalSeparator from '@/Components/Shared/HorizontalSeparator'
 import {

app/assets/javascripts/Components/Preferences/Panes/Backups/DataBackups.tsx

@@ -12,8 +12,8 @@ import {
 } from '@/Strings'
 import { BackupFile } from '@standardnotes/snjs'
 import { ChangeEventHandler, MouseEventHandler, useCallback, useEffect, useRef, useState } from 'react'
-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 { Title, Text, Subtitle } from '@/Components/Preferences/PreferencesComponents/Content'
 import Button from '@/Components/Button/Button'
@@ -23,10 +23,10 @@ import HorizontalSeparator from '@/Components/Shared/HorizontalSeparator'
 
 type Props = {
   application: WebApplication
-  appState: AppState
+  viewControllerManager: ViewControllerManager
 }
 
-const DataBackups = ({ application, appState }: Props) => {
+const DataBackups = ({ application, viewControllerManager }: Props) => {
   const fileInputRef = useRef<HTMLInputElement>(null)
   const [isImportDataLoading, setIsImportDataLoading] = useState(false)
   const {
@@ -35,7 +35,7 @@ const DataBackups = ({ application, appState }: Props) => {
     setIsBackupEncrypted,
     setIsEncryptionEnabled,
     setEncryptionStatusString,
-  } = appState.accountMenu
+  } = viewControllerManager.accountMenuController
 
   const refreshEncryptionStatus = useCallback(() => {
     const hasUser = application.hasAccount()

app/assets/javascripts/Components/Preferences/Panes/Backups/EmailBackups.tsx

@@ -1,7 +1,7 @@
 import { convertStringifiedBooleanToBoolean, isDesktopApplication } from '@/Utils'
 import { STRING_FAILED_TO_UPDATE_USER_SETTING } from '@/Strings'
 import { useCallback, useEffect, useState } from 'react'
-import { WebApplication } from '@/UIModels/Application'
+import { WebApplication } from '@/Application/Application'
 import { observer } from 'mobx-react-lite'
 import { Subtitle, Text, Title } from '@/Components/Preferences/PreferencesComponents/Content'
 import Dropdown from '@/Components/Dropdown/Dropdown'

app/assets/javascripts/Components/Preferences/Panes/Backups/Files/BackupsDropZone.tsx

@@ -6,7 +6,7 @@ import HorizontalSeparator from '@/Components/Shared/HorizontalSeparator'
 import Icon from '@/Components/Icon/Icon'
 import { StreamingFileApi } from '@standardnotes/filepicker'
 import { isHandlingBackupDrag } from '@/Utils/DragTypeCheck'
-import { WebApplication } from '@/UIModels/Application'
+import { WebApplication } from '@/Application/Application'
 import EncryptionStatusItem from '../../Security/EncryptionStatusItem'
 import PreferencesSegment from '@/Components/Preferences/PreferencesComponents/PreferencesSegment'
 

app/assets/javascripts/Components/Preferences/Panes/Backups/Files/FileBackupsCrossPlatform.tsx

@@ -1,7 +1,7 @@
 import { Subtitle, Title, Text } from '@/Components/Preferences/PreferencesComponents/Content'
 import PreferencesGroup from '@/Components/Preferences/PreferencesComponents/PreferencesGroup'
 import PreferencesSegment from '@/Components/Preferences/PreferencesComponents/PreferencesSegment'
-import { WebApplication } from '@/UIModels/Application'
+import { WebApplication } from '@/Application/Application'
 import { useMemo } from 'react'
 import BackupsDropZone from './BackupsDropZone'
 import FileBackupsDesktop from './FileBackupsDesktop'

app/assets/javascripts/Components/Preferences/Panes/Backups/Files/FileBackupsDesktop.tsx

@@ -1,4 +1,4 @@
-import { WebApplication } from '@/UIModels/Application'
+import { WebApplication } from '@/Application/Application'
 import { observer } from 'mobx-react-lite'
 import { Title, Text, Subtitle } from '@/Components/Preferences/PreferencesComponents/Content'
 import { useCallback, useEffect, useState } from 'react'

app/assets/javascripts/Components/Preferences/Panes/Extensions/ExtensionItemProps.tsx

@@ -1,4 +1,4 @@
-import { WebApplication } from '@/UIModels/Application'
+import { WebApplication } from '@/Application/Application'
 import { AnyExtension } from './AnyExtension'
 
 export interface ExtensionItemProps {

app/assets/javascripts/Components/Preferences/Panes/Extensions/Extensions.tsx

@@ -1,7 +1,7 @@
 import { ButtonType, ContentType, SNComponent } from '@standardnotes/snjs'
 import Button from '@/Components/Button/Button'
 import DecoratedInput from '@/Components/Input/DecoratedInput'
-import { WebApplication } from '@/UIModels/Application'
+import { WebApplication } from '@/Application/Application'
 import { FunctionComponent, useEffect, useRef, useState } from 'react'
 import { Title } from '@/Components/Preferences/PreferencesComponents/Content'
 import { observer } from 'mobx-react-lite'

app/assets/javascripts/Components/Preferences/Panes/Extensions/ExtensionsLatestVersions.ts

@@ -1,4 +1,4 @@
-import { WebApplication } from '@/UIModels/Application'
+import { WebApplication } from '@/Application/Application'
 import { ClientDisplayableError, FeatureDescription } from '@standardnotes/snjs'
 import { makeAutoObservable, observable } from 'mobx'
 import { AnyExtension } from './AnyExtension'

app/assets/javascripts/Components/Preferences/Panes/General/Defaults.tsx

@@ -2,7 +2,7 @@ import Dropdown from '@/Components/Dropdown/Dropdown'
 import { DropdownItem } from '@/Components/Dropdown/DropdownItem'
 import { FeatureIdentifier, PrefKey, ComponentArea, ComponentMutator, SNComponent } from '@standardnotes/snjs'
 import { Subtitle, Text, Title } from '@/Components/Preferences/PreferencesComponents/Content'
-import { WebApplication } from '@/UIModels/Application'
+import { WebApplication } from '@/Application/Application'
 import { FunctionComponent, useEffect, useState } from 'react'
 import HorizontalSeparator from '@/Components/Shared/HorizontalSeparator'
 import Switch from '@/Components/Switch/Switch'
@@ -57,7 +57,7 @@ const Defaults: FunctionComponent<Props> = ({ application }) => {
 
   const toggleSpellcheck = () => {
     setSpellcheck(!spellcheck)
-    application.getAppState().toggleGlobalSpellcheck().catch(console.error)
+    application.getViewControllerManager().toggleGlobalSpellcheck().catch(console.error)
   }
 
   useEffect(() => {

app/assets/javascripts/Components/Preferences/Panes/General/General.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 { FunctionComponent } from 'react'
 import { ExtensionsLatestVersions } from '@/Components/Preferences/Panes/Extensions/ExtensionsLatestVersions'
 import { observer } from 'mobx-react-lite'
@@ -10,17 +10,21 @@ import Advanced from '@/Components/Preferences/Panes/Account/Advanced'
 import PreferencesPane from '../../PreferencesComponents/PreferencesPane'
 
 type Props = {
-  appState: AppState
+  viewControllerManager: ViewControllerManager
   application: WebApplication
   extensionsLatestVersions: ExtensionsLatestVersions
 }
 
-const General: FunctionComponent<Props> = ({ appState, application, extensionsLatestVersions }) => (
+const General: FunctionComponent<Props> = ({ viewControllerManager, application, extensionsLatestVersions }) => (
   <PreferencesPane>
     <Tools application={application} />
     <Defaults application={application} />
     <LabsPane application={application} />
-    <Advanced application={application} appState={appState} extensionsLatestVersions={extensionsLatestVersions} />
+    <Advanced
+      application={application}
+      viewControllerManager={viewControllerManager}
+      extensionsLatestVersions={extensionsLatestVersions}
+    />
   </PreferencesPane>
 )
 

app/assets/javascripts/Components/Preferences/Panes/General/Labs.tsx

@@ -1,6 +1,6 @@
 import Switch from '@/Components/Switch/Switch'
 import { Subtitle, Text, Title } from '@/Components/Preferences/PreferencesComponents/Content'
-import { WebApplication } from '@/UIModels/Application'
+import { WebApplication } from '@/Application/Application'
 import { FeatureIdentifier, FeatureStatus, FindNativeFeature } from '@standardnotes/snjs'
 import { Fragment, FunctionComponent, useCallback, useEffect, useState } from 'react'
 import { usePremiumModal } from '@/Hooks/usePremiumModal'

app/assets/javascripts/Components/Preferences/Panes/General/Tools.tsx

@@ -1,7 +1,7 @@
 import HorizontalSeparator from '@/Components/Shared/HorizontalSeparator'
 import Switch from '@/Components/Switch/Switch'
 import { Subtitle, Text, Title } from '@/Components/Preferences/PreferencesComponents/Content'
-import { WebApplication } from '@/UIModels/Application'
+import { WebApplication } from '@/Application/Application'
 import { PrefKey } from '@standardnotes/snjs'
 import { observer } from 'mobx-react-lite'
 import { FunctionComponent, useState } from 'react'

app/assets/javascripts/Components/Preferences/Panes/Listed/Listed.tsx

@@ -1,6 +1,6 @@
 import { Title, Subtitle, Text } from '@/Components/Preferences/PreferencesComponents/Content'
 import { observer } from 'mobx-react-lite'
-import { WebApplication } from '@/UIModels/Application'
+import { WebApplication } from '@/Application/Application'
 import { ButtonType, ListedAccount } from '@standardnotes/snjs'
 import { useCallback, useEffect, useState } from 'react'
 import ListedAccountItem from './ListedAccountItem'

app/assets/javascripts/Components/Preferences/Panes/Listed/ListedAccountItem.tsx

@@ -1,6 +1,6 @@
 import HorizontalSeparator from '@/Components/Shared/HorizontalSeparator'
 import { LinkButton, Subtitle } from '@/Components/Preferences/PreferencesComponents/Content'
-import { WebApplication } from '@/UIModels/Application'
+import { WebApplication } from '@/Application/Application'
 import { ListedAccount, ListedAccountInfo } from '@standardnotes/snjs'
 import { FunctionComponent, useEffect, useState } from 'react'
 

app/assets/javascripts/Components/Preferences/Panes/Security/Encryption.tsx

@@ -1,5 +1,5 @@
 import { STRING_E2E_ENABLED, STRING_ENC_NOT_ENABLED, STRING_LOCAL_ENC_ENABLED } from '@/Strings'
-import { AppState } from '@/UIModels/AppState'
+import { ViewControllerManager } from '@/Services/ViewControllerManager'
 import { observer } from 'mobx-react-lite'
 import { FunctionComponent } from 'react'
 import { Title, Text } from '../../PreferencesComponents/Content'
@@ -7,10 +7,10 @@ import PreferencesGroup from '../../PreferencesComponents/PreferencesGroup'
 import PreferencesSegment from '../../PreferencesComponents/PreferencesSegment'
 import EncryptionEnabled from './EncryptionEnabled'
 
-type Props = { appState: AppState }
+type Props = { viewControllerManager: ViewControllerManager }
 
-const Encryption: FunctionComponent<Props> = ({ appState }) => {
-  const app = appState.application
+const Encryption: FunctionComponent<Props> = ({ viewControllerManager }) => {
+  const app = viewControllerManager.application
   const hasUser = app.hasAccount()
   const hasPasscode = app.hasPasscode()
   const isEncryptionEnabled = app.isEncryptionAvailable()
@@ -27,7 +27,7 @@ const Encryption: FunctionComponent<Props> = ({ appState }) => {
         <Title>Encryption</Title>
         <Text>{encryptionStatusString}</Text>
 
-        {isEncryptionEnabled && <EncryptionEnabled appState={appState} />}
+        {isEncryptionEnabled && <EncryptionEnabled viewControllerManager={viewControllerManager} />}
       </PreferencesSegment>
     </PreferencesGroup>
   )

app/assets/javascripts/Components/Preferences/Panes/Security/EncryptionEnabled.tsx

@@ -1,16 +1,16 @@
 import Icon from '@/Components/Icon/Icon'
-import { AppState } from '@/UIModels/AppState'
+import { ViewControllerManager } from '@/Services/ViewControllerManager'
 import { observer } from 'mobx-react-lite'
 import { FunctionComponent } from 'react'
 import EncryptionStatusItem from './EncryptionStatusItem'
 import { formatCount } from './formatCount'
 
 type Props = {
-  appState: AppState
+  viewControllerManager: ViewControllerManager
 }
 
-const EncryptionEnabled: FunctionComponent<Props> = ({ appState }) => {
-  const count = appState.accountMenu.structuredNotesAndTagsCount
+const EncryptionEnabled: FunctionComponent<Props> = ({ viewControllerManager }) => {
+  const count = viewControllerManager.accountMenuController.structuredNotesAndTagsCount
   const notes = formatCount(count.notes, 'notes')
   const tags = formatCount(count.tags, 'tags')
   const archived = formatCount(count.archived, 'archived notes')

app/assets/javascripts/Components/Preferences/Panes/Security/ErroredItems.tsx

@@ -1,4 +1,4 @@
-import { AppState } from '@/UIModels/AppState'
+import { ViewControllerManager } from '@/Services/ViewControllerManager'
 import { observer } from 'mobx-react-lite'
 import { Fragment, FunctionComponent, useState } from 'react'
 import { Text, Title, Subtitle } from '@/Components/Preferences/PreferencesComponents/Content'
@@ -13,10 +13,10 @@ import HorizontalSeparator from '@/Components/Shared/HorizontalSeparator'
 import PreferencesSegment from '../../PreferencesComponents/PreferencesSegment'
 import PreferencesGroup from '../../PreferencesComponents/PreferencesGroup'
 
-type Props = { appState: AppState }
+type Props = { viewControllerManager: ViewControllerManager }
 
-const ErroredItems: FunctionComponent<Props> = ({ appState }: Props) => {
-  const app = appState.application
+const ErroredItems: FunctionComponent<Props> = ({ viewControllerManager }: Props) => {
+  const app = viewControllerManager.application
 
   const [erroredItems, setErroredItems] = useState(app.items.invalidItems)
 

app/assets/javascripts/Components/Preferences/Panes/Security/PasscodeLock.tsx

@@ -8,13 +8,13 @@ import {
   StringUtils,
   Strings,
 } from '@/Strings'
-import { WebApplication } from '@/UIModels/Application'
+import { WebApplication } from '@/Application/Application'
 import { preventRefreshing } from '@/Utils'
 import { alertDialog } from '@/Services/AlertService'
 import { ChangeEventHandler, FormEvent, useCallback, useEffect, useRef, useState } from 'react'
 import { ApplicationEvent } from '@standardnotes/snjs'
 import { observer } from 'mobx-react-lite'
-import { AppState } from '@/UIModels/AppState'
+import { ViewControllerManager } from '@/Services/ViewControllerManager'
 import { Title, Text } from '@/Components/Preferences/PreferencesComponents/Content'
 import Button from '@/Components/Button/Button'
 import PreferencesGroup from '../../PreferencesComponents/PreferencesGroup'
@@ -22,14 +22,15 @@ import PreferencesSegment from '../../PreferencesComponents/PreferencesSegment'
 
 type Props = {
   application: WebApplication
-  appState: AppState
+  viewControllerManager: ViewControllerManager
 }
 
-const PasscodeLock = ({ application, appState }: Props) => {
+const PasscodeLock = ({ application, viewControllerManager }: Props) => {
   const keyStorageInfo = StringUtils.keyStorageInfo(application)
   const passcodeAutoLockOptions = application.getAutolockService().getAutoLockIntervalOptions()
 
-  const { setIsEncryptionEnabled, setIsBackupEncrypted, setEncryptionStatusString } = appState.accountMenu
+  const { setIsEncryptionEnabled, setIsBackupEncrypted, setEncryptionStatusString } =
+    viewControllerManager.accountMenuController
 
   const passcodeInputRef = useRef<HTMLInputElement>(null)
 

app/assets/javascripts/Components/Preferences/Panes/Security/Privacy.tsx

@@ -1,7 +1,7 @@
 import HorizontalSeparator from '@/Components/Shared/HorizontalSeparator'
 import Switch from '@/Components/Switch/Switch'
 import { Subtitle, Text, Title } from '@/Components/Preferences/PreferencesComponents/Content'
-import { WebApplication } from '@/UIModels/Application'
+import { WebApplication } from '@/Application/Application'
 import { MuteSignInEmailsOption, LogSessionUserAgentOption, SettingName } from '@standardnotes/snjs'
 import { observer } from 'mobx-react-lite'
 import { FunctionComponent, useCallback, useEffect, useState } from 'react'

app/assets/javascripts/Components/Preferences/Panes/Security/Protections.tsx

@@ -1,4 +1,4 @@
-import { WebApplication } from '@/UIModels/Application'
+import { WebApplication } from '@/Application/Application'
 import { FunctionComponent, useCallback, useState, useEffect } from 'react'
 import { ApplicationEvent } from '@standardnotes/snjs'
 import { isSameDay } from '@/Utils'

app/assets/javascripts/Components/Preferences/Panes/Security/Security.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 { FunctionComponent } from 'react'
 import TwoFactorAuthWrapper from '../TwoFactorAuth/TwoFactorAuthWrapper'
 import { MfaProps } from '../TwoFactorAuth/MfaProps'
@@ -11,17 +11,19 @@ import ErroredItems from './ErroredItems'
 import PreferencesPane from '@/Components/Preferences/PreferencesComponents/PreferencesPane'
 
 interface SecurityProps extends MfaProps {
-  appState: AppState
+  viewControllerManager: ViewControllerManager
   application: WebApplication
 }
 
 const Security: FunctionComponent<SecurityProps> = (props) => (
   <PreferencesPane>
-    <Encryption appState={props.appState} />
-    {props.application.items.invalidItems.length > 0 && <ErroredItems appState={props.appState} />}
+    <Encryption viewControllerManager={props.viewControllerManager} />
+    {props.application.items.invalidItems.length > 0 && (
+      <ErroredItems viewControllerManager={props.viewControllerManager} />
+    )}
     <Protections application={props.application} />
     <TwoFactorAuthWrapper mfaProvider={props.mfaProvider} userProvider={props.userProvider} />
-    <PasscodeLock appState={props.appState} application={props.application} />
+    <PasscodeLock viewControllerManager={props.viewControllerManager} application={props.application} />
     {props.application.getUser() && <Privacy application={props.application} />}
   </PreferencesPane>
 )

app/assets/javascripts/Components/Preferences/Panes/Security/securityPrefsHasBubble.tsx

@@ -1,4 +1,4 @@
-import { WebApplication } from '@/UIModels/Application'
+import { WebApplication } from '@/Application/Application'
 
 export const securityPrefsHasBubble = (application: WebApplication): boolean => {
   return application.items.invalidItems.length > 0

app/assets/javascripts/Components/Preferences/PreferencesMenu.ts

@@ -1,6 +1,6 @@
 import { action, makeAutoObservable, observable } from 'mobx'
 import { IconType } from '@standardnotes/snjs'
-import { WebApplication } from '@/UIModels/Application'
+import { WebApplication } from '@/Application/Application'
 import { ExtensionsLatestVersions } from './Panes/Extensions/ExtensionsLatestVersions'
 import { securityPrefsHasBubble } from './Panes/Security/securityPrefsHasBubble'
 

app/assets/javascripts/Components/Preferences/PreferencesProps.tsx

@@ -1,9 +1,9 @@
-import { WebApplication } from '@/UIModels/Application'
+import { WebApplication } from '@/Application/Application'
 import { MfaProps } from './Panes/TwoFactorAuth/MfaProps'
-import { AppState } from '@/UIModels/AppState'
+import { ViewControllerManager } from '@/Services/ViewControllerManager'
 
 export interface PreferencesProps extends MfaProps {
   application: WebApplication
-  appState: AppState
+  viewControllerManager: ViewControllerManager
   closePreferences: () => void
 }

app/assets/javascripts/Components/Preferences/PreferencesView.tsx

@@ -9,12 +9,12 @@ import { PreferencesProps } from './PreferencesProps'
 
 const PreferencesView: FunctionComponent<PreferencesProps> = (props) => {
   const menu = useMemo(
-    () => new PreferencesMenu(props.application, props.appState.enableUnfinishedFeatures),
-    [props.appState.enableUnfinishedFeatures, props.application],
+    () => new PreferencesMenu(props.application, props.viewControllerManager.enableUnfinishedFeatures),
+    [props.viewControllerManager.enableUnfinishedFeatures, props.application],
   )
 
   useEffect(() => {
-    menu.selectPane(props.appState.preferences.currentPane)
+    menu.selectPane(props.viewControllerManager.preferencesController.currentPane)
     const removeEscKeyObserver = props.application.io.addKeyObserver({
       key: 'Escape',
       onKeyDown: (event) => {

app/assets/javascripts/Components/Preferences/PreferencesViewWrapper.tsx

@@ -3,16 +3,19 @@ import { observer } from 'mobx-react-lite'
 import PreferencesView from './PreferencesView'
 import { PreferencesViewWrapperProps } from './PreferencesViewWrapperProps'
 
-const PreferencesViewWrapper: FunctionComponent<PreferencesViewWrapperProps> = ({ appState, application }) => {
-  if (!appState.preferences?.isOpen) {
+const PreferencesViewWrapper: FunctionComponent<PreferencesViewWrapperProps> = ({
+  viewControllerManager,
+  application,
+}) => {
+  if (!viewControllerManager.preferencesController?.isOpen) {
     return null
   }
 
   return (
     <PreferencesView
-      closePreferences={() => appState.preferences.closePreferences()}
+      closePreferences={() => viewControllerManager.preferencesController.closePreferences()}
       application={application}
-      appState={appState}
+      viewControllerManager={viewControllerManager}
       mfaProvider={application}
       userProvider={application}
     />

app/assets/javascripts/Components/Preferences/PreferencesViewWrapperProps.tsx

@@ -1,7 +1,7 @@
-import { WebApplication } from '@/UIModels/Application'
-import { AppState } from '@/UIModels/AppState'
+import { WebApplication } from '@/Application/Application'
+import { ViewControllerManager } from '@/Services/ViewControllerManager'
 
 export interface PreferencesViewWrapperProps {
-  appState: AppState
+  viewControllerManager: ViewControllerManager
   application: WebApplication
 }