refactor: history modal (#1122)

2022-06-20 17:50:00 +05:30
parent 71463a9821
commit affe7247ba
28 changed files with 771 additions and 637 deletions
--- a/packages/web/src/javascripts/Components/ApplicationView/ApplicationView.tsx
+++ b/packages/web/src/javascripts/Components/ApplicationView/ApplicationView.tsx
@@ -14,7 +14,7 @@ import ChallengeModal from '@/Components/ChallengeModal/ChallengeModal'
 import NotesContextMenu from '@/Components/NotesContextMenu/NotesContextMenu'
 import PurchaseFlowWrapper from '@/Components/PurchaseFlow/PurchaseFlowWrapper'
 import { FunctionComponent, useCallback, useEffect, useMemo, useState } from 'react'
-import RevisionHistoryModalWrapper from '@/Components/RevisionHistoryModal/RevisionHistoryModalWrapper'
+import RevisionHistoryModal from '@/Components/RevisionHistoryModal/RevisionHistoryModal'
 import PremiumModalProvider from '@/Hooks/usePremiumModal'
 import ConfirmSignoutContainer from '@/Components/ConfirmSignoutModal/ConfirmSignoutModal'
 import TagsContextMenuWrapper from '@/Components/Tags/TagContextMenu'
@@ -196,7 +196,13 @@ const ApplicationView: FunctionComponent<Props> = ({ application, mainApplicatio
          <Footer application={application} applicationGroup={mainApplicationGroup} />
          <SessionsModal application={application} viewControllerManager={viewControllerManager} />
          <PreferencesViewWrapper viewControllerManager={viewControllerManager} application={application} />
-          <RevisionHistoryModalWrapper application={application} viewControllerManager={viewControllerManager} />
+          <RevisionHistoryModal
+            application={application}
+            historyModalController={viewControllerManager.historyModalController}
+            notesController={viewControllerManager.notesController}
+            selectionController={viewControllerManager.selectionController}
+            subscriptionController={viewControllerManager.subscriptionController}
+          />
        </>

        {renderChallenges()}
@@ -207,6 +213,7 @@ const ApplicationView: FunctionComponent<Props> = ({ application, mainApplicatio
            navigationController={viewControllerManager.navigationController}
            notesController={viewControllerManager.notesController}
            noteTagsController={viewControllerManager.noteTagsController}
+            historyModalController={viewControllerManager.historyModalController}
          />
          <TagsContextMenuWrapper viewControllerManager={viewControllerManager} />
          <FileContextMenuWrapper
--- a/packages/web/src/javascripts/Components/ComponentView/ComponentView.tsx
+++ b/packages/web/src/javascripts/Components/ComponentView/ComponentView.tsx
@@ -15,12 +15,10 @@ import UrlMissing from '@/Components/ComponentView/UrlMissing'
 import IsDeprecated from '@/Components/ComponentView/IsDeprecated'
 import IsExpired from '@/Components/ComponentView/IsExpired'
 import IssueOnLoading from '@/Components/ComponentView/IssueOnLoading'
-import { ViewControllerManager } from '@/Services/ViewControllerManager'
 import { openSubscriptionDashboard } from '@/Utils/ManageSubscription'

 interface IProps {
  application: WebApplication
-  viewControllerManager: ViewControllerManager
  componentViewer: ComponentViewer
  requestReload?: (viewer: ComponentViewer, force?: boolean) => void
  onLoad?: (component: SNComponent) => void
--- a/packages/web/src/javascripts/Components/MultipleSelectedNotes/MultipleSelectedNotes.tsx
+++ b/packages/web/src/javascripts/Components/MultipleSelectedNotes/MultipleSelectedNotes.tsx
@@ -13,6 +13,7 @@ import { NavigationController } from '@/Controllers/Navigation/NavigationControl
 import { NotesController } from '@/Controllers/NotesController'
 import { SelectedItemsController } from '@/Controllers/SelectedItemsController'
 import { NoteTagsController } from '@/Controllers/NoteTagsController'
+import { HistoryModalController } from '@/Controllers/NoteHistory/HistoryModalController'

 type Props = {
  application: WebApplication
@@ -23,6 +24,7 @@ type Props = {
  notesController: NotesController
  noteTagsController: NoteTagsController
  selectionController: SelectedItemsController
+  historyModalController: HistoryModalController
 }

 const MultipleSelectedNotes = ({
@@ -34,6 +36,7 @@ const MultipleSelectedNotes = ({
  notesController,
  noteTagsController,
  selectionController,
+  historyModalController,
 }: Props) => {
  const count = notesController.selectedNotesCount

@@ -65,6 +68,7 @@ const MultipleSelectedNotes = ({
            navigationController={navigationController}
            notesController={notesController}
            noteTagsController={noteTagsController}
+            historyModalController={historyModalController}
          />
        </div>
      </div>
--- a/packages/web/src/javascripts/Components/NoteGroupView/NoteGroupView.tsx
+++ b/packages/web/src/javascripts/Components/NoteGroupView/NoteGroupView.tsx
@@ -92,6 +92,7 @@ class NoteGroupView extends PureComponent<Props, State> {
            navigationController={this.viewControllerManager.navigationController}
            notesController={this.viewControllerManager.notesController}
            noteTagsController={this.viewControllerManager.noteTagsController}
+            historyModalController={this.viewControllerManager.historyModalController}
          />
        )}

--- a/packages/web/src/javascripts/Components/NoteView/NoteView.tsx
+++ b/packages/web/src/javascripts/Components/NoteView/NoteView.tsx
@@ -971,6 +971,7 @@ class NoteView extends PureComponent<NoteViewProps, State> {
                    navigationController={this.viewControllerManager.navigationController}
                    notesController={this.viewControllerManager.notesController}
                    noteTagsController={this.viewControllerManager.noteTagsController}
+                    historyModalController={this.viewControllerManager.historyModalController}
                    onClickPreprocessing={this.ensureNoteIsInsertedBeforeUIAction}
                  />
                </div>
@@ -1002,7 +1003,6 @@ class NoteView extends PureComponent<NoteViewProps, State> {
                  onLoad={this.onEditorComponentLoad}
                  requestReload={this.editorComponentViewerRequestsReload}
                  application={this.application}
-                  viewControllerManager={this.viewControllerManager}
                />
              </div>
            )}
@@ -1073,12 +1073,7 @@ class NoteView extends PureComponent<NoteViewProps, State> {
              {this.state.stackComponentViewers.map((viewer) => {
                return (
                  <div className="component-view component-stack-item" key={viewer.identifier}>
-                    <ComponentView
-                      key={viewer.identifier}
-                      componentViewer={viewer}
-                      application={this.application}
-                      viewControllerManager={this.viewControllerManager}
-                    />
+                    <ComponentView key={viewer.identifier} componentViewer={viewer} application={this.application} />
                  </div>
                )
              })}
--- a/packages/web/src/javascripts/Components/NotesContextMenu/NotesContextMenu.tsx
+++ b/packages/web/src/javascripts/Components/NotesContextMenu/NotesContextMenu.tsx
@@ -7,15 +7,23 @@ import { WebApplication } from '@/Application/Application'
 import { NotesController } from '@/Controllers/NotesController'
 import { NavigationController } from '@/Controllers/Navigation/NavigationController'
 import { NoteTagsController } from '@/Controllers/NoteTagsController'
+import { HistoryModalController } from '@/Controllers/NoteHistory/HistoryModalController'

 type Props = {
  application: WebApplication
  navigationController: NavigationController
  notesController: NotesController
  noteTagsController: NoteTagsController
+  historyModalController: HistoryModalController
 }

-const NotesContextMenu = ({ application, navigationController, notesController, noteTagsController }: Props) => {
+const NotesContextMenu = ({
+  application,
+  navigationController,
+  notesController,
+  noteTagsController,
+  historyModalController,
+}: Props) => {
  const { contextMenuOpen, contextMenuPosition, contextMenuMaxHeight } = notesController

  const contextMenuRef = useRef<HTMLDivElement>(null)
@@ -49,6 +57,7 @@ const NotesContextMenu = ({ application, navigationController, notesController,
        navigationController={navigationController}
        notesController={notesController}
        noteTagsController={noteTagsController}
+        historyModalController={historyModalController}
      />
    </div>
  ) : null
--- a/packages/web/src/javascripts/Components/NotesOptions/NotesOptions.tsx
+++ b/packages/web/src/javascripts/Components/NotesOptions/NotesOptions.tsx
@@ -174,6 +174,7 @@ const NotesOptions = ({
  navigationController,
  notesController,
  noteTagsController,
+  historyModalController,
  closeOnBlur,
 }: NotesOptionsProps) => {
  const [altKeyDown, setAltKeyDown] = useState(false)
@@ -259,8 +260,8 @@ const NotesOptions = ({
  }, [application, notes])

  const openRevisionHistoryModal = useCallback(() => {
-    notesController.setShowRevisionHistoryModal(true)
-  }, [notesController])
+    historyModalController.openModal(notesController.firstSelectedNote)
+  }, [historyModalController, notesController.firstSelectedNote])

  return (
    <>
--- a/packages/web/src/javascripts/Components/NotesOptions/NotesOptionsPanel.tsx
+++ b/packages/web/src/javascripts/Components/NotesOptions/NotesOptionsPanel.tsx
@@ -10,12 +10,14 @@ import { FOCUSABLE_BUT_NOT_TABBABLE } from '@/Constants/Constants'
 import { NotesController } from '@/Controllers/NotesController'
 import { NavigationController } from '@/Controllers/Navigation/NavigationController'
 import { NoteTagsController } from '@/Controllers/NoteTagsController'
+import { HistoryModalController } from '@/Controllers/NoteHistory/HistoryModalController'

 type Props = {
  application: WebApplication
  navigationController: NavigationController
  notesController: NotesController
  noteTagsController: NoteTagsController
+  historyModalController: HistoryModalController
  onClickPreprocessing?: () => Promise<void>
 }

@@ -24,6 +26,7 @@ const NotesOptionsPanel = ({
  navigationController,
  notesController,
  noteTagsController,
+  historyModalController,
  onClickPreprocessing,
 }: Props) => {
  const [open, setOpen] = useState(false)
@@ -95,6 +98,7 @@ const NotesOptionsPanel = ({
            navigationController={navigationController}
            notesController={notesController}
            noteTagsController={noteTagsController}
+            historyModalController={historyModalController}
            closeOnBlur={closeOnBlur}
          />
        )}
--- a/packages/web/src/javascripts/Components/NotesOptions/NotesOptionsProps.ts
+++ b/packages/web/src/javascripts/Components/NotesOptions/NotesOptionsProps.ts
@@ -1,4 +1,5 @@
 import { WebApplication } from '@/Application/Application'
+import { HistoryModalController } from '@/Controllers/NoteHistory/HistoryModalController'
 import { NavigationController } from '@/Controllers/Navigation/NavigationController'
 import { NotesController } from '@/Controllers/NotesController'
 import { NoteTagsController } from '@/Controllers/NoteTagsController'
@@ -8,5 +9,6 @@ export type NotesOptionsProps = {
  navigationController: NavigationController
  notesController: NotesController
  noteTagsController: NoteTagsController
+  historyModalController: HistoryModalController
  closeOnBlur: (event: { relatedTarget: EventTarget | null }) => void
 }
--- a/packages/web/src/javascripts/Components/RevisionHistoryModal/HistoryListContainer.tsx
+++ b/packages/web/src/javascripts/Components/RevisionHistoryModal/HistoryListContainer.tsx
@@ -1,75 +1,24 @@
-import { WebApplication } from '@/Application/Application'
-import { Action, ActionVerb, HistoryEntry, NoteHistoryEntry, RevisionListEntry, SNNote } from '@standardnotes/snjs'
+import { NoteHistoryController } from '@/Controllers/NoteHistory/NoteHistoryController'
+import { FeaturesClientInterface } from '@standardnotes/snjs'
 import { observer } from 'mobx-react-lite'
-import { FunctionComponent, useCallback, useState, useEffect, SetStateAction, Dispatch } from 'react'
+import { FunctionComponent } from 'react'
 import LegacyHistoryList from './LegacyHistoryList'
 import RemoteHistoryList from './RemoteHistoryList'
+import { RevisionType } from './RevisionType'
 import SessionHistoryList from './SessionHistoryList'
-import { LegacyHistoryEntry, RemoteRevisionListGroup, sortRevisionListIntoGroups } from './utils'
-
-export enum RevisionListTabType {
-  Session = 'Session',
-  Remote = 'Remote',
-  Legacy = 'Legacy',
-}

 type Props = {
-  application: WebApplication
-  isFetchingRemoteHistory: boolean
-  note: SNNote
-  remoteHistory: RemoteRevisionListGroup[] | undefined
-  setIsFetchingSelectedRevision: Dispatch<SetStateAction<boolean>>
-  setSelectedRemoteEntry: Dispatch<SetStateAction<RevisionListEntry | undefined>>
-  setSelectedRevision: Dispatch<SetStateAction<HistoryEntry | LegacyHistoryEntry | undefined>>
-  setShowContentLockedScreen: Dispatch<SetStateAction<boolean>>
+  features: FeaturesClientInterface
+  noteHistoryController: NoteHistoryController
 }

-const HistoryListContainer: FunctionComponent<Props> = ({
-  application,
-  isFetchingRemoteHistory,
-  note,
-  remoteHistory,
-  setIsFetchingSelectedRevision,
-  setSelectedRemoteEntry,
-  setSelectedRevision,
-  setShowContentLockedScreen,
-}) => {
-  const sessionHistory = sortRevisionListIntoGroups<NoteHistoryEntry>(
-    application.historyManager.sessionHistoryForItem(note) as NoteHistoryEntry[],
-  )
-  const [legacyHistory, setLegacyHistory] = useState<Action[]>()
-
-  const [selectedTab, setSelectedTab] = useState<RevisionListTabType>(RevisionListTabType.Remote)
-
-  useEffect(() => {
-    const fetchLegacyHistory = async () => {
-      const actionExtensions = application.actionsManager.getExtensions()
-      actionExtensions.forEach(async (ext) => {
-        const actionExtension = await application.actionsManager.loadExtensionInContextOfItem(ext, note)
-
-        if (!actionExtension) {
-          return
-        }
-
-        const isLegacyNoteHistoryExt = actionExtension?.actions.some((action) => action.verb === ActionVerb.Nested)
-
-        if (!isLegacyNoteHistoryExt) {
-          return
-        }
-
-        const legacyHistoryEntries = actionExtension.actions.filter((action) => action.subactions?.[0])
-
-        setLegacyHistory(legacyHistoryEntries)
-      })
-    }
-
-    fetchLegacyHistory().catch(console.error)
-  }, [application, note])
+const HistoryListContainer: FunctionComponent<Props> = ({ features, noteHistoryController }) => {
+  const { legacyHistory, currentTab, selectTab } = noteHistoryController

  const TabButton: FunctionComponent<{
-    type: RevisionListTabType
+    type: RevisionType
  }> = ({ type }) => {
-    const isSelected = selectedTab === type
+    const isSelected = currentTab === type

    return (
      <button
@@ -77,8 +26,7 @@ const HistoryListContainer: FunctionComponent<Props> = ({
          isSelected ? 'color-info font-medium shadow-bottom' : 'color-text'
        }`}
        onClick={() => {
-          setSelectedTab(type)
-          setSelectedRemoteEntry(undefined)
+          selectTab(type)
        }}
      >
        {type}
@@ -86,98 +34,26 @@ const HistoryListContainer: FunctionComponent<Props> = ({
    )
  }

-  const fetchAndSetLegacyRevision = useCallback(
-    async (revisionListEntry: Action) => {
-      setSelectedRemoteEntry(undefined)
-      setSelectedRevision(undefined)
-      setIsFetchingSelectedRevision(true)
-
-      try {
-        if (!revisionListEntry.subactions?.[0]) {
-          throw new Error('Could not find revision action url')
-        }
-
-        const response = await application.actionsManager.runAction(revisionListEntry.subactions[0], note)
-
-        if (!response) {
-          throw new Error('Could not fetch revision')
-        }
-
-        setSelectedRevision(response.item as unknown as HistoryEntry)
-      } catch (error) {
-        console.error(error)
-        setSelectedRevision(undefined)
-      } finally {
-        setIsFetchingSelectedRevision(false)
-      }
-    },
-    [application.actionsManager, note, setIsFetchingSelectedRevision, setSelectedRemoteEntry, setSelectedRevision],
-  )
-
-  const fetchAndSetRemoteRevision = useCallback(
-    async (revisionListEntry: RevisionListEntry) => {
-      setShowContentLockedScreen(false)
-
-      if (application.features.hasMinimumRole(revisionListEntry.required_role)) {
-        setIsFetchingSelectedRevision(true)
-        setSelectedRevision(undefined)
-        setSelectedRemoteEntry(undefined)
-
-        try {
-          const remoteRevision = await application.historyManager.fetchRemoteRevision(note, revisionListEntry)
-          setSelectedRevision(remoteRevision)
-          setSelectedRemoteEntry(revisionListEntry)
-        } catch (err) {
-          console.error(err)
-        } finally {
-          setIsFetchingSelectedRevision(false)
-        }
-      } else {
-        setShowContentLockedScreen(true)
-        setSelectedRevision(undefined)
-      }
-    },
-    [
-      application,
-      note,
-      setIsFetchingSelectedRevision,
-      setSelectedRemoteEntry,
-      setSelectedRevision,
-      setShowContentLockedScreen,
-    ],
-  )
+  const CurrentTabList = () => {
+    switch (currentTab) {
+      case RevisionType.Remote:
+        return <RemoteHistoryList features={features} noteHistoryController={noteHistoryController} />
+      case RevisionType.Session:
+        return <SessionHistoryList noteHistoryController={noteHistoryController} />
+      case RevisionType.Legacy:
+        return <LegacyHistoryList legacyHistory={legacyHistory} noteHistoryController={noteHistoryController} />
+    }
+  }

  return (
    <div className={'flex flex-col min-w-60 border-0 border-r-1px border-solid border-main overflow-auto h-full'}>
      <div className="flex border-0 border-b-1 border-solid border-main">
-        <TabButton type={RevisionListTabType.Remote} />
-        <TabButton type={RevisionListTabType.Session} />
-        {legacyHistory && legacyHistory.length > 0 && <TabButton type={RevisionListTabType.Legacy} />}
+        <TabButton type={RevisionType.Remote} />
+        <TabButton type={RevisionType.Session} />
+        {legacyHistory && legacyHistory.length > 0 && <TabButton type={RevisionType.Legacy} />}
      </div>
      <div className={'min-h-0 overflow-auto py-1.5 h-full'}>
-        {selectedTab === RevisionListTabType.Session && (
-          <SessionHistoryList
-            sessionHistory={sessionHistory}
-            setSelectedRevision={setSelectedRevision}
-            setSelectedRemoteEntry={setSelectedRemoteEntry}
-          />
-        )}
-        {selectedTab === RevisionListTabType.Remote && (
-          <RemoteHistoryList
-            application={application}
-            remoteHistory={remoteHistory}
-            isFetchingRemoteHistory={isFetchingRemoteHistory}
-            fetchAndSetRemoteRevision={fetchAndSetRemoteRevision}
-          />
-        )}
-        {selectedTab === RevisionListTabType.Legacy && (
-          <LegacyHistoryList
-            legacyHistory={legacyHistory}
-            setSelectedRevision={setSelectedRevision}
-            setSelectedRemoteEntry={setSelectedRemoteEntry}
-            fetchAndSetLegacyRevision={fetchAndSetLegacyRevision}
-          />
-        )}
+        <CurrentTabList />
      </div>
    </div>
  )
--- a/packages/web/src/javascripts/Components/RevisionHistoryModal/HistoryModalContentPane.tsx
+++ b/packages/web/src/javascripts/Components/RevisionHistoryModal/HistoryModalContentPane.tsx
@@ -0,0 +1,50 @@
+import RevisionContentLocked from './RevisionContentLocked'
+import SelectedRevisionContent from './SelectedRevisionContent'
+import { observer } from 'mobx-react-lite'
+import { WebApplication } from '@/Application/Application'
+import { NotesController } from '@/Controllers/NotesController'
+import { SubscriptionController } from '@/Controllers/Subscription/SubscriptionController'
+import { NoteHistoryController, RevisionContentState } from '@/Controllers/NoteHistory/NoteHistoryController'
+
+type Props = {
+  application: WebApplication
+  noteHistoryController: NoteHistoryController
+  notesController: NotesController
+  subscriptionController: SubscriptionController
+}
+
+const HistoryModalContentPane = ({
+  application,
+  noteHistoryController,
+  notesController,
+  subscriptionController,
+}: Props) => {
+  const { contentState } = noteHistoryController
+
+  switch (contentState) {
+    case RevisionContentState.Idle:
+      return (
+        <div className="color-passive-0 select-none absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
+          No revision selected
+        </div>
+      )
+    case RevisionContentState.Loading:
+      return (
+        <div className="sk-spinner w-5 h-5 spinner-info absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2" />
+      )
+    case RevisionContentState.Loaded:
+      return (
+        <SelectedRevisionContent
+          application={application}
+          notesController={notesController}
+          noteHistoryController={noteHistoryController}
+        />
+      )
+    case RevisionContentState.NotEntitled:
+      return <RevisionContentLocked subscriptionController={subscriptionController} />
+    default:
+      return null
+  }
+}
+
+export default observer(HistoryModalContentPane)
--- a/packages/web/src/javascripts/Components/RevisionHistoryModal/HistoryModalDialog.tsx
+++ b/packages/web/src/javascripts/Components/RevisionHistoryModal/HistoryModalDialog.tsx
@@ -0,0 +1,33 @@
+import { getPlatformString } from '@/Utils'
+import { DialogOverlay, DialogContent } from '@reach/dialog'
+import { ReactNode } from 'react'
+
+type Props = {
+  children: ReactNode
+  onDismiss: () => void
+}
+
+const HistoryModalDialog = ({ children, onDismiss }: Props) => {
+  return (
+    <DialogOverlay
+      className={`sn-component ${getPlatformString()}`}
+      onDismiss={onDismiss}
+      aria-label="Note revision history"
+    >
+      <DialogContent
+        aria-label="Note revision history"
+        className="rounded shadow-overlay"
+        style={{
+          width: '90%',
+          maxWidth: '90%',
+          minHeight: '90%',
+          background: 'var(--modal-background-color)',
+        }}
+      >
+        <div className="bg-default flex flex-col h-full overflow-hidden">{children}</div>
+      </DialogContent>
+    </DialogOverlay>
+  )
+}
+
+export default HistoryModalDialog
--- a/packages/web/src/javascripts/Components/RevisionHistoryModal/HistoryModalDialogContent.tsx
+++ b/packages/web/src/javascripts/Components/RevisionHistoryModal/HistoryModalDialogContent.tsx
@@ -0,0 +1,37 @@
+import { observer } from 'mobx-react-lite'
+import { useState } from 'react'
+import HistoryListContainer from './HistoryListContainer'
+import { RevisionHistoryModalContentProps } from './RevisionHistoryModalProps'
+import HistoryModalFooter from './HistoryModalFooter'
+import HistoryModalContentPane from './HistoryModalContentPane'
+import { NoteHistoryController } from '@/Controllers/NoteHistory/NoteHistoryController'
+
+const HistoryModalDialogContent = ({
+  application,
+  dismissModal,
+  notesController,
+  subscriptionController,
+  note,
+  selectionController,
+}: RevisionHistoryModalContentProps) => {
+  const [noteHistoryController] = useState(() => new NoteHistoryController(application, note, selectionController))
+
+  return (
+    <>
+      <div className="flex flex-grow min-h-0">
+        <HistoryListContainer features={application.features} noteHistoryController={noteHistoryController} />
+        <div className="flex flex-col flex-grow relative">
+          <HistoryModalContentPane
+            application={application}
+            noteHistoryController={noteHistoryController}
+            notesController={notesController}
+            subscriptionController={subscriptionController}
+          />
+        </div>
+      </div>
+      <HistoryModalFooter dismissModal={dismissModal} noteHistoryController={noteHistoryController} />
+    </>
+  )
+}
+
+export default observer(HistoryModalDialogContent)
--- a/packages/web/src/javascripts/Components/RevisionHistoryModal/HistoryModalFooter.tsx
+++ b/packages/web/src/javascripts/Components/RevisionHistoryModal/HistoryModalFooter.tsx
@@ -0,0 +1,62 @@
+import { NoteHistoryController } from '@/Controllers/NoteHistory/NoteHistoryController'
+import { RevisionListEntry } from '@standardnotes/snjs/dist/@types'
+import { observer } from 'mobx-react-lite'
+import { useCallback, useState } from 'react'
+import Button from '../Button/Button'
+
+type Props = {
+  dismissModal: () => void
+  noteHistoryController: NoteHistoryController
+}
+
+const HistoryModalFooter = ({ dismissModal, noteHistoryController }: Props) => {
+  const { selectedRevision, restoreRevision, restoreRevisionAsCopy, selectedEntry, deleteRemoteRevision } =
+    noteHistoryController
+
+  const [isDeletingRevision, setIsDeletingRevision] = useState(false)
+
+  const restoreSelectedRevision = useCallback(() => {
+    if (selectedRevision) {
+      restoreRevision(selectedRevision)
+      dismissModal()
+    }
+  }, [dismissModal, restoreRevision, selectedRevision])
+
+  const restoreAsCopy = useCallback(async () => {
+    if (selectedRevision) {
+      void restoreRevisionAsCopy(selectedRevision)
+      dismissModal()
+    }
+  }, [dismissModal, restoreRevisionAsCopy, selectedRevision])
+
+  const deleteSelectedRevision = useCallback(async () => {
+    if (!selectedEntry) {
+      return
+    }
+
+    setIsDeletingRevision(true)
+    await deleteRemoteRevision(selectedEntry as RevisionListEntry)
+    setIsDeletingRevision(false)
+  }, [deleteRemoteRevision, selectedEntry])
+
+  return (
+    <div className="flex flex-shrink-0 justify-between items-center min-h-6 px-2.5 py-2 border-0 border-t-1px border-solid border-main">
+      <div>
+        <Button className="py-1.35" label="Close" onClick={dismissModal} variant="normal" />
+      </div>
+      {selectedRevision && (
+        <div className="flex items-center">
+          {(selectedEntry as RevisionListEntry).uuid && (
+            <Button className="py-1.35 mr-2.5" onClick={deleteSelectedRevision} variant="normal">
+              {isDeletingRevision ? <div className="sk-spinner my-1 w-3 h-3 spinner-info" /> : 'Delete this revision'}
+            </Button>
+          )}
+          <Button className="py-1.35 mr-2.5" label="Restore as a copy" onClick={restoreAsCopy} variant="normal" />
+          <Button className="py-1.35" label="Restore version" onClick={restoreSelectedRevision} variant="primary" />
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default observer(HistoryModalFooter)
--- a/packages/web/src/javascripts/Components/RevisionHistoryModal/LegacyHistoryList.tsx
+++ b/packages/web/src/javascripts/Components/RevisionHistoryModal/LegacyHistoryList.tsx
@@ -1,48 +1,21 @@
-import { Action, HistoryEntry, RevisionListEntry } from '@standardnotes/snjs'
-import { Dispatch, FunctionComponent, SetStateAction, useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { Action } from '@standardnotes/snjs'
+import { FunctionComponent, useRef } from 'react'
 import { useListKeyboardNavigation } from '@/Hooks/useListKeyboardNavigation'
 import HistoryListItem from './HistoryListItem'
-import { LegacyHistoryEntry } from './utils'
+import { NoteHistoryController } from '@/Controllers/NoteHistory/NoteHistoryController'

 type Props = {
  legacyHistory: Action[] | undefined
-  setSelectedRevision: Dispatch<SetStateAction<HistoryEntry | LegacyHistoryEntry | undefined>>
-  setSelectedRemoteEntry: Dispatch<SetStateAction<RevisionListEntry | undefined>>
-  fetchAndSetLegacyRevision: (revisionListEntry: Action) => Promise<void>
+  noteHistoryController: NoteHistoryController
 }

-const LegacyHistoryList: FunctionComponent<Props> = ({
-  legacyHistory,
-  setSelectedRevision,
-  setSelectedRemoteEntry,
-  fetchAndSetLegacyRevision,
-}) => {
+const LegacyHistoryList: FunctionComponent<Props> = ({ legacyHistory, noteHistoryController }) => {
+  const { selectLegacyRevision, selectedEntry } = noteHistoryController
+
  const legacyHistoryListRef = useRef<HTMLDivElement>(null)

  useListKeyboardNavigation(legacyHistoryListRef)

-  const [selectedItemUrl, setSelectedItemUrl] = useState<string>()
-
-  const firstEntry = useMemo(() => {
-    return legacyHistory?.[0]
-  }, [legacyHistory])
-
-  const selectFirstEntry = useCallback(() => {
-    if (firstEntry) {
-      setSelectedItemUrl(firstEntry.subactions?.[0].url)
-      setSelectedRevision(undefined)
-      fetchAndSetLegacyRevision(firstEntry).catch(console.error)
-    }
-  }, [fetchAndSetLegacyRevision, firstEntry, setSelectedRevision])
-
-  useEffect(() => {
-    if (firstEntry && !selectedItemUrl) {
-      selectFirstEntry()
-    } else if (!firstEntry) {
-      setSelectedRevision(undefined)
-    }
-  }, [firstEntry, selectFirstEntry, selectedItemUrl, setSelectedRevision])
-
  return (
    <div
      className={`flex flex-col w-full h-full focus:shadow-none ${
@@ -51,16 +24,15 @@ const LegacyHistoryList: FunctionComponent<Props> = ({
      ref={legacyHistoryListRef}
    >
      {legacyHistory?.map((entry) => {
+        const selectedEntryUrl = (selectedEntry as Action)?.subactions?.[0].url
        const url = entry.subactions?.[0].url

        return (
          <HistoryListItem
            key={url}
-            isSelected={selectedItemUrl === url}
+            isSelected={selectedEntryUrl === url}
            onClick={() => {
-              setSelectedItemUrl(url)
-              setSelectedRemoteEntry(undefined)
-              fetchAndSetLegacyRevision(entry).catch(console.error)
+              selectLegacyRevision(entry)
            }}
          >
            {entry.label}
--- a/packages/web/src/javascripts/Components/RevisionHistoryModal/RemoteHistoryList.tsx
+++ b/packages/web/src/javascripts/Components/RevisionHistoryModal/RemoteHistoryList.tsx
@@ -1,50 +1,26 @@
-import { WebApplication } from '@/Application/Application'
-import { RevisionListEntry } from '@standardnotes/snjs'
 import { observer } from 'mobx-react-lite'
-import { Fragment, FunctionComponent, useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { Fragment, FunctionComponent, useMemo, useRef } from 'react'
 import Icon from '@/Components/Icon/Icon'
 import { useListKeyboardNavigation } from '@/Hooks/useListKeyboardNavigation'
 import HistoryListItem from './HistoryListItem'
-import { previewHistoryEntryTitle, RemoteRevisionListGroup } from './utils'
+import { previewHistoryEntryTitle } from './utils'
+import { FeaturesClientInterface, RevisionListEntry } from '@standardnotes/snjs/dist/@types'
+import { NoteHistoryController } from '@/Controllers/NoteHistory/NoteHistoryController'

 type RemoteHistoryListProps = {
-  application: WebApplication
-  remoteHistory: RemoteRevisionListGroup[] | undefined
-  isFetchingRemoteHistory: boolean
-  fetchAndSetRemoteRevision: (revisionListEntry: RevisionListEntry) => Promise<void>
+  features: FeaturesClientInterface
+  noteHistoryController: NoteHistoryController
 }

-const RemoteHistoryList: FunctionComponent<RemoteHistoryListProps> = ({
-  application,
-  remoteHistory,
-  isFetchingRemoteHistory,
-  fetchAndSetRemoteRevision,
-}) => {
+const RemoteHistoryList: FunctionComponent<RemoteHistoryListProps> = ({ features, noteHistoryController }) => {
+  const { remoteHistory, isFetchingRemoteHistory, selectRemoteRevision, selectedEntry } = noteHistoryController
+
  const remoteHistoryListRef = useRef<HTMLDivElement>(null)

  useListKeyboardNavigation(remoteHistoryListRef)

  const remoteHistoryLength = useMemo(() => remoteHistory?.map((group) => group.entries).flat().length, [remoteHistory])

-  const [selectedEntryUuid, setSelectedEntryUuid] = useState('')
-
-  const firstEntry = useMemo(() => {
-    return remoteHistory?.find((group) => group.entries?.length)?.entries?.[0]
-  }, [remoteHistory])
-
-  const selectFirstEntry = useCallback(() => {
-    if (firstEntry) {
-      setSelectedEntryUuid(firstEntry.uuid)
-      fetchAndSetRemoteRevision(firstEntry).catch(console.error)
-    }
-  }, [fetchAndSetRemoteRevision, firstEntry])
-
-  useEffect(() => {
-    if (firstEntry && !selectedEntryUuid.length) {
-      selectFirstEntry()
-    }
-  }, [fetchAndSetRemoteRevision, firstEntry, remoteHistory, selectFirstEntry, selectedEntryUuid.length])
-
  return (
    <div
      className={`flex flex-col w-full h-full focus:shadow-none ${
@@ -63,15 +39,14 @@ const RemoteHistoryList: FunctionComponent<RemoteHistoryListProps> = ({
              {group.entries.map((entry) => (
                <HistoryListItem
                  key={entry.uuid}
-                  isSelected={selectedEntryUuid === entry.uuid}
+                  isSelected={(selectedEntry as RevisionListEntry)?.uuid === entry.uuid}
                  onClick={() => {
-                    setSelectedEntryUuid(entry.uuid)
-                    fetchAndSetRemoteRevision(entry).catch(console.error)
+                    selectRemoteRevision(entry)
                  }}
                >
                  <div className="flex flex-grow items-center justify-between">
                    <div>{previewHistoryEntryTitle(entry)}</div>
-                    {!application.features.hasMinimumRole(entry.required_role) && <Icon type="premium-feature" />}
+                    {!features.hasMinimumRole(entry.required_role) && <Icon type="premium-feature" />}
                  </div>
                </HistoryListItem>
              ))}
--- a/packages/web/src/javascripts/Components/RevisionHistoryModal/RevisionContentLocked.tsx
+++ b/packages/web/src/javascripts/Components/RevisionHistoryModal/RevisionContentLocked.tsx
@@ -1,8 +1,8 @@
-import { ViewControllerManager } from '@/Services/ViewControllerManager'
 import { observer } from 'mobx-react-lite'
 import { FunctionComponent } from 'react'
 import { HistoryLockedIllustration } from '@standardnotes/icons'
 import Button from '@/Components/Button/Button'
+import { SubscriptionController } from '@/Controllers/Subscription/SubscriptionController'

 const getPlanHistoryDuration = (planName: string | undefined) => {
  switch (planName) {
@@ -20,12 +20,11 @@ const getPremiumContentCopy = (planName: string | undefined) => {
 }

 type Props = {
-  viewControllerManager: ViewControllerManager
+  subscriptionController: SubscriptionController
 }

-const RevisionContentLocked: FunctionComponent<Props> = ({ viewControllerManager }) => {
-  const { userSubscriptionName, isUserSubscriptionExpired, isUserSubscriptionCanceled } =
-    viewControllerManager.subscriptionController
+const RevisionContentLocked: FunctionComponent<Props> = ({ subscriptionController }) => {
+  const { userSubscriptionName, isUserSubscriptionExpired, isUserSubscriptionCanceled } = subscriptionController

  return (
    <div className="flex w-full h-full items-center justify-center">
--- a/packages/web/src/javascripts/Components/RevisionHistoryModal/RevisionHistoryModal.tsx
+++ b/packages/web/src/javascripts/Components/RevisionHistoryModal/RevisionHistoryModal.tsx
@@ -0,0 +1,32 @@
+import { observer } from 'mobx-react-lite'
+import { FunctionComponent } from 'react'
+import HistoryModalDialogContent from './HistoryModalDialogContent'
+import HistoryModalDialog from './HistoryModalDialog'
+import { RevisionHistoryModalProps } from './RevisionHistoryModalProps'
+
+const RevisionHistoryModal: FunctionComponent<RevisionHistoryModalProps> = ({
+  application,
+  historyModalController,
+  notesController,
+  selectionController,
+  subscriptionController,
+}) => {
+  if (!historyModalController.note) {
+    return null
+  }
+
+  return (
+    <HistoryModalDialog onDismiss={historyModalController.dismissModal}>
+      <HistoryModalDialogContent
+        application={application}
+        dismissModal={historyModalController.dismissModal}
+        note={historyModalController.note}
+        notesController={notesController}
+        selectionController={selectionController}
+        subscriptionController={subscriptionController}
+      />
+    </HistoryModalDialog>
+  )
+}
+
+export default observer(RevisionHistoryModal)
--- a/packages/web/src/javascripts/Components/RevisionHistoryModal/RevisionHistoryModalProps.tsx
+++ b/packages/web/src/javascripts/Components/RevisionHistoryModal/RevisionHistoryModalProps.tsx
@@ -0,0 +1,22 @@
+import { WebApplication } from '@/Application/Application'
+import { HistoryModalController } from '@/Controllers/NoteHistory/HistoryModalController'
+import { NotesController } from '@/Controllers/NotesController'
+import { SelectedItemsController } from '@/Controllers/SelectedItemsController'
+import { SubscriptionController } from '@/Controllers/Subscription/SubscriptionController'
+import { SNNote } from '@standardnotes/snjs'
+
+type CommonProps = {
+  application: WebApplication
+  notesController: NotesController
+  selectionController: SelectedItemsController
+  subscriptionController: SubscriptionController
+}
+
+export type RevisionHistoryModalProps = CommonProps & {
+  historyModalController: HistoryModalController
+}
+
+export type RevisionHistoryModalContentProps = CommonProps & {
+  note: SNNote
+  dismissModal: () => void
+}
--- a/packages/web/src/javascripts/Components/RevisionHistoryModal/RevisionHistoryModalWrapper.tsx
+++ b/packages/web/src/javascripts/Components/RevisionHistoryModal/RevisionHistoryModalWrapper.tsx
@@ -1,315 +0,0 @@
-import { confirmDialog } from '@/Services/AlertService'
-import { STRING_RESTORE_LOCKED_ATTEMPT } from '@/Constants/Strings'
-import { WebApplication } from '@/Application/Application'
-import { ViewControllerManager } from '@/Services/ViewControllerManager'
-import { getPlatformString } from '@/Utils'
-import { DialogContent, DialogOverlay } from '@reach/dialog'
-import {
-  ButtonType,
-  ContentType,
-  HistoryEntry,
-  PayloadEmitSource,
-  RevisionListEntry,
-  SNNote,
-} from '@standardnotes/snjs'
-import { observer } from 'mobx-react-lite'
-import { FunctionComponent, useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import Button from '@/Components/Button/Button'
-import HistoryListContainer from './HistoryListContainer'
-import RevisionContentLocked from './RevisionContentLocked'
-import SelectedRevisionContent from './SelectedRevisionContent'
-import { LegacyHistoryEntry, RemoteRevisionListGroup, sortRevisionListIntoGroups } from './utils'
-
-type RevisionHistoryModalProps = {
-  application: WebApplication
-  viewControllerManager: ViewControllerManager
-}
-
-const ABSOLUTE_CENTER_CLASSNAME = 'absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2'
-
-type RevisionContentPlaceholderProps = {
-  isFetchingSelectedRevision: boolean
-  selectedRevision: HistoryEntry | LegacyHistoryEntry | undefined
-  showContentLockedScreen: boolean
-}
-
-const RevisionContentPlaceholder: FunctionComponent<RevisionContentPlaceholderProps> = ({
-  isFetchingSelectedRevision,
-  selectedRevision,
-  showContentLockedScreen,
-}) => (
-  <div
-    className={`absolute w-full h-full top-0 left-0 ${
-      (isFetchingSelectedRevision || !selectedRevision) && !showContentLockedScreen
-        ? 'z-index-1 bg-default'
-        : '-z-index-1'
-    }`}
-  >
-    {isFetchingSelectedRevision && <div className={`sk-spinner w-5 h-5 spinner-info ${ABSOLUTE_CENTER_CLASSNAME}`} />}
-    {!isFetchingSelectedRevision && !selectedRevision ? (
-      <div className={`color-passive-0 select-none ${ABSOLUTE_CENTER_CLASSNAME}`}>No revision selected</div>
-    ) : null}
-  </div>
-)
-
-export const RevisionHistoryModal: FunctionComponent<RevisionHistoryModalProps> = observer(
-  ({ application, viewControllerManager }) => {
-    const closeButtonRef = useRef<HTMLButtonElement>(null)
-
-    const dismissModal = useCallback(() => {
-      viewControllerManager.notesController.setShowRevisionHistoryModal(false)
-    }, [viewControllerManager.notesController])
-
-    const note = viewControllerManager.notesController.firstSelectedNote
-    const editorForCurrentNote = useMemo(() => {
-      if (note) {
-        return application.componentManager.editorForNote(note)
-      } else {
-        return undefined
-      }
-    }, [application, note])
-
-    const [isFetchingSelectedRevision, setIsFetchingSelectedRevision] = useState(false)
-    const [selectedRevision, setSelectedRevision] = useState<HistoryEntry | LegacyHistoryEntry>()
-    const [selectedRemoteEntry, setSelectedRemoteEntry] = useState<RevisionListEntry>()
-    const [isDeletingRevision, setIsDeletingRevision] = useState(false)
-    const [templateNoteForRevision, setTemplateNoteForRevision] = useState<SNNote>()
-    const [showContentLockedScreen, setShowContentLockedScreen] = useState(false)
-
-    const [remoteHistory, setRemoteHistory] = useState<RemoteRevisionListGroup[]>()
-    const [isFetchingRemoteHistory, setIsFetchingRemoteHistory] = useState(false)
-
-    const fetchRemoteHistory = useCallback(async () => {
-      if (note) {
-        setRemoteHistory(undefined)
-        setIsFetchingRemoteHistory(true)
-        try {
-          const initialRemoteHistory = await application.historyManager.remoteHistoryForItem(note)
-
-          const remoteHistoryAsGroups = sortRevisionListIntoGroups<RevisionListEntry>(initialRemoteHistory)
-
-          setRemoteHistory(remoteHistoryAsGroups)
-        } catch (err) {
-          console.error(err)
-        } finally {
-          setIsFetchingRemoteHistory(false)
-        }
-      }
-    }, [application, note])
-
-    useEffect(() => {
-      if (!remoteHistory?.length) {
-        fetchRemoteHistory().catch(console.error)
-      }
-    }, [fetchRemoteHistory, remoteHistory?.length])
-
-    const restore = useCallback(() => {
-      if (selectedRevision) {
-        const originalNote = application.items.findItem(selectedRevision.payload.uuid) as SNNote
-
-        if (originalNote.locked) {
-          application.alertService.alert(STRING_RESTORE_LOCKED_ATTEMPT).catch(console.error)
-          return
-        }
-
-        confirmDialog({
-          text: "Are you sure you want to replace the current note's contents with what you see in this preview?",
-          confirmButtonStyle: 'danger',
-        })
-          .then((confirmed) => {
-            if (confirmed) {
-              application.mutator
-                .changeAndSaveItem(
-                  originalNote,
-                  (mutator) => {
-                    mutator.setCustomContent(selectedRevision.payload.content)
-                  },
-                  true,
-                  PayloadEmitSource.RemoteRetrieved,
-                )
-                .catch(console.error)
-              dismissModal()
-            }
-          })
-          .catch(console.error)
-      }
-    }, [application.alertService, application.items, application.mutator, dismissModal, selectedRevision])
-
-    const restoreAsCopy = useCallback(async () => {
-      if (selectedRevision) {
-        const originalNote = application.items.findSureItem<SNNote>(selectedRevision.payload.uuid)
-
-        const duplicatedItem = await application.mutator.duplicateItem(originalNote, {
-          ...selectedRevision.payload.content,
-          title: selectedRevision.payload.content.title
-            ? selectedRevision.payload.content.title + ' (copy)'
-            : undefined,
-        })
-
-        viewControllerManager.selectionController.selectItem(duplicatedItem.uuid).catch(console.error)
-
-        dismissModal()
-      }
-    }, [
-      viewControllerManager.selectionController,
-      application.items,
-      application.mutator,
-      dismissModal,
-      selectedRevision,
-    ])
-
-    useEffect(() => {
-      const fetchTemplateNote = async () => {
-        if (selectedRevision) {
-          const newTemplateNote = application.mutator.createTemplateItem(
-            ContentType.Note,
-            selectedRevision.payload.content,
-          ) as SNNote
-
-          setTemplateNoteForRevision(newTemplateNote)
-        }
-      }
-
-      fetchTemplateNote().catch(console.error)
-    }, [application, selectedRevision])
-
-    const deleteSelectedRevision = useCallback(() => {
-      if (!selectedRemoteEntry) {
-        return
-      }
-
-      application.alertService
-        .confirm(
-          'Are you sure you want to delete this revision?',
-          'Delete revision?',
-          'Delete revision',
-          ButtonType.Danger,
-          'Cancel',
-        )
-        .then((shouldDelete) => {
-          if (shouldDelete && note) {
-            setIsDeletingRevision(true)
-
-            application.historyManager
-              .deleteRemoteRevision(note, selectedRemoteEntry)
-              .then((res) => {
-                if (res.error?.message) {
-                  throw new Error(res.error.message)
-                }
-
-                fetchRemoteHistory().catch(console.error)
-                setIsDeletingRevision(false)
-              })
-              .catch(console.error)
-          }
-        })
-        .catch(console.error)
-    }, [application.alertService, application.historyManager, fetchRemoteHistory, note, selectedRemoteEntry])
-
-    return (
-      <DialogOverlay
-        className={`sn-component ${getPlatformString()}`}
-        onDismiss={dismissModal}
-        initialFocusRef={closeButtonRef}
-        aria-label="Note revision history"
-      >
-        <DialogContent
-          aria-label="Note revision history"
-          className="rounded shadow-overlay"
-          style={{
-            width: '90%',
-            maxWidth: '90%',
-            minHeight: '90%',
-            background: 'var(--modal-background-color)',
-          }}
-        >
-          <div
-            className={`bg-default flex flex-col h-full overflow-hidden ${
-              isDeletingRevision ? 'pointer-events-none cursor-not-allowed' : ''
-            }`}
-          >
-            <div className="flex flex-grow min-h-0">
-              {note && (
-                <HistoryListContainer
-                  application={application}
-                  note={note}
-                  remoteHistory={remoteHistory}
-                  isFetchingRemoteHistory={isFetchingRemoteHistory}
-                  setSelectedRevision={setSelectedRevision}
-                  setSelectedRemoteEntry={setSelectedRemoteEntry}
-                  setShowContentLockedScreen={setShowContentLockedScreen}
-                  setIsFetchingSelectedRevision={setIsFetchingSelectedRevision}
-                />
-              )}
-              <div className={'flex flex-col flex-grow relative'}>
-                <RevisionContentPlaceholder
-                  selectedRevision={selectedRevision}
-                  isFetchingSelectedRevision={isFetchingSelectedRevision}
-                  showContentLockedScreen={showContentLockedScreen}
-                />
-                {showContentLockedScreen && !selectedRevision && (
-                  <RevisionContentLocked viewControllerManager={viewControllerManager} />
-                )}
-                {selectedRevision && templateNoteForRevision && (
-                  <SelectedRevisionContent
-                    application={application}
-                    viewControllerManager={viewControllerManager}
-                    selectedRevision={selectedRevision}
-                    editorForCurrentNote={editorForCurrentNote}
-                    templateNoteForRevision={templateNoteForRevision}
-                  />
-                )}
-              </div>
-            </div>
-            <div className="flex flex-shrink-0 justify-between items-center min-h-6 px-2.5 py-2 border-0 border-t-1px border-solid border-main">
-              <div>
-                <Button
-                  className="py-1.35"
-                  label="Close"
-                  onClick={dismissModal}
-                  ref={closeButtonRef}
-                  variant="normal"
-                />
-              </div>
-              {selectedRevision && (
-                <div className="flex items-center">
-                  {selectedRemoteEntry && (
-                    <Button className="py-1.35 mr-2.5" onClick={deleteSelectedRevision} variant="normal">
-                      {isDeletingRevision ? (
-                        <div className="sk-spinner my-1 w-3 h-3 spinner-info" />
-                      ) : (
-                        'Delete this revision'
-                      )}
-                    </Button>
-                  )}
-                  <Button
-                    className="py-1.35 mr-2.5"
-                    label="Restore as a copy"
-                    onClick={restoreAsCopy}
-                    variant="normal"
-                  />
-                  <Button className="py-1.35" label="Restore version" onClick={restore} variant="primary" />
-                </div>
-              )}
-            </div>
-          </div>
-        </DialogContent>
-      </DialogOverlay>
-    )
-  },
-)
-
-RevisionHistoryModal.displayName = 'RevisionHistoryModal'
-
-const RevisionHistoryModalWrapper: FunctionComponent<RevisionHistoryModalProps> = ({
-  application,
-  viewControllerManager,
-}) => {
-  if (!viewControllerManager.notesController.showRevisionHistoryModal) {
-    return null
-  }
-
-  return <RevisionHistoryModal application={application} viewControllerManager={viewControllerManager} />
-}
-
-export default observer(RevisionHistoryModalWrapper)
--- a/packages/web/src/javascripts/Components/RevisionHistoryModal/RevisionType.tsx
+++ b/packages/web/src/javascripts/Components/RevisionHistoryModal/RevisionType.tsx
@@ -0,0 +1,5 @@
+export enum RevisionType {
+  Session = 'Session',
+  Remote = 'Remote',
+  Legacy = 'Legacy',
+}
--- a/packages/web/src/javascripts/Components/RevisionHistoryModal/SelectedRevisionContent.tsx
+++ b/packages/web/src/javascripts/Components/RevisionHistoryModal/SelectedRevisionContent.tsx
@@ -1,39 +1,45 @@
 import { WebApplication } from '@/Application/Application'
-import { ViewControllerManager } from '@/Services/ViewControllerManager'
-import { HistoryEntry, SNComponent, SNNote } from '@standardnotes/snjs'
+import { ContentType, SNNote } from '@standardnotes/snjs'
 import { observer } from 'mobx-react-lite'
 import { FunctionComponent, useEffect, useMemo } from 'react'
 import ComponentView from '@/Components/ComponentView/ComponentView'
-import { LegacyHistoryEntry } from './utils'
+import { NotesController } from '@/Controllers/NotesController'
+import { NoteHistoryController } from '@/Controllers/NoteHistory/NoteHistoryController'

 const ABSOLUTE_CENTER_CLASSNAME = 'absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2'

 type SelectedRevisionContentProps = {
  application: WebApplication
-  viewControllerManager: ViewControllerManager
-  selectedRevision: HistoryEntry | LegacyHistoryEntry
-  editorForCurrentNote: SNComponent | undefined
-  templateNoteForRevision: SNNote
+  noteHistoryController: NoteHistoryController
+  notesController: NotesController
 }

 const SelectedRevisionContent: FunctionComponent<SelectedRevisionContentProps> = ({
  application,
-  viewControllerManager,
-  selectedRevision,
-  editorForCurrentNote,
-  templateNoteForRevision,
+  noteHistoryController,
+  notesController,
 }) => {
+  const note = notesController.firstSelectedNote
+  const { selectedRevision } = noteHistoryController
+
  const componentViewer = useMemo(() => {
+    const editorForCurrentNote = note ? application.componentManager.editorForNote(note) : undefined
+
    if (!editorForCurrentNote) {
      return undefined
    }

+    const templateNoteForRevision = application.mutator.createTemplateItem(
+      ContentType.Note,
+      selectedRevision?.payload.content,
+    ) as SNNote
+
    const componentViewer = application.componentManager.createComponentViewer(editorForCurrentNote)
    componentViewer.setReadonly(true)
    componentViewer.lockReadonly = true
    componentViewer.overrideContextItem = templateNoteForRevision
    return componentViewer
-  }, [application, editorForCurrentNote, templateNoteForRevision])
+  }, [application.componentManager, application.mutator, note, selectedRevision?.payload.content])

  useEffect(() => {
    return () => {
@@ -46,17 +52,16 @@ const SelectedRevisionContent: FunctionComponent<SelectedRevisionContentProps> =
  return (
    <div className="flex flex-col h-full overflow-hidden">
      <div className="p-4 text-base font-bold w-full">
-        <div className="title">{selectedRevision.payload.content.title}</div>
+        <div className="title">{selectedRevision?.payload.content.title}</div>
      </div>
      {!componentViewer && (
        <div className="relative flex-grow min-h-0 overflow-hidden">
-          {selectedRevision.payload.content.text.length ? (
+          {selectedRevision?.payload.content.text.length ? (
            <textarea
              readOnly={true}
              className="w-full h-full resize-none p-4 pt-0 border-0 bg-default color-text text-editor font-editor"
-            >
-              {selectedRevision.payload.content.text}
-            </textarea>
+              value={selectedRevision?.payload.content.text}
+            />
          ) : (
            <div className={`color-passive-0 ${ABSOLUTE_CENTER_CLASSNAME}`}>Empty note.</div>
          )}
@@ -64,12 +69,7 @@ const SelectedRevisionContent: FunctionComponent<SelectedRevisionContentProps> =
      )}
      {componentViewer && (
        <div className="component-view">
-          <ComponentView
-            key={componentViewer.identifier}
-            componentViewer={componentViewer}
-            application={application}
-            viewControllerManager={viewControllerManager}
-          />
+          <ComponentView key={componentViewer.identifier} componentViewer={componentViewer} application={application} />
        </div>
      )}
    </div>
--- a/packages/web/src/javascripts/Components/RevisionHistoryModal/SessionHistoryList.tsx
+++ b/packages/web/src/javascripts/Components/RevisionHistoryModal/SessionHistoryList.tsx
@@ -1,60 +1,25 @@
-import { HistoryEntry, NoteHistoryEntry, RevisionListEntry } from '@standardnotes/snjs'
-import {
-  Dispatch,
-  Fragment,
-  FunctionComponent,
-  SetStateAction,
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from 'react'
+import { Fragment, FunctionComponent, useMemo, useRef } from 'react'
 import { useListKeyboardNavigation } from '@/Hooks/useListKeyboardNavigation'
 import HistoryListItem from './HistoryListItem'
-import { LegacyHistoryEntry, ListGroup } from './utils'
+import { observer } from 'mobx-react-lite'
+import { NoteHistoryController } from '@/Controllers/NoteHistory/NoteHistoryController'

 type Props = {
-  sessionHistory: ListGroup<NoteHistoryEntry>[]
-  setSelectedRevision: Dispatch<SetStateAction<HistoryEntry | LegacyHistoryEntry | undefined>>
-  setSelectedRemoteEntry: Dispatch<SetStateAction<RevisionListEntry | undefined>>
+  noteHistoryController: NoteHistoryController
 }

-const SessionHistoryList: FunctionComponent<Props> = ({
-  sessionHistory,
-  setSelectedRevision,
-  setSelectedRemoteEntry,
-}) => {
+const SessionHistoryList: FunctionComponent<Props> = ({ noteHistoryController }) => {
+  const { sessionHistory, selectedRevision, selectSessionRevision } = noteHistoryController
+
  const sessionHistoryListRef = useRef<HTMLDivElement>(null)

  useListKeyboardNavigation(sessionHistoryListRef)

  const sessionHistoryLength = useMemo(
-    () => sessionHistory.map((group) => group.entries).flat().length,
+    () => sessionHistory?.map((group) => group.entries).flat().length,
    [sessionHistory],
  )

-  const [selectedItemCreatedAt, setSelectedItemCreatedAt] = useState<Date>()
-
-  const firstEntry = useMemo(() => {
-    return sessionHistory?.find((group) => group.entries?.length)?.entries?.[0]
-  }, [sessionHistory])
-
-  const selectFirstEntry = useCallback(() => {
-    if (firstEntry) {
-      setSelectedItemCreatedAt(firstEntry.payload.created_at)
-      setSelectedRevision(firstEntry)
-    }
-  }, [firstEntry, setSelectedRevision])
-
-  useEffect(() => {
-    if (firstEntry && !selectedItemCreatedAt) {
-      selectFirstEntry()
-    } else if (!firstEntry) {
-      setSelectedRevision(undefined)
-    }
-  }, [firstEntry, selectFirstEntry, selectedItemCreatedAt, setSelectedRevision])
-
  return (
    <div
      className={`flex flex-col w-full h-full focus:shadow-none ${
@@ -72,11 +37,9 @@ const SessionHistoryList: FunctionComponent<Props> = ({
              {group.entries.map((entry, index) => (
                <HistoryListItem
                  key={index}
-                  isSelected={selectedItemCreatedAt === entry.payload.created_at}
+                  isSelected={selectedRevision?.payload.created_at === entry.payload.created_at}
                  onClick={() => {
-                    setSelectedItemCreatedAt(entry.payload.created_at)
-                    setSelectedRevision(entry)
-                    setSelectedRemoteEntry(undefined)
+                    selectSessionRevision(entry)
                  }}
                >
                  {entry.previewTitle()}
@@ -93,4 +56,4 @@ const SessionHistoryList: FunctionComponent<Props> = ({
  )
 }

-export default SessionHistoryList
+export default observer(SessionHistoryList)