🌌 Migrate app to svelte-5

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

@@ -2,7 +2,8 @@
 	import { FileIcon } from '$lib/components/icons';
     import { createEventDispatcher } from 'svelte';
     
-	export let name;
+    /** @type {{name: any}} */
+    let { name } = $props();
     
     const dispatch = createEventDispatcher();
 
@@ -11,8 +12,8 @@
     }
 </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" on:click={updateSelected}>
+<!-- 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={updateSelected}>
     <FileIcon/>{name}
 </span>

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

@@ -6,7 +6,7 @@
 	import type { Directory } from "$lib/types/models";
 	import { FolderIcon } from "$lib/components/icons";
 
-    let filename = '';
+    let filename = $state('');
 
     const getFiles = async () => {
         const result = await api.get<Directory>('/api/files')
@@ -38,8 +38,12 @@
     }
 </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>
+    {#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 />

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

@@ -1,11 +1,16 @@
 <script lang="ts">
+	import Folder from './Folder.svelte';
 	import File from './File.svelte';
 	import { createEventDispatcher } from 'svelte';
 	import { FolderIcon, FolderOpenOutline } from '$lib/components/icons';
 
-	export let expanded = false;
-	export let name;
-	export let files;
+	interface Props {
+		expanded?: boolean;
+		name: any;
+		files: any;
+	}
+
+	let { expanded = $bindable(false), name, files }: Props = $props();
 
 	function toggle() {
 		expanded = !expanded;
@@ -18,7 +23,7 @@
     }
 </script>
 
-<button class="flex pl-2" on:click={toggle}>
+<button class="flex pl-2" onclick={toggle}>
     {#if expanded}
         <FolderOpenOutline class="w-6 h-6" />
     {:else}
@@ -32,7 +37,7 @@
         {#each Object.entries(files) as [name, content]}
             <li class="p-1">
                 {#if typeof content == 'object'}
-					<svelte:self {name} files={content} on:selected={updateSelected} />
+					<Folder {name} files={content} on:selected={updateSelected} />
 				{:else}
 					<File {name} on:selected={updateSelected}/>
 				{/if}