first test

frontend/src/hooks/useDebounce.ts

@@ -0,0 +1,43 @@
+import { createSignal, createEffect, onCleanup } from 'solid-js'
+
+export function useDebounce<T>(value: () => T, delay: number): () => T {
+  const [debouncedValue, setDebouncedValue] = createSignal<T>(value())
+  let timeoutId: number | undefined
+
+  createEffect(() => {
+    const currentValue = value()
+    
+    if (timeoutId !== undefined) {
+      clearTimeout(timeoutId)
+    }
+    
+    timeoutId = setTimeout(() => {
+      setDebouncedValue(() => currentValue)
+    }, delay) as unknown as number
+  })
+
+  onCleanup(() => {
+    if (timeoutId !== undefined) {
+      clearTimeout(timeoutId)
+    }
+  })
+
+  return debouncedValue
+}
+
+export function useDebouncedCallback<T extends (...args: any[]) => any>(
+  callback: T,
+  delay: number
+): T {
+  let timeoutId: number | undefined
+
+  return ((...args: Parameters<T>) => {
+    if (timeoutId !== undefined) {
+      clearTimeout(timeoutId)
+    }
+    
+    timeoutId = setTimeout(() => {
+      callback(...args)
+    }, delay) as unknown as number
+  }) as T
+}

frontend/src/hooks/useLocalStorage.ts

@@ -0,0 +1,112 @@
+import { createSignal, createEffect, onMount } from 'solid-js'
+import { isServer } from 'solid-js/web'
+
+export function useLocalStorage<T>(
+  key: string,
+  initialValue: T,
+  options?: {
+    serializer?: {
+      read: (value: string) => T
+      write: (value: T) => string
+    }
+  }
+) {
+  const serializer = options?.serializer || {
+    read: (v: string) => {
+      try {
+        return JSON.parse(v)
+      } catch {
+        return v as T
+      }
+    },
+    write: (v: T) => JSON.stringify(v),
+  }
+
+  const [storedValue, setStoredValue] = createSignal<T>(initialValue)
+
+  // Initialize on mount
+  onMount(() => {
+    if (isServer) return
+    
+    try {
+      const item = localStorage.getItem(key)
+      if (item !== null) {
+        setStoredValue(() => serializer.read(item))
+      }
+    } catch (error) {
+      console.warn(`Error reading localStorage key "${key}":`, error)
+    }
+  })
+
+  createEffect(() => {
+    if (isServer) return
+    
+    try {
+      const value = storedValue()
+      if (value === undefined || value === null) {
+        localStorage.removeItem(key)
+      } else {
+        localStorage.setItem(key, serializer.write(value))
+      }
+    } catch (error) {
+      console.warn(`Error setting localStorage key "${key}":`, error)
+    }
+  })
+
+  return [storedValue, setStoredValue] as const
+}
+
+export function useSessionStorage<T>(
+  key: string,
+  initialValue: T,
+  options?: {
+    serializer?: {
+      read: (value: string) => T
+      write: (value: T) => string
+    }
+  }
+) {
+  const serializer = options?.serializer || {
+    read: (v: string) => {
+      try {
+        return JSON.parse(v)
+      } catch {
+        return v as T
+      }
+    },
+    write: (v: T) => JSON.stringify(v),
+  }
+
+  const [storedValue, setStoredValue] = createSignal<T>(initialValue)
+
+  // Initialize on mount
+  onMount(() => {
+    if (isServer) return
+    
+    try {
+      const item = sessionStorage.getItem(key)
+      if (item !== null) {
+        setStoredValue(() => serializer.read(item))
+      }
+    } catch (error) {
+      console.warn(`Error reading sessionStorage key "${key}":`, error)
+    }
+  })
+
+  createEffect(() => {
+    if (isServer) return
+    
+    try {
+      const value = storedValue()
+      if (value === undefined || value === null) {
+        sessionStorage.removeItem(key)
+      } else {
+        sessionStorage.setItem(key, serializer.write(value))
+      }
+    } catch (error) {
+      console.warn(`Error setting sessionStorage key "${key}":`, error)
+    }
+  })
+
+  return [storedValue, setStoredValue] as const
+}