From 110c5ff47fec68d7b86ebdc3dc7b404395d251fb Mon Sep 17 00:00:00 2001
From: Aman Harwara <amanharwara@protonmail.com>
Date: Wed, 14 Sep 2022 20:14:21 +0530
Subject: [PATCH] fix: move mobile nav button next to note/file title (#1568)

---
 .../FileView/FileViewWithoutProtection.tsx    |  4 +++-
 .../NoteGroupView/MobileItemsListButton.tsx   | 22 +++++++++++++++++++
 .../NoteGroupView/NoteGroupView.tsx           | 22 -------------------
 .../Components/NoteView/NoteView.tsx          |  4 +++-
 4 files changed, 28 insertions(+), 24 deletions(-)
 create mode 100644 packages/web/src/javascripts/Components/NoteGroupView/MobileItemsListButton.tsx

diff --git a/packages/web/src/javascripts/Components/FileView/FileViewWithoutProtection.tsx b/packages/web/src/javascripts/Components/FileView/FileViewWithoutProtection.tsx
index c8cbb3797..390aeb8d2 100644
--- a/packages/web/src/javascripts/Components/FileView/FileViewWithoutProtection.tsx
+++ b/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"
diff --git a/packages/web/src/javascripts/Components/NoteGroupView/MobileItemsListButton.tsx b/packages/web/src/javascripts/Components/NoteGroupView/MobileItemsListButton.tsx
new file mode 100644
index 000000000..7639fb365
--- /dev/null
+++ b/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
diff --git a/packages/web/src/javascripts/Components/NoteGroupView/NoteGroupView.tsx b/packages/web/src/javascripts/Components/NoteGroupView/NoteGroupView.tsx
index ae2c9fe46..c87978f98 100644
--- a/packages/web/src/javascripts/Components/NoteGroupView/NoteGroupView.tsx
+++ b/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}
diff --git a/packages/web/src/javascripts/Components/NoteView/NoteView.tsx b/packages/web/src/javascripts/Components/NoteView/NoteView.tsx
index fddb5e4aa..9b34b58d8 100644
--- a/packages/web/src/javascripts/Components/NoteView/NoteView.tsx
+++ b/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"