feat: on mobile goto content tab after selecting revision (#1611)

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

@@ -1,18 +1,20 @@
 import { NoteHistoryController } from '@/Controllers/NoteHistory/NoteHistoryController'
 import { FeaturesClientInterface } from '@standardnotes/snjs'
 import { observer } from 'mobx-react-lite'
-import { FunctionComponent } from 'react'
+import { FunctionComponent, useCallback } from 'react'
 import LegacyHistoryList from './LegacyHistoryList'
 import RemoteHistoryList from './RemoteHistoryList'
 import { RevisionType } from './RevisionType'
 import SessionHistoryList from './SessionHistoryList'
+import { HistoryModalMobileTab } from './utils'
 
 type Props = {
   features: FeaturesClientInterface
   noteHistoryController: NoteHistoryController
+  selectMobileModalTab: (tab: HistoryModalMobileTab) => void
 }
 
-const HistoryListContainer: FunctionComponent<Props> = ({ features, noteHistoryController }) => {
+const HistoryListContainer: FunctionComponent<Props> = ({ features, noteHistoryController, selectMobileModalTab }) => {
   const { legacyHistory, currentTab, selectTab } = noteHistoryController
 
   const TabButton: FunctionComponent<{
@@ -34,14 +36,30 @@ const HistoryListContainer: FunctionComponent<Props> = ({ features, noteHistoryC
     )
   }
 
+  const onSelectRevision = useCallback(() => {
+    selectMobileModalTab('Content')
+  }, [selectMobileModalTab])
+
   const CurrentTabList = () => {
     switch (currentTab) {
       case RevisionType.Remote:
-        return <RemoteHistoryList features={features} noteHistoryController={noteHistoryController} />
+        return (
+          <RemoteHistoryList
+            onSelectRevision={onSelectRevision}
+            features={features}
+            noteHistoryController={noteHistoryController}
+          />
+        )
       case RevisionType.Session:
-        return <SessionHistoryList noteHistoryController={noteHistoryController} />
+        return <SessionHistoryList onSelectRevision={onSelectRevision} noteHistoryController={noteHistoryController} />
       case RevisionType.Legacy:
-        return <LegacyHistoryList legacyHistory={legacyHistory} noteHistoryController={noteHistoryController} />
+        return (
+          <LegacyHistoryList
+            onSelectRevision={onSelectRevision}
+            legacyHistory={legacyHistory}
+            noteHistoryController={noteHistoryController}
+          />
+        )
     }
   }
 

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

@@ -7,6 +7,7 @@ import HistoryModalContentPane from './HistoryModalContentPane'
 import { NoteHistoryController } from '@/Controllers/NoteHistory/NoteHistoryController'
 import Icon from '../Icon/Icon'
 import { classNames } from '@/Utils/ConcatenateClassNames'
+import { HistoryModalMobileTab } from './utils'
 
 const HistoryModalDialogContent = ({
   application,
@@ -18,7 +19,7 @@ const HistoryModalDialogContent = ({
 }: RevisionHistoryModalContentProps) => {
   const [noteHistoryController] = useState(() => new NoteHistoryController(application, note, selectionController))
 
-  const [selectedMobileTab, setSelectedMobileTab] = useState<'List' | 'Content'>('Content')
+  const [selectedMobileTab, setSelectedMobileTab] = useState<HistoryModalMobileTab>('Content')
 
   return (
     <>
@@ -56,7 +57,11 @@ const HistoryModalDialogContent = ({
             selectedMobileTab === 'List' ? 'flex' : 'hidden',
           )}
         >
-          <HistoryListContainer features={application.features} noteHistoryController={noteHistoryController} />
+          <HistoryListContainer
+            features={application.features}
+            noteHistoryController={noteHistoryController}
+            selectMobileModalTab={setSelectedMobileTab}
+          />
         </div>
         <div
           className={classNames(

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

@@ -7,9 +7,10 @@ import { NoteHistoryController } from '@/Controllers/NoteHistory/NoteHistoryCont
 type Props = {
   legacyHistory: Action[] | undefined
   noteHistoryController: NoteHistoryController
+  onSelectRevision: () => void
 }
 
-const LegacyHistoryList: FunctionComponent<Props> = ({ legacyHistory, noteHistoryController }) => {
+const LegacyHistoryList: FunctionComponent<Props> = ({ legacyHistory, noteHistoryController, onSelectRevision }) => {
   const { selectLegacyRevision, selectedEntry } = noteHistoryController
 
   const legacyHistoryListRef = useRef<HTMLDivElement>(null)
@@ -33,6 +34,7 @@ const LegacyHistoryList: FunctionComponent<Props> = ({ legacyHistory, noteHistor
             isSelected={selectedEntryUrl === url}
             onClick={() => {
               selectLegacyRevision(entry)
+              onSelectRevision()
             }}
           >
             {entry.label}

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

@@ -12,9 +12,14 @@ import { PremiumFeatureIconClass, PremiumFeatureIconName } from '../Icon/Premium
 type RemoteHistoryListProps = {
   features: FeaturesClientInterface
   noteHistoryController: NoteHistoryController
+  onSelectRevision: () => void
 }
 
-const RemoteHistoryList: FunctionComponent<RemoteHistoryListProps> = ({ features, noteHistoryController }) => {
+const RemoteHistoryList: FunctionComponent<RemoteHistoryListProps> = ({
+  features,
+  noteHistoryController,
+  onSelectRevision,
+}) => {
   const { remoteHistory, isFetchingRemoteHistory, selectRemoteRevision, selectedEntry } = noteHistoryController
 
   const remoteHistoryListRef = useRef<HTMLDivElement>(null)
@@ -44,6 +49,7 @@ const RemoteHistoryList: FunctionComponent<RemoteHistoryListProps> = ({ features
                   isSelected={(selectedEntry as RevisionListEntry)?.uuid === entry.uuid}
                   onClick={() => {
                     selectRemoteRevision(entry)
+                    onSelectRevision()
                   }}
                 >
                   <div className="flex flex-grow items-center justify-between">

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

@@ -6,9 +6,10 @@ import { NoteHistoryController } from '@/Controllers/NoteHistory/NoteHistoryCont
 
 type Props = {
   noteHistoryController: NoteHistoryController
+  onSelectRevision: () => void
 }
 
-const SessionHistoryList: FunctionComponent<Props> = ({ noteHistoryController }) => {
+const SessionHistoryList: FunctionComponent<Props> = ({ noteHistoryController, onSelectRevision }) => {
   const { sessionHistory, selectedRevision, selectSessionRevision } = noteHistoryController
 
   const sessionHistoryListRef = useRef<HTMLDivElement>(null)
@@ -40,6 +41,7 @@ const SessionHistoryList: FunctionComponent<Props> = ({ noteHistoryController })
                   isSelected={selectedRevision?.payload.updated_at === entry.payload.updated_at}
                   onClick={() => {
                     selectSessionRevision(entry)
+                    onSelectRevision()
                   }}
                 >
                   {entry.previewTitle()}

packages/web/src/javascripts/Components/RevisionHistoryModal/utils.ts

@@ -2,6 +2,8 @@ import { DAYS_IN_A_WEEK, DAYS_IN_A_YEAR } from '@/Constants/Constants'
 import { HistoryEntry, NoteHistoryEntry, RevisionListEntry } from '@standardnotes/snjs'
 import { calculateDifferenceBetweenDatesInDays } from '../../Utils/CalculateDifferenceBetweenDatesInDays'
 
+export type HistoryModalMobileTab = 'Content' | 'List'
+
 export type LegacyHistoryEntry = {
   payload: HistoryEntry['payload']
   created_at: string