refactor: Add useDebounce and usePersistedState wrappers

Author: hhvrc

src/lib/components/input/PasswordInput.svelte

@@ -7,7 +7,7 @@
   import { validatePassword } from '$lib/inputvalidation/passwordValidator';
   import type { AnyComponent } from '$lib/types/AnyComponent';
   import type { ValidationResult } from '$lib/types/ValidationResult';
-  import { debounce } from '$lib/utils/debounce';
+  import { useDebounce } from '$lib/utils/debounce';
   import type { Snippet } from 'svelte';
   import type { FullAutoFill } from 'svelte/elements';
   import PasswordStrengthMeter from './impl/PasswordStrengthMeter.svelte';
@@ -42,7 +42,7 @@
 
   let validationResult = $state<ValidationResult | null>(null);
 
-  const requestHIBP = debounce(async (str: string) => {
+  const requestHIBP = useDebounce(async (str: string) => {
     try {
       const pwnedCount = await checkPwnedCount(str);
       if (pwnedCount > 0) {

src/lib/components/input/UsernameInput.svelte

@@ -11,7 +11,7 @@
   } from '$lib/inputvalidation/usernameValidator';
   import type { AnyComponent } from '$lib/types/AnyComponent';
   import type { ValidationResult } from '$lib/types/ValidationResult';
-  import { debounce } from '$lib/utils/debounce';
+  import { useDebounce } from '$lib/utils/debounce';
   import type { Snippet } from 'svelte';
   import type { FullAutoFill } from 'svelte/elements';
 
@@ -40,7 +40,7 @@
   let checkResponses = $state<Map<string, ValidationResult>>(new Map());
   let validationResult = $state<ValidationResult | null>(null);
 
-  const requestAvailability = debounce(async (username: string) => {
+  const requestAvailability = useDebounce(async (username: string) => {
     try {
       const response = await accountV2Api.accountCheckUsername({ username });
       validationResult = mapUsernameCheckResponse(response);

src/lib/state/classes/persisted-state.svelte.ts

@@ -1,4 +1,5 @@
 import { browser } from '$app/environment';
+import { onDestroy } from 'svelte';
 
 export type StorageType = 'local' | 'session';
 
@@ -39,6 +40,13 @@ export class PersistedState<T> {
     }
   }
 
+  /** Detach the cross-tab `storage` listener. No-op if none was attached. */
+  dispose() {
+    if (this.#storage === localStorage) {
+      if (browser) window.removeEventListener('storage', this.#onStorage);
+    }
+  }
+
   #onStorage = (event: StorageEvent) => {
     if (event.storageArea !== this.#storage) return;
     if (event.key !== this.#key) return;
@@ -75,3 +83,14 @@ export class PersistedState<T> {
     return JSON.parse(raw) as T;
   }
 }
+
+/** Component-aware `PersistedState` that detaches the storage listener on unmount. */
+export function usePersistedState<T>(
+  key: string,
+  defaultValue: T,
+  options?: LocalStorageStateOptions
+): PersistedState<T> {
+  const state = new PersistedState(key, defaultValue, options);
+  onDestroy(() => state.dispose());
+  return state;
+}

src/lib/utils/debounce.ts

@@ -1,3 +1,5 @@
+import { onDestroy } from 'svelte';
+
 export interface Debounced<Args extends unknown[]> {
   (...args: Args): void;
   cancel(): void;
@@ -39,3 +41,13 @@ export function debounce<Args extends unknown[]>(
 
   return debounced;
 }
+
+/** Component-aware `debounce` that cancels any pending invocation on unmount. */
+export function useDebounce<Args extends unknown[]>(
+  fn: (...args: Args) => void,
+  delay: number
+): Debounced<Args> {
+  const d = debounce(fn, delay);
+  onDestroy(d.cancel);
+  return d;
+}

src/routes/(app)/admin/blacklists/+page.svelte

@@ -15,7 +15,7 @@
   import { Separator } from '$lib/components/ui/separator';
   import { handleApiError } from '$lib/errorhandling/apiErrorHandling';
   import type { ValidationResult } from '$lib/types/ValidationResult';
-  import { debounce } from '$lib/utils/debounce';
+  import { useDebounce } from '$lib/utils/debounce';
 
   registerBreadcrumbs(() => [{ label: 'Blacklists' }]);
 
@@ -139,7 +139,7 @@
     }
   }
 
-  const debouncedLoadUsernames = debounce(loadUsernames, 400);
+  const debouncedLoadUsernames = useDebounce(loadUsernames, 400);
   $effect(() => {
     if (usernameEntry.length == 0) {
       debouncedLoadUsernames.cancel();
@@ -150,7 +150,7 @@
     debouncedLoadUsernames();
   });
 
-  const debouncedLoadEmails = debounce(loadEmails, 400);
+  const debouncedLoadEmails = useDebounce(loadEmails, 400);
   $effect(() => {
     if (emailEntry.length == 0) {
       debouncedLoadEmails.cancel();

src/routes/(app)/admin/users/+page.svelte

@@ -85,7 +85,7 @@
   import { CardHeader, CardTitle } from '$lib/components/ui/card';
   import { Input } from '$lib/components/ui/input';
   import { handleApiError } from '$lib/errorhandling/apiErrorHandling';
-  import { debounce } from '$lib/utils/debounce';
+  import { useDebounce } from '$lib/utils/debounce';
 
   let isFetching = $state(false);
 
@@ -117,7 +117,7 @@
     page = Math.floor(response.offset / response.limit) + 1;
   }
 
-  const applyFilterQuery = debounce((query: string | undefined) => (filterQuery = query), 800);
+  const applyFilterQuery = useDebounce((query: string | undefined) => (filterQuery = query), 800);
   $effect(() => {
     const queries: string[] = [];
 

src/routes/+layout.svelte

@@ -11,7 +11,7 @@
   import Sidebar from './Sidebar.svelte';
   import '../app.css';
   import { IsMobile } from '$lib/hooks/is-mobile.svelte';
-  import { PersistedState } from '$lib/state/classes/persisted-state.svelte';
+  import { usePersistedState } from '$lib/state/classes/persisted-state.svelte';
   import DialogManager from '$lib/components/dialog-manager/dialog-manager.svelte';
 
   interface Props {
@@ -23,7 +23,7 @@
   let meta = $derived(buildMetaData(page.url));
 
   const mobile = new IsMobile();
-  const sidebarOpen = new PersistedState('sidebarOpen', false);
+  const sidebarOpen = usePersistedState('sidebarOpen', false);
   const isOpen = $derived(mobile.current ? false : sidebarOpen.value);
 </script>