fix: move mobile nav button next to note/file title (#1568)

packages/web/src/javascripts/Components/FileView/FileViewWithoutProtection.tsx

@@ -4,6 +4,7 @@ import { ChangeEventHandler, useCallback, useRef } from 'react'
 import FileOptionsPanel from '@/Components/FileContextMenu/FileOptionsPanel'
 import FilePreview from '@/Components/FilePreview/FilePreview'
 import { FileViewProps } from './FileViewProps'
+import MobileItemsListButton from '../NoteGroupView/MobileItemsListButton'
 
 const SyncTimeoutNoDebounceMs = 100
 const SyncTimeoutDebounceMs = 350
@@ -36,7 +37,8 @@ const FileViewWithoutProtection = ({ application, viewControllerManager, file }:
           id="file-title-bar"
         >
           <div className="flex h-8 items-center justify-between">
-            <div className="flex-grow">
+            <div className="flex flex-grow items-center">
+              <MobileItemsListButton />
               <div className="title overflow-auto">
                 <input
                   className="input text-lg"

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

@@ -0,0 +1,22 @@
+import { AppPaneId } from '../ResponsivePane/AppPaneMetadata'
+import Icon from '../Icon/Icon'
+import { useResponsiveAppPane } from '../ResponsivePane/ResponsivePaneProvider'
+
+const MobileItemsListButton = () => {
+  const { toggleAppPane } = useResponsiveAppPane()
+
+  return (
+    <button
+      className="bg-text-padding mr-3 flex h-8 min-w-8 cursor-pointer items-center justify-center rounded-full border border-solid border-border text-neutral hover:bg-contrast focus:bg-contrast md:hidden"
+      onClick={() => {
+        toggleAppPane(AppPaneId.Items)
+      }}
+      title="Go to items list"
+      aria-label="Go to items list"
+    >
+      <Icon type="chevron-left" />
+    </button>
+  )
+}
+
+export default MobileItemsListButton

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

@@ -9,27 +9,6 @@ import FileView from '@/Components/FileView/FileView'
 import { FileDnDContext } from '@/Components/FileDragNDropProvider/FileDragNDropProvider'
 import { AppPaneId } from '../ResponsivePane/AppPaneMetadata'
 import ResponsivePaneContent from '../ResponsivePane/ResponsivePaneContent'
-import Icon from '../Icon/Icon'
-import { useResponsiveAppPane } from '../ResponsivePane/ResponsivePaneProvider'
-
-const MobileItemsListButton = () => {
-  const { toggleAppPane } = useResponsiveAppPane()
-
-  return (
-    <div className="px-3.5 pt-2.5 md:hidden">
-      <button
-        className="bg-text-padding flex h-8 min-w-8 cursor-pointer items-center justify-center rounded-full border border-solid border-border text-neutral hover:bg-contrast focus:bg-contrast"
-        onClick={() => {
-          toggleAppPane(AppPaneId.Items)
-        }}
-        title="Go to items list"
-        aria-label="Go to items list"
-      >
-        <Icon type="chevron-left" />
-      </button>
-    </div>
-  )
-}
 
 type State = {
   showMultipleSelectedNotes: boolean
@@ -115,7 +94,6 @@ class NoteGroupView extends PureComponent<Props, State> {
         className="app-column app-column-third flex min-h-screen flex-col md:h-full md:min-h-0"
       >
         <ResponsivePaneContent paneId={AppPaneId.Editor} className="flex-grow">
-          <MobileItemsListButton />
           {this.state.showMultipleSelectedNotes && (
             <MultipleSelectedNotes
               application={this.application}

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

@@ -38,6 +38,7 @@ import { NoteViewProps } from './NoteViewProps'
 import IndicatorCircle from '../IndicatorCircle/IndicatorCircle'
 import { classNames } from '@/Utils/ConcatenateClassNames'
 import AutoresizingNoteViewTextarea from './AutoresizingTextarea'
+import MobileItemsListButton from '../NoteGroupView/MobileItemsListButton'
 
 const MINIMUM_STATUS_DURATION = 400
 const TEXTAREA_DEBOUNCE = 100
@@ -913,7 +914,8 @@ class NoteView extends PureComponent<NoteViewProps, State> {
         {this.note && (
           <div id="editor-title-bar" className="content-title-bar section-title-bar z-editor-title-bar w-full">
             <div className="mb-2 flex flex-wrap items-start justify-between gap-2 md:mb-0 md:flex-nowrap md:gap-0 xl:items-center">
-              <div className={(this.state.noteLocked ? 'locked' : '') + ' flex-grow'}>
+              <div className={classNames(this.state.noteLocked && 'locked', 'flex flex-grow items-center')}>
+                <MobileItemsListButton />
                 <div className="title overflow-auto">
                   <input
                     className="input text-lg"