12 files changed, 186 insertions, 183 deletions
diff --git a/src/lib/Settings/Categories/Attributions.svelte b/src/lib/Settings/Categories/Attributions.svelte
index e0a77f1f..ef78a0c1 100644
--- a/src/lib/Settings/Categories/Attributions.svelte
+++ b/src/lib/Settings/Categories/Attributions.svelte
@@ -1,6 +1,6 @@
 <script>
-  import Spacer from '$lib/Layout/Spacer.svelte';
-  import root from '$lib/Utility/root';
+import Spacer from "$lib/Layout/Spacer.svelte";
+import root from "$lib/Utility/root";
 </script>
 
 <ul>
diff --git a/src/lib/Settings/Categories/Cache.svelte b/src/lib/Settings/Categories/Cache.svelte
index 68783bdf..6af897c9 100644
--- a/src/lib/Settings/Categories/Cache.svelte
+++ b/src/lib/Settings/Categories/Cache.svelte
@@ -1,6 +1,6 @@
 <script>
-  import Spacer from '$lib/Layout/Spacer.svelte';
-  import settings from '$stores/settings';
+import Spacer from "$lib/Layout/Spacer.svelte";
+import settings from "$stores/settings";
 </script>
 
 <small class="opaque">
diff --git a/src/lib/Settings/Categories/Calculation.svelte b/src/lib/Settings/Categories/Calculation.svelte
index 99e42463..b4c76269 100644
--- a/src/lib/Settings/Categories/Calculation.svelte
+++ b/src/lib/Settings/Categories/Calculation.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
-  import { pruneAllManga } from '$lib/Media/Manga/cache';
-  import locale from '$stores/locale';
-  import settings from '$stores/settings';
-  import SettingCheckboxToggle from '../SettingCheckboxToggle.svelte';
-  import SettingHint from '../SettingHint.svelte';
+import { pruneAllManga } from "$lib/Media/Manga/cache";
+import locale from "$stores/locale";
+import settings from "$stores/settings";
+import SettingCheckboxToggle from "../SettingCheckboxToggle.svelte";
+import SettingHint from "../SettingHint.svelte";
 </script>
 
 <SettingCheckboxToggle
diff --git a/src/lib/Settings/Categories/Debug.svelte b/src/lib/Settings/Categories/Debug.svelte
index 8bae4c84..ad388fee 100644
--- a/src/lib/Settings/Categories/Debug.svelte
+++ b/src/lib/Settings/Categories/Debug.svelte
@@ -1,30 +1,23 @@
 <script lang="ts">
-  import Spacer from '$lib/Layout/Spacer.svelte';
-  import settings from '$stores/settings';
-  import { addNotification } from '$lib/Notification/store';
-  import SettingHint from '../SettingHint.svelte';
-  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 clearCaches = async () => {
-    if (!browser) return;
-
-    await localforage.removeItem('anime');
-    await localforage.removeItem('manga');
-    addNotification(
-      options({
-        heading: 'Anime and manga list caches successfully cleared'
-      })
-    );
-  };
+import Spacer from "$lib/Layout/Spacer.svelte";
+import settings from "$stores/settings";
+import { addNotification } from "$lib/Notification/store";
+import SettingHint from "../SettingHint.svelte";
+import { options } from "$lib/Notification/options";
+import locale from "$stores/locale";
+import SettingCheckboxToggle from "../SettingCheckboxToggle.svelte";
+import localforage from "localforage";
+import { invalidateListCaches } from "$lib/Media/invalidate";
 </script>
 
 <SettingCheckboxToggle setting="debugDummyLists" text={$locale().debug.dummyLists} />
+<SettingCheckboxToggle
+  setting="debugShowListTimings"
+  text={$locale().debug.showListTimings}
+/>
+<br />
 
-<button onclick={clearCaches}>{$locale().debug.clearCaches}</button>
+<button onclick={invalidateListCaches}>{$locale().debug.clearCaches}</button>
 
 <Spacer />
 
diff --git a/src/lib/Settings/Categories/Display.svelte b/src/lib/Settings/Categories/Display.svelte
index a5f16f97..8b1f0a43 100644
--- a/src/lib/Settings/Categories/Display.svelte
+++ b/src/lib/Settings/Categories/Display.svelte
@@ -1,70 +1,70 @@
 <script lang="ts">
-  import Spacer from '$lib/Layout/Spacer.svelte';
-  import settings from '$stores/settings';
-  import SettingCheckboxToggle from '../SettingCheckboxToggle.svelte';
-  import SettingHint from '../SettingHint.svelte';
-  import root from '$lib/Utility/root';
-  import locale from '$stores/locale';
-  import { requestNotifications } from '$lib/Utility/notifications';
-  import { getFingerprint } from '$lib/Utility/fingerprint';
-
-  const onHelperChange = () => {
-    const mai = document.getElementById('mai') as HTMLImageElement;
-
-    if (!mai) return;
-
-    mai.style.display = 'block';
-
-    switch ($settings.displayAoButa) {
-      case 'random':
-      case 'mai_2':
-        {
-          mai.src = '/aobuta/mai.png';
-        }
-        break;
-      case 'mai':
-        {
-          mai.src = '/aobuta/mai_2.webp';
-        }
-        break;
-      case 'nodoka':
-        {
-          mai.src = '/aobuta/nodoka.webp';
-        }
-        break;
-      case 'kaede':
-        {
-          mai.src = '/aobuta/kaede.png';
-        }
-        break;
-      case 'rio':
-        {
-          mai.src = '/aobuta/rio.webp';
-        }
-        break;
-      case 'sakuta':
-        {
-          mai.src = '/aobuta/sakuta.webp';
-        }
-        break;
-      case 'shouko':
-        {
-          mai.src = '/aobuta/shouko.webp';
-        }
-        break;
-      case 'tomoe':
-        {
-          mai.src = '/aobuta/tomoe.webp';
-        }
-        break;
-      case 'none': {
-        {
-          mai.style.display = 'none';
-        }
-        break;
-      }
-    }
-  };
+import Spacer from "$lib/Layout/Spacer.svelte";
+import settings from "$stores/settings";
+import SettingCheckboxToggle from "../SettingCheckboxToggle.svelte";
+import SettingHint from "../SettingHint.svelte";
+import root from "$lib/Utility/root";
+import locale from "$stores/locale";
+import { requestNotifications } from "$lib/Utility/notifications";
+import { getFingerprint } from "$lib/Utility/fingerprint";
+
+const onHelperChange = () => {
+	const mai = document.getElementById("mai") as HTMLImageElement;
+
+	if (!mai) return;
+
+	mai.style.display = "block";
+
+	switch ($settings.displayAoButa) {
+		case "random":
+		case "mai_2":
+			{
+				mai.src = "/aobuta/mai.png";
+			}
+			break;
+		case "mai":
+			{
+				mai.src = "/aobuta/mai_2.webp";
+			}
+			break;
+		case "nodoka":
+			{
+				mai.src = "/aobuta/nodoka.webp";
+			}
+			break;
+		case "kaede":
+			{
+				mai.src = "/aobuta/kaede.png";
+			}
+			break;
+		case "rio":
+			{
+				mai.src = "/aobuta/rio.webp";
+			}
+			break;
+		case "sakuta":
+			{
+				mai.src = "/aobuta/sakuta.webp";
+			}
+			break;
+		case "shouko":
+			{
+				mai.src = "/aobuta/shouko.webp";
+			}
+			break;
+		case "tomoe":
+			{
+				mai.src = "/aobuta/tomoe.webp";
+			}
+			break;
+		case "none": {
+			{
+				mai.style.display = "none";
+			}
+			break;
+		}
+	}
+};
 </script>
 
 <b>{$locale().settings.display.categories.includeAdditionalMedia}</b><br />
@@ -181,6 +181,7 @@
 <SettingCheckboxToggle
   setting="displayDataSaver"
   text={$locale().settings.display.categories.dataSaver}
+  tooltipText={$locale().settings.display.tooltips.dataSaver}
 />
 <select bind:value={$settings.displayLanguage} class="no-shadow">
   <option value="en">
diff --git a/src/lib/Settings/Categories/RSSFeeds.svelte b/src/lib/Settings/Categories/RSSFeeds.svelte
index 51554884..fee411f4 100644
--- a/src/lib/Settings/Categories/RSSFeeds.svelte
+++ b/src/lib/Settings/Categories/RSSFeeds.svelte
@@ -1,12 +1,12 @@
 <script lang="ts">
-  import { options } from '$lib/Notification/options';
-  import { addNotification } from '$lib/Notification/store';
-  import { env } from '$env/dynamic/public';
-  import locale from '$stores/locale';
-  import SettingHint from '../SettingHint.svelte';
-  import tooltip from '$lib/Tooltip/tooltip';
+import { options } from "$lib/Notification/options";
+import { addNotification } from "$lib/Notification/store";
+import { appOrigin } from "$lib/Utility/appOrigin";
+import locale from "$stores/locale";
+import SettingHint from "../SettingHint.svelte";
+import tooltip from "$lib/Tooltip/tooltip";
 
-  export let user: { accessToken: string; refreshToken: string };
+export let user: { accessToken: string; refreshToken: string };
 </script>
 
 <button
@@ -17,9 +17,7 @@
       })
     );
     navigator.clipboard.writeText(
-      `https://${
-        env.PUBLIC_ANILIST_REDIRECT_URI?.includes('192.168') ? '192.168.1.60:5173' : 'due.moe'
-      }/feeds/activity-notifications?token=${user.accessToken}&refresh=${user.refreshToken}`
+      `${appOrigin()}/feeds/activity-notifications?token=${user.accessToken}&refresh=${user.refreshToken}`
     );
   }}
 >
diff --git a/src/lib/Settings/Categories/SettingSync.svelte b/src/lib/Settings/Categories/SettingSync.svelte
index d69eab09..0cfe9261 100644
--- a/src/lib/Settings/Categories/SettingSync.svelte
+++ b/src/lib/Settings/Categories/SettingSync.svelte
@@ -1,13 +1,13 @@
 <script lang="ts">
-  import Spacer from '$lib/Layout/Spacer.svelte';
-  import { options } from '$lib/Notification/options';
-  import root from '$lib/Utility/root';
-  import identity from '$stores/identity';
-  import settings from '$stores/settings';
-  import { addNotification } from '$lib/Notification/store';
-  import SettingHint from '../SettingHint.svelte';
-  import locale from '$stores/locale';
-  import settingsSyncTimes from '$stores/settingsSyncTimes';
+import Spacer from "$lib/Layout/Spacer.svelte";
+import { options } from "$lib/Notification/options";
+import root from "$lib/Utility/root";
+import identity from "$stores/identity";
+import settings from "$stores/settings";
+import { addNotification } from "$lib/Notification/store";
+import SettingHint from "../SettingHint.svelte";
+import locale from "$stores/locale";
+import settingsSyncTimes from "$stores/settingsSyncTimes";
 </script>
 
 {#if !$settings.settingsSync}
diff --git a/src/lib/Settings/Category.svelte b/src/lib/Settings/Category.svelte
index f4936e8a..daf49a21 100644
--- a/src/lib/Settings/Category.svelte
+++ b/src/lib/Settings/Category.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
-  import Spacer from '$lib/Layout/Spacer.svelte';
-  export let title = '';
-  export let id = title.toLowerCase();
-  export let open = true;
-  export let newLine = true;
+import Spacer from "$lib/Layout/Spacer.svelte";
+export let title = "";
+export let id = title.toLowerCase();
+export let open = true;
+export let newLine = true;
 </script>
 
 <details {open} {id}>
diff --git a/src/lib/Settings/SettingCheckboxToggle.svelte b/src/lib/Settings/SettingCheckboxToggle.svelte
index c9d82907..85b4f0cd 100644
--- a/src/lib/Settings/SettingCheckboxToggle.svelte
+++ b/src/lib/Settings/SettingCheckboxToggle.svelte
@@ -1,62 +1,73 @@
 <script lang="ts">
-  import Spacer from '$lib/Layout/Spacer.svelte';
-  import settings, { type Settings } from '$stores/settings';
-
-  type BooleanSettingsKeys<T> = {
-    [K in keyof T]: T[K] extends boolean ? K : never;
-  };
-  type SettingsBooleanKeys = BooleanSettingsKeys<Settings>;
-
-  export let sectionBreak = false;
-  export let disabled = false;
-  export let text: string | (() => string);
-  export let setting: SettingsBooleanKeys[keyof SettingsBooleanKeys];
-  export let lineBreak = true;
-  export let onChange: () => void = () => {
-    return;
-  };
-  export let invert = false;
-  export let id: string | null = null;
-
-  $: checked = setting ? (invert ? !$settings[setting] : $settings[setting]) : false;
-  $: field = text instanceof Function ? text() : text;
-
-  // const toggler = (key: keyof Settings) => [
-  // 	() =>
-  // 		settings.update((s) => {
-  // 			(s[key] as boolean) = true;
-
-  // 			$settings = s;
-
-  // 			return s;
-  // 		}),
-  // 	() =>
-  // 		settings.update((s) => {
-  // 			(s[key] as boolean) = false;
-
-  // 			$settings = s;
-
-  // 			return s;
-  // 		})
-  // ];
-
-  const check = (e: Event & { currentTarget: EventTarget & HTMLInputElement }): void => {
-    const checked = (e.target as HTMLInputElement).checked;
-
-    if (setting) {
-      settings.setKey(setting, invert ? !checked : checked);
-      onChange();
-    }
-  };
-
-  const flip = () => {
-    if (setting) $settings[setting] = !$settings[setting];
-  };
+import Spacer from "$lib/Layout/Spacer.svelte";
+import tooltip from "$lib/Tooltip/tooltip";
+import settings, { type Settings } from "$stores/settings";
+
+type BooleanSettingsKeys<T> = {
+	[K in keyof T]: T[K] extends boolean ? K : never;
+};
+type SettingsBooleanKeys = BooleanSettingsKeys<Settings>;
+
+export let sectionBreak = false;
+export let disabled = false;
+export let text: string | (() => string);
+export let setting: SettingsBooleanKeys[keyof SettingsBooleanKeys];
+export let lineBreak = true;
+export let onChange: () => void = () => {
+	return;
+};
+export let invert = false;
+export let id: string | null = null;
+export let tooltipText: string | undefined = undefined;
+
+$: checked = setting
+	? invert
+		? !$settings[setting]
+		: $settings[setting]
+	: false;
+$: field = text instanceof Function ? text() : text;
+
+// const toggler = (key: keyof Settings) => [
+// 	() =>
+// 		settings.update((s) => {
+// 			(s[key] as boolean) = true;
+
+// 			$settings = s;
+
+// 			return s;
+// 		}),
+// 	() =>
+// 		settings.update((s) => {
+// 			(s[key] as boolean) = false;
+
+// 			$settings = s;
+
+// 			return s;
+// 		})
+// ];
+
+const check = (
+	e: Event & { currentTarget: EventTarget & HTMLInputElement },
+): void => {
+	const checked = (e.target as HTMLInputElement).checked;
+
+	if (setting) {
+		settings.setKey(setting, invert ? !checked : checked);
+		onChange();
+	}
+};
+
+const flip = () => {
+	if (setting) $settings[setting] = !$settings[setting];
+};
 </script>
 
 <input type="checkbox" onchange={check} bind:checked {id} />
 
 <span
+  title={tooltipText}
+  use:tooltip
+  data-tooltip-disable={tooltipText === undefined}
   onclick={flip}
   onkeydown={() => {
     return;
diff --git a/src/lib/Settings/SettingHint.svelte b/src/lib/Settings/SettingHint.svelte
index f82f061c..bac70366 100644
--- a/src/lib/Settings/SettingHint.svelte
+++ b/src/lib/Settings/SettingHint.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  export let lineBreak = false;
+export let lineBreak = false;
 </script>
 
 {#if lineBreak}
diff --git a/src/lib/Settings/SettingToggle.svelte b/src/lib/Settings/SettingToggle.svelte
index d7e31322..0e77c9b0 100644
--- a/src/lib/Settings/SettingToggle.svelte
+++ b/src/lib/Settings/SettingToggle.svelte
@@ -1,12 +1,12 @@
 <script lang="ts">
-  import Spacer from '$lib/Layout/Spacer.svelte';
-  import settings, { type Settings } from '$stores/settings';
+import Spacer from "$lib/Layout/Spacer.svelte";
+import settings, { type Settings } from "$stores/settings";
 
-  export let setting: keyof Settings;
-  export let on = '';
-  export let off = '';
-  export let sectionBreak = false;
-  export let disabled = false;
+export let setting: keyof Settings;
+export let on = "";
+export let off = "";
+export let sectionBreak = false;
+export let disabled = false;
 </script>
 
 <a
diff --git a/src/lib/Settings/Verbiage.svelte b/src/lib/Settings/Verbiage.svelte
index 76193c3b..b82281ee 100644
--- a/src/lib/Settings/Verbiage.svelte
+++ b/src/lib/Settings/Verbiage.svelte
@@ -1,5 +1,5 @@
 <script>
-  import root from '$lib/Utility/root';
+import root from "$lib/Utility/root";
 </script>
 
 <details open={false}>