From e523f2cccad1c27bd0a3cac26baaf7ab29f22d42 Mon Sep 17 00:00:00 2001
From: Arno <46051866+arnolicious@users.noreply.github.com>
Date: Mon, 13 Apr 2026 14:53:57 +0200
Subject: [PATCH] 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  | 30 ++++++++++++++---------
 frontend/src/routes/trending/+page.svelte | 30 ++++++++++++++---------
 frontend/src/routes/your-top/+page.svelte | 30 ++++++++++++++---------
 3 files changed, 54 insertions(+), 36 deletions(-)

diff --git a/frontend/src/routes/popular/+page.svelte b/frontend/src/routes/popular/+page.svelte
index b2aa804..0ff1a8d 100644
--- a/frontend/src/routes/popular/+page.svelte
+++ b/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 { musicSourceStore, type MusicSource } from '$lib/stores/musicSource';
+	import { 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 () => {
-		await musicSourceStore.load();
-		source = musicSourceStore.getPageSource('popular');
-	});
+	// svelte-ignore state_referenced_locally
+	let activeSource = new PersistedState<MusicSource>(
+		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>
diff --git a/frontend/src/routes/trending/+page.svelte b/frontend/src/routes/trending/+page.svelte
index 83f0856..f0662f7 100644
--- a/frontend/src/routes/trending/+page.svelte
+++ b/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 { musicSourceStore, type MusicSource } from '$lib/stores/musicSource';
+	import { 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 () => {
-		await musicSourceStore.load();
-		source = musicSourceStore.getPageSource('trending');
-	});
+	// svelte-ignore state_referenced_locally
+	let activeSource = new PersistedState<MusicSource>(
+		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>
diff --git a/frontend/src/routes/your-top/+page.svelte b/frontend/src/routes/your-top/+page.svelte
index 4efdb4a..3542d41 100644
--- a/frontend/src/routes/your-top/+page.svelte
+++ b/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 { musicSourceStore, type MusicSource } from '$lib/stores/musicSource';
+	import { 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 () => {
-		await musicSourceStore.load();
-		source = musicSourceStore.getPageSource('yourTop');
-	});
+	// svelte-ignore state_referenced_locally
+	let activeSource = new PersistedState<MusicSource>(
+		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>