From 5d69e9614f9e0a603c46209c1cee880d463298cf Mon Sep 17 00:00:00 2001
From: Bryan Van Deusen <bryan.vandeusen@fabledsword.com>
Date: Sat, 2 May 2026 23:24:20 -0400
Subject: [PATCH] fix(web): TrackMenuItem icon prop accepts Lucide
 class-components
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

svelte-check on the new dev-push CI surfaced 11 type errors. Cause:
TrackMenuItem typed `icon` as Svelte 5's runes-mode `Component<...>`,
but Lucide-svelte ships class-based components whose type is
`ComponentType<SvelteComponent<...>>`. Switch the prop type to match
Lucide's actual export shape.

Also drop the redundant role="separator" on TrackMenuDivider — <hr>
already implies role=separator (svelte-check warning).

The remaining a11y warnings (tabindex on role=menu/dialog elements,
key-handler-with-click) are pre-existing in FlagPopover and surface
on the new dev-push run because svelte-check now sees them. They're
warnings not errors, so they don't block CI; address as a follow-up.
---
 web/src/lib/components/TrackMenuDivider.svelte |  2 +-
 web/src/lib/components/TrackMenuItem.svelte    | 13 ++++++++++---
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/web/src/lib/components/TrackMenuDivider.svelte b/web/src/lib/components/TrackMenuDivider.svelte
index 6c4d416e..ef7868db 100644
--- a/web/src/lib/components/TrackMenuDivider.svelte
+++ b/web/src/lib/components/TrackMenuDivider.svelte
@@ -1 +1 @@
-<hr class="my-1 border-border" role="separator" />
+<hr class="my-1 border-border" />
diff --git a/web/src/lib/components/TrackMenuItem.svelte b/web/src/lib/components/TrackMenuItem.svelte
index d7c2377e..638fe2c2 100644
--- a/web/src/lib/components/TrackMenuItem.svelte
+++ b/web/src/lib/components/TrackMenuItem.svelte
@@ -1,5 +1,12 @@
 <script lang="ts">
-  import type { Component } from 'svelte';
+  import type { ComponentType, SvelteComponent } from 'svelte';
+
+  // Lucide-svelte ships class-based components (typeof ListPlus = ComponentType<...>),
+  // not runes-mode function components (Svelte 5's Component<...> type). Use
+  // ComponentType<SvelteComponent<...>> so any Lucide icon assigns cleanly.
+  type IconProp = ComponentType<
+    SvelteComponent<{ size?: number; strokeWidth?: number; class?: string }>
+  >;
 
   let {
     icon,
@@ -9,8 +16,8 @@
     danger = false,
     title,
   }: {
-    /** Lucide icon component (or any Svelte component matching the Lucide signature). */
-    icon: Component<{ size?: number; strokeWidth?: number; class?: string }>;
+    /** Lucide icon component (or any Svelte class-component matching the Lucide signature). */
+    icon: IconProp;
     label: string;
     onclick?: () => void;
     disabled?: boolean;