From d91d1fbbd89e7d12f78a6715800157c0010bed77 Mon Sep 17 00:00:00 2001
From: Fuwn <contact@fuwn.me>
Date: Thu, 12 Jun 2025 01:13:39 -0700
Subject: feat(list): Persistent per-list collapsed state

---
 src/lib/List/Anime/DueIndexColumn.svelte   |  9 +++++++--
 src/lib/Settings/Categories/Display.svelte | 15 ---------------
 src/routes/+page.svelte                    | 11 ++++++++---
 src/routes/completed/+page.svelte          | 11 ++++++++---
 4 files changed, 23 insertions(+), 23 deletions(-)

diff --git a/src/lib/List/Anime/DueIndexColumn.svelte b/src/lib/List/Anime/DueIndexColumn.svelte
index 61f2a178..920035bc 100644
--- a/src/lib/List/Anime/DueIndexColumn.svelte
+++ b/src/lib/List/Anime/DueIndexColumn.svelte
@@ -2,15 +2,20 @@
   import type { AniListAuthorisation } from '$lib/Data/AniList/identity';
   import Skeleton from '$lib/Loading/Skeleton.svelte';
   import locale from '$stores/locale';
-  import settings from '$stores/settings';
   import ListTitle from '../ListTitle.svelte';
   import AnimeList from '$lib/List/Anime/DueAnimeList.svelte';
+  import { onMount } from 'svelte';
+  import stateBin from '$stores/stateBin';
 
   export let userIdentity: { id: number };
   export let user: AniListAuthorisation;
+
+  onMount(() => {
+    $stateBin.dueAnimeListOpen ??= true;
+  });
 </script>
 
-<details open={!$settings.displayAnimeCollapsed} class="list list-due">
+<details bind:open={$stateBin.dueAnimeListOpen} class="list list-due">
   {#if userIdentity.id !== -2}
     <AnimeList {user} />
   {:else}
diff --git a/src/lib/Settings/Categories/Display.svelte b/src/lib/Settings/Categories/Display.svelte
index dbc1c447..8617e74d 100644
--- a/src/lib/Settings/Categories/Display.svelte
+++ b/src/lib/Settings/Categories/Display.svelte
@@ -162,21 +162,6 @@
 
 <p />
 
-<b>{$locale().settings.display.categories.collapsePanelsByDefault}</b><br />
-<SettingCheckboxToggle
-  setting="displayUpcomingAnimeCollapsed"
-  text={$locale().settings.media.upcomingAnime}
-  lineBreak={false}
-/>
-<SettingCheckboxToggle
-  setting="displayAnimeCollapsed"
-  text={$locale().settings.media.anime}
-  lineBreak={false}
-/>
-<SettingCheckboxToggle setting="displayMangaCollapsed" text={$locale().settings.media.manga} />
-
-<p />
-
 <b>{$locale().settings.display.categories.motionAndAccessibility.title}</b><br />
 <SettingCheckboxToggle
   setting="displayDisableAnimations"
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}
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}
-- 
cgit v1.2.3