feat(List): List filtering

1 files changed, 26 insertions, 2 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}