refactor: mobile modals (#2173)

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

@@ -42,6 +42,7 @@ import { MutuallyExclusiveMediaQueryBreakpoints, useMediaQuery } from '@/Hooks/u
 import { HistoryModalController } from '@/Controllers/NoteHistory/HistoryModalController'
 import { PaneController } from '@/Controllers/PaneController/PaneController'
 import EmptyFilesView from './EmptyFilesView'
+import { PaneLayout } from '@/Controllers/PaneController/PaneLayout'
 
 type Props = {
   accountMenuController: AccountMenuController
@@ -86,7 +87,7 @@ const ContentListView = forwardRef<HTMLDivElement, Props>(
     },
     ref,
   ) => {
-    const { toggleAppPane, panes } = useResponsiveAppPane()
+    const { setPaneLayout, panes } = useResponsiveAppPane()
     const { selectedUuids, selectNextItem, selectPreviousItem } = selectionController
     const { selected: selectedTag, selectedAsTag } = navigationController
     const {
@@ -185,9 +186,9 @@ const ContentListView = forwardRef<HTMLDivElement, Props>(
         void filesController.selectAndUploadNewFiles()
       } else {
         await createNewNote()
-        toggleAppPane(AppPaneId.Editor)
+        setPaneLayout(PaneLayout.Editing)
       }
-    }, [isFilesSmartView, filesController, createNewNote, toggleAppPane, application])
+    }, [isFilesSmartView, application, filesController, createNewNote, setPaneLayout])
 
     const isMobileScreen = useMediaQuery(MutuallyExclusiveMediaQueryBreakpoints.sm)
     const shouldUseTableView = (isFilesSmartView || isTableViewEnabled) && !isMobileScreen

packages/web/src/javascripts/Components/ContentListView/Header/AddItemMenuButton.tsx

@@ -4,6 +4,7 @@ import Icon from '@/Components/Icon/Icon'
 import Menu from '@/Components/Menu/Menu'
 import MenuItem from '@/Components/Menu/MenuItem'
 import Popover from '@/Components/Popover/Popover'
+import ModalOverlay from '@/Components/Shared/ModalOverlay'
 import { FilesController } from '@/Controllers/FilesController'
 import { PhotoRecorder } from '@/Controllers/Moments/PhotoRecorder'
 import { classNames } from '@standardnotes/snjs'
@@ -40,6 +41,10 @@ const AddItemMenuButton = ({
 
   const canShowMenu = isInFilesSmartView && deviceHasCamera
 
+  const closeCaptureModal = () => {
+    setCaptureType(undefined)
+  }
+
   return (
     <>
       <button
@@ -101,22 +106,12 @@ const AddItemMenuButton = ({
           </MenuItem>
         </Menu>
       </Popover>
-      {captureType === 'photo' && (
-        <PhotoCaptureModal
-          filesController={filesController}
-          close={() => {
-            setCaptureType(undefined)
-          }}
-        />
-      )}
-      {captureType === 'video' && (
-        <VideoCaptureModal
-          filesController={filesController}
-          close={() => {
-            setCaptureType(undefined)
-          }}
-        />
-      )}
+      <ModalOverlay isOpen={captureType === 'photo'} onDismiss={closeCaptureModal}>
+        <PhotoCaptureModal filesController={filesController} close={closeCaptureModal} />
+      </ModalOverlay>
+      <ModalOverlay isOpen={captureType === 'video'} onDismiss={closeCaptureModal}>
+        <VideoCaptureModal filesController={filesController} close={closeCaptureModal} />
+      </ModalOverlay>
     </>
   )
 }