feat: add file preview modal (#945)

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

@@ -10,10 +10,10 @@ import {
 } from './PopoverFileItemAction';
 import { PopoverFileSubmenu } from './PopoverFileSubmenu';
 
-const getFileIconComponent = (iconType: string) => {
+export const getFileIconComponent = (iconType: string, className: string) => {
   const IconComponent = ICONS[iconType as keyof typeof ICONS];
 
-  return <IconComponent className="w-8 h-8 flex-shrink-0" />;
+  return <IconComponent className={className} />;
 };
 
 export type PopoverFileItemProps = {
@@ -69,7 +69,10 @@ export const PopoverFileItem: FunctionComponent<PopoverFileItemProps> = ({
   return (
     <div className="flex items-center justify-between p-3">
       <div className="flex items-center">
-        {getFileIconComponent(getIconType(file.mimeType))}
+        {getFileIconComponent(
+          getIconType(file.mimeType),
+          'w-8 h-8 flex-shrink-0'
+        )}
         <div className="flex flex-col mx-4">
           {isRenamingFile ? (
             <input
@@ -82,7 +85,7 @@ export const PopoverFileItem: FunctionComponent<PopoverFileItemProps> = ({
               onBlur={handleFileNameInputBlur}
             />
           ) : (
-            <div className="text-sm mb-1">{file.name}</div>
+            <div className="text-sm mb-1 break-word">{file.name}</div>
           )}
           <div className="text-xs color-grey-0">
             {file.created_at.toLocaleString()} ·{' '}

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

@@ -19,6 +19,7 @@ import {
 import { Icon } from '../Icon';
 import { Switch } from '../Switch';
 import { useCloseOnBlur } from '../utils';
+import { useFilePreviewModal } from '../Files/FilePreviewModalProvider';
 import { PopoverFileItemProps } from './PopoverFileItem';
 import { PopoverFileItemActionType } from './PopoverFileItemAction';
 
@@ -32,6 +33,8 @@ export const PopoverFileSubmenu: FunctionComponent<Props> = ({
   handleFileAction,
   setIsRenamingFile,
 }) => {
+  const filePreviewModal = useFilePreviewModal();
+
   const menuContainerRef = useRef<HTMLDivElement>(null);
   const menuButtonRef = useRef<HTMLButtonElement>(null);
   const menuRef = useRef<HTMLDivElement>(null);
@@ -99,6 +102,17 @@ export const PopoverFileSubmenu: FunctionComponent<Props> = ({
         >
           {isMenuOpen && (
             <>
+              <button
+                onBlur={closeOnBlur}
+                className="sn-dropdown-item focus:bg-info-backdrop"
+                onClick={() => {
+                  filePreviewModal.activate(file);
+                  closeMenu();
+                }}
+              >
+                <Icon type="file" className="mr-2 color-neutral" />
+                Preview file
+              </button>
               {isAttachedToNote ? (
                 <button
                   onBlur={closeOnBlur}