refactor: history modal (#1122)

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"

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

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

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>

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}
           />
         )}
 

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
+                    <ComponentView key={viewer.identifier} componentViewer={viewer} application={this.application} />
-                      key={viewer.identifier}
-                      componentViewer={viewer}
-                      application={this.application}
-                      viewControllerManager={this.viewControllerManager}
-                    />
                   </div>
                 )
               })}

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

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)
+    historyModalController.openModal(notesController.firstSelectedNote)
-  }, [notesController])
+  }, [historyModalController, notesController.firstSelectedNote])
 
   return (
     <>

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}
           />
         )}

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
 }

packages/web/src/javascripts/Components/RevisionHistoryModal/HistoryListContainer.tsx

@@ -1,75 +1,24 @@
-import { WebApplication } from '@/Application/Application'
+import { NoteHistoryController } from '@/Controllers/NoteHistory/NoteHistoryController'
-import { Action, ActionVerb, HistoryEntry, NoteHistoryEntry, RevisionListEntry, SNNote } from '@standardnotes/snjs'
+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
+  features: FeaturesClientInterface
-  isFetchingRemoteHistory: boolean
+  noteHistoryController: NoteHistoryController
-  note: SNNote
-  remoteHistory: RemoteRevisionListGroup[] | undefined
-  setIsFetchingSelectedRevision: Dispatch<SetStateAction<boolean>>
-  setSelectedRemoteEntry: Dispatch<SetStateAction<RevisionListEntry | undefined>>
-  setSelectedRevision: Dispatch<SetStateAction<HistoryEntry | LegacyHistoryEntry | undefined>>
-  setShowContentLockedScreen: Dispatch<SetStateAction<boolean>>
 }
 
-const HistoryListContainer: FunctionComponent<Props> = ({
+const HistoryListContainer: FunctionComponent<Props> = ({ features, noteHistoryController }) => {
-  application,
+  const { legacyHistory, currentTab, selectTab } = noteHistoryController
-  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 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)
+          selectTab(type)
-          setSelectedRemoteEntry(undefined)
         }}
       >
         {type}
@@ -86,98 +34,26 @@ const HistoryListContainer: FunctionComponent<Props> = ({
     )
   }
 
-  const fetchAndSetLegacyRevision = useCallback(
+  const CurrentTabList = () => {
-    async (revisionListEntry: Action) => {
+    switch (currentTab) {
-      setSelectedRemoteEntry(undefined)
+      case RevisionType.Remote:
-      setSelectedRevision(undefined)
+        return <RemoteHistoryList features={features} noteHistoryController={noteHistoryController} />
-      setIsFetchingSelectedRevision(true)
+      case RevisionType.Session:
-
+        return <SessionHistoryList noteHistoryController={noteHistoryController} />
-      try {
+      case RevisionType.Legacy:
-        if (!revisionListEntry.subactions?.[0]) {
+        return <LegacyHistoryList legacyHistory={legacyHistory} noteHistoryController={noteHistoryController} />
-          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,
-    ],
-  )
 
   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={RevisionType.Remote} />
-        <TabButton type={RevisionListTabType.Session} />
+        <TabButton type={RevisionType.Session} />
-        {legacyHistory && legacyHistory.length > 0 && <TabButton type={RevisionListTabType.Legacy} />}
+        {legacyHistory && legacyHistory.length > 0 && <TabButton type={RevisionType.Legacy} />}
       </div>
       <div className={'min-h-0 overflow-auto py-1.5 h-full'}>
-        {selectedTab === RevisionListTabType.Session && (
+        <CurrentTabList />
-          <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}
-          />
-        )}
       </div>
     </div>
   )

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)

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

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)

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)

packages/web/src/javascripts/Components/RevisionHistoryModal/LegacyHistoryList.tsx

@@ -1,48 +1,21 @@
-import { Action, HistoryEntry, RevisionListEntry } from '@standardnotes/snjs'
+import { Action } from '@standardnotes/snjs'
-import { Dispatch, FunctionComponent, SetStateAction, useCallback, useEffect, useMemo, useRef, useState } from 'react'
+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>>
+  noteHistoryController: NoteHistoryController
-  setSelectedRemoteEntry: Dispatch<SetStateAction<RevisionListEntry | undefined>>
-  fetchAndSetLegacyRevision: (revisionListEntry: Action) => Promise<void>
 }
 
-const LegacyHistoryList: FunctionComponent<Props> = ({
+const LegacyHistoryList: FunctionComponent<Props> = ({ legacyHistory, noteHistoryController }) => {
-  legacyHistory,
+  const { selectLegacyRevision, selectedEntry } = noteHistoryController
-  setSelectedRevision,
+
-  setSelectedRemoteEntry,
-  fetchAndSetLegacyRevision,
-}) => {
   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)
+              selectLegacyRevision(entry)
-              setSelectedRemoteEntry(undefined)
-              fetchAndSetLegacyRevision(entry).catch(console.error)
             }}
           >
             {entry.label}

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
+  features: FeaturesClientInterface
-  remoteHistory: RemoteRevisionListGroup[] | undefined
+  noteHistoryController: NoteHistoryController
-  isFetchingRemoteHistory: boolean
-  fetchAndSetRemoteRevision: (revisionListEntry: RevisionListEntry) => Promise<void>
 }
 
-const RemoteHistoryList: FunctionComponent<RemoteHistoryListProps> = ({
+const RemoteHistoryList: FunctionComponent<RemoteHistoryListProps> = ({ features, noteHistoryController }) => {
-  application,
+  const { remoteHistory, isFetchingRemoteHistory, selectRemoteRevision, selectedEntry } = noteHistoryController
-  remoteHistory,
+
-  isFetchingRemoteHistory,
-  fetchAndSetRemoteRevision,
-}) => {
   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)
+                    selectRemoteRevision(entry)
-                    fetchAndSetRemoteRevision(entry).catch(console.error)
                   }}
                 >
                   <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>
               ))}

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 RevisionContentLocked: FunctionComponent<Props> = ({ subscriptionController }) => {
-  const { userSubscriptionName, isUserSubscriptionExpired, isUserSubscriptionCanceled } =
+  const { userSubscriptionName, isUserSubscriptionExpired, isUserSubscriptionCanceled } = subscriptionController
-    viewControllerManager.subscriptionController
 
   return (
     <div className="flex w-full h-full items-center justify-center">

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)

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
+}

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)

packages/web/src/javascripts/Components/RevisionHistoryModal/RevisionType.tsx

@@ -0,0 +1,5 @@
+export enum RevisionType {
+  Session = 'Session',
+  Remote = 'Remote',
+  Legacy = 'Legacy',
+}

packages/web/src/javascripts/Components/RevisionHistoryModal/SelectedRevisionContent.tsx

@@ -1,39 +1,45 @@
 import { WebApplication } from '@/Application/Application'
-import { ViewControllerManager } from '@/Services/ViewControllerManager'
+import { ContentType, SNNote } from '@standardnotes/snjs'
-import { HistoryEntry, SNComponent, 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
+  noteHistoryController: NoteHistoryController
-  selectedRevision: HistoryEntry | LegacyHistoryEntry
+  notesController: NotesController
-  editorForCurrentNote: SNComponent | undefined
-  templateNoteForRevision: SNNote
 }
 
 const SelectedRevisionContent: FunctionComponent<SelectedRevisionContentProps> = ({
   application,
-  viewControllerManager,
+  noteHistoryController,
-  selectedRevision,
+  notesController,
-  editorForCurrentNote,
-  templateNoteForRevision,
 }) => {
+  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"
-            >
+              value={selectedRevision?.payload.content.text}
-              {selectedRevision.payload.content.text}
+            />
-            </textarea>
           ) : (
             <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
+          <ComponentView key={componentViewer.identifier} componentViewer={componentViewer} application={application} />
-            key={componentViewer.identifier}
-            componentViewer={componentViewer}
-            application={application}
-            viewControllerManager={viewControllerManager}
-          />
         </div>
       )}
     </div>

packages/web/src/javascripts/Components/RevisionHistoryModal/SessionHistoryList.tsx

@@ -1,60 +1,25 @@
-import { HistoryEntry, NoteHistoryEntry, RevisionListEntry } from '@standardnotes/snjs'
+import { Fragment, FunctionComponent, useMemo, useRef } from 'react'
-import {
-  Dispatch,
-  Fragment,
-  FunctionComponent,
-  SetStateAction,
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} 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>[]
+  noteHistoryController: NoteHistoryController
-  setSelectedRevision: Dispatch<SetStateAction<HistoryEntry | LegacyHistoryEntry | undefined>>
-  setSelectedRemoteEntry: Dispatch<SetStateAction<RevisionListEntry | undefined>>
 }
 
-const SessionHistoryList: FunctionComponent<Props> = ({
+const SessionHistoryList: FunctionComponent<Props> = ({ noteHistoryController }) => {
-  sessionHistory,
+  const { sessionHistory, selectedRevision, selectSessionRevision } = noteHistoryController
-  setSelectedRevision,
+
-  setSelectedRemoteEntry,
-}) => {
   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)
+                    selectSessionRevision(entry)
-                    setSelectedRevision(entry)
-                    setSelectedRemoteEntry(undefined)
                   }}
                 >
                   {entry.previewTitle()}
@@ -93,4 +56,4 @@ const SessionHistoryList: FunctionComponent<Props> = ({
   )
 }
 
-export default SessionHistoryList
+export default observer(SessionHistoryList)

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)
+  }
+}

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()
+  }
+}

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
-  }
 }

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)
   }