fix(mobile): Fixed issue where pressing the back button on editor screen wouldn't switch back to the items list on Android

packages/web/src/javascripts/Components/ContentListView/FileListItem.tsx

@@ -7,13 +7,13 @@ import ListItemTags from './ListItemTags'
 import ListItemMetadata from './ListItemMetadata'
 import { DisplayableListItemProps } from './Types/DisplayableListItemProps'
 import { useResponsiveAppPane } from '../Panes/ResponsivePaneProvider'
-import { AppPaneId } from '../Panes/AppPaneMetadata'
 import { useContextMenuEvent } from '@/Hooks/useContextMenuEvent'
 import { classNames } from '@standardnotes/utils'
 import { formatSizeToReadableString } from '@standardnotes/filepicker'
 import { getIconForFileType } from '@/Utils/Items/Icons/getIconForFileType'
 import { useApplication } from '../ApplicationProvider'
 import Icon from '../Icon/Icon'
+import { PaneLayout } from '@/Controllers/PaneController/PaneLayout'
 
 const FileListItem: FunctionComponent<DisplayableListItemProps<FileItem>> = ({
   filesController,
@@ -26,7 +26,7 @@ const FileListItem: FunctionComponent<DisplayableListItemProps<FileItem>> = ({
   sortBy,
   tags,
 }) => {
-  const { toggleAppPane } = useResponsiveAppPane()
+  const { setPaneLayout } = useResponsiveAppPane()
   const application = useApplication()
 
   const [backupInfo, setBackupInfo] = useState<FileBackupRecord | undefined>(undefined)
@@ -70,9 +70,9 @@ const FileListItem: FunctionComponent<DisplayableListItemProps<FileItem>> = ({
   const onClick = useCallback(async () => {
     const { didSelect } = await onSelect(file, true)
     if (didSelect) {
-      toggleAppPane(AppPaneId.Editor)
+      setPaneLayout(PaneLayout.Editing)
     }
-  }, [file, onSelect, toggleAppPane])
+  }, [file, onSelect, setPaneLayout])
 
   const IconComponent = () =>
     getFileIconComponent(getIconForFileType((file as FileItem).mimeType), 'w-10 h-10 flex-shrink-0')

packages/web/src/javascripts/Components/Panes/ResponsivePaneProvider.tsx

@@ -14,6 +14,7 @@ import {
 import { AppPaneId } from './AppPaneMetadata'
 import { PaneController } from '../../Controllers/PaneController/PaneController'
 import { observer } from 'mobx-react-lite'
+import { PaneLayout } from '@/Controllers/PaneController/PaneLayout'
 
 type ResponsivePaneData = {
   selectedPane: AppPaneId
@@ -84,7 +85,7 @@ const ResponsivePaneProvider = ({ paneController, children }: ProviderProps) =>
         currentSelectedPaneRef.current === AppPaneId.Editor ||
         currentSelectedPaneRef.current === AppPaneId.Navigation
       ) {
-        toggleAppPane(AppPaneId.Items)
+        paneController.setPaneLayout(PaneLayout.ItemSelection)
         return true
       } else {
         return false
@@ -95,7 +96,7 @@ const ResponsivePaneProvider = ({ paneController, children }: ProviderProps) =>
         removeListener()
       }
     }
-  }, [addAndroidBackHandler, currentSelectedPaneRef, toggleAppPane])
+  }, [addAndroidBackHandler, currentSelectedPaneRef, paneController])
 
   const contextValue = useMemo(
     (): ResponsivePaneData => ({

packages/web/src/javascripts/Components/Tags/Navigation.tsx

@@ -4,7 +4,6 @@ import { WebApplication } from '@/Application/Application'
 import { ApplicationEvent, PrefKey, WebAppEvent } from '@standardnotes/snjs'
 import { observer } from 'mobx-react-lite'
 import { forwardRef, useEffect, useMemo, useState } from 'react'
-import { AppPaneId } from '@/Components/Panes/AppPaneMetadata'
 import { classNames } from '@standardnotes/utils'
 import { useResponsiveAppPane } from '../Panes/ResponsivePaneProvider'
 import UpgradeNow from '../Footer/UpgradeNow'
@@ -12,6 +11,7 @@ import RoundIconButton from '../Button/RoundIconButton'
 import { isIOS } from '@/Utils'
 import { PanelResizedData } from '@/Types/PanelResizedData'
 import { PANEL_NAME_NAVIGATION } from '@/Constants/Constants'
+import { PaneLayout } from '@/Controllers/PaneController/PaneLayout'
 
 type Props = {
   application: WebApplication
@@ -22,7 +22,7 @@ type Props = {
 
 const Navigation = forwardRef<HTMLDivElement, Props>(({ application, className, children, id }, ref) => {
   const viewControllerManager = useMemo(() => application.getViewControllerManager(), [application])
-  const { toggleAppPane } = useResponsiveAppPane()
+  const { setPaneLayout } = useResponsiveAppPane()
 
   const [hasPasscode, setHasPasscode] = useState(() => application.hasPasscode())
   useEffect(() => {
@@ -56,7 +56,7 @@ const Navigation = forwardRef<HTMLDivElement, Props>(({ application, className,
         <RoundIconButton
           className="mr-auto bg-default"
           onClick={() => {
-            toggleAppPane(AppPaneId.Items)
+            setPaneLayout(PaneLayout.ItemSelection)
           }}
           label="Go to items list"
           icon="chevron-left"
@@ -101,7 +101,7 @@ const Navigation = forwardRef<HTMLDivElement, Props>(({ application, className,
         />
       </div>
     )
-  }, [hasPasscode, application, viewControllerManager, toggleAppPane])
+  }, [application, viewControllerManager, hasPasscode, setPaneLayout])
 
   return (
     <div