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

@@ -2,6 +2,8 @@ import React from 'react'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faHighlighter, faClock } from '@fortawesome/free-solid-svg-icons'
import { format } from 'date-fns'
import { useImageCache } from '../hooks/useImageCache'
import { UserSettings } from '../services/settingsService'
interface ReaderHeaderProps {
title?: string
@@ -11,6 +13,7 @@ interface ReaderHeaderProps {
readingTimeText?: string | null
hasHighlights: boolean
highlightCount: number
settings?: UserSettings
}
const ReaderHeader: React.FC<ReaderHeaderProps> = ({
@@ -20,13 +23,15 @@ const ReaderHeader: React.FC<ReaderHeaderProps> = ({
published,
readingTimeText,
hasHighlights,
highlightCount
highlightCount,
settings
}) => {
const cachedImage = useImageCache(image, settings)
const formattedDate = published ? format(new Date(published * 1000), 'MMM d, yyyy') : null
if (image) {
if (cachedImage) {
return (
<div className="reader-hero-image">
<img src={image} alt={title || 'Article image'} />
<img src={cachedImage} alt={title || 'Article image'} />
{formattedDate && (
<div className="publish-date-topright">
{formattedDate}