From 98262b2efc20e9ecfd6fd49c340936aa624adfa1 Mon Sep 17 00:00:00 2001
From: Rune Harlyk <rune@harlyk.dk>
Date: Sat, 24 May 2025 19:23:46 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=97=83=EF=B8=8F=20Improves=20UI=20filesys?=
 =?UTF-8?q?tem=20interface?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/src/lib/components/icons/index.ts         |   1 +
 app/src/routes/system/filesystem/File.svelte  |  29 +++-
 .../system/filesystem/FileSystem.svelte       | 157 +++++++++++++++---
 .../routes/system/filesystem/Folder.svelte    |  51 +++---
 .../system/filesystem/NewFileDialog.svelte    |  44 +++++
 .../system/filesystem/NewFolderDialog.svelte  |  44 +++++
 esp32/lib/ESP32-sveltekit/filesystem.cpp      |  25 ++-
 esp32/lib/ESP32-sveltekit/filesystem.h        |   2 +
 esp32/src/spot.cpp                            |   1 +
 9 files changed, 291 insertions(+), 63 deletions(-)
 create mode 100644 app/src/routes/system/filesystem/NewFileDialog.svelte
 create mode 100644 app/src/routes/system/filesystem/NewFolderDialog.svelte

diff --git a/app/src/lib/components/icons/index.ts b/app/src/lib/components/icons/index.ts
index 3a26707..91604d4 100644
--- a/app/src/lib/components/icons/index.ts
+++ b/app/src/lib/components/icons/index.ts
@@ -35,6 +35,7 @@ export { default as Hamburger } from '~icons/mdi/hamburger-menu'
 export { default as FileIcon } from '~icons/mdi/file'
 export { default as FolderIcon } from '~icons/mdi/folder-outline'
 export { default as FolderOpenOutline } from '~icons/mdi/folder-open-outline'
+export { default as TrashIcon } from '~icons/mdi/trash'
 
 export { default as Down } from '~icons/tabler/chevron-down'
 export { default as Cancel } from '~icons/tabler/x'
diff --git a/app/src/routes/system/filesystem/File.svelte b/app/src/routes/system/filesystem/File.svelte
index 52b1777..d079510 100644
--- a/app/src/routes/system/filesystem/File.svelte
+++ b/app/src/routes/system/filesystem/File.svelte
@@ -1,11 +1,24 @@
-<script>
-  import { FileIcon } from '$lib/components/icons'
+<script lang="ts">
+  import { FileIcon, TrashIcon } from '$lib/components/icons'
 
-  let { name, selected } = $props()
+  interface Props {
+    name: string
+    selected: (name: string) => void
+    onDelete: (name: string) => void
+  }
+
+  let { name, selected, onDelete }: Props = $props()
 </script>
 
-<!-- svelte-ignore a11y_interactive_supports_focus -->
-<!-- svelte-ignore a11y_click_events_have_key_events -->
-<span role="button" class="flex pl-4 gap-2 items-center" onclick={() => selected(name)}>
-  <FileIcon />{name}
-</span>
+<div class="flex items-center pl-4 group hover:bg-gray-700 rounded py-1">
+  <button class="flex items-center gap-2 flex-grow" onclick={() => selected(name)}>
+    <FileIcon class="w-4 h-4" />
+    <span class="text-sm">{name}</span>
+  </button>
+
+  <button
+    class="opacity-0 group-hover:opacity-100 p-1 hover:text-red-500"
+    onclick={() => onDelete(name)}>
+    <TrashIcon class="w-4 h-4" />
+  </button>
+</div>
diff --git a/app/src/routes/system/filesystem/FileSystem.svelte b/app/src/routes/system/filesystem/FileSystem.svelte
index 9b53fcd..4fbddc7 100644
--- a/app/src/routes/system/filesystem/FileSystem.svelte
+++ b/app/src/routes/system/filesystem/FileSystem.svelte
@@ -4,9 +4,14 @@
   import Folder from './Folder.svelte'
   import { api } from '$lib/api'
   import type { Directory } from '$lib/types/models'
-  import { FolderIcon } from '$lib/components/icons'
+  import { FolderIcon, Add, FileIcon } from '$lib/components/icons'
+  import { modals } from 'svelte-modals'
+  import NewFolderDialog from './NewFolderDialog.svelte'
+  import NewFileDialog from './NewFileDialog.svelte'
 
   let filename = $state('')
+  let content = $state('')
+  let isEditing = $state(false)
 
   const getFiles = async () => {
     const result = await api.get<Directory>('/api/files')
@@ -20,44 +25,148 @@
     if (!name) return ''
     const result = await api.get(`/api/config/${name}`)
     if (result.isOk()) {
-      return JSON.stringify(result.inner, null, 4)
+      content = JSON.stringify(result.inner, null, 4)
+      return content
     }
     return ''
   }
 
-  const deleteFile = async (name: string) => {
-    const result = await api.post(`/api/files/delete`, { file: '/config/' + name })
+  const saveContent = async () => {
+    if (!filename) return
+    const result = await api.post('/api/files/edit', {
+      file: '/config/' + filename,
+      content
+    })
     if (result.isOk()) {
-      return result.inner
+      isEditing = false
+    }
+  }
+
+  const deleteFile = async (name: string) => {
+    if (!confirm(`Are you sure you want to delete ${name}?`)) return
+    const result = await api.post('/api/files/delete', { file: '/config/' + name })
+    if (result.isOk()) {
+      filename = ''
+      content = ''
+    }
+  }
+
+  const createFolder = async (folderName: string) => {
+    if (!folderName) return
+    const result = await api.post('/api/files/mkdir', {
+      path: '/config/' + folderName
+    })
+    if (result.isOk()) {
+      // Refresh the file list
+      await getFiles()
     }
-    return ''
   }
 
   const updateSelected = async (name: string) => {
     filename = name
+    isEditing = false
+    await getContent(name)
+  }
+
+  const openNewFolderDialog = () => {
+    modals.open(NewFolderDialog, {
+      onConfirm: createFolder
+    })
+  }
+
+  const createFile = async (fileName: string) => {
+    if (!fileName) return
+    const result = await api.post('/api/files/edit', {
+      file: '/config/' + fileName,
+      content: '{}' // Default empty JSON object
+    })
+    if (result.isOk()) {
+      // Refresh the file list and select the new file
+      await getFiles()
+      await updateSelected(fileName)
+    }
+  }
+
+  const openNewFileDialog = () => {
+    modals.open(NewFileDialog, {
+      onConfirm: createFile
+    })
   }
 </script>
 
-<SettingsCard collapsible={false}>
-  {#snippet icon()}
-    <FolderIcon class="flex-shrink-0 mr-2 h-6 w-6 self-end" />
-  {/snippet}
-  {#snippet title()}
-    <span>File System</span>
-  {/snippet}
-  <div class="w-full overflow-x-auto">
+<!-- <SettingsCard collapsible={false}> -->
+<!-- {#snippet icon()} -->
+<FolderIcon class="flex-shrink-0 mr-2 h-6 w-6 self-end" />
+<!-- {/snippet}
+  {#snippet title()} -->
+<div class="flex justify-between items-center w-full gap-2">
+  <span>File System</span>
+  <div class="flex gap-2">
+    <button class="btn btn-sm btn-primary flex items-center gap-2" onclick={openNewFileDialog}>
+      <FileIcon class="w-4 h-4" />
+      New File
+    </button>
+    <button class="btn btn-sm btn-primary flex items-center gap-2" onclick={openNewFolderDialog}>
+      <Add class="w-4 h-4" />
+      New Folder
+    </button>
+  </div>
+</div>
+<!-- {/snippet} -->
+
+<div class="flex flex-col md:flex-row gap-4 w-full">
+  <!-- File Tree -->
+  <div
+    class="w-full md:w-[300px] md:min-w-[300px] md:max-w-[300px] border-b md:border-b-0 md:border-r pb-4 md:pb-0 md:pr-4">
     {#await getFiles()}
       <Spinner />
     {:then files}
-      <Folder name="/" files={files.root} expanded selected={updateSelected} />
-    {/await}
-
-    {#await getContent(filename)}
-      <div>
-        <Spinner />
-      </div>
-    {:then content}
-      <pre>{content}</pre>
+      <Folder
+        name="/"
+        files={files.root}
+        expanded
+        selected={updateSelected}
+        onDelete={deleteFile} />
     {/await}
   </div>
-</SettingsCard>
+
+  <!-- File Content -->
+  <div class="flex-1 min-w-0">
+    {#if filename}
+      <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center mb-4 gap-2">
+        <h3 class="text-lg font-semibold truncate">{filename}</h3>
+        <div class="flex gap-2">
+          {#if isEditing}
+            <button class="btn btn-sm btn-primary" onclick={saveContent}>Save</button>
+            <button class="btn btn-sm btn-secondary" onclick={() => (isEditing = false)}>
+              Cancel
+            </button>
+          {:else}
+            <button class="btn btn-sm btn-primary" onclick={() => (isEditing = true)}>
+              Edit
+            </button>
+            <button class="btn btn-sm btn-danger" onclick={() => deleteFile(filename)}>
+              Delete
+            </button>
+          {/if}
+        </div>
+      </div>
+
+      {#await getContent(filename)}
+        <Spinner />
+      {:then _}
+        {#if isEditing}
+          <textarea
+            class="w-full h-[300px] sm:h-[500px] font-mono p-2 bg-gray-800 text-white"
+            bind:value={content}></textarea>
+        {:else}
+          <pre
+            class="bg-gray-800 p-4 rounded overflow-auto max-h-[300px] sm:max-h-[500px]">{content}</pre>
+        {/if}
+      {/await}
+    {:else}
+      <div class="text-center text-gray-500">Select a file to view its contents</div>
+    {/if}
+  </div>
+</div>
+<!-- </SettingsCard> -->
diff --git a/app/src/routes/system/filesystem/Folder.svelte b/app/src/routes/system/filesystem/Folder.svelte
index 42fc4cf..084f296 100644
--- a/app/src/routes/system/filesystem/Folder.svelte
+++ b/app/src/routes/system/filesystem/Folder.svelte
@@ -5,37 +5,40 @@
 
   interface Props {
     expanded?: boolean
-    name: any
+    name: string
     files: any
-    selected: any
+    selected: (name: string) => void
+    onDelete: (name: string) => void
   }
 
-  let { expanded = $bindable(false), name, files, selected }: Props = $props()
+  let { expanded = $bindable(false), name, files, selected, onDelete }: Props = $props()
 
   function toggle() {
     expanded = !expanded
   }
 </script>
 
-<button class="flex pl-2" onclick={toggle}>
-  {#if expanded}
-    <FolderOpenOutline class="w-6 h-6" />
-  {:else}
-    <FolderIcon class="w-6 h-6" />
-  {/if}
-  {name}
-</button>
+<div class="folder-item">
+  <button class="flex items-center pl-2 hover:bg-gray-700 w-full rounded py-1" onclick={toggle}>
+    {#if expanded}
+      <FolderOpenOutline class="w-5 h-5 mr-1" />
+    {:else}
+      <FolderIcon class="w-5 h-5 mr-1" />
+    {/if}
+    <span class="text-sm">{name}</span>
+  </button>
 
-{#if expanded}
-  <ul class="ml-5 border-l border-slate-600">
-    {#each Object.entries(files) as [name, content]}
-      <li class="p-1">
-        {#if typeof content == 'object'}
-          <Folder {name} files={content} {selected} />
-        {:else}
-          <File {name} {selected} />
-        {/if}
-      </li>
-    {/each}
-  </ul>
-{/if}
+  {#if expanded}
+    <ul class="ml-4 border-l border-gray-600 mt-1">
+      {#each Object.entries(files) as [itemName, content]}
+        <li class="py-1">
+          {#if typeof content === 'object'}
+            <Folder name={itemName} files={content} {selected} {onDelete} />
+          {:else}
+            <File name={itemName} {selected} {onDelete} />
+          {/if}
+        </li>
+      {/each}
+    </ul>
+  {/if}
+</div>
diff --git a/app/src/routes/system/filesystem/NewFileDialog.svelte b/app/src/routes/system/filesystem/NewFileDialog.svelte
new file mode 100644
index 0000000..4695a2b
--- /dev/null
+++ b/app/src/routes/system/filesystem/NewFileDialog.svelte
@@ -0,0 +1,44 @@
+<script lang="ts">
+  import { focusTrap } from 'svelte-focus-trap'
+  import { fly } from 'svelte/transition'
+  import { exitBeforeEnter, modals, type ModalProps } from 'svelte-modals'
+  import { Cancel, Check } from '$lib/components/icons'
+
+  let { isOpen, onConfirm }: ModalProps = $props()
+  let fileName = $state('')
+
+  const handleCreate = () => {
+    if (!fileName) return
+    onConfirm(fileName)
+    modals.close()
+  }
+</script>
+
+{#if isOpen}
+  <div
+    role="dialog"
+    class="pointer-events-none fixed inset-0 z-50 flex items-center justify-center"
+    transition:fly={{ y: 50 }}
+    use:exitBeforeEnter
+    use:focusTrap>
+    <div
+      class="rounded-box bg-base-100 pointer-events-auto flex min-w-fit max-w-md flex-col justify-between p-4 shadow-lg">
+      <h2 class="text-base-content text-start text-2xl font-bold">Create New File</h2>
+      <div class="divider my-2"></div>
+      <input
+        type="text"
+        class="input input-bordered w-full"
+        placeholder="File name"
+        bind:value={fileName} />
+      <div class="divider my-2"></div>
+      <div class="flex justify-end gap-2">
+        <button class="btn btn-error inline-flex items-center" onclick={() => modals.close()}>
+          <Cancel class="mr-2 h-5 w-5" /><span>Cancel</span>
+        </button>
+        <button class="btn btn-primary inline-flex items-center" onclick={handleCreate}>
+          <Check class="mr-2 h-5 w-5" /><span>Create</span>
+        </button>
+      </div>
+    </div>
+  </div>
+{/if}
diff --git a/app/src/routes/system/filesystem/NewFolderDialog.svelte b/app/src/routes/system/filesystem/NewFolderDialog.svelte
new file mode 100644
index 0000000..92d0a75
--- /dev/null
+++ b/app/src/routes/system/filesystem/NewFolderDialog.svelte
@@ -0,0 +1,44 @@
+<script lang="ts">
+  import { focusTrap } from 'svelte-focus-trap'
+  import { fly } from 'svelte/transition'
+  import { exitBeforeEnter, modals, type ModalProps } from 'svelte-modals'
+  import { Cancel, Check } from '$lib/components/icons'
+
+  let { isOpen, onConfirm }: ModalProps = $props()
+  let folderName = $state('')
+
+  const handleCreate = () => {
+    if (!folderName) return
+    onConfirm(folderName)
+    modals.close()
+  }
+</script>
+
+{#if isOpen}
+  <div
+    role="dialog"
+    class="pointer-events-none fixed inset-0 z-50 flex items-center justify-center"
+    transition:fly={{ y: 50 }}
+    use:exitBeforeEnter
+    use:focusTrap>
+    <div
+      class="rounded-box bg-base-100 pointer-events-auto flex min-w-fit max-w-md flex-col justify-between p-4 shadow-lg">
+      <h2 class="text-base-content text-start text-2xl font-bold">Create New Folder</h2>
+      <div class="divider my-2"></div>
+      <input
+        type="text"
+        class="input input-bordered w-full"
+        placeholder="Folder name"
+        bind:value={folderName} />
+      <div class="divider my-2"></div>
+      <div class="flex justify-end gap-2">
+        <button class="btn btn-error inline-flex items-center" onclick={() => modals.close()}>
+          <Cancel class="mr-2 h-5 w-5" /><span>Cancel</span>
+        </button>
+        <button class="btn btn-primary inline-flex items-center" onclick={handleCreate}>
+          <Check class="mr-2 h-5 w-5" /><span>Create</span>
+        </button>
+      </div>
+    </div>
+  </div>
+{/if}
diff --git a/esp32/lib/ESP32-sveltekit/filesystem.cpp b/esp32/lib/ESP32-sveltekit/filesystem.cpp
index 9e426ef..cf52878 100644
--- a/esp32/lib/ESP32-sveltekit/filesystem.cpp
+++ b/esp32/lib/ESP32-sveltekit/filesystem.cpp
@@ -44,23 +44,28 @@ bool deleteFile(const char *filename) { return ESPFS.remove(filename); }
 
 String listFiles(const String &directory, bool isRoot) {
     File root = ESPFS.open(directory.startsWith("/") ? directory : "/" + directory);
-    if (!root.isDirectory()) return "";
+    if (!root.isDirectory()) return "{}";
 
     File file = root.openNextFile();
+    if (!file) {
+        return isRoot ? "{ \"root\": {} }" : "{}";
+    }
+
     String output = isRoot ? "{ \"root\": {" : "{";
 
     while (file) {
+        String name = String(file.name());
         if (file.isDirectory()) {
-            output += "\"" + String(file.name()) + "\": " + listFiles(file.name(), false) + ", ";
+            output += "\"" + name + "\": " + listFiles(name, false);
         } else {
-            output += "\"" + String(file.name()) + "\": " + String(file.size()) + ", ";
+            output += "\"" + name + "\": " + String(file.size());
         }
-        file = root.openNextFile();
+
+        File next = root.openNextFile();
+        if (next) output += ", ";
+        file = next;
     }
 
-    if (output.endsWith(", ")) {
-        output.remove(output.length() - 2);
-    }
     output += "}";
     if (isRoot) output += "}";
 
@@ -98,4 +103,10 @@ bool editFile(const char *filename, const char *content) {
     return true;
 }
 
+esp_err_t mkdir(PsychicRequest *request, JsonVariant &json) {
+    const char *path = json["path"].as<const char *>();
+    ESP_LOGI(TAG, "Creating directory: %s", path);
+    return ESPFS.mkdir(path) ? request->reply(200) : request->reply(500);
+}
+
 } // namespace FileSystem
\ No newline at end of file
diff --git a/esp32/lib/ESP32-sveltekit/filesystem.h b/esp32/lib/ESP32-sveltekit/filesystem.h
index 3fdbb4f..f13cedf 100644
--- a/esp32/lib/ESP32-sveltekit/filesystem.h
+++ b/esp32/lib/ESP32-sveltekit/filesystem.h
@@ -26,4 +26,6 @@ esp_err_t uploadFile(PsychicRequest *request, const String &filename, uint64_t i
 esp_err_t getFiles(PsychicRequest *request);
 esp_err_t handleDelete(PsychicRequest *request, JsonVariant &json);
 esp_err_t handleEdit(PsychicRequest *request, JsonVariant &json);
+
+esp_err_t mkdir(PsychicRequest *request, JsonVariant &json);
 } // namespace FileSystem
\ No newline at end of file
diff --git a/esp32/src/spot.cpp b/esp32/src/spot.cpp
index ce13f06..bb21bd3 100644
--- a/esp32/src/spot.cpp
+++ b/esp32/src/spot.cpp
@@ -79,6 +79,7 @@ void Spot::setupServer() {
     _server.on("/api/files/delete", HTTP_POST, FileSystem::handleDelete);
     _server.on("/api/files/upload/*", HTTP_POST, FileSystem::uploadHandler);
     _server.on("/api/files/edit", HTTP_POST, FileSystem::handleEdit);
+    _server.on("/api/files/mkdir", HTTP_POST, FileSystem::mkdir);
 
     // SERVO
     _server.on("/api/servo/config", HTTP_GET,