feat(list): Persistent per-list collapsed state

1 files changed, 8 insertions, 3 deletions

diff --git a/src/routes/completed/+page.svelte b/src/routes/completed/+page.svelte
index d483d7fe..ca8d22e8 100644
--- a/src/routes/completed/+page.svelte
+++ b/src/routes/completed/+page.svelte
@@ -11,12 +11,17 @@
   import Skeleton from '$lib/Loading/Skeleton.svelte';
   import locale from '$stores/locale.js';
   import Landing from '$lib/Landing.svelte';
+  import stateBin from '$stores/stateBin.js';
 
   export let data;
 
   let heightObserver: NodeJS.Timeout;
 
-  onMount(() => (heightObserver = setInterval(() => createHeightObserver(), 0)));
+  onMount(() => {
+    heightObserver = setInterval(() => createHeightObserver(), 0);
+    $stateBin.completedAnimeListOpen ??= true;
+    $stateBin.completedMangaListOpen ??= true;
+  });
 
   onDestroy(() => clearInterval(heightObserver));
 </script>
@@ -34,7 +39,7 @@
 {:else}
   <div class="list-container">
     {#if !$settings.displayFiltersIncludeCompleted || !$settings.disableAnime}
-      <details open={!$settings.displayAnimeCollapsed} class="list">
+      <details bind:open={$stateBin.completedAnimeListOpen} class="list">
         {#if $userIdentity.id !== -2}
           <WatchingAnimeList user={data.user} />
         {:else}
@@ -46,7 +51,7 @@
     {/if}
 
     {#if !$settings.displayFiltersIncludeCompleted || !$settings.disableManga}
-      <details open={!$settings.displayMangaCollapsed} class="list">
+      <details bind:open={$stateBin.completedMangaListOpen} class="list">
         {#if $userIdentity.id !== -2}
           <MangaListTemplate
             user={data.user}