feat(List): Store list filter in stateBin

3 files changed, 90 insertions, 2 deletions

diff --git a/src/lib/List/Anime/CleanAnimeList.svelte b/src/lib/List/Anime/CleanAnimeList.svelte
index fabbeec5..64b8fe55 100644
--- a/src/lib/List/Anime/CleanAnimeList.svelte
+++ b/src/lib/List/Anime/CleanAnimeList.svelte
@@ -15,6 +15,7 @@
   import revalidateAnime from '$stores/revalidateAnime';
   import CleanGrid from '$lib/List/CleanGrid.svelte';
   import CleanList from '../CleanList.svelte';
+  import stateBin from '$stores/stateBin';
 
   export let media: Media[];
   export let title: any;
@@ -57,7 +58,17 @@
         .map(([key]) => key)
     )
   );
-  let selectedList = 'All';
+  let selectedList = stateBin.get().animeListFilter || 'All';
+
+  onMount(() => {
+    if (browser) {
+      const storedValue = stateBin.get().animeListFilter;
+
+      if (typeof storedValue === 'string') selectedList = storedValue;
+    }
+  });
+
+  $: stateBin.setKey('animeListFilter', selectedList);
 
   $: filteredMedia =
     selectedList === 'All'
diff --git a/src/lib/List/Manga/CleanMangaList.svelte b/src/lib/List/Manga/CleanMangaList.svelte
index 623f7c37..41a085d8 100644
--- a/src/lib/List/Manga/CleanMangaList.svelte
+++ b/src/lib/List/Manga/CleanMangaList.svelte
@@ -13,6 +13,7 @@
   import '../covers.css';
   import CleanGrid from '../CleanGrid.svelte';
   import CleanList from '../CleanList.svelte';
+  import stateBin from '$stores/stateBin';
 
   export let media: Media[];
   export let cleanCache: () => void;
@@ -47,7 +48,17 @@
         .map(([key]) => key)
     )
   );
-  let selectedList = 'All';
+  let selectedList = stateBin.get().mangaListFilter || 'All';
+
+  onMount(() => {
+    if (browser) {
+      const storedValue = stateBin.get().mangaListFilter;
+
+      if (typeof storedValue === 'string') selectedList = storedValue;
+    }
+  });
+
+  $: stateBin.setKey('mangaListFilter', selectedList);
 
   $: filteredMedia =
     selectedList === 'All'
diff --git a/src/stores/stateBin.ts b/src/stores/stateBin.ts
new file mode 100644
index 00000000..6c664f71
--- /dev/null
+++ b/src/stores/stateBin.ts
@@ -0,0 +1,66 @@
+import { browser } from '$app/environment';
+import { writable, get, type Writable } from 'svelte/store';
+
+type StateBin = Record<string, unknown>;
+
+const STORAGE_KEY = 'stateBin';
+const defaultState: StateBin = {};
+
+function createStateBin() {
+  const initialState: StateBin = browser
+    ? JSON.parse(localStorage.getItem(STORAGE_KEY) ?? '{}')
+    : defaultState;
+  const store: Writable<StateBin> = writable(initialState);
+
+  const writeToStorage = (val: StateBin) => {
+    if (browser)
+      try {
+        localStorage.setItem(STORAGE_KEY, JSON.stringify(val));
+      } catch (error) {
+        console.error('Failed to write stateBin:', error);
+      }
+  };
+
+  return {
+    subscribe: store.subscribe,
+
+    set: (value) => {
+      writeToStorage(value);
+      store.set(value);
+    },
+
+    update: (updateFunction) => {
+      const updatedStore = updateFunction(get(store));
+
+      writeToStorage(updatedStore);
+      store.set(updatedStore);
+    },
+
+    reset: () => {
+      writeToStorage(defaultState);
+      store.set(defaultState);
+    },
+
+    get: () => get(store),
+
+    setKey: (key: string, value: unknown) => {
+      const currentStore = get(store);
+      const updatedStore = { ...currentStore, [key]: value };
+
+      writeToStorage(updatedStore);
+      store.set(updatedStore);
+    },
+
+    removeKey: (key: string) => {
+      const currentStore = get(store);
+      const { [key]: _, ...rest } = currentStore;
+
+      writeToStorage(rest);
+      store.set(rest);
+    }
+  };
+}
+
+const stateBin = createStateBin();
+
+export default stateBin;