Improve file preview

desktop/src/renderer/components/files/file-container.tsx

@@ -3,7 +3,6 @@ import { useWorkspace } from '@/renderer/contexts/workspace';
 import { useQuery } from '@/renderer/hooks/use-query';
 import { FilePreview } from '@/renderer/components/files/file-preview';
 import { FileSidebar } from '@/renderer/components/files/file-sidebar';
-import { FileDownload } from '@/renderer/components/files/file-download';
 
 interface FileContainerProps {
   nodeId: string;
@@ -24,11 +23,7 @@ export const FileContainer = ({ nodeId }: FileContainerProps) => {
   return (
     <div className="flex h-full max-h-full w-full flex-row items-center gap-2">
       <div className="flex h-full max-h-full w-full max-w-full flex-grow items-center justify-center overflow-hidden">
-        {data.downloadProgress === 100 ? (
-          <FilePreview file={data} />
-        ) : (
-          <FileDownload id={data.id} downloadProgress={data.downloadProgress} />
-        )}
+        <FilePreview file={data} />
       </div>
       <div className="h-full w-72 min-w-72 overflow-hidden border-l border-gray-100 p-2 pl-3">
         <FileSidebar file={data} />

desktop/src/renderer/components/files/file-download.tsx

@@ -17,15 +17,18 @@ export const FileDownload = ({ id, downloadProgress }: FileDownloadProps) => {
     return (
       <div
         className="flex cursor-pointer flex-col items-center gap-3 text-muted-foreground hover:text-primary"
-        onClick={() =>
+        onClick={(e) => {
+          e.stopPropagation();
+          e.preventDefault();
+
           mutate({
             input: {
               type: 'file_download',
               userId: workspace.userId,
               fileId: id,
             },
-          })
-        }
+          });
+        }}
       >
         <Icon name="download-2-line" className="h-10 w-10" />
         <p className="text-sm">

desktop/src/renderer/components/files/file-preview.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { match } from 'ts-pattern';
 import { FileDetails } from '@/types/files';
 import { getFilePreviewType } from '@/lib/files';
+import { FileDownload } from '@/renderer/components/files/file-download';
 import { FilePreviewImage } from '@/renderer/components/files/previews/file-preview-image';
 import { FilePreviewVideo } from '@/renderer/components/files/previews/file-preview-video';
 import { FilePreviewOther } from '@/renderer/components/files/previews/file-preview-other';
@@ -11,6 +12,12 @@ interface FilePreviewProps {
 }
 
 export const FilePreview = ({ file }: FilePreviewProps) => {
+  if (file.downloadProgress !== 100) {
+    return (
+      <FileDownload id={file.id} downloadProgress={file.downloadProgress} />
+    );
+  }
+
   const previewType = getFilePreviewType(file.mimeType);
   return match(previewType)
     .with('image', () => (