fix: Fix UI state issues with integration settings

src/lib/components/Integrations/JellyfinIntegration.svelte

@@ -4,31 +4,26 @@
 	import { createEventDispatcher } from 'svelte';
 	import SelectField from '../SelectField.svelte';
 	import { jellyfinApi, type JellyfinUser } from '../../apis/jellyfin/jellyfin-api';
-	import { get } from 'svelte/store';
+	import { derived, get } from 'svelte/store';
 
 	const dispatch = createEventDispatcher<{
 		change: { baseUrl: string; apiKey: string; stale: boolean };
 		'click-user': { user: JellyfinUser | undefined; users: JellyfinUser[] };
 	}>();
 
-	export let baseUrl = '';
+	export let baseUrl = get(user)?.settings.jellyfin.baseUrl || '';
-	export let apiKey = '';
+	export let apiKey = get(user)?.settings.jellyfin.apiKey || '';
-	let originalBaseUrl: string | undefined;
+	let originalBaseUrl = derived(user, (user) => user?.settings.jellyfin.baseUrl || '');
-	let originalApiKey: string | undefined;
+	let originalApiKey = derived(user, (user) => user?.settings.jellyfin.apiKey || '');
 	let timeout: ReturnType<typeof setTimeout>;
 	let error = '';
 	let jellyfinUsers: Promise<JellyfinUser[]> | undefined = undefined;
 	export let jellyfinUser: JellyfinUser | undefined;
 
-	user.subscribe((user) => {
+	$: {
-		baseUrl = baseUrl || user?.settings.jellyfin.baseUrl || '';
+		if ($originalBaseUrl !== baseUrl && $originalApiKey !== apiKey) handleChange();
-		apiKey = apiKey || user?.settings.jellyfin.apiKey || '';
+		else dispatch('change', { baseUrl, apiKey, stale: false });
-
+	}
-		originalBaseUrl = baseUrl;
-		originalApiKey = apiKey;
-
-		handleChange();
-	});
 
 	$: if (jellyfinUser)
 		dispatch('change', {
@@ -38,6 +33,8 @@
 				baseUrl && apiKey ? jellyfinUser?.Id !== get(user)?.settings.jellyfin.userId : !jellyfinUser
 		});
 
+	handleChange();
+
 	function handleChange() {
 		clearTimeout(timeout);
 		error = '';
@@ -50,7 +47,11 @@
 		dispatch('change', {
 			baseUrl: '',
 			apiKey: '',
-			stale: baseUrl === '' && apiKey === '' && jellyfinUser === undefined
+			stale:
+				baseUrl === '' &&
+				apiKey === '' &&
+				jellyfinUser === undefined &&
+				(baseUrl !== $originalBaseUrl || apiKey !== $originalApiKey)
 		});
 
 		if (baseUrlCopy === '' || apiKeyCopy === '') return;
@@ -62,9 +63,9 @@
 			if (baseUrlCopy !== baseUrl || apiKeyCopy !== apiKey) return;
 
 			if (users.length) {
-				jellyfinUser = users.find((u) => u.Id === get(appState).user?.settings.jellyfin.userId);
+				jellyfinUser = users.find((u) => u.Id === get(user)?.settings.jellyfin.userId);
 				const stale =
-					(baseUrlCopy !== originalBaseUrl || apiKeyCopy !== originalApiKey) &&
+					(baseUrlCopy !== $originalBaseUrl || apiKeyCopy !== $originalApiKey) &&
 					jellyfinUser !== undefined;
 				dispatch('change', { baseUrl: baseUrlCopy, apiKey: apiKeyCopy, stale });
 			} else {
@@ -91,13 +92,17 @@
 	<TextField
 		bind:value={baseUrl}
 		isValid={jellyfinUsers?.then((u) => !!u?.length)}
-		on:change={handleChange}>Base Url</TextField
+		on:change={handleChange}
 	>
+		Base Url
+	</TextField>
 	<TextField
 		bind:value={apiKey}
 		isValid={jellyfinUsers?.then((u) => !!u?.length)}
-		on:change={handleChange}>API Key</TextField
+		on:change={handleChange}
 	>
+		API Key
+	</TextField>
 </div>
 
 {#await jellyfinUsers then users}

src/lib/components/Integrations/RadarrIntegration.svelte

@@ -3,28 +3,26 @@
 	import { createEventDispatcher } from 'svelte';
 	import { radarrApi } from '../../apis/radarr/radarr-api';
 	import { user } from '../../stores/user.store';
+	import { derived, get } from 'svelte/store';
 
 	const dispatch = createEventDispatcher<{
 		change: { baseUrl: string; apiKey: string; stale: boolean };
 	}>();
 
-	export let baseUrl = '';
+	export let baseUrl = get(user)?.settings.radarr.baseUrl || '';
-	export let apiKey = '';
+	export let apiKey = get(user)?.settings.radarr.apiKey || '';
-	let originalBaseUrl: string | undefined;
+	const originalBaseUrl = derived(user, (user) => user?.settings.radarr.baseUrl || '');
-	let originalApiKey: string | undefined;
+	const originalApiKey = derived(user, (user) => user?.settings.radarr.apiKey || '');
 	let timeout: ReturnType<typeof setTimeout>;
 	let error = '';
 	let healthCheck: Promise<boolean> | undefined;
 
-	user.subscribe((user) => {
+	$: {
-		baseUrl = baseUrl || user?.settings.radarr.baseUrl || '';
+		if ($originalBaseUrl !== baseUrl && $originalApiKey !== apiKey) handleChange();
-		apiKey = apiKey || user?.settings.radarr.apiKey || '';
+		else dispatch('change', { baseUrl, apiKey, stale: false });
+	}
 
-		originalBaseUrl = baseUrl;
+	handleChange();
-		originalApiKey = apiKey;
-
-		handleChange();
-	});
 
 	function handleChange() {
 		clearTimeout(timeout);
@@ -33,12 +31,12 @@
 
 		const baseUrlCopy = baseUrl;
 		const apiKeyCopy = apiKey;
-		const stale = baseUrlCopy !== originalBaseUrl || apiKeyCopy !== originalApiKey;
+		const stale = baseUrlCopy !== $originalBaseUrl || apiKeyCopy !== $originalApiKey;
 
 		dispatch('change', {
 			baseUrl: '',
 			apiKey: '',
-			stale: baseUrl === '' && apiKey === ''
+			stale: baseUrl === '' && apiKey === '' && stale
 		});
 
 		if (baseUrlCopy === '' || apiKeyCopy === '') return;
@@ -66,8 +64,9 @@
 </script>
 
 <div class="space-y-4 mb-4">
-	<TextField bind:value={baseUrl} isValid={healthCheck} on:change={handleChange}>Base Url</TextField
+	<TextField bind:value={baseUrl} isValid={healthCheck} on:change={handleChange}>
-	>
+		Base Url
+	</TextField>
 	<TextField bind:value={apiKey} isValid={healthCheck} on:change={handleChange}>API Key</TextField>
 </div>
 

src/lib/components/Integrations/SonarrIntegration.svelte

@@ -3,42 +3,42 @@
 	import { sonarrApi } from '../../apis/sonarr/sonarr-api';
 	import { createEventDispatcher } from 'svelte';
 	import { user } from '../../stores/user.store';
+	import { derived, get } from 'svelte/store';
 
 	const dispatch = createEventDispatcher<{
 		change: { baseUrl: string; apiKey: string; stale: boolean };
 	}>();
 
-	export let baseUrl = '';
+	export let baseUrl = get(user)?.settings.sonarr.baseUrl || '';
-	export let apiKey = '';
+	export let apiKey = get(user)?.settings.sonarr.apiKey || '';
-	let originalBaseUrl: string | undefined;
+	const originalBaseUrl = derived(user, (u) => u?.settings.sonarr.baseUrl || '');
-	let originalApiKey: string | undefined;
+	const originalApiKey = derived(user, (u) => u?.settings.sonarr.apiKey || '');
 	let timeout: ReturnType<typeof setTimeout>;
 	let error = '';
 	let healthCheck: Promise<boolean> | undefined;
 
-	user.subscribe((user) => {
+	$: {
-		baseUrl = baseUrl || user?.settings.sonarr.baseUrl || '';
+		if ($originalBaseUrl !== baseUrl && $originalApiKey !== apiKey) handleChange();
-		apiKey = apiKey || user?.settings.sonarr.apiKey || '';
+		else dispatch('change', { baseUrl, apiKey, stale: false });
+	}
 
-		originalBaseUrl = baseUrl;
+	handleChange();
-		originalApiKey = apiKey;
-
-		handleChange();
-	});
 
 	function handleChange() {
+		console.log('handleChange', $originalBaseUrl, baseUrl, $originalApiKey, apiKey);
+
 		clearTimeout(timeout);
 		error = '';
 		healthCheck = undefined;
 
 		const baseUrlCopy = baseUrl;
 		const apiKeyCopy = apiKey;
-		const stale = baseUrlCopy !== originalBaseUrl || apiKeyCopy !== originalApiKey;
+		const stale = baseUrlCopy !== $originalBaseUrl || apiKeyCopy !== $originalApiKey;
 
 		dispatch('change', {
 			baseUrl: '',
 			apiKey: '',
-			stale: baseUrl === '' && apiKey === ''
+			stale: baseUrl === '' && apiKey === '' && stale
 		});
 
 		if (baseUrlCopy === '' || apiKeyCopy === '') return;
@@ -66,8 +66,9 @@
 </script>
 
 <div class="space-y-4 mb-4">
-	<TextField bind:value={baseUrl} isValid={healthCheck} on:change={handleChange}>Base Url</TextField
+	<TextField bind:value={baseUrl} isValid={healthCheck} on:change={handleChange}>
-	>
+		Base Url
+	</TextField>
 	<TextField bind:value={apiKey} isValid={healthCheck} on:change={handleChange}>API Key</TextField>
 </div>
 

src/lib/pages/ManagePage.svelte

@@ -310,6 +310,9 @@
 		</Tab>
 
 		<Tab {...tab} tab={Tabs.About}>
+			<div>
+				Version: {REIVERR_VERSION}
+			</div>
 			User agent: {window?.navigator?.userAgent}
 			<div>Last key code: {lastKeyCode}</div>
 			<div>Last key: {lastKey}</div>