feat: responsive popovers & menus (#1323)

2022-07-21 02:20:14 +05:30
parent baf7fb0019
commit 2573407851
44 changed files with 1308 additions and 1415 deletions
--- a/packages/web/src/javascripts/Components/AttachedFilesPopover/AttachedFilesButton.tsx
+++ b/packages/web/src/javascripts/Components/AttachedFilesPopover/AttachedFilesButton.tsx
@@ -1,11 +1,7 @@
 import { WebApplication } from '@/Application/Application'
-import { MENU_MARGIN_FROM_APP_BORDER } from '@/Constants/Constants'
-import { Disclosure, DisclosureButton, DisclosurePanel } from '@reach/disclosure'
-import VisuallyHidden from '@reach/visually-hidden'
 import { observer } from 'mobx-react-lite'
 import { FunctionComponent, useCallback, useEffect, useRef, useState } from 'react'
 import Icon from '@/Components/Icon/Icon'
-import { useCloseOnBlur } from '@/Hooks/useCloseOnBlur'
 import AttachedFilesPopover from './AttachedFilesPopover'
 import { usePremiumModal } from '@/Hooks/usePremiumModal'
 import { PopoverTabs } from './PopoverTabs'
@@ -18,6 +14,8 @@ import { SelectedItemsController } from '@/Controllers/SelectedItemsController'
 import { useFileDragNDrop } from '@/Components/FileDragNDropProvider/FileDragNDropProvider'
 import { FileItem, SNNote } from '@standardnotes/snjs'
 import { addToast, ToastType } from '@standardnotes/toast'
+import { classNames } from '@/Utils/ConcatenateClassNames'
+import Popover from '../Popover/Popover'

 type Props = {
  application: WebApplication
@@ -34,7 +32,6 @@ const AttachedFilesButton: FunctionComponent<Props> = ({
  application,
  featuresController,
  filesController,
-  filePreviewModalController,
  navigationController,
  notesController,
  selectionController,
@@ -46,24 +43,9 @@ const AttachedFilesButton: FunctionComponent<Props> = ({
  const premiumModal = usePremiumModal()
  const note: SNNote | undefined = notesController.firstSelectedNote

-  const [open, setOpen] = useState(false)
-  const [position, setPosition] = useState({
-    top: 0,
-    right: 0,
-  })
-  const [maxHeight, setMaxHeight] = useState<number | 'auto'>('auto')
+  const [isOpen, setIsOpen] = useState(false)
  const buttonRef = useRef<HTMLButtonElement>(null)
-  const panelRef = useRef<HTMLDivElement>(null)
  const containerRef = useRef<HTMLDivElement>(null)
-  const [closeOnBlur, keepMenuOpen] = useCloseOnBlur(containerRef, setOpen)
-
-  useEffect(() => {
-    if (filePreviewModalController.isOpen) {
-      keepMenuOpen(true)
-    } else {
-      keepMenuOpen(false)
-    }
-  }, [filePreviewModalController.isOpen, keepMenuOpen])

  const [currentTab, setCurrentTab] = useState(
    navigationController.isInFilesView ? PopoverTabs.AllFiles : PopoverTabs.AttachedFiles,
@@ -78,29 +60,14 @@ const AttachedFilesButton: FunctionComponent<Props> = ({
  }, [currentTab, isAttachedTabDisabled])

  const toggleAttachedFilesMenu = useCallback(async () => {
-    const rect = buttonRef.current?.getBoundingClientRect()
-    if (rect) {
-      const { clientHeight } = document.documentElement
-      const footerElementRect = document.getElementById('footer-bar')?.getBoundingClientRect()
-      const footerHeightInPx = footerElementRect?.height
+    const newOpenState = !isOpen

-      if (footerHeightInPx) {
-        setMaxHeight(clientHeight - rect.bottom - footerHeightInPx - MENU_MARGIN_FROM_APP_BORDER)
-      }
-
-      setPosition({
-        top: rect.bottom,
-        right: document.body.clientWidth - rect.right,
-      })
-
-      const newOpenState = !open
-      if (newOpenState && onClickPreprocessing) {
-        await onClickPreprocessing()
-      }
-
-      setOpen(newOpenState)
+    if (newOpenState && onClickPreprocessing) {
+      await onClickPreprocessing()
    }
-  }, [onClickPreprocessing, open])
+
+    setIsOpen(newOpenState)
+  }, [onClickPreprocessing, isOpen])

  const prospectivelyShowFilesPremiumModal = useCallback(() => {
    if (!featuresController.hasFiles) {
@@ -132,10 +99,10 @@ const AttachedFilesButton: FunctionComponent<Props> = ({
  const { isDraggingFiles, addFilesDragInCallback, addFilesDropCallback } = useFileDragNDrop()

  useEffect(() => {
-    if (isDraggingFiles && !open) {
+    if (isDraggingFiles && !isOpen) {
      void toggleAttachedFilesMenu()
    }
-  }, [isDraggingFiles, open, toggleAttachedFilesMenu])
+  }, [isDraggingFiles, isOpen, toggleAttachedFilesMenu])

  const filesDragInCallback = useCallback((tab: PopoverTabs) => {
    setCurrentTab(tab)
@@ -162,53 +129,41 @@ const AttachedFilesButton: FunctionComponent<Props> = ({

  return (
    <div ref={containerRef}>
-      <Disclosure open={open} onChange={toggleAttachedFilesMenuWithEntitlementCheck}>
-        <DisclosureButton
-          onKeyDown={(event) => {
-            if (event.key === 'Escape') {
-              setOpen(false)
-            }
-          }}
-          ref={buttonRef}
-          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 ${
-            attachedFilesCount > 0 ? 'py-1 px-3' : ''
-          }`}
-          onBlur={closeOnBlur}
-        >
-          <VisuallyHidden>Attached files</VisuallyHidden>
-          <Icon type="attachment-file" className="block" />
-          {attachedFilesCount > 0 && <span className="ml-2 text-sm">{attachedFilesCount}</span>}
-        </DisclosureButton>
-        <DisclosurePanel
-          onKeyDown={(event) => {
-            if (event.key === 'Escape') {
-              setOpen(false)
-              buttonRef.current?.focus()
-            }
-          }}
-          ref={panelRef}
-          style={{
-            ...position,
-            maxHeight,
-          }}
-          className="slide-down-animation max-h-120 fixed flex min-w-80 max-w-xs flex-col overflow-y-auto rounded bg-default shadow-main transition-transform duration-150"
-          onBlur={closeOnBlur}
-        >
-          {open && (
-            <AttachedFilesPopover
-              application={application}
-              filesController={filesController}
-              attachedFiles={attachedFiles}
-              allFiles={allFiles}
-              closeOnBlur={closeOnBlur}
-              currentTab={currentTab}
-              isDraggingFiles={isDraggingFiles}
-              setCurrentTab={setCurrentTab}
-              attachedTabDisabled={isAttachedTabDisabled}
-            />
-          )}
-        </DisclosurePanel>
-      </Disclosure>
+      <button
+        className={classNames(
+          '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',
+          attachedFilesCount > 0 ? 'py-1 px-3' : '',
+        )}
+        title="Attached files"
+        aria-label="Attached files"
+        onClick={toggleAttachedFilesMenuWithEntitlementCheck}
+        ref={buttonRef}
+        onKeyDown={(event) => {
+          if (event.key === 'Escape') {
+            setIsOpen(false)
+          }
+        }}
+      >
+        <Icon type="attachment-file" />
+        {attachedFilesCount > 0 && <span className="ml-2 text-sm">{attachedFilesCount}</span>}
+      </button>
+      <Popover
+        togglePopover={toggleAttachedFilesMenuWithEntitlementCheck}
+        anchorElement={buttonRef.current}
+        open={isOpen}
+        className="pt-2 md:pt-0"
+      >
+        <AttachedFilesPopover
+          application={application}
+          filesController={filesController}
+          attachedFiles={attachedFiles}
+          allFiles={allFiles}
+          currentTab={currentTab}
+          isDraggingFiles={isDraggingFiles}
+          setCurrentTab={setCurrentTab}
+          attachedTabDisabled={isAttachedTabDisabled}
+        />
+      </Popover>
    </div>
  )
 }
--- a/packages/web/src/javascripts/Components/AttachedFilesPopover/AttachedFilesPopover.tsx
+++ b/packages/web/src/javascripts/Components/AttachedFilesPopover/AttachedFilesPopover.tsx
@@ -16,7 +16,6 @@ type Props = {
  filesController: FilesController
  allFiles: FileItem[]
  attachedFiles: FileItem[]
-  closeOnBlur: (event: { relatedTarget: EventTarget | null }) => void
  currentTab: PopoverTabs
  isDraggingFiles: boolean
  setCurrentTab: Dispatch<SetStateAction<PopoverTabs>>
@@ -28,7 +27,6 @@ const AttachedFilesPopover: FunctionComponent<Props> = ({
  filesController,
  allFiles,
  attachedFiles,
-  closeOnBlur,
  currentTab,
  isDraggingFiles,
  setCurrentTab,
@@ -87,7 +85,6 @@ const AttachedFilesPopover: FunctionComponent<Props> = ({
          onClick={() => {
            setCurrentTab(PopoverTabs.AttachedFiles)
          }}
-          onBlur={closeOnBlur}
          disabled={attachedTabDisabled}
        >
          Attached
@@ -100,7 +97,6 @@ const AttachedFilesPopover: FunctionComponent<Props> = ({
          onClick={() => {
            setCurrentTab(PopoverTabs.AllFiles)
          }}
-          onBlur={closeOnBlur}
        >
          All files
        </button>
@@ -117,7 +113,6 @@ const AttachedFilesPopover: FunctionComponent<Props> = ({
                onInput={(e) => {
                  setSearchQuery((e.target as HTMLInputElement).value)
                }}
-                onBlur={closeOnBlur}
                ref={searchInputRef}
              />
              {searchQuery.length > 0 && (
@@ -127,7 +122,6 @@ const AttachedFilesPopover: FunctionComponent<Props> = ({
                    setSearchQuery('')
                    searchInputRef.current?.focus()
                  }}
-                  onBlur={closeOnBlur}
                >
                  <Icon type="clear-circle-filled" className="text-neutral" />
                </button>
@@ -144,7 +138,6 @@ const AttachedFilesPopover: FunctionComponent<Props> = ({
                isAttachedToNote={attachedFiles.includes(file)}
                handleFileAction={filesController.handleFileAction}
                getIconType={application.iconsController.getIconForFileType}
-                closeOnBlur={closeOnBlur}
                previewHandler={previewHandler}
              />
            )
@@ -161,7 +154,7 @@ const AttachedFilesPopover: FunctionComponent<Props> = ({
                ? 'No files attached to this note'
                : 'No files found in this account'}
            </div>
-            <Button onClick={handleAttachFilesClick} onBlur={closeOnBlur}>
+            <Button onClick={handleAttachFilesClick}>
              {currentTab === PopoverTabs.AttachedFiles ? 'Attach' : 'Upload'} files
            </Button>
            <div className="mt-3 text-xs text-passive-0">Or drop your files here</div>
@@ -172,7 +165,6 @@ const AttachedFilesPopover: FunctionComponent<Props> = ({
        <button
          className="flex w-full cursor-pointer items-center border-0 border-t border-solid border-border bg-transparent px-3 py-3 text-left text-sm text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none"
          onClick={handleAttachFilesClick}
-          onBlur={closeOnBlur}
        >
          <Icon type="add" className="mr-2 text-neutral" />
          {currentTab === PopoverTabs.AttachedFiles ? 'Attach' : 'Upload'} files
--- a/packages/web/src/javascripts/Components/AttachedFilesPopover/PopoverFileItem.tsx
+++ b/packages/web/src/javascripts/Components/AttachedFilesPopover/PopoverFileItem.tsx
@@ -22,7 +22,6 @@ const PopoverFileItem: FunctionComponent<PopoverFileItemProps> = ({
  isAttachedToNote,
  handleFileAction,
  getIconType,
-  closeOnBlur,
  previewHandler,
 }) => {
  const [fileName, setFileName] = useState(file.name)
@@ -116,7 +115,6 @@ const PopoverFileItem: FunctionComponent<PopoverFileItemProps> = ({
        isAttachedToNote={isAttachedToNote}
        handleFileAction={handleFileAction}
        setIsRenamingFile={setIsRenamingFile}
-        closeOnBlur={closeOnBlur}
        previewHandler={previewHandler}
      />
    </div>
--- a/packages/web/src/javascripts/Components/AttachedFilesPopover/PopoverFileItemProps.tsx
+++ b/packages/web/src/javascripts/Components/AttachedFilesPopover/PopoverFileItemProps.tsx
@@ -8,7 +8,6 @@ type CommonProps = {
  handleFileAction: (action: PopoverFileItemAction) => Promise<{
    didHandleAction: boolean
  }>
-  closeOnBlur: (event: { relatedTarget: EventTarget | null }) => void
  previewHandler: (file: FileItem) => void
 }

--- a/packages/web/src/javascripts/Components/AttachedFilesPopover/PopoverFileSubmenu.tsx
+++ b/packages/web/src/javascripts/Components/AttachedFilesPopover/PopoverFileSubmenu.tsx
@@ -1,14 +1,12 @@
 import { FOCUSABLE_BUT_NOT_TABBABLE } from '@/Constants/Constants'
-import { calculateSubmenuStyle, SubmenuStyle } from '@/Utils/CalculateSubmenuStyle'
-import { Disclosure, DisclosureButton, DisclosurePanel } from '@reach/disclosure'
-import { FunctionComponent, useCallback, useEffect, useRef, useState } from 'react'
+import { FunctionComponent, useCallback, useRef, useState } from 'react'
 import Icon from '@/Components/Icon/Icon'
 import Switch from '@/Components/Switch/Switch'
-import { useCloseOnBlur } from '@/Hooks/useCloseOnBlur'
 import { PopoverFileSubmenuProps } from './PopoverFileItemProps'
 import { PopoverFileItemActionType } from './PopoverFileItemAction'
 import HorizontalSeparator from '../Shared/HorizontalSeparator'
 import { formatSizeToReadableString } from '@standardnotes/filepicker'
+import Popover from '../Popover/Popover'

 const PopoverFileSubmenu: FunctionComponent<PopoverFileSubmenuProps> = ({
  file,
@@ -19,187 +17,135 @@ const PopoverFileSubmenu: FunctionComponent<PopoverFileSubmenuProps> = ({
 }) => {
  const menuContainerRef = useRef<HTMLDivElement>(null)
  const menuButtonRef = useRef<HTMLButtonElement>(null)
-  const menuRef = useRef<HTMLDivElement>(null)

-  const [isMenuOpen, setIsMenuOpen] = useState(false)
+  const [isOpen, setIsOpen] = useState(false)
  const [isFileProtected, setIsFileProtected] = useState(file.protected)
-  const [menuStyle, setMenuStyle] = useState<SubmenuStyle>({
-    right: 0,
-    bottom: 0,
-    maxHeight: 'auto',
-  })
-  const [closeOnBlur] = useCloseOnBlur(menuContainerRef, setIsMenuOpen)

  const closeMenu = useCallback(() => {
-    setIsMenuOpen(false)
+    setIsOpen(false)
  }, [])

  const toggleMenu = useCallback(() => {
-    if (!isMenuOpen) {
-      const menuPosition = calculateSubmenuStyle(menuButtonRef.current)
-      if (menuPosition) {
-        setMenuStyle(menuPosition)
-      }
-    }
-
-    setIsMenuOpen(!isMenuOpen)
-  }, [isMenuOpen])
-
-  const recalculateMenuStyle = useCallback(() => {
-    const newMenuPosition = calculateSubmenuStyle(menuButtonRef.current, menuRef.current)
-
-    if (newMenuPosition) {
-      setMenuStyle(newMenuPosition)
-    }
+    setIsOpen((isOpen) => !isOpen)
  }, [])

-  useEffect(() => {
-    if (isMenuOpen) {
-      setTimeout(() => {
-        recalculateMenuStyle()
-      })
-    }
-  }, [isMenuOpen, recalculateMenuStyle])
-
  return (
    <div ref={menuContainerRef}>
-      <Disclosure open={isMenuOpen} onChange={toggleMenu}>
-        <DisclosureButton
-          ref={menuButtonRef}
-          onBlur={closeOnBlur}
-          className="h-7 w-7 cursor-pointer rounded-full border-0 bg-transparent p-1 hover:bg-contrast"
-        >
-          <Icon type="more" className="text-neutral" />
-        </DisclosureButton>
-        <DisclosurePanel
-          ref={menuRef}
-          style={{
-            ...menuStyle,
-            position: 'fixed',
+      <button
+        ref={menuButtonRef}
+        onClick={toggleMenu}
+        className="h-7 w-7 cursor-pointer rounded-full border-0 bg-transparent p-1 hover:bg-contrast"
+      >
+        <Icon type="more" className="text-neutral" />
+      </button>
+      <Popover anchorElement={menuButtonRef.current} open={isOpen} togglePopover={toggleMenu} className="py-2">
+        <button
+          className="flex w-full cursor-pointer items-center border-0 bg-transparent px-3 py-1.5 text-left text-sm text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none"
+          onClick={() => {
+            previewHandler(file)
+            closeMenu()
          }}
-          className={`${
-            isMenuOpen ? 'flex' : 'hidden'
-          } max-h-120 fixed min-w-60 flex-col overflow-y-auto rounded bg-default py-1 shadow-main`}
        >
-          {isMenuOpen && (
-            <>
-              <button
-                onBlur={closeOnBlur}
-                className="flex w-full cursor-pointer items-center border-0 bg-transparent px-3 py-1.5 text-left text-sm text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none"
-                onClick={() => {
-                  previewHandler(file)
-                  closeMenu()
-                }}
-              >
-                <Icon type="file" className="mr-2 text-neutral" />
-                Preview file
-              </button>
-              {isAttachedToNote ? (
-                <button
-                  onBlur={closeOnBlur}
-                  className="flex w-full cursor-pointer items-center border-0 bg-transparent px-3 py-1.5 text-left text-sm text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none"
-                  onClick={() => {
-                    handleFileAction({
-                      type: PopoverFileItemActionType.DetachFileToNote,
-                      payload: { file },
-                    }).catch(console.error)
-                    closeMenu()
-                  }}
-                >
-                  <Icon type="link-off" className="mr-2 text-neutral" />
-                  Detach from note
-                </button>
-              ) : (
-                <button
-                  onBlur={closeOnBlur}
-                  className="flex w-full cursor-pointer items-center border-0 bg-transparent px-3 py-1.5 text-left text-sm text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none"
-                  onClick={() => {
-                    handleFileAction({
-                      type: PopoverFileItemActionType.AttachFileToNote,
-                      payload: { file },
-                    }).catch(console.error)
-                    closeMenu()
-                  }}
-                >
-                  <Icon type="link" className="mr-2 text-neutral" />
-                  Attach to note
-                </button>
-              )}
-              <HorizontalSeparator classes="my-1" />
-              <button
-                className="flex w-full cursor-pointer items-center justify-between border-0 bg-transparent px-3 py-1.5 text-left text-sm text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none"
-                onClick={() => {
-                  handleFileAction({
-                    type: PopoverFileItemActionType.ToggleFileProtection,
-                    payload: { file },
-                    callback: (isProtected: boolean) => {
-                      setIsFileProtected(isProtected)
-                    },
-                  }).catch(console.error)
-                }}
-                onBlur={closeOnBlur}
-              >
-                <span className="flex items-center">
-                  <Icon type="password" className="mr-2 text-neutral" />
-                  Password protection
-                </span>
-                <Switch
-                  className="pointer-events-none px-0"
-                  tabIndex={FOCUSABLE_BUT_NOT_TABBABLE}
-                  checked={isFileProtected}
-                />
-              </button>
-              <HorizontalSeparator classes="my-1" />
-              <button
-                onBlur={closeOnBlur}
-                className="flex w-full cursor-pointer items-center border-0 bg-transparent px-3 py-1.5 text-left text-sm text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none"
-                onClick={() => {
-                  handleFileAction({
-                    type: PopoverFileItemActionType.DownloadFile,
-                    payload: { file },
-                  }).catch(console.error)
-                  closeMenu()
-                }}
-              >
-                <Icon type="download" className="mr-2 text-neutral" />
-                Download
-              </button>
-              <button
-                onBlur={closeOnBlur}
-                className="flex w-full cursor-pointer items-center border-0 bg-transparent px-3 py-1.5 text-left text-sm text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none"
-                onClick={() => {
-                  setIsRenamingFile(true)
-                }}
-              >
-                <Icon type="pencil" className="mr-2 text-neutral" />
-                Rename
-              </button>
-              <button
-                onBlur={closeOnBlur}
-                className="flex w-full cursor-pointer items-center border-0 bg-transparent px-3 py-1.5 text-left text-sm text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none"
-                onClick={() => {
-                  handleFileAction({
-                    type: PopoverFileItemActionType.DeleteFile,
-                    payload: { file },
-                  }).catch(console.error)
-                  closeMenu()
-                }}
-              >
-                <Icon type="trash" className="mr-2 text-danger" />
-                <span className="text-danger">Delete permanently</span>
-              </button>
-              <div className="px-3 py-1 text-xs font-medium text-neutral">
-                <div className="mb-1">
-                  <span className="font-semibold">File ID:</span> {file.uuid}
-                </div>
-                <div>
-                  <span className="font-semibold">Size:</span> {formatSizeToReadableString(file.decryptedSize)}
-                </div>
-              </div>
-            </>
-          )}
-        </DisclosurePanel>
-      </Disclosure>
+          <Icon type="file" className="mr-2 text-neutral" />
+          Preview file
+        </button>
+        {isAttachedToNote ? (
+          <button
+            className="flex w-full cursor-pointer items-center border-0 bg-transparent px-3 py-1.5 text-left text-sm text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none"
+            onClick={() => {
+              handleFileAction({
+                type: PopoverFileItemActionType.DetachFileToNote,
+                payload: { file },
+              }).catch(console.error)
+              closeMenu()
+            }}
+          >
+            <Icon type="link-off" className="mr-2 text-neutral" />
+            Detach from note
+          </button>
+        ) : (
+          <button
+            className="flex w-full cursor-pointer items-center border-0 bg-transparent px-3 py-1.5 text-left text-sm text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none"
+            onClick={() => {
+              handleFileAction({
+                type: PopoverFileItemActionType.AttachFileToNote,
+                payload: { file },
+              }).catch(console.error)
+              closeMenu()
+            }}
+          >
+            <Icon type="link" className="mr-2 text-neutral" />
+            Attach to note
+          </button>
+        )}
+        <HorizontalSeparator classes="my-1" />
+        <button
+          className="flex w-full cursor-pointer items-center justify-between border-0 bg-transparent px-3 py-1.5 text-left text-sm text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none"
+          onClick={() => {
+            handleFileAction({
+              type: PopoverFileItemActionType.ToggleFileProtection,
+              payload: { file },
+              callback: (isProtected: boolean) => {
+                setIsFileProtected(isProtected)
+              },
+            }).catch(console.error)
+          }}
+        >
+          <span className="flex items-center">
+            <Icon type="password" className="mr-2 text-neutral" />
+            Password protection
+          </span>
+          <Switch
+            className="pointer-events-none px-0"
+            tabIndex={FOCUSABLE_BUT_NOT_TABBABLE}
+            checked={isFileProtected}
+          />
+        </button>
+        <HorizontalSeparator classes="my-1" />
+        <button
+          className="flex w-full cursor-pointer items-center border-0 bg-transparent px-3 py-1.5 text-left text-sm text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none"
+          onClick={() => {
+            handleFileAction({
+              type: PopoverFileItemActionType.DownloadFile,
+              payload: { file },
+            }).catch(console.error)
+            closeMenu()
+          }}
+        >
+          <Icon type="download" className="mr-2 text-neutral" />
+          Download
+        </button>
+        <button
+          className="flex w-full cursor-pointer items-center border-0 bg-transparent px-3 py-1.5 text-left text-sm text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none"
+          onClick={() => {
+            setIsRenamingFile(true)
+          }}
+        >
+          <Icon type="pencil" className="mr-2 text-neutral" />
+          Rename
+        </button>
+        <button
+          className="flex w-full cursor-pointer items-center border-0 bg-transparent px-3 py-1.5 text-left text-sm text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none"
+          onClick={() => {
+            handleFileAction({
+              type: PopoverFileItemActionType.DeleteFile,
+              payload: { file },
+            }).catch(console.error)
+            closeMenu()
+          }}
+        >
+          <Icon type="trash" className="mr-2 text-danger" />
+          <span className="text-danger">Delete permanently</span>
+        </button>
+        <div className="px-3 py-1 text-xs font-medium text-neutral">
+          <div className="mb-1">
+            <span className="font-semibold">File ID:</span> {file.uuid}
+          </div>
+          <div>
+            <span className="font-semibold">Size:</span> {formatSizeToReadableString(file.decryptedSize)}
+          </div>
+        </div>
+      </Popover>
    </div>
  )
 }