🚨 Fix linting errors

app/src/lib/components/StatusItem.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import type { ComponentType } from 'svelte'
+    import type { Component } from 'svelte'
 
     type Variant = 'success' | 'error' | 'primary' | 'info' | 'warning'
 
@@ -11,12 +11,12 @@
         class: klass = '',
         children = null
     } = $props<{
-        icon?: ComponentType
+        icon?: Component
         title: string
         description?: string | number
         variant?: Variant
         class?: string
-        children?: () => ComponentType
+        children?: () => Component
     }>()
 
     const Icon = $derived(icon)

app/src/lib/components/Visualization.svelte

@@ -119,7 +119,6 @@
     })
 
     onDestroy(() => {
-        canvas.remove()
         gui_panel?.destroy()
     })
 

app/src/lib/components/input/VerticalSlider.svelte

@@ -4,7 +4,7 @@
         max?: number
         step?: number
         value?: number
-        oninput?: (value: number) => void
+        oninput?: (value: Event) => void
     }
 
     let {

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

@@ -2,13 +2,14 @@
     import { Github } from '../icons'
 
     interface Props {
-        github: { url: string; version: string; active?: boolean; href?: string }
+        github: { href: string; active?: boolean }
     }
 
     let { github }: Props = $props()
 </script>
 
 {#if github.active}
+    <!-- eslint-disable-next-line svelte/no-navigation-without-resolve -- external URL -->
     <a href={github.href} class="btn btn-ghost" target="_blank" rel="noopener noreferrer">
         <Github class="h-5 w-5" />
     </a>

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

@@ -1,6 +1,6 @@
 <script lang="ts">
     import { page } from '$app/state'
-    import { base } from '$app/paths'
+    import { resolve } from '$app/paths'
     import { useFeatureFlags } from '$lib/stores/featureFlags'
     import GithubButton from '../menu/GithubButton.svelte'
     import LogoButton from '../menu/LogoButton.svelte'
@@ -33,11 +33,11 @@
 
     const github = { href: 'https://github.com/' + page.data.github, active: true }
 
-    import type { ComponentType } from 'svelte'
+    import type { Component } from 'svelte'
 
     type menuItem = {
         title: string
-        icon: ComponentType
+        icon: Component
         href?: string
         feature: boolean
         active?: boolean
@@ -45,13 +45,15 @@
     }
 
     function withBase(path: string) {
-        return `${base}${path.startsWith('/') ? path : '/' + path}`
+        return `${resolve('/')}${path.startsWith('/') ? path.slice(1) : path}`
     }
 
-    let menuItems = $state<menuItem[]>([])
+    const { menuClicked } = $props()
 
-    $effect(() => {
-        menuItems = [
+    const activeTitle = $derived(page.data.title)
+
+    const menuItems = $derived<menuItem[]>(
+        [
             {
                 title: 'Connection',
                 icon: WiFi,
@@ -79,7 +81,7 @@
                         title: 'Camera',
                         icon: Camera,
                         href: withBase('/peripherals/camera'),
-                        feature: $features.camera
+                        feature: true
                     },
                     {
                         title: 'Servo',
@@ -91,9 +93,9 @@
                         title: 'IMU',
                         icon: Rotate3d,
                         href: withBase('/peripherals/imu'),
-                        feature: $features.imu || $features.mag || $features.bmp
+                        feature: true
                     }
-                ]
+                ].map(sub => ({ ...sub, active: sub.title === activeTitle }))
             },
             {
                 title: 'WiFi',
@@ -118,7 +120,7 @@
                         href: withBase('/wifi/mdns'),
                         feature: true
                     }
-                ]
+                ].map(sub => ({ ...sub, active: sub.title === activeTitle }))
             },
             {
                 title: 'System',
@@ -147,36 +149,20 @@
                         title: 'Firmware Update',
                         icon: Update,
                         href: withBase('/system/update'),
-                        feature:
+                        feature: !!(
                             $features.ota ||
                             $features.upload_firmware ||
                             $features.download_firmware
+                        )
                     }
-                ]
+                ].map(sub => ({ ...sub, active: sub.title === activeTitle }))
             }
-        ] as menuItem[]
-    })
+        ].map(item => ({ ...item, active: item.title === activeTitle }))
+    )
 
-    const { menuClicked } = $props()
-
-    function setActiveMenuItem(targetTitle: string) {
-        menuItems.forEach(item => {
-            item.active = item.title === targetTitle
-            item.submenu?.forEach(subItem => {
-                subItem.active = subItem.title === targetTitle
-            })
-        })
-        menuItems = menuItems
+    const updateMenu = () => {
         menuClicked()
     }
-
-    $effect(() => {
-        setActiveMenuItem(page.data.title)
-    })
-
-    const updateMenu = (event: CustomEvent) => {
-        setActiveMenuItem(event.details)
-    }
 </script>
 
 <div class="flex h-full w-80 flex-col p-4 bg-base-200 text-base-content">

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

@@ -1,10 +1,10 @@
 <script lang="ts">
     import MenuList from './MenuList.svelte'
-    import type { ComponentType } from 'svelte'
+    import type { Component } from 'svelte'
 
     type MenuItem = {
         title: string
-        icon: ComponentType
+        icon: Component
         href?: string
         feature: boolean
         active?: boolean
@@ -38,7 +38,7 @@
                         </div>
                     </details>
                 {:else}
-                    <a
+                    <!-- eslint-disable-next-line svelte/no-navigation-without-resolve --><a
                         href={menuItem.href}
                         class="font-bold"
                         class:bg-base-100={menuItem.active}

app/src/lib/components/widget/Selector.svelte

@@ -14,7 +14,7 @@
     {...rest}
     class="select select-bordered select-sm lg:select-md max-w-xs {rest.class || ''}"
 >
-    {#each options as option}
+    {#each options as option (option)}
         <option value={option}>{option}</option>
     {/each}
 </select>