load README.md into preview view

frontend/app/app.tsx

@@ -4,10 +4,8 @@
 import * as React from "react";
 import * as jotai from "jotai";
 import { Provider } from "jotai";
-import * as rx from "rxjs";
 import { clsx } from "clsx";
 import { TabContent } from "@/app/tab/tab";
-import { v4 as uuidv4 } from "uuid";
 import { globalStore, atoms } from "@/store/global";
 
 import "/public/style.less";

frontend/app/block/block.tsx

@@ -7,6 +7,7 @@ import { atoms } from "@/store/global";
 
 import { TerminalView } from "@/app/view/term";
 import { PreviewView } from "@/app/view/preview";
+import { CenteredLoadingDiv } from "@/element/quickelems";
 
 import "./block.less";
 
@@ -40,7 +41,7 @@ const Block = ({ blockId }: { blockId: string }) => {
                 </div>
             </div>
             <div key="content" className="block-content">
-                {blockElem}
+                <React.Suspense fallback={<CenteredLoadingDiv />}>{blockElem}</React.Suspense>
             </div>
         </div>
     );

frontend/app/element/quickelems.less

@@ -0,0 +1,12 @@
+// Copyright 2024, Command Line Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+.centered-loading {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+}

frontend/app/element/quickelems.tsx

@@ -0,0 +1,14 @@
+// Copyright 2024, Command Line Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import "./quickelems.less";
+
+function CenteredLoadingDiv() {
+    return (
+        <div className="centered-loading">
+            <div>Loading...</div>
+        </div>
+    );
+}
+
+export { CenteredLoadingDiv };

frontend/app/store/global.ts

@@ -24,7 +24,11 @@ const blockAtomFamily = atomFamily<string, jotai.Atom<BlockData>>((blockId: stri
         return jotai.atom({ blockid: blockId1, view: "term" });
     }
     if (blockId === blockId2) {
-        return jotai.atom({ blockid: blockId2, view: "preview", meta: { mimetype: "text/markdown" } });
+        return jotai.atom({
+            blockid: blockId2,
+            view: "preview",
+            meta: { mimetype: "text/markdown", file: "README.md" },
+        });
     }
     if (blockId === blockId3) {
         return jotai.atom({ blockid: blockId3, view: "term" });

frontend/app/tab/tab.tsx

@@ -8,9 +8,6 @@ import { atoms } from "@/store/global";
 
 import "./tab.less";
 
-const blockId1 = "44113b0c-1528-4db1-94f0-2cafa1542941";
-const blockId2 = "6bd76ccb-76ae-4f29-aa64-35206767e1ac";
-
 const TabContent = ({ tabId }: { tabId: string }) => {
     const tabs = jotai.useAtomValue(atoms.tabsAtom);
     const tabData = tabs.find((tab) => tab.tabid === tabId);

frontend/app/view/preview.tsx

@@ -5,6 +5,8 @@ import * as React from "react";
 import * as jotai from "jotai";
 import { atoms } from "@/store/global";
 import { Markdown } from "@/element/markdown";
+import * as FileService from "@/bindings/pkg/service/fileservice/FileService";
+import * as util from "@/util/util";
 
 import "./view.less";
 
@@ -21,10 +23,16 @@ console.log(foo);
 \`\`\`
 `;
 
+const readmeAtom = jotai.atom(async () => {
+    const readme = await FileService.ReadFile("README.md");
+    return util.base64ToString(readme);
+});
+
 const MarkdownPreview = ({ blockData }: { blockData: BlockData }) => {
+    const readmeText = jotai.useAtomValue(readmeAtom);
     return (
         <div className="view-preview view-preview-markdown">
-            <Markdown text={markdownText} />
+            <Markdown text={readmeText} />
         </div>
     );
 };

frontend/util/util.ts

@@ -0,0 +1,25 @@
+// Copyright 2024, Command Line Inc.
+// SPDX-License-Identifier: Apache-2.0s
+
+import base64 from "base64-js";
+
+function base64ToString(b64: string): string {
+    const stringBytes = base64.toByteArray(b64);
+    return new TextDecoder().decode(stringBytes);
+}
+
+function stringToBase64(input: string): string {
+    const stringBytes = new TextEncoder().encode(input);
+    return base64.fromByteArray(stringBytes);
+}
+
+function base64ToArray(b64: string): Uint8Array {
+    const rawStr = atob(b64);
+    const rtnArr = new Uint8Array(new ArrayBuffer(rawStr.length));
+    for (let i = 0; i < rawStr.length; i++) {
+        rtnArr[i] = rawStr.charCodeAt(i);
+    }
+    return rtnArr;
+}
+
+export { base64ToString, stringToBase64, base64ToArray };