Merge pull request #92 from ClayPulse/support-remote-workspace-in-mobile-app

Support remote workspace in mobile app

Author: Shellishack

web/components/interface/navigation/nav-side-menu.tsx

@@ -79,7 +79,7 @@ function MenuPanel({ children }: { children?: React.ReactNode }) {
         </motion.div>
       ) : (
         <motion.div
-          className="absolute z-50 h-full w-full md:hidden"
+          className="absolute top-0 left-0 z-50 h-full w-full md:hidden safe-area-padding"
           initial={{
             y: "-100vh",
           }}

web/components/modals/workspace-settings-model.tsx

@@ -125,15 +125,16 @@ export default function WorkspaceSettingsModal({
 
     // Create workspace
     try {
-      const vCPU = selectedSpec.vCPU.toString();
-      const ram = getUnitFromUnitString(selectedSpec.ram.toString(), "Gi");
+      const specs = selectedSpec.key;
       const volumeSize = getUnitFromUnitString(storage.toString(), "Gi");
 
       addToast({
         title: "Creating workspace",
-        description: `Creating workspace ${workspaceName}. Specifications: ${vCPU} vCPU, ${ram} RAM, ${volumeSize} storage.`,
+        description: `Creating workspace ${workspaceName}. Specifications: ${
+          selectedSpec.vCPU
+        } vCPU, ${selectedSpec.ram} RAM, ${volumeSize} storage.`,
       });
-      await createWorkspace(workspaceName, vCPU.toString(), ram, volumeSize);
+      await createWorkspace(workspaceName, specs, volumeSize);
       addToast({
         title: "Workspace created",
         description: `Workspace ${workspaceName} has been created successfully.`,

web/lib/hooks/use-platform-api.ts

@@ -1,7 +1,6 @@
 import { PlatformEnum } from "@/lib/enums";
 import { useEffect, useState } from "react";
 import { AbstractPlatformAPI } from "../platform-api/abstract-platform-api";
-import { CapacitorAPI } from "../platform-api/capacitor/capacitor-api";
 import { CloudAPI } from "../platform-api/cloud/cloud-api";
 import { ElectronAPI } from "../platform-api/electron/electron-api";
 import { getPlatform } from "../platform-api/platform-checker";
@@ -31,7 +30,8 @@ export function usePlatformApi() {
     const platform = getPlatform();
 
     if (platform === PlatformEnum.Capacitor) {
-      return new CapacitorAPI();
+      // return new CapacitorAPI();
+      return new CloudAPI(workspace);
     } else if (platform === PlatformEnum.Electron) {
       return new ElectronAPI();
     } else if (

web/lib/hooks/use-workspace.ts

@@ -1,9 +1,7 @@
 import { EditorContext } from "@/components/providers/editor-context-provider";
-import { PlatformEnum } from "@/lib/enums";
 import { useContext } from "react";
 import useSWR from "swr";
 import { AbstractPlatformAPI } from "../platform-api/abstract-platform-api";
-import { getPlatform } from "../platform-api/platform-checker";
 import { fetchAPI } from "../pulse-editor-website/backend";
 import { RemoteWorkspace } from "../types";
 import { useAuth } from "./use-auth";
@@ -43,19 +41,11 @@ export function useWorkspace() {
 
   async function createWorkspace(
     name: string,
-    cpuLimit: string,
-    memoryLimit: string,
+    specs: string,
     volumeSize: string,
   ) {
     if (!editorContext) {
       throw new Error("Editor context is not available");
-    } else if (
-      getPlatform() !== PlatformEnum.Web &&
-      getPlatform() !== PlatformEnum.WebMobile
-    ) {
-      throw new Error(
-        "Workspace creation is only supported on the web platform.",
-      );
     } else if (!session) {
       throw new Error("User is not authenticated.");
     }
@@ -66,7 +56,7 @@ export function useWorkspace() {
       headers: {
         "Content-Type": "application/json",
       },
-      body: JSON.stringify({ name, cpuLimit, memoryLimit, volumeSize }),
+      body: JSON.stringify({ name, specs, volumeSize }),
     });
 
     if (!response.ok) {

web/lib/platform-api/capacitor/capacitor-api.ts

@@ -4,12 +4,17 @@ import {
   PersistentSettings,
   ProjectInfo,
 } from "@/lib/types";
-import { AbstractPlatformAPI } from "../abstract-platform-api";
 import { Directory, Encoding, Filesystem } from "@capacitor/filesystem";
 import { FilePicker } from "@capawesome/capacitor-file-picker";
 import ignore from "ignore";
 import path from "path";
+import { AbstractPlatformAPI } from "../abstract-platform-api";
 
+/**
+ * @deprecated Android implementation is no longer supported due to
+ * file access restrictions. Instead, use cloud managed workspaces,
+ * or use self-hosted workspace backend in `remote-workspace/`
+ */
 export class CapacitorAPI extends AbstractPlatformAPI {
   constructor() {
     super();

web/lib/pulse-editor-website/backend.ts

@@ -53,7 +53,10 @@ export async function fetchAPI(
       `${url}. \n\nRequest header: ${JSON.stringify(headerObj)} \n\nNative response: ${JSON.stringify(nativeResponse)} \n\nCookie: ${document.cookie}`,
     );
 
-    const data = JSON.stringify(nativeResponse.data);
+    const data =
+      typeof nativeResponse.data === "string"
+        ? nativeResponse.data
+        : JSON.stringify(nativeResponse.data);
 
     // Convert CapacitorHttpResponse to Fetch Response
     const fetchResponse = new Response(data, {