fix: file mimeType related issues (#922)

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

@@ -15,7 +15,7 @@ import { useCloseOnClickOutside } from '../utils';
 import { ChallengeReason, ContentType, SNFile } from '@standardnotes/snjs';
 import { confirmDialog } from '@/services/alertService';
 import { addToast, dismissToast, ToastType } from '@standardnotes/stylekit';
-import { parseFileName, StreamingFileReader } from '@standardnotes/filepicker';
+import { StreamingFileReader } from '@standardnotes/filepicker';
 import {
   PopoverFileItemAction,
   PopoverFileItemActionType,

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

@@ -169,6 +169,7 @@ export const AttachedFilesPopover: FunctionComponent<Props> = observer(
                   file={file}
                   isAttachedToNote={attachedFiles.includes(file)}
                   handleFileAction={handleFileAction}
+                  getIconType={application.iconsController.getIconForFileType}
                 />
               );
             })

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

@@ -1,6 +1,6 @@
 import { KeyboardKey } from '@/services/ioService';
 import { formatSizeToReadableString } from '@standardnotes/filepicker';
-import { SNFile } from '@standardnotes/snjs';
+import { IconType, SNFile } from '@standardnotes/snjs';
 import { FunctionComponent } from 'preact';
 import { useEffect, useRef, useState } from 'preact/hooks';
 import { ICONS } from '../Icon';
@@ -10,56 +10,24 @@ import {
 } from './PopoverFileItemAction';
 import { PopoverFileSubmenu } from './PopoverFileSubmenu';
 
-const getIconForFileType = (fileType: string) => {
-  let iconType = 'file-other';
-
-  if (fileType === 'pdf') {
-    iconType = 'file-pdf';
-  }
-
-  if (/^(docx?|odt)/.test(fileType)) {
-    iconType = 'file-doc';
-  }
-
-  if (/^pptx?/.test(fileType)) {
-    iconType = 'file-ppt';
-  }
-
-  if (/^(xlsx?|ods)/.test(fileType)) {
-    iconType = 'file-xls';
-  }
-
-  if (/^(jpe?g|a?png|webp|gif)/.test(fileType)) {
-    iconType = 'file-image';
-  }
-
-  if (/^(mov|mp4|mkv)/.test(fileType)) {
-    iconType = 'file-mov';
-  }
-
-  if (/^(wav|mp3|flac|ogg)/.test(fileType)) {
-    iconType = 'file-music';
-  }
-
-  if (/^(zip|rar|7z)/.test(fileType)) {
-    iconType = 'file-zip';
-  }
-
+const getFileIconComponent = (iconType: string) => {
   const IconComponent = ICONS[iconType as keyof typeof ICONS];
 
-  return <IconComponent className="flex-shrink-0" />;
+  return <IconComponent className="w-8 h-8 flex-shrink-0" />;
 };
 
 export type PopoverFileItemProps = {
   file: SNFile;
   isAttachedToNote: boolean;
   handleFileAction: (action: PopoverFileItemAction) => Promise<boolean>;
+  getIconType(type: string): IconType;
 };
 
 export const PopoverFileItem: FunctionComponent<PopoverFileItemProps> = ({
   file,
   isAttachedToNote,
   handleFileAction,
+  getIconType,
 }) => {
   const [fileName, setFileName] = useState(file.name);
   const [isRenamingFile, setIsRenamingFile] = useState(false);
@@ -99,7 +67,7 @@ export const PopoverFileItem: FunctionComponent<PopoverFileItemProps> = ({
   return (
     <div className="flex items-center justify-between p-3">
       <div className="flex items-center">
-        {getIconForFileType(file.name ?? '')}
+        {getFileIconComponent(getIconType(file.mimeType))}
         <div className="flex flex-col mx-4">
           {isRenamingFile ? (
             <input

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

@@ -22,7 +22,7 @@ import { useCloseOnBlur } from '../utils';
 import { PopoverFileItemProps } from './PopoverFileItem';
 import { PopoverFileItemActionType } from './PopoverFileItemAction';
 
-type Props = Omit<PopoverFileItemProps, 'renameFile'> & {
+type Props = Omit<PopoverFileItemProps, 'renameFile' | 'getIconType'> & {
   setIsRenamingFile: StateUpdater<boolean>;
 };