Suwayomi · Robonau · Mar 7, 2024 · Mar 7, 2024 · Mar 7, 2024 · Mar 7, 2024
diff --git a/.prettierrc b/.prettierrc
@@ -3,8 +3,7 @@
 	"singleQuote": true,
 	"trailingComma": "none",
 	"printWidth": 80,
-	"plugins": ["prettier-plugin-svelte"],
-	"pluginSearchDirs": ["."],
+	"plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"],
 	"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }],
 	"bracketSameLine": false
 }
diff --git a/bun.lockb b/bun.lockb
diff --git a/package.json b/package.json
@@ -8,49 +8,50 @@
 		"preview": "vite preview",
 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-		"lint": "prettier --plugin-search-dir . --check . && eslint .",
-		"format": "prettier --plugin-search-dir . --write .",
+		"lint": "prettier --check . && eslint .",
+		"format": "prettier --write .",
 		"generate": "graphql-codegen",
 		"build-md5": "find build -type f | sort | xargs md5sum | awk '{ print $1 }' | tr -d '\n' | md5sum| awk '{ print $1 }' > buildZip/md5sum "
 	},
 	"devDependencies": {
-		"@0no-co/graphqlsp": "^1.4.1",
-		"@skeletonlabs/skeleton": "^2.7.1",
+		"@0no-co/graphqlsp": "^1.4.2",
+		"@skeletonlabs/skeleton": "^2.9.0",
 		"@skeletonlabs/tw-plugin": "^0.3.1",
-		"@sveltejs/kit": "^2.5.0",
-		"@sveltejs/vite-plugin-svelte": "^3.0.1",
+		"@sveltejs/kit": "^2.5.2",
+		"@sveltejs/vite-plugin-svelte": "^3.0.2",
 		"@tailwindcss/forms": "^0.5.7",
 		"@tailwindcss/typography": "0.5.10",
 		"@types/node": "^20.10.7",
-		"@typescript-eslint/eslint-plugin": "^6.19.1",
-		"@typescript-eslint/parser": "^6.19.1",
-		"autoprefixer": "10.4.17",
-		"eslint": "^8.56.0",
-		"eslint-config-prettier": "^8.5.0",
+		"@typescript-eslint/eslint-plugin": "^7.1.1",
+		"@typescript-eslint/parser": "^7.1.1",
+		"autoprefixer": "10.4.18",
+		"eslint": "^8.57.0",
+		"eslint-config-prettier": "^9.1.0",
 		"eslint-plugin-svelte": "^2.35.1",
-		"postcss": "8.4.33",
-		"prettier": "^2.8.0",
-		"prettier-plugin-svelte": "^2.10.1",
+		"postcss": "8.4.35",
+		"prettier": "^3.2.5",
+		"prettier-plugin-svelte": "^3.2.2",
+		"prettier-plugin-tailwindcss": "^0.5.12",
 		"svelte": "4.2.9",
-		"svelte-check": "^3.6.3",
+		"svelte-check": "^3.6.6",
 		"tailwindcss": "^3.4.1",
-		"typescript": "^5.3.3",
-		"vite": "^5.0.12",
+		"typescript": "5.3.3",
+		"vite": "^5.1.5",
 		"vite-plugin-tailwind-purgecss": "^0.2.0"
 	},
 	"type": "module",
 	"dependencies": {
-		"@floating-ui/dom": "^1.6.0",
+		"@floating-ui/dom": "^1.6.3",
 		"@iconify/svelte": "^3.1.6",
 		"@iconify/types": "^2.0.0",
 		"@sveltejs/adapter-static": "^3.0.1",
-		"@urql/exchange-graphcache": "^6.4.1",
-		"@urql/svelte": "^4.0.4",
+		"@urql/exchange-graphcache": "^6.5.0",
+		"@urql/svelte": "^4.1.0",
 		"devalue": "^4.3.2",
-		"gql.tada": "canary",
+		"gql.tada": "1.3.1",
 		"graphql": "^16.8.1",
-		"graphql-ws": "^5.14.3",
+		"graphql-ws": "^5.15.0",
 		"p-queue": "^8.0.1",
-		"sveltekit-search-params": "^2.1.0"
+		"sveltekit-search-params": "^2.1.1"
 	}
 }
diff --git a/src/app.html b/src/app.html
@@ -6,7 +6,7 @@
  file, You can obtain one at http://mozilla.org/MPL/2.0/.
 -->
 
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en" class="dark">
 	<head>
 		<meta charset="utf-8" />

diff --git a/src/lib/components/IconButton.svelte b/src/lib/components/IconButton.svelte
@@ -27,5 +27,5 @@
 	class="{height} aspect-square {hover} {$$props.class ?? ''}"
 	on:click
 >
-	<IconWrapper width="100%" height="100%" {name} class="text-5xl  m-0 p-2" />
+	<IconWrapper width="100%" height="100%" {name} class="m-0  p-2 text-5xl" />
 </button>
diff --git a/src/lib/components/Image.svelte b/src/lib/components/Image.svelte
@@ -72,7 +72,7 @@
 >
 	{#if State === state.error}
 		<div
-			class="card flex justify-center items-center {rounded} {aspect}
+			class="card flex items-center justify-center {rounded} {aspect}
 			{LoadingWidth.length ? LoadingWidth : width}
 			{LoadingHeight.length ? LoadingHeight : height}
 			{$$props.class}"
@@ -81,7 +81,7 @@
 				<div>Failed.</div>
 				{#if reload_button}
 					<button
-						class="btn variant-filled-surface"
+						class="variant-filled-surface btn"
 						on:click|capture|stopPropagation={() => {
 							State = state.loading;
 							if (!img) return;
@@ -99,7 +99,7 @@
 		</div>
 	{:else if State === state.loading}
 		<div
-			class="placeholder absolute top-0 bottom-0 left-0 right-0 animate-pulse {rounded} {aspect}
+			class="placeholder absolute bottom-0 left-0 right-0 top-0 animate-pulse {rounded} {aspect}
 			{LoadingWidth.length ? LoadingWidth : width}
 			{LoadingHeight.length ? LoadingHeight : height}
 			 {$$props.class}"

diff --git a/src/lib/components/LangFilterModal.svelte b/src/lib/components/LangFilterModal.svelte
@@ -17,13 +17,13 @@
 </script>
 
 {#if $modalStore[0]}
-	<div class="card p-0 w-modal shadow-xl space-y-4 rounded-lg max-h-screen">
-		<h1 class="h3 pt-4 pl-4">Allowed Languages</h1>
-		<div class="pl-4 border-y border-surface-700">
-			<div class="max-h-96 overflow-y-auto grid grid-cols-1 gap-1 pr-4">
+	<div class="card w-modal max-h-screen space-y-4 rounded-lg p-0 shadow-xl">
+		<h1 class="h3 pl-4 pt-4">Allowed Languages</h1>
+		<div class="border-y border-surface-700 pl-4">
+			<div class="grid max-h-96 grid-cols-1 gap-1 overflow-y-auto pr-4">
 				{#each langs as lang}
 					<Slide
-						class="outline-0 p-1 pl-2 hover:variant-glass-surface"
+						class="p-1 pl-2 outline-0 hover:variant-glass-surface"
 						on:changeE={(e) => {
 							if (e.detail) {
 								$langFilter.add(lang);

diff --git a/src/lib/components/MainAppRail.svelte b/src/lib/components/MainAppRail.svelte
@@ -21,9 +21,9 @@
 				tip={Loc.title}
 				placement="right"
 				tipclass="z-20"
-				class="w-full flex justify-center items-center"
+				class="flex w-full items-center justify-center"
 			>
-				<IconWrapper name={Loc.icon} class="w-4/6 h-full aspect-square" />
+				<IconWrapper name={Loc.icon} class="aspect-square h-full w-4/6" />
 			</Tooltip>
 		</AppRailAnchor>
 	{/each}

diff --git a/src/lib/components/MobileAppNavigation.svelte b/src/lib/components/MobileAppNavigation.svelte
@@ -29,10 +29,10 @@
 			selected={Loc.match($page.url.pathname)}
 			class="h-full [&>.tab-interface]:h-full [&>div>.tab-label]:h-full"
 		>
-			<div class="w-full h-full flex flex-col items-center">
+			<div class="flex h-full w-full flex-col items-center">
 				<IconWrapper
 					name={Loc.icon}
-					class="max-h-full w-full grow aspect-square"
+					class="aspect-square max-h-full w-full grow"
 				/>
 				<span class="text-sm">{Loc.title}</span>
 			</div>

diff --git a/src/lib/components/Search.svelte b/src/lib/components/Search.svelte
@@ -48,10 +48,10 @@
 </script>
 
 <div
-	class="overflow-hidden
-			max-w-[16rem]
+	class="max-w-[16rem]
+			overflow-hidden
 			transition-all duration-500 ease-in-out
-			{searchElementHidden ? 'max-w-[0rem] sm:max-w-[1rem] opacity-0' : ''}"
+			{searchElementHidden ? 'max-w-[0rem] opacity-0 sm:max-w-[1rem]' : ''}"
 >
 	<input
 		bind:this={inputElement}

diff --git a/src/lib/components/Slide.svelte b/src/lib/components/Slide.svelte
@@ -168,9 +168,9 @@
 				class:cursor-not-allowed={$$props.disabled}
 			>
 				{#if checked}
-					<IconWrapper name="mdi:check" class="w-full h-full aspect-square" />
+					<IconWrapper name="mdi:check" class="aspect-square h-full w-full" />
 				{:else}
-					<IconWrapper name="mdi:close" class="w-full h-full aspect-square" />
+					<IconWrapper name="mdi:close" class="aspect-square h-full w-full" />
 				{/if}
 			</div>
 		</div>

diff --git a/src/lib/components/Tooltip.svelte b/src/lib/components/Tooltip.svelte
@@ -33,10 +33,10 @@
 </div>
 
 <div class={tipclass} data-popup={tip}>
-	<div class="card p-2 variant-filled-surface">
+	<div class="card variant-filled-surface p-2">
 		<slot name="tooltip">
 			<p>{tip}</p>
 		</slot>
-		<div class="arrow variant-filled-surface" />
+		<div class="variant-filled-surface arrow" />
 	</div>
 </div>
diff --git a/src/lib/components/TooltipIconButton.svelte b/src/lib/components/TooltipIconButton.svelte
@@ -25,7 +25,7 @@
 	{tipclass}
 	{placement}
 	{tip}
-	class=" cursor-pointer h-full {$$props.class}"
+	class="h-full cursor-pointer {$$props.class}"
 >
 	<IconButton {name} {hover} on:click />
 </Tooltip>
diff --git a/src/lib/components/TriStateSlide.svelte b/src/lib/components/TriStateSlide.svelte
@@ -194,9 +194,9 @@
 				class:cursor-not-allowed={$$props.disabled}
 			>
 				{#if state === 1}
-					<IconWrapper name="mdi:check" class="w-full h-full aspect-square" />
+					<IconWrapper name="mdi:check" class="aspect-square h-full w-full" />
 				{:else if state === 2}
-					<IconWrapper name="mdi:close" class="w-full h-full aspect-square" />
+					<IconWrapper name="mdi:close" class="aspect-square h-full w-full" />
 				{/if}
 			</div>
 		</div>

diff --git a/src/lib/gql/Fragments.ts b/src/lib/gql/Fragments.ts
@@ -157,3 +157,106 @@ export const TrackerTypeFragment = graphql(
 	`,
 	[]
 );
+
+export const PreferenceFragment = graphql(
+	`
+		fragment PreferenceFragment on Preference {
+			... on CheckBoxPreference {
+				__typename
+				CheckBoxCheckBoxCurrentValue: currentValue
+				summary
+				CheckBoxDefault: default
+				key
+				CheckBoxTitle: title
+			}
+			... on EditTextPreference {
+				__typename
+				EditTextCurrentValue: currentValue
+				EditTextDefault: default
+				EditTextTitle: title
+				text
+				summary
+				key
+				dialogTitle
+				dialogMessage
+			}
+			... on SwitchPreference {
+				__typename
+				SwitchCurrentValue: currentValue
+				summary
+				key
+				SwitchDefault: default
+				SwitchTitle: title
+			}
+			... on MultiSelectListPreference {
+				__typename
+				dialogMessage
+				dialogTitle
+				MultiSelectListTitle: title
+				summary
+				key
+				entryValues
+				entries
+				MultiSelectListDefault: default
+				MultiSelectListCurrentValue: currentValue
+			}
+			... on ListPreference {
+				__typename
+				ListCurrentValue: currentValue
+				ListDefault: default
+				ListTitle: title
+				summary
+				key
+				entryValues
+				entries
+			}
+		}
+	`,
+	[]
+);
+
+export const FilterFragment = graphql(
+	`
+		fragment FilterFragment on Filter {
+			... on TriStateFilter {
+				__typename
+				name
+				TriStateDefault: default
+			}
+			... on CheckBoxFilter {
+				__typename
+				CheckBoxDefault: default
+				name
+			}
+			... on TextFilter {
+				__typename
+				name
+				TextDefault: default
+			}
+			... on SortFilter {
+				__typename
+				values
+				name
+				SortDefault: default {
+					ascending
+					index
+				}
+			}
+			... on SeparatorFilter {
+				__typename
+				name
+			}
+			... on SelectFilter {
+				__typename
+				values
+				name
+				SelectDefault: default
+			}
+			... on HeaderFilter {
+				__typename
+				name
+			}
+		}
+	`,
+	[]
+);