fix: don't render editor view on mobile if editor pane not selected (#1790)

packages/web/src/javascripts/Components/NoteGroupView/NoteGroupView.tsx

@@ -2,19 +2,21 @@ import { FileItem, FileViewController, NoteViewController } from '@standardnotes
 import { PureComponent } from '@/Components/Abstract/PureComponent'
 import { WebApplication } from '@/Application/Application'
 import MultipleSelectedNotes from '@/Components/MultipleSelectedNotes/MultipleSelectedNotes'
-import NoteView from '@/Components/NoteView/NoteView'
 import MultipleSelectedFiles from '../MultipleSelectedFiles/MultipleSelectedFiles'
 import { ElementIds } from '@/Constants/ElementIDs'
-import FileView from '@/Components/FileView/FileView'
 import { FileDnDContext } from '@/Components/FileDragNDropProvider/FileDragNDropProvider'
 import { AppPaneId } from '../ResponsivePane/AppPaneMetadata'
 import ResponsivePaneContent from '../ResponsivePane/ResponsivePaneContent'
+import FileView from '../FileView/FileView'
+import NoteView from '../NoteView/NoteView'
 
 type State = {
   showMultipleSelectedNotes: boolean
   showMultipleSelectedFiles: boolean
   controllers: (NoteViewController | FileViewController)[]
   selectedFile: FileItem | undefined
+  selectedPane?: AppPaneId
+  isInMobileView?: boolean
 }
 
 type Props = {
@@ -73,6 +75,15 @@ class NoteGroupView extends PureComponent<Props, State> {
         })
       }
     })
+
+    this.autorun(() => {
+      if (this.viewControllerManager && this.viewControllerManager.paneController) {
+        this.setState({
+          selectedPane: this.viewControllerManager.paneController.currentPane,
+          isInMobileView: this.viewControllerManager.paneController.isInMobileView,
+        })
+      }
+    })
   }
 
   override deinit() {
@@ -88,6 +99,10 @@ class NoteGroupView extends PureComponent<Props, State> {
     const shouldNotShowMultipleSelectedItems =
       !this.state.showMultipleSelectedNotes && !this.state.showMultipleSelectedFiles
 
+    const hasControllers = this.state.controllers.length > 0
+
+    const canRenderEditorView = this.state.selectedPane === AppPaneId.Editor || !this.state.isInMobileView
+
     return (
       <div
         id={ElementIds.EditorColumn}
@@ -118,7 +133,7 @@ class NoteGroupView extends PureComponent<Props, State> {
               Drop your files to upload them
             </div>
           )}
-          {shouldNotShowMultipleSelectedItems && this.state.controllers.length > 0 && (
+          {shouldNotShowMultipleSelectedItems && hasControllers && canRenderEditorView && (
             <>
               {this.state.controllers.map((controller) => {
                 return controller instanceof NoteViewController ? (

packages/web/src/javascripts/Controllers/PaneController.ts

@@ -1,19 +1,39 @@
 import { AppPaneId } from './../Components/ResponsivePane/AppPaneMetadata'
 import { isMobileScreen } from '@/Utils'
 import { makeObservable, observable, action } from 'mobx'
+import { Disposer } from '@/Types/Disposer'
+import { MediaQueryBreakpoints } from '@/Hooks/useMediaQuery'
 
 export class PaneController {
   currentPane: AppPaneId = isMobileScreen() ? AppPaneId.Items : AppPaneId.Editor
   previousPane: AppPaneId = isMobileScreen() ? AppPaneId.Items : AppPaneId.Editor
+  isInMobileView = isMobileScreen()
+  protected disposers: Disposer[] = []
 
   constructor() {
     makeObservable(this, {
       currentPane: observable,
       previousPane: observable,
+      isInMobileView: observable,
 
       setCurrentPane: action,
       setPreviousPane: action,
+      setIsInMobileView: action,
     })
+
+    window.matchMedia(MediaQueryBreakpoints.md).addEventListener('change', this.mediumScreenMQHandler)
+  }
+
+  deinit() {
+    window.matchMedia(MediaQueryBreakpoints.md).removeEventListener('change', this.mediumScreenMQHandler)
+  }
+
+  mediumScreenMQHandler = (event: MediaQueryListEvent) => {
+    if (event.matches) {
+      this.isInMobileView = false
+    } else {
+      this.isInMobileView = true
+    }
   }
 
   setCurrentPane(pane: AppPaneId): void {
@@ -23,4 +43,8 @@ export class PaneController {
   setPreviousPane(pane: AppPaneId): void {
     this.previousPane = pane
   }
+
+  setIsInMobileView(isInMobileView: boolean) {
+    this.isInMobileView = isInMobileView
+  }
 }

packages/web/src/javascripts/Controllers/ViewControllerManager.ts

@@ -211,6 +211,8 @@ export class ViewControllerManager {
 
     this.historyModalController.deinit()
     ;(this.historyModalController as unknown) = undefined
+
+    this.paneController.deinit()
     ;(this.paneController as unknown) = undefined
 
     destroyAllObjectProperties(this)