Fix file download

apps/desktop/src/main/queries/files/file-get.ts

@@ -67,6 +67,42 @@ export class FileGetQueryHandler implements QueryHandler<FileGetQueryInput> {
       };
     }
 
+    if (event.type === 'file_state_created') {
+      if (output === null) {
+        const newResult = await this.fetchFile(input);
+        return {
+          hasChanges: true,
+          result: newResult,
+        };
+      }
+
+      return {
+        hasChanges: true,
+        result: {
+          ...output,
+          ...event.fileState,
+        },
+      };
+    }
+
+    if (event.type === 'file_state_updated') {
+      if (output === null) {
+        const newResult = await this.fetchFile(input);
+        return {
+          hasChanges: true,
+          result: newResult,
+        };
+      }
+
+      return {
+        hasChanges: true,
+        result: {
+          ...output,
+          ...event.fileState,
+        },
+      };
+    }
+
     return {
       hasChanges: false,
     };

apps/desktop/src/main/queries/files/file-list.ts

@@ -82,6 +82,46 @@ export class FileListQueryHandler implements QueryHandler<FileListQueryInput> {
       }
     }
 
+    if (event.type === 'file_state_created') {
+      const file = output.find((file) => file.id === event.fileState.fileId);
+      if (file) {
+        const newResult = output.map((file) => {
+          if (file.id === event.fileState.fileId) {
+            return {
+              ...file,
+              ...event.fileState,
+            };
+          }
+          return file;
+        });
+
+        return {
+          hasChanges: true,
+          result: newResult,
+        };
+      }
+    }
+
+    if (event.type === 'file_state_updated') {
+      const file = output.find((file) => file.id === event.fileState.fileId);
+      if (file) {
+        const newResult = output.map((file) => {
+          if (file.id === event.fileState.fileId) {
+            return {
+              ...file,
+              ...event.fileState,
+            };
+          }
+          return file;
+        });
+
+        return {
+          hasChanges: true,
+          result: newResult,
+        };
+      }
+    }
+
     return {
       hasChanges: false,
     };

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

@@ -4,17 +4,19 @@ import { Spinner } from '@/renderer/components/ui/spinner';
 import { useWorkspace } from '@/renderer/contexts/workspace';
 import { useMutation } from '@/renderer/hooks/use-mutation';
 import { toast } from '@/renderer/hooks/use-toast';
+import { FileWithState } from '@/shared/types/files';
+import { formatBytes } from '@/shared/lib/files';
 
 interface FileDownloadProps {
-  id: string;
-  downloadProgress: number | null | undefined;
+  file: FileWithState;
 }
 
-export const FileDownload = ({ id, downloadProgress }: FileDownloadProps) => {
+export const FileDownload = ({ file }: FileDownloadProps) => {
   const workspace = useWorkspace();
   const { mutate } = useMutation();
 
-  const isDownloading = typeof downloadProgress === 'number';
+  const isDownloading = file.downloadStatus === 'pending';
+
   return (
     <div className="flex h-full w-full items-center justify-center">
       {isDownloading ? (
@@ -33,7 +35,7 @@ export const FileDownload = ({ id, downloadProgress }: FileDownloadProps) => {
               input: {
                 type: 'file_download',
                 userId: workspace.userId,
-                fileId: id,
+                fileId: file.id,
               },
               onError(error) {
                 toast({
@@ -49,6 +51,9 @@ export const FileDownload = ({ id, downloadProgress }: FileDownloadProps) => {
           <p className="text-sm">
             File is not downloaded in your device. Click to download.
           </p>
+          <p className="text-xs text-muted-foreground">
+            {formatBytes(file.size)} - {file.mimeType}
+          </p>
         </div>
       )}
     </div>

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

@@ -16,9 +16,7 @@ export const FilePreview = ({ file }: FilePreviewProps) => {
   const workspace = useWorkspace();
 
   if (file.downloadProgress !== 100) {
-    return (
-      <FileDownload id={file.id} downloadProgress={file.downloadProgress} />
-    );
+    return <FileDownload file={file} />;
   }
 
   const url = getFileUrl(workspace.userId, file.id, file.extension);