Add project viewer in web

Author: Shellishack

.changeset/hot-windows-march.md

@@ -0,0 +1,6 @@
+---
+"@pulse-editor/shared-utils": patch
+"@pulse-editor/react-api": patch
+---
+
+Update types

.changeset/pre.json

@@ -29,6 +29,7 @@
     "fruity-goats-look",
     "full-beans-stop",
     "hot-symbols-fry",
+    "hot-windows-march",
     "large-moose-tap",
     "lazy-zebras-mate",
     "mighty-ghosts-crash",

desktop/main.mjs

@@ -188,6 +188,15 @@ async function handleCreateProject(event, uri) {
   await fs.promises.mkdir(uri);
 }
 
+async function handleDeleteProject(event, uri) {
+  await fs.promises.rm(uri, { recursive: true, force: true });
+}
+
+async function handleUpdateProject(event, uri, updatedInfo) {
+  const newUri = path.join(path.dirname(uri), updatedInfo.name);
+  await fs.promises.rename(uri, newUri);
+}
+
 async function handleCreateFolder(event, uri) {
   // Create a folder at the uri
   await fs.promises.mkdir(uri);
@@ -272,6 +281,9 @@ app.whenReady().then(() => {
   ipcMain.handle("list-path-content", handleListPathContent);
 
   ipcMain.handle("create-project", handleCreateProject);
+  ipcMain.handle("delete-project", handleDeleteProject);
+  ipcMain.handle("update-project", handleUpdateProject);
+
   ipcMain.handle("create-folder", handleCreateFolder);
   ipcMain.handle("create-file", handleCreateFile);
 

desktop/preload.mjs

@@ -10,6 +10,9 @@ contextBridge.exposeInMainWorld("electronAPI", {
     ipcRenderer.invoke("list-path-content", uri, options),
 
   createProject: (uri) => ipcRenderer.invoke("create-project", uri),
+  deleteProject: (uri) => ipcRenderer.invoke("delete-project", uri),
+  updateProject: (uri, updatedInfo) => ipcRenderer.invoke("update-project", uri, updatedInfo),
+
   createFolder: (uri) => ipcRenderer.invoke("create-folder", uri),
   createFile: (uri) => ipcRenderer.invoke("create-file", uri),
 

npm-packages/react-api/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @pulse-editor/react-api
 
+## 0.1.1-alpha.33
+
+### Patch Changes
+
+- Update types
+- Updated dependencies
+  - @pulse-editor/shared-utils@0.1.1-alpha.33
+
 ## 0.1.1-alpha.32
 
 ### Patch Changes

npm-packages/react-api/package.json

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

npm-packages/shared-utils/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @pulse-editor/shared-utils
 
+## 0.1.1-alpha.33
+
+### Patch Changes
+
+- Update types
+
 ## 0.1.1-alpha.32
 
 ### Patch Changes

npm-packages/shared-utils/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@pulse-editor/shared-utils",
-    "version": "0.1.1-alpha.32",
+    "version": "0.1.1-alpha.33",
     "main": "dist/main.js",
     "files": [
         "dist"

web/components/explorer/explorer.tsx

@@ -4,7 +4,7 @@ import { TreeViewGroupRef } from "@/lib/types";
 import { useContext, useEffect, useRef, useState } from "react";
 import { EditorContext } from "../providers/editor-context-provider";
 import { PlatformEnum } from "@/lib/types";
-import { getPlatform } from "@/lib/platform-api/platform-checker";
+import { getPlatform, isWeb } from "@/lib/platform-api/platform-checker";
 import { Button } from "@heroui/react";
 import useExplorer from "@/lib/hooks/use-explorer";
 import { usePlatformApi } from "@/lib/hooks/use-platform-api";
@@ -35,16 +35,15 @@ export default function Explorer({
   useEffect(() => {
     if (platformApi) {
       const homePath = editorContext?.persistSettings?.projectHomePath;
-      if (homePath) {
-        platformApi.listProjects(homePath).then((projects) => {
-          editorContext?.setEditorStates((prev) => {
-            return {
-              ...prev,
-              projectsInfo: projects,
-            };
-          });
+
+      platformApi.listProjects(homePath).then((projects) => {
+        editorContext?.setEditorStates((prev) => {
+          return {
+            ...prev,
+            projectsInfo: projects,
+          };
         });
-      }
+      });
     }
   }, [editorContext?.persistSettings, platformApi]);
 
@@ -124,7 +123,7 @@ export default function Explorer({
   }
 
   // Choose project home path
-  if (!editorContext?.persistSettings?.projectHomePath) {
+  if (!isWeb() && !editorContext?.persistSettings?.projectHomePath) {
     return (
       <div className="bg-content2 h-full w-full space-y-2 p-4">
         <p>
@@ -210,7 +209,8 @@ export default function Explorer({
   // Pick project
   else {
     return (
-      <div className="bg-content2 h-full w-full space-y-2 overflow-y-auto p-4">
+      <div className="bg-content2 h-full w-full space-y-2 overflow-y-auto px-4">
+        <p className="text-center text-lg font-medium">View Projects</p>
         <Button
           className="w-full"
           onPress={() => {
@@ -219,11 +219,11 @@ export default function Explorer({
         >
           New Project
         </Button>
+        <ProjectList />
         <ProjectSettingsModal
           isOpen={isProjectSettingsModalOpen}
           setIsOpen={setIsProjectSettingsModalOpen}
         />
-        <ProjectList />
       </div>
     );
   }

web/components/explorer/project-list.tsx

@@ -8,6 +8,32 @@ import { ContextMenuState, ProjectInfo } from "@/lib/types";
 import ContextMenu from "../interface/context-menu";
 import ProjectSettingsModal from "../modals/project-settings-modal";
 
+export default function ProjectList() {
+  const editorContext = useContext(EditorContext);
+  const [settingsOpen, setSettingsOpen] = useState(false);
+  const [settingsProject, setSettingsProject] = useState<
+    ProjectInfo | undefined
+  >(undefined);
+
+  return (
+    <div className="flex w-full flex-col gap-2">
+      {editorContext?.editorStates.projectsInfo?.map((project, index) => (
+        <ProjectTab
+          key={index}
+          project={project}
+          setSettingsOpen={setSettingsOpen}
+          setSettingsProject={setSettingsProject}
+        />
+      ))}
+      <ProjectSettingsModal
+        isOpen={settingsOpen}
+        setIsOpen={setSettingsOpen}
+        projectInfo={settingsProject}
+      />
+    </div>
+  );
+}
+
 function ProjectTab({
   project,
   setSettingsOpen,
@@ -90,7 +116,7 @@ function ProjectTab({
       <ContextMenu state={contextMenuState} setState={setContextMenuState}>
         <div className="flex flex-col">
           <Button
-            className="h-12 text-medium sm:h-8 sm:text-sm"
+            className="text-medium h-12 sm:h-8 sm:text-sm"
             variant="light"
             onPress={(e) => {
               setSettingsOpen(true);
@@ -101,7 +127,7 @@ function ProjectTab({
             <p className="w-full text-start">Project Settings</p>
           </Button>
           <Button
-            className="h-12 text-medium sm:h-8 sm:text-sm"
+            className="text-medium h-12 sm:h-8 sm:text-sm"
             variant="light"
           >
             <p className="w-full text-start">Select Multiple</p>
@@ -111,29 +137,3 @@ function ProjectTab({
     </div>
   );
 }
-
-export default function ProjectList() {
-  const editorContext = useContext(EditorContext);
-  const [settingsOpen, setSettingsOpen] = useState(false);
-  const [settingsProject, setSettingsProject] = useState<
-    ProjectInfo | undefined
-  >(undefined);
-
-  return (
-    <div className="flex w-full flex-col gap-2">
-      {editorContext?.editorStates.projectsInfo?.map((project, index) => (
-        <ProjectTab
-          key={index}
-          project={project}
-          setSettingsOpen={setSettingsOpen}
-          setSettingsProject={setSettingsProject}
-        />
-      ))}
-      <ProjectSettingsModal
-        isOpen={settingsOpen}
-        setIsOpen={setSettingsOpen}
-        projectInfo={settingsProject}
-      />
-    </div>
-  );
-}