From 77caa58852bc3bb6259fc70a9bd9e9d9495a7cbe Mon Sep 17 00:00:00 2001
From: unknown <timothe.jacquot@epitech.eu>
Date: Mon, 16 Feb 2026 19:21:30 +0100
Subject: [PATCH 01/13] feat: add file system using indexedDB

---
 src/lib/components/Stores/tabs.ts      |   5 +
 src/lib/components/Utils/fileSystem.ts | 138 +++++++++++++++++++++++++
 2 files changed, 143 insertions(+)
 create mode 100644 src/lib/components/Stores/tabs.ts
 create mode 100644 src/lib/components/Utils/fileSystem.ts

diff --git a/src/lib/components/Stores/tabs.ts b/src/lib/components/Stores/tabs.ts
new file mode 100644
index 0000000..b2a2561
--- /dev/null
+++ b/src/lib/components/Stores/tabs.ts
@@ -0,0 +1,5 @@
+import { type Tab, tabTypes } from '$lib/components/Tabs/types';
+import { type Writable, writable } from 'svelte/store';
+
+export const tabsStore: Writable<Tab[]> = writable([{ type: tabTypes[0], title: 'Game' }]);
+export const tabSelectedStore: Writable<number> = writable(0);
diff --git a/src/lib/components/Utils/fileSystem.ts b/src/lib/components/Utils/fileSystem.ts
new file mode 100644
index 0000000..bfea074
--- /dev/null
+++ b/src/lib/components/Utils/fileSystem.ts
@@ -0,0 +1,138 @@
+import fileSaver from 'file-saver';
+import { openDB } from 'idb';
+import JSZip from 'jszip';
+
+const dbName = 'NanoForge';
+let dbPromise: Promise<any> | null = null;
+
+export interface File {
+  id: string;
+  lastModified: number;
+}
+
+async function getDB() {
+  if (!dbPromise) {
+    dbPromise = openDB(dbName, 1, {
+      upgrade(db) {
+        if (!db.objectStoreNames.contains('files')) {
+          db.createObjectStore('files', { keyPath: 'id' });
+        }
+      },
+    });
+  }
+  return dbPromise;
+}
+
+export async function initDB() {
+  await getDB();
+}
+
+export async function listFiles(): Promise<Array<File>> {
+  const db = await getDB();
+  const tx = db.transaction('files', 'readonly');
+  const store = tx.objectStore('files');
+
+  const allFiles = await store.getAll();
+
+  return allFiles.map((file: File) => ({
+    id: file.id,
+    lastModified: file.lastModified,
+  }));
+}
+
+export async function listFolderContents(
+  path: string = '',
+): Promise<Array<{ name: string; type: 'file' | 'folder'; lastModified?: number }>> {
+  const allFiles = await listFiles();
+  const cleanPath = path.endsWith('/') ? path.slice(0, -1) : path;
+
+  const items = new Map<string, { name: string; type: 'file' | 'folder'; lastModified?: number }>();
+
+  const files = allFiles.filter((file) => {
+    const filePath = file.id;
+    if (cleanPath === '') {
+      return !filePath.includes('/'); // Racine
+    }
+    return filePath.startsWith(cleanPath + '/') && !filePath.includes('/', cleanPath.length + 1);
+  });
+
+  for (const file of files) {
+    const fileName = file.id.split('/').pop();
+    const name = cleanPath === '' ? file.id : (fileName ?? file.id);
+    items.set(name, { name, type: 'file' as const, lastModified: file.lastModified });
+  }
+
+  const folders = new Set<string>();
+  for (const file of allFiles) {
+    const filePath = file.id;
+    if (cleanPath === '') {
+      const firstFolder = filePath.split('/')[0];
+      if (firstFolder) folders.add(firstFolder);
+    } else {
+      const relativePath = filePath.substring(cleanPath.length + 1);
+      const firstFolder = relativePath.split('/')[0];
+      if (firstFolder) folders.add(firstFolder);
+    }
+  }
+
+  for (const folder of folders) {
+    if (!items.has(folder)) {
+      items.set(folder, { name: folder, type: 'folder' as const });
+    }
+  }
+
+  return Array.from(items.values()).sort((a, b) => {
+    if (a.type === 'folder' && b.type === 'file') return -1;
+    if (a.type === 'file' && b.type === 'folder') return 1;
+    return a.name.localeCompare(b.name);
+  });
+}
+
+export async function saveFile(fileName: string, content: string) {
+  const db = await getDB();
+  const tx = db.transaction('files', 'readwrite');
+  const store = tx.objectStore('files');
+  await store.put({ id: fileName, content, lastModified: Date.now() });
+  await tx.done;
+}
+
+export async function loadFile(fileName: string) {
+  const db = await getDB();
+  const tx = db.transaction('files', 'readonly');
+  const store = tx.objectStore('files');
+  const file = await store.get(fileName);
+  return file?.content || '';
+}
+
+function ensureFolder(zip: JSZip, path: string): JSZip {
+  return zip.folder(path) ?? zip;
+}
+
+export async function exportToZip(filename: string = 'NanoForge.zip') {
+  const db = await getDB();
+  const tx = db.transaction('files', 'readonly');
+  const store = tx.objectStore('files');
+
+  const allFiles = await store.getAll();
+  const zip = new JSZip();
+
+  for (const file of allFiles) {
+    const parts = file.id.split('/');
+    let currentFolder = zip;
+
+    for (let i = 0; i < parts.length - 1; i++) {
+      const folderName = parts[i];
+      const nextFolder = currentFolder.folder(folderName);
+      if (nextFolder) {
+        currentFolder = nextFolder;
+      } else {
+        currentFolder = ensureFolder(currentFolder, parts[i]);
+      }
+    }
+
+    currentFolder.file(parts[parts.length - 1], file.content);
+  }
+
+  const zipBlob = await zip.generateAsync({ type: 'blob' });
+  fileSaver.saveAs(zipBlob, filename);
+}

From 6555c9e1f97ddc8ac8d50f7613525e28251884d0 Mon Sep 17 00:00:00 2001
From: unknown <timothe.jacquot@epitech.eu>
Date: Mon, 16 Mar 2026 01:37:49 +0100
Subject: [PATCH 02/13] fix: list local folder in ContentBrowser

---
 src/lib/components/Storage/db.ts         |  21 ++++
 src/lib/components/Storage/fileSystem.ts |  91 +++++++++++++++
 src/lib/components/Storage/tabs.ts       |   9 ++
 src/lib/components/Stores/workingFile.ts |   3 +
 src/lib/components/Utils/fileSystem.ts   | 138 -----------------------
 5 files changed, 124 insertions(+), 138 deletions(-)
 create mode 100644 src/lib/components/Storage/db.ts
 create mode 100644 src/lib/components/Storage/fileSystem.ts
 create mode 100644 src/lib/components/Storage/tabs.ts
 create mode 100644 src/lib/components/Stores/workingFile.ts
 delete mode 100644 src/lib/components/Utils/fileSystem.ts

diff --git a/src/lib/components/Storage/db.ts b/src/lib/components/Storage/db.ts
new file mode 100644
index 0000000..a76d4de
--- /dev/null
+++ b/src/lib/components/Storage/db.ts
@@ -0,0 +1,21 @@
+import { openDB } from 'idb';
+
+const dbName = 'NanoForge';
+let dbPromise: Promise<any> | null = null;
+
+export async function getDB() {
+  if (!dbPromise) {
+    dbPromise = openDB(dbName, 1, {
+      upgrade(db) {
+        if (!db.objectStoreNames.contains('files')) {
+          db.createObjectStore('files', { keyPath: 'id' });
+        }
+      },
+    });
+  }
+  return dbPromise;
+}
+
+export async function initDB() {
+  await getDB();
+}
diff --git a/src/lib/components/Storage/fileSystem.ts b/src/lib/components/Storage/fileSystem.ts
new file mode 100644
index 0000000..a850e10
--- /dev/null
+++ b/src/lib/components/Storage/fileSystem.ts
@@ -0,0 +1,91 @@
+import { getDB } from '$lib/components/Storage/db';
+
+export interface File {
+  id: string;
+  lastModified: number;
+}
+
+export interface FolderContent {
+  name: string;
+  type: 'file' | 'folder';
+  lastModified?: number;
+}
+
+export async function listFiles(): Promise<Array<File>> {
+  const db = await getDB();
+  const tx = db.transaction('files', 'readonly');
+  const store = tx.objectStore('files');
+
+  const allFiles = await store.getAll();
+
+  return allFiles.map((file: File) => ({
+    id: file.id,
+    lastModified: file.lastModified,
+  }));
+}
+
+export async function listFolders(): Promise<string[]> {
+  const folders = new Set<string>();
+  const files = await listFiles();
+
+  for (const file of files) {
+    const parts = file.id.split('/');
+
+    parts.pop();
+
+    let current = '';
+    for (const part of parts) {
+      current = current ? `${current}/${part}` : part;
+      folders.add(current);
+    }
+  }
+
+  return Array.from(folders).sort();
+}
+
+export async function listFolderContents(path: string = ''): Promise<Array<FolderContent>> {
+  const allFiles = await listFiles();
+  let cleanPath = path.startsWith('/') ? path.substring(1) : path;
+  cleanPath = cleanPath.endsWith('/') || cleanPath === '' ? cleanPath : cleanPath.concat('/');
+
+  const items = new Map<string, FolderContent>();
+
+  const files = allFiles.filter((file) => {
+    const filePath = file.id;
+    return filePath.startsWith(cleanPath);
+  });
+
+  for (const file of files) {
+    const relativePath = file.id.substring(cleanPath.length);
+    const isFolderIndex = relativePath.indexOf('/');
+    const name = isFolderIndex >= 0 ? relativePath.substring(0, isFolderIndex) : relativePath;
+
+    items.set(name, {
+      name,
+      type: isFolderIndex >= 0 ? 'folder' : 'file',
+      lastModified: file.lastModified,
+    });
+  }
+
+  return Array.from(items.values()).sort((a, b) => {
+    if (a.type === 'folder' && b.type === 'file') return -1;
+    if (a.type === 'file' && b.type === 'folder') return 1;
+    return a.name.localeCompare(b.name);
+  });
+}
+
+export async function saveFile(fileName: string, content: string) {
+  const db = await getDB();
+  const tx = db.transaction('files', 'readwrite');
+  const store = tx.objectStore('files');
+  await store.put({ id: fileName, content, lastModified: Date.now() });
+  await tx.done;
+}
+
+export async function loadFile(fileName: string): Promise<string> {
+  const db = await getDB();
+  const tx = db.transaction('files', 'readonly');
+  const store = tx.objectStore('files');
+  const file = await store.get(fileName);
+  return file?.content || '';
+}
diff --git a/src/lib/components/Storage/tabs.ts b/src/lib/components/Storage/tabs.ts
new file mode 100644
index 0000000..4dff86b
--- /dev/null
+++ b/src/lib/components/Storage/tabs.ts
@@ -0,0 +1,9 @@
+import { getDB } from '$lib/components/Storage/db';
+
+export async function saveTab(fileName: string, content: string) {
+  const db = await getDB();
+  const tx = db.transaction('tabs', 'readwrite');
+  const store = tx.objectStore('tabs');
+  await store.put({ id: fileName, content, lastModified: Date.now() });
+  await tx.done;
+}
diff --git a/src/lib/components/Stores/workingFile.ts b/src/lib/components/Stores/workingFile.ts
new file mode 100644
index 0000000..773c2a7
--- /dev/null
+++ b/src/lib/components/Stores/workingFile.ts
@@ -0,0 +1,3 @@
+import { type Writable, writable } from 'svelte/store';
+
+export const workingFileStore: Writable<string> = writable('');
diff --git a/src/lib/components/Utils/fileSystem.ts b/src/lib/components/Utils/fileSystem.ts
deleted file mode 100644
index bfea074..0000000
--- a/src/lib/components/Utils/fileSystem.ts
+++ /dev/null
@@ -1,138 +0,0 @@
-import fileSaver from 'file-saver';
-import { openDB } from 'idb';
-import JSZip from 'jszip';
-
-const dbName = 'NanoForge';
-let dbPromise: Promise<any> | null = null;
-
-export interface File {
-  id: string;
-  lastModified: number;
-}
-
-async function getDB() {
-  if (!dbPromise) {
-    dbPromise = openDB(dbName, 1, {
-      upgrade(db) {
-        if (!db.objectStoreNames.contains('files')) {
-          db.createObjectStore('files', { keyPath: 'id' });
-        }
-      },
-    });
-  }
-  return dbPromise;
-}
-
-export async function initDB() {
-  await getDB();
-}
-
-export async function listFiles(): Promise<Array<File>> {
-  const db = await getDB();
-  const tx = db.transaction('files', 'readonly');
-  const store = tx.objectStore('files');
-
-  const allFiles = await store.getAll();
-
-  return allFiles.map((file: File) => ({
-    id: file.id,
-    lastModified: file.lastModified,
-  }));
-}
-
-export async function listFolderContents(
-  path: string = '',
-): Promise<Array<{ name: string; type: 'file' | 'folder'; lastModified?: number }>> {
-  const allFiles = await listFiles();
-  const cleanPath = path.endsWith('/') ? path.slice(0, -1) : path;
-
-  const items = new Map<string, { name: string; type: 'file' | 'folder'; lastModified?: number }>();
-
-  const files = allFiles.filter((file) => {
-    const filePath = file.id;
-    if (cleanPath === '') {
-      return !filePath.includes('/'); // Racine
-    }
-    return filePath.startsWith(cleanPath + '/') && !filePath.includes('/', cleanPath.length + 1);
-  });
-
-  for (const file of files) {
-    const fileName = file.id.split('/').pop();
-    const name = cleanPath === '' ? file.id : (fileName ?? file.id);
-    items.set(name, { name, type: 'file' as const, lastModified: file.lastModified });
-  }
-
-  const folders = new Set<string>();
-  for (const file of allFiles) {
-    const filePath = file.id;
-    if (cleanPath === '') {
-      const firstFolder = filePath.split('/')[0];
-      if (firstFolder) folders.add(firstFolder);
-    } else {
-      const relativePath = filePath.substring(cleanPath.length + 1);
-      const firstFolder = relativePath.split('/')[0];
-      if (firstFolder) folders.add(firstFolder);
-    }
-  }
-
-  for (const folder of folders) {
-    if (!items.has(folder)) {
-      items.set(folder, { name: folder, type: 'folder' as const });
-    }
-  }
-
-  return Array.from(items.values()).sort((a, b) => {
-    if (a.type === 'folder' && b.type === 'file') return -1;
-    if (a.type === 'file' && b.type === 'folder') return 1;
-    return a.name.localeCompare(b.name);
-  });
-}
-
-export async function saveFile(fileName: string, content: string) {
-  const db = await getDB();
-  const tx = db.transaction('files', 'readwrite');
-  const store = tx.objectStore('files');
-  await store.put({ id: fileName, content, lastModified: Date.now() });
-  await tx.done;
-}
-
-export async function loadFile(fileName: string) {
-  const db = await getDB();
-  const tx = db.transaction('files', 'readonly');
-  const store = tx.objectStore('files');
-  const file = await store.get(fileName);
-  return file?.content || '';
-}
-
-function ensureFolder(zip: JSZip, path: string): JSZip {
-  return zip.folder(path) ?? zip;
-}
-
-export async function exportToZip(filename: string = 'NanoForge.zip') {
-  const db = await getDB();
-  const tx = db.transaction('files', 'readonly');
-  const store = tx.objectStore('files');
-
-  const allFiles = await store.getAll();
-  const zip = new JSZip();
-
-  for (const file of allFiles) {
-    const parts = file.id.split('/');
-    let currentFolder = zip;
-
-    for (let i = 0; i < parts.length - 1; i++) {
-      const folderName = parts[i];
-      const nextFolder = currentFolder.folder(folderName);
-      if (nextFolder) {
-        currentFolder = nextFolder;
-      } else {
-        currentFolder = ensureFolder(currentFolder, parts[i]);
-      }
-    }
-
-    currentFolder.file(parts[parts.length - 1], file.content);
-  }
-
-  const zipBlob = await zip.generateAsync({ type: 'blob' });
-  fileSaver.saveAs(zipBlob, filename);
-}

From c22b8b48b33b5ceaab2d1b4265fbb905f9c26290 Mon Sep 17 00:00:00 2001
From: unknown <timothe.jacquot@epitech.eu>
Date: Tue, 17 Mar 2026 02:31:43 +0100
Subject: [PATCH 03/13] feat: create project push and select project overlay

---
 src/lib/components/{ => Utils}/Storage/db.ts  | 10 ++++
 .../{ => Utils}/Storage/fileSystem.ts         |  2 +-
 .../components/Utils/Storage/projectSync.ts   | 55 +++++++++++++++++++
 .../components/{ => Utils}/Storage/tabs.ts    |  2 +-
 4 files changed, 67 insertions(+), 2 deletions(-)
 rename src/lib/components/{ => Utils}/Storage/db.ts (68%)
 rename src/lib/components/{ => Utils}/Storage/fileSystem.ts (97%)
 create mode 100644 src/lib/components/Utils/Storage/projectSync.ts
 rename src/lib/components/{ => Utils}/Storage/tabs.ts (82%)

diff --git a/src/lib/components/Storage/db.ts b/src/lib/components/Utils/Storage/db.ts
similarity index 68%
rename from src/lib/components/Storage/db.ts
rename to src/lib/components/Utils/Storage/db.ts
index a76d4de..8c78816 100644
--- a/src/lib/components/Storage/db.ts
+++ b/src/lib/components/Utils/Storage/db.ts
@@ -19,3 +19,13 @@ export async function getDB() {
 export async function initDB() {
   await getDB();
 }
+
+export async function clearDB() {
+  const db = await getDB();
+  const tx = db.transaction('files', 'readwrite');
+  const store = tx.objectStore('files');
+
+  await store.clear();
+
+  await tx.done;
+}
diff --git a/src/lib/components/Storage/fileSystem.ts b/src/lib/components/Utils/Storage/fileSystem.ts
similarity index 97%
rename from src/lib/components/Storage/fileSystem.ts
rename to src/lib/components/Utils/Storage/fileSystem.ts
index a850e10..96aadf1 100644
--- a/src/lib/components/Storage/fileSystem.ts
+++ b/src/lib/components/Utils/Storage/fileSystem.ts
@@ -1,4 +1,4 @@
-import { getDB } from '$lib/components/Storage/db';
+import { getDB } from '$lib/components/Utils/Storage/db';
 
 export interface File {
   id: string;
diff --git a/src/lib/components/Utils/Storage/projectSync.ts b/src/lib/components/Utils/Storage/projectSync.ts
new file mode 100644
index 0000000..4c3593f
--- /dev/null
+++ b/src/lib/components/Utils/Storage/projectSync.ts
@@ -0,0 +1,55 @@
+import { clearDB } from '$lib/components/Utils/Storage/db';
+import { listFiles, loadFile, saveFile } from '$lib/components/Utils/Storage/fileSystem';
+
+export async function loadRemoteProject() {
+  const response = await fetch('/fs?/=readDirRec', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ dirPath: '/' }),
+  });
+
+  const result = await response.json();
+
+  if (!result.success) throw new Error(result.errorMsg);
+
+  await clearDB();
+
+  for (const item of result.dirContent) {
+    if (item.type === 'file') {
+      const fileRes = await fetch('/fs?/=readFile', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ filePath: item.name }),
+      });
+      const fileResult = await fileRes.json();
+
+      if (fileResult.success) {
+        await saveFile(item.name, fileResult.fileContent);
+      }
+    }
+  }
+}
+
+export async function pushLocalProject() {
+  console.log('🔄 Push projet vers serveur distant...');
+
+  const localFiles = await listFiles();
+
+  const pushPromises = localFiles.map(async (file) => {
+    const content = await loadFile(file.id);
+
+    const formData = new FormData();
+    formData.append('filePath', file.id);
+    formData.append('fileContent', content);
+
+    await fetch('/fs?/writeFile', {
+      method: 'POST',
+      body: JSON.stringify({
+        filePath: formData.get('filePath'),
+        fileContent: formData.get('fileContent'),
+      }),
+    });
+  });
+
+  await Promise.all(pushPromises);
+}
diff --git a/src/lib/components/Storage/tabs.ts b/src/lib/components/Utils/Storage/tabs.ts
similarity index 82%
rename from src/lib/components/Storage/tabs.ts
rename to src/lib/components/Utils/Storage/tabs.ts
index 4dff86b..dce3159 100644
--- a/src/lib/components/Storage/tabs.ts
+++ b/src/lib/components/Utils/Storage/tabs.ts
@@ -1,4 +1,4 @@
-import { getDB } from '$lib/components/Storage/db';
+import { getDB } from '$lib/components/Utils/Storage/db';
 
 export async function saveTab(fileName: string, content: string) {
   const db = await getDB();

From 106baff0c4b4f14d2ffbccc46fa1c78db4471cfe Mon Sep 17 00:00:00 2001
From: unknown <timothe.jacquot@epitech.eu>
Date: Tue, 17 Mar 2026 23:41:45 +0100
Subject: [PATCH 04/13] feat: create new project dialog

---
 .../components/Utils/Storage/projectSync.ts   | 25 ++++++++++++++-----
 1 file changed, 19 insertions(+), 6 deletions(-)

diff --git a/src/lib/components/Utils/Storage/projectSync.ts b/src/lib/components/Utils/Storage/projectSync.ts
index 4c3593f..a7d33ba 100644
--- a/src/lib/components/Utils/Storage/projectSync.ts
+++ b/src/lib/components/Utils/Storage/projectSync.ts
@@ -1,7 +1,22 @@
-import { clearDB } from '$lib/components/Utils/Storage/db';
-import { listFiles, loadFile, saveFile } from '$lib/components/Utils/Storage/fileSystem';
+import { listFiles, loadFile } from '$lib/components/Utils/Storage/fileSystem';
 
-export async function loadRemoteProject() {
+export async function createProject(formData: FormData) {
+  await fetch('/cli?/createProject', {
+    method: 'POST',
+    body: JSON.stringify({
+      projectPath: formData.get('projectPath'),
+      projectName: formData.get('projectName'),
+      packageManager: formData.get('packageManager'),
+      language: formData.get('language'),
+      strictTypeChecking: formData.get('strictTypeChecking') ?? false,
+      multiplayerServer: formData.get('multiplayerServer') ?? false,
+      skipDependencyInstallation: formData.get('skipDependencyInstallation') ?? false,
+      dockerContainerization: formData.get('dockerContainerization') ?? false,
+    }),
+  });
+}
+
+/*export async function loadRemoteProject() {
   const response = await fetch('/fs?/=readDirRec', {
     method: 'POST',
     headers: { 'Content-Type': 'application/json' },
@@ -28,11 +43,9 @@ export async function loadRemoteProject() {
       }
     }
   }
-}
+}*/
 
 export async function pushLocalProject() {
-  console.log('🔄 Push projet vers serveur distant...');
-
   const localFiles = await listFiles();
 
   const pushPromises = localFiles.map(async (file) => {

From b32615499994c6e546b9eb5b8015ec395f2f7941 Mon Sep 17 00:00:00 2001
From: unknown <timothe.jacquot@epitech.eu>
Date: Mon, 16 Feb 2026 19:21:30 +0100
Subject: [PATCH 05/13] feat: add file system using indexedDB

---
 src/lib/components/Utils/fileSystem.ts | 138 +++++++++++++++++++++++++
 1 file changed, 138 insertions(+)
 create mode 100644 src/lib/components/Utils/fileSystem.ts

diff --git a/src/lib/components/Utils/fileSystem.ts b/src/lib/components/Utils/fileSystem.ts
new file mode 100644
index 0000000..bfea074
--- /dev/null
+++ b/src/lib/components/Utils/fileSystem.ts
@@ -0,0 +1,138 @@
+import fileSaver from 'file-saver';
+import { openDB } from 'idb';
+import JSZip from 'jszip';
+
+const dbName = 'NanoForge';
+let dbPromise: Promise<any> | null = null;
+
+export interface File {
+  id: string;
+  lastModified: number;
+}
+
+async function getDB() {
+  if (!dbPromise) {
+    dbPromise = openDB(dbName, 1, {
+      upgrade(db) {
+        if (!db.objectStoreNames.contains('files')) {
+          db.createObjectStore('files', { keyPath: 'id' });
+        }
+      },
+    });
+  }
+  return dbPromise;
+}
+
+export async function initDB() {
+  await getDB();
+}
+
+export async function listFiles(): Promise<Array<File>> {
+  const db = await getDB();
+  const tx = db.transaction('files', 'readonly');
+  const store = tx.objectStore('files');
+
+  const allFiles = await store.getAll();
+
+  return allFiles.map((file: File) => ({
+    id: file.id,
+    lastModified: file.lastModified,
+  }));
+}
+
+export async function listFolderContents(
+  path: string = '',
+): Promise<Array<{ name: string; type: 'file' | 'folder'; lastModified?: number }>> {
+  const allFiles = await listFiles();
+  const cleanPath = path.endsWith('/') ? path.slice(0, -1) : path;
+
+  const items = new Map<string, { name: string; type: 'file' | 'folder'; lastModified?: number }>();
+
+  const files = allFiles.filter((file) => {
+    const filePath = file.id;
+    if (cleanPath === '') {
+      return !filePath.includes('/'); // Racine
+    }
+    return filePath.startsWith(cleanPath + '/') && !filePath.includes('/', cleanPath.length + 1);
+  });
+
+  for (const file of files) {
+    const fileName = file.id.split('/').pop();
+    const name = cleanPath === '' ? file.id : (fileName ?? file.id);
+    items.set(name, { name, type: 'file' as const, lastModified: file.lastModified });
+  }
+
+  const folders = new Set<string>();
+  for (const file of allFiles) {
+    const filePath = file.id;
+    if (cleanPath === '') {
+      const firstFolder = filePath.split('/')[0];
+      if (firstFolder) folders.add(firstFolder);
+    } else {
+      const relativePath = filePath.substring(cleanPath.length + 1);
+      const firstFolder = relativePath.split('/')[0];
+      if (firstFolder) folders.add(firstFolder);
+    }
+  }
+
+  for (const folder of folders) {
+    if (!items.has(folder)) {
+      items.set(folder, { name: folder, type: 'folder' as const });
+    }
+  }
+
+  return Array.from(items.values()).sort((a, b) => {
+    if (a.type === 'folder' && b.type === 'file') return -1;
+    if (a.type === 'file' && b.type === 'folder') return 1;
+    return a.name.localeCompare(b.name);
+  });
+}
+
+export async function saveFile(fileName: string, content: string) {
+  const db = await getDB();
+  const tx = db.transaction('files', 'readwrite');
+  const store = tx.objectStore('files');
+  await store.put({ id: fileName, content, lastModified: Date.now() });
+  await tx.done;
+}
+
+export async function loadFile(fileName: string) {
+  const db = await getDB();
+  const tx = db.transaction('files', 'readonly');
+  const store = tx.objectStore('files');
+  const file = await store.get(fileName);
+  return file?.content || '';
+}
+
+function ensureFolder(zip: JSZip, path: string): JSZip {
+  return zip.folder(path) ?? zip;
+}
+
+export async function exportToZip(filename: string = 'NanoForge.zip') {
+  const db = await getDB();
+  const tx = db.transaction('files', 'readonly');
+  const store = tx.objectStore('files');
+
+  const allFiles = await store.getAll();
+  const zip = new JSZip();
+
+  for (const file of allFiles) {
+    const parts = file.id.split('/');
+    let currentFolder = zip;
+
+    for (let i = 0; i < parts.length - 1; i++) {
+      const folderName = parts[i];
+      const nextFolder = currentFolder.folder(folderName);
+      if (nextFolder) {
+        currentFolder = nextFolder;
+      } else {
+        currentFolder = ensureFolder(currentFolder, parts[i]);
+      }
+    }
+
+    currentFolder.file(parts[parts.length - 1], file.content);
+  }
+
+  const zipBlob = await zip.generateAsync({ type: 'blob' });
+  fileSaver.saveAs(zipBlob, filename);
+}

From 219d49fa127af2cf109f2e61b96cc6415aee7b1d Mon Sep 17 00:00:00 2001
From: unknown <timothe.jacquot@epitech.eu>
Date: Mon, 16 Mar 2026 01:37:49 +0100
Subject: [PATCH 06/13] fix: list local folder in ContentBrowser

---
 src/lib/components/Storage/db.ts         |  21 ++++
 src/lib/components/Storage/fileSystem.ts |  91 +++++++++++++++
 src/lib/components/Storage/tabs.ts       |   9 ++
 src/lib/components/Utils/fileSystem.ts   | 138 -----------------------
 4 files changed, 121 insertions(+), 138 deletions(-)
 create mode 100644 src/lib/components/Storage/db.ts
 create mode 100644 src/lib/components/Storage/fileSystem.ts
 create mode 100644 src/lib/components/Storage/tabs.ts
 delete mode 100644 src/lib/components/Utils/fileSystem.ts

diff --git a/src/lib/components/Storage/db.ts b/src/lib/components/Storage/db.ts
new file mode 100644
index 0000000..a76d4de
--- /dev/null
+++ b/src/lib/components/Storage/db.ts
@@ -0,0 +1,21 @@
+import { openDB } from 'idb';
+
+const dbName = 'NanoForge';
+let dbPromise: Promise<any> | null = null;
+
+export async function getDB() {
+  if (!dbPromise) {
+    dbPromise = openDB(dbName, 1, {
+      upgrade(db) {
+        if (!db.objectStoreNames.contains('files')) {
+          db.createObjectStore('files', { keyPath: 'id' });
+        }
+      },
+    });
+  }
+  return dbPromise;
+}
+
+export async function initDB() {
+  await getDB();
+}
diff --git a/src/lib/components/Storage/fileSystem.ts b/src/lib/components/Storage/fileSystem.ts
new file mode 100644
index 0000000..a850e10
--- /dev/null
+++ b/src/lib/components/Storage/fileSystem.ts
@@ -0,0 +1,91 @@
+import { getDB } from '$lib/components/Storage/db';
+
+export interface File {
+  id: string;
+  lastModified: number;
+}
+
+export interface FolderContent {
+  name: string;
+  type: 'file' | 'folder';
+  lastModified?: number;
+}
+
+export async function listFiles(): Promise<Array<File>> {
+  const db = await getDB();
+  const tx = db.transaction('files', 'readonly');
+  const store = tx.objectStore('files');
+
+  const allFiles = await store.getAll();
+
+  return allFiles.map((file: File) => ({
+    id: file.id,
+    lastModified: file.lastModified,
+  }));
+}
+
+export async function listFolders(): Promise<string[]> {
+  const folders = new Set<string>();
+  const files = await listFiles();
+
+  for (const file of files) {
+    const parts = file.id.split('/');
+
+    parts.pop();
+
+    let current = '';
+    for (const part of parts) {
+      current = current ? `${current}/${part}` : part;
+      folders.add(current);
+    }
+  }
+
+  return Array.from(folders).sort();
+}
+
+export async function listFolderContents(path: string = ''): Promise<Array<FolderContent>> {
+  const allFiles = await listFiles();
+  let cleanPath = path.startsWith('/') ? path.substring(1) : path;
+  cleanPath = cleanPath.endsWith('/') || cleanPath === '' ? cleanPath : cleanPath.concat('/');
+
+  const items = new Map<string, FolderContent>();
+
+  const files = allFiles.filter((file) => {
+    const filePath = file.id;
+    return filePath.startsWith(cleanPath);
+  });
+
+  for (const file of files) {
+    const relativePath = file.id.substring(cleanPath.length);
+    const isFolderIndex = relativePath.indexOf('/');
+    const name = isFolderIndex >= 0 ? relativePath.substring(0, isFolderIndex) : relativePath;
+
+    items.set(name, {
+      name,
+      type: isFolderIndex >= 0 ? 'folder' : 'file',
+      lastModified: file.lastModified,
+    });
+  }
+
+  return Array.from(items.values()).sort((a, b) => {
+    if (a.type === 'folder' && b.type === 'file') return -1;
+    if (a.type === 'file' && b.type === 'folder') return 1;
+    return a.name.localeCompare(b.name);
+  });
+}
+
+export async function saveFile(fileName: string, content: string) {
+  const db = await getDB();
+  const tx = db.transaction('files', 'readwrite');
+  const store = tx.objectStore('files');
+  await store.put({ id: fileName, content, lastModified: Date.now() });
+  await tx.done;
+}
+
+export async function loadFile(fileName: string): Promise<string> {
+  const db = await getDB();
+  const tx = db.transaction('files', 'readonly');
+  const store = tx.objectStore('files');
+  const file = await store.get(fileName);
+  return file?.content || '';
+}
diff --git a/src/lib/components/Storage/tabs.ts b/src/lib/components/Storage/tabs.ts
new file mode 100644
index 0000000..4dff86b
--- /dev/null
+++ b/src/lib/components/Storage/tabs.ts
@@ -0,0 +1,9 @@
+import { getDB } from '$lib/components/Storage/db';
+
+export async function saveTab(fileName: string, content: string) {
+  const db = await getDB();
+  const tx = db.transaction('tabs', 'readwrite');
+  const store = tx.objectStore('tabs');
+  await store.put({ id: fileName, content, lastModified: Date.now() });
+  await tx.done;
+}
diff --git a/src/lib/components/Utils/fileSystem.ts b/src/lib/components/Utils/fileSystem.ts
deleted file mode 100644
index bfea074..0000000
--- a/src/lib/components/Utils/fileSystem.ts
+++ /dev/null
@@ -1,138 +0,0 @@
-import fileSaver from 'file-saver';
-import { openDB } from 'idb';
-import JSZip from 'jszip';
-
-const dbName = 'NanoForge';
-let dbPromise: Promise<any> | null = null;
-
-export interface File {
-  id: string;
-  lastModified: number;
-}
-
-async function getDB() {
-  if (!dbPromise) {
-    dbPromise = openDB(dbName, 1, {
-      upgrade(db) {
-        if (!db.objectStoreNames.contains('files')) {
-          db.createObjectStore('files', { keyPath: 'id' });
-        }
-      },
-    });
-  }
-  return dbPromise;
-}
-
-export async function initDB() {
-  await getDB();
-}
-
-export async function listFiles(): Promise<Array<File>> {
-  const db = await getDB();
-  const tx = db.transaction('files', 'readonly');
-  const store = tx.objectStore('files');
-
-  const allFiles = await store.getAll();
-
-  return allFiles.map((file: File) => ({
-    id: file.id,
-    lastModified: file.lastModified,
-  }));
-}
-
-export async function listFolderContents(
-  path: string = '',
-): Promise<Array<{ name: string; type: 'file' | 'folder'; lastModified?: number }>> {
-  const allFiles = await listFiles();
-  const cleanPath = path.endsWith('/') ? path.slice(0, -1) : path;
-
-  const items = new Map<string, { name: string; type: 'file' | 'folder'; lastModified?: number }>();
-
-  const files = allFiles.filter((file) => {
-    const filePath = file.id;
-    if (cleanPath === '') {
-      return !filePath.includes('/'); // Racine
-    }
-    return filePath.startsWith(cleanPath + '/') && !filePath.includes('/', cleanPath.length + 1);
-  });
-
-  for (const file of files) {
-    const fileName = file.id.split('/').pop();
-    const name = cleanPath === '' ? file.id : (fileName ?? file.id);
-    items.set(name, { name, type: 'file' as const, lastModified: file.lastModified });
-  }
-
-  const folders = new Set<string>();
-  for (const file of allFiles) {
-    const filePath = file.id;
-    if (cleanPath === '') {
-      const firstFolder = filePath.split('/')[0];
-      if (firstFolder) folders.add(firstFolder);
-    } else {
-      const relativePath = filePath.substring(cleanPath.length + 1);
-      const firstFolder = relativePath.split('/')[0];
-      if (firstFolder) folders.add(firstFolder);
-    }
-  }
-
-  for (const folder of folders) {
-    if (!items.has(folder)) {
-      items.set(folder, { name: folder, type: 'folder' as const });
-    }
-  }
-
-  return Array.from(items.values()).sort((a, b) => {
-    if (a.type === 'folder' && b.type === 'file') return -1;
-    if (a.type === 'file' && b.type === 'folder') return 1;
-    return a.name.localeCompare(b.name);
-  });
-}
-
-export async function saveFile(fileName: string, content: string) {
-  const db = await getDB();
-  const tx = db.transaction('files', 'readwrite');
-  const store = tx.objectStore('files');
-  await store.put({ id: fileName, content, lastModified: Date.now() });
-  await tx.done;
-}
-
-export async function loadFile(fileName: string) {
-  const db = await getDB();
-  const tx = db.transaction('files', 'readonly');
-  const store = tx.objectStore('files');
-  const file = await store.get(fileName);
-  return file?.content || '';
-}
-
-function ensureFolder(zip: JSZip, path: string): JSZip {
-  return zip.folder(path) ?? zip;
-}
-
-export async function exportToZip(filename: string = 'NanoForge.zip') {
-  const db = await getDB();
-  const tx = db.transaction('files', 'readonly');
-  const store = tx.objectStore('files');
-
-  const allFiles = await store.getAll();
-  const zip = new JSZip();
-
-  for (const file of allFiles) {
-    const parts = file.id.split('/');
-    let currentFolder = zip;
-
-    for (let i = 0; i < parts.length - 1; i++) {
-      const folderName = parts[i];
-      const nextFolder = currentFolder.folder(folderName);
-      if (nextFolder) {
-        currentFolder = nextFolder;
-      } else {
-        currentFolder = ensureFolder(currentFolder, parts[i]);
-      }
-    }
-
-    currentFolder.file(parts[parts.length - 1], file.content);
-  }
-
-  const zipBlob = await zip.generateAsync({ type: 'blob' });
-  fileSaver.saveAs(zipBlob, filename);
-}

From e5d8810a9066cd4dba540d077c9e0a0756e0760c Mon Sep 17 00:00:00 2001
From: unknown <timothe.jacquot@epitech.eu>
Date: Tue, 17 Mar 2026 02:31:43 +0100
Subject: [PATCH 07/13] feat: create project push and select project overlay

---
 src/lib/components/Storage/db.ts         | 21 ------
 src/lib/components/Storage/fileSystem.ts | 91 ------------------------
 src/lib/components/Storage/tabs.ts       |  9 ---
 3 files changed, 121 deletions(-)
 delete mode 100644 src/lib/components/Storage/db.ts
 delete mode 100644 src/lib/components/Storage/fileSystem.ts
 delete mode 100644 src/lib/components/Storage/tabs.ts

diff --git a/src/lib/components/Storage/db.ts b/src/lib/components/Storage/db.ts
deleted file mode 100644
index a76d4de..0000000
--- a/src/lib/components/Storage/db.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { openDB } from 'idb';
-
-const dbName = 'NanoForge';
-let dbPromise: Promise<any> | null = null;
-
-export async function getDB() {
-  if (!dbPromise) {
-    dbPromise = openDB(dbName, 1, {
-      upgrade(db) {
-        if (!db.objectStoreNames.contains('files')) {
-          db.createObjectStore('files', { keyPath: 'id' });
-        }
-      },
-    });
-  }
-  return dbPromise;
-}
-
-export async function initDB() {
-  await getDB();
-}
diff --git a/src/lib/components/Storage/fileSystem.ts b/src/lib/components/Storage/fileSystem.ts
deleted file mode 100644
index a850e10..0000000
--- a/src/lib/components/Storage/fileSystem.ts
+++ /dev/null
@@ -1,91 +0,0 @@
-import { getDB } from '$lib/components/Storage/db';
-
-export interface File {
-  id: string;
-  lastModified: number;
-}
-
-export interface FolderContent {
-  name: string;
-  type: 'file' | 'folder';
-  lastModified?: number;
-}
-
-export async function listFiles(): Promise<Array<File>> {
-  const db = await getDB();
-  const tx = db.transaction('files', 'readonly');
-  const store = tx.objectStore('files');
-
-  const allFiles = await store.getAll();
-
-  return allFiles.map((file: File) => ({
-    id: file.id,
-    lastModified: file.lastModified,
-  }));
-}
-
-export async function listFolders(): Promise<string[]> {
-  const folders = new Set<string>();
-  const files = await listFiles();
-
-  for (const file of files) {
-    const parts = file.id.split('/');
-
-    parts.pop();
-
-    let current = '';
-    for (const part of parts) {
-      current = current ? `${current}/${part}` : part;
-      folders.add(current);
-    }
-  }
-
-  return Array.from(folders).sort();
-}
-
-export async function listFolderContents(path: string = ''): Promise<Array<FolderContent>> {
-  const allFiles = await listFiles();
-  let cleanPath = path.startsWith('/') ? path.substring(1) : path;
-  cleanPath = cleanPath.endsWith('/') || cleanPath === '' ? cleanPath : cleanPath.concat('/');
-
-  const items = new Map<string, FolderContent>();
-
-  const files = allFiles.filter((file) => {
-    const filePath = file.id;
-    return filePath.startsWith(cleanPath);
-  });
-
-  for (const file of files) {
-    const relativePath = file.id.substring(cleanPath.length);
-    const isFolderIndex = relativePath.indexOf('/');
-    const name = isFolderIndex >= 0 ? relativePath.substring(0, isFolderIndex) : relativePath;
-
-    items.set(name, {
-      name,
-      type: isFolderIndex >= 0 ? 'folder' : 'file',
-      lastModified: file.lastModified,
-    });
-  }
-
-  return Array.from(items.values()).sort((a, b) => {
-    if (a.type === 'folder' && b.type === 'file') return -1;
-    if (a.type === 'file' && b.type === 'folder') return 1;
-    return a.name.localeCompare(b.name);
-  });
-}
-
-export async function saveFile(fileName: string, content: string) {
-  const db = await getDB();
-  const tx = db.transaction('files', 'readwrite');
-  const store = tx.objectStore('files');
-  await store.put({ id: fileName, content, lastModified: Date.now() });
-  await tx.done;
-}
-
-export async function loadFile(fileName: string): Promise<string> {
-  const db = await getDB();
-  const tx = db.transaction('files', 'readonly');
-  const store = tx.objectStore('files');
-  const file = await store.get(fileName);
-  return file?.content || '';
-}
diff --git a/src/lib/components/Storage/tabs.ts b/src/lib/components/Storage/tabs.ts
deleted file mode 100644
index 4dff86b..0000000
--- a/src/lib/components/Storage/tabs.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { getDB } from '$lib/components/Storage/db';
-
-export async function saveTab(fileName: string, content: string) {
-  const db = await getDB();
-  const tx = db.transaction('tabs', 'readwrite');
-  const store = tx.objectStore('tabs');
-  await store.put({ id: fileName, content, lastModified: Date.now() });
-  await tx.done;
-}

From 9db5a0b0f3d2814ac5821e65ea029c3d599c483b Mon Sep 17 00:00:00 2001
From: bill <timothe.jacquot@epitech.eu>
Date: Thu, 19 Mar 2026 04:26:56 +0100
Subject: [PATCH 08/13] feat: create API interface with local API. Use create
 and load project files

---
 src/lib/components/Stores/project.ts          |  3 +
 .../components/Utils/Storage/projectSync.ts   | 68 -------------------
 2 files changed, 3 insertions(+), 68 deletions(-)
 create mode 100644 src/lib/components/Stores/project.ts
 delete mode 100644 src/lib/components/Utils/Storage/projectSync.ts

diff --git a/src/lib/components/Stores/project.ts b/src/lib/components/Stores/project.ts
new file mode 100644
index 0000000..74a9c72
--- /dev/null
+++ b/src/lib/components/Stores/project.ts
@@ -0,0 +1,3 @@
+import { type Writable, writable } from 'svelte/store';
+
+export const projectPathStore: Writable<string> = writable('');
diff --git a/src/lib/components/Utils/Storage/projectSync.ts b/src/lib/components/Utils/Storage/projectSync.ts
deleted file mode 100644
index a7d33ba..0000000
--- a/src/lib/components/Utils/Storage/projectSync.ts
+++ /dev/null
@@ -1,68 +0,0 @@
-import { listFiles, loadFile } from '$lib/components/Utils/Storage/fileSystem';
-
-export async function createProject(formData: FormData) {
-  await fetch('/cli?/createProject', {
-    method: 'POST',
-    body: JSON.stringify({
-      projectPath: formData.get('projectPath'),
-      projectName: formData.get('projectName'),
-      packageManager: formData.get('packageManager'),
-      language: formData.get('language'),
-      strictTypeChecking: formData.get('strictTypeChecking') ?? false,
-      multiplayerServer: formData.get('multiplayerServer') ?? false,
-      skipDependencyInstallation: formData.get('skipDependencyInstallation') ?? false,
-      dockerContainerization: formData.get('dockerContainerization') ?? false,
-    }),
-  });
-}
-
-/*export async function loadRemoteProject() {
-  const response = await fetch('/fs?/=readDirRec', {
-    method: 'POST',
-    headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify({ dirPath: '/' }),
-  });
-
-  const result = await response.json();
-
-  if (!result.success) throw new Error(result.errorMsg);
-
-  await clearDB();
-
-  for (const item of result.dirContent) {
-    if (item.type === 'file') {
-      const fileRes = await fetch('/fs?/=readFile', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ filePath: item.name }),
-      });
-      const fileResult = await fileRes.json();
-
-      if (fileResult.success) {
-        await saveFile(item.name, fileResult.fileContent);
-      }
-    }
-  }
-}*/
-
-export async function pushLocalProject() {
-  const localFiles = await listFiles();
-
-  const pushPromises = localFiles.map(async (file) => {
-    const content = await loadFile(file.id);
-
-    const formData = new FormData();
-    formData.append('filePath', file.id);
-    formData.append('fileContent', content);
-
-    await fetch('/fs?/writeFile', {
-      method: 'POST',
-      body: JSON.stringify({
-        filePath: formData.get('filePath'),
-        fileContent: formData.get('fileContent'),
-      }),
-    });
-  });
-
-  await Promise.all(pushPromises);
-}

From 8ba42ee5fa5380e730091be04caacab51a9808de Mon Sep 17 00:00:00 2001
From: bill <timothe.jacquot@epitech.eu>
Date: Thu, 19 Mar 2026 20:34:02 +0100
Subject: [PATCH 09/13] feat: create project list cache on project-loader

---
 src/lib/components/Utils/Storage/db.ts        | 31 -------
 .../components/Utils/Storage/fileSystem.ts    | 91 -------------------
 src/lib/components/Utils/Storage/tabs.ts      |  9 --
 3 files changed, 131 deletions(-)
 delete mode 100644 src/lib/components/Utils/Storage/db.ts
 delete mode 100644 src/lib/components/Utils/Storage/fileSystem.ts
 delete mode 100644 src/lib/components/Utils/Storage/tabs.ts

diff --git a/src/lib/components/Utils/Storage/db.ts b/src/lib/components/Utils/Storage/db.ts
deleted file mode 100644
index 8c78816..0000000
--- a/src/lib/components/Utils/Storage/db.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-import { openDB } from 'idb';
-
-const dbName = 'NanoForge';
-let dbPromise: Promise<any> | null = null;
-
-export async function getDB() {
-  if (!dbPromise) {
-    dbPromise = openDB(dbName, 1, {
-      upgrade(db) {
-        if (!db.objectStoreNames.contains('files')) {
-          db.createObjectStore('files', { keyPath: 'id' });
-        }
-      },
-    });
-  }
-  return dbPromise;
-}
-
-export async function initDB() {
-  await getDB();
-}
-
-export async function clearDB() {
-  const db = await getDB();
-  const tx = db.transaction('files', 'readwrite');
-  const store = tx.objectStore('files');
-
-  await store.clear();
-
-  await tx.done;
-}
diff --git a/src/lib/components/Utils/Storage/fileSystem.ts b/src/lib/components/Utils/Storage/fileSystem.ts
deleted file mode 100644
index 96aadf1..0000000
--- a/src/lib/components/Utils/Storage/fileSystem.ts
+++ /dev/null
@@ -1,91 +0,0 @@
-import { getDB } from '$lib/components/Utils/Storage/db';
-
-export interface File {
-  id: string;
-  lastModified: number;
-}
-
-export interface FolderContent {
-  name: string;
-  type: 'file' | 'folder';
-  lastModified?: number;
-}
-
-export async function listFiles(): Promise<Array<File>> {
-  const db = await getDB();
-  const tx = db.transaction('files', 'readonly');
-  const store = tx.objectStore('files');
-
-  const allFiles = await store.getAll();
-
-  return allFiles.map((file: File) => ({
-    id: file.id,
-    lastModified: file.lastModified,
-  }));
-}
-
-export async function listFolders(): Promise<string[]> {
-  const folders = new Set<string>();
-  const files = await listFiles();
-
-  for (const file of files) {
-    const parts = file.id.split('/');
-
-    parts.pop();
-
-    let current = '';
-    for (const part of parts) {
-      current = current ? `${current}/${part}` : part;
-      folders.add(current);
-    }
-  }
-
-  return Array.from(folders).sort();
-}
-
-export async function listFolderContents(path: string = ''): Promise<Array<FolderContent>> {
-  const allFiles = await listFiles();
-  let cleanPath = path.startsWith('/') ? path.substring(1) : path;
-  cleanPath = cleanPath.endsWith('/') || cleanPath === '' ? cleanPath : cleanPath.concat('/');
-
-  const items = new Map<string, FolderContent>();
-
-  const files = allFiles.filter((file) => {
-    const filePath = file.id;
-    return filePath.startsWith(cleanPath);
-  });
-
-  for (const file of files) {
-    const relativePath = file.id.substring(cleanPath.length);
-    const isFolderIndex = relativePath.indexOf('/');
-    const name = isFolderIndex >= 0 ? relativePath.substring(0, isFolderIndex) : relativePath;
-
-    items.set(name, {
-      name,
-      type: isFolderIndex >= 0 ? 'folder' : 'file',
-      lastModified: file.lastModified,
-    });
-  }
-
-  return Array.from(items.values()).sort((a, b) => {
-    if (a.type === 'folder' && b.type === 'file') return -1;
-    if (a.type === 'file' && b.type === 'folder') return 1;
-    return a.name.localeCompare(b.name);
-  });
-}
-
-export async function saveFile(fileName: string, content: string) {
-  const db = await getDB();
-  const tx = db.transaction('files', 'readwrite');
-  const store = tx.objectStore('files');
-  await store.put({ id: fileName, content, lastModified: Date.now() });
-  await tx.done;
-}
-
-export async function loadFile(fileName: string): Promise<string> {
-  const db = await getDB();
-  const tx = db.transaction('files', 'readonly');
-  const store = tx.objectStore('files');
-  const file = await store.get(fileName);
-  return file?.content || '';
-}
diff --git a/src/lib/components/Utils/Storage/tabs.ts b/src/lib/components/Utils/Storage/tabs.ts
deleted file mode 100644
index dce3159..0000000
--- a/src/lib/components/Utils/Storage/tabs.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { getDB } from '$lib/components/Utils/Storage/db';
-
-export async function saveTab(fileName: string, content: string) {
-  const db = await getDB();
-  const tx = db.transaction('tabs', 'readwrite');
-  const store = tx.objectStore('tabs');
-  await store.put({ id: fileName, content, lastModified: Date.now() });
-  await tx.done;
-}

From dab5851c25192827a33366e0eea6fce538bc31e7 Mon Sep 17 00:00:00 2001
From: bill <timothe.jacquot@epitech.eu>
Date: Fri, 20 Mar 2026 01:54:51 +0100
Subject: [PATCH 10/13] feat: add game controller up to screen view with play
 and stop

---
 src/lib/assets/play.png                       | Bin 0 -> 1386 bytes
 src/lib/assets/stop.png                       | Bin 0 -> 1028 bytes
 src/lib/components/Stores/projectIsUpdated.ts |   3 +
 src/lib/components/Utils/api/local-api.ts     |  24 ++++++
 src/lib/components/Utils/api/project-api.ts   |   3 +
 .../Widget/ScreenView/ScreenViewWidget.svelte |  76 ++++++++++++++++--
 6 files changed, 99 insertions(+), 7 deletions(-)
 create mode 100644 src/lib/assets/play.png
 create mode 100644 src/lib/assets/stop.png
 create mode 100644 src/lib/components/Stores/projectIsUpdated.ts

diff --git a/src/lib/assets/play.png b/src/lib/assets/play.png
new file mode 100644
index 0000000000000000000000000000000000000000..7a28285ea775e3e5bdf2df105fb08afc6a6d7884
GIT binary patch
literal 1386
zcmV-w1(o`VP)<h;3K|Lk000e1NJLTq003kF003kN1^@s6aN?Cz0004mX+uL$Nkc;*
zaB^>EX>4Tx04R}tk-tmBKpe$iQ$;Bihh`9Q$WWauf{HlSDionYs1;guFuC*>G-*jv
zTpR`0f`dO6s}3&Cx;nTDg5VDj{{V4PbdeIjmlRsWcyQc@clRE5?*O4$VY<~52Xw<W
z)5(OC&8<p(uLvRn5fcb0%&N`FatglV>mC8V-o<#9|G7WMfR?uy5Ri!DtY+H88^kl4
zc8&8svB*k_Mtn{@ZqfybAGxl2{KmQHvcNM%Gn1Yt7Kx=|7pq;&N~TUcO&ry9gYt!}
z#~SA?&U&TJ+V|uy4CjrNWv<g4K@y8tf(!{N>L{ZE8!=i9QY@rtKjGsacKtHBRC1NU
z$gzMbbSSPL{11M2YZay@y`*pg=zVdVk5Qm+7icvc=lj@kS|>p88Mrb!{%RAL{Up87
z(V|Dd;5Kk^-O<!N;Bp5Tda5a=;z~i9LZJY>pV2qvfXFQnTJw5q@8k3V$WT|Q8{ps&
z7%Nity3f1&yL<chOuN4ynn-fCPw@t900006VoOIv0RI600RN!9r;`8x010qNS#tmY
z4#WTe4#WYKD-Ig~000McNliru>H`xLGAktHws-&l17}G@K~#9!?VYh}6Hy$;e|Kp~
zt2a~()uB|kfK!_yf=DkFXEV6E9iq6nxTy$&OH@#l(o#Cru@3PcxI{!K(q2&zGAaQr
zMC@>_4KaC6C!t16E_b=#d++-h3%$F(Pk!(E8Tv{D0000CnY>qAyR`k}9#$e+jK06a
zb;RK>r3{l=`4t1pIcy<aWOR}lwWxmK8N>`l$bV#XGHXqfclJKSgusmBqMrYyFM*)X
z2|2TISA5$48tMi|Q)$|pU&ORTIUy|y|6$*2HHchCWH;_$Vv^djx>4Q#M&vr8@ZtF+
zmYso+fYSHvopj|oriF_TBBDn77m@3Tsdu*_hJ%oRTH^<i>j>K`u0sU_Apw=$>XlUa
z8m5Jd5F(<MXcM`P$h^HJAcPV1rcdNLBKQ7*fDlG(`Jc6{eUtqYx{k2k+!PSP2w$Vx
zH)VR*Kehi+-P$*0eCSeL-P$*0eQ;H4-<16aP_6b&RX$m&)V`_GxT{e6N(nh!`*RZ3
zzLG)$HYKcmrG>~?`+5kGsP?rH@^|gOn1m2kweRhWRc;6fVZ=eZ$*%Ub7Q(UiA%t1&
zLkP3lhY)794<XEIA3~VbK7=r<eF$Mz`w+sc_928>?L$b!wV(HjYY@VS@^1C&Ahi!6
zG1fkWFk?K#3m-ya<Y&8y36UKLfe-*82{C4lLI|shx0ehEVL-|-i56Bv9k>G_5tE<D
zz8vIqy%8*7G)$$BQSJO=qdeesAS8kp_kq1+)bLwY@)R<&C&IkAF(DC?J#vz&=N=lR
z7_JQ=ePE^1<j*e})fn#qA-%G&YWOJi<e9Thg>DK=NQ4B3LT?WFz7W!-vRnBTqn^<H
zv1N5&Ph?*ueTF?Iq@%Jc44y@6A!&1j8uoHzm5nWHz{+me%j}Lo*KR`MtZWEjR@o53
ztg`VAVOH6g5N4GPA<QZpTNbm*#)L4dY^{ZGtZZ$!tU_jnWo2tOA>1ol8zHh(wjM$x
zs%)j-Avp;vTgeFtDtn9cgpCjtDqEQ?OO?u&enM2MY-xq4TG>)=S(lH`oL056rJ9hS
zvR`A(2NyCP;;%^qf`4#d#aj17?^{Qh!&Ed3JC^T|oHY#@u}?@3Qxa4*mUUP{{vjo(
sY%FJzb?p_`FM5xjVkH0o0018R2Egijv@8_?G5`Po07*qoM6N<$g0nbsvH$=8

literal 0
HcmV?d00001

diff --git a/src/lib/assets/stop.png b/src/lib/assets/stop.png
new file mode 100644
index 0000000000000000000000000000000000000000..bb5ccb36282803c18caf53134aceaab710374f82
GIT binary patch
literal 1028
zcmeAS@N?(olHy`uVBq!ia0vp^DIm<j1|$m}O$}jSU~I{Bb`J1#c2+1T%1_J8No8Qr
zm{>b;zxQDWnWOQ+u9~9lX##~O0_N&8by-}~5?Sc9LNuz>VCNTclT6Q`7#Y^<P0jXV
ztNHZK?Xudz)%1X0;6FoQP{~B0{nJIFj#L!fX)pgSSN@)1VPxX2tHSIhhs`dZY?*R)
ztyk@O4kac*VGhkRtInP*;@bE4wH)KVdq*p#{oiSSykXjQ34sY6kJqH#IwF0<cy?Lu
zXS<Cjyt>?K{A}_rv3APuTvzqy*v=Q54j8){PoAeP*10rEe0A&@uVsEVzA{%!nm@I!
zIWF~F_gvM|bGN=f(dT*IJ2iFPWf@1I?uaHHPOVoOi<zViqj-aKmSoyLd@Nt~*Jx)*
z(bR({Ha2LLXsna}!(UgPExJr??~($h7qx|R`U4l_i)Wb1JpX;8FiPFwgX9h)tAAO-
zGybaVy?Akv`+)~$1%-DnUa@^p#4b^_N^{vGFUMI<3mNvzzi9rn;e@V0)aR<~_m96Y
zo(KqEDgEGqfP{9?w_WFV|K45w`@7HX{qnOsinjTGWXl0Y3tN)6y9>jA5L~c#`DCC7
zXMsm#F#`kF9S~;Z{yeK1D9B#o>Fdh=idk5c$)fJw>LdmRCPq&e$B>F!Z|~ZAF+0k%
zeJuaO(bU@1+gldpdLx#_bNNf%F9I)*sJTjM=PNF1|G;p|Q^Cb?^&KVGgwB@zt^y(=
z<!R+6FFvn!W_mw4@<x^l&=v*;1M8U3_!M#R-><&sfBmD=>-Il+@6*(kanm=wIj}XV
z+*t6)x%0l}=9f;N{{JsqU(c((y(m5X-Sws$_vU5VJhS{9w^r@?TekOB;v$cJRo%Tb
zMPj~We`;n{S?Sh~$?8WgU5VItU<W_H-Y?FLZp{*c+dpw7z1^mHK62Lzo9U%iae;gK
zrlih1X`vAJ?D^9w+wh;98&99MGGy{myZlzGKE>9~ZeyN8|JyEhNgfHaDaXr>HuJRe
zNS{jH{m8L`Q|Id@iLbu09|c+z6gV6m1ezKYSQs5SnBcSk3yUHLkPo4q1i%V8pfp4S
zZjC3x#l#}CL)MBZo_M8oxGgHOQy?X~JJC5e-<@NU3cHT9hG$t<-Ie!F)9=P!PC0bI
zE-Chfl4q8g<c;ai)9!8Wh+KToHpEp|_vGFCyH_}>tUIf1^UgnJwz{X4<;|3L`E%y2
zV|CT}JUeD@)Y;@!e>f{w-+XH&EBjGQ-&bGV&Q4Es@fXgY1yMWp{qCz*1;<qVS#5Ra
UrrihfLw1Asp00i_>zopr0D`2h;s5{u

literal 0
HcmV?d00001

diff --git a/src/lib/components/Stores/projectIsUpdated.ts b/src/lib/components/Stores/projectIsUpdated.ts
new file mode 100644
index 0000000..70b5d34
--- /dev/null
+++ b/src/lib/components/Stores/projectIsUpdated.ts
@@ -0,0 +1,3 @@
+import { type Writable, writable } from 'svelte/store';
+
+export const projectIsUpdatedStore: Writable<boolean> = writable(false);
diff --git a/src/lib/components/Utils/api/local-api.ts b/src/lib/components/Utils/api/local-api.ts
index ca330d7..a26c1a5 100644
--- a/src/lib/components/Utils/api/local-api.ts
+++ b/src/lib/components/Utils/api/local-api.ts
@@ -38,6 +38,30 @@ export class LocalAPI extends ProjectApi {
     }
   }
 
+  async playProject(): Promise<void> {
+    const resp = await fetch('/cli?/startDevProject', {
+      method: 'POST',
+      body: JSON.stringify({}),
+    });
+    const result = deserialize(await resp.text());
+    if (result.type !== 'success') {
+      if (result.type === 'failure' && result.data) throw new Error(result.data.errorMsg as string);
+      throw new Error('Failed to start project');
+    }
+  }
+
+  async stopProject(): Promise<void> {
+    const resp = await fetch('/cli?/stopProject', {
+      method: 'POST',
+      body: JSON.stringify({}),
+    });
+    const result = deserialize(await resp.text());
+    if (result.type !== 'success') {
+      if (result.type === 'failure' && result.data) throw new Error(result.data.errorMsg as string);
+      throw new Error('Failed to stop project');
+    }
+  }
+
   async uploadFiles(): Promise<void> {
     const localFiles = await listFiles();
 
diff --git a/src/lib/components/Utils/api/project-api.ts b/src/lib/components/Utils/api/project-api.ts
index 087a4e0..0b0c92c 100644
--- a/src/lib/components/Utils/api/project-api.ts
+++ b/src/lib/components/Utils/api/project-api.ts
@@ -7,6 +7,9 @@ export abstract class ProjectApi {
   abstract createProject(formData: FormData): Promise<void>;
   abstract loadProject(formData: FormData): Promise<void>;
 
+  abstract playProject(): Promise<void>;
+  abstract stopProject(): Promise<void>;
+
   abstract uploadFiles(): Promise<void>;
   abstract downloadFiles(): Promise<void>;
 }
diff --git a/src/lib/components/Widget/ScreenView/ScreenViewWidget.svelte b/src/lib/components/Widget/ScreenView/ScreenViewWidget.svelte
index 08f6535..a7b7d7b 100644
--- a/src/lib/components/Widget/ScreenView/ScreenViewWidget.svelte
+++ b/src/lib/components/Widget/ScreenView/ScreenViewWidget.svelte
@@ -1,16 +1,78 @@
 <script lang="ts">
   import api from '$lib/components/Utils/api/api';
+  import Play from '$lib/assets/play.png';
+  import Stop from '$lib/assets/stop.png';
+  import { projectIsUpdatedStore } from '$lib/components/Stores/projectIsUpdated';
+
+  let isPlaying = $state(false);
+
+  let iframeGame: HTMLIFrameElement;
+
+  async function LoadIframeGame() {
+    iframeGame.src = 'http://localhost:3000/';
+  }
+
+  async function uploadFiles() {
+    await api.uploadFiles();
+    $projectIsUpdatedStore = true;
+  }
+
+  async function playGame() {
+    await uploadFiles();
+    await api.playProject();
+    await LoadIframeGame();
+    isPlaying = true;
+  }
+
+  async function stopGame() {
+    await api.stopProject();
+    isPlaying = false;
+  }
 </script>
 
 <div class="h-full w-full bg-neutral-800 flex flex-col">
-  <div class="py-2 px-2">
-    <button
+  <div class="py-2 px-2 h-16 flex justify-center">
+    <div class="bg-neutral-600 rounded-md p-1">
+      <button
+        aria-label="Play"
+        class="h-fit {!isPlaying ? 'cursor-pointer hover:bg-neutral-700' : ''}  rounded-md p-2"
+        onclick={playGame}
+      >
+        <img src={Play} class="h-fit w-5 {isPlaying ? 'filter grayscale brightness-300' : ''}" />
+      </button>
+      <button
+        aria-label="Stop"
+        class="h-fit {isPlaying ? 'cursor-pointer hover:bg-neutral-700' : ''} rounded-md p-2"
+        onclick={stopGame}
+      >
+        <img
+          src={Stop}
+          class="h-fit w-5 {!isPlaying ? 'filter grayscale brightness-300' : ''}"
+          alt=""
+        />
+      </button>
+    </div>
+    <!--<button
       aria-label="uploadFiles"
-      onclick={() => api.uploadFiles()}
-      class="py-1 w-full h-full rounded-md text-sm hover:bg-neutral-900 cursor-pointer"
+      onclick={uploadFiles}
+      class="h-full flex justify-center items-center rounded-md text-sm p-1 hover:bg-neutral-900 text-neutral-300 cursor-pointer"
     >
-      <span class="i-ic-baseline-upload w-full h-full"></span>
-    </button>
+      {#if isUploading}
+        <Spinner class="h-fit" />
+      {:else}
+        <span
+          class={$projectIsUpdatedStore ? 'i-ic-baseline-file-upload' : 'i-ic-baseline-file-upload'}
+        ></span>
+      {/if}
+    </button>-->
+  </div>
+  <div class="h-full w-full bg-black mb-8">
+    <iframe
+      bind:this={iframeGame}
+      title="game-screen"
+      src="http://localhost:3000/"
+      class="w-full h-full max-w-full max-h-full object-contain {isPlaying ? '' : 'hidden'}"
+      allowfullscreen
+    ></iframe>
   </div>
-  <div class="h-full w-full bg-black mb-8"></div>
 </div>

From 12a07521230259f4fef0d2c99110f5f200ad28ff Mon Sep 17 00:00:00 2001
From: bill <timothe.jacquot@epitech.eu>
Date: Fri, 20 Mar 2026 04:23:34 +0100
Subject: [PATCH 11/13] feat: create project loading progress bar

---
 .../ProjectLoader/CreateProject.svelte        | 12 ++---
 .../ProjectLoader/LoadProject.svelte          | 14 ++----
 .../ProjectLoader/ProgressBar.svelte          | 49 +++++++++++++++++++
 src/lib/components/Utils/api/local-api.ts     | 36 ++++++++++----
 src/lib/components/Utils/api/project-api.ts   |  2 +-
 src/routes/load-project/+page.svelte          | 36 ++++++++------
 6 files changed, 104 insertions(+), 45 deletions(-)
 create mode 100644 src/lib/components/ProjectLoader/ProgressBar.svelte

diff --git a/src/lib/components/ProjectLoader/CreateProject.svelte b/src/lib/components/ProjectLoader/CreateProject.svelte
index d2c3428..232d8a4 100644
--- a/src/lib/components/ProjectLoader/CreateProject.svelte
+++ b/src/lib/components/ProjectLoader/CreateProject.svelte
@@ -1,13 +1,12 @@
 <script lang="ts">
   import api from '$lib/components/Utils/api/api';
-  import { goto } from '$app/navigation';
-  import { resolve } from '$app/paths';
   import ProjectCache from '$lib/components/Utils/LocalStorage/ProjectCache';
 
   interface Props {
     show: boolean;
+    callback?: (projectPath: string) => void;
   }
-  let { show = $bindable() }: Props = $props();
+  let { show = $bindable(), callback }: Props = $props();
 
   let showAdvancedSettings: boolean = $state(false);
   let error: string = $state('');
@@ -34,12 +33,7 @@
           imageUrl: '',
         });
 
-        const loadFormData = new FormData();
-        loadFormData.append('projectPath', newProjectPath);
-
-        await api.loadProject(loadFormData);
-        await api.downloadFiles();
-        await goto(resolve('/'));
+        callback?.(newProjectPath);
       }
     } catch (err: any) {
       error = err;
diff --git a/src/lib/components/ProjectLoader/LoadProject.svelte b/src/lib/components/ProjectLoader/LoadProject.svelte
index 9f3b897..a98fab4 100644
--- a/src/lib/components/ProjectLoader/LoadProject.svelte
+++ b/src/lib/components/ProjectLoader/LoadProject.svelte
@@ -1,12 +1,9 @@
 <script lang="ts">
-  import api from '$lib/components/Utils/api/api';
-  import { goto } from '$app/navigation';
-  import { resolve } from '$app/paths';
-
   interface Props {
     show: boolean;
+    callback?: (projectPath: string) => void;
   }
-  let { show = $bindable() }: Props = $props();
+  let { show = $bindable(), callback }: Props = $props();
 
   let error: string = $state('');
 
@@ -21,12 +18,7 @@
       const projectPath = formData.get('projectPath');
 
       if (projectPath) {
-        const loadFormData = new FormData();
-        loadFormData.append('projectPath', projectPath.toString());
-
-        await api.loadProject(loadFormData);
-        await api.downloadFiles();
-        await goto(resolve('/'));
+        callback?.(projectPath.toString());
       }
     } catch (err: any) {
       error = err;
diff --git a/src/lib/components/ProjectLoader/ProgressBar.svelte b/src/lib/components/ProjectLoader/ProgressBar.svelte
new file mode 100644
index 0000000..18b2952
--- /dev/null
+++ b/src/lib/components/ProjectLoader/ProgressBar.svelte
@@ -0,0 +1,49 @@
+<script lang="ts">
+  import { Progressbar } from 'flowbite-svelte';
+  import { onMount } from 'svelte';
+
+  interface Props {
+    promises: Promise<void>[];
+    show: boolean;
+    callback?: () => void;
+  }
+  let { promises, show = $bindable(), callback }: Props = $props();
+
+  let total: number = $state(0);
+  let completed: number = $state(0);
+
+  function handleClose(event: KeyboardEvent) {
+    if (event.key === 'Escape') {
+      show = false;
+    }
+  }
+
+  onMount(() => {
+    total = promises.length;
+    promises.forEach((promise) => {
+      promise.then(() => {
+        completed += 1;
+        console.log(`${completed}/${total}`);
+        if (completed === total && total > 0) {
+          callback?.();
+        }
+      });
+    });
+  });
+</script>
+
+<div
+  aria-hidden="true"
+  class={show
+    ? 'fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4'
+    : 'hidden'}
+  onclick={(e) => e.target === e.currentTarget && (show = false)}
+  onkeydown={handleClose}
+>
+  <div
+    class="bg-black outline outline-neutral-900 rounded-xl p-6 w-full max-w-sm shadow-2xl flex flex-col"
+  >
+    <span id="project-title" class="text-2xl font-bold mb-8 text-center">Load project</span>
+    <Progressbar progress={(completed / total) * 100} />
+  </div>
+</div>
diff --git a/src/lib/components/Utils/api/local-api.ts b/src/lib/components/Utils/api/local-api.ts
index a26c1a5..105395d 100644
--- a/src/lib/components/Utils/api/local-api.ts
+++ b/src/lib/components/Utils/api/local-api.ts
@@ -82,7 +82,7 @@ export class LocalAPI extends ProjectApi {
     });
   }
 
-  async downloadFiles(): Promise<void> {
+  async downloadFiles(): Promise<Promise<void>[]> {
     const readDirResp = await fetch('/fs?/readDirRec', {
       method: 'POST',
       body: JSON.stringify({ dirPath: '/' }),
@@ -97,25 +97,41 @@ export class LocalAPI extends ProjectApi {
     }
 
     await clearDB();
-    await this._downloadDirectoryRec(readDirResult.data.dirContent as DirectoryRec);
+    return this._downloadDirectoryRec(readDirResult.data.dirContent as DirectoryRec);
   }
 
-  private async _downloadDirectoryRec(dir: DirectoryRec, currentPath: string = ''): Promise<void> {
+  private async _downloadDirectoryRec(
+    dir: DirectoryRec,
+    currentPath: string = '',
+  ): Promise<Promise<void>[]> {
+    const promises: Promise<void>[] = [];
+
     for (const file of dir.files) {
-      const fileRes = await fetch('/fs?/readFile', {
+      const filePromise = fetch('/fs?/readFile', {
         method: 'POST',
         body: JSON.stringify({ filePath: '/' + currentPath + file }),
+      }).then(async (fileRes) => {
+        const fileResult = deserialize(await fileRes.text());
+        if (fileResult.type === 'success' && fileResult.data) {
+          await saveFile(currentPath + file, fileResult.data.fileContent as string);
+        }
       });
-      const fileResult = deserialize(await fileRes.text());
-
-      if (fileResult.type === 'success' && fileResult.data) {
-        await saveFile(currentPath + file, fileResult.data.fileContent as string);
-      }
+      promises.push(filePromise);
     }
+
     for (const [dirName, children] of Object.entries(dir.directories)) {
       if (dirName !== 'node_modules') {
-        await this._downloadDirectoryRec(children, currentPath + dirName + '/');
+        const dirPromise: Promise<void> = this._downloadDirectoryRec(
+          children,
+          currentPath + dirName + '/',
+        ).then((subDirPromises) => {
+          promises.push(...subDirPromises);
+          return;
+        });
+
+        promises.push(dirPromise);
       }
     }
+    return promises;
   }
 }
diff --git a/src/lib/components/Utils/api/project-api.ts b/src/lib/components/Utils/api/project-api.ts
index 0b0c92c..62edf85 100644
--- a/src/lib/components/Utils/api/project-api.ts
+++ b/src/lib/components/Utils/api/project-api.ts
@@ -11,5 +11,5 @@ export abstract class ProjectApi {
   abstract stopProject(): Promise<void>;
 
   abstract uploadFiles(): Promise<void>;
-  abstract downloadFiles(): Promise<void>;
+  abstract downloadFiles(): Promise<Promise<void>[]>;
 }
diff --git a/src/routes/load-project/+page.svelte b/src/routes/load-project/+page.svelte
index 1373d7b..3b61f47 100644
--- a/src/routes/load-project/+page.svelte
+++ b/src/routes/load-project/+page.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
   import { resolve } from '$app/paths';
   import Logo from '$lib/assets/logo.png';
-  import { clearDB } from '$lib/components/Utils/IndexedDB/db';
   import CreateProject from '$lib/components/ProjectLoader/CreateProject.svelte';
   import LoadProject from '$lib/components/ProjectLoader/LoadProject.svelte';
   import { onMount } from 'svelte';
@@ -11,15 +10,15 @@
   import DefaultProjectCover from '$lib/assets/defaultProjectCover.png';
   import api from '$lib/components/Utils/api/api';
   import { goto } from '$app/navigation';
+  import ProgressBar from '$lib/components/ProjectLoader/ProgressBar.svelte';
 
   let showCreateProject: boolean = $state(false);
   let showLoadProject: boolean = $state(false);
+  let showLoadingProject: boolean = $state(false);
 
-  let projectListCache: Array<ProjectDataCache> = $state([]);
+  let promisesFiles: Promise<void>[] = $state([]);
 
-  export function importProject() {
-    clearDB();
-  }
+  let projectListCache: Array<ProjectDataCache> = $state([]);
 
   function handleCreateProjectPopup(event: KeyboardEvent) {
     if (event.key === 'Enter' || event.key === ' ') {
@@ -34,14 +33,18 @@
     }
   }
 
-  export async function loadCacheProject(project: ProjectDataCache) {
-    try {
-      const loadFormData = new FormData();
-      loadFormData.append('projectPath', project.path);
+  async function loadProject(projectPath: string) {
+    const loadFormData = new FormData();
+    loadFormData.append('projectPath', projectPath);
 
-      await api.loadProject(loadFormData);
-      await api.downloadFiles();
-      await goto(resolve('/'));
+    await api.loadProject(loadFormData);
+    promisesFiles = await api.downloadFiles();
+    showLoadingProject = true;
+  }
+
+  async function loadCacheProject(project: ProjectDataCache) {
+    try {
+      await loadProject(project.path);
     } catch {
       ProjectCache.removeProject(project.name);
     }
@@ -132,5 +135,10 @@
     </div>
   </main>
 </div>
-<CreateProject bind:show={showCreateProject} />
-<LoadProject bind:show={showLoadProject} />
+<CreateProject bind:show={showCreateProject} callback={loadProject} />
+<LoadProject bind:show={showLoadProject} callback={loadProject} />
+<ProgressBar
+  promises={promisesFiles}
+  bind:show={showLoadingProject}
+  callback={() => goto(resolve('/'))}
+/>

From a3fa32c64c3c4f1d5b64ad8ca4a533f8a9f1cc7b Mon Sep 17 00:00:00 2001
From: bill <timothe.jacquot@epitech.eu>
Date: Fri, 20 Mar 2026 05:47:06 +0100
Subject: [PATCH 12/13] feat: create progressbar for creating project

---
 .../ProjectLoader/CreateProject.svelte        | 26 ++++++++++++++-----
 .../ProjectLoader/LoadProject.svelte          |  8 ++++++
 .../ProjectLoader/ProgressBar.svelte          |  9 +++----
 src/routes/load-project/+page.svelte          |  1 +
 4 files changed, 33 insertions(+), 11 deletions(-)

diff --git a/src/lib/components/ProjectLoader/CreateProject.svelte b/src/lib/components/ProjectLoader/CreateProject.svelte
index 232d8a4..ca125db 100644
--- a/src/lib/components/ProjectLoader/CreateProject.svelte
+++ b/src/lib/components/ProjectLoader/CreateProject.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
   import api from '$lib/components/Utils/api/api';
   import ProjectCache from '$lib/components/Utils/LocalStorage/ProjectCache';
+  import ProgressBar from '$lib/components/ProjectLoader/ProgressBar.svelte';
 
   interface Props {
     show: boolean;
@@ -8,6 +9,10 @@
   }
   let { show = $bindable(), callback }: Props = $props();
 
+  let projectLoading: Promise<void> | null = $state(null);
+
+  let formElem: HTMLFormElement | undefined = $state();
+
   let showAdvancedSettings: boolean = $state(false);
   let error: string = $state('');
 
@@ -17,12 +22,12 @@
     }
   }
 
-  export async function newProject(formData: FormData) {
+  export async function newProject() {
+    if (!formElem) return;
     try {
-      await api.createProject(formData);
-
-      const projectPath = formData.get('projectPath');
-      const projectName = formData.get('projectName');
+      const projectFormData = new FormData(formElem);
+      const projectPath = projectFormData.get('projectPath');
+      const projectName = projectFormData.get('projectName');
 
       if (projectPath && projectName) {
         const newProjectPath = projectPath.toString() + '/' + projectName.toString();
@@ -50,12 +55,13 @@
   onkeydown={handleClose}
 >
   <form
+    bind:this={formElem}
     class="bg-black outline outline-neutral-900 rounded-xl p-6 w-full max-w-sm shadow-2xl flex flex-col"
     aria-labelledby="project-title"
     onsubmit={(e) => {
       e.preventDefault();
       const formData = new FormData(e.currentTarget);
-      newProject(formData);
+      projectLoading = api.createProject(formData);
     }}
   >
     <span id="project-title" class="text-2xl font-bold mb-8 text-center">New project</span>
@@ -160,3 +166,11 @@
     </div>
   </form>
 </div>
+{#if projectLoading !== null}
+  <ProgressBar
+    title="Creating project"
+    promises={[projectLoading]}
+    show={true}
+    callback={() => newProject()}
+  />
+{/if}
diff --git a/src/lib/components/ProjectLoader/LoadProject.svelte b/src/lib/components/ProjectLoader/LoadProject.svelte
index a98fab4..e58c4a9 100644
--- a/src/lib/components/ProjectLoader/LoadProject.svelte
+++ b/src/lib/components/ProjectLoader/LoadProject.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+  import ProjectCache from '$lib/components/Utils/LocalStorage/ProjectCache';
+
   interface Props {
     show: boolean;
     callback?: (projectPath: string) => void;
@@ -18,6 +20,12 @@
       const projectPath = formData.get('projectPath');
 
       if (projectPath) {
+        const projectName = projectPath.toString().split('/').pop();
+        ProjectCache.addProject({
+          name: projectName ? projectName : 'untitled',
+          path: projectPath.toString(),
+          imageUrl: '',
+        });
         callback?.(projectPath.toString());
       }
     } catch (err: any) {
diff --git a/src/lib/components/ProjectLoader/ProgressBar.svelte b/src/lib/components/ProjectLoader/ProgressBar.svelte
index 18b2952..055de1c 100644
--- a/src/lib/components/ProjectLoader/ProgressBar.svelte
+++ b/src/lib/components/ProjectLoader/ProgressBar.svelte
@@ -1,13 +1,13 @@
 <script lang="ts">
   import { Progressbar } from 'flowbite-svelte';
-  import { onMount } from 'svelte';
 
   interface Props {
+    title: string;
     promises: Promise<void>[];
     show: boolean;
     callback?: () => void;
   }
-  let { promises, show = $bindable(), callback }: Props = $props();
+  let { title, promises, show = $bindable(), callback }: Props = $props();
 
   let total: number = $state(0);
   let completed: number = $state(0);
@@ -18,12 +18,11 @@
     }
   }
 
-  onMount(() => {
+  $effect(() => {
     total = promises.length;
     promises.forEach((promise) => {
       promise.then(() => {
         completed += 1;
-        console.log(`${completed}/${total}`);
         if (completed === total && total > 0) {
           callback?.();
         }
@@ -43,7 +42,7 @@
   <div
     class="bg-black outline outline-neutral-900 rounded-xl p-6 w-full max-w-sm shadow-2xl flex flex-col"
   >
-    <span id="project-title" class="text-2xl font-bold mb-8 text-center">Load project</span>
+    <span id="project-title" class="text-2xl font-bold mb-8 text-center">{title}</span>
     <Progressbar progress={(completed / total) * 100} />
   </div>
 </div>
diff --git a/src/routes/load-project/+page.svelte b/src/routes/load-project/+page.svelte
index 3b61f47..ef55a3d 100644
--- a/src/routes/load-project/+page.svelte
+++ b/src/routes/load-project/+page.svelte
@@ -138,6 +138,7 @@
 <CreateProject bind:show={showCreateProject} callback={loadProject} />
 <LoadProject bind:show={showLoadProject} callback={loadProject} />
 <ProgressBar
+  title="Downloading project"
   promises={promisesFiles}
   bind:show={showLoadingProject}
   callback={() => goto(resolve('/'))}

From 910c8e0df1a4b25406db51ead12179bd6c021e63 Mon Sep 17 00:00:00 2001
From: bill <timothe.jacquot@epitech.eu>
Date: Wed, 8 Apr 2026 16:57:16 +0200
Subject: [PATCH 13/13] fix: delete project path return on load project server

---
 src/routes/load-project/+page.server.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/routes/load-project/+page.server.ts b/src/routes/load-project/+page.server.ts
index ae75200..bec3410 100644
--- a/src/routes/load-project/+page.server.ts
+++ b/src/routes/load-project/+page.server.ts
@@ -74,7 +74,6 @@ export const actions = {
 
     return {
       success: true,
-      path: absoluteProjectPath,
     };
   },
 };