feat: ask for password before previewing protected files (#991)

app/assets/javascripts/Components/AttachedFilesPopover/AttachedFilesButton.tsx

@@ -15,6 +15,7 @@ import { StreamingFileReader } from '@standardnotes/filepicker'
 import { PopoverFileItemAction, PopoverFileItemActionType } from './PopoverFileItemAction'
 import { AttachedFilesPopover, PopoverTabs } from './AttachedFilesPopover'
 import { usePremiumModal } from '@/Hooks/usePremiumModal'
+import { useFilePreviewModal } from '../Files/FilePreviewModalProvider'
 
 type Props = {
   application: WebApplication
@@ -40,6 +41,8 @@ const removeDragOverlay = () => {
 export const AttachedFilesButton: FunctionComponent<Props> = observer(
   ({ application, appState, onClickPreprocessing }) => {
     const premiumModal = usePremiumModal()
+    const filePreviewModal = useFilePreviewModal()
+
     const note = Object.values(appState.notes.selectedNotes)[0]
 
     const [open, setOpen] = useState(false)
@@ -205,6 +208,9 @@ export const AttachedFilesButton: FunctionComponent<Props> = observer(
         case PopoverFileItemActionType.RenameFile:
           await renameFile(file, action.payload.name)
           break
+        case PopoverFileItemActionType.PreviewFile:
+          filePreviewModal.activate(file)
+          break
       }
 
       application.sync.sync().catch(console.error)

app/assets/javascripts/Components/AttachedFilesPopover/PopoverFileItem.tsx

@@ -7,7 +7,6 @@ import { useEffect, useRef, useState } from 'preact/hooks'
 import { Icon, ICONS } from '@/Components/Icon'
 import { PopoverFileItemAction, PopoverFileItemActionType } from './PopoverFileItemAction'
 import { PopoverFileSubmenu } from './PopoverFileSubmenu'
-import { useFilePreviewModal } from '@/Components/Files/FilePreviewModalProvider'
 
 export const getFileIconComponent = (iconType: string, className: string) => {
   const IconComponent = ICONS[iconType as keyof typeof ICONS]
@@ -30,8 +29,6 @@ export const PopoverFileItem: FunctionComponent<PopoverFileItemProps> = ({
   getIconType,
   closeOnBlur,
 }) => {
-  const filePreviewModal = useFilePreviewModal()
-
   const [fileName, setFileName] = useState(file.name)
   const [isRenamingFile, setIsRenamingFile] = useState(false)
   const itemRef = useRef<HTMLDivElement>(null)
@@ -68,8 +65,11 @@ export const PopoverFileItem: FunctionComponent<PopoverFileItemProps> = ({
     renameFile(file, fileName).catch(console.error)
   }
 
-  const clickHandler = () => {
+  const clickPreviewHandler = () => {
-    filePreviewModal.activate(file)
+    handleFileAction({
+      type: PopoverFileItemActionType.PreviewFile,
+      payload: file,
+    }).catch(console.error)
   }
 
   return (
@@ -78,7 +78,7 @@ export const PopoverFileItem: FunctionComponent<PopoverFileItemProps> = ({
       className="flex items-center justify-between p-3 focus:shadow-none"
       tabIndex={FOCUSABLE_BUT_NOT_TABBABLE}
     >
-      <div onClick={clickHandler} className="flex items-center cursor-pointer">
+      <div onClick={clickPreviewHandler} className="flex items-center cursor-pointer">
         {getFileIconComponent(getIconType(file.mimeType), 'w-8 h-8 flex-shrink-0')}
         <div className="flex flex-col mx-4">
           {isRenamingFile ? (
@@ -113,6 +113,7 @@ export const PopoverFileItem: FunctionComponent<PopoverFileItemProps> = ({
         handleFileAction={handleFileAction}
         setIsRenamingFile={setIsRenamingFile}
         closeOnBlur={closeOnBlur}
+        previewHandler={clickPreviewHandler}
       />
     </div>
   )

app/assets/javascripts/Components/AttachedFilesPopover/PopoverFileItemAction.tsx

@@ -7,6 +7,7 @@ export enum PopoverFileItemActionType {
   DownloadFile,
   RenameFile,
   ToggleFileProtection,
+  PreviewFile,
 }
 
 export type PopoverFileItemAction =

app/assets/javascripts/Components/AttachedFilesPopover/PopoverFileSubmenu.tsx

@@ -6,12 +6,12 @@ import { StateUpdater, useCallback, useEffect, useRef, useState } from 'preact/h
 import { Icon } from '@/Components/Icon'
 import { Switch } from '@/Components/Switch'
 import { useCloseOnBlur } from '@/Hooks/useCloseOnBlur'
-import { useFilePreviewModal } from '@/Components/Files/FilePreviewModalProvider'
 import { PopoverFileItemProps } from './PopoverFileItem'
 import { PopoverFileItemActionType } from './PopoverFileItemAction'
 
 type Props = Omit<PopoverFileItemProps, 'renameFile' | 'getIconType'> & {
   setIsRenamingFile: StateUpdater<boolean>
+  previewHandler: () => void
 }
 
 export const PopoverFileSubmenu: FunctionComponent<Props> = ({
@@ -19,9 +19,8 @@ export const PopoverFileSubmenu: FunctionComponent<Props> = ({
   isAttachedToNote,
   handleFileAction,
   setIsRenamingFile,
+  previewHandler,
 }) => {
-  const filePreviewModal = useFilePreviewModal()
-
   const menuContainerRef = useRef<HTMLDivElement>(null)
   const menuButtonRef = useRef<HTMLButtonElement>(null)
   const menuRef = useRef<HTMLDivElement>(null)
@@ -90,7 +89,7 @@ export const PopoverFileSubmenu: FunctionComponent<Props> = ({
                 onBlur={closeOnBlur}
                 className="sn-dropdown-item focus:bg-info-backdrop"
                 onClick={() => {
-                  filePreviewModal.activate(file)
+                  previewHandler()
                   closeMenu()
                 }}
               >