feat: library page sections, sorting, view options

fix: tmdb library items not being cached

src/lib/pages/LibraryPage/OptionsDialog.LibraryPage.svelte

@@ -0,0 +1,70 @@
+<script lang="ts">
+	import Dialog from '$lib/components/Dialog/Dialog.svelte';
+	import SelectButtonGroup from '$lib/components/SelectButtonGroup.svelte';
+	import Toggle from '$lib/components/Toggle.svelte';
+	import { libraryViewSettings } from '$lib/stores/localstorage.store';
+	import { MixerHorizontal } from 'radix-icons-svelte';
+
+	const sortByOptions = [
+		{ label: 'Date Added', value: 'date-added' },
+		{ label: 'Last Release Date', value: 'last-release-date' },
+		{ label: 'First Release Date', value: 'first-release-date' },
+		{ label: 'Title', value: 'title' }
+	];
+
+	const sortByDirectionOptions = [
+		{ label: 'Ascending', value: 'asc' },
+		{ label: 'Descending', value: 'desc' }
+	];
+
+	function updateSortBy(sortBy: string) {
+		libraryViewSettings.update((settings) => ({ ...settings, sortBy: sortBy as any }));
+	}
+
+	function updateSortByDirection(direction: string) {
+		libraryViewSettings.update((settings) => ({ ...settings, sortDirection: direction as any }));
+	}
+</script>
+
+<Dialog let:close on:close class="space-y-8">
+	<h1 class="h3 mb-4 flex items-center space-x-4">
+		<span>View Options</span>
+		<!-- <MixerHorizontal size={28} /> -->
+	</h1>
+
+	<SelectButtonGroup
+		name="Sort by"
+		options={sortByOptions}
+		selected={$libraryViewSettings.sortBy}
+		on:select={({ detail: sortBy }) => updateSortBy(sortBy)}
+	/>
+
+	<SelectButtonGroup
+		name="Direction"
+		options={sortByDirectionOptions}
+		selected={$libraryViewSettings.sortDirection}
+		on:select={({ detail: direction }) => updateSortByDirection(direction)}
+	/>
+
+	<div class="space-y-4">
+		<Toggle
+			label="Include upcoming"
+			checked={!$libraryViewSettings.separateUpcoming}
+			on:change={({ detail: separateUpcoming }) =>
+				libraryViewSettings.update((settings) => ({
+					...settings,
+					separateUpcoming: !separateUpcoming
+				}))}
+		/>
+
+		<Toggle
+			label="Include watched"
+			checked={!$libraryViewSettings.separateWatched}
+			on:change={({ detail: separateWatched }) =>
+				libraryViewSettings.update((settings) => ({
+					...settings,
+					separateWatched: !separateWatched
+				}))}
+		/>
+	</div>
+</Dialog>