chore: Svelte 5 migration & lint & type fixes (#24)

* fix formatting

* apply svelte-5 migration script

* use derived.by

* format again

* fix lint errors

* fix check errors

* fix unnecessary use of dismissedVersion

* add frontend CI

* set working dir to frontend

* fix working dir?

* and fix script names

* revert debug change

* add concurrency block & adjust pnpm cache-dependency-path
This commit is contained in:
Arno
2026-04-06 13:45:43 +02:00
committed by GitHub
parent de3cf7531f
commit a3e0b2f65a
209 changed files with 5152 additions and 2924 deletions
+56 -38
View File
@@ -17,7 +17,10 @@
import { eqStore } from '$lib/stores/eq.svelte';
import Player from '$lib/components/Player.svelte';
import CacheSyncIndicator from '$lib/components/CacheSyncIndicator.svelte';
import AddToPlaylistModal, { registerPlaylistModal, unregisterPlaylistModal } from '$lib/components/AddToPlaylistModal.svelte';
import AddToPlaylistModal, {
registerPlaylistModal,
unregisterPlaylistModal
} from '$lib/components/AddToPlaylistModal.svelte';
import { syncStatus } from '$lib/stores/syncStatus.svelte';
import YouTubeIcon from '$lib/components/YouTubeIcon.svelte';
import NavidromeIcon from '$lib/components/NavidromeIcon.svelte';
@@ -32,7 +35,21 @@
import { requestCountStore } from '$lib/stores/requestCountStore.svelte';
import { createNavigationProgressController } from '$lib/utils/navigationProgress';
import { fromStore } from 'svelte/store';
import { Settings, Search, House, Compass, Menu, Headphones, Download, PanelLeft, TriangleAlert, Info, X, UserRound, Check, ListMusic } from 'lucide-svelte';
import {
Settings,
Search,
House,
Compass,
Menu,
Headphones,
Download,
PanelLeft,
TriangleAlert,
Info,
X,
UserRound,
ListMusic
} from 'lucide-svelte';
import type { Snippet } from 'svelte';
let { children }: { children: Snippet } = $props();
@@ -73,8 +90,6 @@
libraryStore.refreshIfStale(10_000);
});
let cleanupResumeListeners: (() => void) | null = null;
onMount(() => {
@@ -180,7 +195,9 @@
} else {
playerStore.resumeSession();
}
} catch {}
} catch {
// Ignore errors
}
}
function handleSearch() {
@@ -219,7 +236,7 @@
<div data-theme="musicseerr">
{#if showNavigationProgress}
<div class="fixed top-0 left-0 right-0 z-[120] pointer-events-none">
<div class="fixed top-0 left-0 right-0 z-120 pointer-events-none">
<progress class="progress progress-primary w-full h-1"></progress>
</div>
{/if}
@@ -236,20 +253,20 @@
<img src="/logo_wide.png" alt="Musicseerr" class="h-8" />
</a>
</div>
<div class="navbar-center grow px-4 justify-center">
<div class="navbar-center grow px-4 justify-center">
<div class="w-full max-w-2xl">
<SearchSuggestions
bind:query
onSearch={handleSearch}
onSelect={handleSuggestionSelect}
id="navbar-suggest"
/>
</div>
<SearchSuggestions
bind:query
onSearch={handleSearch}
onSelect={handleSuggestionSelect}
id="navbar-suggest"
/>
</div>
</div>
<div class="navbar-end w-auto pr-2">
<a href="/profile" class="btn btn-ghost btn-circle btn-md" aria-label="Profile">
<UserRound class="h-6 w-6" />
</a>
<a href="/profile" class="btn btn-ghost btn-circle btn-md" aria-label="Profile">
<UserRound class="h-6 w-6" />
</a>
</div>
</div>
@@ -265,18 +282,18 @@
>
<ul class="menu w-full grow p-2 [&_li>*]:py-3">
<li>
<button
onclick={() =>
(document.getElementById('search_modal') as HTMLDialogElement)?.showModal()}
class="is-drawer-close:tooltip is-drawer-close:tooltip-right"
data-tip="Search"
>
<Search class="h-6 w-6" />
<span class="is-drawer-close:hidden">Search</span>
</button>
</li>
<button
onclick={() =>
(document.getElementById('search_modal') as HTMLDialogElement)?.showModal()}
class="is-drawer-close:tooltip is-drawer-close:tooltip-right"
data-tip="Search"
>
<Search class="h-6 w-6" />
<span class="is-drawer-close:hidden">Search</span>
</button>
</li>
<div class="divider my-0"></div>
<div class="divider my-0"></div>
<li>
<a
@@ -310,7 +327,10 @@
<div class="relative">
<Menu class="h-6 w-6" />
{#if syncStatus.isActive}
<span class="absolute -top-1 -right-1 badge badge-primary badge-xs w-2.5 h-2.5 p-0 animate-pulse" aria-label="Library sync in progress"></span>
<span
class="absolute -top-1 -right-1 badge badge-primary badge-xs w-2.5 h-2.5 p-0 animate-pulse"
aria-label="Library sync in progress"
></span>
{/if}
</div>
<span class="is-drawer-close:hidden">Library</span>
@@ -427,11 +447,7 @@
</ul>
<div class="w-full p-2 flex flex-col gap-1" class:pb-24={playerStore.isPlayerVisible}>
<div class="is-drawer-close:tooltip is-drawer-close:tooltip-right" data-tip="Settings">
<a
href="/settings"
class="btn btn-ghost btn-circle"
aria-label="Settings"
>
<a href="/settings" class="btn btn-ghost btn-circle" aria-label="Settings">
<Settings class="h-6 w-6" />
</a>
</div>
@@ -498,7 +514,7 @@
{#if $errorModal.details}
<div class="mt-4 rounded-box bg-base-300/60 border border-base-300 p-4">
<div class="flex gap-3 items-start">
<Info class="h-5 w-5 text-info flex-shrink-0 mt-0.5" />
<Info class="h-5 w-5 text-info shrink-0 mt-0.5" />
<p class="text-sm text-base-content/80 leading-relaxed text-left">
{$errorModal.details}
</p>
@@ -512,6 +528,8 @@
</button>
</div>
</div>
<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
<!-- svelte-ignore a11y_click_events_have_key_events -->
<form method="dialog" class="modal-backdrop" onclick={() => errorModal.hide()}>
<button>close</button>
</form>
@@ -531,11 +549,11 @@
: 'alert-info'} shadow-lg px-4 py-2 min-w-64 max-w-md"
>
{#if playbackToast.type === 'error'}
<X class="h-5 w-5 flex-shrink-0" />
<X class="h-5 w-5 shrink-0" />
{:else if playbackToast.type === 'warning'}
<TriangleAlert class="h-5 w-5 flex-shrink-0" />
<TriangleAlert class="h-5 w-5 shrink-0" />
{:else}
<Info class="h-5 w-5 flex-shrink-0" />
<Info class="h-5 w-5 shrink-0" />
{/if}
<span class="text-sm">{playbackToast.message}</span>
<button