Improve UI loading states & add useWorkspace hook in react-api lib

.changeset/afraid-moments-punch.md

@@ -0,0 +1,6 @@
+---
+"@pulse-editor/shared-utils": patch
+"@pulse-editor/react-api": patch
+---
+
+Add useWorkspace hook

.changeset/pre.json

@@ -9,6 +9,7 @@
     "@pulse-editor/web": "0.1.1-alpha.13"
   },
   "changesets": [
+    "afraid-moments-punch",
     "angry-llamas-smash",
     "beige-pandas-rhyme",
     "bumpy-parents-pull",

npm-packages/react-api/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @pulse-editor/react-api
 
+## 0.1.1-beta.56
+
+### Patch Changes
+
+- Add useWorkspace hook
+- Updated dependencies
+  - @pulse-editor/[email protected]
+
 ## 0.1.1-beta.55
 
 ### Patch Changes

npm-packages/react-api/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pulse-editor/react-api",
-  "version": "0.1.1-beta.55",
+  "version": "0.1.1-beta.56",
   "main": "dist/main.js",
   "files": [
     "dist"
@@ -37,7 +37,7 @@
     "typescript-eslint": "^8.30.1"
   },
   "peerDependencies": {
-    "@pulse-editor/shared-utils": "0.1.1-beta.55",
+    "@pulse-editor/shared-utils": "0.1.1-beta.56",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   }

npm-packages/react-api/src/hooks/editor/use-workspace.ts

@@ -0,0 +1,30 @@
+import { IMCMessage, IMCMessageTypeEnum } from "@pulse-editor/shared-utils";
+import { useEffect, useState } from "react";
+import useIMC from "../imc/use-imc";
+
+export default function useWorkspace() {
+  const [workspaceId, setWorkspaceId] = useState<string | undefined>(undefined);
+
+  const receiverHandlerMap = new Map<
+    IMCMessageTypeEnum,
+    (senderWindow: Window, message: IMCMessage) => Promise<void>
+  >();
+
+  const { imc, isReady } = useIMC(receiverHandlerMap, "theme");
+
+  // Upon initial load, request theme from main app
+  useEffect(() => {
+    if (isReady) {
+      imc
+        ?.sendMessage(IMCMessageTypeEnum.EditorAppRequestWorkspace)
+        .then((result) => {
+          const { id }: { id: string } = result;
+          setWorkspaceId((prev) => id);
+        });
+    }
+  }, [isReady]);
+
+  return {
+    workspaceId,
+  };
+}

npm-packages/react-api/src/main.ts

@@ -5,7 +5,6 @@ import useLoading from "./hooks/editor/use-loading";
 import useNotification from "./hooks/editor/use-notification";
 import useRegisterAction from "./hooks/editor/use-register-action";
 import useTheme from "./hooks/editor/use-theme";
-import useToolbar from "./hooks/editor/use-toolbar";
 
 import useImageGen from "./hooks/ai-modality/use-image-gen";
 import useLLM from "./hooks/ai-modality/use-llm";
@@ -17,6 +16,7 @@ import usePulseEnv from "./hooks/editor/use-env";
 import useOwnedAppView from "./hooks/editor/use-owned-app-view";
 import useReceiveFile from "./hooks/editor/use-receive-file";
 import useSnapshotState from "./hooks/editor/use-snapshot-state";
+import useWorkspace from "./hooks/editor/use-workspace";
 import useTerminal from "./hooks/terminal/use-terminal";
 import ReceiveFileProvider from "./providers/receive-file-provider";
 import SnapshotProvider from "./providers/snapshot-provider";
@@ -41,6 +41,6 @@ export {
   useTTS,
   useTerminal,
   useTheme,
-  useToolbar,
   useVideoGen,
+  useWorkspace,
 };

npm-packages/shared-utils/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @pulse-editor/shared-utils
 
+## 0.1.1-beta.56
+
+### Patch Changes
+
+- Add useWorkspace hook
+
 ## 0.1.1-beta.55
 
 ### Patch Changes

npm-packages/shared-utils/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@pulse-editor/shared-utils",
-    "version": "0.1.1-beta.55",
+    "version": "0.1.1-beta.56",
     "main": "dist/main.js",
     "files": [
         "dist"

npm-packages/shared-utils/src/types/types.ts

@@ -44,6 +44,8 @@ export enum IMCMessageTypeEnum {
   EditorAppReceiveFileUri = "editor-app-receive-file-uri",
   // App uses owned app
   EditorAppUseOwnedApp = "editor-app-use-owned-app",
+  // App requests workspace info
+  EditorAppRequestWorkspace = "editor-app-request-workspace",
   // #endregion
 
   // #region Platform API interaction messages (require OS-like environment)

remote-workspace/src/index.ts

@@ -33,14 +33,20 @@ async function startServers() {
       ? true
       : false;
 
-  await addAPIServer(server, expressApp, workspaceId, serverPort, frontendUrl);
+  await addAPIServer(
+    server,
+    expressApp,
+    "api-" + workspaceId,
+    serverPort,
+    frontendUrl,
+  );
   console.log(
-    `API server is running at ${isHttps ? "https" : "http"}://${address}:${serverPort}/${workspaceId}`,
+    `API server is running at ${isHttps ? "https" : "http"}://${address}:${serverPort}/api-${workspaceId}`,
   );
 
-  await addTerminalServer(server, workspaceId);
+  await addTerminalServer(server, "api-" + workspaceId);
   console.log(
-    `Terminal server is running at ${isHttps ? "wss" : "ws"}://${address}:${serverPort}/${workspaceId}/terminal/ws`,
+    `Terminal server is running at ${isHttps ? "wss" : "ws"}://${address}:${serverPort}/api-${workspaceId}/terminal/ws`,
   );
 }
 

remote-workspace/src/servers/api-server/index.ts

@@ -42,7 +42,7 @@ async function createEndpoints(
     res.redirect(url.toString());
   });
 
-  app.get("/:instanceId/test", (req, res) => {
+  app.get("/:instanceId/check-health", (req, res) => {
     const id = req.params.instanceId;
     if (id !== instanceId) {
       return res.status(400).send("Invalid instance ID");

web/components/app-loaders/sandbox-app-loader.tsx

@@ -178,7 +178,7 @@ export default function SandboxAppLoader({
         getHandlerMap(viewModel),
       );
     }
-  }, [viewModel, editorContext?.editorStates, editorContext?.persistSettings]);
+  }, [viewModel, editorContext?.editorStates, editorContext?.persistSettings, platformApi]);
 
   function getHandlerMap(model: ViewModel) {
     const newMap = new Map<IMCMessageTypeEnum, ReceiverHandler>();

web/components/explorer/file-system/fs-explorer.tsx

@@ -4,11 +4,12 @@ import { IMCContext } from "@/components/providers/imc-provider";
 import { PlatformEnum } from "@/lib/enums";
 import { usePlatformApi } from "@/lib/hooks/use-platform-api";
 import { useTabViewManager } from "@/lib/hooks/use-tab-view-manager";
+import { useWorkspace } from "@/lib/hooks/use-workspace";
 import { getPlatform } from "@/lib/platform-api/platform-checker";
 import { TreeViewGroupRef } from "@/lib/types";
-import { addToast, Button } from "@heroui/react";
+import { addToast, Button, Spinner } from "@heroui/react";
 import { IMCMessageTypeEnum, ViewModeEnum } from "@pulse-editor/shared-utils";
-import { useContext, useEffect, useRef } from "react";
+import { useContext, useEffect, useRef, useState } from "react";
 import toast from "react-hot-toast";
 import Icon from "../../misc/icon";
 import { EditorContext } from "../../providers/editor-context-provider";
@@ -25,6 +26,9 @@ export default function FileSystemExplorer({
   const platform = getPlatform();
   const { platformApi } = usePlatformApi();
   const { activeTabView } = useTabViewManager();
+  const { refreshWorkspaceContent } = useWorkspace();
+
+  const [isLoading, setIsLoading] = useState(true);
 
   const rootGroupRef = useRef<TreeViewGroupRef | null>(null);
 
@@ -45,6 +49,14 @@ export default function FileSystemExplorer({
     }
   }, [editorContext?.editorStates.explorerSelectedNodeRefs]);
 
+  useEffect(() => {
+    if (editorContext?.editorStates.workspaceContent) {
+      setIsLoading(false);
+    } else {
+      setIsLoading(true);
+    }
+  }, [editorContext?.editorStates.workspaceContent]);
+
   async function viewFile(uri: string) {
     // Simply send uri to selected app node or app view
     if (activeTabView?.type === ViewModeEnum.App) {
@@ -191,21 +203,28 @@ export default function FileSystemExplorer({
           </div>
         </div>
 
-        {content?.length === 0 && (
-          <p className="text-center">
-            Empty content. Create a new file to get started.
-          </p>
-        )}
-
         <div className="overflow-y-auto">
           <TreeViewGroup
             ref={rootGroupRef}
             objects={content}
             viewFile={viewFile}
             folderUri={fsPath}
             platformApi={platformApi}
+            refreshWorkspaceContent={refreshWorkspaceContent}
           />
         </div>
+
+        {isLoading && editorContext?.editorStates.currentWorkspace && (
+          <div className="flex justify-center">
+            <Spinner />
+          </div>
+        )}
+
+        {content.length === 0 && !isLoading && (
+          <p className="text-center">
+            Empty content. Create a new file to get started.
+          </p>
+        )}
       </div>
     </div>
   );