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

@@ -92,6 +92,7 @@ const ThreePaneLayout: React.FC<ThreePaneLayoutProps> = (props) => {
isRefreshing={props.isRefreshing}
loading={props.bookmarksLoading}
relayPool={props.relayPool}
settings={props.settings}
/>
</div>
<div className="pane main">
@@ -123,6 +124,7 @@ const ThreePaneLayout: React.FC<ThreePaneLayoutProps> = (props) => {
onClearSelection={props.onClearSelection}
currentUserPubkey={props.currentUserPubkey}
followedPubkeys={props.followedPubkeys}
settings={props.settings}
/>
)}
</div>