feat: add image caching for offline mode

- Add imageCacheService with localStorage-based image caching and LRU eviction
- Create useImageCache hook for React components to fetch and cache images
- Integrate image caching with article service to cache cover images on load
- Add image cache settings (enable/disable, size limit) to user settings
- Update ReaderHeader to use cached images for article covers
- Update BookmarkViews (CardView, LargeView) to use cached images
- Add image cache configuration UI in OfflineModeSettings with:
  - Toggle to enable/disable image caching
  - Slider to set cache size limit (10-200 MB)
  - Display current cache stats (size and image count)
  - Clear cache button

Images are cached in localStorage for offline viewing, with a configurable
size limit (default 50MB). LRU eviction ensures cache stays within limits.
This commit is contained in:
Gigi
2025-10-09 17:23:31 +01:00
parent e08bc54f15
commit 507288f51c
12 changed files with 523 additions and 13 deletions

View File

@@ -7,6 +7,7 @@ import { Helpers } from 'applesauce-core'
import { RELAYS } from '../config/relays'
import { UserSettings } from './settingsService'
import { rebroadcastEvents } from './rebroadcastService'
import { cacheImage } from './imageCacheService'
const { getArticleTitle, getArticleImage, getArticlePublished, getArticleSummary } = Helpers
@@ -145,6 +146,14 @@ export async function fetchArticleByNaddr(
// Save to cache before returning
saveToCache(naddr, content)
// Cache cover image if enabled and present
if (image && settings?.enableImageCache !== false) {
const maxSize = settings?.imageCacheSizeMB ?? 50
cacheImage(image, maxSize).catch(err => {
console.warn('Failed to cache article cover image:', err)
})
}
return content
} catch (err) {
console.error('Failed to fetch article:', err)