feat: add file info panel button to file view (#1741)

packages/web/src/javascripts/Components/FileContextMenu/FileMenuOptions.tsx

@@ -42,17 +42,6 @@ const FileMenuOptions: FunctionComponent<Props> = ({
     [selectedFiles],
   )
 
-  const onPreview = useCallback(() => {
-    void handleFileAction({
-      type: PopoverFileItemActionType.PreviewFile,
-      payload: {
-        file: selectedFiles[0],
-        otherFiles: selectedFiles.length > 1 ? selectedFiles : filesController.allFiles,
-      },
-    })
-    closeMenu()
-  }, [closeMenu, filesController.allFiles, handleFileAction, selectedFiles])
-
   const onDetach = useCallback(() => {
     const file = selectedFiles[0]
     void handleFileAction({
@@ -78,10 +67,6 @@ const FileMenuOptions: FunctionComponent<Props> = ({
 
   return (
     <>
-      <MenuItem onClick={onPreview}>
-        <Icon type="file" className="mr-2 text-neutral" />
-        Preview file
-      </MenuItem>
       {selectedFiles.length === 1 && (
         <>
           {isFileAttachedToNote ? (
@@ -97,7 +82,6 @@ const FileMenuOptions: FunctionComponent<Props> = ({
           ) : null}
         </>
       )}
-      <HorizontalSeparator classes="my-1" />
       <MenuItem
         type={MenuItemType.SwitchButton}
         checked={hasProtectedFiles}

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

@@ -1,16 +1,25 @@
 import { ElementIds } from '@/Constants/ElementIDs'
 import { observer } from 'mobx-react-lite'
-import { ChangeEventHandler, useCallback, useRef } from 'react'
+import { ChangeEventHandler, useCallback, useRef, useState } from 'react'
 import FileOptionsPanel from '@/Components/FileContextMenu/FileOptionsPanel'
 import FilePreview from '@/Components/FilePreview/FilePreview'
 import { FileViewProps } from './FileViewProps'
 import MobileItemsListButton from '../NoteGroupView/MobileItemsListButton'
+import Icon from '../Icon/Icon'
+import Popover from '../Popover/Popover'
+import FilePreviewInfoPanel from '../FilePreview/FilePreviewInfoPanel'
 
 const SyncTimeoutNoDebounceMs = 100
 const SyncTimeoutDebounceMs = 350
 
 const FileViewWithoutProtection = ({ application, viewControllerManager, file }: FileViewProps) => {
   const syncTimeoutRef = useRef<number>()
+  const fileInfoButtonRef = useRef<HTMLButtonElement>(null)
+
+  const [isFileInfoPanelOpen, setIsFileInfoPanelOpen] = useState(false)
+  const toggleFileInfoPanel = () => {
+    setIsFileInfoPanelOpen((show) => !show)
+  }
 
   const onTitleChange: ChangeEventHandler<HTMLInputElement> = useCallback(
     async (event) => {
@@ -53,7 +62,25 @@ const FileViewWithoutProtection = ({ application, viewControllerManager, file }:
                 />
               </div>
             </div>
-            <div className="flex items-center">
+            <div className="flex items-center gap-3">
+              <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"
+                title="File information panel"
+                aria-label="File information panel"
+                onClick={toggleFileInfoPanel}
+                ref={fileInfoButtonRef}
+              >
+                <Icon type="info" />
+              </button>
+              <Popover
+                open={isFileInfoPanelOpen}
+                togglePopover={toggleFileInfoPanel}
+                anchorElement={fileInfoButtonRef.current}
+                side="bottom"
+                align="center"
+              >
+                <FilePreviewInfoPanel file={file} />
+              </Popover>
               <FileOptionsPanel
                 filesController={viewControllerManager.filesController}
                 selectionController={viewControllerManager.selectionController}

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

@@ -61,6 +61,7 @@ const PositionedPopoverContent = ({
           'absolute top-0 left-0 flex h-full w-full min-w-80 cursor-auto flex-col overflow-y-auto rounded bg-default shadow-main md:h-auto md:max-w-xs',
           overrideZIndex ? overrideZIndex : 'z-dropdown-menu',
           !isDesktopScreen ? 'pt-safe-top pb-safe-bottom' : '',
+          !styles && 'md:invisible',
         )}
         style={{
           ...styles,