diff --git a/web-player/src/lib/components/music/library/LibraryTracksSection.svelte b/web-player/src/lib/components/music/library/LibraryTracksSection.svelte index 71cc45b..93ba321 100644 --- a/web-player/src/lib/components/music/library/LibraryTracksSection.svelte +++ b/web-player/src/lib/components/music/library/LibraryTracksSection.svelte @@ -57,6 +57,8 @@ (track) => track.id ); + untrack(() => list.reset(tracks)); + let search = $state(''); let selectedIds = $state([]); let pendingDelete = $state([]); diff --git a/web-player/src/lib/components/ui/primitives/Tabs.svelte b/web-player/src/lib/components/ui/primitives/Tabs.svelte index 3248908..18e0ec1 100644 --- a/web-player/src/lib/components/ui/primitives/Tabs.svelte +++ b/web-player/src/lib/components/ui/primitives/Tabs.svelte @@ -21,16 +21,29 @@ const activeHref = $derived(tabs.find((tab) => tab.active)?.href); - $effect(() => { + let nav = $state(); + + function measure() { const link = activeHref ? links[activeHref] : undefined; - if (!link) return; + if (!link || link.offsetWidth === 0) return; indicator = { x: link.offsetLeft, width: link.offsetWidth }; measured = true; if (!animated) requestAnimationFrame(() => (animated = true)); + } + + $effect(measure); + + $effect(() => { + if (!nav) return; + const observer = new ResizeObserver(() => measure()); + observer.observe(nav); + for (const link of Object.values(links)) if (link) observer.observe(link); + return () => observer.disconnect(); });