3 files changed, 43 insertions, 8 deletions

diff --git a/src/lib/List/Due/AnimeList.svelte b/src/lib/List/Due/AnimeList.svelte
index a9f347a9..506107f8 100644
--- a/src/lib/List/Due/AnimeList.svelte
+++ b/src/lib/List/Due/AnimeList.svelte
@@ -4,6 +4,7 @@
 	import { onMount } from 'svelte';
 	import anime from '../../../stores/anime';
 	import animeLastPrune from '../../../stores/mangaLastPrune';
+	import sortByDifference from '../../../stores/sortByDifference';
 
 	export let user: AniListAuthorisation;
 	export let identity: UserIdentity;
@@ -44,16 +45,23 @@
 		}
 
 		finalMedia.sort((a: Media, b: Media) => {
-			const difference = (anime: Media) => {
+			if ($sortByDifference === 'false') {
+				const difference = (anime: Media) => {
+					return (
+						(anime.nextAiringEpisode?.episode === -1
+							? 99999
+							: anime.nextAiringEpisode?.episode || -1) -
+						(anime['mediaListEntry'] || { progress: 0 })['progress']
+					);
+				};
+
+				return difference(a) - difference(b);
+			} else {
 				return (
-					(anime.nextAiringEpisode?.episode === -1
-						? 99999
-						: anime.nextAiringEpisode?.episode || -1) -
-					(anime['mediaListEntry'] || { progress: 0 })['progress']
+					(a.nextAiringEpisode?.timeUntilAiring || 9999) -
+					(b.nextAiringEpisode?.timeUntilAiring || 9999)
 				);
-			};
-
-			return difference(a) - difference(b);
+			}
 		});
 
 		finalMedia = finalMedia.filter((item, index, array) => {
diff --git a/src/routes/settings/+page.svelte b/src/routes/settings/+page.svelte
index f50208b5..874d3804 100644
--- a/src/routes/settings/+page.svelte
+++ b/src/routes/settings/+page.svelte
@@ -6,6 +6,7 @@
 	import cacheMangaMinutes from '../../stores/cacheMangaMinutes';
 	import cacheMinutes from '../../stores/cacheMinutes';
 	import roundDownChapters from '../../stores/roundDownChapters';
+	import sortByDifference from '../../stores/sortByDifference';
 
 	export let data;
 
@@ -74,6 +75,18 @@
 			>
 		</li>
 		<li>
+			<a
+				href="#"
+				on:click={() =>
+					$sortByDifference === 'true'
+						? sortByDifference.set('false')
+						: sortByDifference.set('true')}
+				>Sort anime by {@html $sortByDifference === 'true'
+					? 'difference between last watched and next episode'
+					: 'days left until next episode'}</a
+			>
+		</li>
+		<li>
 			<a href="#" on:click={pruneUnresolved}>Re-cache <b>ALL</b> unresolved manga</a>
 		</li>
 		<li><a href="#" on:click={pruneAll}>Re-cache <b>ALL</b> manga</a></li>
diff --git a/src/stores/sortByDifference.ts b/src/stores/sortByDifference.ts
new file mode 100644
index 00000000..1a26371e
--- /dev/null
+++ b/src/stores/sortByDifference.ts
@@ -0,0 +1,14 @@
+import { browser } from '$app/environment';
+import { writable } from 'svelte/store';
+
+const sortByDifference = writable<string>(
+	browser ? localStorage.getItem('sortByDifference') ?? 'true' : 'true'
+);
+
+sortByDifference.subscribe((value) => {
+	if (browser) {
+		localStorage.setItem('sortByDifference', value);
+	}
+});
+
+export default sortByDifference;