fix: Migrate localStorage.removeItem to localforage for anime and manga stores

2 files changed, 36 insertions, 13 deletions

diff --git a/src/lib/Settings/Categories/Debug.svelte b/src/lib/Settings/Categories/Debug.svelte
index 79e18c03..8ba6ade9 100644
--- a/src/lib/Settings/Categories/Debug.svelte
+++ b/src/lib/Settings/Categories/Debug.svelte
@@ -5,23 +5,29 @@
   import { options } from '$lib/Notification/options';
   import locale from '$stores/locale';
   import SettingCheckboxToggle from '../SettingCheckboxToggle.svelte';
+  import localforage from 'localforage';
+  import { browser } from '$app/environment';
 
   const { addNotification } = getNotificationsContext();
-</script>
 
-<SettingCheckboxToggle setting="debugDummyLists" text={$locale().debug.dummyLists} />
+  const clearCaches = async () => {
+    if (!browser) return;
 
-<button
-  on:click={() => {
     localStorage.removeItem('anime');
     localStorage.removeItem('manga');
+    await localforage.removeItem('anime');
+    await localforage.removeItem('manga');
     addNotification(
       options({
         heading: 'Anime and manga list caches successfully cleared'
       })
     );
-  }}>{$locale().debug.clearCaches}</button
->
+  };
+</script>
+
+<SettingCheckboxToggle setting="debugDummyLists" text={$locale().debug.dummyLists} />
+
+<button on:click={clearCaches}>{$locale().debug.clearCaches}</button>
 
 <p />
 
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 92300d76..1dd069a0 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -33,6 +33,7 @@
   import CommandPalette from '$lib/CommandPalette/CommandPalette.svelte';
   import { defaultActions } from '$lib/CommandPalette/actions';
   import { toolsAsCommandPaletteActions } from '$lib/Tools/tools';
+  import localforage from 'localforage';
 
   injectSpeedInsights();
 
@@ -60,10 +61,10 @@
   $: way = data.url.includes('/user')
     ? 200
     : $previousPage && $previousPage.includes('/user')
-    ? -200
-    : navigationOrder.indexOf(data.url) > navigationOrder.indexOf($previousPage ?? '/')
-    ? 200
-    : -200;
+      ? -200
+      : navigationOrder.indexOf(data.url) > navigationOrder.indexOf($previousPage ?? '/')
+        ? 200
+        : -200;
 
   const handleScroll = () => {
     const currentScrollPosition = window.scrollY;
@@ -87,6 +88,8 @@
         localStorage.removeItem('identity');
         localStorage.removeItem('anime');
         localStorage.removeItem('manga');
+        await localforage.removeItem('anime');
+        await localforage.removeItem('manga');
         localStorage.removeItem('lastPruneTimes');
         localStorage.setItem('commit', data.commit);
       }
@@ -270,8 +273,19 @@
 
 <style lang="scss">
   .header {
-    font-family: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
-      Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+    font-family:
+      'DM Sans',
+      system-ui,
+      -apple-system,
+      BlinkMacSystemFont,
+      'Segoe UI',
+      Roboto,
+      Oxygen,
+      Ubuntu,
+      Cantarell,
+      'Open Sans',
+      'Helvetica Neue',
+      sans-serif;
     font-size: 1.05em;
     font-weight: 600;
     padding: 0.8rem 0.4rem;
@@ -327,7 +341,10 @@
     display: inline-block;
     vertical-align: middle;
     border-radius: 8px;
-    box-shadow: 0 1.5px 9px var(--base01), 0 0 0 4px var(--base0E), 0 4px 30px var(--base01);
+    box-shadow:
+      0 1.5px 9px var(--base01),
+      0 0 0 4px var(--base0E),
+      0 4px 30px var(--base01);
   }
 
   .separator {