🌌 Migrate app to svelte-5

app/src/routes/wifi/sta/Scan.svelte

@@ -1,4 +1,7 @@
 <script lang="ts">
+    import { createBubbler } from 'svelte/legacy';
+
+    const bubble = createBubbler();
     import { closeModal } from 'svelte-modals';
     import { focusTrap } from 'svelte-focus-trap';
     import { fly } from 'svelte/transition';
@@ -10,8 +13,12 @@
     import { AP, Network, Reload, Cancel } from '$lib/components/icons';
 
     // provided by <Modals />
-    export let isOpen: boolean;
-    export let storeNetwork: any;
+    interface Props {
+        isOpen: boolean;
+        storeNetwork: any;
+    }
+
+    let { isOpen, storeNetwork }: Props = $props();
 
     const encryptionType = [
         'Open',
@@ -25,9 +32,9 @@
         'WAPI PSK'
     ];
 
-    let listOfNetworks: NetworkItem[] = [];
+    let listOfNetworks: NetworkItem[] = $state([]);
 
-    let scanActive = false;
+    let scanActive = $state(false);
 
     let pollingId: number;
 
@@ -73,15 +80,15 @@
         role="dialog"
         class="pointer-events-none fixed inset-0 z-50 flex items-center justify-center"
         transition:fly={{ y: 50 }}
-        on:introstart
-        on:outroend
+        onintrostart={bubble('introstart')}
+        onoutroend={bubble('outroend')}
         use:focusTrap
     >
         <div
             class="bg-base-100 rounded-box pointer-events-auto flex max-h-full min-w-fit max-w-md flex-col justify-between p-4 shadow-lg"
         >
             <h2 class="text-base-content text-start text-2xl font-bold">Scan Networks</h2>
-            <div class="divider my-2" />
+            <div class="divider my-2"></div>
             <div class="overflow-y-auto">
                 {#if scanActive}<div
                         class="bg-base-100 flex flex-col items-center justify-center p-6"
@@ -93,10 +100,10 @@
                     <ul class="menu">
                         {#each listOfNetworks as network, i}
                             <li>
-                                <!-- svelte-ignore a11y-click-events-have-key-events -->
+                                <!-- svelte-ignore a11y_click_events_have_key_events -->
                                 <div
                                     class="bg-base-200 rounded-btn my-1 flex items-center space-x-3 hover:scale-[1.02] active:scale-[0.98]"
-                                    on:click={() => {
+                                    onclick={() => {
                                         storeNetwork(network.ssid);
                                     }}
                                     role="button"
@@ -114,7 +121,7 @@
                                             Channel: {network.channel}
                                         </div>
                                     </div>
-                                    <div class="flex-grow" />
+                                    <div class="flex-grow"></div>
                                     <RssiIndicator showDBm={true} rssi={network.rssi} />
                                 </div>
                             </li>
@@ -122,19 +129,19 @@
                     </ul>
                 {/if}
             </div>
-            <div class="divider my-2" />
+            <div class="divider my-2"></div>
             <div class="flex flex-wrap justify-end gap-2">
                 <button
                     class="btn btn-primary inline-flex flex-none items-center"
                     disabled={scanActive}
-                    on:click={scanNetworks}
+                    onclick={scanNetworks}
                     ><Reload class="mr-2 h-5 w-5" /><span>Scan again</span></button
                 >
 
-                <div class="flex-grow" />
+                <div class="flex-grow"></div>
                 <button
                     class="btn btn-warning text-warning-content inline-flex flex-none items-center"
-                    on:click={closeModal}><Cancel class="mr-2 h-5 w-5" /><span>Cancel</span></button
+                    onclick={closeModal}><Cancel class="mr-2 h-5 w-5" /><span>Cancel</span></button
                 >
             </div>
         </div>