feat: Add reverse sorting settings toggle and functionality

3 files changed, 23 insertions, 4 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}