📂 Adds filesystem service

app/src/routes/menu.svelte

@@ -5,6 +5,7 @@
 	import Settings from '~icons/mdi/settings';
     import MdiController from '~icons/mdi/controller';
 	import Health from '~icons/mdi/stethoscope';
+	import Folder from '~icons/mdi/folder-outline';
 	import Update from '~icons/mdi/reload';
 	import WiFi from '~icons/mdi/wifi';
 	import Router from '~icons/mdi/router';
@@ -111,6 +112,13 @@
 					feature: true,
 					
 				},
+                {
+					title: 'File System',
+					icon: Folder,
+					href: '/system/filesystem',
+					feature: true,
+					
+				},
 				{
 					title: 'System Metrics',
 					icon: Metrics,

app/src/routes/system/filesystem/+page.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+	import type { PageData } from './$types';
+	import FileSystem from './FileSystem.svelte';
+
+	export let data: PageData;
+</script>
+
+<div class="mx-0 my-1 flex flex-col space-y-4 sm:mx-8 sm:my-8">
+	<FileSystem />
+</div>

app/src/routes/system/filesystem/+page.ts

@@ -0,0 +1,5 @@
+import type { PageLoad } from './$types';
+
+export const load = (async () => {
+	return { title: 'File System' };
+}) satisfies PageLoad;

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

@@ -0,0 +1,7 @@
+<script>
+    import FileIcon from '~icons/mdi/file';
+	export let name;
+	// $: type = name.slice(name.lastIndexOf('.') + 1);
+</script>
+
+<span class="flex pl-4 gap-2 items-center"><FileIcon/>{name}</span>

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

@@ -0,0 +1,24 @@
+<script>
+	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";
+
+    const getFiles = async () => {
+        const response = await fetch('/api/files/list');
+        if (response.ok) {
+            return response.json();
+        }
+    };
+</script>
+<SettingsCard collapsible={false}>
+    <FolderIcon slot="icon" class="lex-shrink-0 mr-2 h-6 w-6 self-end" />
+	<span slot="title">File System</span>
+    <div class="w-full overflow-x-auto">
+		{#await getFiles()}
+			<Spinner />
+		{:then files}
+            <Folder name="/" files={files.root} expanded />
+        {/await}
+    </div>
+</SettingsCard>

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

@@ -0,0 +1,36 @@
+<script>
+	import File from './File.svelte';
+    import FolderIcon from '~icons/mdi/folder-outline';
+    import FolderOpenOutline from '~icons/mdi/folder-open-outline';
+
+	export let expanded = false;
+	export let name;
+	export let files;
+
+	function toggle() {
+		expanded = !expanded;
+	}
+</script>
+
+<button class="flex pl-2" on:click={toggle}>
+    {#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'}
+					<svelte:self {name} files={content} />
+				{:else}
+					<File {name} />
+				{/if}
+			</li>
+		{/each}
+	</ul>
+{/if}