Add a message in file preview if it hasn't been uploaded yet (#211)

packages/client/src/handlers/queries/files/local-file-get.ts

@@ -1,12 +1,18 @@
 import { WorkspaceQueryHandlerBase } from '@colanode/client/handlers/queries/workspace-query-handler-base';
-import { mapDownload, mapLocalFile } from '@colanode/client/lib/mappers';
+import {
+  mapDownload,
+  mapLocalFile,
+  mapNode,
+} from '@colanode/client/lib/mappers';
 import { ChangeCheckResult, QueryHandler } from '@colanode/client/lib/types';
 import {
   LocalFileGetQueryInput,
   LocalFileGetQueryOutput,
 } from '@colanode/client/queries';
+import { LocalFileNode } from '@colanode/client/types';
 import { Event } from '@colanode/client/types/events';
 import { DownloadType } from '@colanode/client/types/files';
+import { FileStatus } from '@colanode/core';
 
 export class LocalFileGetQueryHandler
   extends WorkspaceQueryHandlerBase
@@ -136,6 +142,27 @@ export class LocalFileGetQueryHandler
     }
 
     if (input.autoDownload) {
+      const fileNode = await workspace.database
+        .selectFrom('nodes')
+        .selectAll()
+        .where('id', '=', input.fileId)
+        .executeTakeFirst();
+
+      if (!fileNode) {
+        return {
+          localFile: null,
+          download: null,
+        };
+      }
+
+      const file = mapNode(fileNode) as LocalFileNode;
+      if (file.attributes.status !== FileStatus.Ready) {
+        return {
+          localFile: null,
+          download: null,
+        };
+      }
+
       const download = await workspace.files.initAutoDownload(input.fileId);
 
       return {

packages/ui/src/components/files/file-block.tsx

@@ -1,5 +1,7 @@
 import { LocalFileNode } from '@colanode/client/types';
+import { FileStatus } from '@colanode/core';
 import { FileIcon } from '@colanode/ui/components/files/file-icon';
+import { FileNotUploaded } from '@colanode/ui/components/files/file-not-uploaded';
 import { FilePreview } from '@colanode/ui/components/files/file-preview';
 import { useLayout } from '@colanode/ui/contexts/layout';
 import { useWorkspace } from '@colanode/ui/contexts/workspace';
@@ -26,8 +28,22 @@ export const FileBlock = ({ id }: FileBlockProps) => {
   }
 
   const file = nodeGetQuery.data as LocalFileNode;
+  const isReady = file.attributes.status === FileStatus.Ready;
   const canPreview = canPreviewFile(file.attributes.subtype);
 
+  if (!isReady) {
+    return (
+      <div
+        className="flex h-72 max-h-72 max-w-128 w-full items-center justify-center cursor-pointer overflow-hidden rounded-md p-2 hover:bg-muted/50"
+        onClick={() => {
+          layout.previewLeft(id, true);
+        }}
+      >
+        <FileNotUploaded mimeType={file.attributes.mimeType} />
+      </div>
+    );
+  }
+
   if (canPreview) {
     return (
       <div

packages/ui/src/components/files/file-body.tsx

@@ -1,5 +1,7 @@
 import { LocalFileNode } from '@colanode/client/types';
+import { FileStatus } from '@colanode/core';
 import { FileNoPreview } from '@colanode/ui/components/files/file-no-preview';
+import { FileNotUploaded } from '@colanode/ui/components/files/file-not-uploaded';
 import { FilePreview } from '@colanode/ui/components/files/file-preview';
 import { FileSaveButton } from '@colanode/ui/components/files/file-save-button';
 import { FileSidebar } from '@colanode/ui/components/files/file-sidebar';
@@ -11,6 +13,7 @@ interface FileBodyProps {
 
 export const FileBody = ({ file }: FileBodyProps) => {
   const canPreview = canPreviewFile(file.attributes.subtype);
+  const isReady = file.attributes.status === FileStatus.Ready;
 
   return (
     <div className="flex h-full max-h-full w-full flex-row items-center gap-2">
@@ -20,7 +23,9 @@ export const FileBody = ({ file }: FileBodyProps) => {
         </div>
 
         <div className="flex flex-col flex-grow items-center justify-center overflow-hidden p-10">
-          {canPreview ? (
+          {!isReady ? (
+            <FileNotUploaded mimeType={file.attributes.mimeType} />
+          ) : canPreview ? (
             <FilePreview file={file} />
           ) : (
             <FileNoPreview mimeType={file.attributes.mimeType} />

packages/ui/src/components/files/file-not-uploaded.tsx

@@ -0,0 +1,18 @@
+import { FileIcon } from '@colanode/ui/components/files/file-icon';
+
+interface FileNotUploadedProps {
+  mimeType: string;
+}
+
+export const FileNotUploaded = ({ mimeType }: FileNotUploadedProps) => {
+  return (
+    <div className="flex flex-col items-center gap-3">
+      <FileIcon mimeType={mimeType} className="h-10 w-10" />
+      <p className="text-sm text-muted-foreground text-center">
+        The file has not been fully uploaded by the author yet.
+        <br /> You will be able to preview or download it once it is fully
+        uploaded.
+      </p>
+    </div>
+  );
+};