feat(List): List filtering

1 files changed, 26 insertions, 2 deletions

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}