feat(List): List filtering

4 files changed, 55 insertions, 6 deletions

diff --git a/src/lib/List/Anime/CleanAnimeList.svelte b/src/lib/List/Anime/CleanAnimeList.svelte
index 5a93c731..fabbeec5 100644
--- a/src/lib/List/Anime/CleanAnimeList.svelte
+++ b/src/lib/List/Anime/CleanAnimeList.svelte
@@ -49,6 +49,20 @@
       );
     })
     .reduce((a, b) => a + b, 0);
+  const lists = Array.from(
+    new Set(
+      media
+        .flatMap((m) => Object.entries(m.mediaListEntry?.customLists ?? {}))
+        .filter(([_, value]) => value)
+        .map(([key]) => key)
+    )
+  );
+  let selectedList = 'All';
+
+  $: filteredMedia =
+    selectedList === 'All'
+      ? media
+      : media.filter((m) => m.mediaListEntry?.customLists?.[selectedList]);
 
   onMount(() => {
     if (dummy) return;
@@ -124,11 +138,21 @@
   No anime to display. <button on:click={() => (animeLists = cleanCache(user, $identity))}>
     Force refresh
   </button>
+{:else if $settings.displayMediaListFilter}
+  <select bind:value={selectedList}>
+    <option value="All">All</option>
+
+    {#each lists as list}
+      <option value={list}>{list}</option>
+    {/each}
+  </select>
+
+  <p />
 {/if}
 
 {#if $settings.displayCoverModeAnime}
   <CleanGrid
-    {media}
+    media={filteredMedia}
     {dummy}
     type="anime"
     {upcoming}
@@ -157,7 +181,7 @@
   </CleanGrid>
 {:else}
   <CleanList
-    {media}
+    media={filteredMedia}
     type="anime"
     {upcoming}
     {notYetReleased}
diff --git a/src/lib/List/CleanGrid.svelte b/src/lib/List/CleanGrid.svelte
index 549d388f..1bd65feb 100644
--- a/src/lib/List/CleanGrid.svelte
+++ b/src/lib/List/CleanGrid.svelte
@@ -15,7 +15,8 @@
   export let reverseSort = false;
 
   let uniqueID = new Date().getTime();
-  let processedMedia = reverseSort ? media.reverse() : media;
+
+  $: processedMedia = reverseSort ? media.reverse() : media;
 </script>
 
 <div
diff --git a/src/lib/List/CleanList.svelte b/src/lib/List/CleanList.svelte
index 82f0709b..79011ea8 100644
--- a/src/lib/List/CleanList.svelte
+++ b/src/lib/List/CleanList.svelte
@@ -12,7 +12,7 @@
   export let lastUpdatedMedia: number;
   export let reverseSort = false;
 
-  let processedMedia = reverseSort ? media.reverse() : media;
+  $: processedMedia = reverseSort ? media.reverse() : media;
 </script>
 
 <ul>
diff --git a/src/lib/List/Manga/CleanMangaList.svelte b/src/lib/List/Manga/CleanMangaList.svelte
index 139297d2..623f7c37 100644
--- a/src/lib/List/Manga/CleanMangaList.svelte
+++ b/src/lib/List/Manga/CleanMangaList.svelte
@@ -39,6 +39,20 @@
       return (manga.episodes || 1) - (manga.mediaListEntry?.progress || 0);
     })
     .reduce((a, b) => a + b, 0);
+  const lists = Array.from(
+    new Set(
+      media
+        .flatMap((m) => Object.entries(m.mediaListEntry?.customLists ?? {}))
+        .filter(([_, value]) => value)
+        .map(([key]) => key)
+    )
+  );
+  let selectedList = 'All';
+
+  $: filteredMedia =
+    selectedList === 'All'
+      ? media
+      : media.filter((m) => m.mediaListEntry?.customLists?.[selectedList]);
 
   onMount(() => {
     serviceStatusResponse = fetch(proxy('https://api.mangadex.org/ping'));
@@ -117,10 +131,20 @@
     >
     You can re-enable it later in the <a href={root('/settings')}>Settings</a>.
   </span>
+{:else if $settings.displayMediaListFilter}
+  <select bind:value={selectedList}>
+    <option value="All">All</option>
+
+    {#each lists as list}
+      <option value={list}>{list}</option>
+    {/each}
+  </select>
+
+  <p />
 {/if}
 
 {#if $settings.displayCoverModeManga || dummy}
-  <CleanGrid {media} {dummy} type="manga">
+  <CleanGrid media={filteredMedia} {dummy} type="manga">
     <div slot="title" let:title={manga} let:progress>
       {pendingUpdate === manga.id ? progress + 1 : progress}{#if !due}
         <span class="opaque">/{manga.chapters || '?'}</span>
@@ -147,7 +171,7 @@
     </div>
   </CleanGrid>
 {:else}
-  <CleanList {media} type="manga" {lastUpdatedMedia}>
+  <CleanList media={filteredMedia} type="manga" {lastUpdatedMedia}>
     <span slot="information" let:title={manga} let:progress>
       <span class="opaque">|</span>
       {pendingUpdate === manga.id ? progress + 1 : progress}{#if !due}