chore: bump version to 0.3.1

Increase default cache size from 50MB to 210MB for better offline experience

CHANGELOG.md

@@ -5,6 +5,52 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.3.0] - 2025-10-09
+
+### Added
+- Flight Mode with offline highlight creation and local relay support
+- Automatic offline sync - rebroadcast local events when back online
+- Relay indicator icon on highlight items showing sync status
+- Click-to-rebroadcast functionality for highlights
+- Flight mode indicator (plane icon) on offline-created highlights
+- Relay rebroadcast settings for caching and propagation
+- Local relay status indicator for local-only/offline mode
+- Second local relay support (localhost:4869)
+- Relay connection status tracking and display
+- 6th font size option for better UI scaling
+
+### Fixed
+- Highlight creation resilient to offline/flight mode
+- TypeScript type errors in offline sync
+- Relay indicator tooltip accuracy and reliability
+- Always show relay indicator icon on highlights
+- Show remote relay list for fetched highlights
+- Publish highlights to all connected relays instead of just one
+- Keep all relay connections alive, not just local ones
+- Check actual relay connection status instead of pool membership
+- Skip rebroadcasting when in flight mode
+- Update relay info after automatic sync completes
+- Only show successfully reachable relays in flight mode
+- Include local relays in relay indicator tooltip
+
+### Changed
+- Rename 'Offline Mode' to 'Flight Mode' throughout UI
+- Move publication date to top-right corner with subtle border styling
+- Consolidate relay/status indicators into single unified icon
+- Simplify relay indicator tooltip to show relay list
+- Move rebroadcast settings to dedicated Flight Mode section
+- Place Reading Font and Font Size settings side-by-side
+- Improve font size scale and default value
+- Use wifi icon for disconnected remote relays
+- Use airplane icons for local relay indicators
+- Make Relays heading same level as Flight Mode in settings
+- Simplify rebroadcast settings UI with consistent checkbox style
+
+### Performance
+- Make highlight creation instant with non-blocking relay publish
+- Reduce relay status polling interval to 20 seconds
+- Show sync progress and hide indicator after successful sync
+
 ## [0.2.10] - 2025-10-09
 
 ### Added
@@ -426,6 +472,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Optimize relay usage following applesauce-relay best practices
 - Use applesauce-react event models for better profile handling
 
+[0.3.0]: https://github.com/dergigi/boris/compare/v0.2.10...v0.3.0
 [0.2.10]: https://github.com/dergigi/boris/compare/v0.2.9...v0.2.10
 [0.2.9]: https://github.com/dergigi/boris/compare/v0.2.8...v0.2.9
 [0.2.8]: https://github.com/dergigi/boris/compare/v0.2.7...v0.2.8

package.json

@@ -1,6 +1,6 @@
 {
   "name": "boris",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "description": "A minimal nostr client for bookmark management",
   "homepage": "https://read.withboris.com/",
   "type": "module",

src/components/BookmarkItem.tsx

@@ -11,15 +11,17 @@ import { getPreviewImage, fetchOgImage } from '../utils/imagePreview'
 import { CompactView } from './BookmarkViews/CompactView'
 import { LargeView } from './BookmarkViews/LargeView'
 import { CardView } from './BookmarkViews/CardView'
+import { UserSettings } from '../services/settingsService'
 
 interface BookmarkItemProps {
   bookmark: IndividualBookmark
   index: number
   onSelectUrl?: (url: string, bookmark?: { id: string; kind: number; tags: string[][]; pubkey: string }) => void
   viewMode?: ViewMode
+  settings?: UserSettings
 }
 
-export const BookmarkItem: React.FC<BookmarkItemProps> = ({ bookmark, index, onSelectUrl, viewMode = 'cards' }) => {
+export const BookmarkItem: React.FC<BookmarkItemProps> = ({ bookmark, index, onSelectUrl, viewMode = 'cards', settings }) => {
   const [ogImage, setOgImage] = useState<string | null>(null)
 
   const short = (v: string) => `${v.slice(0, 8)}...${v.slice(-8)}`
@@ -115,7 +117,8 @@ export const BookmarkItem: React.FC<BookmarkItemProps> = ({ bookmark, index, onS
     getAuthorDisplayName,
     handleReadNow,
     articleImage,
-    articleSummary
+    articleSummary,
+    settings
   }
 
   if (viewMode === 'compact') {

src/components/BookmarkList.tsx

@@ -8,6 +8,7 @@ import SidebarHeader from './SidebarHeader'
 import IconButton from './IconButton'
 import { ViewMode } from './Bookmarks'
 import { extractUrlsFromContent } from '../services/bookmarkHelpers'
+import { UserSettings } from '../services/settingsService'
 
 interface BookmarkListProps {
   bookmarks: Bookmark[]
@@ -23,6 +24,7 @@ interface BookmarkListProps {
   isRefreshing?: boolean
   loading?: boolean
   relayPool: RelayPool | null
+  settings?: UserSettings
 }
 
 export const BookmarkList: React.FC<BookmarkListProps> = ({
@@ -38,7 +40,8 @@ export const BookmarkList: React.FC<BookmarkListProps> = ({
   onRefresh,
   isRefreshing,
   loading = false,
-  relayPool
+  relayPool,
+  settings
 }) => {
   // Helper to check if a bookmark has either content or a URL
   const hasContentOrUrl = (ib: IndividualBookmark) => {
@@ -123,6 +126,7 @@ export const BookmarkList: React.FC<BookmarkListProps> = ({
                 index={index} 
                 onSelectUrl={onSelectUrl}
                 viewMode={viewMode}
+                settings={settings}
               />
             )}
           </div>

src/components/BookmarkViews/CardView.tsx

@@ -7,6 +7,8 @@ import ContentWithResolvedProfiles from '../ContentWithResolvedProfiles'
 import IconButton from '../IconButton'
 import { classifyUrl } from '../../utils/helpers'
 import { IconGetter } from './shared'
+import { useImageCache } from '../../hooks/useImageCache'
+import { UserSettings } from '../../services/settingsService'
 
 interface CardViewProps {
   bookmark: IndividualBookmark
@@ -22,6 +24,7 @@ interface CardViewProps {
   handleReadNow: (e: React.MouseEvent<HTMLButtonElement>) => void
   articleImage?: string
   articleSummary?: string
+  settings?: UserSettings
 }
 
 export const CardView: React.FC<CardViewProps> = ({
@@ -37,8 +40,10 @@ export const CardView: React.FC<CardViewProps> = ({
   getAuthorDisplayName,
   handleReadNow,
   articleImage,
-  articleSummary
+  articleSummary,
+  settings
 }) => {
+  const cachedImage = useImageCache(articleImage, settings)
   const [expanded, setExpanded] = useState(false)
   const [urlsExpanded, setUrlsExpanded] = useState(false)
   const contentLength = (bookmark.content || '').length
@@ -48,10 +53,10 @@ export const CardView: React.FC<CardViewProps> = ({
 
   return (
     <div key={`${bookmark.id}-${index}`} className={`individual-bookmark ${bookmark.isPrivate ? 'private-bookmark' : ''}`}>
-      {isArticle && articleImage && (
+      {isArticle && cachedImage && (
         <div 
           className="article-hero-image"
-          style={{ backgroundImage: `url(${articleImage})` }}
+          style={{ backgroundImage: `url(${cachedImage})` }}
           onClick={() => handleReadNow({ preventDefault: () => {} } as React.MouseEvent<HTMLButtonElement>)}
         />
       )}

src/components/BookmarkViews/LargeView.tsx

@@ -4,6 +4,8 @@ import { IndividualBookmark } from '../../types/bookmarks'
 import { formatDate } from '../../utils/bookmarkUtils'
 import ContentWithResolvedProfiles from '../ContentWithResolvedProfiles'
 import { IconGetter } from './shared'
+import { useImageCache } from '../../hooks/useImageCache'
+import { UserSettings } from '../../services/settingsService'
 
 interface LargeViewProps {
   bookmark: IndividualBookmark
@@ -19,6 +21,7 @@ interface LargeViewProps {
   getAuthorDisplayName: () => string
   handleReadNow: (e: React.MouseEvent<HTMLButtonElement>) => void
   articleSummary?: string
+  settings?: UserSettings
 }
 
 export const LargeView: React.FC<LargeViewProps> = ({
@@ -34,13 +37,15 @@ export const LargeView: React.FC<LargeViewProps> = ({
   eventNevent,
   getAuthorDisplayName,
   handleReadNow,
-  articleSummary
+  articleSummary,
+  settings
 }) => {
+  const cachedImage = useImageCache(previewImage || undefined, settings)
   const isArticle = bookmark.kind === 30023
   
   return (
     <div key={`${bookmark.id}-${index}`} className={`individual-bookmark large ${bookmark.isPrivate ? 'private-bookmark' : ''}`}>
-      {(hasUrls || (isArticle && previewImage)) && (
+      {(hasUrls || (isArticle && cachedImage)) && (
         <div 
           className="large-preview-image" 
           onClick={() => {
@@ -50,7 +55,7 @@ export const LargeView: React.FC<LargeViewProps> = ({
               onSelectUrl?.(extractedUrls[0])
             }
           }}
-          style={previewImage ? { backgroundImage: `url(${previewImage})` } : undefined}
+          style={cachedImage ? { backgroundImage: `url(${cachedImage})` } : undefined}
         >
           {!previewImage && hasUrls && (
             <div className="preview-placeholder">

src/components/ContentPanel.tsx

@@ -11,6 +11,7 @@ import { HighlightVisibility } from './HighlightsPanel'
 import { useMarkdownToHTML } from '../hooks/useMarkdownToHTML'
 import { useHighlightedContent } from '../hooks/useHighlightedContent'
 import { useHighlightInteractions } from '../hooks/useHighlightInteractions'
+import { UserSettings } from '../services/settingsService'
 
 interface ContentPanelProps {
   loading: boolean
@@ -30,6 +31,7 @@ interface ContentPanelProps {
   highlightVisibility?: HighlightVisibility
   currentUserPubkey?: string
   followedPubkeys?: Set<string>
+  settings?: UserSettings
   // For highlight creation
   onTextSelection?: (text: string) => void
   onClearSelection?: () => void
@@ -48,6 +50,7 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
   showHighlights = true,
   highlightStyle = 'marker',
   highlightColor = '#ffff00',
+  settings,
   onHighlightClick,
   selectedHighlightId,
   highlightVisibility = { nostrverse: true, friends: true, mine: true },
@@ -126,6 +129,7 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
         readingTimeText={readingStats ? readingStats.text : null}
         hasHighlights={hasHighlights}
         highlightCount={relevantHighlights.length}
+        settings={settings}
       />
       {markdown || html ? (
         markdown ? (

src/components/ReaderHeader.tsx

@@ -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}

src/components/RelayStatusIndicator.tsx

@@ -10,8 +10,8 @@ interface RelayStatusIndicatorProps {
 }
 
 export const RelayStatusIndicator: React.FC<RelayStatusIndicatorProps> = ({ relayPool }) => {
-  // Poll for relay status updates
-  const relayStatuses = useRelayStatus({ relayPool })
+  // Poll frequently for responsive offline indicator (5s instead of default 20s)
+  const relayStatuses = useRelayStatus({ relayPool, pollingInterval: 5000 })
   
   if (!relayPool) return null
   
@@ -27,15 +27,15 @@ export const RelayStatusIndicator: React.FC<RelayStatusIndicatorProps> = ({ rela
   
   // Debug logging
   React.useEffect(() => {
-    if (localOnlyMode || offlineMode) {
-      console.log('✈️ Relay Status Indicator:', {
-        mode: offlineMode ? 'OFFLINE' : 'LOCAL_ONLY',
-        connectedUrls,
-        hasLocalRelay,
-        hasRemoteRelay
-      })
-    }
-  }, [localOnlyMode, offlineMode, connectedUrls.length])
+    console.log('🔌 Relay Status Indicator:', {
+      mode: offlineMode ? 'OFFLINE' : localOnlyMode ? 'LOCAL_ONLY' : 'ONLINE',
+      totalStatuses: relayStatuses.length,
+      connectedCount: connectedUrls.length,
+      connectedUrls: connectedUrls.map(u => u.replace(/^wss?:\/\//, '')),
+      hasLocalRelay,
+      hasRemoteRelay
+    })
+  }, [offlineMode, localOnlyMode, connectedUrls.length, relayStatuses.length, hasLocalRelay, hasRemoteRelay])
   
   // Don't show indicator when fully connected
   if (!localOnlyMode && !offlineMode) return null

src/components/Settings/OfflineModeSettings.tsx

@@ -1,6 +1,9 @@
-import React from 'react'
+import React, { useState, useEffect } from 'react'
 import { useNavigate } from 'react-router-dom'
+import { faTrash } from '@fortawesome/free-solid-svg-icons'
 import { UserSettings } from '../../services/settingsService'
+import { getImageCacheStats, clearImageCache } from '../../services/imageCacheService'
+import IconButton from '../IconButton'
 
 interface OfflineModeSettingsProps {
   settings: UserSettings
@@ -10,16 +13,85 @@ interface OfflineModeSettingsProps {
 
 const OfflineModeSettings: React.FC<OfflineModeSettingsProps> = ({ settings, onUpdate, onClose }) => {
   const navigate = useNavigate()
+  const [cacheStats, setCacheStats] = useState(getImageCacheStats())
 
   const handleLinkClick = (url: string) => {
     if (onClose) onClose()
     navigate(`/r/${encodeURIComponent(url)}`)
   }
 
+  const handleClearCache = () => {
+    if (confirm('Are you sure you want to clear all cached images?')) {
+      clearImageCache()
+      setCacheStats(getImageCacheStats())
+    }
+  }
+
+  // Update cache stats when settings change
+  useEffect(() => {
+    const updateStats = () => setCacheStats(getImageCacheStats())
+    const interval = setInterval(updateStats, 2000) // Update every 2 seconds
+    return () => clearInterval(interval)
+  }, [])
+
   return (
     <div className="settings-section">
       <h3 className="section-title">Flight Mode</h3>
       
+      <div className="setting-group" style={{ display: 'flex', alignItems: 'center', gap: '1rem', flexWrap: 'wrap' }}>
+        <label htmlFor="enableImageCache" className="checkbox-label" style={{ marginBottom: 0 }}>
+          <input
+            id="enableImageCache"
+            type="checkbox"
+            checked={settings.enableImageCache ?? true}
+            onChange={(e) => onUpdate({ enableImageCache: e.target.checked })}
+            className="setting-checkbox"
+          />
+          <span>Use local image cache</span>
+        </label>
+
+        {(settings.enableImageCache ?? true) && (
+          <div style={{ 
+            fontSize: '0.85rem',
+            color: 'var(--text-secondary)',
+            display: 'flex',
+            alignItems: 'center',
+            gap: '0.5rem'
+          }}>
+            <span style={{ display: 'flex', alignItems: 'center', gap: '0.25rem' }}>
+              ( {cacheStats.totalSizeMB.toFixed(1)} MB / 
+              <input
+                id="imageCacheSizeMB"
+                type="number"
+                min="10"
+                max="500"
+                value={settings.imageCacheSizeMB ?? 210}
+                onChange={(e) => onUpdate({ imageCacheSizeMB: parseInt(e.target.value) || 210 })}
+                style={{
+                  width: '50px',
+                  padding: '0.15rem 0.35rem',
+                  background: 'var(--surface-secondary)',
+                  border: '1px solid var(--border-color, #333)',
+                  borderRadius: '4px',
+                  color: 'inherit',
+                  fontSize: 'inherit',
+                  fontFamily: 'inherit',
+                  textAlign: 'center'
+                }}
+              />
+              MB used )
+            </span>
+            <IconButton
+              icon={faTrash}
+              onClick={handleClearCache}
+              title="Clear cache"
+              variant="ghost"
+              size={28}
+            />
+          </div>
+        )}
+      </div>
+
       <div className="setting-group">
         <label htmlFor="useLocalRelayAsCache" className="checkbox-label">
           <input
@@ -33,19 +105,6 @@ const OfflineModeSettings: React.FC<OfflineModeSettingsProps> = ({ settings, onU
         </label>
       </div>
 
-      <div className="setting-group">
-        <label htmlFor="rebroadcastToAllRelays" className="checkbox-label">
-          <input
-            id="rebroadcastToAllRelays"
-            type="checkbox"
-            checked={settings.rebroadcastToAllRelays ?? false}
-            onChange={(e) => onUpdate({ rebroadcastToAllRelays: e.target.checked })}
-            className="setting-checkbox"
-          />
-          <span>Rebroadcast events while browsing</span>
-        </label>
-      </div>
-
       <div style={{ 
         marginTop: '1.5rem', 
         padding: '1rem',

src/components/Settings/StartupPreferencesSettings.tsx

@@ -9,7 +9,7 @@ interface StartupPreferencesSettingsProps {
 const StartupPreferencesSettings: React.FC<StartupPreferencesSettingsProps> = ({ settings, onUpdate }) => {
   return (
     <div className="settings-section">
-      <h3 className="section-title">Startup Preferences</h3>
+      <h3 className="section-title">Startup & Behavior</h3>
       
       <div className="setting-group">
         <label htmlFor="sidebarCollapsed" className="checkbox-label">
@@ -36,6 +36,19 @@ const StartupPreferencesSettings: React.FC<StartupPreferencesSettingsProps> = ({
           <span>Start with highlights panel collapsed</span>
         </label>
       </div>
+
+      <div className="setting-group">
+        <label htmlFor="rebroadcastToAllRelays" className="checkbox-label">
+          <input
+            id="rebroadcastToAllRelays"
+            type="checkbox"
+            checked={settings.rebroadcastToAllRelays ?? false}
+            onChange={(e) => onUpdate({ rebroadcastToAllRelays: e.target.checked })}
+            className="setting-checkbox"
+          />
+          <span>Rebroadcast events while browsing</span>
+        </label>
+      </div>
     </div>
   )
 }

src/components/ThreePaneLayout.tsx

@@ -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>

src/hooks/useImageCache.ts

@@ -0,0 +1,90 @@
+import { useState, useEffect } from 'react'
+import { cacheImage, getCachedImage } from '../services/imageCacheService'
+import { UserSettings } from '../services/settingsService'
+
+/**
+ * Hook to cache and retrieve images from localStorage
+ * 
+ * @param imageUrl - The URL of the image to cache
+ * @param settings - User settings to determine if caching is enabled
+ * @returns The cached data URL or the original URL
+ */
+export function useImageCache(
+  imageUrl: string | undefined,
+  settings: UserSettings | undefined
+): string | undefined {
+  const [cachedUrl, setCachedUrl] = useState<string | undefined>(imageUrl)
+  const [isLoading, setIsLoading] = useState(false)
+
+  useEffect(() => {
+    if (!imageUrl) {
+      setCachedUrl(undefined)
+      return
+    }
+
+    // If caching is disabled, just use the original URL
+    const enableCache = settings?.enableImageCache ?? true // Default to enabled
+    if (!enableCache) {
+      setCachedUrl(imageUrl)
+      return
+    }
+
+    // Check if already cached
+    const cached = getCachedImage(imageUrl)
+    if (cached) {
+      console.log('📦 Using cached image:', imageUrl.substring(0, 50))
+      setCachedUrl(cached)
+      return
+    }
+
+    // Otherwise, show original URL while caching in background
+    setCachedUrl(imageUrl)
+
+    // Cache image in background
+    if (!isLoading) {
+      setIsLoading(true)
+      const maxSize = settings?.imageCacheSizeMB ?? 210
+      
+      cacheImage(imageUrl, maxSize)
+        .then(dataUrl => {
+          setCachedUrl(dataUrl)
+        })
+        .catch(err => {
+          console.error('Failed to cache image:', err)
+          // Keep using original URL on error
+        })
+        .finally(() => {
+          setIsLoading(false)
+        })
+    }
+  }, [imageUrl, settings?.enableImageCache, settings?.imageCacheSizeMB])
+
+  return cachedUrl
+}
+
+/**
+ * Simpler hook variant that just caches on mount if enabled
+ * Useful for article cover images
+ */
+export function useCacheImageOnLoad(
+  imageUrl: string | undefined,
+  settings: UserSettings | undefined
+): void {
+  useEffect(() => {
+    if (!imageUrl) return
+
+    const enableCache = settings?.enableImageCache ?? true
+    if (!enableCache) return
+
+    // Check if already cached
+    const cached = getCachedImage(imageUrl)
+    if (cached) return
+
+    // Cache in background
+    const maxSize = settings?.imageCacheSizeMB ?? 210
+    cacheImage(imageUrl, maxSize).catch(err => {
+      console.error('Failed to cache image:', err)
+    })
+  }, [imageUrl, settings?.enableImageCache, settings?.imageCacheSizeMB])
+}
+

src/index.css

@@ -1095,9 +1095,9 @@ body {
 
 /* Hero image in reader view */
 .reader-hero-image {
-  width: 100%;
-  margin: 0 0 2rem 0;
-  border-radius: 8px;
+  width: calc(100% + 1.5rem);
+  margin: -0.75rem -0.75rem 2rem -0.75rem;
+  border-radius: 0;
   overflow: hidden;
   position: relative;
   min-height: 300px;

src/services/articleService.ts

@@ -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 ?? 210
+      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)

src/services/imageCacheService.ts

@@ -0,0 +1,278 @@
+/**
+ * Image Cache Service
+ * 
+ * Caches images in localStorage for offline access.
+ * Uses LRU (Least Recently Used) eviction when cache size limit is exceeded.
+ */
+
+const CACHE_PREFIX = 'img_cache_'
+const CACHE_METADATA_KEY = 'img_cache_metadata'
+
+interface CacheMetadata {
+  [url: string]: {
+    key: string
+    size: number
+    lastAccessed: number
+  }
+}
+
+/**
+ * Get cache metadata
+ */
+function getMetadata(): CacheMetadata {
+  try {
+    const data = localStorage.getItem(CACHE_METADATA_KEY)
+    return data ? JSON.parse(data) : {}
+  } catch {
+    return {}
+  }
+}
+
+/**
+ * Save cache metadata
+ */
+function saveMetadata(metadata: CacheMetadata): void {
+  try {
+    localStorage.setItem(CACHE_METADATA_KEY, JSON.stringify(metadata))
+  } catch (err) {
+    console.warn('Failed to save image cache metadata:', err)
+  }
+}
+
+/**
+ * Calculate total cache size in bytes
+ */
+function getTotalCacheSize(): number {
+  const metadata = getMetadata()
+  return Object.values(metadata).reduce((sum, item) => sum + item.size, 0)
+}
+
+/**
+ * Convert bytes to MB
+ */
+function bytesToMB(bytes: number): number {
+  return bytes / (1024 * 1024)
+}
+
+/**
+ * Convert MB to bytes
+ */
+function mbToBytes(mb: number): number {
+  return mb * 1024 * 1024
+}
+
+/**
+ * Generate cache key for URL
+ */
+function getCacheKey(url: string): string {
+  // Use a simple hash of the URL
+  let hash = 0
+  for (let i = 0; i < url.length; i++) {
+    const char = url.charCodeAt(i)
+    hash = ((hash << 5) - hash) + char
+    hash = hash & hash
+  }
+  return `${CACHE_PREFIX}${Math.abs(hash)}`
+}
+
+/**
+ * Evict least recently used images until cache is under limit
+ */
+function evictLRU(maxSizeBytes: number): void {
+  const metadata = getMetadata()
+  const entries = Object.entries(metadata)
+  
+  // Sort by last accessed (oldest first)
+  entries.sort((a, b) => a[1].lastAccessed - b[1].lastAccessed)
+  
+  let currentSize = getTotalCacheSize()
+  
+  for (const [url, item] of entries) {
+    if (currentSize <= maxSizeBytes) break
+    
+    try {
+      localStorage.removeItem(item.key)
+      delete metadata[url]
+      currentSize -= item.size
+      console.log(`🗑️ Evicted image from cache: ${url.substring(0, 50)}...`)
+    } catch (err) {
+      console.warn('Failed to evict image:', err)
+    }
+  }
+  
+  saveMetadata(metadata)
+}
+
+/**
+ * Fetch image and convert to data URL
+ */
+async function fetchImageAsDataUrl(url: string): Promise<string> {
+  const response = await fetch(url)
+  
+  if (!response.ok) {
+    throw new Error(`Failed to fetch image: ${response.statusText}`)
+  }
+  
+  const blob = await response.blob()
+  
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader()
+    reader.onloadend = () => {
+      if (typeof reader.result === 'string') {
+        resolve(reader.result)
+      } else {
+        reject(new Error('Failed to convert image to data URL'))
+      }
+    }
+    reader.onerror = reject
+    reader.readAsDataURL(blob)
+  })
+}
+
+/**
+ * Cache an image
+ */
+export async function cacheImage(
+  url: string, 
+  maxCacheSizeMB: number = 50
+): Promise<string> {
+  try {
+    // Check if already cached
+    const cached = getCachedImage(url)
+    if (cached) {
+      console.log('✅ Image already cached:', url.substring(0, 50))
+      return cached
+    }
+    
+    // Fetch and convert to data URL
+    console.log('📥 Caching image:', url.substring(0, 50))
+    const dataUrl = await fetchImageAsDataUrl(url)
+    const size = dataUrl.length
+    
+    // Check if image alone exceeds cache limit
+    if (bytesToMB(size) > maxCacheSizeMB) {
+      console.warn(`⚠️ Image too large to cache (${bytesToMB(size).toFixed(2)}MB > ${maxCacheSizeMB}MB)`)
+      return url // Return original URL if too large
+    }
+    
+    const maxSizeBytes = mbToBytes(maxCacheSizeMB)
+    
+    // Evict old images if necessary
+    const currentSize = getTotalCacheSize()
+    if (currentSize + size > maxSizeBytes) {
+      evictLRU(maxSizeBytes - size)
+    }
+    
+    // Store image
+    const key = getCacheKey(url)
+    const metadata = getMetadata()
+    
+    try {
+      localStorage.setItem(key, dataUrl)
+      metadata[url] = {
+        key,
+        size,
+        lastAccessed: Date.now()
+      }
+      saveMetadata(metadata)
+      
+      console.log(`💾 Cached image (${bytesToMB(size).toFixed(2)}MB). Total cache: ${bytesToMB(getTotalCacheSize()).toFixed(2)}MB`)
+      return dataUrl
+    } catch (err) {
+      // If storage fails, try evicting more and retry once
+      console.warn('Storage full, evicting more items...')
+      evictLRU(maxSizeBytes / 2) // Free up half the cache
+      
+      try {
+        localStorage.setItem(key, dataUrl)
+        metadata[url] = {
+          key,
+          size,
+          lastAccessed: Date.now()
+        }
+        saveMetadata(metadata)
+        return dataUrl
+      } catch {
+        console.error('Failed to cache image after eviction')
+        return url // Return original URL on failure
+      }
+    }
+  } catch (err) {
+    console.error('Failed to cache image:', err)
+    return url // Return original URL on error
+  }
+}
+
+/**
+ * Get cached image
+ */
+export function getCachedImage(url: string): string | null {
+  try {
+    const metadata = getMetadata()
+    const item = metadata[url]
+    
+    if (!item) return null
+    
+    const dataUrl = localStorage.getItem(item.key)
+    if (!dataUrl) {
+      // Clean up stale metadata
+      delete metadata[url]
+      saveMetadata(metadata)
+      return null
+    }
+    
+    // Update last accessed time
+    item.lastAccessed = Date.now()
+    metadata[url] = item
+    saveMetadata(metadata)
+    
+    return dataUrl
+  } catch {
+    return null
+  }
+}
+
+/**
+ * Clear all cached images
+ */
+export function clearImageCache(): void {
+  try {
+    const metadata = getMetadata()
+    
+    for (const item of Object.values(metadata)) {
+      try {
+        localStorage.removeItem(item.key)
+      } catch (err) {
+        console.warn('Failed to remove cached image:', err)
+      }
+    }
+    
+    localStorage.removeItem(CACHE_METADATA_KEY)
+    console.log('🗑️ Cleared all cached images')
+  } catch (err) {
+    console.error('Failed to clear image cache:', err)
+  }
+}
+
+/**
+ * Get cache statistics
+ */
+export function getImageCacheStats(): {
+  totalSizeMB: number
+  itemCount: number
+  items: Array<{ url: string, sizeMB: number, lastAccessed: Date }>
+} {
+  const metadata = getMetadata()
+  const entries = Object.entries(metadata)
+  
+  return {
+    totalSizeMB: bytesToMB(getTotalCacheSize()),
+    itemCount: entries.length,
+    items: entries.map(([url, item]) => ({
+      url,
+      sizeMB: bytesToMB(item.size),
+      lastAccessed: new Date(item.lastAccessed)
+    }))
+  }
+}
+

src/services/settingsService.ts

@@ -42,6 +42,9 @@ export interface UserSettings {
   // Relay rebroadcast settings
   useLocalRelayAsCache?: boolean // Rebroadcast events to local relays
   rebroadcastToAllRelays?: boolean // Rebroadcast events to all relays
+  // Image cache settings
+  enableImageCache?: boolean // Enable caching images in localStorage
+  imageCacheSizeMB?: number // Maximum cache size in megabytes (default: 210MB)
 }
 
 export async function loadSettings(