Joshua
8b8cb8210c
- HubPage: agent summary stats, cards, status badges, progress bars, refresh - LogsPage: activity feed from tasks, status filter, loading skeleton - ProjectsPage: project cards with status badges and agent counts - SessionsPage: responsive table/card view with model/token info - SettingsPage: dark mode toggle, gateway URL, refresh interval persist - ThemeProvider with dark/light mode via CSS custom properties - useLocalStorage hook for settings persistence - Loading/error/empty states across all pages - npm run build passes cleanly
30 lines
812 B
TypeScript
30 lines
812 B
TypeScript
import { useState, useEffect, useCallback } from 'react'
|
|
|
|
export function useLocalStorage<T>(key: string, initialValue: T): [T, (value: T | ((prev: T) => T)) => void] {
|
|
const [storedValue, setStoredValue] = useState<T>(() => {
|
|
try {
|
|
const item = localStorage.getItem(key)
|
|
return item !== null ? (JSON.parse(item) as T) : initialValue
|
|
} catch {
|
|
return initialValue
|
|
}
|
|
})
|
|
|
|
useEffect(() => {
|
|
try {
|
|
localStorage.setItem(key, JSON.stringify(storedValue))
|
|
} catch {
|
|
// storage full or unavailable
|
|
}
|
|
}, [key, storedValue])
|
|
|
|
const setValue = useCallback((value: T | ((prev: T) => T)) => {
|
|
setStoredValue((prev) => {
|
|
const next = value instanceof Function ? value(prev) : value
|
|
return next
|
|
})
|
|
}, [])
|
|
|
|
return [storedValue, setValue]
|
|
}
|