refactor: fix history modal header & popover headers

packages/web/src/javascripts/Components/Popover/MobilePopoverContent.tsx

@@ -2,6 +2,7 @@ import { useDisableBodyScrollOnMobile } from '@/Hooks/useDisableBodyScrollOnMobi
 import { classNames } from '@standardnotes/snjs'
 import { ReactNode } from 'react'
 import Portal from '../Portal/Portal'
+import MobileModalAction from '../Shared/MobileModalAction'
 import { useModalAnimation } from '../Shared/useModalAnimation'
 
 const DisableScroll = () => {
@@ -36,12 +37,12 @@ const MobilePopoverContent = ({
         ref={setPopoverElement}
         className="fixed top-0 left-0 z-modal flex h-full w-full flex-col bg-default pt-safe-top pb-safe-bottom"
       >
-        <div className="flex items-center justify-between border-b border-border py-2.5 px-3 text-base">
+        <div className="grid w-full grid-cols-[0.35fr_1fr_0.35fr] gap-2 border-b border-border py-1.5 px-2 text-base">
           <div />
-          <div className="font-semibold">{title}</div>
+          <div className="flex items-center justify-center font-semibold">{title}</div>
-          <button className="font-semibold text-info active:shadow-none active:outline-none" onClick={requestClose}>
+          <MobileModalAction type="primary" slot="right" action={requestClose}>
             Done
-          </button>
+          </MobileModalAction>
         </div>
         <div className={classNames('h-full overflow-y-auto', className)}>{children}</div>
       </div>

packages/web/src/javascripts/Components/RevisionHistoryModal/HistoryModalDialogContent.tsx

@@ -1,5 +1,5 @@
 import { observer } from 'mobx-react-lite'
-import { useState } from 'react'
+import { useRef, useState } from 'react'
 import HistoryListContainer from './HistoryListContainer'
 import { RevisionHistoryModalContentProps } from './RevisionHistoryModalProps'
 import HistoryModalFooter from './HistoryModalFooter'
@@ -8,6 +8,8 @@ import { NoteHistoryController } from '@/Controllers/NoteHistory/NoteHistoryCont
 import Icon from '../Icon/Icon'
 import { classNames } from '@standardnotes/utils'
 import { HistoryModalMobileTab } from './utils'
+import MobileModalAction from '../Shared/MobileModalAction'
+import Popover from '../Popover/Popover'
 
 const HistoryModalDialogContent = ({
   application,
@@ -19,37 +21,52 @@ const HistoryModalDialogContent = ({
 }: RevisionHistoryModalContentProps) => {
   const [noteHistoryController] = useState(() => new NoteHistoryController(application, note, selectionController))
 
-  const [selectedMobileTab, setSelectedMobileTab] = useState<HistoryModalMobileTab>('Content')
+  const [selectedMobileTab, setSelectedMobileTab] = useState<HistoryModalMobileTab>('List')
+  const tabOptionRef = useRef<HTMLButtonElement>(null)
+  const [showTabMenu, setShowTabMenu] = useState(false)
+  const toggleTabMenu = () => setShowTabMenu((show) => !show)
 
   return (
     <>
-      <div className="flex items-center border-b border-border md:hidden">
+      <div className="grid w-full grid-cols-[0.35fr_1fr_0.35fr] items-center gap-2 border-b border-border py-1 px-2 md:hidden">
-        <button
+        <MobileModalAction type="secondary" action={toggleTabMenu} slot="left" ref={tabOptionRef}>
-          className={classNames(
+          <div className="rounded-full border border-border p-0.5">
-            'relative cursor-pointer border-0 bg-default px-3 py-2.5 text-sm focus:shadow-inner',
+            <Icon type="more" />
-            selectedMobileTab === 'List' ? 'font-medium text-info shadow-bottom' : 'text-text',
+          </div>
-          )}
+        </MobileModalAction>
-          onClick={() => {
+        <Popover
-            setSelectedMobileTab('List')
+          title="Advanced"
-          }}
+          open={showTabMenu}
+          anchorElement={tabOptionRef.current}
+          disableMobileFullscreenTakeover={true}
+          togglePopover={toggleTabMenu}
+          align="start"
+          portal={false}
+          className="w-1/2 !min-w-0 divide-y divide-border border border-border"
         >
-          List
+          <button
-        </button>
+            onClick={() => {
-        <button
+              setSelectedMobileTab('List')
-          className={classNames(
+              toggleTabMenu()
-            'relative cursor-pointer border-0 bg-default px-3 py-2.5 text-sm focus:shadow-inner',
+            }}
-            selectedMobileTab === 'Content' ? 'font-medium text-info shadow-bottom' : 'text-text',
+            className="p-1.5 text-base font-semibold hover:bg-contrast focus:bg-info-backdrop focus:shadow-none focus:outline-none"
-          )}
+          >
-          onClick={() => {
+            List
-            setSelectedMobileTab('Content')
+          </button>
-          }}
+          <button
-        >
+            onClick={() => {
-          Content
+              setSelectedMobileTab('Content')
-        </button>
+              toggleTabMenu()
-        <div className="mx-auto text-base font-semibold">History</div>
+            }}
-        <button className="ml-auto mr-2 rounded-full border border-border p-1.5" onClick={dismissModal}>
+            className="p-1.5 text-base font-semibold hover:bg-contrast focus:bg-info-backdrop focus:shadow-none focus:outline-none"
-          <Icon type="close" className="h-4 w-4" />
+          >
-        </button>
+            Content
+          </button>
+        </Popover>
+        <div className="text-center text-base font-semibold">History</div>
+        <MobileModalAction type="primary" slot="right" action={dismissModal}>
+          Done
+        </MobileModalAction>
       </div>
       <div className="flex min-h-0 flex-grow">
         <div