From d38e553d9f7985b77c806808ac3ceeedb8d4c5dc Mon Sep 17 00:00:00 2001
From: Kasper <kasperkh.kh@gmail.com>
Date: Thu, 5 Mar 2026 14:03:18 +0100
Subject: [PATCH] fmt

---
 mobile/src/routes/+layout.svelte |   4 +-
 mobile/src/routes/+layout.ts     |   2 +-
 mobile/src/routes/+page.svelte   | 142 +++---
 mobile/src/routes/Library.svelte | 810 +++++++++++++++++--------------
 4 files changed, 527 insertions(+), 431 deletions(-)

diff --git a/mobile/src/routes/+layout.svelte b/mobile/src/routes/+layout.svelte
index f16e2ae..f89ec5a 100644
--- a/mobile/src/routes/+layout.svelte
+++ b/mobile/src/routes/+layout.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-	import './layout.css';
+	import './layout.css'
 
-	const { children } = $props();
+	const { children } = $props()
 </script>
 
 {@render children()}
diff --git a/mobile/src/routes/+layout.ts b/mobile/src/routes/+layout.ts
index 9d24899..2696395 100644
--- a/mobile/src/routes/+layout.ts
+++ b/mobile/src/routes/+layout.ts
@@ -2,4 +2,4 @@
 // so we use adapter-static with a fallback to index.html to put the site in SPA mode
 // See: https://svelte.dev/docs/kit/single-page-apps
 // See: https://v2.tauri.app/start/frontend/sveltekit/ for more info
-export const ssr = false;
+export const ssr = false
diff --git a/mobile/src/routes/+page.svelte b/mobile/src/routes/+page.svelte
index b4f7a94..79f1fc2 100644
--- a/mobile/src/routes/+page.svelte
+++ b/mobile/src/routes/+page.svelte
@@ -1,82 +1,86 @@
 <script lang="ts">
-  import commands from '$lib/commands'
-  import { open } from '@tauri-apps/plugin-dialog';
-  import type { LibraryTauri } from '../../bindings'
-  import { readTextFile } from '@tauri-apps/plugin-fs'
+	import commands from '$lib/commands'
+	import { open } from '@tauri-apps/plugin-dialog'
+	import type { LibraryTauri } from '../../bindings'
+	import { readTextFile } from '@tauri-apps/plugin-fs'
 	import Library from './Library.svelte'
 	import { Store } from '@tauri-apps/plugin-store'
 
+	let loading = $state(false)
+	let error = $state('')
 
-  let loading = $state(false);
-  let error = $state('');
+	const store = await Store.load('settings.json')
+	let library = $state<LibraryTauri | null>(null)
 
-  const store = await Store.load('settings.json');
-  let library = $state<LibraryTauri | null>(null);
+	const saved_library_path = await store.get('library_path')
+	if (typeof saved_library_path === 'string') {
+		load_library(saved_library_path)
+	}
 
-  const saved_library_path = await store.get('library_path')
-  if (typeof saved_library_path === 'string') {
-	  load_library(saved_library_path)
-  }
-
-  async function open_library() {
-    const path = await open({
-      filters: [{ name: 'JSON', extensions: ['json'] }],
-    });
-    if (path) {
-	    load_library(path)
-    }
-  }
-  console.log(await store.entries())
-  async function load_library(path: string) {
-    loading = true;
-    library = null
-    error = '';
-    try {
-      const contents = await readTextFile(path);
-      const result = await commands.loadLibrary(contents);
-      if (result.status === 'ok') {
-        library = result.data;
-        store.set('library_path', path)
-        store.save()
-      } else {
-        error = result.error;
-      }
-    } catch (e) {
-      error = e instanceof Error ? e.message : 'Failed to load library';
-    } finally {
-      loading = false;
-    }
-  }
+	async function open_library() {
+		const path = await open({
+			filters: [{ name: 'JSON', extensions: ['json'] }],
+		})
+		if (path) {
+			load_library(path)
+		}
+	}
+	console.log(await store.entries())
+	async function load_library(path: string) {
+		loading = true
+		library = null
+		error = ''
+		try {
+			const contents = await readTextFile(path)
+			const result = await commands.loadLibrary(contents)
+			if (result.status === 'ok') {
+				library = result.data
+				store.set('library_path', path)
+				store.save()
+			} else {
+				error = result.error
+			}
+		} catch (e) {
+			error = e instanceof Error ? e.message : 'Failed to load library'
+		} finally {
+			loading = false
+		}
+	}
 </script>
 
-<div class="flex flex-col h-screen bg-white dark:bg-neutral-950 text-neutral-800 dark:text-neutral-200 text-sm overflow-hidden scheme-light-dark">
-  {#if error}
-    <div class="px-4 py-2.5 bg-red-950 border-b border-red-900 text-red-400 text-xs shrink-0">⚠ {error}</div>
-  {/if}
-
-		{#snippet open_button()}
-	    <button
-	      type="button"
-	      onclick={open_library}
-	      disabled={loading}
-	      class="shrink-0 px-3 py-1.5 bg-neutral-900 text-neutral-100 dark:bg-neutral-100 dark:text-neutral-900 rounded-lg font-semibold text-xs hover:bg-neutral-700 dark:hover:bg-white disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
-	    >
-	      {loading ? 'Loading…' : 'Open'}
-	    </button>
-		{/snippet}
+<div
+	class="flex h-screen flex-col overflow-hidden bg-white text-sm text-neutral-800 scheme-light-dark dark:bg-neutral-950 dark:text-neutral-200"
+>
+	{#if error}
+		<div class="shrink-0 border-b border-red-900 bg-red-950 px-4 py-2.5 text-xs text-red-400">
+			⚠ {error}
+		</div>
+	{/if}
 
+	{#snippet open_button()}
+		<button
+			type="button"
+			onclick={open_library}
+			disabled={loading}
+			class="shrink-0 rounded-lg bg-neutral-900 px-3 py-1.5 text-xs font-semibold text-neutral-100 transition-colors hover:bg-neutral-700 disabled:cursor-not-allowed disabled:opacity-40 dark:bg-neutral-100 dark:text-neutral-900 dark:hover:bg-white"
+		>
+			{loading ? 'Loading…' : 'Open'}
+		</button>
+	{/snippet}
 
-  {#if library}
-	  <Library {library} {open_button} />
-  {:else}
-    <div class="flex flex-col items-center justify-center flex-1 gap-4 text-neutral-400 dark:text-neutral-700 px-8 text-center">
-      <span class="text-5xl">♪</span>
-      <div>
-        <p class="font-medium text-neutral-500 dark:text-neutral-500">No library loaded</p>
-        <div class="mt-4">
-	        {@render open_button()}
-        </div>
-      </div>
-    </div>
+	{#if library}
+		<Library {library} {open_button} />
+	{:else}
+		<div
+			class="flex flex-1 flex-col items-center justify-center gap-4 px-8 text-center text-neutral-400 dark:text-neutral-700"
+		>
+			<span class="text-5xl">♪</span>
+			<div>
+				<p class="font-medium text-neutral-500 dark:text-neutral-500">No library loaded</p>
+				<div class="mt-4">
+					{@render open_button()}
+				</div>
+			</div>
+		</div>
 	{/if}
 </div>
diff --git a/mobile/src/routes/Library.svelte b/mobile/src/routes/Library.svelte
index 41924b8..71c1386 100644
--- a/mobile/src/routes/Library.svelte
+++ b/mobile/src/routes/Library.svelte
@@ -1,369 +1,461 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte'
-  import { goto } from '$app/navigation'
-  import { page } from '$app/state'
-  import type { Track, TrackList, Playlist, Folder, Special, LibraryTauri } from '../../bindings'
+	import { goto } from '$app/navigation'
+	import { page } from '$app/state'
+	import type { Track, TrackList, Playlist, Folder, Special, LibraryTauri } from '../../bindings'
 	import { resolve } from '$app/paths'
 
-  type sort_key_type = 'name' | 'artist' | 'dateAdded' | 'playCount';
-  type sort_dir_type = 'asc' | 'desc';
-  type active_filter_type = { kind: 'all' } | { kind: 'liked' } | { kind: 'genre'; value: string };
-  type view_type =
-    | { kind: 'browser'; folder_id: string }
-    | { kind: 'tracks'; playlist_id: string };
-
-  const {
-  	library,
-  	open_button,
-  } = $props<{
-  	library: LibraryTauri | null,
-		open_button: Snippet<[]>,
-	}>();
-  let error = $state('');
-  let search_query = $state('');
-  let sort_key = $state<sort_key_type>('name');
-  let sort_dir = $state<sort_dir_type>('asc');
-  let active_filter = $state<active_filter_type>({ kind: 'all' });
-
-  // ── View derived from URL search params ────────────────────────────────────
-  const view = $derived<view_type>(
-    page.url.searchParams.get('view') === 'tracks'
-      ? { kind: 'tracks', playlist_id: page.url.searchParams.get('id') ?? 'root' }
-      : { kind: 'browser', folder_id: page.url.searchParams.get('id') ?? 'root' }
-  );
-
-  // ── Helpers ────────────────────────────────────────────────────────────────
-
-  function get_tracklist(id: string): TrackList | null {
-    return library?.track_lists?.[id] ?? null;
-  }
-
-  function get_special(id: string): (Special & { type: 'special' }) | null {
-    const tl = get_tracklist(id);
-    return tl?.type === 'special' ? tl : null;
-  }
-
-  function get_folder(id: string): (Folder & { type: 'folder' }) | null {
-    const tl = get_tracklist(id);
-    return tl?.type === 'folder' ? tl : null;
-  }
-
-  function get_playlist(id: string): (Playlist & { type: 'playlist' }) | null {
-    const tl = get_tracklist(id);
-    return tl?.type === 'playlist' ? tl : null;
-  }
-
-  function get_children(folder_id: string): string[] {
-    const special = get_special(folder_id);
-    if (special) return special.children;
-    return get_folder(folder_id)?.children ?? [];
-  }
-
-  function node_name(id: string): string {
-    const tl = get_tracklist(id);
-    if (!tl) return 'Unknown';
-    if (tl.type === 'special') return 'Library';
-    return tl.name;
-  }
-
-  function count_tracks_in(id: string): number {
-    const tl = get_tracklist(id);
-    if (!tl) return 0;
-    if (tl.type === 'playlist') return tl.tracks.length;
-    const children = tl.type === 'folder' ? tl.children : tl.type === 'special' ? tl.children : [];
-    return children.reduce((sum, child_id) => sum + count_tracks_in(child_id), 0);
-  }
-
-  // ── Navigation ─────────────────────────────────────────────────────────────
-
-  function open_folder(id: string) {
-    // eslint-disable-next-line svelte/no-navigation-without-resolve
-    goto(resolve('/') + `?view=browser&id=${id}`);
-  }
-
-  function open_playlist(id: string) {
-    search_query = '';
-    active_filter = { kind: 'all' };
-    // eslint-disable-next-line svelte/no-navigation-without-resolve
-    goto(resolve('/') + `?view=tracks&id=${id}`);
-  }
-
-  // ── Derived / async data ──────────────────────────────────────────────────
-
-  const current_children = $derived(
-    view.kind === 'browser' ? get_children(view.folder_id) : []
-  );
-
-  // Playlist.tracks is typed as number[] in the bindings, but serialize_playlist_ids
-  // in Rust serializes them back to track ID strings over the wire.
-  const playlist_tracks = $derived.by(() => {
-    if (view.kind !== 'tracks') return [];
-    const playlist = get_playlist(view.playlist_id);
-    if (!playlist) {
-      console.error('[Library] no playlist found for id', view.playlist_id);
-      return [];
-    }
-    const track_ids = playlist.tracks as unknown as string[];
-    const resolved = track_ids.map(track_id => {
-      const track = library?.tracks?.[track_id];
-      if (track === undefined) console.error('[Library] no track for track_id', track_id);
-      return track;
-    }).filter((t): t is Track => t !== undefined);
-    return resolved;
-  });
-
-  const genres = $derived(
-    [...new Set(playlist_tracks.map(t => t.genre).filter((g): g is string => g !== null && g !== undefined))].sort()
-  );
-
-  const filtered_tracks = $derived(
-    playlist_tracks
-      .filter(t => {
-        if (active_filter.kind === 'liked') return t.liked === true;
-        if (active_filter.kind === 'genre') return t.genre === active_filter.value;
-        return true;
-      })
-      .filter(t => {
-        if (!search_query) return true;
-        const q = search_query.toLowerCase();
-        return (
-          t.name.toLowerCase().includes(q) ||
-          (t.artist?.toLowerCase().includes(q) ?? false) ||
-          (t.albumName?.toLowerCase().includes(q) ?? false)
-        );
-      })
-      .sort((a, b) => {
-        let av: string | number;
-        let bv: string | number;
-        if (sort_key === 'name')           { av = a.name;           bv = b.name; }
-        else if (sort_key === 'artist')    { av = a.artist ?? '';   bv = b.artist ?? ''; }
-        else if (sort_key === 'dateAdded') { av = a.dateAdded;      bv = b.dateAdded; }
-        else                               { av = a.playCount ?? 0; bv = b.playCount ?? 0; }
-        if (av < bv) return sort_dir === 'asc' ? -1 : 1;
-        if (av > bv) return sort_dir === 'asc' ? 1 : -1;
-        return 0;
-      })
-  );
-
-  // ── Formatting ─────────────────────────────────────────────────────────────
-
-  function toggle_sort(key: sort_key_type) {
-    if (sort_key === key) sort_dir = sort_dir === 'asc' ? 'desc' : 'asc';
-    else { sort_key = key; sort_dir = 'asc'; }
-  }
-
-  function sort_indicator(key: sort_key_type): string {
-    if (sort_key !== key) return '';
-    return sort_dir === 'asc' ? ' ↑' : ' ↓';
-  }
-
-  function format_duration(seconds: number): string {
-    const s = Math.floor(seconds);
-    return `${Math.floor(s / 60)}:${String(s % 60).padStart(2, '0')}`;
-  }
+	type sort_key_type = 'name' | 'artist' | 'dateAdded' | 'playCount'
+	type sort_dir_type = 'asc' | 'desc'
+	type active_filter_type = { kind: 'all' } | { kind: 'liked' } | { kind: 'genre'; value: string }
+	type view_type = { kind: 'browser'; folder_id: string } | { kind: 'tracks'; playlist_id: string }
+
+	const { library, open_button } = $props<{
+		library: LibraryTauri | null
+		open_button: Snippet<[]>
+	}>()
+	let error = $state('')
+	let search_query = $state('')
+	let sort_key = $state<sort_key_type>('name')
+	let sort_dir = $state<sort_dir_type>('asc')
+	let active_filter = $state<active_filter_type>({ kind: 'all' })
+
+	// ── View derived from URL search params ────────────────────────────────────
+	const view = $derived<view_type>(
+		page.url.searchParams.get('view') === 'tracks'
+			? { kind: 'tracks', playlist_id: page.url.searchParams.get('id') ?? 'root' }
+			: { kind: 'browser', folder_id: page.url.searchParams.get('id') ?? 'root' },
+	)
+
+	// ── Helpers ────────────────────────────────────────────────────────────────
+
+	function get_tracklist(id: string): TrackList | null {
+		return library?.track_lists?.[id] ?? null
+	}
+
+	function get_special(id: string): (Special & { type: 'special' }) | null {
+		const tl = get_tracklist(id)
+		return tl?.type === 'special' ? tl : null
+	}
+
+	function get_folder(id: string): (Folder & { type: 'folder' }) | null {
+		const tl = get_tracklist(id)
+		return tl?.type === 'folder' ? tl : null
+	}
+
+	function get_playlist(id: string): (Playlist & { type: 'playlist' }) | null {
+		const tl = get_tracklist(id)
+		return tl?.type === 'playlist' ? tl : null
+	}
+
+	function get_children(folder_id: string): string[] {
+		const special = get_special(folder_id)
+		if (special) return special.children
+		return get_folder(folder_id)?.children ?? []
+	}
+
+	function node_name(id: string): string {
+		const tl = get_tracklist(id)
+		if (!tl) return 'Unknown'
+		if (tl.type === 'special') return 'Library'
+		return tl.name
+	}
+
+	function count_tracks_in(id: string): number {
+		const tl = get_tracklist(id)
+		if (!tl) return 0
+		if (tl.type === 'playlist') return tl.tracks.length
+		const children = tl.type === 'folder' ? tl.children : tl.type === 'special' ? tl.children : []
+		return children.reduce((sum, child_id) => sum + count_tracks_in(child_id), 0)
+	}
+
+	// ── Navigation ─────────────────────────────────────────────────────────────
+
+	function open_folder(id: string) {
+		// eslint-disable-next-line svelte/no-navigation-without-resolve
+		goto(resolve('/') + `?view=browser&id=${id}`)
+	}
+
+	function open_playlist(id: string) {
+		search_query = ''
+		active_filter = { kind: 'all' }
+		// eslint-disable-next-line svelte/no-navigation-without-resolve
+		goto(resolve('/') + `?view=tracks&id=${id}`)
+	}
+
+	// ── Derived / async data ──────────────────────────────────────────────────
+
+	const current_children = $derived(view.kind === 'browser' ? get_children(view.folder_id) : [])
+
+	// Playlist.tracks is typed as number[] in the bindings, but serialize_playlist_ids
+	// in Rust serializes them back to track ID strings over the wire.
+	const playlist_tracks = $derived.by(() => {
+		if (view.kind !== 'tracks') return []
+		const playlist = get_playlist(view.playlist_id)
+		if (!playlist) {
+			console.error('[Library] no playlist found for id', view.playlist_id)
+			return []
+		}
+		const track_ids = playlist.tracks as unknown as string[]
+		const resolved = track_ids
+			.map((track_id) => {
+				const track = library?.tracks?.[track_id]
+				if (track === undefined) console.error('[Library] no track for track_id', track_id)
+				return track
+			})
+			.filter((t): t is Track => t !== undefined)
+		return resolved
+	})
+
+	const genres = $derived(
+		[
+			...new Set(
+				playlist_tracks
+					.map((t) => t.genre)
+					.filter((g): g is string => g !== null && g !== undefined),
+			),
+		].sort(),
+	)
+
+	const filtered_tracks = $derived(
+		playlist_tracks
+			.filter((t) => {
+				if (active_filter.kind === 'liked') return t.liked === true
+				if (active_filter.kind === 'genre') return t.genre === active_filter.value
+				return true
+			})
+			.filter((t) => {
+				if (!search_query) return true
+				const q = search_query.toLowerCase()
+				return (
+					t.name.toLowerCase().includes(q) ||
+					(t.artist?.toLowerCase().includes(q) ?? false) ||
+					(t.albumName?.toLowerCase().includes(q) ?? false)
+				)
+			})
+			.sort((a, b) => {
+				let av: string | number
+				let bv: string | number
+				if (sort_key === 'name') {
+					av = a.name
+					bv = b.name
+				} else if (sort_key === 'artist') {
+					av = a.artist ?? ''
+					bv = b.artist ?? ''
+				} else if (sort_key === 'dateAdded') {
+					av = a.dateAdded
+					bv = b.dateAdded
+				} else {
+					av = a.playCount ?? 0
+					bv = b.playCount ?? 0
+				}
+				if (av < bv) return sort_dir === 'asc' ? -1 : 1
+				if (av > bv) return sort_dir === 'asc' ? 1 : -1
+				return 0
+			}),
+	)
+
+	// ── Formatting ─────────────────────────────────────────────────────────────
+
+	function toggle_sort(key: sort_key_type) {
+		if (sort_key === key) sort_dir = sort_dir === 'asc' ? 'desc' : 'asc'
+		else {
+			sort_key = key
+			sort_dir = 'asc'
+		}
+	}
+
+	function sort_indicator(key: sort_key_type): string {
+		if (sort_key !== key) return ''
+		return sort_dir === 'asc' ? ' ↑' : ' ↓'
+	}
+
+	function format_duration(seconds: number): string {
+		const s = Math.floor(seconds)
+		return `${Math.floor(s / 60)}:${String(s % 60).padStart(2, '0')}`
+	}
 </script>
 
-<div class="flex flex-col h-screen bg-white dark:bg-neutral-950 text-neutral-800 dark:text-neutral-200 text-sm overflow-hidden">
-
-  <!-- Header -->
-  <header class="flex items-center gap-2 px-4 py-3 border-b border-neutral-200 dark:border-neutral-800 shrink-0">
-    {#if page.url.searchParams.has('id')}
-      <button
-        type="button"
-        onclick={() => history.back()}
-        class="shrink-0 flex items-center justify-center w-8 h-8 text-xl rounded-lg text-neutral-500 dark:text-neutral-400 hover:bg-neutral-100 dark:hover:bg-neutral-800 hover:text-neutral-900 dark:hover:text-neutral-100 transition-colors"
-        aria-label="Back"
-      >‹</button>
-    {/if}
-
-    <div class="flex-1 min-w-0">
-      {#if view.kind === 'browser'}
-        <p class="font-semibold text-neutral-900 dark:text-neutral-100 truncate leading-tight">{node_name(view.folder_id)}</p>
-      {:else if view.kind === 'tracks'}
-        <p class="font-semibold text-neutral-900 dark:text-neutral-100 truncate leading-tight">{node_name(view.playlist_id)}</p>
-      {/if}
-
-    </div>
-
-    {@render open_button()}
-  </header>
-
-  {#if error}
-    <div class="px-4 py-2.5 bg-red-50 dark:bg-red-950 border-b border-red-200 dark:border-red-900 text-red-600 dark:text-red-400 text-xs shrink-0">⚠ {error}</div>
-  {/if}
-
-  <!-- ── Browser view ───────────────────────────────────────────────────── -->
-  {#if view.kind === 'browser'}
-    <div class="flex-1 overflow-y-auto">
-      {#if current_children.length > 0}
-        <ul class="divide-y divide-neutral-200 dark:divide-neutral-900">
-          {#each current_children as child_id}
-            {@const tl = get_tracklist(child_id)}
-            {#if tl?.type === 'folder'}
-              <li>
-                <button
-                  type="button"
-                  onclick={() => open_folder(child_id)}
-                  class="w-full flex items-center gap-3 px-4 py-3.5 hover:bg-neutral-100/50 dark:hover:bg-neutral-800/50 active:bg-neutral-100 dark:active:bg-neutral-800 transition-colors text-left"
-                >
-                  <span class="shrink-0 w-7 text-center text-neutral-500 select-none">
-                  <svg
-										style="padding: 1px"
-										xmlns="http://www.w3.org/2000/svg"
-										height="22px"
-										viewBox="0 0 24 24"
-										width="22px"
-										fill="currentColor"
-										><path d="M0 0h24v24H0V0z" fill="none" /><path
-											d="M9.17 6l2 2H20v10H4V6h5.17M10 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z"
-										/></svg
-									>
-                  </span>
-                  <div class="flex-1 min-w-0">
-                    <p class="font-medium text-neutral-900 dark:text-neutral-100 truncate">{tl.name}</p>
-                    <p class="text-xs text-neutral-500 mt-0.5">
-                      {tl.children.length} {tl.children.length === 1 ? 'item' : 'items'} · {count_tracks_in(child_id)} tracks
-                    </p>
-                  </div>
-                  <span class="text-neutral-400 dark:text-neutral-700 text-lg select-none">›</span>
-                </button>
-              </li>
-            {:else if tl?.type === 'playlist'}
-              <li>
-                <button
-                  type="button"
-                  onclick={() => open_playlist(child_id)}
-                  class="w-full flex items-center gap-3 px-4 py-3.5 hover:bg-neutral-100/50 dark:hover:bg-neutral-800/50 active:bg-neutral-100 dark:active:bg-neutral-800 transition-colors text-left"
-                >
-                  <span class="shrink-0 w-7 text-center text-neutral-500 select-none">
-                 	<svg
-										style="transform: translateX(2px)"
-										xmlns="http://www.w3.org/2000/svg"
-										height="24px"
-										viewBox="0 0 24 24"
-										width="24px"
-										fill="currentColor"
-										><path
-											d="M5 10h10c.55 0 1 .45 1 1s-.45 1-1 1H5c-.55 0-1-.45-1-1s.45-1 1-1zm0-4h10c.55 0 1 .45 1 1s-.45 1-1 1H5c-.55 0-1-.45-1-1s.45-1 1-1zm0 8h6c.55 0 1 .45 1 1s-.45 1-1 1H5c-.55 0-1-.45-1-1s.45-1 1-1zm9 .88v4.23c0 .39.42.63.76.43l3.53-2.12c.32-.19.32-.66 0-.86l-3.53-2.12c-.34-.19-.76.05-.76.44z"
-										/></svg
-									>
-                  </span>
-                  <div class="flex-1 min-w-0">
-                    <p class="font-medium text-neutral-900 dark:text-neutral-100 truncate">{tl.name}</p>
-                    <p class="text-xs text-neutral-500 mt-0.5">
-                      {tl.tracks.length} {tl.tracks.length === 1 ? 'track' : 'tracks'}{tl.liked ? ' · ♥' : ''}
-                    </p>
-                  </div>
-                  <span class="text-neutral-400 dark:text-neutral-700 text-lg select-none">›</span>
-                </button>
-              </li>
-            {/if}
-          {/each}
-        </ul>
-      {:else}
-        <div class="flex items-center justify-center h-32 text-neutral-400 dark:text-neutral-700 text-xs">This folder is empty</div>
-      {/if}
-    </div>
-
-  <!-- ── Tracks view ────────────────────────────────────────────────────── -->
-  {:else if view.kind === 'tracks'}
-    <div class="shrink-0 border-b border-neutral-200 dark:border-neutral-800">
-      <div class="flex items-center gap-1.5 px-4 py-2 overflow-x-auto no-scrollbar">
-        <div class="relative shrink-0">
-          <span class="absolute left-2.5 top-1/2 -translate-y-1/2 text-neutral-500 pointer-events-none text-xs select-none">⌕</span>
-          <input
-            type="search"
-            placeholder="Search…"
-            bind:value={search_query}
-            class="pl-7 pr-3 py-1.5 w-32 bg-neutral-100 dark:bg-neutral-800 border border-neutral-300 dark:border-neutral-700 rounded-lg text-neutral-800 dark:text-neutral-200 text-xs placeholder-neutral-400 dark:placeholder-neutral-600 outline-none focus:border-neutral-400 dark:focus:border-neutral-500 transition-colors"
-          />
-        </div>
-        <div class="w-px h-4 bg-neutral-100 dark:bg-neutral-800 shrink-0 mx-0.5"></div>
-        <button type="button" onclick={() => toggle_sort('name')}
-          class="shrink-0 px-2.5 py-1 rounded text-xs border transition-colors {sort_key === 'name' ? 'bg-neutral-200 dark:bg-neutral-700 border-neutral-400 dark:border-neutral-600 text-neutral-900 dark:text-neutral-100' : 'border-neutral-300 dark:border-neutral-700 text-neutral-500 hover:text-neutral-600 dark:hover:text-neutral-300'}">
-          Name{sort_indicator('name')}
-        </button>
-        <button type="button" onclick={() => toggle_sort('artist')}
-          class="shrink-0 px-2.5 py-1 rounded text-xs border transition-colors {sort_key === 'artist' ? 'bg-neutral-200 dark:bg-neutral-700 border-neutral-400 dark:border-neutral-600 text-neutral-900 dark:text-neutral-100' : 'border-neutral-300 dark:border-neutral-700 text-neutral-500 hover:text-neutral-600 dark:hover:text-neutral-300'}">
-          Artist{sort_indicator('artist')}
-        </button>
-        <button type="button" onclick={() => toggle_sort('dateAdded')}
-          class="shrink-0 px-2.5 py-1 rounded text-xs border transition-colors {sort_key === 'dateAdded' ? 'bg-neutral-200 dark:bg-neutral-700 border-neutral-400 dark:border-neutral-600 text-neutral-900 dark:text-neutral-100' : 'border-neutral-300 dark:border-neutral-700 text-neutral-500 hover:text-neutral-600 dark:hover:text-neutral-300'}">
-          Date{sort_indicator('dateAdded')}
-        </button>
-        <button type="button" onclick={() => toggle_sort('playCount')}
-          class="shrink-0 px-2.5 py-1 rounded text-xs border transition-colors {sort_key === 'playCount' ? 'bg-neutral-200 dark:bg-neutral-700 border-neutral-400 dark:border-neutral-600 text-neutral-900 dark:text-neutral-100' : 'border-neutral-300 dark:border-neutral-700 text-neutral-500 hover:text-neutral-600 dark:hover:text-neutral-300'}">
-          Plays{sort_indicator('playCount')}
-        </button>
-        <span class="ml-auto shrink-0 text-xs text-neutral-400 dark:text-neutral-600 tabular-nums pl-1">
-          {filtered_tracks.length}/{playlist_tracks.length}
-        </span>
-      </div>
-
-      <div class="flex items-center gap-1.5 px-4 pb-2 overflow-x-auto no-scrollbar">
-        <button type="button" onclick={() => active_filter = { kind: 'all' }}
-          class="shrink-0 px-2.5 py-1 rounded-full text-xs border transition-colors {active_filter.kind === 'all' ? 'bg-neutral-200 border-neutral-200 text-neutral-900 font-semibold' : 'border-neutral-300 dark:border-neutral-700 text-neutral-500 hover:text-neutral-600 dark:hover:text-neutral-300'}">
-          All
-        </button>
-        <button type="button" onclick={() => active_filter = { kind: 'liked' }}
-          class="shrink-0 px-2.5 py-1 rounded-full text-xs border transition-colors {active_filter.kind === 'liked' ? 'bg-rose-100 dark:bg-rose-900 border-rose-300 dark:border-rose-700 text-rose-700 dark:text-rose-200 font-semibold' : 'border-neutral-300 dark:border-neutral-700 text-neutral-500 hover:text-neutral-600 dark:hover:text-neutral-300'}">
-          ♥ Liked
-        </button>
-        {#each genres as genre}
-          <button type="button" onclick={() => active_filter = { kind: 'genre', value: genre }}
-            class="shrink-0 px-2.5 py-1 rounded-full text-xs border transition-colors {active_filter.kind === 'genre' && active_filter.value === genre ? 'bg-neutral-200 dark:bg-neutral-700 border-neutral-400 dark:border-neutral-600 text-neutral-900 dark:text-neutral-100 font-semibold' : 'border-neutral-300 dark:border-neutral-700 text-neutral-500 hover:text-neutral-600 dark:hover:text-neutral-300'}">
-            {genre}
-          </button>
-        {/each}
-      </div>
-    </div>
-
-    <div class="flex-1 overflow-y-auto">
-      {#if filtered_tracks.length > 0}
-        <ul class="divide-y divide-neutral-200 dark:divide-neutral-900">
-          {#each filtered_tracks as track}
-            <li class="flex items-center gap-3 px-4 py-3 transition-colors">
-              <div class="flex-1 min-w-0">
-                <p class="font-medium text-neutral-900 dark:text-neutral-100 truncate">{track.name}</p>
-                <p class="text-xs text-neutral-500 truncate mt-0.5">
-                  {track.artist ?? 'Unknown Artist'}
-                  {#if track.albumName}
-                    <span class="text-neutral-400 dark:text-neutral-700"> · </span>{track.albumName}
-                  {/if}
-                </p>
-                <div class="flex items-center gap-2 mt-1">
-                  {#if track.genre}
-                    <span class="px-1.5 py-px text-xs rounded bg-neutral-100 dark:bg-neutral-800 text-neutral-500">{track.genre}</span>
-                  {/if}
-                  {#if track.year}
-                    <span class="text-xs text-neutral-400 dark:text-neutral-700">{track.year}</span>
-                  {/if}
-                </div>
-              </div>
-              <div class="shrink-0 flex flex-col items-end gap-1 text-xs text-neutral-400 dark:text-neutral-600 tabular-nums">
-                <span>{format_duration(track.duration)}</span>
-                {#if track.playCount}
-                  <span>{track.playCount} plays</span>
-                {/if}
-                {#if track.liked}
-                  <span class="text-rose-500">♥</span>
-                {/if}
-              </div>
-            </li>
-          {/each}
-        </ul>
-      {:else}
-        <div class="flex flex-col items-center justify-center h-full gap-3 text-neutral-400 dark:text-neutral-700 px-8 text-center">
-          <span class="text-4xl">⌕</span>
-          <p class="text-xs">No tracks match your search or filter</p>
-        </div>
-      {/if}
-    </div>
-  {/if}
-
+<div
+	class="flex h-screen flex-col overflow-hidden bg-white text-sm text-neutral-800 dark:bg-neutral-950 dark:text-neutral-200"
+>
+	<!-- Header -->
+	<header
+		class="flex shrink-0 items-center gap-2 border-b border-neutral-200 px-4 py-3 dark:border-neutral-800"
+	>
+		{#if page.url.searchParams.has('id')}
+			<button
+				type="button"
+				onclick={() => history.back()}
+				class="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg text-xl text-neutral-500 transition-colors hover:bg-neutral-100 hover:text-neutral-900 dark:text-neutral-400 dark:hover:bg-neutral-800 dark:hover:text-neutral-100"
+				aria-label="Back">‹</button
+			>
+		{/if}
+
+		<div class="min-w-0 flex-1">
+			{#if view.kind === 'browser'}
+				<p class="truncate leading-tight font-semibold text-neutral-900 dark:text-neutral-100">
+					{node_name(view.folder_id)}
+				</p>
+			{:else if view.kind === 'tracks'}
+				<p class="truncate leading-tight font-semibold text-neutral-900 dark:text-neutral-100">
+					{node_name(view.playlist_id)}
+				</p>
+			{/if}
+		</div>
+
+		{@render open_button()}
+	</header>
+
+	{#if error}
+		<div
+			class="shrink-0 border-b border-red-200 bg-red-50 px-4 py-2.5 text-xs text-red-600 dark:border-red-900 dark:bg-red-950 dark:text-red-400"
+		>
+			⚠ {error}
+		</div>
+	{/if}
+
+	<!-- ── Browser view ───────────────────────────────────────────────────── -->
+	{#if view.kind === 'browser'}
+		<div class="flex-1 overflow-y-auto">
+			{#if current_children.length > 0}
+				<ul class="divide-y divide-neutral-200 dark:divide-neutral-900">
+					{#each current_children as child_id}
+						{@const tl = get_tracklist(child_id)}
+						{#if tl?.type === 'folder'}
+							<li>
+								<button
+									type="button"
+									onclick={() => open_folder(child_id)}
+									class="flex w-full items-center gap-3 px-4 py-3.5 text-left transition-colors hover:bg-neutral-100/50 active:bg-neutral-100 dark:hover:bg-neutral-800/50 dark:active:bg-neutral-800"
+								>
+									<span class="w-7 shrink-0 text-center text-neutral-500 select-none">
+										<svg
+											style="padding: 1px"
+											xmlns="http://www.w3.org/2000/svg"
+											height="22px"
+											viewBox="0 0 24 24"
+											width="22px"
+											fill="currentColor"
+											><path d="M0 0h24v24H0V0z" fill="none" /><path
+												d="M9.17 6l2 2H20v10H4V6h5.17M10 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z"
+											/></svg
+										>
+									</span>
+									<div class="min-w-0 flex-1">
+										<p class="truncate font-medium text-neutral-900 dark:text-neutral-100">
+											{tl.name}
+										</p>
+										<p class="mt-0.5 text-xs text-neutral-500">
+											{tl.children.length}
+											{tl.children.length === 1 ? 'item' : 'items'} · {count_tracks_in(child_id)} tracks
+										</p>
+									</div>
+									<span class="text-lg text-neutral-400 select-none dark:text-neutral-700">›</span>
+								</button>
+							</li>
+						{:else if tl?.type === 'playlist'}
+							<li>
+								<button
+									type="button"
+									onclick={() => open_playlist(child_id)}
+									class="flex w-full items-center gap-3 px-4 py-3.5 text-left transition-colors hover:bg-neutral-100/50 active:bg-neutral-100 dark:hover:bg-neutral-800/50 dark:active:bg-neutral-800"
+								>
+									<span class="w-7 shrink-0 text-center text-neutral-500 select-none">
+										<svg
+											style="transform: translateX(2px)"
+											xmlns="http://www.w3.org/2000/svg"
+											height="24px"
+											viewBox="0 0 24 24"
+											width="24px"
+											fill="currentColor"
+											><path
+												d="M5 10h10c.55 0 1 .45 1 1s-.45 1-1 1H5c-.55 0-1-.45-1-1s.45-1 1-1zm0-4h10c.55 0 1 .45 1 1s-.45 1-1 1H5c-.55 0-1-.45-1-1s.45-1 1-1zm0 8h6c.55 0 1 .45 1 1s-.45 1-1 1H5c-.55 0-1-.45-1-1s.45-1 1-1zm9 .88v4.23c0 .39.42.63.76.43l3.53-2.12c.32-.19.32-.66 0-.86l-3.53-2.12c-.34-.19-.76.05-.76.44z"
+											/></svg
+										>
+									</span>
+									<div class="min-w-0 flex-1">
+										<p class="truncate font-medium text-neutral-900 dark:text-neutral-100">
+											{tl.name}
+										</p>
+										<p class="mt-0.5 text-xs text-neutral-500">
+											{tl.tracks.length}
+											{tl.tracks.length === 1 ? 'track' : 'tracks'}{tl.liked ? ' · ♥' : ''}
+										</p>
+									</div>
+									<span class="text-lg text-neutral-400 select-none dark:text-neutral-700">›</span>
+								</button>
+							</li>
+						{/if}
+					{/each}
+				</ul>
+			{:else}
+				<div
+					class="flex h-32 items-center justify-center text-xs text-neutral-400 dark:text-neutral-700"
+				>
+					This folder is empty
+				</div>
+			{/if}
+		</div>
+
+		<!-- ── Tracks view ────────────────────────────────────────────────────── -->
+	{:else if view.kind === 'tracks'}
+		<div class="shrink-0 border-b border-neutral-200 dark:border-neutral-800">
+			<div class="no-scrollbar flex items-center gap-1.5 overflow-x-auto px-4 py-2">
+				<div class="relative shrink-0">
+					<span
+						class="pointer-events-none absolute top-1/2 left-2.5 -translate-y-1/2 text-xs text-neutral-500 select-none"
+						>⌕</span
+					>
+					<input
+						type="search"
+						placeholder="Search…"
+						bind:value={search_query}
+						class="w-32 rounded-lg border border-neutral-300 bg-neutral-100 py-1.5 pr-3 pl-7 text-xs text-neutral-800 placeholder-neutral-400 transition-colors outline-none focus:border-neutral-400 dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-200 dark:placeholder-neutral-600 dark:focus:border-neutral-500"
+					/>
+				</div>
+				<div class="mx-0.5 h-4 w-px shrink-0 bg-neutral-100 dark:bg-neutral-800"></div>
+				<button
+					type="button"
+					onclick={() => toggle_sort('name')}
+					class="shrink-0 rounded border px-2.5 py-1 text-xs transition-colors {sort_key === 'name'
+						? 'border-neutral-400 bg-neutral-200 text-neutral-900 dark:border-neutral-600 dark:bg-neutral-700 dark:text-neutral-100'
+						: 'border-neutral-300 text-neutral-500 hover:text-neutral-600 dark:border-neutral-700 dark:hover:text-neutral-300'}"
+				>
+					Name{sort_indicator('name')}
+				</button>
+				<button
+					type="button"
+					onclick={() => toggle_sort('artist')}
+					class="shrink-0 rounded border px-2.5 py-1 text-xs transition-colors {sort_key ===
+					'artist'
+						? 'border-neutral-400 bg-neutral-200 text-neutral-900 dark:border-neutral-600 dark:bg-neutral-700 dark:text-neutral-100'
+						: 'border-neutral-300 text-neutral-500 hover:text-neutral-600 dark:border-neutral-700 dark:hover:text-neutral-300'}"
+				>
+					Artist{sort_indicator('artist')}
+				</button>
+				<button
+					type="button"
+					onclick={() => toggle_sort('dateAdded')}
+					class="shrink-0 rounded border px-2.5 py-1 text-xs transition-colors {sort_key ===
+					'dateAdded'
+						? 'border-neutral-400 bg-neutral-200 text-neutral-900 dark:border-neutral-600 dark:bg-neutral-700 dark:text-neutral-100'
+						: 'border-neutral-300 text-neutral-500 hover:text-neutral-600 dark:border-neutral-700 dark:hover:text-neutral-300'}"
+				>
+					Date{sort_indicator('dateAdded')}
+				</button>
+				<button
+					type="button"
+					onclick={() => toggle_sort('playCount')}
+					class="shrink-0 rounded border px-2.5 py-1 text-xs transition-colors {sort_key ===
+					'playCount'
+						? 'border-neutral-400 bg-neutral-200 text-neutral-900 dark:border-neutral-600 dark:bg-neutral-700 dark:text-neutral-100'
+						: 'border-neutral-300 text-neutral-500 hover:text-neutral-600 dark:border-neutral-700 dark:hover:text-neutral-300'}"
+				>
+					Plays{sort_indicator('playCount')}
+				</button>
+				<span
+					class="ml-auto shrink-0 pl-1 text-xs text-neutral-400 tabular-nums dark:text-neutral-600"
+				>
+					{filtered_tracks.length}/{playlist_tracks.length}
+				</span>
+			</div>
+
+			<div class="no-scrollbar flex items-center gap-1.5 overflow-x-auto px-4 pb-2">
+				<button
+					type="button"
+					onclick={() => (active_filter = { kind: 'all' })}
+					class="shrink-0 rounded-full border px-2.5 py-1 text-xs transition-colors {active_filter.kind ===
+					'all'
+						? 'border-neutral-200 bg-neutral-200 font-semibold text-neutral-900'
+						: 'border-neutral-300 text-neutral-500 hover:text-neutral-600 dark:border-neutral-700 dark:hover:text-neutral-300'}"
+				>
+					All
+				</button>
+				<button
+					type="button"
+					onclick={() => (active_filter = { kind: 'liked' })}
+					class="shrink-0 rounded-full border px-2.5 py-1 text-xs transition-colors {active_filter.kind ===
+					'liked'
+						? 'border-rose-300 bg-rose-100 font-semibold text-rose-700 dark:border-rose-700 dark:bg-rose-900 dark:text-rose-200'
+						: 'border-neutral-300 text-neutral-500 hover:text-neutral-600 dark:border-neutral-700 dark:hover:text-neutral-300'}"
+				>
+					♥ Liked
+				</button>
+				{#each genres as genre}
+					<button
+						type="button"
+						onclick={() => (active_filter = { kind: 'genre', value: genre })}
+						class="shrink-0 rounded-full border px-2.5 py-1 text-xs transition-colors {active_filter.kind ===
+							'genre' && active_filter.value === genre
+							? 'border-neutral-400 bg-neutral-200 font-semibold text-neutral-900 dark:border-neutral-600 dark:bg-neutral-700 dark:text-neutral-100'
+							: 'border-neutral-300 text-neutral-500 hover:text-neutral-600 dark:border-neutral-700 dark:hover:text-neutral-300'}"
+					>
+						{genre}
+					</button>
+				{/each}
+			</div>
+		</div>
+
+		<div class="flex-1 overflow-y-auto">
+			{#if filtered_tracks.length > 0}
+				<ul class="divide-y divide-neutral-200 dark:divide-neutral-900">
+					{#each filtered_tracks as track}
+						<li class="flex items-center gap-3 px-4 py-3 transition-colors">
+							<div class="min-w-0 flex-1">
+								<p class="truncate font-medium text-neutral-900 dark:text-neutral-100">
+									{track.name}
+								</p>
+								<p class="mt-0.5 truncate text-xs text-neutral-500">
+									{track.artist ?? 'Unknown Artist'}
+									{#if track.albumName}
+										<span class="text-neutral-400 dark:text-neutral-700"> · </span>{track.albumName}
+									{/if}
+								</p>
+								<div class="mt-1 flex items-center gap-2">
+									{#if track.genre}
+										<span
+											class="rounded bg-neutral-100 px-1.5 py-px text-xs text-neutral-500 dark:bg-neutral-800"
+											>{track.genre}</span
+										>
+									{/if}
+									{#if track.year}
+										<span class="text-xs text-neutral-400 dark:text-neutral-700">{track.year}</span>
+									{/if}
+								</div>
+							</div>
+							<div
+								class="flex shrink-0 flex-col items-end gap-1 text-xs text-neutral-400 tabular-nums dark:text-neutral-600"
+							>
+								<span>{format_duration(track.duration)}</span>
+								{#if track.playCount}
+									<span>{track.playCount} plays</span>
+								{/if}
+								{#if track.liked}
+									<span class="text-rose-500">♥</span>
+								{/if}
+							</div>
+						</li>
+					{/each}
+				</ul>
+			{:else}
+				<div
+					class="flex h-full flex-col items-center justify-center gap-3 px-8 text-center text-neutral-400 dark:text-neutral-700"
+				>
+					<span class="text-4xl">⌕</span>
+					<p class="text-xs">No tracks match your search or filter</p>
+				</div>
+			{/if}
+		</div>
+	{/if}
 </div>
 
 <style>
-  .no-scrollbar::-webkit-scrollbar { display: none; }
-  .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
+	.no-scrollbar::-webkit-scrollbar {
+		display: none;
+	}
+	.no-scrollbar {
+		-ms-overflow-style: none;
+		scrollbar-width: none;
+	}
 </style>
-- 
2.51.2