From 246f58b0037cac11cce94d9947a2407bd92917b0 Mon Sep 17 00:00:00 2001
From: Robonau <30987265+Robonau@users.noreply.github>
Date: Tue, 31 Dec 2024 04:44:55 +0000
Subject: [PATCH] library filter per category with default

---
 bun.lockb                                     | Bin 185375 -> 185375 bytes
 package.json                                  |   2 +-
 src/lib/components/switch.svelte              |   3 +
 src/lib/gql/Mutations.ts                      |  14 +
 src/lib/gql/Queries.ts                        |   5 +
 src/lib/gql/graphqlClient.ts                  |   4 +-
 src/lib/simpleStores.svelte.ts                | 242 ++++++-
 src/routes/(app)/(library)/+page.svelte       |  68 +-
 .../(app)/(library)/LibraryFilterModal.svelte | 604 ++++++++++++++----
 .../(app)/(library)/libraryActions.svelte     |   5 +-
 10 files changed, 802 insertions(+), 145 deletions(-)

diff --git a/bun.lockb b/bun.lockb
index 238b0ee3bdd291964fa05f5efbc915f8af86301c..4d3939767550f8945fcd555ea49e0075024031cb 100755
GIT binary patch
delta 147
zcmV;E0BrxCs0*K{3y>}#H#+((*=}l;D~tRcRjwY|N`W!~K~BV1GOn61PKb(?u})e+
zlc+;5v)Dn!pFq!8276^iyK|D?{|(knEp`;o=A5`b-WRRth^o7`LchO8HMKC!a)kyj
zcg6JT$eGb2!I^biy)>*%uz^T64_kxX;kVu40mlgeIJc$i0kwsfad-kCw|a2`rDFbZ
BMz{a~

delta 147
zcmV;E0BrxCs0*K{3y>}#_5oQhc+b)U3v&64#FEKrZ!30&sgg3$47D92xu(t@u})e+
zljuV*v)Dn!pFl!<JynA6Efh4ng9Y@Ci{j7x`A@wSyn<ovzg9B5du==s@_^d{71`)3
zR^J#Kc;%Q{MdJiSykpfxCCP*`t_XwO;kVu40mlgeH@Bth0kwsff{X$nw|a2`rD9Kz
BMvnjh

diff --git a/package.json b/package.json
index c962885..a759f85 100644
--- a/package.json
+++ b/package.json
@@ -55,7 +55,7 @@
 		"graphql": "^16.9.0",
 		"graphql-ws": "^5.16.0",
 		"p-queue": "^8.0.1",
-		"svelte-skeleton-three-state-switch": "0.0.7",
+		"svelte-skeleton-three-state-switch": "0.0.8",
 		"sveltekit-search-params": "^3.0.0"
 	}
 }
diff --git a/src/lib/components/switch.svelte b/src/lib/components/switch.svelte
index 101f194..f16c1f0 100644
--- a/src/lib/components/switch.svelte
+++ b/src/lib/components/switch.svelte
@@ -42,6 +42,7 @@
 				currentTarget: EventTarget & HTMLDivElement;
 			}
 		) => void;
+		title?: string;
 		[key: string]: unknown;
 	}
 
@@ -59,6 +60,7 @@
 		onchange = () => {},
 		onkeydown = () => {},
 		children,
+		title,
 		...rest
 	}: Props = $props();
 
@@ -129,6 +131,7 @@
 	aria-label={label}
 	aria-checked={checked}
 	tabindex="0"
+	{title}
 >
 	<label class="slide-toggle-label {classesLabel}">
 		<!-- Hidden Input -->
diff --git a/src/lib/gql/Mutations.ts b/src/lib/gql/Mutations.ts
index b309d00..0d98290 100644
--- a/src/lib/gql/Mutations.ts
+++ b/src/lib/gql/Mutations.ts
@@ -935,3 +935,17 @@ export const runUpdateLibraryManga = graphql(`
 		}
 	}
 `);
+
+export const setCategoryMeta = graphql(`
+	mutation MyMutation($id: Int!, $key: String!, $value: String!) {
+		setCategoryMeta(
+			input: { meta: { categoryId: $id, key: $key, value: $value } }
+		) {
+			meta {
+				key
+				value
+				categoryId
+			}
+		}
+	}
+`);
diff --git a/src/lib/gql/Queries.ts b/src/lib/gql/Queries.ts
index b9fbee2..e0f70d5 100644
--- a/src/lib/gql/Queries.ts
+++ b/src/lib/gql/Queries.ts
@@ -38,6 +38,11 @@ export const getCategory = graphql(
 						...MangaTypeFragment
 					}
 				}
+				meta {
+					categoryId
+					key
+					value
+				}
 			}
 		}
 	`,
diff --git a/src/lib/gql/graphqlClient.ts b/src/lib/gql/graphqlClient.ts
index c6d4fc2..247072b 100644
--- a/src/lib/gql/graphqlClient.ts
+++ b/src/lib/gql/graphqlClient.ts
@@ -83,7 +83,9 @@ export const client = new Client({
 				ExtensionType: (e) =>
 					(e.pkgName as string) + (e.versionName as string) + e.repo,
 				TrackStatusType: () => null,
-				TrackerNodeList: () => null
+				TrackerNodeList: () => null,
+				CategoryMetaType: (e) =>
+					(e.categoryId as number).toString() + (e.key as string)
 			},
 			updates: {
 				Mutation: {
diff --git a/src/lib/simpleStores.svelte.ts b/src/lib/simpleStores.svelte.ts
index b1aba12..5691120 100644
--- a/src/lib/simpleStores.svelte.ts
+++ b/src/lib/simpleStores.svelte.ts
@@ -18,10 +18,11 @@ import type { ToastStore } from './components/Toast/types';
 import {
 	deleteGlobalMeta,
 	deleteMangaMeta,
+	setCategoryMeta,
 	setGlobalMeta,
 	setMangaMeta
 } from './gql/Mutations';
-import { getManga, metas } from './gql/Queries';
+import { getCategory, getManga, metas } from './gql/Queries';
 import { client } from './gql/graphqlClient';
 import type { presetConst } from './presets';
 import { getObjectKeys, type TriState } from './util.svelte';
@@ -503,3 +504,242 @@ class MMState {
 }
 
 export const mmState = new MMState();
+
+class categoryMetaStoreSingle<T> {
+	private key: string;
+	value = $state<T>() as T;
+	private id = -1;
+	private serializer: json<T> = JSON;
+	private cleanup = () => {};
+
+	constructor(key: string, value: T, serializer: json<T> = JSON) {
+		this.key = key;
+		this.value = value;
+		this.serializer = serializer;
+		this.setId(0);
+	}
+
+	public setId(id: number) {
+		if (this.id === id) return;
+		this.cleanup();
+		this.id = id;
+		const key = `VUI3_${this.id}_${this.key}`;
+		if (browser) {
+			const item = localStore(key, this.value, this.serializer);
+			this.value = $state.snapshot(item.value) as T;
+			let writeOver = true;
+			const data = queryStore({
+				client,
+				query: getCategory,
+				variables: { id }
+			});
+			let unSubscribe = () => {};
+			new Promise((resolve) => {
+				unSubscribe = data.subscribe((e) => {
+					if (e.data?.category) {
+						const val = e.data.category.meta.find(
+							(meta) => meta.key === key
+						)?.value;
+
+						if (
+							val &&
+							writeOver &&
+							val !== this.serialize(this.value) &&
+							id === this.id
+						) {
+							this.value = this.deserialize(val);
+						}
+						resolve(true);
+					}
+				});
+				setTimeout(() => {
+					resolve(true);
+				}, 10000);
+			}).then(() => {
+				unSubscribe();
+			});
+			this.cleanup = $effect.root(() => {
+				$effect(() => {
+					if (this.serialize(this.value) === this.serialize(item.value)) return;
+					writeOver = false;
+					item.value = $state.snapshot(this.value) as T;
+					client
+						.mutation(setCategoryMeta, {
+							id,
+							key,
+							value: this.serialize(this.value)
+						})
+						.toPromise();
+				});
+			});
+		}
+	}
+
+	private serialize(value: T): string {
+		return this.serializer.stringify(value);
+	}
+
+	private deserialize(item: string): T {
+		return this.serializer.parse(item);
+	}
+}
+
+function CategoryMetaStore<T>(
+	key: string,
+	value: T,
+	serializer: json<T> = JSON
+) {
+	return new categoryMetaStoreSingle<T>(key, value, serializer);
+}
+
+const unread = CategoryMetaStore<'on' | 'intermediate' | 'off'>(
+	'Unread',
+	'intermediate'
+);
+const Downloaded = CategoryMetaStore<'on' | 'intermediate' | 'off'>(
+	'Downloaded',
+	'intermediate'
+);
+const Tracked = CategoryMetaStore<'on' | 'intermediate' | 'off'>(
+	'Tracked',
+	'intermediate'
+);
+const Ascending = CategoryMetaStore<boolean>('Ascending', false);
+const sortOptions = CategoryMetaStore<keyof typeof sort>('Sort', 'ID');
+const libraryCategoryTotalCounts = CategoryMetaStore<boolean>(
+	'TotalCounts',
+	true
+);
+const downloadsBadge = CategoryMetaStore<boolean>('DownloadsBadge', true);
+
+const unreadBadge = CategoryMetaStore<boolean>('UnreadBadge', true);
+
+const displayOptions = CategoryMetaStore<display>('Display', display.Compact);
+
+const unreadUseDefault = CategoryMetaStore<boolean>('UnreadUseDefault', true);
+
+const DownloadedUseDefault = CategoryMetaStore<boolean>(
+	'DownloadedUseDefault',
+	true
+);
+
+const TrackedUseDefault = CategoryMetaStore<boolean>('TrackedUseDefault', true);
+
+const AscendingUseDefault = CategoryMetaStore<boolean>(
+	'AscendingUseDefault',
+	true
+);
+
+const sortOptionsUseDefault = CategoryMetaStore<boolean>(
+	'SortUseDefault',
+	true
+);
+
+const libraryCategoryTotalCountsUseDefault = CategoryMetaStore<boolean>(
+	'TotalCountsUseDefault',
+	true
+);
+
+const downloadsBadgeUseDefault = CategoryMetaStore<boolean>(
+	'DownloadsBadgeUseDefault',
+	true
+);
+
+const unreadBadgeUseDefault = CategoryMetaStore<boolean>(
+	'UnreadBadgeUseDefault',
+	true
+);
+
+const displayOptionsUseDefault = CategoryMetaStore<boolean>(
+	'DisplayUseDefault',
+	true
+);
+export function categoryFilterMetas(id: number) {
+	unread.setId(id);
+	Downloaded.setId(id);
+	Tracked.setId(id);
+	Ascending.setId(id);
+	sortOptions.setId(id);
+	libraryCategoryTotalCounts.setId(id);
+	downloadsBadge.setId(id);
+	unreadBadge.setId(id);
+	displayOptions.setId(id);
+	unreadUseDefault.setId(id);
+	DownloadedUseDefault.setId(id);
+	TrackedUseDefault.setId(id);
+	AscendingUseDefault.setId(id);
+	sortOptionsUseDefault.setId(id);
+	libraryCategoryTotalCountsUseDefault.setId(id);
+	downloadsBadgeUseDefault.setId(id);
+	unreadBadgeUseDefault.setId(id);
+	displayOptionsUseDefault.setId(id);
+	return {
+		unread,
+		Downloaded,
+		Tracked,
+		Ascending,
+		sortOptions,
+		libraryCategoryTotalCounts,
+		downloadsBadge,
+		unreadBadge,
+		displayOptions,
+		unreadUseDefault,
+		DownloadedUseDefault,
+		TrackedUseDefault,
+		AscendingUseDefault,
+		sortOptionsUseDefault,
+		libraryCategoryTotalCountsUseDefault,
+		downloadsBadgeUseDefault,
+		unreadBadgeUseDefault,
+		displayOptionsUseDefault
+	};
+}
+
+export function categoryFilterMetasReadOnly(id: number) {
+	const {
+		unread,
+		Downloaded,
+		Tracked,
+		Ascending,
+		sortOptions,
+		libraryCategoryTotalCounts,
+		downloadsBadge,
+		unreadBadge,
+		displayOptions,
+		unreadUseDefault,
+		DownloadedUseDefault,
+		TrackedUseDefault,
+		AscendingUseDefault,
+		sortOptionsUseDefault,
+		libraryCategoryTotalCountsUseDefault,
+		downloadsBadgeUseDefault,
+		unreadBadgeUseDefault,
+		displayOptionsUseDefault
+	} = untrack(() => categoryFilterMetas(id));
+
+	const value = $derived({
+		unread: unreadUseDefault.value ? gmState.value.Unread : unread.value,
+		Downloaded: DownloadedUseDefault.value
+			? gmState.value.Downloaded
+			: Downloaded.value,
+		Tracked: TrackedUseDefault.value ? gmState.value.Tracked : Tracked.value,
+		Ascending: AscendingUseDefault.value ? gmState.value.Asc : Ascending.value,
+		sortOptions: sortOptionsUseDefault.value
+			? gmState.value.Sort
+			: sortOptions.value,
+		libraryCategoryTotalCounts: libraryCategoryTotalCountsUseDefault.value
+			? gmState.value.libraryCategoryTotalCounts
+			: libraryCategoryTotalCounts.value,
+		downloadsBadge: downloadsBadgeUseDefault.value
+			? gmState.value.downloadsBadge
+			: downloadsBadge.value,
+		unreadBadge: unreadBadgeUseDefault.value
+			? gmState.value.unreadBadge
+			: unreadBadge.value,
+		displayOptions: displayOptionsUseDefault.value
+			? gmState.value.Display
+			: displayOptions.value
+	} as const);
+
+	return { value };
+}
diff --git a/src/routes/(app)/(library)/+page.svelte b/src/routes/(app)/(library)/+page.svelte
index c9d9ee5..d5c81ed 100644
--- a/src/routes/(app)/(library)/+page.svelte
+++ b/src/routes/(app)/(library)/+page.svelte
@@ -10,7 +10,11 @@
 	import IntersectionObserver from '$lib/components/IntersectionObserver.svelte';
 	import MangaCard from '$lib/components/MangaCard.svelte';
 	import { longPress } from '$lib/press';
-	import { display, gmState } from '$lib/simpleStores.svelte';
+	import {
+		categoryFilterMetasReadOnly,
+		display,
+		gmState
+	} from '$lib/simpleStores.svelte';
 	import { Tab, TabGroup } from '@skeletonlabs/skeleton';
 	import { queryParam, ssp } from 'sveltekit-search-params';
 	import LibraryActions from './libraryActions.svelte';
@@ -55,6 +59,8 @@
 	const query = queryParam('q', ssp.string(), { pushHistory: false });
 	const tab = queryParam('tab', ssp.number(), { pushHistory: false });
 
+	let FilterMeta = $derived(categoryFilterMetasReadOnly($tab ?? 0));
+
 	function validateParsedQuery(query: parsedQueryType) {
 		if (query === null) return;
 		if (query.length === 0) return;
@@ -281,18 +287,23 @@
 				}
 			}
 
-			if (gmState.value.Downloaded === 'on' && ele.downloadCount === 0)
+			if (FilterMeta.value.Downloaded === 'on' && ele.downloadCount === 0)
 				return false;
-			if (gmState.value.Downloaded === 'off' && ele.downloadCount !== 0)
+			if (FilterMeta.value.Downloaded === 'off' && ele.downloadCount !== 0)
 				return false;
 
-			if (gmState.value.Unread === 'on' && ele.unreadCount === 0) return false;
-			if (gmState.value.Unread === 'off' && ele.unreadCount !== 0) return false;
+			if (FilterMeta.value.unread === 'on' && ele.unreadCount === 0)
+				return false;
+			if (FilterMeta.value.unread === 'off' && ele.unreadCount !== 0)
+				return false;
 
-			if (gmState.value.Tracked === 'on' && ele.trackRecords.nodes.length === 0)
+			if (
+				FilterMeta.value.Tracked === 'on' &&
+				ele.trackRecords.nodes.length === 0
+			)
 				return false;
 			if (
-				gmState.value.Tracked === 'off' &&
+				FilterMeta.value.Tracked === 'off' &&
 				ele.trackRecords.nodes.length !== 0
 			)
 				return false;
@@ -323,11 +334,11 @@
 	});
 	let sortedMangas = $derived(
 		filteredMangas
-			? gmState.value.Sort === 'Random'
+			? FilterMeta.value.sortOptions === 'Random'
 				? shuffle([...filteredMangas])
 				: [...filteredMangas].sort((a, b) => {
 						let tru = true;
-						switch (gmState.value.Sort) {
+						switch (FilterMeta.value.sortOptions) {
 							case 'ID':
 								tru = a.id > b.id;
 								break;
@@ -359,7 +370,7 @@
 								break;
 						}
 
-						if (gmState.value.Asc) tru = !tru;
+						if (FilterMeta.value.Ascending) tru = !tru;
 						return tru ? -1 : 1;
 					})
 			: undefined
@@ -377,10 +388,11 @@
 			<div class="aspect-cover w-full">
 				<div
 					class="placeholder h-full animate-pulse
-			{gmState.value.Display === display.Compact && 'rounded-lg'}
-			{gmState.value.Display === display.Comfortable && 'rounded-none rounded-t-lg'}"
+			{FilterMeta.value.displayOptions === display.Compact && 'rounded-lg'}
+			{FilterMeta.value.displayOptions === display.Comfortable &&
+						'rounded-none rounded-t-lg'}"
 				></div>
-				{#if gmState.value.Display === display.Comfortable}
+				{#if FilterMeta.value.displayOptions === display.Comfortable}
 					<div
 						class="placeholder h-12 animate-pulse rounded-none rounded-b-lg px-2 text-center"
 					></div>
@@ -399,7 +411,7 @@
 				<Tab bind:group={$tab} name={cat.name} value={cat.id}>
 					{#snippet lead()}
 						{cat.name}
-						{#if gmState.value.libraryCategoryTotalCounts}
+						{#if FilterMeta.value.libraryCategoryTotalCounts}
 							<span
 								class="variant-filled-surface m-0 rounded-full px-1 text-sm"
 							>
@@ -417,10 +429,11 @@
 						<div class="aspect-cover w-full">
 							<div
 								class="placeholder h-full animate-pulse
-									{gmState.value.Display === display.Compact && 'rounded-lg'}
-									{gmState.value.Display === display.Comfortable && 'rounded-none rounded-t-lg'}"
+									{FilterMeta.value.displayOptions === display.Compact && 'rounded-lg'}
+									{FilterMeta.value.displayOptions === display.Comfortable &&
+									'rounded-none rounded-t-lg'}"
 							></div>
-							{#if gmState.value.Display === display.Comfortable}
+							{#if FilterMeta.value.displayOptions === display.Comfortable}
 								<div
 									class="placeholder h-12 animate-pulse rounded-none rounded-b-lg px-2 text-center"
 								></div>
@@ -470,15 +483,16 @@
 												thumbnailUrl={manga.thumbnailUrl ?? ''}
 												title={manga.title}
 												class="select-none {$selectMode && 'opacity-80'}"
-												rounded="{gmState.value.Display === display.Compact &&
-													'rounded-lg'}
-												{gmState.value.Display === display.Comfortable && 'rounded-none rounded-t-lg'}"
+												rounded="{FilterMeta.value.displayOptions ===
+													display.Compact && 'rounded-lg'}
+												{FilterMeta.value.displayOptions === display.Comfortable &&
+													'rounded-none rounded-t-lg'}"
 											>
 												<div class="absolute left-2 top-2 flex">
-													{#if manga.downloadCount && gmState.value.downloadsBadge}
+													{#if manga.downloadCount && FilterMeta.value.downloadsBadge}
 														<div
 															class="{manga.unreadCount &&
-															gmState.value.unreadBadge
+															FilterMeta.value.unreadBadge
 																? 'rounded-l'
 																: 'rounded'}
 															variant-filled-primary m-0 px-1 py-0.5"
@@ -486,10 +500,10 @@
 															{manga.downloadCount}
 														</div>
 													{/if}
-													{#if manga.unreadCount && gmState.value.unreadBadge}
+													{#if manga.unreadCount && FilterMeta.value.unreadBadge}
 														<div
 															class="{manga.downloadCount &&
-															gmState.value.downloadsBadge
+															FilterMeta.value.downloadsBadge
 																? 'rounded-r'
 																: 'rounded'}
 															variant-filled-secondary m-0 px-1 py-0.5"
@@ -510,7 +524,7 @@
 														/>
 													</div>
 												{/if}
-												{#if gmState.value.Display === display.Compact}
+												{#if FilterMeta.value.displayOptions === display.Compact}
 													<div
 														class="variant-glass absolute bottom-0 left-0 right-0 rounded-b-olg"
 													>
@@ -523,7 +537,7 @@
 													</div>
 												{/if}
 											</MangaCard>
-											{#if gmState.value.Display === display.Comfortable}
+											{#if FilterMeta.value.displayOptions === display.Comfortable}
 												<div class="variant-glass-surface rounded-b-lg">
 													<div
 														class="line-clamp-2 h-12 px-2 text-center"
@@ -536,7 +550,7 @@
 										</a>
 									{/if}
 								</div>
-								{#if !intersecting && gmState.value.Display === display.Comfortable}
+								{#if !intersecting && FilterMeta.value.displayOptions === display.Comfortable}
 									<div class="h-12"></div>
 								{/if}
 							{/snippet}
diff --git a/src/routes/(app)/(library)/LibraryFilterModal.svelte b/src/routes/(app)/(library)/LibraryFilterModal.svelte
index b3f15b8..6c0f238 100644
--- a/src/routes/(app)/(library)/LibraryFilterModal.svelte
+++ b/src/routes/(app)/(library)/LibraryFilterModal.svelte
@@ -17,157 +17,533 @@
 		getModalStore,
 		localStorageStore
 	} from '@skeletonlabs/skeleton';
-	import { display, gmState, sort } from '$lib/simpleStores.svelte';
+	import {
+		categoryFilterMetas,
+		display,
+		gmState,
+		sort
+	} from '$lib/simpleStores.svelte';
 
 	import { enumEntries } from '$lib/util.svelte';
 	import Slide from '$lib/components/Slide.svelte';
 	import ThreeStateSwitchCustom from '$lib/components/ThreeStateSwitchCustom.svelte';
 	const modalStore = getModalStore();
+	let tabSetArch = localStorageStore('libraryModalTabsArch', 0);
 	let tabSet = localStorageStore('libraryModalTabs', 0);
+	type props = {
+		tab: number;
+	};
+	let { tab }: props = $props();
+	const {
+		unread,
+		Downloaded,
+		Tracked,
+		Ascending,
+		sortOptions,
+		libraryCategoryTotalCounts,
+		downloadsBadge,
+		unreadBadge,
+		displayOptions,
+		unreadUseDefault,
+		DownloadedUseDefault,
+		TrackedUseDefault,
+		AscendingUseDefault,
+		sortOptionsUseDefault,
+		libraryCategoryTotalCountsUseDefault,
+		downloadsBadgeUseDefault,
+		unreadBadgeUseDefault,
+		displayOptionsUseDefault
+	} = categoryFilterMetas(tab);
 </script>
 
 {#if $modalStore[0]}
-	<div class="card w-modal space-y-4 rounded-lg p-0 shadow-xl">
+	<div class="card w-modal rounded-lg p-0 shadow-xl">
 		<TabGroup
 			justify="justify-center"
 			flex="flex"
-			class="bg-surface-100-800-token w-full select-none rounded-t-lg focus:outline-0"
+			class="bg-surface-100-800-token w-full select-none !space-y-1 rounded-t-lg focus:outline-0"
 			rounded="rounded-t-lg"
 			active="border-b-2 variant-glass-primary"
-			regionList="variant-soft-surface focus:outline-0"
+			regionList="variant-soft-surface focus:outline-0 rounded-t-lg"
 			regionPanel="focus:outline-0"
 		>
 			<Tab
-				class="w-1/3 focus:outline-0"
+				class="w-1/2 focus:outline-0"
 				regionTab="w-full focus:outline-0"
-				bind:group={$tabSet}
-				name="tab1"
+				bind:group={$tabSetArch}
+				name="tab0"
 				value={0}
 			>
 				<div
 					class="flex h-full flex-row items-center justify-center focus:outline-0"
 				>
 					<IconWrapper name="mdi:filter" class="text-4xl" />
-					<span>Filter</span>
+					<span>Per Category</span>
 				</div>
 			</Tab>
 			<Tab
-				class="w-1/3 focus:outline-0"
+				class="w-1/2 focus:outline-0"
 				regionTab="w-full focus:outline-0"
-				bind:group={$tabSet}
-				name="tab2"
+				bind:group={$tabSetArch}
+				name="tab1"
 				value={1}
 			>
-				<div class="flex h-full flex-row items-center justify-center">
-					<IconWrapper name="mdi:sort" class="text-4xl" />
-					<span>Sort</span>
-				</div>
-			</Tab>
-			<Tab
-				class="w-1/3 focus:outline-0"
-				regionTab="w-full focus:outline-0"
-				bind:group={$tabSet}
-				name="tab3"
-				value={2}
-			>
-				<div class="flex h-full flex-row items-center justify-center">
-					<IconWrapper name="mdi:television-guide" class="text-4xl" />
-					<span>Display</span>
+				<div
+					class="flex h-full flex-row items-center justify-center focus:outline-0"
+				>
+					<IconWrapper name="mdi:filter" class="text-4xl" />
+					<span>Default</span>
 				</div>
 			</Tab>
-			<!-- Tab Panels --->
 			<svelte:fragment slot="panel">
-				<div class="mx-4 mb-4">
-					{#if $tabSet === 0}
-						<ThreeStateSwitchCustom
-							bind:state={gmState.value.Unread}
-							label={'Unread'}
-							class="w-full p-1 pl-2 hover:variant-glass-surface focus:outline-0"
-							labelClass="w-full flex-1"
-						>
-							<span>Unread</span>
-						</ThreeStateSwitchCustom>
-						<ThreeStateSwitchCustom
-							bind:state={gmState.value.Downloaded}
-							label={'Downloaded'}
-							class="w-full p-1 pl-2 hover:variant-glass-surface focus:outline-0"
-							labelClass="w-full"
-						>
-							<span>Downloaded</span>
-						</ThreeStateSwitchCustom>
-						<ThreeStateSwitchCustom
-							bind:state={gmState.value.Tracked}
-							label={'Tracked'}
-							class="w-full p-1 pl-2 hover:variant-glass-surface focus:outline-0"
-							labelClass="w-full"
-						>
-							<span>Tracked</span>
-						</ThreeStateSwitchCustom>
-					{:else if $tabSet === 1}
-						<Switch
-							triState={false}
-							bind:checked={gmState.value.Asc}
-							label={'Ascending'}
-							class="w-full p-1 pl-2 hover:variant-glass-surface focus:outline-0"
-							labelClass="w-full"
+				<div class="">
+					{#if $tabSetArch === 0}
+						<!-- per category -->
+						<TabGroup
+							justify="justify-center"
+							flex="flex"
+							class="bg-surface-100-800-token w-full select-none focus:outline-0"
+							rounded=""
+							active="border-b-2 variant-glass-primary"
+							regionList="variant-soft-surface focus:outline-0"
+							regionPanel="focus:outline-0"
 						>
-							<span>Ascending</span>
-						</Switch>
-						<RadioGroup
-							rounded="rounded-container-token"
-							background="bg-transparent"
-							class="focus:outline-0"
-							border="border-0"
-							display="flex-col"
-							active="variant-glass-primary"
-						>
-							{#each enumEntries(sort) as [value, name]}
-								<RadioItem
-									bind:group={gmState.value.Sort}
-									class="focus:outline-0"
-									name="justify"
-									{value}
+							<Tab
+								class="w-1/3 focus:outline-0"
+								regionTab="w-full focus:outline-0"
+								bind:group={$tabSet}
+								name="tab1"
+								value={0}
+							>
+								<div
+									class="flex h-full flex-row items-center justify-center focus:outline-0"
 								>
-									{name}
-								</RadioItem>
-							{/each}
-						</RadioGroup>
-					{:else if $tabSet === 2}
-						<Slide
-							bind:checked={gmState.value.libraryCategoryTotalCounts}
-							class="w-full p-1 pl-2 outline-0 hover:variant-glass-surface"
-						>
-							Category Total Counts
-						</Slide>
-						<Slide
-							bind:checked={gmState.value.downloadsBadge}
-							class="w-full p-1 pl-2 outline-0 hover:variant-glass-surface"
-							>Downloads Badge</Slide
-						>
-						<Slide
-							bind:checked={gmState.value.unreadBadge}
-							class="w-full p-1 pl-2 outline-0 hover:variant-glass-surface"
-							>Unread Badge</Slide
-						>
-						<RadioGroup
-							rounded="rounded-container-token"
-							background="bg-transparent"
-							class="focus:outline-0"
-							border="border-0"
-							display="flex-col"
-							active="variant-glass-primary"
+									<IconWrapper name="mdi:filter" class="text-4xl" />
+									<span>Filter</span>
+								</div>
+							</Tab>
+							<Tab
+								class="w-1/3 focus:outline-0"
+								regionTab="w-full focus:outline-0"
+								bind:group={$tabSet}
+								name="tab2"
+								value={1}
+							>
+								<div class="flex h-full flex-row items-center justify-center">
+									<IconWrapper name="mdi:sort" class="text-4xl" />
+									<span>Sort</span>
+								</div>
+							</Tab>
+							<Tab
+								class="w-1/3 focus:outline-0"
+								regionTab="w-full focus:outline-0"
+								bind:group={$tabSet}
+								name="tab3"
+								value={2}
+							>
+								<div class="flex h-full flex-row items-center justify-center">
+									<IconWrapper name="mdi:television-guide" class="text-4xl" />
+									<span>Display</span>
+								</div>
+							</Tab>
+							<!-- Tab Panels --->
+							<svelte:fragment slot="panel">
+								<div class="mx-4 mb-4">
+									{#if $tabSet === 0}
+										<ThreeStateSwitchCustom
+											title="shift click to toggle per or default"
+											onclick={(e: MouseEvent) => {
+												if (e.shiftKey) {
+													e.preventDefault();
+													e.stopPropagation();
+													unreadUseDefault.value = !unreadUseDefault.value;
+												}
+											}}
+											bind:state={unread.value}
+											label={'Unread'}
+											class="w-full p-1 pl-2 hover:variant-glass-surface focus:outline-0 
+											{unreadUseDefault.value && 'opacity-20'}"
+											labelClass="w-full flex-1"
+										>
+											<span>Unread</span>
+										</ThreeStateSwitchCustom>
+										<ThreeStateSwitchCustom
+											title="shift click to toggle per or default"
+											onclick={(e: MouseEvent) => {
+												if (e.shiftKey) {
+													e.preventDefault();
+													e.stopPropagation();
+													DownloadedUseDefault.value = !DownloadedUseDefault.value;
+												}
+											}}
+											bind:state={Downloaded.value}
+											label={'Downloaded'}
+											class="w-full p-1 pl-2 hover:variant-glass-surface focus:outline-0
+											{DownloadedUseDefault.value && 'opacity-20'}"
+											labelClass="w-full"
+										>
+											<span>Downloaded</span>
+										</ThreeStateSwitchCustom>
+										<ThreeStateSwitchCustom
+											title="shift click to toggle per or default"
+											onclick={(e: MouseEvent) => {
+												if (e.shiftKey) {
+													e.preventDefault();
+													e.stopPropagation();
+													TrackedUseDefault.value = !TrackedUseDefault.value;
+												}
+											}}
+											bind:state={Tracked.value}
+											label={'Tracked'}
+											class="w-full p-1 pl-2 hover:variant-glass-surface focus:outline-0
+											{TrackedUseDefault.value && 'opacity-20'}"
+											labelClass="w-full"
+										>
+											<span>Tracked</span>
+										</ThreeStateSwitchCustom>
+									{:else if $tabSet === 1}
+										<Switch
+											title="shift click to toggle per or default"
+											triState={false}
+											bind:checked={Ascending.value}
+											label={'Ascending'}
+											class="w-full p-1 pl-2 hover:variant-glass-surface focus:outline-0
+											{AscendingUseDefault.value && 'opacity-20'}"
+											onclick={(e: MouseEvent) => {
+												if (e.shiftKey) {
+													e.preventDefault();
+													e.stopPropagation();
+													AscendingUseDefault.value = !AscendingUseDefault.value;
+												}
+											}}
+											labelClass="w-full"
+										>
+											<span>Ascending</span>
+										</Switch>
+										<RadioGroup
+											rounded="rounded-container-token"
+											background="bg-transparent"
+											class="focus:outline-0
+											{sortOptionsUseDefault.value && 'opacity-20'}"
+											border="border-0"
+											display="flex-col"
+											active="variant-glass-primary"
+										>
+											{#each enumEntries(sort) as [value, name]}
+												<RadioItem
+													title="shift click to toggle per or default"
+													bind:group={sortOptions.value}
+													class="focus:outline-0"
+													name="justify"
+													{value}
+													onclick={(e: MouseEvent) => {
+														if (e.shiftKey) {
+															e.preventDefault();
+															e.stopPropagation();
+															sortOptionsUseDefault.value = !sortOptionsUseDefault.value;
+														}
+													}}
+												>
+													{name}
+												</RadioItem>
+											{/each}
+										</RadioGroup>
+									{:else if $tabSet === 2}
+										<Switch
+											title="shift click to toggle per or default"
+											bind:checked={libraryCategoryTotalCounts.value}
+											class="w-full p-1 pl-2 outline-0 hover:variant-glass-surface
+											{libraryCategoryTotalCountsUseDefault.value && 'opacity-20'}"
+											onclick={(e: MouseEvent) => {
+												if (e.shiftKey) {
+													e.preventDefault();
+													e.stopPropagation();
+													libraryCategoryTotalCountsUseDefault.value = !libraryCategoryTotalCountsUseDefault.value;
+												}
+											}}
+										>
+											Category Total Counts
+										</Switch>
+										<Switch
+											title="shift click to toggle per or default"
+											bind:checked={downloadsBadge.value}
+											class="w-full p-1 pl-2 outline-0 hover:variant-glass-surface
+											{downloadsBadgeUseDefault.value && 'opacity-20'}"
+											onclick={(e: MouseEvent) => {
+												if (e.shiftKey) {
+													e.preventDefault();
+													e.stopPropagation();
+													downloadsBadgeUseDefault.value = !downloadsBadgeUseDefault.value;
+												}
+											}}
+										>
+											Downloads Badge
+										</Switch>
+										<Switch
+											title="shift click to toggle per or default"
+											bind:checked={unreadBadge.value}
+											class="w-full p-1 pl-2 outline-0 hover:variant-glass-surface
+											{unreadBadgeUseDefault.value && 'opacity-20'}"
+											onclick={(e: MouseEvent) => {
+												if (e.shiftKey) {
+													e.preventDefault();
+													e.stopPropagation();
+													unreadBadgeUseDefault.value = !unreadBadgeUseDefault.value;
+												}
+											}}
+										>
+											Unread Badge
+										</Switch>
+										<RadioGroup
+											rounded="rounded-container-token"
+											background="bg-transparent"
+											class="focus:outline-0
+											{displayOptionsUseDefault.value && 'opacity-20'}"
+											border="border-0"
+											display="flex-col"
+											active="variant-glass-primary"
+										>
+											{#each enumEntries(display) as [value, name]}
+												<RadioItem
+													title="shift click to toggle per or default"
+													bind:group={displayOptions.value}
+													class="focus:outline-0"
+													name="justify"
+													{value}
+													onclick={(e: MouseEvent) => {
+														if (e.shiftKey) {
+															e.preventDefault();
+															e.stopPropagation();
+															displayOptionsUseDefault.value = !displayOptionsUseDefault.value;
+														}
+													}}
+												>
+													{name}
+												</RadioItem>
+											{/each}
+										</RadioGroup>
+									{/if}
+								</div>
+							</svelte:fragment>
+						</TabGroup>
+					{:else if $tabSetArch === 1}
+						<!-- defaults -->
+						<TabGroup
+							justify="justify-center"
+							flex="flex"
+							class="bg-surface-100-800-token w-full select-none focus:outline-0"
+							rounded=""
+							active="border-b-2 variant-glass-primary"
+							regionList="variant-soft-surface focus:outline-0"
+							regionPanel="focus:outline-0"
 						>
-							{#each enumEntries(display) as [value, name]}
-								<RadioItem
-									bind:group={gmState.value.Display}
-									class="focus:outline-0"
-									name="justify"
-									{value}
+							<Tab
+								class="w-1/3 focus:outline-0"
+								regionTab="w-full focus:outline-0"
+								bind:group={$tabSet}
+								name="tab1"
+								value={0}
+							>
+								<div
+									class="flex h-full flex-row items-center justify-center focus:outline-0"
 								>
-									{name}
-								</RadioItem>
-							{/each}
-						</RadioGroup>
+									<IconWrapper name="mdi:filter" class="text-4xl" />
+									<span>Filter</span>
+								</div>
+							</Tab>
+							<Tab
+								class="w-1/3 focus:outline-0"
+								regionTab="w-full focus:outline-0"
+								bind:group={$tabSet}
+								name="tab2"
+								value={1}
+							>
+								<div class="flex h-full flex-row items-center justify-center">
+									<IconWrapper name="mdi:sort" class="text-4xl" />
+									<span>Sort</span>
+								</div>
+							</Tab>
+							<Tab
+								class="w-1/3 focus:outline-0"
+								regionTab="w-full focus:outline-0"
+								bind:group={$tabSet}
+								name="tab3"
+								value={2}
+							>
+								<div class="flex h-full flex-row items-center justify-center">
+									<IconWrapper name="mdi:television-guide" class="text-4xl" />
+									<span>Display</span>
+								</div>
+							</Tab>
+							<!-- Tab Panels --->
+							<svelte:fragment slot="panel">
+								<div class="mx-4 mb-4">
+									{#if $tabSet === 0}
+										<ThreeStateSwitchCustom
+											onclick={(e: MouseEvent) => {
+												if (e.shiftKey) {
+													e.preventDefault();
+													e.stopPropagation();
+													unreadUseDefault.value = !unreadUseDefault.value;
+												}
+											}}
+											bind:state={gmState.value.Unread}
+											label={'Unread'}
+											class="w-full p-1 pl-2 hover:variant-glass-surface focus:outline-0 
+											{!unreadUseDefault.value && 'opacity-20'}"
+											labelClass="w-full flex-1"
+										>
+											<span>Unread</span>
+										</ThreeStateSwitchCustom>
+										<ThreeStateSwitchCustom
+											onclick={(e: MouseEvent) => {
+												if (e.shiftKey) {
+													e.preventDefault();
+													e.stopPropagation();
+													DownloadedUseDefault.value = !DownloadedUseDefault.value;
+												}
+											}}
+											bind:state={gmState.value.Downloaded}
+											label={'Downloaded'}
+											class="w-full p-1 pl-2 hover:variant-glass-surface focus:outline-0
+											{!DownloadedUseDefault.value && 'opacity-20'}"
+											labelClass="w-full"
+										>
+											<span>Downloaded</span>
+										</ThreeStateSwitchCustom>
+										<ThreeStateSwitchCustom
+											onclick={(e: MouseEvent) => {
+												if (e.shiftKey) {
+													e.preventDefault();
+													e.stopPropagation();
+													TrackedUseDefault.value = !TrackedUseDefault.value;
+												}
+											}}
+											bind:state={gmState.value.Tracked}
+											label={'Tracked'}
+											class="w-full p-1 pl-2 hover:variant-glass-surface focus:outline-0
+											{!TrackedUseDefault.value && 'opacity-20'}"
+											labelClass="w-full"
+										>
+											<span>Tracked</span>
+										</ThreeStateSwitchCustom>
+									{:else if $tabSet === 1}
+										<Switch
+											triState={false}
+											bind:checked={gmState.value.Asc}
+											label={'Ascending'}
+											class="w-full p-1 pl-2 hover:variant-glass-surface focus:outline-0
+											{!AscendingUseDefault.value && 'opacity-20'}"
+											labelClass="w-full"
+											onclick={(e: MouseEvent) => {
+												if (e.shiftKey) {
+													e.preventDefault();
+													e.stopPropagation();
+													AscendingUseDefault.value = !AscendingUseDefault.value;
+												}
+											}}
+										>
+											<span>Ascending</span>
+										</Switch>
+										<RadioGroup
+											rounded="rounded-container-token"
+											background="bg-transparent"
+											class="focus:outline-0"
+											border="border-0"
+											display="flex-col"
+											active="variant-glass-primary"
+										>
+											{#each enumEntries(sort) as [value, name]}
+												<RadioItem
+													bind:group={gmState.value.Sort}
+													class="focus:outline-0
+													{!sortOptionsUseDefault.value && 'opacity-20'}"
+													name="justify"
+													{value}
+													onclick={(e: MouseEvent) => {
+														if (e.shiftKey) {
+															e.preventDefault();
+															e.stopPropagation();
+															sortOptionsUseDefault.value = !sortOptionsUseDefault.value;
+														}
+													}}
+												>
+													{name}
+												</RadioItem>
+											{/each}
+										</RadioGroup>
+									{:else if $tabSet === 2}
+										<Slide
+											bind:checked={gmState.value.libraryCategoryTotalCounts}
+											class="w-full p-1 pl-2 outline-0 hover:variant-glass-surface
+											{!libraryCategoryTotalCountsUseDefault.value && 'opacity-20'}"
+											onclick={(e: MouseEvent) => {
+												if (e.shiftKey) {
+													e.preventDefault();
+													e.stopPropagation();
+													libraryCategoryTotalCountsUseDefault.value = !libraryCategoryTotalCountsUseDefault.value;
+												}
+											}}
+										>
+											Category Total Counts
+										</Slide>
+										<Slide
+											bind:checked={gmState.value.downloadsBadge}
+											class="w-full p-1 pl-2 outline-0 hover:variant-glass-surface
+											{!downloadsBadgeUseDefault.value && 'opacity-20'}"
+											onclick={(e: MouseEvent) => {
+												if (e.shiftKey) {
+													e.preventDefault();
+													e.stopPropagation();
+													downloadsBadgeUseDefault.value = !downloadsBadgeUseDefault.value;
+												}
+											}}
+											>Downloads Badge</Slide
+										>
+										<Slide
+											bind:checked={gmState.value.unreadBadge}
+											class="w-full p-1 pl-2 outline-0 hover:variant-glass-surface
+											{!unreadBadgeUseDefault.value && 'opacity-20'}"
+											onclick={(e: MouseEvent) => {
+												if (e.shiftKey) {
+													e.preventDefault();
+													e.stopPropagation();
+													unreadBadgeUseDefault.value = !unreadBadgeUseDefault.value;
+												}
+											}}
+											>Unread Badge</Slide
+										>
+										<RadioGroup
+											rounded="rounded-container-token"
+											background="bg-transparent"
+											class="focus:outline-0"
+											border="border-0"
+											display="flex-col"
+											active="variant-glass-primary"
+										>
+											{#each enumEntries(display) as [value, name]}
+												<RadioItem
+													bind:group={gmState.value.Display}
+													class="focus:outline-0
+													{!displayOptionsUseDefault.value && 'opacity-20'}"
+													name="justify"
+													{value}
+													onclick={(e: MouseEvent) => {
+														if (e.shiftKey) {
+															e.preventDefault();
+															e.stopPropagation();
+															displayOptionsUseDefault.value = !displayOptionsUseDefault.value;
+														}
+													}}
+												>
+													{name}
+												</RadioItem>
+											{/each}
+										</RadioGroup>
+									{/if}
+								</div>
+							</svelte:fragment>
+						</TabGroup>
 					{/if}
 				</div>
 			</svelte:fragment>
diff --git a/src/routes/(app)/(library)/libraryActions.svelte b/src/routes/(app)/(library)/libraryActions.svelte
index a04ed41..2ba519d 100644
--- a/src/routes/(app)/(library)/libraryActions.svelte
+++ b/src/routes/(app)/(library)/libraryActions.svelte
@@ -27,6 +27,7 @@
 	import { enqueueChapterDownloads, updateMangas } from '$lib/gql/Mutations';
 	import Tooltip from '$lib/components/Tooltip.svelte';
 	import LibrarySearchHelp from './LibrarySearchHelp.svelte';
+	import { queryParam, ssp } from 'sveltekit-search-params';
 
 	const client = getContextClient();
 
@@ -38,12 +39,14 @@
 
 	const toastStore = getToastStore();
 	const modalStore = getModalStore();
+	const tab = queryParam('tab', ssp.number(), { pushHistory: false });
 
 	function handelFilter() {
+		if ($tab === null) return;
 		modalStore.trigger({
 			type: 'component',
 			backdropClasses: '!p-0',
-			component: { ref: LibraryFilterModal }
+			component: { ref: LibraryFilterModal, props: { tab: $tab } }
 		});
 	}