From 31dd7f7ba4e8aea27784cbbfd760dae893d6b964 Mon Sep 17 00:00:00 2001
From: Rune Harlyk <rune@harlyk.dk>
Date: Sat, 1 Mar 2025 23:09:45 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=A7=BC=20Updates=20menu=20list?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../lib/components/GithubUpdateDialog.svelte  |  8 ++---
 app/src/lib/components/menu/Menu.svelte       | 30 +++++++++----------
 app/src/lib/components/menu/MenuList.svelte   |  7 ++++-
 3 files changed, 24 insertions(+), 21 deletions(-)

diff --git a/app/src/lib/components/GithubUpdateDialog.svelte b/app/src/lib/components/GithubUpdateDialog.svelte
index 766b0fe..987a5bc 100644
--- a/app/src/lib/components/GithubUpdateDialog.svelte
+++ b/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') {
diff --git a/app/src/lib/components/menu/Menu.svelte b/app/src/lib/components/menu/Menu.svelte
index 339fc63..6f63bb8 100644
--- a/app/src/lib/components/menu/Menu.svelte
+++ b/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>
 
diff --git a/app/src/lib/components/menu/MenuList.svelte b/app/src/lib/components/menu/MenuList.svelte
index acb3c52..467ecfa 100644
--- a/app/src/lib/components/menu/MenuList.svelte
+++ b/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}