🧼 Updates menu list

app/src/lib/components/GithubUpdateDialog.svelte

@@ -1,6 +1,4 @@
 <script lang="ts">
-    import { run } from 'svelte/legacy';
-
     import { focusTrap } from 'svelte-focus-trap';
     import { fly } from 'svelte/transition';
     import { telemetry } from '$lib/stores/telemetry';
@@ -17,13 +15,13 @@
     let updating = $state(true);
 
     let progress = $state(0);
-    run(() => {
+    $effect(() => {
         if ($telemetry.download_ota.status == 'progress') {
             progress = $telemetry.download_ota.progress;
         }
     });
 
-    run(() => {
+    $effect(() => {
         if ($telemetry.download_ota.status == 'error') {
             updating = false;
         }
@@ -32,7 +30,7 @@
     let message = $state('Preparing ...');
     let timerId: number = $state();
 
-    run(() => {
+    $effect(() => {
         if ($telemetry.download_ota.status == 'progress') {
             message = 'Downloading ...';
         } else if ($telemetry.download_ota.status == 'error') {

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

@@ -1,8 +1,5 @@
 <script lang="ts">
-    import { run } from 'svelte/legacy';
-
-    import { page } from '$app/stores';
-    import { createEventDispatcher } from 'svelte';
+    import { page } from '$app/state';
     import { useFeatureFlags } from '$lib/stores/featureFlags';
     import GithubButton from '../menu/GithubButton.svelte';
     import LogoButton from '../menu/LogoButton.svelte';
@@ -29,11 +26,11 @@
 
     const features = useFeatureFlags();
 
-    const appName = $page.data.app_name;
+    const appName = page.data.app_name;
 
-    const copyright = $page.data.copyright;
+    const copyright = page.data.copyright;
 
-    const github = { href: 'https://github.com/' + $page.data.github, active: true };
+    const github = { href: 'https://github.com/' + page.data.github, active: true };
 
     type menuItem = {
         title: string;
@@ -44,8 +41,9 @@
         submenu?: menuItem[];
     };
 
-    let menuItems = $state();
-    run(() => {
+    let menuItems = $state<menuItem[]>([]);
+
+    $effect(() => {
         menuItems = [
             {
                 title: 'Connection',
@@ -137,14 +135,16 @@
                         icon: Update,
                         href: '/system/update',
                         feature:
-                            $features.ota || $features.upload_firmware || $features.download_firmware
+                            $features.ota ||
+                            $features.upload_firmware ||
+                            $features.download_firmware
                     }
                 ]
             }
         ] as menuItem[];
     });
 
-    const dispatch = createEventDispatcher();
+    const { menuClicked } = $props();
 
     function setActiveMenuItem(targetTitle: string) {
         menuItems.forEach(item => {
@@ -154,11 +154,11 @@
             });
         });
         menuItems = menuItems;
-        dispatch('menuClicked');
+        menuClicked();
     }
 
-    run(() => {
-        setActiveMenuItem($page.data.title);
+    $effect(() => {
+        setActiveMenuItem(page.data.title);
     });
 
     const updateMenu = (event: any) => {
@@ -169,7 +169,7 @@
 <div class="bg-base-200 text-base-content flex h-full w-80 flex-col p-4">
     <LogoButton {appName} />
 
-    <MenuList {menuItems} on:select{updateMenu} class="flex-grow flex-nowrap overflow-y-auto" />
+    <MenuList {menuItems} select={updateMenu} class="flex-grow flex-nowrap overflow-y-auto" />
 
     <div class="divider my-0"></div>
 

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

@@ -27,7 +27,12 @@
                             {menuItem.title}
                         </summary>
                         <div class="pl-4">
-                            <MenuList menuItems={menuItem.submenu} level={level + 1} />
+                            <MenuList
+                                menuItems={menuItem.submenu}
+                                level={level + 1}
+                                {select}
+                                class={klass}
+                            />
                         </div>
                     </details>
                 {:else}