🧼 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>