Migrate frontend to Svelte 5 runes semantics

frontend/src/components/storage/FileList.svelte

@@ -7,12 +7,11 @@
 @RELATION:  DEPENDS_ON -> storageService
 
 @PROPS:     files (Array) - List of StoredFile objects.
-@EVENTS:    delete (filename) - Dispatched when a file is deleted.
+@EVENTS:    ondelete/onnavigate callback props - Raised when a file is deleted or navigation is requested.
 -->
 
 <script lang="ts">
   // [SECTION: IMPORTS]
-  import { createEventDispatcher } from 'svelte';
   import { downloadFile } from '../../services/storageService';
   import { t } from '../../lib/i18n';
   import { addToast } from '../../lib/toasts';
@@ -20,10 +19,10 @@
 
   let {
     files = [],
+    ondelete = () => {},
+    onnavigate = () => {},
   } = $props();
 
-  const dispatch = createEventDispatcher();
-
   // [DEF:isDirectory:Function]
   /**
    * @purpose Checks if a file object represents a directory.
@@ -104,7 +103,7 @@
           <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
             {#if isDirectory(file)}
               <button
-                on:click={() => dispatch('navigate', file.path)}
+                onclick={() => onnavigate(file.path)}
                 class="flex items-center text-indigo-600 hover:text-indigo-900"
               >
                 <svg class="h-5 w-5 mr-2 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
@@ -130,14 +129,14 @@
             {#if !isDirectory(file)}
               <button
                 type="button"
-                on:click={() => handleDownload(file)}
+                onclick={() => handleDownload(file)}
                 class="text-indigo-600 hover:text-indigo-900 mr-4"
               >
                 {$t.storage.table.download}
               </button>
             {/if}
             <button
-              on:click={() => dispatch('delete', { category: file.category, path: file.path, name: file.name })}
+              onclick={() => ondelete({ category: file.category, path: file.path, name: file.name })}
               class="text-red-600 hover:text-red-900"
             >
               {$t.storage.table.delete}

frontend/src/components/storage/FileUpload.svelte

@@ -7,12 +7,11 @@
 @RELATION:  DEPENDS_ON -> storageService
 
 @PROPS:     None
-@EVENTS:    uploaded - Dispatched when a file is successfully uploaded.
+@EVENTS:    onuploaded callback prop - Invoked when a file is successfully uploaded.
 -->
 
 <script lang="ts">
   // [SECTION: IMPORTS]
-  import { createEventDispatcher } from 'svelte';
   import { uploadFile } from '../../services/storageService';
   import { addToast } from '../../lib/toasts';
   import { t } from '../../lib/i18n';
@@ -24,11 +23,11 @@
    * @pre     A file must be selected in the file input.
    * @post    The file is uploaded to the server and a success toast is shown.
    */
-  const dispatch = createEventDispatcher();
   let fileInput;
   let {
     category = 'backups',
     path = '',
+    onuploaded = () => {},
   } = $props();
 
   let isUploading = $state(false);
@@ -49,7 +48,7 @@
       await uploadFile(file, category, subpath);
       addToast($t.storage.messages.upload_success.replace('{name}', file.name), 'success');
       fileInput.value = '';
-      dispatch('uploaded');
+      onuploaded();
     } catch (error) {
       addToast($t.storage.messages.upload_failed.replace('{error}', error.message), 'error');
     } finally {
@@ -81,8 +80,9 @@
   
   <div class="space-y-4">
     <div>
-      <label class="block text-sm font-medium text-gray-700 mb-1">{$t.storage.target_category}</label>
+      <label for="storage-upload-category" class="block text-sm font-medium text-gray-700 mb-1">{$t.storage.target_category}</label>
       <select
+        id="storage-upload-category"
         bind:value={category}
         class="block w-full border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
       >
@@ -94,6 +94,8 @@
     <div 
       class="mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-dashed rounded-md transition-colors
         {dragOver ? 'border-indigo-500 bg-indigo-50' : 'border-gray-300'}"
+      role="region"
+      aria-label={$t.storage.upload_title}
       ondragover={(event) => { event.preventDefault(); dragOver = true; }}
       ondragleave={(event) => { event.preventDefault(); dragOver = false; }}
       ondrop={(event) => { event.preventDefault(); handleDrop(event); }}