📂 Adds file selection

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

@@ -1,7 +1,18 @@
 <script>
     import FileIcon from '~icons/mdi/file';
+    import { createEventDispatcher } from 'svelte';
+    
 	export let name;
-	// $: type = name.slice(name.lastIndexOf('.') + 1);
+    
+    const dispatch = createEventDispatcher();
+
+    const updateSelected = async () => {
+        dispatch('selected', { name });
+    }
 </script>
 
-<span class="flex pl-4 gap-2 items-center"><FileIcon/>{name}</span>
+<!-- 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" on:click={updateSelected}>
+    <FileIcon/>{name}
+</span>

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

@@ -1,16 +1,33 @@
-<script>
+<script lang="ts">
 	import SettingsCard from "$lib/components/SettingsCard.svelte";
 	import Spinner from "$lib/components/Spinner.svelte";
     import FolderIcon from '~icons/mdi/folder-outline';
 	import Folder from "./Folder.svelte";
 	import { api } from "$lib/api";
+	import type { Directory } from "$lib/models";
+
+    let filename = '';
 
     const getFiles = async () => {
-        const result = await api.get('/api/files/list')
+        const result = await api.get<Directory>('/api/files/list')
         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 updateSelected = async (event:any) => {
+        filename = event.detail.name;
+    }
 </script>
 <SettingsCard collapsible={false}>
     <FolderIcon slot="icon" class="lex-shrink-0 mr-2 h-6 w-6 self-end" />
@@ -19,7 +36,15 @@
 		{#await getFiles()}
 			<Spinner />
 		{:then files}
-            <Folder name="/" files={files.root} expanded />
+            <Folder name="/" files={files.root} expanded on:selected={updateSelected}/>
+        {/await}
+            
+        {#await getContent(filename)}
+            <div>
+                <Spinner />
+            </div>
+        {:then content}
+            <pre>{content}</pre>
         {/await}
     </div>
 </SettingsCard>

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

@@ -1,7 +1,8 @@
-<script>
+<script lang="ts">
 	import File from './File.svelte';
     import FolderIcon from '~icons/mdi/folder-outline';
     import FolderOpenOutline from '~icons/mdi/folder-open-outline';
+	import { createEventDispatcher } from 'svelte';
 
 	export let expanded = false;
 	export let name;
@@ -10,6 +11,12 @@
 	function toggle() {
 		expanded = !expanded;
 	}
+
+    const dispatch = createEventDispatcher();
+
+    const updateSelected = async (event:any) => {
+        dispatch('selected', { name:event.detail.name });
+    }
 </script>
 
 <button class="flex pl-2" on:click={toggle}>
@@ -26,9 +33,9 @@
         {#each Object.entries(files) as [name, content]}
             <li class="p-1">
                 {#if typeof content == 'object'}
-					<svelte:self {name} files={content} />
+					<svelte:self {name} files={content} on:selected={updateSelected} />
 				{:else}
-					<File {name} />
+					<File {name} on:selected={updateSelected}/>
 				{/if}
 			</li>
 		{/each}