From 5a24038d688af8f3ffc2bdfc9a7e23ce1a598957 Mon Sep 17 00:00:00 2001
From: Rune Harlyk <rune@harlyk.dk>
Date: Sat, 8 Mar 2025 15:55:13 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=93=82=20Fixes=20file=20system=20view?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/src/routes/system/filesystem/File.svelte  |   2 +-
 .../system/filesystem/FileSystem.svelte       | 105 +++++++++---------
 .../routes/system/filesystem/Folder.svelte    |  66 +++++------
 3 files changed, 84 insertions(+), 89 deletions(-)

diff --git a/app/src/routes/system/filesystem/File.svelte b/app/src/routes/system/filesystem/File.svelte
index 9b5965e..52b1777 100644
--- a/app/src/routes/system/filesystem/File.svelte
+++ b/app/src/routes/system/filesystem/File.svelte
@@ -6,6 +6,6 @@
 
 <!-- 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}>
+<span role="button" class="flex pl-4 gap-2 items-center" onclick={() => selected(name)}>
   <FileIcon />{name}
 </span>
diff --git a/app/src/routes/system/filesystem/FileSystem.svelte b/app/src/routes/system/filesystem/FileSystem.svelte
index dd57f74..9b53fcd 100644
--- a/app/src/routes/system/filesystem/FileSystem.svelte
+++ b/app/src/routes/system/filesystem/FileSystem.svelte
@@ -1,62 +1,63 @@
 <script lang="ts">
-	import SettingsCard from "$lib/components/SettingsCard.svelte";
-	import Spinner from "$lib/components/Spinner.svelte";
-	import Folder from "./Folder.svelte";
-	import { api } from "$lib/api";
-	import type { Directory } from "$lib/types/models";
-	import { FolderIcon } from "$lib/components/icons";
+  import SettingsCard from '$lib/components/SettingsCard.svelte'
+  import Spinner from '$lib/components/Spinner.svelte'
+  import Folder from './Folder.svelte'
+  import { api } from '$lib/api'
+  import type { Directory } from '$lib/types/models'
+  import { FolderIcon } from '$lib/components/icons'
 
-    let filename = $state('');
+  let filename = $state('')
 
-    const getFiles = async () => {
-        const result = await api.get<Directory>('/api/files')
-        if (result.isOk()) {
-            return result.inner;
-        }
-        return { root: {} }
-    };
-
-    const getContent = async (name: string) => {
-        if (!name) return '';
-        const result = await api.get(`/api/config/${name}`)
-        if (result.isOk()) {
-            return JSON.stringify(result.inner, null, 4);
-        }
-        return ''
+  const getFiles = async () => {
+    const result = await api.get<Directory>('/api/files')
+    if (result.isOk()) {
+      return result.inner
     }
+    return { root: {} }
+  }
 
-    const deleteFile = async (name: string) => {
-        const result = await api.post(`/api/files/delete`, { file: "/config/"+ name })
-        if (result.isOk()) {
-            return result.inner;
-        }
-        return ''
+  const getContent = async (name: string) => {
+    if (!name) return ''
+    const result = await api.get(`/api/config/${name}`)
+    if (result.isOk()) {
+      return JSON.stringify(result.inner, null, 4)
     }
+    return ''
+  }
 
-    const updateSelected = async (event:any) => {
-        filename = event.detail.name;
+  const deleteFile = async (name: string) => {
+    const result = await api.post(`/api/files/delete`, { file: '/config/' + name })
+    if (result.isOk()) {
+      return result.inner
     }
+    return ''
+  }
+
+  const updateSelected = async (name: string) => {
+    filename = name
+  }
 </script>
+
 <SettingsCard collapsible={false}>
-    {#snippet icon()}
-        <FolderIcon  class="lex-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">
-		{#await getFiles()}
-			<Spinner />
-		{:then files}
-            <Folder name="/" files={files.root} expanded on:selected={updateSelected}/>
-        {/await}
-            
-        {#await getContent(filename)}
-            <div>
-                <Spinner />
-            </div>
-        {:then content}
-            <pre>{content}</pre>
-        {/await}
-    </div>
-</SettingsCard>
\ No newline at end of file
+  {#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">
+    {#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>
+    {/await}
+  </div>
+</SettingsCard>
diff --git a/app/src/routes/system/filesystem/Folder.svelte b/app/src/routes/system/filesystem/Folder.svelte
index c7218f4..42fc4cf 100644
--- a/app/src/routes/system/filesystem/Folder.svelte
+++ b/app/src/routes/system/filesystem/Folder.svelte
@@ -1,47 +1,41 @@
 <script lang="ts">
-	import Folder from './Folder.svelte';
-	import File from './File.svelte';
-	import { createEventDispatcher } from 'svelte';
-	import { FolderIcon, FolderOpenOutline } from '$lib/components/icons';
+  import Folder from './Folder.svelte'
+  import File from './File.svelte'
+  import { FolderIcon, FolderOpenOutline } from '$lib/components/icons'
 
-	interface Props {
-		expanded?: boolean;
-		name: any;
-		files: any;
-	}
+  interface Props {
+    expanded?: boolean
+    name: any
+    files: any
+    selected: any
+  }
 
-	let { expanded = $bindable(false), name, files }: Props = $props();
+  let { expanded = $bindable(false), name, files, selected }: Props = $props()
 
-	function toggle() {
-		expanded = !expanded;
-	}
-
-    const dispatch = createEventDispatcher();
-
-    const updateSelected = async (event:any) => {
-        dispatch('selected', { name:event.detail.name });
-    }
+  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}
+  {#if expanded}
+    <FolderOpenOutline class="w-6 h-6" />
+  {:else}
+    <FolderIcon class="w-6 h-6" />
+  {/if}
+  {name}
 </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} on:selected={updateSelected} />
-				{:else}
-					<File {name} on:selected={updateSelected}/>
-				{/if}
-			</li>
-		{/each}
-	</ul>
+  <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}