🚧(wip) proof of concept for grist-static preview

Author: vviers

src/frontend/apps/drive/public/gristtest.grist

@@ -97,9 +97,10 @@ export const getItemIcon = (
 
 export const getIconByMimeType = (
   mimeType: string,
-  type: "mini" | "normal"
+  type: "mini" | "normal",
+  extension?: string
 ) => {
-  const category = getMimeCategory(mimeType);
+  const category = getMimeCategory(mimeType, extension);
   return ICONS[type][category];
 };
 

src/frontend/apps/drive/src/features/explorer/components/icons/ItemIcon.tsx

@@ -11,6 +11,7 @@ import { ImageViewer } from "../image-viewer/ImageViewer";
 import { VideoPlayer } from "../video-player/VideoPlayer";
 import { AudioPlayer } from "../audio-player/AudioPlayer";
 import { PreviewPdf } from "../pdf-preview/PreviewPdf";
+import { PreviewGrist } from "../grist-preview/PreviewGrist";
 
 import { NotSupportedPreview } from "../not-supported/NotSupportedPreview";
 import { getIconByMimeType } from "@/features/explorer/components/icons/ItemIcon";
@@ -22,6 +23,7 @@ export type FilePreviewType = {
   title: string;
   mimetype: string;
   url: string;
+  extension?: string | null;
 };
 
 type FilePreviewData = FilePreviewType & {
@@ -56,9 +58,10 @@ export const FilePreview = ({
   const [isSidebarOpen, setIsSidebarOpen] = useState(false);
 
   const data: FilePreviewData[] = useMemo(() => {
-    return files?.map((file) => ({
+    return files?.map((file) => (
+      {
       ...file,
-      category: getMimeCategory(file.mimetype),
+      category: getMimeCategory(file.mimetype, file.url.split('.').pop() || null),
     }));
   }, [files]);
 
@@ -109,6 +112,9 @@ export const FilePreview = ({
         );
       case MimeCategory.PDF:
         return <PreviewPdf src={currentFile.url} />;
+      case MimeCategory.GRIST:
+        console.log(currentFile.url);
+        return <PreviewGrist src={currentFile.url} title={currentFile.title}/>;
       default:
         return <NotSupportedPreview file={currentFile} />;
     }
@@ -148,7 +154,7 @@ export const FilePreview = ({
 
               <div className="file-preview-title">
                 <img
-                  src={getIconByMimeType(currentFile.mimetype, "mini").src}
+                  src={getIconByMimeType(currentFile.mimetype, "mini", currentFile.url.split('.').pop()).src}
                   alt=""
                   width={24}
                   className={`item-icon`}

src/frontend/apps/drive/src/features/ui/preview/files-preview/FilesPreview.tsx

@@ -0,0 +1,31 @@
+import React, { useEffect } from 'react';
+
+interface PreviewGristProps {
+    title?: string;
+    src?: string;
+  }
+  
+  export const PreviewGrist = ({ src, title }: PreviewGristProps) => {
+    useEffect(() => {
+      if (src) {
+        const script = document.createElement('script');
+        script.src = 'https://grist-static.com/latest.js';
+        script.onload = () => {
+        // Assuming bootstrapGrist is globally available
+          if (window) {
+            window.bootstrapGrist?.({
+                initialFile: "/gristtest.grist", // Todo: use src instead (gots to figure out that CORS issue with NGINX...)
+                name: title || "Grist document",
+                elementId: 'grist-app',
+                singlePage: false,
+          });
+        }};
+        document.body.appendChild(script);
+      }
+    }, [src]);
+    return (
+    <div className='grist-preview'>
+        <div id="grist-app" className='grist-preview__app'></div>
+    </div>
+    );
+  };

src/frontend/apps/drive/src/features/ui/preview/grist-preview/PreviewGrist.tsx

@@ -0,0 +1,8 @@
+.grist-preview {
+    height: 100%;
+    padding: 1rem;
+}
+
+.grist-preview__app {
+    height: 100%;
+}

src/frontend/apps/drive/src/features/ui/preview/grist-preview/grist-preview.scss

@@ -7,3 +7,4 @@
 @use "./components/volume-bar/VolumeBar.scss";
 @use "./components/controls/PreviewControls.scss";
 @use "./not-supported/NotSupportedPreview.scss";
+@use "./grist-preview/grist-preview.scss";