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/package.json
+++ b/packages/web/package.json
@@ -3,7 +3,7 @@
  "version": "3.23.0-alpha.0",
  "license": "AGPL-3.0-or-later",
  "main": "dist/app.js",
-  "author": "Standard Notes",
+  "author": "Standard Notes.",
  "private": true,
  "files": [
    "dist"
--- 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)
--- a/packages/web/src/javascripts/Controllers/NoteHistory/HistoryModalController.ts
+++ b/packages/web/src/javascripts/Controllers/NoteHistory/HistoryModalController.ts
@@ -0,0 +1,34 @@
+import { WebApplication } from '@/Application/Application'
+import { InternalEventBus, SNNote } from '@standardnotes/snjs'
+import { action, makeObservable, observable } from 'mobx'
+import { AbstractViewController } from '../Abstract/AbstractViewController'
+
+export class HistoryModalController extends AbstractViewController {
+  note?: SNNote = undefined
+
+  override deinit(): void {
+    super.deinit()
+    this.note = undefined
+  }
+
+  constructor(application: WebApplication, eventBus: InternalEventBus) {
+    super(application, eventBus)
+
+    makeObservable(this, {
+      note: observable,
+      setNote: action,
+    })
+  }
+
+  setNote = (note: SNNote | undefined) => {
+    this.note = note
+  }
+
+  openModal = (note: SNNote | undefined) => {
+    this.setNote(note)
+  }
+
+  dismissModal = () => {
+    this.setNote(undefined)
+  }
+}
--- a/packages/web/src/javascripts/Controllers/NoteHistory/NoteHistoryController.ts
+++ b/packages/web/src/javascripts/Controllers/NoteHistory/NoteHistoryController.ts
@@ -0,0 +1,368 @@
+import { WebApplication } from '@/Application/Application'
+import { RevisionType } from '@/Components/RevisionHistoryModal/RevisionType'
+import {
+  LegacyHistoryEntry,
+  ListGroup,
+  RemoteRevisionListGroup,
+  sortRevisionListIntoGroups,
+} from '@/Components/RevisionHistoryModal/utils'
+import { STRING_RESTORE_LOCKED_ATTEMPT } from '@/Constants/Strings'
+import { confirmDialog } from '@/Services/AlertService'
+import {
+  Action,
+  ActionVerb,
+  ButtonType,
+  HistoryEntry,
+  NoteHistoryEntry,
+  PayloadEmitSource,
+  RevisionListEntry,
+  SNNote,
+} from '@standardnotes/snjs'
+import { makeObservable, observable, action } from 'mobx'
+import { SelectedItemsController } from '../SelectedItemsController'
+
+type RemoteHistory = RemoteRevisionListGroup[]
+
+type SessionHistory = ListGroup<NoteHistoryEntry>[]
+
+type LegacyHistory = Action[]
+
+type SelectedRevision = HistoryEntry | LegacyHistoryEntry | undefined
+
+type SelectedEntry = RevisionListEntry | NoteHistoryEntry | Action | undefined
+
+export enum RevisionContentState {
+  Idle,
+  Loading,
+  Loaded,
+  NotEntitled,
+}
+
+export class NoteHistoryController {
+  remoteHistory: RemoteHistory = []
+  isFetchingRemoteHistory = false
+  sessionHistory: SessionHistory = []
+  legacyHistory: LegacyHistory = []
+
+  selectedRevision: SelectedRevision = undefined
+  selectedEntry: SelectedEntry = undefined
+
+  contentState = RevisionContentState.Idle
+
+  currentTab = RevisionType.Remote
+
+  constructor(
+    private application: WebApplication,
+    private note: SNNote,
+    private selectionController: SelectedItemsController,
+  ) {
+    void this.fetchAllHistory()
+
+    makeObservable(this, {
+      selectedRevision: observable,
+      setSelectedRevision: action,
+
+      selectedEntry: observable,
+      setSelectedEntry: action,
+
+      remoteHistory: observable,
+      setRemoteHistory: action,
+      isFetchingRemoteHistory: observable,
+      setIsFetchingRemoteHistory: action,
+
+      sessionHistory: observable,
+      setSessionHistory: action,
+
+      legacyHistory: observable,
+      setLegacyHistory: action,
+
+      resetHistoryState: action,
+
+      currentTab: observable,
+      selectTab: action,
+
+      contentState: observable,
+      setContentState: action,
+    })
+  }
+
+  setSelectedRevision = (revision: SelectedRevision) => {
+    this.selectedRevision = revision
+  }
+
+  setSelectedEntry = (entry: SelectedEntry) => {
+    this.selectedEntry = entry
+  }
+
+  clearSelection = () => {
+    this.setSelectedEntry(undefined)
+    this.setSelectedRevision(undefined)
+  }
+
+  selectTab = (tab: RevisionType) => {
+    this.currentTab = tab
+    this.clearSelection()
+    this.setContentState(RevisionContentState.Idle)
+    this.selectFirstRevision()
+  }
+
+  setIsFetchingRemoteHistory = (value: boolean) => {
+    this.isFetchingRemoteHistory = value
+  }
+
+  setContentState = (contentState: RevisionContentState) => {
+    this.contentState = contentState
+  }
+
+  selectRemoteRevision = async (entry: RevisionListEntry) => {
+    if (!this.note) {
+      return
+    }
+
+    if (!this.application.features.hasMinimumRole(entry.required_role)) {
+      this.setContentState(RevisionContentState.NotEntitled)
+      this.setSelectedRevision(undefined)
+      return
+    }
+
+    this.setContentState(RevisionContentState.Loading)
+    this.clearSelection()
+
+    try {
+      this.setSelectedEntry(entry)
+      const remoteRevision = await this.application.historyManager.fetchRemoteRevision(this.note, entry)
+      this.setSelectedRevision(remoteRevision)
+    } catch (err) {
+      this.clearSelection()
+      console.error(err)
+    } finally {
+      this.setContentState(RevisionContentState.Loaded)
+    }
+  }
+
+  selectLegacyRevision = async (entry: Action) => {
+    this.clearSelection()
+    this.setContentState(RevisionContentState.Loading)
+
+    if (!this.note) {
+      return
+    }
+
+    try {
+      if (!entry.subactions?.[0]) {
+        throw new Error('Could not find revision action url')
+      }
+
+      this.setSelectedEntry(entry)
+
+      const response = await this.application.actionsManager.runAction(entry.subactions[0], this.note)
+
+      if (!response) {
+        throw new Error('Could not fetch revision')
+      }
+
+      this.setSelectedRevision(response.item as unknown as HistoryEntry)
+    } catch (error) {
+      console.error(error)
+      this.setSelectedRevision(undefined)
+    } finally {
+      this.setContentState(RevisionContentState.Loaded)
+    }
+  }
+
+  selectSessionRevision = (entry: NoteHistoryEntry) => {
+    this.clearSelection()
+    this.setSelectedEntry(entry)
+    this.setSelectedRevision(entry)
+  }
+
+  private get flattenedRemoteHistory() {
+    return this.remoteHistory.map((group) => group.entries).flat()
+  }
+
+  private get flattenedSessionHistory() {
+    return this.sessionHistory.map((group) => group.entries).flat()
+  }
+
+  selectFirstRevision = () => {
+    switch (this.currentTab) {
+      case RevisionType.Remote: {
+        const firstEntry = this.flattenedRemoteHistory[0]
+        if (firstEntry) {
+          void this.selectRemoteRevision(firstEntry)
+        }
+        break
+      }
+      case RevisionType.Session: {
+        const firstEntry = this.flattenedSessionHistory[0]
+        if (firstEntry) {
+          void this.selectSessionRevision(firstEntry)
+        }
+        break
+      }
+      case RevisionType.Legacy: {
+        const firstEntry = this.legacyHistory[0]
+        if (firstEntry) {
+          void this.selectLegacyRevision(firstEntry)
+        }
+        break
+      }
+    }
+  }
+
+  selectPrevOrNextRemoteRevision = (revisionEntry: RevisionListEntry) => {
+    const currentIndex = this.flattenedRemoteHistory.findIndex((entry) => entry?.uuid === revisionEntry.uuid)
+
+    const previousEntry = this.flattenedRemoteHistory[currentIndex - 1]
+    const nextEntry = this.flattenedRemoteHistory[currentIndex + 1]
+
+    if (previousEntry) {
+      void this.selectRemoteRevision(previousEntry)
+    } else if (nextEntry) {
+      void this.selectRemoteRevision(nextEntry)
+    }
+  }
+
+  setRemoteHistory = (remoteHistory: RemoteHistory) => {
+    this.remoteHistory = remoteHistory
+  }
+
+  fetchRemoteHistory = async () => {
+    this.setRemoteHistory([])
+
+    if (this.note) {
+      this.setIsFetchingRemoteHistory(true)
+      try {
+        const initialRemoteHistory = await this.application.historyManager.remoteHistoryForItem(this.note)
+
+        this.setRemoteHistory(sortRevisionListIntoGroups<RevisionListEntry>(initialRemoteHistory))
+      } catch (err) {
+        console.error(err)
+      } finally {
+        this.setIsFetchingRemoteHistory(false)
+      }
+    }
+  }
+
+  setLegacyHistory = (legacyHistory: LegacyHistory) => {
+    this.legacyHistory = legacyHistory
+  }
+
+  fetchLegacyHistory = async () => {
+    const actionExtensions = this.application.actionsManager.getExtensions()
+
+    actionExtensions.forEach(async (ext) => {
+      if (!this.note) {
+        return
+      }
+
+      const actionExtension = await this.application.actionsManager.loadExtensionInContextOfItem(ext, this.note)
+
+      if (!actionExtension) {
+        return
+      }
+
+      const isLegacyNoteHistoryExt = actionExtension?.actions.some((action) => action.verb === ActionVerb.Nested)
+
+      if (!isLegacyNoteHistoryExt) {
+        return
+      }
+
+      this.setLegacyHistory(actionExtension.actions.filter((action) => action.subactions?.[0]))
+    })
+  }
+
+  setSessionHistory = (sessionHistory: SessionHistory) => {
+    this.sessionHistory = sessionHistory
+  }
+
+  fetchAllHistory = async () => {
+    this.resetHistoryState()
+
+    if (!this.note) {
+      return
+    }
+
+    this.setSessionHistory(
+      sortRevisionListIntoGroups<NoteHistoryEntry>(
+        this.application.historyManager.sessionHistoryForItem(this.note) as NoteHistoryEntry[],
+      ),
+    )
+    await this.fetchRemoteHistory()
+    await this.fetchLegacyHistory()
+
+    this.selectFirstRevision()
+  }
+
+  resetHistoryState = () => {
+    this.remoteHistory = []
+    this.sessionHistory = []
+    this.legacyHistory = []
+  }
+
+  restoreRevision = async (revision: NonNullable<SelectedRevision>) => {
+    const originalNote = this.application.items.findItem<SNNote>(revision.payload.uuid)
+
+    if (originalNote?.locked) {
+      this.application.alertService.alert(STRING_RESTORE_LOCKED_ATTEMPT).catch(console.error)
+      return
+    }
+
+    const didConfirm = await confirmDialog({
+      text: "Are you sure you want to replace the current note's contents with what you see in this preview?",
+      confirmButtonStyle: 'danger',
+    })
+
+    if (!originalNote) {
+      throw new Error('Original note not found.')
+    }
+
+    if (didConfirm) {
+      void this.application.mutator.changeAndSaveItem(
+        originalNote,
+        (mutator) => {
+          mutator.setCustomContent(revision.payload.content)
+        },
+        true,
+        PayloadEmitSource.RemoteRetrieved,
+      )
+    }
+  }
+
+  restoreRevisionAsCopy = async (revision: NonNullable<SelectedRevision>) => {
+    const originalNote = this.application.items.findSureItem<SNNote>(revision.payload.uuid)
+
+    const duplicatedItem = await this.application.mutator.duplicateItem(originalNote, {
+      ...revision.payload.content,
+      title: revision.payload.content.title ? revision.payload.content.title + ' (copy)' : undefined,
+    })
+
+    this.selectionController.selectItem(duplicatedItem.uuid).catch(console.error)
+  }
+
+  deleteRemoteRevision = async (revisionEntry: RevisionListEntry) => {
+    const shouldDelete = await this.application.alertService.confirm(
+      'Are you sure you want to delete this revision?',
+      'Delete revision?',
+      'Delete revision',
+      ButtonType.Danger,
+      'Cancel',
+    )
+
+    if (!shouldDelete || !this.note) {
+      return
+    }
+
+    const response = await this.application.historyManager.deleteRemoteRevision(this.note, revisionEntry)
+
+    if (response.error?.message) {
+      throw new Error(response.error.message)
+    }
+
+    this.clearSelection()
+
+    this.selectPrevOrNextRemoteRevision(revisionEntry)
+
+    await this.fetchRemoteHistory()
+  }
+}
--- a/packages/web/src/javascripts/Controllers/NotesController.ts
+++ b/packages/web/src/javascripts/Controllers/NotesController.ts
@@ -21,7 +21,6 @@ export class NotesController extends AbstractViewController {
  contextMenuClickLocation: { x: number; y: number } = { x: 0, y: 0 }
  contextMenuMaxHeight: number | 'auto' = 'auto'
  showProtectedWarning = false
-  showRevisionHistoryModal = false
  private itemListController!: ItemListController

  override deinit() {
@@ -48,7 +47,6 @@ export class NotesController extends AbstractViewController {
      contextMenuOpen: observable,
      contextMenuPosition: observable,
      showProtectedWarning: observable,
-      showRevisionHistoryModal: observable,

      selectedNotes: computed,
      firstSelectedNote: computed,
@@ -60,7 +58,6 @@ export class NotesController extends AbstractViewController {
      setContextMenuPosition: action,
      setContextMenuMaxHeight: action,
      setShowProtectedWarning: action,
-      setShowRevisionHistoryModal: action,
      unselectNotes: action,
    })
  }
@@ -367,8 +364,4 @@ export class NotesController extends AbstractViewController {
  private getSelectedNotesList(): SNNote[] {
    return Object.values(this.selectedNotes)
  }
-
-  setShowRevisionHistoryModal(show: boolean): void {
-    this.showRevisionHistoryModal = show
-  }
 }
--- a/packages/web/src/javascripts/Services/ViewControllerManager.ts
+++ b/packages/web/src/javascripts/Services/ViewControllerManager.ts
@@ -20,6 +20,7 @@ import { SyncStatusController } from '../Controllers/SyncStatusController'
 import { NavigationController } from '../Controllers/Navigation/NavigationController'
 import { FilePreviewModalController } from '../Controllers/FilePreviewModalController'
 import { SelectedItemsController } from '../Controllers/SelectedItemsController'
+import { HistoryModalController } from '../Controllers/NoteHistory/HistoryModalController'

 export class ViewControllerManager {
  readonly enableUnfinishedFeatures: boolean = window?.enabledUnfinishedFeatures
@@ -45,6 +46,7 @@ export class ViewControllerManager {
  readonly syncStatusController = new SyncStatusController()
  readonly navigationController: NavigationController
  readonly selectionController: SelectedItemsController
+  readonly historyModalController: HistoryModalController

  public isSessionsModalVisible = false

@@ -101,6 +103,8 @@ export class ViewControllerManager {
      this.eventBus,
    )

+    this.historyModalController = new HistoryModalController(this.application, this.eventBus)
+
    this.addAppEventObserver()

    if (this.device.appVersion.includes('-beta')) {
@@ -175,6 +179,9 @@ export class ViewControllerManager {
    this.navigationController.deinit()
    ;(this.navigationController as unknown) = undefined

+    this.historyModalController.deinit()
+    ;(this.historyModalController as unknown) = undefined
+
    destroyAllObjectProperties(this)
  }