feat(Anime): Add additional sort options

5 files changed, 64 insertions, 26 deletions

diff --git a/src/lib/Data/AniList/media.ts b/src/lib/Data/AniList/media.ts
index b9e70a7d..c032edaa 100644
--- a/src/lib/Data/AniList/media.ts
+++ b/src/lib/Data/AniList/media.ts
@@ -78,9 +78,11 @@ export interface Media {
   };
   startDate: {
     year: number;
+    month: number;
   };
   endDate: {
     year: number;
+    month: number;
   };
   coverImage: {
     extraLarge: string;
@@ -154,8 +156,8 @@ const collectionQueryTemplate = (type: Type, userId: number, options: Collection
 						progress progressVolumes status repeat createdAt updatedAt
 						score(format: POINT_100) startedAt { year month day } completedAt { year month day }
 					}
-					startDate { year }
-					endDate { year }
+					startDate { year month }
+					endDate { year month }
 					coverImage { extraLarge medium }
 					${
             options.includeRelations
diff --git a/src/lib/List/Anime/CompletedAnimeList.svelte b/src/lib/List/Anime/CompletedAnimeList.svelte
index 76ec7207..1fa775c4 100644
--- a/src/lib/List/Anime/CompletedAnimeList.svelte
+++ b/src/lib/List/Anime/CompletedAnimeList.svelte
@@ -85,10 +85,32 @@
     );
 
     outdatedCompletedAnime.sort((a: Media, b: Media) => {
-      const difference = (anime: Media) =>
-        anime.episodes - (anime.mediaListEntry || { progress: 0 }).progress;
+      switch ($settings.displayAnimeSort) {
+        case 'difference': {
+          const difference = (anime: Media) =>
+            (anime.nextAiringEpisode?.episode === -1
+              ? 99999
+              : anime.nextAiringEpisode?.episode || -1) -
+            (anime.mediaListEntry || { progress: 0 }).progress;
 
-      return difference(a) - difference(b);
+          return difference(a) - difference(b);
+        }
+
+        case 'end_date':
+          return (
+            new Date(a.endDate.year, a.endDate.month - 1).getTime() -
+            new Date(b.endDate.year, b.endDate.month - 1).getTime()
+          );
+
+        case 'start_date':
+          return (
+            new Date(a.startDate.year, a.startDate.month - 1).getTime() -
+            new Date(b.startDate.year, b.startDate.month - 1).getTime()
+          );
+
+        case 'time_remaining':
+          return (a.nextAiringEpisode?.airingAt || 9999) - (b.nextAiringEpisode?.airingAt || 9999);
+      }
     });
 
     if (!endTime) endTime = performance.now() - startTime;
diff --git a/src/lib/List/Anime/DueAnimeList.svelte b/src/lib/List/Anime/DueAnimeList.svelte
index 1453baeb..8650590b 100644
--- a/src/lib/List/Anime/DueAnimeList.svelte
+++ b/src/lib/List/Anime/DueAnimeList.svelte
@@ -73,16 +73,31 @@
       dueAnime = dueAnime.filter((media: Media) => media.nextAiringEpisode?.episode !== -1);
 
     dueAnime.sort((a: Media, b: Media) => {
-      if ($settings.displaySortedByDifference === true) {
-        const difference = (anime: Media) =>
-          (anime.nextAiringEpisode?.episode === -1
-            ? 99999
-            : anime.nextAiringEpisode?.episode || -1) -
-          (anime.mediaListEntry || { progress: 0 }).progress;
-
-        return difference(a) - difference(b);
-      } else {
-        return (a.nextAiringEpisode?.airingAt || 9999) - (b.nextAiringEpisode?.airingAt || 9999);
+      switch ($settings.displayAnimeSort) {
+        case 'difference': {
+          const difference = (anime: Media) =>
+            (anime.nextAiringEpisode?.episode === -1
+              ? 99999
+              : anime.nextAiringEpisode?.episode || -1) -
+            (anime.mediaListEntry || { progress: 0 }).progress;
+
+          return difference(a) - difference(b);
+        }
+
+        case 'end_date':
+          return (
+            new Date(a.endDate.year, a.endDate.month - 1).getTime() -
+            new Date(b.endDate.year, b.endDate.month - 1).getTime()
+          );
+
+        case 'start_date':
+          return (
+            new Date(a.startDate.year, a.startDate.month - 1).getTime() -
+            new Date(b.startDate.year, b.startDate.month - 1).getTime()
+          );
+
+        case 'time_remaining':
+          return (a.nextAiringEpisode?.airingAt || 9999) - (b.nextAiringEpisode?.airingAt || 9999);
       }
     });
 
diff --git a/src/lib/Settings/Categories/Display.svelte b/src/lib/Settings/Categories/Display.svelte
index e47bf2ae..a2803d98 100644
--- a/src/lib/Settings/Categories/Display.svelte
+++ b/src/lib/Settings/Categories/Display.svelte
@@ -316,16 +316,15 @@
 <p />
 
 <b>List sort</b><br />
-<SettingCheckboxToggle setting="displayReverseSort" text="Reverse anime sort order" />
+<select bind:value={$settings.displayAnimeSort}>
+  <option value="time_remaining">Time Remaining Until Next Airing Episode</option>
+  <option value="difference">Difference Between Progress and Next Airing Episode</option>
+  <option value="start_date">Start Date</option>
+  <option value="end_date">End Date</option>
+</select>
+Anime sort order
 <br />
-<SettingCheckboxToggle
-  setting="displaySortedByDifference"
-  text={$locale().settings.display.categories.media.fields.sortBy.title}
->
-  <SettingHint lineBreak>
-    {$locale().settings.display.categories.media.fields.sortBy.hint}
-  </SettingHint>
-</SettingCheckboxToggle>
+<SettingCheckboxToggle setting="displayReverseSort" text="Reverse anime sort order" />
 <br />
 
 <b>{$locale().settings.display.categories.media.title}</b><br />
diff --git a/src/stores/settings.ts b/src/stores/settings.ts
index 4ccb5ca0..df2691b5 100644
--- a/src/stores/settings.ts
+++ b/src/stores/settings.ts
@@ -16,7 +16,6 @@ export interface Settings {
   displayNotStarted: boolean;
   displayUnresolved: boolean;
   calculateChaptersRoundedDown: boolean;
-  displaySortedByDifference: boolean;
   displayOutboundLinksTo: 'anilist' | 'livechartme' | 'animeschedule' | 'myanimelist';
   displayPausedMedia: boolean;
   displayLimitListHeight: boolean;
@@ -68,6 +67,7 @@ export interface Settings {
   debugDummyLists: boolean;
   displayScheduleFilterList: boolean;
   displayReverseSort: boolean;
+  displayAnimeSort: 'difference' | 'start_date' | 'end_date' | 'time_remaining';
 }
 
 const defaultSettings: Settings = {
@@ -85,7 +85,6 @@ const defaultSettings: Settings = {
   displayUpcomingAnimeCollapsed: false,
   displayAnimeCollapsed: false,
   displayMangaCollapsed: false,
-  displaySortedByDifference: false,
   displayAoButa: 'none',
   disableManga: false,
   disableAnime: false,
@@ -112,6 +111,7 @@ const defaultSettings: Settings = {
   displayDataSaver: false,
   displayScheduleFilterList: false,
   displayReverseSort: false,
+  displayAnimeSort: 'time_remaining',
 
   // Debug
   debugDummyLists: false,