🎨 Allow saving and restoring of showing/hiding of replenishment workbook for curriculum (#1726)

Author: KATO-Hiro

src/lib/components/WorkBooks/WorkBookList.svelte

@@ -4,6 +4,7 @@
   import { ButtonGroup, Button, Toggle } from 'svelte-5-ui-lib';
 
   import { taskGradesByWorkBookTypeStore } from '$lib/stores/task_grades_by_workbook_type';
+  import { replenishmentWorkBooksStore } from '$lib/stores/replenishment_workbook.svelte';
   import { canRead } from '$lib/utils/authorship';
   import { WorkBookType, type WorkbookList, type WorkbooksList } from '$lib/types/workbook';
   import { getTaskGradeLabel } from '$lib/utils/task';
@@ -57,8 +58,6 @@
     }),
   );
 
-  let isShowReplenishment: boolean = $state(false);
-
   function countReadableWorkbooks(workbooks: WorkbooksList): number {
     const results = workbooks.reduce((count, workbook: WorkbookList) => {
       const hasReadPermission = canRead(workbook.isPublished, userId, workbook.authorId);
@@ -158,11 +157,16 @@
         </div>
 
         <div class="mt-4 md:mt-0 pb-4">
-          <Toggle bind:checked={isShowReplenishment}>表示</Toggle>
+          <Toggle
+            checked={replenishmentWorkBooksStore.canView()}
+            onclick={replenishmentWorkBooksStore.toggleView}
+          >
+            表示
+          </Toggle>
         </div>
       </div>
 
-      {#if isShowReplenishment}
+      {#if replenishmentWorkBooksStore.canView()}
         <WorkBookBaseTable
           {workbookType}
           workbooks={replenishedWorkbooks}

src/lib/stores/replenishment_workbook.svelte.ts

@@ -0,0 +1,43 @@
+// See:
+// https://svelte.dev/docs/kit/$app-environment#browser
+import { browser } from '$app/environment';
+
+// See:
+// https://svelte.dev/docs/svelte/stores
+// https://svelte.dev/docs/svelte/$state
+const IS_SHOWN_REPLENISHMENT_WORKBOOKS = 'is_shown_replenishment_workbooks';
+
+class ReplenishmentWorkBooksStore {
+  private isShown = $state<boolean>(this.loadInitialState());
+
+  // Note:
+  // The $state only manages state in memory and is reset on page reload.
+  // In addition, it is not linked to the browser's persistent storage.
+  private loadInitialState(): boolean {
+    // WHY: Cannot access localStorage during SSR (server-side rendering).
+    if (!browser) {
+      return false;
+    }
+
+    const savedStatus = localStorage.getItem(IS_SHOWN_REPLENISHMENT_WORKBOOKS);
+    return savedStatus ? JSON.parse(savedStatus) : false;
+  }
+
+  canView() {
+    return this.isShown;
+  }
+
+  toggleView = () => {
+    this.isShown = !this.isShown;
+
+    if (browser) {
+      localStorage.setItem(IS_SHOWN_REPLENISHMENT_WORKBOOKS, JSON.stringify(this.isShown));
+    }
+  };
+
+  reset() {
+    this.isShown = false;
+  }
+}
+
+export const replenishmentWorkBooksStore = new ReplenishmentWorkBooksStore();