From 0a46ee04e504753cd2b5d3ea489860b5cc509524 Mon Sep 17 00:00:00 2001
From: Jordan Shatford <jordanshatford@live.com>
Date: Thu, 23 Jan 2025 13:55:06 -0400
Subject: [PATCH] feat(web): update all stores to use runes

Signed-off-by: Jordan Shatford <jordanshatford@live.com>
---
 apps/web/src/lib/api.ts                       |   3 +-
 .../src/lib/components/DownloadActions.svelte |   2 +-
 apps/web/src/lib/components/ResultCard.svelte |   6 +-
 apps/web/src/lib/stores/downloads.svelte.ts   | 127 +++++++++++++++
 apps/web/src/lib/stores/downloads.ts          | 147 ------------------
 apps/web/src/lib/stores/search.svelte.ts      |  51 ++++++
 apps/web/src/lib/stores/search.ts             |  78 ----------
 apps/web/src/lib/stores/settings.svelte.ts    |  90 +++++++++++
 apps/web/src/lib/stores/settings.ts           |  93 -----------
 apps/web/src/routes/+page.svelte              |  14 +-
 apps/web/src/routes/downloads/+page.svelte    |  12 +-
 apps/web/src/routes/settings/+page.svelte     |  32 ++--
 12 files changed, 303 insertions(+), 352 deletions(-)
 create mode 100644 apps/web/src/lib/stores/downloads.svelte.ts
 delete mode 100644 apps/web/src/lib/stores/downloads.ts
 create mode 100644 apps/web/src/lib/stores/search.svelte.ts
 delete mode 100644 apps/web/src/lib/stores/search.ts
 create mode 100644 apps/web/src/lib/stores/settings.svelte.ts
 delete mode 100644 apps/web/src/lib/stores/settings.ts

diff --git a/apps/web/src/lib/api.ts b/apps/web/src/lib/api.ts
index db08ed80..5f33627b 100644
--- a/apps/web/src/lib/api.ts
+++ b/apps/web/src/lib/api.ts
@@ -1,6 +1,6 @@
 import { browser } from '$app/environment';
 import { env } from '$lib/config';
-import { downloads } from '$lib/stores/downloads';
+import { downloads } from '$lib/stores/downloads.svelte';
 
 import { client, getSession, getSessionValidate } from '@yd/client';
 import { toasts } from '@yd/ui';
@@ -45,7 +45,6 @@ export async function setupSession(): Promise<void> {
 				}
 			}
 		}
-		downloads.setupStatusListener();
 		await downloads.init();
 	}
 }
diff --git a/apps/web/src/lib/components/DownloadActions.svelte b/apps/web/src/lib/components/DownloadActions.svelte
index 555f6807..3b7942b0 100644
--- a/apps/web/src/lib/components/DownloadActions.svelte
+++ b/apps/web/src/lib/components/DownloadActions.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { downloads } from '$lib/stores/downloads';
+	import { downloads } from '$lib/stores/downloads.svelte';
 
 	import type { Download } from '@yd/client';
 	import { ActionIcon, ArrowPathIcon, ButtonGroup, Confirm, DownloadIcon, TrashIcon } from '@yd/ui';
diff --git a/apps/web/src/lib/components/ResultCard.svelte b/apps/web/src/lib/components/ResultCard.svelte
index 49716b72..c5419dd6 100644
--- a/apps/web/src/lib/components/ResultCard.svelte
+++ b/apps/web/src/lib/components/ResultCard.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import StateIcon from '$lib/components/StateIcon.svelte';
-	import { downloads } from '$lib/stores/downloads';
+	import { downloads } from '$lib/stores/downloads.svelte';
 
 	import type { Video } from '@yd/client';
 	import { Card, IconButton, PlusIcon } from '@yd/ui';
@@ -45,14 +45,14 @@
 				{result.channel.name}
 			</p>
 		</a>
-		{#if !(result.id in $downloads)}
+		{#if !(result.id in downloads.downloads)}
 			<IconButton
 				onclick={() => downloads.add(result)}
 				src={PlusIcon}
 				class="hover:text-brand-600 dark:hover:text-brand-600 h-8 w-8 p-1 text-black hover:cursor-pointer dark:text-white"
 			/>
 		{:else}
-			<StateIcon state={$downloads[result.id].status.state} />
+			<StateIcon state={downloads.downloads[result.id].status.state} />
 		{/if}
 	</footer>
 </Card>
diff --git a/apps/web/src/lib/stores/downloads.svelte.ts b/apps/web/src/lib/stores/downloads.svelte.ts
new file mode 100644
index 00000000..d86f208f
--- /dev/null
+++ b/apps/web/src/lib/stores/downloads.svelte.ts
@@ -0,0 +1,127 @@
+import { SESSION_ID_KEY } from '$lib/api';
+import { settings, userSettings } from '$lib/stores/settings.svelte';
+import { saveAs } from '$lib/utils/files';
+
+import type { Download, Video } from '@yd/client';
+import {
+	deleteDownload,
+	getDownloadFile,
+	getDownloads,
+	getDownloadsStatus,
+	postDownloads,
+	putDownloads
+} from '@yd/client';
+import { toasts } from '@yd/ui';
+
+class DownloadsStore {
+	public downloads = $state<Record<string, Download>>({});
+
+	public async init() {
+		// Setup listener for status updates of any downloads.
+		getDownloadsStatus(() => sessionStorage.getItem(SESSION_ID_KEY) ?? '', {
+			onMessage: (download) => {
+				this.updateDownload(download.video.id, download);
+			}
+		});
+		// Get all previous downloads still available.
+		const downloads = (await getDownloads()).data ?? [];
+		this.downloads = downloads.reduce((prev, curr) => ({ ...prev, [curr.video.id]: curr }), {});
+	}
+
+	public async add(video: Video) {
+		if (video.id in this.downloads) return;
+
+		const download: Download = {
+			video,
+			status: { state: 'WAITING', progress: null },
+			options: settings.settings
+		};
+
+		// Add initial value for the download
+		this.downloads[download.video.id] = download;
+
+		try {
+			const result = await postDownloads({
+				body: download
+			});
+			if (result.data) {
+				this.updateDownload(result.data.video.id, result.data);
+			}
+		} catch (err) {
+			this.handleError(download.video.id, `Failed to add '${video.title}' to downloads.`, err);
+		}
+	}
+
+	public async restart(id: string) {
+		if (!(id in this.downloads)) return;
+
+		const download = this.downloads[id];
+
+		try {
+			const result = await putDownloads({
+				body: download
+			});
+			if (result.data) {
+				this.updateDownload(result.data.video.id, result.data);
+			}
+		} catch (err) {
+			this.handleError(
+				download.video.id,
+				`Failed to restart '${download.video.title}' download.`,
+				err
+			);
+		}
+	}
+
+	public async remove(id: string) {
+		if (!(id in this.downloads)) return;
+
+		try {
+			await deleteDownload({ path: { download_id: id } });
+			toasts.success('Deleted', 'Download removed successfully.');
+			delete this.downloads[id];
+		} catch (err) {
+			this.handleError(id, 'Failed to remove download.', err);
+		}
+	}
+
+	public async getFile(id: string) {
+		if (!(id in this.downloads)) return;
+
+		try {
+			const response = await getDownloadFile({ path: { download_id: id } });
+			if (response.data) {
+				const download = this.downloads[id];
+				const filename = `${download.video.title}.${download.options.format}`;
+				saveAs(response.data as Blob, filename);
+			}
+		} catch (err) {
+			this.handleError(id, 'Failed to get file for download.', err);
+		}
+	}
+
+	private updateDownload(id: string, updatedValue: Partial<Download>) {
+		if (id in this.downloads) {
+			// Merge and update values.
+			const oldValue = this.downloads[id];
+			const value: Download = { ...oldValue, ...updatedValue };
+			this.downloads[id] = value;
+			// Automatically download file if enabled by the user.
+			if (userSettings.settings.autoDownloadOnComplete) {
+				if (updatedValue.status?.state === 'DONE') {
+					this.getFile(value.video.id);
+				}
+			}
+		} else {
+			console.error('Attempted to update download that does not exist.');
+		}
+	}
+
+	private handleError(downloadId: string, msg: string, error: unknown) {
+		toasts.error('Error', msg);
+		console.error(msg, error);
+		this.updateDownload(downloadId, { status: { state: 'ERROR', progress: null } });
+	}
+}
+
+export const downloads = new DownloadsStore();
diff --git a/apps/web/src/lib/stores/downloads.ts b/apps/web/src/lib/stores/downloads.ts
deleted file mode 100644
index 041c1cbc..00000000
--- a/apps/web/src/lib/stores/downloads.ts
+++ /dev/null
@@ -1,147 +0,0 @@
-import { SESSION_ID_KEY } from '$lib/api';
-import { settings, userSettings } from '$lib/stores/settings';
-import { saveAs } from '$lib/utils/files';
-import { get, writable } from 'svelte/store';
-
-import type { Download, Video } from '@yd/client';
-import {
-	deleteDownload,
-	getDownloadFile,
-	getDownloads,
-	getDownloadsStatus,
-	postDownloads,
-	putDownloads
-} from '@yd/client';
-import { toasts } from '@yd/ui';
-
-const DOWNLOADS = writable<Record<string, Download>>({});
-
-function createDownloadsStore() {
-	const { subscribe, set, update } = DOWNLOADS;
-
-	function setupStatusListener() {
-		getDownloadsStatus(() => sessionStorage.getItem(SESSION_ID_KEY) ?? '', {
-			onMessage: (download) => {
-				updateDownload(download.video.id, download);
-			}
-		});
-	}
-
-	async function init() {
-		const downloads = (await getDownloads()).data ?? [];
-		set(downloads.reduce((prev, curr) => ({ ...prev, [curr.video.id]: curr }), {}));
-	}
-
-	async function add(video: Video) {
-		if (video.id in get(DOWNLOADS)) return;
-
-		const download: Download = {
-			video,
-			status: { state: 'WAITING', progress: null },
-			options: get(settings)
-		};
-
-		// Add initial value for the download
-		update((state) => {
-			state[download.video.id] = download;
-			return state;
-		});
-
-		try {
-			const result = await postDownloads({
-				body: download
-			});
-			if (result.data) {
-				updateDownload(result.data.video.id, result.data);
-			}
-		} catch (err) {
-			handleError(download.video.id, `Failed to add '${video.title}' to downloads.`, err);
-		}
-	}
-
-	async function restart(id: string) {
-		if (!(id in get(DOWNLOADS))) return;
-
-		const download = get(DOWNLOADS)[id];
-
-		try {
-			const result = await putDownloads({
-				body: download
-			});
-			if (result.data) {
-				updateDownload(result.data.video.id, result.data);
-			}
-		} catch (err) {
-			handleError(download.video.id, `Failed to restart '${download.video.title}' download.`, err);
-		}
-	}
-
-	async function remove(id: string) {
-		if (!(id in get(DOWNLOADS))) return;
-
-		try {
-			await deleteDownload({ path: { download_id: id } });
-			toasts.success('Deleted', 'Download removed successfully.');
-			update((state) => {
-				delete state[id];
-				return state;
-			});
-		} catch (err) {
-			handleError(id, 'Failed to remove download.', err);
-		}
-	}
-
-	async function getFile(id: string) {
-		if (!(id in get(DOWNLOADS))) return;
-
-		try {
-			const response = await getDownloadFile({ path: { download_id: id } });
-			if (response.data) {
-				const download = get(DOWNLOADS)[id];
-				const filename = `${download.video.title}.${download.options.format}`;
-				saveAs(response.data as Blob, filename);
-			}
-		} catch (err) {
-			handleError(id, 'Failed to get file for download.', err);
-		}
-	}
-
-	function handleError(downloadId: string, msg: string, error: unknown) {
-		toasts.error('Error', msg);
-		console.error(msg, error);
-		updateDownload(downloadId, { status: { state: 'ERROR', progress: null } });
-	}
-
-	function updateDownload(id: string, updatedValue: Partial<Download>) {
-		update((state) => {
-			if (id in state) {
-				// Merge and update values.
-				const oldValue = state[id];
-				const value: Download = { ...oldValue, ...updatedValue };
-				state[id] = value;
-				// Automatically download file if enabled by the user.
-				if (get(userSettings).autoDownloadOnComplete) {
-					if (updatedValue.status?.state === 'DONE') {
-						getFile(value.video.id);
-					}
-				}
-			} else {
-				console.error('ID NOT IN STATE');
-			}
-			return state;
-		});
-	}
-
-	return {
-		subscribe,
-		init,
-		setupStatusListener,
-		add,
-		restart,
-		remove,
-		getFile,
-		reset: () => set({})
-	};
-}
-
-export const downloads = createDownloadsStore();
diff --git a/apps/web/src/lib/stores/search.svelte.ts b/apps/web/src/lib/stores/search.svelte.ts
new file mode 100644
index 00000000..251192cf
--- /dev/null
+++ b/apps/web/src/lib/stores/search.svelte.ts
@@ -0,0 +1,51 @@
+import type { Video } from '@yd/client';
+import { getNextSearch, getSearch } from '@yd/client';
+import { toasts } from '@yd/ui';
+
+class SearchStore {
+	public query = $state<string>('');
+	public loading = $state<boolean>(false);
+	public results = $state<Video[]>([]);
+
+	public async get(q: string) {
+		if (this.query === q) {
+			return;
+		}
+		this.query = q;
+		this.loading = true;
+		try {
+			const response = await getSearch({ query: { query: q } });
+			if (response.data) {
+				this.results = response.data;
+			}
+			toasts.success('Success', `Found ${this.results.length} search results.`);
+		} catch (err) {
+			toasts.error('Error', 'Failed to get search results.');
+			console.error('Failed to search for videos ', err);
+		}
+		this.loading = false;
+	}
+
+	public async getMore() {
+		this.loading = true;
+		try {
+			const response = await getNextSearch();
+			if (response.data) {
+				this.results = [...this.results, ...response.data];
+			}
+			toasts.success('Success', `Found ${this.results.length} more search results.`);
+		} catch (err) {
+			toasts.error('Error', 'Failed to get more search results.');
+			console.error('Failed to get more search videos ', err);
+		}
+		this.loading = false;
+	}
+
+	public reset() {
+		this.query = '';
+		this.loading = false;
+		this.results = [];
+	}
+}
+
+export const search = new SearchStore();
diff --git a/apps/web/src/lib/stores/search.ts b/apps/web/src/lib/stores/search.ts
deleted file mode 100644
index d965402b..00000000
--- a/apps/web/src/lib/stores/search.ts
+++ /dev/null
@@ -1,78 +0,0 @@
-import { writable } from 'svelte/store';
-
-import type { Video } from '@yd/client';
-import { getNextSearch, getSearch } from '@yd/client';
-import { toasts } from '@yd/ui';
-
-function createSearchStore() {
-	const results: Video[] = [];
-
-	const { subscribe, set, update } = writable({
-		query: '',
-		results: results,
-		loading: false
-	});
-
-	async function get(query: string) {
-		let hasSearchChanged = false;
-		update((state) => {
-			if (state.query === query) {
-				return state;
-			}
-			hasSearchChanged = true;
-			state.query = query;
-			state.loading = true;
-			return state;
-		});
-		if (hasSearchChanged) {
-			let results: Video[] = [];
-			try {
-				const response = await getSearch({ query: { query } });
-				if (response.data) {
-					results = response.data;
-				}
-				toasts.success('Success', `Found ${results.length} search results.`);
-			} catch (err) {
-				toasts.error('Error', 'Failed to get search results.');
-				console.error('Failed to search for videos ', err);
-			}
-			update((state) => {
-				state.results = results;
-				state.loading = false;
-				return state;
-			});
-		}
-	}
-
-	async function getMore() {
-		update((state) => {
-			state.loading = true;
-			return state;
-		});
-		let results: Video[] = [];
-		try {
-			const response = await getNextSearch();
-			if (response.data) {
-				results = response.data;
-			}
-			toasts.success('Success', `Found ${results.length} more search results.`);
-		} catch (err) {
-			toasts.error('Error', 'Failed to get more search results.');
-			console.error('Failed to get more search videos ', err);
-		}
-		update((state) => {
-			state.results = [...state.results, ...results];
-			state.loading = false;
-			return state;
-		});
-	}
-
-	return {
-		subscribe,
-		get,
-		getMore,
-		reset: () => set({ query: '', results: [], loading: false })
-	};
-}
-
-export const search = createSearchStore();
diff --git a/apps/web/src/lib/stores/settings.svelte.ts b/apps/web/src/lib/stores/settings.svelte.ts
new file mode 100644
index 00000000..d00944f6
--- /dev/null
+++ b/apps/web/src/lib/stores/settings.svelte.ts
@@ -0,0 +1,90 @@
+import { browser } from '$app/environment';
+
+import type { DownloadOptions } from '@yd/client';
+import { AudioFormat, DEFAULT_DOWNLOAD_OPTIONS, DownloadQuality, VideoFormat } from '@yd/client';
+
+const SETTINGS_KEY = 'yd-settings';
+
+class SettingsStore {
+	public settings = $state<DownloadOptions>(DEFAULT_DOWNLOAD_OPTIONS);
+
+	public constructor() {
+		if (browser) {
+			const data = localStorage?.getItem(SETTINGS_KEY);
+			if (data !== null) {
+				const parsedData = JSON.parse(data) as DownloadOptions;
+				const supportedFormats = [...Object.values(AudioFormat), ...Object.values(VideoFormat)];
+				// Make sure a value is set, if nothing is set use the default
+				if (!supportedFormats.includes(parsedData.format)) {
+					parsedData.format = DEFAULT_DOWNLOAD_OPTIONS.format;
+				}
+				if (!Object.values(DownloadQuality).includes(parsedData.quality)) {
+					parsedData.quality = DEFAULT_DOWNLOAD_OPTIONS.quality;
+				}
+				if (parsedData.embed_metadata === undefined) {
+					parsedData.embed_metadata = DEFAULT_DOWNLOAD_OPTIONS.embed_metadata;
+				}
+				if (parsedData.embed_thumbnail === undefined) {
+					parsedData.embed_thumbnail = DEFAULT_DOWNLOAD_OPTIONS.embed_thumbnail;
+				}
+				if (parsedData.embed_subtitles === undefined) {
+					parsedData.embed_subtitles = DEFAULT_DOWNLOAD_OPTIONS.embed_subtitles;
+				}
+				this.settings = parsedData;
+			}
+		}
+		// Watch changes and sync in local storage.
+		$effect.root(() => {
+			$effect(() => {
+				localStorage.setItem(SETTINGS_KEY, JSON.stringify(this.settings));
+			});
+			return () => {};
+		});
+	}
+
+	public reset() {
+		this.settings = DEFAULT_DOWNLOAD_OPTIONS;
+	}
+}
+
+export const settings = new SettingsStore();
+
+const USER_SETTINGS_KEY = 'yd-usersettings';
+const DEFAULT_USER_SETTINGS = {
+	autoDownloadOnComplete: false,
+	downloadsPageSize: 10
+};
+
+class UserSettingsStore {
+	public settings = $state(DEFAULT_USER_SETTINGS);
+
+	public constructor() {
+		if (browser) {
+			const data = localStorage?.getItem(USER_SETTINGS_KEY);
+			if (data !== null) {
+				const parsedData = JSON.parse(data) as typeof DEFAULT_USER_SETTINGS;
+				if (
+					!parsedData.downloadsPageSize ||
+					Number.isNaN(parsedData.downloadsPageSize) ||
+					Number(parsedData.downloadsPageSize) < 1
+				) {
+					parsedData.downloadsPageSize = DEFAULT_USER_SETTINGS.downloadsPageSize;
+				}
+				this.settings = parsedData;
+			}
+		}
+		// Watch changes and sync in local storage.
+		$effect.root(() => {
+			$effect(() => {
+				localStorage.setItem(USER_SETTINGS_KEY, JSON.stringify(this.settings));
+			});
+			return () => {};
+		});
+	}
+
+	public reset() {
+		this.settings = DEFAULT_USER_SETTINGS;
+	}
+}
+
+export const userSettings = new UserSettingsStore();
diff --git a/apps/web/src/lib/stores/settings.ts b/apps/web/src/lib/stores/settings.ts
deleted file mode 100644
index eaaefc67..00000000
--- a/apps/web/src/lib/stores/settings.ts
+++ /dev/null
@@ -1,93 +0,0 @@
-import { browser } from '$app/environment';
-import { writable } from 'svelte/store';
-
-import type { DownloadOptions } from '@yd/client';
-import { AudioFormat, DEFAULT_DOWNLOAD_OPTIONS, DownloadQuality, VideoFormat } from '@yd/client';
-
-const SETTINGS_KEY = 'yd-settings';
-
-function createSettingsStore() {
-	const { subscribe, set, update } = writable(DEFAULT_DOWNLOAD_OPTIONS);
-
-	if (browser) {
-		const data = localStorage?.getItem(SETTINGS_KEY);
-
-		if (data !== null) {
-			const parsedData = JSON.parse(data) as DownloadOptions;
-			const supportedFormats = [...Object.values(AudioFormat), ...Object.values(VideoFormat)];
-			// Make sure a value is set, if nothing is set use the default
-			if (!supportedFormats.includes(parsedData.format)) {
-				parsedData.format = DEFAULT_DOWNLOAD_OPTIONS.format;
-			}
-			if (!Object.values(DownloadQuality).includes(parsedData.quality)) {
-				parsedData.quality = DEFAULT_DOWNLOAD_OPTIONS.quality;
-			}
-			if (parsedData.embed_metadata === undefined) {
-				parsedData.embed_metadata = DEFAULT_DOWNLOAD_OPTIONS.embed_metadata;
-			}
-			if (parsedData.embed_thumbnail === undefined) {
-				parsedData.embed_thumbnail = DEFAULT_DOWNLOAD_OPTIONS.embed_thumbnail;
-			}
-			if (parsedData.embed_subtitles === undefined) {
-				parsedData.embed_subtitles = DEFAULT_DOWNLOAD_OPTIONS.embed_subtitles;
-			}
-			set(parsedData);
-		}
-	}
-
-	subscribe((value) => {
-		if (browser) {
-			const settingsJsonString = JSON.stringify(value);
-			localStorage?.setItem(SETTINGS_KEY, settingsJsonString);
-		}
-	});
-
-	return {
-		subscribe,
-		set,
-		update,
-		reset: () => set(DEFAULT_DOWNLOAD_OPTIONS)
-	};
-}
-
-export const settings = createSettingsStore();
-
-function createUserSettingsStore() {
-	const USER_SETTINGS_KEY = 'yd-usersettings';
-	const DEFAULT_USER_SETTINGS = {
-		autoDownloadOnComplete: false,
-		downloadsPageSize: 10
-	};
-
-	const { subscribe, set, update } = writable(DEFAULT_USER_SETTINGS);
-
-	if (browser) {
-		const data = localStorage?.getItem(USER_SETTINGS_KEY);
-		if (data !== null) {
-			const parsedData = JSON.parse(data) as typeof DEFAULT_USER_SETTINGS;
-			if (
-				!parsedData.downloadsPageSize ||
-				Number.isNaN(parsedData.downloadsPageSize) ||
-				Number(parsedData.downloadsPageSize) < 1
-			) {
-				parsedData.downloadsPageSize = DEFAULT_USER_SETTINGS.downloadsPageSize;
-			}
-			set(parsedData);
-		}
-	}
-
-	subscribe((value) => {
-		if (browser) {
-			localStorage?.setItem(USER_SETTINGS_KEY, JSON.stringify(value));
-		}
-	});
-
-	return {
-		subscribe,
-		set,
-		update,
-		reset: () => set(DEFAULT_USER_SETTINGS)
-	};
-}
-
-export const userSettings = createUserSettingsStore();
diff --git a/apps/web/src/routes/+page.svelte b/apps/web/src/routes/+page.svelte
index 4b0f589c..9618676e 100644
--- a/apps/web/src/routes/+page.svelte
+++ b/apps/web/src/routes/+page.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import ResultCard from '$lib/components/ResultCard.svelte';
 	import config from '$lib/config';
-	import { search } from '$lib/stores/search';
+	import { search } from '$lib/stores/search.svelte';
 
 	import { Button, Icon, LoaderIcon, SearchBar, Title } from '@yd/ui';
 
@@ -19,27 +19,27 @@
 	<div class="mx-auto max-w-xl overflow-hidden md:max-w-xl">
 		<div class="md:flex">
 			<div class="mt-4 w-full">
-				<SearchBar onsearch={searchVideos} loading={$search.loading} query={$search.query} />
+				<SearchBar onsearch={searchVideos} loading={search.loading} query={search.query} />
 			</div>
 		</div>
 	</div>
 	<div class="container mx-auto mt-8 px-4 pb-8 md:px-12">
 		<div class="-mx-1 flex flex-wrap lg:-mx-4">
-			{#each $search.results as result}
+			{#each search.results as result}
 				<ResultCard {result} />
 			{/each}
 		</div>
-		{#if $search.results.length > 0}
+		{#if search.results.length > 0}
 			<div class="flex w-full justify-center pt-4">
 				<Button
 					class="inline-flex items-center gap-2"
 					onclick={() => search.getMore()}
-					disabled={$search.loading}
+					disabled={search.loading}
 				>
-					{#if $search.loading}
+					{#if search.loading}
 						<Icon src={LoaderIcon} class="h-5 w-5 animate-spin" />
 					{/if}
-					<span>{$search.loading ? 'Loading' : 'Get more'}</span></Button
+					<span>{search.loading ? 'Loading' : 'Get more'}</span></Button
 				>
 			</div>
 		{/if}
diff --git a/apps/web/src/routes/downloads/+page.svelte b/apps/web/src/routes/downloads/+page.svelte
index 3a91b77b..80500dc9 100644
--- a/apps/web/src/routes/downloads/+page.svelte
+++ b/apps/web/src/routes/downloads/+page.svelte
@@ -3,18 +3,20 @@
 	import NotFound from '$lib/components/NotFound.svelte';
 	import StatusBadge from '$lib/components/StatusBadge.svelte';
 	import config from '$lib/config';
-	import { downloads } from '$lib/stores/downloads';
-	import { userSettings } from '$lib/stores/settings';
+	import { downloads } from '$lib/stores/downloads.svelte';
+	import { userSettings } from '$lib/stores/settings.svelte';
 
 	import { Badge, Pagination, Table, Title } from '@yd/ui';
 
 	let page = $state(1);
 
-	let pageSize = $derived($userSettings.downloadsPageSize);
-	let totalDownloads = $derived(Object.keys($downloads).length);
+	let pageSize = $derived(userSettings.settings.downloadsPageSize);
+	let totalDownloads = $derived(Object.keys(downloads.downloads).length);
 	let totalPages = $derived(Math.ceil(totalDownloads / pageSize));
 	let start = $derived((page - 1) * pageSize);
-	let currentPageDownloads = $derived(Object.values($downloads).slice(start, start + pageSize));
+	let currentPageDownloads = $derived(
+		Object.values(downloads.downloads).slice(start, start + pageSize)
+	);
 
 	const columns = [
 		{
diff --git a/apps/web/src/routes/settings/+page.svelte b/apps/web/src/routes/settings/+page.svelte
index a3eb4db5..4f930aad 100644
--- a/apps/web/src/routes/settings/+page.svelte
+++ b/apps/web/src/routes/settings/+page.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import config from '$lib/config';
-	import { settings, userSettings } from '$lib/stores/settings';
+	import { settings, userSettings } from '$lib/stores/settings.svelte';
 
 	import { AudioFormat, DownloadQuality, VideoFormat } from '@yd/client';
 	import {
@@ -10,7 +10,7 @@
 		GearIcon,
 		Select,
 		Tabs,
-		toast,
+		toasts,
 		Toggle,
 		toSelectOptions
 	} from '@yd/ui';
@@ -60,17 +60,17 @@
 					id="format"
 					label="Format:"
 					helpText="The format of file you want for the download."
-					bind:value={$settings.format}
+					bind:value={settings.settings.format}
 					groups={formatGroups}
-					onchange={() => toast.success('Updated', 'Format settings updated successfully.')}
+					onchange={() => toasts.success('Updated', 'Format settings updated successfully.')}
 				/>
 				<Select
 					id="quality"
 					label="Quality:"
 					helpText="The preferred quality for the download."
-					bind:value={$settings.quality}
+					bind:value={settings.settings.quality}
 					options={toSelectOptions(DownloadQuality)}
-					onchange={() => toast.success('Updated', 'Quality settings updated successfully.')}
+					onchange={() => toasts.success('Updated', 'Quality settings updated successfully.')}
 				/>
 			</div>
 		{:else if activePage === 'embed'}
@@ -84,25 +84,25 @@
 					id="metadata"
 					label="Metadata:"
 					helpText="Embed extracted information from the video into the download."
-					bind:checked={$settings.embed_metadata}
+					bind:checked={settings.settings.embed_metadata}
 					onchange={() =>
-						toast.success('Updated', 'Metadata embedding settings updated successfully.')}
+						toasts.success('Updated', 'Metadata embedding settings updated successfully.')}
 				/>
 				<Toggle
 					id="thumbnail"
 					label="Thumbnail:"
 					helpText="Attempt to embed thumbnail. Depending on other settings, this may not always work."
-					bind:checked={$settings.embed_thumbnail}
+					bind:checked={settings.settings.embed_thumbnail}
 					onchange={() =>
-						toast.success('Updated', 'Thumbnail embedding settings updated successfully.')}
+						toasts.success('Updated', 'Thumbnail embedding settings updated successfully.')}
 				/>
 				<Toggle
 					id="subtitles"
 					label="Subtitles:"
 					helpText="Attempt to embed subtitles. Depending on other settings, this may not always work."
-					bind:checked={$settings.embed_subtitles}
+					bind:checked={settings.settings.embed_subtitles}
 					onchange={() =>
-						toast.success('Updated', 'Subtitle embedding settings updated successfully.')}
+						toasts.success('Updated', 'Subtitle embedding settings updated successfully.')}
 				/>
 			</div>
 		{:else if activePage === 'other'}
@@ -111,18 +111,18 @@
 					id="downloadPageSize"
 					label="Downloads page size:"
 					helpText="Size of each page on the downloads tab."
-					bind:value={$userSettings.downloadsPageSize}
+					bind:value={userSettings.settings.downloadsPageSize}
 					options={[...Array(11 + 5).keys()].slice(5).map((v) => ({ value: v, text: `${v}` }))}
 					onchange={() =>
-						toast.success('Updated', 'Downloads page size setting updated successfully.')}
+						toasts.success('Updated', 'Downloads page size setting updated successfully.')}
 				/>
 				<Toggle
 					id="autoDownload"
 					label="Automatically download when complete:"
 					helpText="Once a download is complete it will automatically be downloaded to your device."
-					bind:checked={$userSettings.autoDownloadOnComplete}
+					bind:checked={userSettings.settings.autoDownloadOnComplete}
 					onchange={() =>
-						toast.success('Updated', 'Automatic download settings updated successfully.')}
+						toasts.success('Updated', 'Automatic download settings updated successfully.')}
 				/>
 			</div>
 		{/if}