feat: add packages deletion

src/lib/client/ecs/component/component-handle.ts

@@ -35,6 +35,6 @@ export class ComponentHandle {
   }
 
   delete() {
-    this._manager.delete(this.id);
+    return this._manager.delete(this.id);
   }
 }

src/lib/client/ecs/component/component-manager.ts

@@ -62,9 +62,16 @@ export class ComponentManager {
     return handle;
   }
 
-  delete(id: string) {
+  async delete(id: string) {
     const components = get(_storage);
-    _storage.set(components.filter((component) => component.id !== id));
+    const component = components.find((c) => c.id === id);
+
+    if (!component) throw new Error(`System not found: ${id}`);
+
+    _storage.set(components.filter((c) => c.id !== id));
+    const { fs } = useProject();
+    const file = await fs.getFile(component.path);
+    await file.delete();
 
     const subscriptions = get(_subscriptions);
     if (subscriptions[id]) {

src/lib/client/ecs/system/system-handle.ts

@@ -35,6 +35,6 @@ export class SystemHandle {
   }
 
   delete() {
-    this._manager.delete(this.id);
+    return this._manager.delete(this.id);
   }
 }

src/lib/client/ecs/system/system-manager.ts

@@ -61,9 +61,16 @@ export class SystemManager {
     return handle;
   }
 
-  delete(id: string) {
+  async delete(id: string) {
     const systems = get(_storage);
-    _storage.set(systems.filter((system) => system.id !== id));
+    const system = systems.find((s) => s.id === id);
+
+    if (!system) throw new Error(`System not found: ${id}`);
+
+    _storage.set(systems.filter((s) => s.id !== id));
+    const { fs } = useProject();
+    const file = await fs.getFile(system.path);
+    await file.delete();
 
     const subscriptions = get(_subscriptions);
     if (subscriptions[id]) {

src/lib/client/sync-file-system/sfs-file.ts

@@ -73,6 +73,16 @@ export class SfsFile {
     if (!res.ok) throw new Error(`Failed to sync file: ${await res.text()}`);
   }
 
+  async delete(): Promise<void> {
+    const res = await fetch(this._route, {
+      method: 'DELETE',
+      headers: {
+        [SESSION_PROJECT_HEADER]: this._handler.project.id,
+      },
+    });
+    if (!res.ok) throw new Error(`Failed to delete file: ${await res.text()}`);
+  }
+
   async getFile(): Promise<FileSystemFile> {
     await this._preRead();
     return this._cache!;

src/lib/components/Widget/ecs-tree/packages/package-row.svelte

@@ -20,6 +20,7 @@
   import { get, type Writable } from 'svelte/store';
   import { tabsStore } from '$lib/components/Tabs/store';
   import { getType } from '@utils/file';
+  import { Spinner } from '$lib/components/ui/spinner';
 
   type Props =
     | {
@@ -48,7 +49,9 @@
   const selectedEntity = $derived($activeScene.entities.selected);
   const selectedEntityData = $derived($selectedEntity?.store);
 
-  const disabled = $derived.by<'added' | 'selected' | null>(() => {
+  let deleteLoading = $state(false);
+
+  const disabled = $derived.by<'added' | 'selected' | 'delete' | null>(() => {
     const isNotSelected = type === 'component' ? !$selectedEntity : !$activeScene;
     if (isNotSelected) return 'selected';
 
@@ -58,6 +61,8 @@
         : $activeSceneData.systems.includes(handle.id);
     if (isAlreadyAdded) return 'added';
 
+    if (deleteLoading) return 'delete';
+
     return null;
   });
   const items: PackageItems = $derived(ITEMS[type]);
@@ -93,9 +98,10 @@
     });
   };
 
-  const handleDelete = () => {
-    // @todo delete package
-    handle.delete();
+  const handleDelete = async () => {
+    deleteLoading = true;
+    await handle.delete();
+    deleteLoading = false;
   };
 
   const onDelete = (e: MouseEvent) => {
@@ -133,13 +139,17 @@
             </TooltipText>
           {/if}
           <Button
-            disabled={type === 'library'}
+            disabled={type === 'library' || deleteLoading}
             variant="ghost"
             size="icon"
             class="text-destructive hover:text-destructive hover:bg-destructive/20"
             onclick={onDelete}
           >
-            <span class="i-ic-baseline-delete"></span>
+            {#if deleteLoading}
+              <Spinner class="w-3 h-3" />
+            {:else}
+              <span class="i-ic-baseline-delete"></span>
+            {/if}
           </Button>
         </div>
       </div>
@@ -157,8 +167,16 @@
       </ContextMenuItem>
       <ContextMenuSeparator />
     {/if}
-    <ContextMenuItem disabled={type === 'library'} variant="destructive" onclick={onDelete}>
-      <span class="i-ic-baseline-delete"></span>
+    <ContextMenuItem
+      disabled={type === 'library' || deleteLoading}
+      variant="destructive"
+      onclick={onDelete}
+    >
+      {#if deleteLoading}
+        <Spinner class="w-3 h-3" />
+      {:else}
+        <span class="i-ic-baseline-delete"></span>
+      {/if}
       Delete
     </ContextMenuItem>
   </ContextMenuContent>

src/lib/components/Widget/ecs-tree/scenes/entities/entity-tree.svelte

@@ -314,7 +314,7 @@
 {/if}
 
 <div class="py-0.5">
-  {#each tree as node (node.kind === 'entity' ? node.id : node.path)}
+  {#each tree as node (node.kind === 'entity' ? node.id : `${node.path}-folder`)}
     {#if node.kind === 'entity'}
       <EntityTreeNode handle={manager.get(node.id)} {onNew} />
     {:else}

src/lib/components/Widget/ecs-tree/scenes/entities/folder-tree-node.svelte

@@ -176,7 +176,7 @@
 </ContextMenu>
 
 {#if expandedFolders.has(node.path)}
-  {#each node.children as child (child.kind === 'entity' ? child.id : child.path)}
+  {#each node.children as child (child.kind === 'entity' ? child.id : `${child.path}-folder`)}
     {#if child.kind === 'entity'}
       <EntityTreeNode
         handle={child.scene

src/routes/fs/project/+server.ts

@@ -40,3 +40,20 @@ export const POST = useRequestHandler(async ({ event, project }) => {
 
   return Response.json({ success: true });
 });
+
+/**
+ * To delete a project file, use the following URL:
+ * /fs/project?path=path/to/file
+ * The path must be relative to /client
+ * Only the client is handled for now
+ */
+export const DELETE = useRequestHandler(async ({ event, project }) => {
+  const path = event.url.searchParams.get('path');
+  if (!path) throw new Exception('Bad Request', 'Missing path query param', 400);
+
+  const file = project.client.fs.getFile(decodeURIComponent(path).replace(/\?url$/, ''));
+
+  file.delete();
+
+  return Response.json({ success: true });
+});