web/components/queue: update to svelte 5 style

web/src/components/queue/ProcessingQueue.svelte

@@ -6,7 +6,6 @@
     import { clearFileStorage } from "$lib/storage/opfs";
 
     import { queueVisible } from "$lib/state/queue-visibility";
-    import { currentTasks } from "$lib/state/task-manager/current-tasks";
     import { clearQueue, queue as readableQueue } from "$lib/state/task-manager/queue";
     import { getProgress } from "$lib/task-manager/queue";
 
@@ -22,13 +21,13 @@
         $queueVisible = !$queueVisible;
     };
 
-    $: queue = Object.entries($readableQueue);
+    let queue = $derived(Object.entries($readableQueue));
 
-    $: totalProgress = queue.length ? queue.map(([, item]) => {
+    let totalProgress = $derived(queue.length ? queue.map(
-        return getProgress(item) * 100;
+        ([, item]) => getProgress(item) * 100
-    }).reduce((a, b) => a + b) / (100 * queue.length) : 0;
+    ).reduce((a, b) => a + b) / (100 * queue.length) : 0);
 
-    $: indeterminate = queue.length > 0 && totalProgress === 0;
+    let indeterminate = $derived(queue.length > 0 && totalProgress === 0);
 
     onNavigate(() => {
         $queueVisible = false;
@@ -68,9 +67,7 @@
                 />
                 <div class="header-buttons">
                     {#if queue.length}
-                        <button class="clear-button" on:click={() => {
+                        <button class="clear-button" onclick={clearQueue}>
-                            clearQueue();
-                        }}>
                             <IconX />
                             {$t("button.clear")}
                         </button>

web/src/components/queue/ProcessingQueueItem.svelte

@@ -29,10 +29,14 @@
         image: IconPhoto,
     };
 
-    export let id: string;
+    type Props = {
-    export let info: CobaltQueueItem;
+        id: string;
+        info: CobaltQueueItem;
+    }
 
-    let retrying = false;
+    let { id, info }: Props = $props();
+
+    let retrying = $state(false);
 
     const retry = async (info: CobaltQueueItem) => {
         if (info.canRetry && info.originalRequest) {
@@ -131,18 +135,20 @@
         the function every time either of them is changed,
         which is what we want in this case :3
     */
-    $: statusText = generateStatusText({
+    let statusText = $derived(generateStatusText({
         info,
         retrying,
         currentTasks: $currentTasks
-    });
+    }));
+
+    const MediaTypeIcon = $derived(itemIcons[info.mediaType]);
 </script>
 
 <div class="processing-item" role="listitem">
     <div class="processing-info">
         <div class="file-title">
             <div class="processing-type">
-                <svelte:component this={itemIcons[info.mediaType]} />
+                <MediaTypeIcon />
             </div>
             <span class="filename">
                 {info.filename}
@@ -187,7 +193,7 @@
             <button
                 class="button action-button"
                 aria-label={$t("button.download")}
-                on:click={() => download(info.resultFile)}
+                onclick={() => download(info.resultFile)}
             >
                 <IconDownload />
             </button>
@@ -198,7 +204,7 @@
                 <button
                     class="button action-button"
                     aria-label={$t("button.retry")}
-                    on:click={() => retry(info)}
+                    onclick={() => retry(info)}
                 >
                     <IconReload />
                 </button>
@@ -206,7 +212,7 @@
             <button
                 class="button action-button"
                 aria-label={$t(`button.${info.state === "done" ? "delete" : "remove"}`)}
-                on:click={() => removeItem(id)}
+                onclick={() => removeItem(id)}
             >
                 <IconX />
             </button>

web/src/components/queue/ProgressBar.svelte

@@ -1,9 +1,13 @@
 <script lang="ts">
     import Skeleton from "$components/misc/Skeleton.svelte";
 
-    export let percentage: number = 0;
+    type Props = {
-    export let workerId: string;
+        percentage?: number;
-    export let completedWorkers: Set<string>;
+        workerId: string;
+        completedWorkers: Set<string>;
+    }
+
+    let { percentage = 0, workerId, completedWorkers }: Props = $props();
 </script>
 
 <div class="file-progress">