feat: Add reverse sorting settings toggle and functionality

5 files changed, 38 insertions, 15 deletions

diff --git a/src/lib/List/Anime/CleanAnimeList.svelte b/src/lib/List/Anime/CleanAnimeList.svelte
index 57e201d7..5a93c731 100644
--- a/src/lib/List/Anime/CleanAnimeList.svelte
+++ b/src/lib/List/Anime/CleanAnimeList.svelte
@@ -127,7 +127,14 @@
 {/if}
 
 {#if $settings.displayCoverModeAnime}
-  <CleanGrid {media} {dummy} type="anime" {upcoming} {notYetReleased}>
+  <CleanGrid
+    {media}
+    {dummy}
+    type="anime"
+    {upcoming}
+    {notYetReleased}
+    reverseSort={$settings.displayReverseSort}
+  >
     <div slot="title" let:title={anime} let:progress>
       {#if !upcoming && !notYetReleased}
         {pendingUpdate === anime.id ? progress + 1 : progress}{@html totalEpisodes(anime)}
@@ -149,7 +156,14 @@
     </div>
   </CleanGrid>
 {:else}
-  <CleanList {media} type="anime" {upcoming} {notYetReleased} {lastUpdatedMedia}>
+  <CleanList
+    {media}
+    type="anime"
+    {upcoming}
+    {notYetReleased}
+    {lastUpdatedMedia}
+    reverseSort={$settings.displayReverseSort}
+  >
     <span slot="information" let:title={anime} let:progress>
       {#if !upcoming || notYetReleased || !$settings.displayCountdownRightAligned}
         <span class="opaque">|</span>
diff --git a/src/lib/List/CleanGrid.svelte b/src/lib/List/CleanGrid.svelte
index ec93a685..549d388f 100644
--- a/src/lib/List/CleanGrid.svelte
+++ b/src/lib/List/CleanGrid.svelte
@@ -12,15 +12,17 @@
   export let type: 'anime' | 'manga';
   export let upcoming = false;
   export let notYetReleased = false;
+  export let reverseSort = false;
 
   let uniqueID = new Date().getTime();
+  let processedMedia = reverseSort ? media.reverse() : media;
 </script>
 
 <div
   class="covers"
   style={`grid-template-columns: repeat(auto-fill, minmax(${$settings.displayCoverWidth}px, 1fr))`}
 >
-  {#each media as title}
+  {#each processedMedia as title}
     {@const progress = (title.mediaListEntry || { progress: 0 }).progress}
 
     {#if type === 'anime' ? upcoming || notYetReleased || progress !== (title.nextAiringEpisode?.episode || 9999) - 1 : progress != title.episodes}
diff --git a/src/lib/List/CleanList.svelte b/src/lib/List/CleanList.svelte
index 47811932..82f0709b 100644
--- a/src/lib/List/CleanList.svelte
+++ b/src/lib/List/CleanList.svelte
@@ -10,10 +10,13 @@
   export let upcoming = false;
   export let notYetReleased = false;
   export let lastUpdatedMedia: number;
+  export let reverseSort = false;
+
+  let processedMedia = reverseSort ? media.reverse() : media;
 </script>
 
 <ul>
-  {#each media as title}
+  {#each processedMedia as title}
     {@const progress = (title.mediaListEntry || { progress: 0 }).progress}
 
     {#if type === 'anime' ? upcoming || notYetReleased || progress !== (title.nextAiringEpisode?.episode || 9999) - 1 : progress !== title.episodes}
diff --git a/src/lib/Settings/Categories/Display.svelte b/src/lib/Settings/Categories/Display.svelte
index 1dbe4c95..e47bf2ae 100644
--- a/src/lib/Settings/Categories/Display.svelte
+++ b/src/lib/Settings/Categories/Display.svelte
@@ -315,6 +315,19 @@
 
 <p />
 
+<b>List sort</b><br />
+<SettingCheckboxToggle setting="displayReverseSort" text="Reverse 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>
+<br />
+
 <b>{$locale().settings.display.categories.media.title}</b><br />
 <SettingCheckboxToggle
   setting="displayHoverCover"
@@ -388,17 +401,6 @@
 
 <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>
-
-<br />
-
 <select bind:value={$settings.displayAoButa} on:change={onHelperChange}>
   <option value="mai">{$locale().settings.display.categories.helper.options.mai}</option>
   <option value="mai_2">{$locale().settings.display.categories.helper.options.mai} #2</option>
diff --git a/src/stores/settings.ts b/src/stores/settings.ts
index 012e5207..4ccb5ca0 100644
--- a/src/stores/settings.ts
+++ b/src/stores/settings.ts
@@ -67,6 +67,7 @@ export interface Settings {
   displayDataSaver: boolean;
   debugDummyLists: boolean;
   displayScheduleFilterList: boolean;
+  displayReverseSort: boolean;
 }
 
 const defaultSettings: Settings = {
@@ -110,6 +111,7 @@ const defaultSettings: Settings = {
   displayFiltersIncludeCompleted: false,
   displayDataSaver: false,
   displayScheduleFilterList: false,
+  displayReverseSort: false,
 
   // Debug
   debugDummyLists: false,