refactor: musicSource in popular, trending & your-top pages (#45)

* refactor: musicSource in popular page

* refactor: remove musicSourceStore from trending and yourTop pages

* replace original SourceSwitcher

frontend/src/routes/popular/+page.svelte

@@ -1,22 +1,25 @@
 <script lang="ts">
-	import { onMount } from 'svelte';
 	import TimeRangeView from '$lib/components/TimeRangeView.svelte';
-	import SourceSwitcher from '$lib/components/SourceSwitcher.svelte';
+	import { type MusicSource } from '$lib/stores/musicSource';
-	import { musicSourceStore, type MusicSource } from '$lib/stores/musicSource';
 	import { Disc3 } from 'lucide-svelte';
+	import type { PageProps } from './$types';
+	import { PersistedState } from 'runed';
+	import { PAGE_SOURCE_KEYS } from '$lib/constants';
+	import SimpleSourceSwitcher from '$lib/components/SimpleSourceSwitcher.svelte';
 
-	let source: MusicSource | null = $state(null);
+	const { data }: PageProps = $props();
 
-	onMount(async () => {
+	// svelte-ignore state_referenced_locally
-		await musicSourceStore.load();
+	let activeSource = new PersistedState<MusicSource>(
-		source = musicSourceStore.getPageSource('popular');
+		PAGE_SOURCE_KEYS['popular'],
-	});
+		data.primarySource
+	);
 
 	function handleSourceChange(nextSource: MusicSource) {
-		source = nextSource;
+		activeSource.current = nextSource;
 	}
 
-	let sourceLabel = $derived(source === 'lastfm' ? 'Last.fm' : 'ListenBrainz');
+	let sourceLabel = $derived(activeSource.current === 'lastfm' ? 'Last.fm' : 'ListenBrainz');
 </script>
 
 <svelte:head>
@@ -25,14 +28,17 @@
 
 <div class="space-y-4 px-4 sm:px-6 lg:px-8">
 	<div class="flex justify-end">
-		<SourceSwitcher pageKey="popular" onSourceChange={handleSourceChange} />
+		<SimpleSourceSwitcher
+			currentSource={activeSource.current}
+			onSourceChange={handleSourceChange}
+		/>
 	</div>
 	<TimeRangeView
 		itemType="album"
 		endpoint="/api/v1/home/popular/albums"
 		title="Popular Right Now"
 		subtitle={`Most listened albums on ${sourceLabel}`}
-		{source}
+		source={activeSource.current}
 		errorIcon={Disc3}
 	/>
 </div>

frontend/src/routes/trending/+page.svelte

@@ -1,22 +1,25 @@
 <script lang="ts">
-	import { onMount } from 'svelte';
 	import TimeRangeView from '$lib/components/TimeRangeView.svelte';
-	import SourceSwitcher from '$lib/components/SourceSwitcher.svelte';
+	import { type MusicSource } from '$lib/stores/musicSource';
-	import { musicSourceStore, type MusicSource } from '$lib/stores/musicSource';
 	import { Mic } from 'lucide-svelte';
+	import { PersistedState } from 'runed';
+	import { PAGE_SOURCE_KEYS } from '$lib/constants';
+	import type { PageProps } from './$types';
+	import SimpleSourceSwitcher from '$lib/components/SimpleSourceSwitcher.svelte';
 
-	let source: MusicSource | null = $state(null);
+	const { data }: PageProps = $props();
 
-	onMount(async () => {
+	// svelte-ignore state_referenced_locally
-		await musicSourceStore.load();
+	let activeSource = new PersistedState<MusicSource>(
-		source = musicSourceStore.getPageSource('trending');
+		PAGE_SOURCE_KEYS['trending'],
-	});
+		data.primarySource
+	);
 
 	function handleSourceChange(nextSource: MusicSource) {
-		source = nextSource;
+		activeSource.current = nextSource;
 	}
 
-	let sourceLabel = $derived(source === 'lastfm' ? 'Last.fm' : 'ListenBrainz');
+	let sourceLabel = $derived(activeSource.current === 'lastfm' ? 'Last.fm' : 'ListenBrainz');
 </script>
 
 <svelte:head>
@@ -25,14 +28,17 @@
 
 <div class="space-y-4 px-4 sm:px-6 lg:px-8">
 	<div class="flex justify-end">
-		<SourceSwitcher pageKey="trending" onSourceChange={handleSourceChange} />
+		<SimpleSourceSwitcher
+			currentSource={activeSource.current}
+			onSourceChange={handleSourceChange}
+		/>
 	</div>
 	<TimeRangeView
 		itemType="artist"
 		endpoint="/api/v1/home/trending/artists"
 		title="Trending Artists"
 		subtitle={`Most listened artists on ${sourceLabel}`}
-		{source}
+		source={activeSource.current}
 		errorIcon={Mic}
 	/>
 </div>

frontend/src/routes/your-top/+page.svelte

@@ -1,22 +1,25 @@
 <script lang="ts">
-	import { onMount } from 'svelte';
 	import TimeRangeView from '$lib/components/TimeRangeView.svelte';
-	import SourceSwitcher from '$lib/components/SourceSwitcher.svelte';
+	import { type MusicSource } from '$lib/stores/musicSource';
-	import { musicSourceStore, type MusicSource } from '$lib/stores/musicSource';
 	import { Disc3 } from 'lucide-svelte';
+	import { PersistedState } from 'runed';
+	import { PAGE_SOURCE_KEYS } from '$lib/constants';
+	import type { PageProps } from './$types';
+	import SimpleSourceSwitcher from '$lib/components/SimpleSourceSwitcher.svelte';
 
-	let source: MusicSource | null = $state(null);
+	const { data }: PageProps = $props();
 
-	onMount(async () => {
+	// svelte-ignore state_referenced_locally
-		await musicSourceStore.load();
+	let activeSource = new PersistedState<MusicSource>(
-		source = musicSourceStore.getPageSource('yourTop');
+		PAGE_SOURCE_KEYS['yourTop'],
-	});
+		data.primarySource
+	);
 
 	function handleSourceChange(nextSource: MusicSource) {
-		source = nextSource;
+		activeSource.current = nextSource;
 	}
 
-	let sourceLabel = $derived(source === 'lastfm' ? 'Last.fm' : 'ListenBrainz');
+	let sourceLabel = $derived(activeSource.current === 'lastfm' ? 'Last.fm' : 'ListenBrainz');
 </script>
 
 <svelte:head>
@@ -25,14 +28,17 @@
 
 <div class="space-y-4 px-4 sm:px-6 lg:px-8">
 	<div class="flex justify-end">
-		<SourceSwitcher pageKey="yourTop" onSourceChange={handleSourceChange} />
+		<SimpleSourceSwitcher
+			currentSource={activeSource.current}
+			onSourceChange={handleSourceChange}
+		/>
 	</div>
 	<TimeRangeView
 		itemType="album"
 		endpoint="/api/v1/home/your-top/albums"
 		title="Your Top Albums"
 		subtitle={`Your most listened albums on ${sourceLabel}`}
-		{source}
+		source={activeSource.current}
 		errorIcon={Disc3}
 	/>
 </div>