Improvements to changing backends

materialious/src/lib/components/settings/Interface.svelte

@@ -11,14 +11,13 @@
 	import type { RgbaColor, HsvaColor, Colord } from 'colord';
 	import { _ } from '$lib/i18n';
 	import { get } from 'svelte/store';
-	import { ensureNoTrailingSlash, isMobile } from '../../misc';
+	import { ensureNoTrailingSlash, isMobile, logoutStores } from '../../misc';
 	import { getPages, type Pages } from '../../navPages';
 	import ColorPicker from 'svelte-awesome-color-picker';
 	import {
 		authStore,
 		backendInUseStore,
 		darkModeStore,
-		feedCacheStore,
 		instanceStore,
 		interfaceAllowInsecureRequests,
 		interfaceAmoledTheme,
@@ -33,8 +32,6 @@
 		interfaceRegionStore,
 		interfaceSearchHistoryEnabled,
 		interfaceSearchSuggestionsStore,
-		playlistCacheStore,
-		searchCacheStore,
 		searchHistoryStore,
 		themeColorStore
 	} from '../../store';
@@ -78,6 +75,12 @@
 		}
 	}
 
+	function clearPreviousInstance() {
+		logoutStores();
+		ui('#dialog-settings');
+		location.reload();
+	}
+
 	async function setInstance(event: Event) {
 		event.preventDefault();
 
@@ -108,18 +111,14 @@
 		}
 
 		instanceStore.set(instance);
-		authStore.set(null);
-		feedCacheStore.set({});
-		searchCacheStore.set({});
-		playlistCacheStore.set({});
 
-		goto(resolve('/', {}), { replaceState: true });
-		ui('#dialog-settings');
+		clearPreviousInstance();
 	}
 
 	async function setBackend(event: Event) {
 		const select = event.target as HTMLSelectElement;
 		backendInUseStore.set(select.value as 'ivg' | 'yt');
+		clearPreviousInstance();
 	}
 
 	function allowInsecureRequests() {

materialious/src/lib/misc.ts

@@ -4,10 +4,15 @@ import he from 'he';
 import type Peer from 'peerjs';
 import { get } from 'svelte/store';
 import {
+	authStore,
 	backendInUseStore,
+	channelCacheStore,
+	feedCacheStore,
 	interfaceAllowInsecureRequests,
 	interfaceAndroidUseNativeShare,
-	isAndroidTvStore
+	isAndroidTvStore,
+	playlistCacheStore,
+	searchCacheStore
 } from './store';
 import type {
 	Channel,
@@ -227,3 +232,11 @@ export function findElementForTime<T>(
 export function isYTBackend(): boolean {
 	return get(backendInUseStore) === 'yt' && Capacitor.isNativePlatform();
 }
+
+export function logoutStores() {
+	authStore.set(null);
+	feedCacheStore.set({});
+	searchCacheStore.set({});
+	playlistCacheStore.set({});
+	channelCacheStore.set({});
+}

materialious/src/routes/(app)/+layout.svelte

@@ -19,15 +19,12 @@
 	import {
 		authStore,
 		darkModeStore,
-		feedCacheStore,
 		instanceStore,
 		interfaceAmoledTheme,
 		interfaceDefaultPage,
 		isAndroidTvStore,
 		playerState,
 		playertheatreModeIsActive,
-		playlistCacheStore,
-		searchCacheStore,
 		syncPartyPeerStore,
 		themeColorStore
 	} from '$lib/store';
@@ -42,7 +39,7 @@
 	import { _ } from '$lib/i18n';
 	import { get } from 'svelte/store';
 	import { pwaInfo } from 'virtual:pwa-info';
-	import { truncate } from '$lib/misc';
+	import { logoutStores, truncate } from '$lib/misc';
 	import Author from '$lib/components/Author.svelte';
 	import Toast from '$lib/components/Toast.svelte';
 
@@ -182,10 +179,7 @@
 	}
 
 	function logout() {
-		authStore.set(null);
-		feedCacheStore.set({});
-		searchCacheStore.set({});
-		playlistCacheStore.set({});
+		logoutStores();
 		goto(resolve('/', {}));
 	}