feat: screen presentation and dismiss animations for mobile (#2073)

packages/web/src/javascripts/Components/NoteView/NoteStatusIndicator.tsx

@@ -4,7 +4,7 @@ import { classNames } from '@standardnotes/utils'
 import { ReactNode, useCallback, useState } from 'react'
 import { IconType, PrefKey } from '@standardnotes/snjs'
 import Icon from '../Icon/Icon'
-import { useApplication } from '../ApplicationView/ApplicationProvider'
+import { useApplication } from '../ApplicationProvider'
 
 export type NoteStatus = {
   type: 'saving' | 'saved' | 'error'

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

@@ -9,7 +9,7 @@ import { ElementIds } from '@/Constants/ElementIDs'
 import { PrefDefaults } from '@/Constants/PrefDefaults'
 import { StringDeleteNote, STRING_DELETE_LOCKED_ATTEMPT, STRING_DELETE_PLACEHOLDER_ATTEMPT } from '@/Constants/Strings'
 import { log, LoggingDomain } from '@/Logging'
-import { debounce, isDesktopApplication, isMobileScreen } from '@/Utils'
+import { debounce, isDesktopApplication, isMobileScreen, isTabletOrMobileScreen } from '@/Utils'
 import { classNames } from '@standardnotes/utils'
 import {
   ApplicationEvent,
@@ -672,10 +672,9 @@ class NoteView extends AbstractComponent<NoteViewProps, State> {
       PrefDefaults[PrefKey.EditorMonospaceEnabled],
     )
 
-    const marginResizersEnabled = this.application.getPreference(
-      PrefKey.EditorResizersEnabled,
-      PrefDefaults[PrefKey.EditorResizersEnabled],
-    )
+    const marginResizersEnabled =
+      !isTabletOrMobileScreen() &&
+      this.application.getPreference(PrefKey.EditorResizersEnabled, PrefDefaults[PrefKey.EditorResizersEnabled])
 
     const updateSavingIndicator = this.application.getPreference(
       PrefKey.UpdateSavingStatusIndicator,
@@ -687,7 +686,6 @@ class NoteView extends AbstractComponent<NoteViewProps, State> {
     this.setState({
       monospaceFont,
       marginResizersEnabled,
-
       updateSavingIndicator,
     })
 
@@ -929,6 +927,7 @@ class NoteView extends AbstractComponent<NoteViewProps, State> {
               left={this.state.leftResizerOffset}
               width={this.state.leftResizerWidth}
               resizeFinishCallback={this.onPanelResizeFinish}
+              modifyElementWidth={true}
             />
           ) : null}
 
@@ -980,6 +979,7 @@ class NoteView extends AbstractComponent<NoteViewProps, State> {
               left={this.state.rightResizerOffset}
               width={this.state.rightResizerWidth}
               resizeFinishCallback={this.onPanelResizeFinish}
+              modifyElementWidth={true}
             />
           ) : null}
         </div>

packages/web/src/javascripts/Components/NoteView/NoteViewFileDropTarget.tsx

@@ -2,7 +2,7 @@ import { FilesController } from '@/Controllers/FilesController'
 import { LinkingController } from '@/Controllers/LinkingController'
 import { SNNote } from '@standardnotes/snjs'
 import { useEffect } from 'react'
-import { useFileDragNDrop } from '../FileDragNDropProvider/FileDragNDropProvider'
+import { useFileDragNDrop } from '../FileDragNDropProvider'
 
 type Props = {
   note: SNNote

packages/web/src/javascripts/Components/NoteView/SuperEditor/Plugins/EncryptedFilePlugin/Nodes/FileComponent.tsx

@@ -1,7 +1,7 @@
 import { BlockWithAlignableContents } from '@lexical/react/LexicalBlockWithAlignableContents'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { ElementFormatType, NodeKey } from 'lexical'
-import { useApplication } from '@/Components/ApplicationView/ApplicationProvider'
+import { useApplication } from '@/Components/ApplicationProvider'
 import FilePreview from '@/Components/FilePreview/FilePreview'
 import { FileItem } from '@standardnotes/snjs'
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'

packages/web/src/javascripts/Components/NoteView/SuperEditor/Plugins/ExportPlugin/ExportPlugin.ts

@@ -1,4 +1,4 @@
-import { useApplication } from '@/Components/ApplicationView/ApplicationProvider'
+import { useApplication } from '@/Components/ApplicationProvider'
 import { downloadBlobOnAndroid } from '@/NativeMobileWeb/DownloadBlobOnAndroid'
 import { shareBlobOnMobile } from '@/NativeMobileWeb/ShareBlobOnMobile'
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
@@ -13,7 +13,7 @@ import { useCallback, useEffect } from 'react'
 import { $convertToMarkdownString } from '@lexical/markdown'
 import { MarkdownTransformers } from '@standardnotes/blocks-editor'
 import { $generateHtmlFromNodes } from '@lexical/html'
-import { useCommandService } from '@/Components/ApplicationView/CommandProvider'
+import { useCommandService } from '@/Components/CommandProvider'
 
 export const ExportPlugin = () => {
   const application = useApplication()

packages/web/src/javascripts/Components/NoteView/SuperEditor/Plugins/ItemBubblePlugin/Nodes/BubbleComponent.tsx

@@ -1,10 +1,10 @@
 import { useCallback, useMemo } from 'react'
-import { useApplication } from '@/Components/ApplicationView/ApplicationProvider'
+import { useApplication } from '@/Components/ApplicationProvider'
 import LinkedItemBubble from '@/Components/LinkedItems/LinkedItemBubble'
 import { createLinkFromItem } from '@/Utils/Items/Search/createLinkFromItem'
 import { useLinkingController } from '@/Controllers/LinkingControllerProvider'
 import { LinkableItem } from '@/Utils/Items/Search/LinkableItem'
-import { useResponsiveAppPane } from '@/Components/ResponsivePane/ResponsivePaneProvider'
+import { useResponsiveAppPane } from '@/Components/Panes/ResponsivePaneProvider'
 import { LexicalNode } from 'lexical'
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
 

packages/web/src/javascripts/Components/NoteView/SuperEditor/Plugins/ItemSelectionPlugin/ItemSelectionPlugin.tsx

@@ -4,7 +4,7 @@ import { TextNode } from 'lexical'
 import { FunctionComponent, useCallback, useMemo, useState } from 'react'
 import { ItemSelectionItemComponent } from './ItemSelectionItemComponent'
 import { ItemOption } from './ItemOption'
-import { useApplication } from '@/Components/ApplicationView/ApplicationProvider'
+import { useApplication } from '@/Components/ApplicationProvider'
 import { ContentType, SNNote } from '@standardnotes/snjs'
 import { getLinkingSearchResults } from '@/Utils/Items/Search/getSearchResults'
 import Popover from '@/Components/Popover/Popover'

packages/web/src/javascripts/Components/NoteView/SuperEditor/Plugins/ReadonlyPlugin/ReadonlyPlugin.tsx

@@ -1,4 +1,4 @@
-import { useApplication } from '@/Components/ApplicationView/ApplicationProvider'
+import { useApplication } from '@/Components/ApplicationProvider'
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
 import { SNNote, ContentType } from '@standardnotes/snjs'
 import { useState, useEffect } from 'react'

packages/web/src/javascripts/Components/NoteView/SuperEditor/SuperEditor.tsx

@@ -30,7 +30,7 @@ import {
 } from './Plugins/ChangeContentCallback/ChangeContentCallback'
 import PasswordPlugin from './Plugins/PasswordPlugin/PasswordPlugin'
 import { PrefDefaults } from '@/Constants/PrefDefaults'
-import { useCommandService } from '@/Components/ApplicationView/CommandProvider'
+import { useCommandService } from '@/Components/CommandProvider'
 import { SUPER_SHOW_MARKDOWN_PREVIEW } from '@standardnotes/ui-services'
 import { SuperNoteMarkdownPreview } from './SuperNoteMarkdownPreview'
 import { ExportPlugin } from './Plugins/ExportPlugin/ExportPlugin'