refactor: rename states to view controllers (#1060)

app/assets/javascripts/Components/ContentListView/ContentList.tsx

@@ -1,6 +1,6 @@
-import { WebApplication } from '@/UIModels/Application'
+import { WebApplication } from '@/Application/Application'
 import { KeyboardKey } from '@/Services/IOService'
-import { AppState } from '@/UIModels/AppState'
+import { ViewControllerManager } from '@/Services/ViewControllerManager'
 import { UuidString } from '@standardnotes/snjs'
 import { observer } from 'mobx-react-lite'
 import { FunctionComponent, KeyboardEventHandler, UIEventHandler, useCallback } from 'react'
@@ -10,16 +10,23 @@ import ContentListItem from './ContentListItem'
 
 type Props = {
   application: WebApplication
-  appState: AppState
+  viewControllerManager: ViewControllerManager
   items: ListableContentItem[]
   selectedItems: Record<UuidString, ListableContentItem>
   paginate: () => void
 }
 
-const ContentList: FunctionComponent<Props> = ({ application, appState, items, selectedItems, paginate }) => {
-  const { selectPreviousItem, selectNextItem } = appState.contentListView
-  const { hideTags, hideDate, hideNotePreview, hideEditorIcon } = appState.contentListView.webDisplayOptions
-  const { sortBy } = appState.contentListView.displayOptions
+const ContentList: FunctionComponent<Props> = ({
+  application,
+  viewControllerManager,
+  items,
+  selectedItems,
+  paginate,
+}) => {
+  const { selectPreviousItem, selectNextItem } = viewControllerManager.contentListController
+  const { hideTags, hideDate, hideNotePreview, hideEditorIcon } =
+    viewControllerManager.contentListController.webDisplayOptions
+  const { sortBy } = viewControllerManager.contentListController.displayOptions
 
   const onScroll: UIEventHandler = useCallback(
     (e) => {
@@ -57,7 +64,7 @@ const ContentList: FunctionComponent<Props> = ({ application, appState, items, s
         <ContentListItem
           key={item.uuid}
           application={application}
-          appState={appState}
+          viewControllerManager={viewControllerManager}
           item={item}
           selected={!!selectedItems[item.uuid]}
           hideDate={hideDate}

app/assets/javascripts/Components/ContentListView/ContentListItem.tsx

@@ -10,12 +10,12 @@ const ContentListItem: FunctionComponent<AbstractListItemProps> = (props) => {
       return []
     }
 
-    const selectedTag = props.appState.tags.selected
+    const selectedTag = props.viewControllerManager.navigationController.selected
     if (!selectedTag) {
       return []
     }
 
-    const tags = props.appState.getItemTags(props.item)
+    const tags = props.viewControllerManager.getItemTags(props.item)
 
     const isNavigatingOnlyTag = selectedTag instanceof SNTag && tags.length === 1
     if (isNavigatingOnlyTag) {

app/assets/javascripts/Components/ContentListView/ContentListOptionsMenu.tsx

@@ -1,4 +1,4 @@
-import { WebApplication } from '@/UIModels/Application'
+import { WebApplication } from '@/Application/Application'
 import { CollectionSort, CollectionSortProperty, PrefKey, SystemViewId } from '@standardnotes/snjs'
 import { observer } from 'mobx-react-lite'
 import { FunctionComponent, useCallback, useState } from 'react'
@@ -7,11 +7,11 @@ import Menu from '@/Components/Menu/Menu'
 import MenuItem from '@/Components/Menu/MenuItem'
 import MenuItemSeparator from '@/Components/Menu/MenuItemSeparator'
 import { MenuItemType } from '@/Components/Menu/MenuItemType'
-import { AppState } from '@/UIModels/AppState'
+import { ViewControllerManager } from '@/Services/ViewControllerManager'
 
 type Props = {
   application: WebApplication
-  appState: AppState
+  viewControllerManager: ViewControllerManager
   closeOnBlur: (event: { relatedTarget: EventTarget | null }) => void
   closeDisplayOptionsMenu: () => void
   isOpen: boolean
@@ -21,7 +21,7 @@ const ContentListOptionsMenu: FunctionComponent<Props> = ({
   closeDisplayOptionsMenu,
   closeOnBlur,
   application,
-  appState,
+  viewControllerManager,
   isOpen,
 }) => {
   const [sortBy, setSortBy] = useState(() => application.getPreference(PrefKey.SortNotesBy, CollectionSort.CreatedAt))
@@ -174,7 +174,7 @@ const ContentListOptionsMenu: FunctionComponent<Props> = ({
       </MenuItem>
       <MenuItemSeparator />
       <div className="px-3 py-1 text-xs font-semibold color-text uppercase">View</div>
-      {appState.tags.selectedUuid !== SystemViewId.Files && (
+      {viewControllerManager.navigationController.selectedUuid !== SystemViewId.Files && (
         <MenuItem
           type={MenuItemType.SwitchButton}
           className="py-1 hover:bg-contrast focus:bg-info-backdrop"

app/assets/javascripts/Components/ContentListView/ContentListView.tsx

@@ -1,6 +1,6 @@
 import { KeyboardKey, KeyboardModifier } from '@/Services/IOService'
-import { WebApplication } from '@/UIModels/Application'
-import { AppState } from '@/UIModels/AppState'
+import { WebApplication } from '@/Application/Application'
+import { ViewControllerManager } from '@/Services/ViewControllerManager'
 import { PANEL_NAME_NOTES } from '@/Constants'
 import { PrefKey, SystemViewId } from '@standardnotes/snjs'
 import { observer } from 'mobx-react-lite'
@@ -24,10 +24,10 @@ import ContentListOptionsMenu from './ContentListOptionsMenu'
 
 type Props = {
   application: WebApplication
-  appState: AppState
+  viewControllerManager: ViewControllerManager
 }
 
-const ContentListView: FunctionComponent<Props> = ({ application, appState }) => {
+const ContentListView: FunctionComponent<Props> = ({ application, viewControllerManager }) => {
   const itemsViewPanelRef = useRef<HTMLDivElement>(null)
   const displayOptionsMenuRef = useRef<HTMLDivElement>(null)
 
@@ -46,9 +46,9 @@ const ContentListView: FunctionComponent<Props> = ({ application, appState }) =>
     paginate,
     panelWidth,
     createNewNote,
-  } = appState.contentListView
+  } = viewControllerManager.contentListController
 
-  const { selectedItems } = appState.selectedItems
+  const { selectedItems } = viewControllerManager.selectionController
 
   const [showDisplayOptionsMenu, setShowDisplayOptionsMenu] = useState(false)
   const [focusedSearch, setFocusedSearch] = useState(false)
@@ -56,17 +56,17 @@ const ContentListView: FunctionComponent<Props> = ({ application, appState }) =>
   const [closeDisplayOptMenuOnBlur] = useCloseOnBlur(displayOptionsMenuRef, setShowDisplayOptionsMenu)
 
   const isFilesSmartView = useMemo(
-    () => appState.tags.selected?.uuid === SystemViewId.Files,
-    [appState.tags.selected?.uuid],
+    () => viewControllerManager.navigationController.selected?.uuid === SystemViewId.Files,
+    [viewControllerManager.navigationController.selected?.uuid],
   )
 
   const addNewItem = useCallback(() => {
     if (isFilesSmartView) {
-      void appState.files.uploadNewFile()
+      void viewControllerManager.filesController.uploadNewFile()
     } else {
       void createNewNote()
     }
-  }, [appState.files, createNewNote, isFilesSmartView])
+  }, [viewControllerManager.filesController, createNewNote, isFilesSmartView])
 
   useEffect(() => {
     /**
@@ -142,15 +142,15 @@ const ContentListView: FunctionComponent<Props> = ({ application, appState }) =>
   const panelResizeFinishCallback: ResizeFinishCallback = useCallback(
     (width, _lastLeft, _isMaxWidth, isCollapsed) => {
       application.setPreference(PrefKey.NotesPanelWidth, width).catch(console.error)
-      appState.noteTags.reloadTagsContainerMaxWidth()
-      appState.panelDidResize(PANEL_NAME_NOTES, isCollapsed)
+      viewControllerManager.noteTagsController.reloadTagsContainerMaxWidth()
+      viewControllerManager.panelDidResize(PANEL_NAME_NOTES, isCollapsed)
     },
-    [appState, application],
+    [viewControllerManager, application],
   )
 
   const panelWidthEventCallback = useCallback(() => {
-    appState.noteTags.reloadTagsContainerMaxWidth()
-  }, [appState])
+    viewControllerManager.noteTagsController.reloadTagsContainerMaxWidth()
+  }, [viewControllerManager])
 
   const toggleDisplayOptionsMenu = useCallback(() => {
     setShowDisplayOptionsMenu(!showDisplayOptionsMenu)
@@ -208,11 +208,11 @@ const ContentListView: FunctionComponent<Props> = ({ application, appState }) =>
 
               {(focusedSearch || noteFilterText) && (
                 <div className="animate-fade-from-top">
-                  <SearchOptions application={application} appState={appState} />
+                  <SearchOptions application={application} viewControllerManager={viewControllerManager} />
                 </div>
               )}
             </div>
-            <NoAccountWarningWrapper appState={appState} />
+            <NoAccountWarningWrapper viewControllerManager={viewControllerManager} />
           </div>
           <div id="items-menu-bar" className="sn-component" ref={displayOptionsMenuRef}>
             <div className="sk-app-bar no-edges">
@@ -235,7 +235,7 @@ const ContentListView: FunctionComponent<Props> = ({ application, appState }) =>
                     {showDisplayOptionsMenu && (
                       <ContentListOptionsMenu
                         application={application}
-                        appState={appState}
+                        viewControllerManager={viewControllerManager}
                         closeDisplayOptionsMenu={toggleDisplayOptionsMenu}
                         closeOnBlur={closeDisplayOptMenuOnBlur}
                         isOpen={showDisplayOptionsMenu}
@@ -254,7 +254,7 @@ const ContentListView: FunctionComponent<Props> = ({ application, appState }) =>
             items={renderedItems}
             selectedItems={selectedItems}
             application={application}
-            appState={appState}
+            viewControllerManager={viewControllerManager}
             paginate={paginate}
           />
         ) : null}

app/assets/javascripts/Components/ContentListView/FileListItem.tsx

@@ -10,7 +10,7 @@ import { DisplayableListItemProps } from './Types/DisplayableListItemProps'
 
 const FileListItem: FunctionComponent<DisplayableListItemProps> = ({
   application,
-  appState,
+  viewControllerManager,
   hideDate,
   hideIcon,
   hideTags,
@@ -21,32 +21,40 @@ const FileListItem: FunctionComponent<DisplayableListItemProps> = ({
 }) => {
   const openFileContextMenu = useCallback(
     (posX: number, posY: number) => {
-      appState.files.setFileContextMenuLocation({
+      viewControllerManager.filesController.setFileContextMenuLocation({
         x: posX,
         y: posY,
       })
-      appState.files.setShowFileContextMenu(true)
+      viewControllerManager.filesController.setShowFileContextMenu(true)
     },
-    [appState.files],
+    [viewControllerManager.filesController],
   )
 
   const openContextMenu = useCallback(
     async (posX: number, posY: number) => {
-      const { didSelect } = await appState.selectedItems.selectItem(item.uuid)
+      const { didSelect } = await viewControllerManager.selectionController.selectItem(item.uuid)
       if (didSelect) {
         openFileContextMenu(posX, posY)
       }
     },
-    [appState.selectedItems, item.uuid, openFileContextMenu],
+    [viewControllerManager.selectionController, item.uuid, openFileContextMenu],
   )
 
   const onClick = useCallback(() => {
-    void appState.selectedItems.selectItem(item.uuid, true).then(({ didSelect }) => {
-      if (didSelect && appState.selectedItems.selectedItemsCount < 2) {
-        appState.filePreviewModal.activate(item as FileItem, appState.files.allFiles)
+    void viewControllerManager.selectionController.selectItem(item.uuid, true).then(({ didSelect }) => {
+      if (didSelect && viewControllerManager.selectionController.selectedItemsCount < 2) {
+        viewControllerManager.filePreviewModalController.activate(
+          item as FileItem,
+          viewControllerManager.filesController.allFiles,
+        )
       }
     })
-  }, [appState.filePreviewModal, appState.files.allFiles, appState.selectedItems, item])
+  }, [
+    viewControllerManager.filePreviewModalController,
+    viewControllerManager.filesController.allFiles,
+    viewControllerManager.selectionController,
+    item,
+  ])
 
   const IconComponent = () =>
     getFileIconComponent(

app/assets/javascripts/Components/ContentListView/NoteListItem.tsx

@@ -11,7 +11,7 @@ import { DisplayableListItemProps } from './Types/DisplayableListItemProps'
 
 const NoteListItem: FunctionComponent<DisplayableListItemProps> = ({
   application,
-  appState,
+  viewControllerManager,
   hideDate,
   hideIcon,
   hideTags,
@@ -27,16 +27,16 @@ const NoteListItem: FunctionComponent<DisplayableListItemProps> = ({
   const hasFiles = application.items.getFilesForNote(item as SNNote).length > 0
 
   const openNoteContextMenu = (posX: number, posY: number) => {
-    appState.notes.setContextMenuClickLocation({
+    viewControllerManager.notesController.setContextMenuClickLocation({
       x: posX,
       y: posY,
     })
-    appState.notes.reloadContextMenuLayout()
-    appState.notes.setContextMenuOpen(true)
+    viewControllerManager.notesController.reloadContextMenuLayout()
+    viewControllerManager.notesController.setContextMenuOpen(true)
   }
 
   const openContextMenu = async (posX: number, posY: number) => {
-    const { didSelect } = await appState.selectedItems.selectItem(item.uuid, true)
+    const { didSelect } = await viewControllerManager.selectionController.selectItem(item.uuid, true)
     if (didSelect) {
       openNoteContextMenu(posX, posY)
     }
@@ -49,7 +49,7 @@ const NoteListItem: FunctionComponent<DisplayableListItemProps> = ({
       }`}
       id={item.uuid}
       onClick={() => {
-        void appState.selectedItems.selectItem(item.uuid, true)
+        void viewControllerManager.selectionController.selectItem(item.uuid, true)
       }}
       onContextMenu={(event) => {
         event.preventDefault()

app/assets/javascripts/Components/ContentListView/Types/AbstractListItemProps.ts

@@ -1,11 +1,11 @@
-import { WebApplication } from '@/UIModels/Application'
-import { AppState } from '@/UIModels/AppState'
+import { WebApplication } from '@/Application/Application'
+import { ViewControllerManager } from '@/Services/ViewControllerManager'
 import { SortableItem } from '@standardnotes/snjs'
 import { ListableContentItem } from './ListableContentItem'
 
 export type AbstractListItemProps = {
   application: WebApplication
-  appState: AppState
+  viewControllerManager: ViewControllerManager
   hideDate: boolean
   hideIcon: boolean
   hideTags: boolean