feat: responsive popovers & menus (#1323)

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

@@ -1,13 +1,12 @@
-import { useCloseOnBlur } from '@/Hooks/useCloseOnBlur'
-import { useCloseOnClickOutside } from '@/Hooks/useCloseOnClickOutside'
 import { observer } from 'mobx-react-lite'
 import NotesOptions from '@/Components/NotesOptions/NotesOptions'
-import { useCallback, useEffect, useRef } from 'react'
+import { useRef } from 'react'
 import { WebApplication } from '@/Application/Application'
 import { NotesController } from '@/Controllers/NotesController'
 import { NavigationController } from '@/Controllers/Navigation/NavigationController'
 import { NoteTagsController } from '@/Controllers/NoteTagsController'
 import { HistoryModalController } from '@/Controllers/NoteHistory/HistoryModalController'
+import Popover from '../Popover/Popover'
 
 type Props = {
   application: WebApplication
@@ -24,43 +23,33 @@ const NotesContextMenu = ({
   noteTagsController,
   historyModalController,
 }: Props) => {
-  const { contextMenuOpen, contextMenuPosition, contextMenuMaxHeight } = notesController
+  const { contextMenuOpen, contextMenuClickLocation } = notesController
 
   const contextMenuRef = useRef<HTMLDivElement>(null)
-  const [closeOnBlur] = useCloseOnBlur(contextMenuRef, (open: boolean) => notesController.setContextMenuOpen(open))
 
-  useCloseOnClickOutside(contextMenuRef, () => notesController.setContextMenuOpen(false))
-
-  const reloadContextMenuLayout = useCallback(() => {
-    notesController.reloadContextMenuLayout()
-  }, [notesController])
-
-  useEffect(() => {
-    window.addEventListener('resize', reloadContextMenuLayout)
-    return () => {
-      window.removeEventListener('resize', reloadContextMenuLayout)
-    }
-  }, [reloadContextMenuLayout])
-
-  return contextMenuOpen ? (
-    <div
-      ref={contextMenuRef}
-      className="max-h-120 fixed z-dropdown-menu flex min-w-80 max-w-xs flex-col overflow-y-auto rounded bg-default py-2 shadow-main"
-      style={{
-        ...contextMenuPosition,
-        maxHeight: contextMenuMaxHeight,
+  return (
+    <Popover
+      align="start"
+      anchorPoint={{
+        x: contextMenuClickLocation.x,
+        y: contextMenuClickLocation.y,
       }}
+      className="py-2"
+      open={contextMenuOpen}
+      side="right"
+      togglePopover={() => notesController.setContextMenuOpen(!contextMenuOpen)}
     >
-      <NotesOptions
-        application={application}
-        closeOnBlur={closeOnBlur}
-        navigationController={navigationController}
-        notesController={notesController}
-        noteTagsController={noteTagsController}
-        historyModalController={historyModalController}
-      />
-    </div>
-  ) : null
+      <div ref={contextMenuRef}>
+        <NotesOptions
+          application={application}
+          navigationController={navigationController}
+          notesController={notesController}
+          noteTagsController={noteTagsController}
+          historyModalController={historyModalController}
+        />
+      </div>
+    </Popover>
+  )
 }
 
 export default observer(NotesContextMenu)