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

packages/web/src/javascripts/Components/QuickSettingsMenu/PanelSettingsSection.tsx

@@ -1,8 +1,8 @@
 import { TOGGLE_LIST_PANE_KEYBOARD_COMMAND, TOGGLE_NAVIGATION_PANE_KEYBOARD_COMMAND } from '@standardnotes/ui-services'
 import { useMemo } from 'react'
 import { observer } from 'mobx-react-lite'
-import { useResponsiveAppPane } from '../ResponsivePane/ResponsivePaneProvider'
-import { useCommandService } from '../ApplicationView/CommandProvider'
+import { useResponsiveAppPane } from '../Panes/ResponsivePaneProvider'
+import { useCommandService } from '../CommandProvider'
 import MenuSwitchButtonItem from '../Menu/MenuSwitchButtonItem'
 
 const PanelSettingsSection = () => {
@@ -25,7 +25,7 @@ const PanelSettingsSection = () => {
     <div className="hidden md:block pointer-coarse:md-only:hidden pointer-coarse:lg-only:hidden">
       <MenuSwitchButtonItem
         className="items-center"
-        checked={isNavigationPaneCollapsed}
+        checked={!isNavigationPaneCollapsed}
         onChange={toggleNavigationPane}
         shortcut={navigationShortcut}
       >
@@ -33,7 +33,7 @@ const PanelSettingsSection = () => {
       </MenuSwitchButtonItem>
       <MenuSwitchButtonItem
         className="items-center"
-        checked={isListPaneCollapsed}
+        checked={!isListPaneCollapsed}
         onChange={toggleListPane}
         shortcut={listShortcut}
       >

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

@@ -23,15 +23,14 @@ import Menu from '../Menu/Menu'
 import MenuSwitchButtonItem from '../Menu/MenuSwitchButtonItem'
 import MenuRadioButtonItem from '../Menu/MenuRadioButtonItem'
 
-export const focusModeAnimationDuration = 1255
-
 type MenuProps = {
   quickSettingsMenuController: QuickSettingsController
   application: WebApplication
 }
 
 const QuickSettingsMenu: FunctionComponent<MenuProps> = ({ application, quickSettingsMenuController }) => {
-  const { closeQuickSettingsMenu, focusModeEnabled, setFocusModeEnabled } = quickSettingsMenuController
+  const { focusModeEnabled, setFocusModeEnabled } = application.paneController
+  const { closeQuickSettingsMenu } = quickSettingsMenuController
   const [themes, setThemes] = useState<ThemeItem[]>([])
   const [toggleableComponents, setToggleableComponents] = useState<SNComponent[]>([])