🧼 Migrates svelte-modals to 2.0

app/src/lib/components/GithubUpdateDialog.svelte

@@ -28,7 +28,6 @@
     });
 
     let message = $state('Preparing ...');
-    let timerId: number = $state();
 
     $effect(() => {
         if ($telemetry.download_ota.status == 'progress') {
@@ -39,7 +38,7 @@
             message = 'Restarting ...';
             progress = 0;
             // Reload page after 5 sec
-            timerId = setTimeout(() => {
+            setTimeout(() => {
                 modals.closeAll();
                 location.reload();
             }, 5000);
@@ -90,7 +89,7 @@
                     class="btn btn-warning text-warning-content inline-flex flex-none items-center"
                     disabled={updating}
                     onclick={() => {
-                        closeAllModals();
+                        modals.closeAll();
                         location.reload();
                     }}
                 >

app/src/lib/components/menu/Menu.svelte

@@ -169,7 +169,12 @@
 <div class="bg-base-200 text-base-content flex h-full w-80 flex-col p-4">
     <LogoButton {appName} />
 
-    <MenuList {menuItems} select={updateMenu} class="flex-grow flex-nowrap overflow-y-auto" />
+    <MenuList
+        {menuItems}
+        select={updateMenu}
+        class="flex-grow flex-nowrap overflow-y-auto"
+        level="0"
+    />
 
     <div class="divider my-0"></div>
 

app/src/lib/components/statusbar/SleepButton.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
     import { useFeatureFlags } from '$lib/stores';
-    import { closeModal, openModal } from 'svelte-modals/legacy';
+    import { modals } from 'svelte-modals';
     import ConfirmDialog from '$lib/components/ConfirmDialog.svelte';
     import { api } from '$lib/api';
     import { Cancel, Power } from '../icons';
@@ -10,7 +10,7 @@
     const postSleep = async () => await api.post('/api/system/sleep');
 
     const confirmSleep = () => {
-        openModal(ConfirmDialog, {
+        modals.open(ConfirmDialog, {
             title: 'Confirm Power Down',
             message: 'Are you sure you want to switch off the device?',
             labels: {
@@ -18,7 +18,7 @@
                 confirm: { label: 'Switch Off', icon: Power }
             },
             onConfirm: () => {
-                closeModal();
+                modals.close();
                 postSleep();
             }
         });

app/src/lib/components/statusbar/UpdateIndicator.svelte

@@ -1,9 +1,8 @@
 <script lang="ts">
-    import { page } from '$app/stores';
-    import { openModal, closeAllModals } from 'svelte-modals/legacy';
+    import { page } from '$app/state';
+    import { modals } from 'svelte-modals';
     import { notifications } from '$lib/components/toasts/notifications';
     import ConfirmDialog from '$lib/components/ConfirmDialog.svelte';
-
     import GithubUpdateDialog from '$lib/components/GithubUpdateDialog.svelte';
     import { compareVersions } from 'compare-versions';
     import { onMount } from 'svelte';
@@ -20,8 +19,8 @@
 
     let { update = $bindable(false) }: Props = $props();
 
-    let firmwareVersion: string = $state();
-    let firmwareDownloadLink: string = $state();
+    let firmwareVersion: string = $state('');
+    let firmwareDownloadLink: string = $state('');
 
     async function getGithubAPI() {
         const headers = {
@@ -29,7 +28,7 @@
             'X-GitHub-Api-Version': '2022-11-28'
         };
         const result = await api.get<GithubRelease>(
-            `https://api.github.com/repos/${$page.data.github}/releases/latest`,
+            `https://api.github.com/repos/${page.data.github}/releases/latest`,
             { headers }
         );
         if (result.inner.message === '404' || result.inner.message == 'Not Found') {
@@ -73,17 +72,12 @@
     onMount(async () => {
         if ($features.download_firmware) {
             await getGithubAPI();
-            const interval = setInterval(
-                async () => {
-                    await getGithubAPI();
-                },
-                60 * 60 * 1000
-            ); // once per hour
+            setInterval(async () => await getGithubAPI(), 60 * 60 * 1000); // once per hour
         }
     });
 
     function confirmGithubUpdate(url: string) {
-        openModal(ConfirmDialog, {
+        modals.open(ConfirmDialog, {
             title: 'Confirm flashing new firmware to the device',
             message: 'Are you sure you want to overwrite the existing firmware with a new one?',
             labels: {
@@ -92,8 +86,8 @@
             },
             onConfirm: () => {
                 postGithubDownload(url);
-                openModal(GithubUpdateDialog, {
-                    onConfirm: () => closeAllModals()
+                modals.open(GithubUpdateDialog, {
+                    onConfirm: () => modals.closeAll()
                 });
             }
         });
@@ -108,8 +102,9 @@
         >
             <span
                 class="indicator-item indicator-top indicator-center badge badge-info badge-xs top-2 scale-75 lg:top-1"
-                >{firmwareVersion}</span
             >
+                {firmwareVersion}
+            </span>
             <Firmware class="h-7 w-7" />
         </button>
     </div>

app/src/routes/+layout.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
     import { onDestroy, onMount } from 'svelte';
-    import { page } from '$app/stores';
-    import { Modals, closeModal } from 'svelte-modals/legacy';
+    import { page } from '$app/state';
+    import { Modals, modals } from 'svelte-modals';
     import Toast from '$lib/components/toasts/Toast.svelte';
     import { notifications } from '$lib/components/toasts/notifications';
     import { fade } from 'svelte/transition';
@@ -91,7 +91,7 @@
 </script>
 
 <svelte:head>
-    <title>{$page.data.title}</title>
+    <title>{page.data.title}</title>
 </svelte:head>
 
 <div class="drawer">
@@ -106,7 +106,7 @@
     <!-- Side Navigation -->
     <div class="drawer-side z-30 shadow-lg">
         <label for="main-menu" class="drawer-overlay"></label>
-        <Menu on:menuClicked={() => (menuOpen = false)} />
+        <Menu menuClicked={() => (menuOpen = false)} />
     </div>
 </div>
 
@@ -117,7 +117,7 @@
         <div
             class="fixed inset-0 z-40 max-h-full max-w-full bg-black/20 backdrop-blur"
             transition:fade
-            onclick={closeModal}
+            onclick={modals.closeAll}
         ></div>
     {/snippet}
 </Modals>

app/src/routes/system/status/SystemStatus.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
     import { onDestroy, onMount } from 'svelte';
-    import { openModal, closeModal } from 'svelte-modals/legacy';
+    import { modals } from 'svelte-modals';
     import ConfirmDialog from '$lib/components/ConfirmDialog.svelte';
     import SettingsCard from '$lib/components/SettingsCard.svelte';
     import Spinner from '$lib/components/Spinner.svelte';
@@ -60,7 +60,7 @@
     const postRestart = async () => await api.post('/api/system/restart');
 
     function confirmRestart() {
-        openModal(ConfirmDialog, {
+        modals.open(ConfirmDialog, {
             title: 'Confirm Restart',
             message: 'Are you sure you want to restart the device?',
             labels: {
@@ -68,14 +68,14 @@
                 confirm: { label: 'Restart', icon: Power }
             },
             onConfirm: () => {
-                closeModal();
+                modals.close();
                 postRestart();
             }
         });
     }
 
     function confirmReset() {
-        openModal(ConfirmDialog, {
+        modals.open(ConfirmDialog, {
             title: 'Confirm Factory Reset',
             message: 'Are you sure you want to reset the device to its factory defaults?',
             labels: {
@@ -83,14 +83,14 @@
                 confirm: { label: 'Factory Reset', icon: FactoryReset }
             },
             onConfirm: () => {
-                closeModal();
+                modals.close();
                 postFactoryReset();
             }
         });
     }
 
     function confirmSleep() {
-        openModal(ConfirmDialog, {
+        modals.open(ConfirmDialog, {
             title: 'Confirm Going to Sleep',
             message: 'Are you sure you want to put the device into sleep?',
             labels: {
@@ -98,7 +98,7 @@
                 confirm: { label: 'Sleep', icon: Sleep }
             },
             onConfirm: () => {
-                closeModal();
+                modals.close();
                 postSleep();
             }
         });

app/src/routes/system/update/GithubFirmwareManager.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-    import { page } from '$app/stores';
-    import { openModal, closeModal, closeAllModals } from 'svelte-modals/legacy';
+    import { page } from '$app/state';
+    import { modals } from 'svelte-modals';
     import { slide } from 'svelte/transition';
     import { cubicOut } from 'svelte/easing';
     import ConfirmDialog from '$lib/components/ConfirmDialog.svelte';
@@ -21,7 +21,7 @@
             accept: 'application/vnd.github+json',
             'X-GitHub-Api-Version': '2022-11-28'
         };
-        const result = await api.get(`https://api.github.com/repos/${$page.data.github}/releases`, {
+        const result = await api.get(`https://api.github.com/repos/${page.data.github}/releases`, {
             headers
         });
         if (result.isErr()) {
@@ -53,17 +53,17 @@
         }
         if (url === '') {
             // if no asset was found, use the first one
-            openModal(InfoDialog, {
+            modals.open(InfoDialog, {
                 title: 'No matching firmware found',
                 message:
                     'No matching firmware was found for the current device. Upload the firmware manually or build from sources.',
                 dismiss: { label: 'OK', icon: Check },
-                onDismiss: () => closeModal()
+                onDismiss: () => modals.close()
             });
             return;
         }
 
-        openModal(ConfirmDialog, {
+        modals.open(ConfirmDialog, {
             title: 'Confirm flashing new firmware to the device',
             message: 'Are you sure you want to overwrite the existing firmware with a new one?',
             labels: {
@@ -72,8 +72,8 @@
             },
             onConfirm: () => {
                 postGithubDownload(url);
-                openModal(GithubUpdateDialog, {
-                    onConfirm: () => closeAllModals()
+                modals.open(GithubUpdateDialog, {
+                    onConfirm: () => modals.closeAll()
                 });
             }
         });

app/src/routes/system/update/UploadFirmware.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { openModal, closeModal } from 'svelte-modals/legacy';
+    import { modals } from 'svelte-modals';
     import ConfirmDialog from '$lib/components/ConfirmDialog.svelte';
     import SettingsCard from '$lib/components/SettingsCard.svelte';
 
@@ -16,7 +16,7 @@
     }
 
     function confirmBinUpload() {
-        openModal(ConfirmDialog, {
+        modals.open(ConfirmDialog, {
             title: 'Confirm Flashing the Device',
             message: 'Are you sure you want to overwrite the existing firmware with a new one?',
             labels: {
@@ -24,7 +24,7 @@
                 confirm: { label: 'Upload', icon: OTA }
             },
             onConfirm: () => {
-                closeModal();
+                modals.close();
                 uploadBIN();
             }
         });
@@ -42,8 +42,8 @@
         <Warning class="h-6 w-6 flex-shrink-0" />
         <span
             >Uploading a new firmware (.bin) file will replace the existing firmware. You may upload
-            a (.md5) file first to verify the uploaded firmware.</span
-        >
+            a (.md5) file first to verify the uploaded firmware.
+        </span>
     </div>
 
     <input

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

@@ -1,6 +1,6 @@
 <script lang="ts">
     import { onMount, onDestroy } from 'svelte';
-    import { openModal, closeModal } from 'svelte-modals/legacy';
+    import { modals } from 'svelte-modals';
     import { slide } from 'svelte/transition';
     import { cubicOut } from 'svelte/easing';
     import { notifications } from '$lib/components/toasts/notifications';
@@ -205,12 +205,12 @@
     }
 
     function scanForNetworks() {
-        openModal(ScanNetworks, {
+        modals.open(ScanNetworks, {
             storeNetwork: (network: string) => {
                 addNetwork();
                 networkEditable.ssid = network;
                 showNetworkEditor = true;
-                closeModal();
+                modals.close();
             }
         });
     }
@@ -236,7 +236,7 @@
     }
 
     function confirmDelete(index: number) {
-        openModal(ConfirmDialog, {
+        modals.open(ConfirmDialog, {
             title: 'Delete Network',
             message: 'Are you sure you want to delete this network?',
             labels: {
@@ -252,21 +252,19 @@
                 dndNetworkList.splice(index, 1);
                 dndNetworkList = [...dndNetworkList]; //Trigger reactivity
                 showNetworkEditor = false;
-                closeModal();
+                modals.close();
             }
         });
     }
 
     function checkNetworkList() {
         if (dndNetworkList.length >= 5) {
-            openModal(InfoDialog, {
+            modals.open(InfoDialog, {
                 title: 'Reached Maximum Networks',
                 message:
                     'You have reached the maximum number of networks. Please delete one to add another.',
                 dismiss: { label: 'OK', icon: Check },
-                onDismiss: () => {
-                    closeModal();
-                }
+                onDismiss: () => modals.close()
             });
             return false;
         } else {