feat(list): Persistent per-list collapsed state

1 files changed, 8 insertions, 3 deletions

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 653c3836..8e6a5d52 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -12,12 +12,17 @@
   import locale from '$stores/locale.js';
   import Landing from '$lib/Landing.svelte';
   import IndexColumn from '$lib/List/Anime/DueIndexColumn.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.upcomingAnimeListOpen ??= true;
+    $stateBin.dueMangaListOpen ??= true;
+  });
 
   onDestroy(() => clearInterval(heightObserver));
 </script>
@@ -47,7 +52,7 @@
   >
     <div class="left-column">
       {#if !$settings.disableUpcomingAnime}
-        <details open={!$settings.displayUpcomingAnimeCollapsed} class="list list-upcoming">
+        <details bind:open={$stateBin.upcomingAnimeListOpen} class="list list-upcoming">
           {#if $userIdentity.id !== -2}
             <UpcomingAnimeList user={data.user} />
           {:else}
@@ -69,7 +74,7 @@
       {/if}
 
       {#if !$settings.disableManga}
-        <details open={!$settings.displayMangaCollapsed} class="list list-manga">
+        <details bind:open={$stateBin.dueMangaListOpen} class="list list-manga">
           {#if $userIdentity.id !== -2}
             <MangaListTemplate
               user={data.user}