📂 Fixes file system view

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>

app/src/routes/system/filesystem/FileSystem.svelte

@@ -1,45 +1,46 @@
 <script lang="ts">
-	import SettingsCard from "$lib/components/SettingsCard.svelte";
+  import SettingsCard from '$lib/components/SettingsCard.svelte'
-	import Spinner from "$lib/components/Spinner.svelte";
+  import Spinner from '$lib/components/Spinner.svelte'
-	import Folder from "./Folder.svelte";
+  import Folder from './Folder.svelte'
-	import { api } from "$lib/api";
+  import { api } from '$lib/api'
-	import type { Directory } from "$lib/types/models";
+  import type { Directory } from '$lib/types/models'
-	import { FolderIcon } from "$lib/components/icons";
+  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 result.inner
     }
     return { root: {} }
-    };
+  }
 
   const getContent = async (name: string) => {
-        if (!name) return '';
+    if (!name) return ''
     const result = await api.get(`/api/config/${name}`)
     if (result.isOk()) {
-            return JSON.stringify(result.inner, null, 4);
+      return JSON.stringify(result.inner, null, 4)
     }
     return ''
   }
 
   const deleteFile = async (name: string) => {
-        const result = await api.post(`/api/files/delete`, { file: "/config/"+ name })
+    const result = await api.post(`/api/files/delete`, { file: '/config/' + name })
     if (result.isOk()) {
-            return result.inner;
+      return result.inner
     }
     return ''
   }
 
-    const updateSelected = async (event:any) => {
+  const updateSelected = async (name: string) => {
-        filename = event.detail.name;
+    filename = name
   }
 </script>
+
 <SettingsCard collapsible={false}>
   {#snippet icon()}
-        <FolderIcon  class="lex-shrink-0 mr-2 h-6 w-6 self-end" />
+    <FolderIcon class="flex-shrink-0 mr-2 h-6 w-6 self-end" />
   {/snippet}
   {#snippet title()}
     <span>File System</span>
@@ -48,7 +49,7 @@
     {#await getFiles()}
       <Spinner />
     {:then files}
-            <Folder name="/" files={files.root} expanded on:selected={updateSelected}/>
+      <Folder name="/" files={files.root} expanded selected={updateSelected} />
     {/await}
 
     {#await getContent(filename)}

app/src/routes/system/filesystem/Folder.svelte

@@ -1,25 +1,19 @@
 <script lang="ts">
-	import Folder from './Folder.svelte';
+  import Folder from './Folder.svelte'
-	import File from './File.svelte';
+  import File from './File.svelte'
-	import { createEventDispatcher } from 'svelte';
+  import { FolderIcon, FolderOpenOutline } from '$lib/components/icons'
-	import { FolderIcon, FolderOpenOutline } from '$lib/components/icons';
 
   interface Props {
-		expanded?: boolean;
+    expanded?: boolean
-		name: any;
+    name: any
-		files: 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;
+    expanded = !expanded
-	}
-
-    const dispatch = createEventDispatcher();
-
-    const updateSelected = async (event:any) => {
-        dispatch('selected', { name:event.detail.name });
   }
 </script>
 
@@ -37,9 +31,9 @@
     {#each Object.entries(files) as [name, content]}
       <li class="p-1">
         {#if typeof content == 'object'}
-					<Folder {name} files={content} on:selected={updateSelected} />
+          <Folder {name} files={content} {selected} />
         {:else}
-					<File {name} on:selected={updateSelected}/>
+          <File {name} {selected} />
         {/if}
       </li>
     {/each}