chore: bump version to 0.3.3

- Add eslint-disable comments for intentionally unused _settings parameters
- Parameters kept for API compatibility with existing code
- All linter and type checks now pass

CHANGELOG.md

@@ -5,6 +5,119 @@ 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
+- URL-based settings navigation with /settings route
+- Active zap split preset highlighting
+- Educational links about relays in reader view
+- Article publication date display in reader
+- Local relay recommendations in settings
+- Relays section showing active and recently connected relays
+
+### Fixed
+- Remove trailing slash from relay URLs
+- Constrain Reading Font dropdown width
+
+### Changed
+- Rename 'Default View Mode' to 'Default Bookmark View' in settings
+- Reorganize settings layout for better UX
+- Use sidebar-style colored buttons for highlight visibility
+- Simplify Relays section presentation
+
+## [0.2.9] - 2025-10-09
+
+### Fixed
+- Deduplicate highlights in streaming callbacks
+
+## [0.2.8] - 2025-10-09
+
+### Added
+- Display article summary in header
+- Overlay title and metadata on hero images
+- Apply reading font to article titles
+
+### Fixed
+- Pass article summary through to ReadableContent
+- Correct Jina AI Reader proxy URL format
+
+### Changed
+- Update homepage URL to read.withboris.com
+- Reorder toolbar buttons for better UX
+
+## [0.2.7] - 2025-10-08
+
+### Added
+- Web bookmark creation (NIP-B0, kind:39701)
+- Tags support for web bookmarks per NIP-B0
+- Auto-fetch title and description when URL is pasted
+- Prioritize OpenGraph tags for metadata extraction
+- Auto-extract tags from metadata with boris as default tag
+- Zap split preset buttons
+- Boris support percentage to zap splits
+- Respect existing zap tags in source content when creating highlights
+
+### Fixed
+- Revert to fetchReadableContent to avoid CORS issues
+- Improve modal spacing with proper box-sizing
+- Prevent sliders from jumping when resetting settings
+- Pass relayPool as prop instead of using non-existent hook
+- Correct type signature for addZapTags function
+
+### Changed
+- Reorder toolbar buttons for better UX
+- DRY up tag extraction with normalizeTags helper
+- Use url-metadata package for robust metadata extraction
+- Make zap split sliders independent using weights
+- Move zap splits to dedicated settings section
+- Publish bookmarks to relays in background for better performance
+
 ## [0.2.6] - 2025-10-08
 
 ### Added
@@ -359,6 +472,11 @@ 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
+[0.2.7]: https://github.com/dergigi/boris/compare/v0.2.6...v0.2.7
 [0.2.6]: https://github.com/dergigi/boris/compare/v0.2.5...v0.2.6
 [0.2.5]: https://github.com/dergigi/boris/compare/v0.2.4...v0.2.5
 [0.2.4]: https://github.com/dergigi/boris/compare/v0.2.3...v0.2.4

package.json

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

public/sw.js

@@ -0,0 +1,56 @@
+// Service Worker for Boris - handles offline image caching
+const CACHE_NAME = 'boris-image-cache-v1'
+
+// Install event - activate immediately
+self.addEventListener('install', (event) => {
+  console.log('[SW] Installing service worker...')
+  self.skipWaiting()
+})
+
+// Activate event - take control immediately
+self.addEventListener('activate', (event) => {
+  console.log('[SW] Activating service worker...')
+  event.waitUntil(self.clients.claim())
+})
+
+// Fetch event - intercept image requests
+self.addEventListener('fetch', (event) => {
+  const url = new URL(event.request.url)
+  
+  // Only intercept image requests
+  const isImage = event.request.destination === 'image' || 
+                  /\.(jpg|jpeg|png|gif|webp|svg)$/i.test(url.pathname)
+  
+  if (!isImage) {
+    return // Let other requests pass through
+  }
+
+  event.respondWith(
+    caches.open(CACHE_NAME).then(cache => {
+      return cache.match(event.request).then(cachedResponse => {
+        if (cachedResponse) {
+          console.log('[SW] Serving cached image:', url.pathname)
+          return cachedResponse
+        }
+
+        // Not in cache, try to fetch
+        return fetch(event.request)
+          .then(response => {
+            // Only cache successful responses
+            if (response && response.status === 200) {
+              // Clone the response before caching
+              cache.put(event.request, response.clone())
+              console.log('[SW] Cached new image:', url.pathname)
+            }
+            return response
+          })
+          .catch(error => {
+            console.error('[SW] Fetch failed for:', url.pathname, error)
+            // Return a fallback or let it fail
+            throw error
+          })
+      })
+    })
+  )
+})
+

src/App.tsx

@@ -9,6 +9,7 @@ import { registerCommonAccountTypes } from 'applesauce-accounts/accounts'
 import { RelayPool } from 'applesauce-relay'
 import { createAddressLoader } from 'applesauce-loaders/loaders'
 import Bookmarks from './components/Bookmarks'
+import Explore from './components/Explore'
 import Toast from './components/Toast'
 import { useToast } from './hooks/useToast'
 import { RELAYS } from './config/relays'
@@ -61,6 +62,12 @@ function AppRoutes({
           />
         } 
       />
+      <Route 
+        path="/explore" 
+        element={
+          <Explore relayPool={relayPool} />
+        } 
+      />
       <Route path="/" element={<Navigate to={`/a/${DEFAULT_ARTICLE}`} replace />} />
     </Routes>
   )
@@ -118,6 +125,19 @@ function App() {
       console.log('Created relay group with', RELAYS.length, 'relays (including local)')
       console.log('Relay URLs:', RELAYS)
       
+      // Keep all relay connections alive indefinitely by creating a persistent subscription
+      // This prevents disconnection when no other subscriptions are active
+      // Create a minimal subscription that never completes to keep connections alive
+      const keepAliveSub = pool.subscription(RELAYS, { kinds: [0], limit: 0 }).subscribe({
+        next: () => {}, // No-op, we don't care about events
+        error: (err) => console.warn('Keep-alive subscription error:', err)
+      })
+      console.log('🔗 Created keep-alive subscription for', RELAYS.length, 'relay(s)')
+      
+      // Store subscription for cleanup
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      ;(pool as any)._keepAliveSubscription = keepAliveSub
+      
       // Attach address/replaceable loaders so ProfileModel can fetch profiles
       const addressLoader = createAddressLoader(pool, {
         eventStore: store,
@@ -134,6 +154,12 @@ function App() {
       return () => {
         accountsSub.unsubscribe()
         activeSub.unsubscribe()
+        // Clean up keep-alive subscription if it exists
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        if ((pool as any)._keepAliveSubscription) {
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          (pool as any)._keepAliveSubscription.unsubscribe()
+        }
       }
     }
     

src/components/BlogPostCard.tsx

@@ -0,0 +1,61 @@
+import React from 'react'
+import { Link } from 'react-router-dom'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faCalendar, faUser } from '@fortawesome/free-solid-svg-icons'
+import { formatDistance } from 'date-fns'
+import { BlogPostPreview } from '../services/exploreService'
+import { useEventModel } from 'applesauce-react/hooks'
+import { Models } from 'applesauce-core'
+
+interface BlogPostCardProps {
+  post: BlogPostPreview
+  href: string
+}
+
+const BlogPostCard: React.FC<BlogPostCardProps> = ({ post, href }) => {
+  const profile = useEventModel(Models.ProfileModel, [post.author])
+  const displayName = profile?.name || profile?.display_name || 
+    `${post.author.slice(0, 8)}...${post.author.slice(-4)}`
+  
+  const publishedDate = post.published || post.event.created_at
+  const formattedDate = formatDistance(new Date(publishedDate * 1000), new Date(), { 
+    addSuffix: true 
+  })
+
+  return (
+    <Link 
+      to={href}
+      className="blog-post-card"
+      style={{ textDecoration: 'none', color: 'inherit' }}
+    >
+      {post.image && (
+        <div className="blog-post-card-image">
+          <img 
+            src={post.image} 
+            alt={post.title}
+            loading="lazy"
+          />
+        </div>
+      )}
+      <div className="blog-post-card-content">
+        <h3 className="blog-post-card-title">{post.title}</h3>
+        {post.summary && (
+          <p className="blog-post-card-summary">{post.summary}</p>
+        )}
+        <div className="blog-post-card-meta">
+          <span className="blog-post-card-author">
+            <FontAwesomeIcon icon={faUser} />
+            {displayName}
+          </span>
+          <span className="blog-post-card-date">
+            <FontAwesomeIcon icon={faCalendar} />
+            {formattedDate}
+          </span>
+        </div>
+      </div>
+    </Link>
+  )
+}
+
+export default BlogPostCard
+

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

@@ -1,6 +1,7 @@
 import React from 'react'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faChevronLeft, faBookmark, faSpinner, faList, faThLarge, faImage } from '@fortawesome/free-solid-svg-icons'
+import { faChevronLeft, faBookmark, faSpinner, faList, faThLarge, faImage, faRotate } from '@fortawesome/free-solid-svg-icons'
+import { formatDistanceToNow } from 'date-fns'
 import { RelayPool } from 'applesauce-relay'
 import { Bookmark, IndividualBookmark } from '../types/bookmarks'
 import { BookmarkItem } from './BookmarkItem'
@@ -8,6 +9,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[]
@@ -21,8 +23,10 @@ interface BookmarkListProps {
   onOpenSettings: () => void
   onRefresh?: () => void
   isRefreshing?: boolean
+  lastFetchTime?: number | null
   loading?: boolean
   relayPool: RelayPool | null
+  settings?: UserSettings
 }
 
 export const BookmarkList: React.FC<BookmarkListProps> = ({
@@ -37,8 +41,10 @@ export const BookmarkList: React.FC<BookmarkListProps> = ({
   onOpenSettings,
   onRefresh,
   isRefreshing,
+  lastFetchTime,
   loading = false,
-  relayPool
+  relayPool,
+  settings
 }) => {
   // Helper to check if a bookmark has either content or a URL
   const hasContentOrUrl = (ib: IndividualBookmark) => {
@@ -99,8 +105,6 @@ export const BookmarkList: React.FC<BookmarkListProps> = ({
         onToggleCollapse={onToggleCollapse} 
         onLogout={onLogout}
         onOpenSettings={onOpenSettings}
-        onRefresh={onRefresh}
-        isRefreshing={isRefreshing}
         relayPool={relayPool}
       />
       
@@ -123,9 +127,38 @@ export const BookmarkList: React.FC<BookmarkListProps> = ({
                 index={index} 
                 onSelectUrl={onSelectUrl}
                 viewMode={viewMode}
+                settings={settings}
               />
             )}
           </div>
+          {onRefresh && (
+            <div className="refresh-section" style={{
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              gap: '0.5rem',
+              padding: '1rem',
+              marginTop: '1rem',
+              borderTop: '1px solid var(--border-color)',
+              fontSize: '0.85rem',
+              color: 'var(--text-secondary)'
+            }}>
+              <IconButton
+                icon={faRotate}
+                onClick={onRefresh}
+                title="Refresh bookmarks"
+                ariaLabel="Refresh bookmarks"
+                variant="ghost"
+                disabled={isRefreshing}
+                spin={isRefreshing}
+              />
+              {lastFetchTime && (
+                <span>
+                  Updated {formatDistanceToNow(lastFetchTime, { addSuffix: true })}
+                </span>
+              )}
+            </div>
+          )}
         </div>
       )}
       <div className="view-mode-controls">

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/Bookmarks.tsx

@@ -10,6 +10,8 @@ import { useBookmarksData } from '../hooks/useBookmarksData'
 import { useContentSelection } from '../hooks/useContentSelection'
 import { useHighlightCreation } from '../hooks/useHighlightCreation'
 import { useBookmarksUI } from '../hooks/useBookmarksUI'
+import { useRelayStatus } from '../hooks/useRelayStatus'
+import { useOfflineSync } from '../hooks/useOfflineSync'
 import ThreePaneLayout from './ThreePaneLayout'
 import { classifyHighlights } from '../utils/highlightClassification'
 
@@ -50,6 +52,18 @@ const Bookmarks: React.FC<BookmarksProps> = ({ relayPool, onLogout }) => {
     accountManager
   })
 
+  // Monitor relay status for offline sync
+  const relayStatuses = useRelayStatus({ relayPool })
+
+  // Automatically sync local events to remote relays when coming back online
+  useOfflineSync({
+    relayPool,
+    account: activeAccount || null,
+    eventStore,
+    relayStatuses,
+    enabled: true
+  })
+
   const {
     isCollapsed,
     setIsCollapsed,
@@ -80,6 +94,7 @@ const Bookmarks: React.FC<BookmarksProps> = ({ relayPool, onLogout }) => {
     setHighlightsLoading,
     followedPubkeys,
     isRefreshing,
+    lastFetchTime,
     handleFetchHighlights,
     handleRefreshAll
   } = useBookmarksData({
@@ -88,7 +103,8 @@ const Bookmarks: React.FC<BookmarksProps> = ({ relayPool, onLogout }) => {
     accountManager,
     naddr,
     currentArticleCoordinate,
-    currentArticleEventId
+    currentArticleEventId,
+    settings
   })
 
   const {
@@ -115,6 +131,7 @@ const Bookmarks: React.FC<BookmarksProps> = ({ relayPool, onLogout }) => {
   } = useHighlightCreation({
     activeAccount,
     relayPool,
+    eventStore,
     currentArticle,
     selectedUrl,
     readerContent,
@@ -134,7 +151,8 @@ const Bookmarks: React.FC<BookmarksProps> = ({ relayPool, onLogout }) => {
     setHighlightsLoading,
     setCurrentArticleCoordinate,
     setCurrentArticleEventId,
-    setCurrentArticle
+    setCurrentArticle,
+    settings
   })
   
   // Load external URL if /r/* route is used
@@ -165,6 +183,7 @@ const Bookmarks: React.FC<BookmarksProps> = ({ relayPool, onLogout }) => {
       bookmarksLoading={bookmarksLoading}
       viewMode={viewMode}
       isRefreshing={isRefreshing}
+      lastFetchTime={lastFetchTime}
       onToggleSidebar={() => setIsCollapsed(!isCollapsed)}
       onLogout={onLogout}
       onViewModeChange={setViewMode}
@@ -175,6 +194,7 @@ const Bookmarks: React.FC<BookmarksProps> = ({ relayPool, onLogout }) => {
       }}
       onRefresh={handleRefreshAll}
       relayPool={relayPool}
+      eventStore={eventStore}
       readerLoading={readerLoading}
       readerContent={readerContent}
       selectedUrl={selectedUrl}

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/Explore.tsx

@@ -0,0 +1,129 @@
+import React, { useState, useEffect } from 'react'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faSpinner, faExclamationCircle, faCompass } from '@fortawesome/free-solid-svg-icons'
+import { Hooks } from 'applesauce-react'
+import { RelayPool } from 'applesauce-relay'
+import { nip19 } from 'nostr-tools'
+import { fetchContacts } from '../services/contactService'
+import { fetchBlogPostsFromAuthors, BlogPostPreview } from '../services/exploreService'
+import BlogPostCard from './BlogPostCard'
+
+interface ExploreProps {
+  relayPool: RelayPool
+}
+
+const Explore: React.FC<ExploreProps> = ({ relayPool }) => {
+  const activeAccount = Hooks.useActiveAccount()
+  const [blogPosts, setBlogPosts] = useState<BlogPostPreview[]>([])
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+
+  useEffect(() => {
+    const loadBlogPosts = async () => {
+      if (!activeAccount) {
+        setError('Please log in to explore content from your friends')
+        setLoading(false)
+        return
+      }
+
+      try {
+        setLoading(true)
+        setError(null)
+
+        // Fetch the user's contacts (friends)
+        const contacts = await fetchContacts(relayPool, activeAccount.pubkey)
+        
+        if (contacts.size === 0) {
+          setError('You are not following anyone yet. Follow some people to see their blog posts!')
+          setLoading(false)
+          return
+        }
+
+        // Get relay URLs from pool
+        const relayUrls = Array.from(relayPool.relays.values()).map(relay => relay.url)
+        
+        // Fetch blog posts from friends
+        const posts = await fetchBlogPostsFromAuthors(
+          relayPool,
+          Array.from(contacts),
+          relayUrls
+        )
+
+        if (posts.length === 0) {
+          setError('No blog posts found from your friends yet')
+        }
+
+        setBlogPosts(posts)
+      } catch (err) {
+        console.error('Failed to load blog posts:', err)
+        setError('Failed to load blog posts. Please try again.')
+      } finally {
+        setLoading(false)
+      }
+    }
+
+    loadBlogPosts()
+  }, [relayPool, activeAccount])
+
+  const getPostUrl = (post: BlogPostPreview) => {
+    // Get the d-tag identifier
+    const dTag = post.event.tags.find(t => t[0] === 'd')?.[1] || ''
+    
+    // Create naddr
+    const naddr = nip19.naddrEncode({
+      kind: 30023,
+      pubkey: post.author,
+      identifier: dTag
+    })
+    
+    return `/a/${naddr}`
+  }
+
+  if (loading) {
+    return (
+      <div className="explore-container">
+        <div className="explore-loading">
+          <FontAwesomeIcon icon={faSpinner} spin size="2x" />
+          <p>Loading blog posts from your friends...</p>
+        </div>
+      </div>
+    )
+  }
+
+  if (error) {
+    return (
+      <div className="explore-container">
+        <div className="explore-error">
+          <FontAwesomeIcon icon={faExclamationCircle} size="2x" />
+          <p>{error}</p>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="explore-container">
+      <div className="explore-header">
+        <h1>
+          <FontAwesomeIcon icon={faCompass} />
+          Explore
+        </h1>
+        <p className="explore-subtitle">
+          Discover blog posts from your friends on Nostr
+        </p>
+      </div>
+      <div className="explore-grid">
+        {blogPosts.map((post) => (
+          <BlogPostCard
+            key={`${post.author}:${post.event.tags.find(t => t[0] === 'd')?.[1]}`}
+            post={post}
+            href={getPostUrl(post)}
+          />
+        ))}
+      </div>
+    </div>
+  )
+}
+
+export default Explore
+

src/components/HighlightItem.tsx

@@ -1,10 +1,14 @@
-import React, { useEffect, useRef } from 'react'
+import React, { useEffect, useRef, useState } from 'react'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faQuoteLeft, faExternalLinkAlt } from '@fortawesome/free-solid-svg-icons'
+import { faQuoteLeft, faExternalLinkAlt, faPlane, faSpinner, faServer } from '@fortawesome/free-solid-svg-icons'
 import { Highlight } from '../types/highlights'
 import { formatDistanceToNow } from 'date-fns'
 import { useEventModel } from 'applesauce-react/hooks'
-import { Models } from 'applesauce-core'
+import { Models, IEventStore } from 'applesauce-core'
+import { RelayPool } from 'applesauce-relay'
+import { onSyncStateChange, isEventSyncing } from '../services/offlineSyncService'
+import { RELAYS } from '../config/relays'
+import { areAllRelaysLocal } from '../utils/helpers'
 
 interface HighlightWithLevel extends Highlight {
   level?: 'mine' | 'friends' | 'nostrverse'
@@ -15,10 +19,24 @@ interface HighlightItemProps {
   onSelectUrl?: (url: string) => void
   isSelected?: boolean
   onHighlightClick?: (highlightId: string) => void
+  relayPool?: RelayPool | null
+  eventStore?: IEventStore | null
+  onHighlightUpdate?: (highlight: Highlight) => void
 }
 
-export const HighlightItem: React.FC<HighlightItemProps> = ({ highlight, onSelectUrl, isSelected, onHighlightClick }) => {
+export const HighlightItem: React.FC<HighlightItemProps> = ({ 
+  highlight, 
+  onSelectUrl, 
+  isSelected, 
+  onHighlightClick,
+  relayPool,
+  eventStore,
+  onHighlightUpdate
+}) => {
   const itemRef = useRef<HTMLDivElement>(null)
+  const [isSyncing, setIsSyncing] = useState(() => isEventSyncing(highlight.id))
+  const [showOfflineIndicator, setShowOfflineIndicator] = useState(() => highlight.isOfflineCreated && !isSyncing)
+  const [isRebroadcasting, setIsRebroadcasting] = useState(false)
   
   // Resolve the profile of the user who made the highlight
   const profile = useEventModel(Models.ProfileModel, [highlight.pubkey])
@@ -30,6 +48,39 @@ export const HighlightItem: React.FC<HighlightItemProps> = ({ highlight, onSelec
     return `${highlight.pubkey.slice(0, 8)}...` // fallback to short pubkey
   }
   
+  // Update offline indicator when highlight prop changes
+  useEffect(() => {
+    if (highlight.isOfflineCreated && !isSyncing) {
+      setShowOfflineIndicator(true)
+    }
+  }, [highlight.isOfflineCreated, isSyncing])
+  
+  // Listen to sync state changes
+  useEffect(() => {
+    const unsubscribe = onSyncStateChange((eventId, syncingState) => {
+      if (eventId === highlight.id) {
+        setIsSyncing(syncingState)
+        // When sync completes successfully, update highlight to show all relays
+        if (!syncingState) {
+          setShowOfflineIndicator(false)
+          
+          // Update the highlight with all relays after successful sync
+          if (onHighlightUpdate && highlight.isLocalOnly) {
+            const updatedHighlight = {
+              ...highlight,
+              publishedRelays: RELAYS,
+              isLocalOnly: false,
+              isOfflineCreated: false
+            }
+            onHighlightUpdate(updatedHighlight)
+          }
+        }
+      }
+    })
+    
+    return unsubscribe
+  }, [highlight, onHighlightUpdate])
+  
   useEffect(() => {
     if (isSelected && itemRef.current) {
       itemRef.current.scrollIntoView({ behavior: 'smooth', block: 'center' })
@@ -58,6 +109,105 @@ export const HighlightItem: React.FC<HighlightItemProps> = ({ highlight, onSelec
   
   const sourceLink = getSourceLink()
   
+  // Handle rebroadcast to all relays
+  const handleRebroadcast = async (e: React.MouseEvent) => {
+    e.stopPropagation() // Prevent triggering highlight selection
+    
+    if (!relayPool || !eventStore || isRebroadcasting) return
+    
+    setIsRebroadcasting(true)
+    
+    try {
+      // Get the event from the event store
+      const event = eventStore.getEvent(highlight.id)
+      if (!event) {
+        console.error('Event not found in store:', highlight.id)
+        return
+      }
+      
+      // Publish to all configured relays - let the relay pool handle connection state
+      const targetRelays = RELAYS
+      
+      console.log('📡 Rebroadcasting highlight to', targetRelays.length, 'relay(s):', targetRelays)
+      
+      await relayPool.publish(targetRelays, event)
+      
+      console.log('✅ Rebroadcast successful!')
+      
+      // Update the highlight with new relay info
+      const isLocalOnly = areAllRelaysLocal(targetRelays)
+      const updatedHighlight = {
+        ...highlight,
+        publishedRelays: targetRelays,
+        isLocalOnly,
+        isOfflineCreated: false
+      }
+      
+      // Notify parent of the update
+      if (onHighlightUpdate) {
+        onHighlightUpdate(updatedHighlight)
+      }
+      
+      // Update local state
+      setShowOfflineIndicator(false)
+      
+    } catch (error) {
+      console.error('❌ Failed to rebroadcast:', error)
+    } finally {
+      setIsRebroadcasting(false)
+    }
+  }
+  
+  // Determine relay indicator icon and tooltip
+  const getRelayIndicatorInfo = () => {
+    // Show spinner if manually rebroadcasting OR auto-syncing
+    if (isRebroadcasting || isSyncing) {
+      return {
+        icon: faSpinner,
+        tooltip: isRebroadcasting ? 'rebroadcasting...' : 'syncing...',
+        spin: true
+      }
+    }
+    
+    // Always show relay list, use plane icon for local-only
+    const isLocalOrOffline = highlight.isLocalOnly || showOfflineIndicator
+    
+    // Show server icon with relay info if available
+    if (highlight.publishedRelays && highlight.publishedRelays.length > 0) {
+      const relayNames = highlight.publishedRelays.map(url => 
+        url.replace(/^wss?:\/\//, '').replace(/\/$/, '')
+      )
+      return {
+        icon: isLocalOrOffline ? faPlane : faServer,
+        tooltip: relayNames.join('\n'),
+        spin: false
+      }
+    }
+    
+    if (highlight.seenOnRelays && highlight.seenOnRelays.length > 0) {
+      const relayNames = highlight.seenOnRelays.map(url => 
+        url.replace(/^wss?:\/\//, '').replace(/\/$/, '')
+      )
+      return {
+        icon: faServer,
+        tooltip: relayNames.join('\n'),
+        spin: false
+      }
+    }
+    
+    // Fallback: show all relays we queried (where this was likely fetched from)
+    const relayNames = RELAYS.map(url => 
+      url.replace(/^wss?:\/\//, '').replace(/\/$/, '')
+    )
+    return {
+      icon: faServer,
+      tooltip: relayNames.join('\n'),
+      spin: false
+    }
+  }
+  
+  const relayIndicator = getRelayIndicatorInfo()
+  
   return (
     <div 
       ref={itemRef} 
@@ -68,6 +218,16 @@ export const HighlightItem: React.FC<HighlightItemProps> = ({ highlight, onSelec
     >
       <div className="highlight-quote-icon">
         <FontAwesomeIcon icon={faQuoteLeft} />
+        {relayIndicator && (
+          <div 
+            className="highlight-relay-indicator" 
+            title={relayIndicator.tooltip}
+            onClick={handleRebroadcast}
+            style={{ cursor: relayPool && eventStore ? 'pointer' : 'default' }}
+          >
+            <FontAwesomeIcon icon={relayIndicator.icon} spin={relayIndicator.spin} />
+          </div>
+        )}
       </div>
       
       <div className="highlight-content">

src/components/HighlightsPanel.tsx

@@ -6,6 +6,8 @@ import { HighlightItem } from './HighlightItem'
 import { useFilteredHighlights } from '../hooks/useFilteredHighlights'
 import HighlightsPanelCollapsed from './HighlightsPanel/HighlightsPanelCollapsed'
 import HighlightsPanelHeader from './HighlightsPanel/HighlightsPanelHeader'
+import { RelayPool } from 'applesauce-relay'
+import { IEventStore } from 'applesauce-core'
 
 export interface HighlightVisibility {
   nostrverse: boolean
@@ -28,6 +30,8 @@ interface HighlightsPanelProps {
   highlightVisibility?: HighlightVisibility
   onHighlightVisibilityChange?: (visibility: HighlightVisibility) => void
   followedPubkeys?: Set<string>
+  relayPool?: RelayPool | null
+  eventStore?: IEventStore | null
 }
 
 export const HighlightsPanel: React.FC<HighlightsPanelProps> = ({
@@ -44,9 +48,12 @@ export const HighlightsPanel: React.FC<HighlightsPanelProps> = ({
   currentUserPubkey,
   highlightVisibility = { nostrverse: true, friends: true, mine: true },
   onHighlightVisibilityChange,
-  followedPubkeys = new Set()
+  followedPubkeys = new Set(),
+  relayPool,
+  eventStore
 }) => {
   const [showHighlights, setShowHighlights] = useState(true)
+  const [localHighlights, setLocalHighlights] = useState(highlights)
   
   const handleToggleHighlights = () => {
     const newValue = !showHighlights
@@ -54,8 +61,19 @@ export const HighlightsPanel: React.FC<HighlightsPanelProps> = ({
     onToggleHighlights?.(newValue)
   }
   
+  // Keep track of highlight updates
+  React.useEffect(() => {
+    setLocalHighlights(highlights)
+  }, [highlights])
+  
+  const handleHighlightUpdate = (updatedHighlight: Highlight) => {
+    setLocalHighlights(prev => 
+      prev.map(h => h.id === updatedHighlight.id ? updatedHighlight : h)
+    )
+  }
+  
   const filteredHighlights = useFilteredHighlights({
-    highlights,
+    highlights: localHighlights,
     selectedUrl,
     highlightVisibility,
     currentUserPubkey,
@@ -108,6 +126,9 @@ export const HighlightsPanel: React.FC<HighlightsPanelProps> = ({
               onSelectUrl={onSelectUrl}
               isSelected={highlight.id === selectedHighlightId}
               onHighlightClick={onHighlightClick}
+              relayPool={relayPool}
+              eventStore={eventStore}
+              onHighlightUpdate={handleHighlightUpdate}
             />
           ))}
         </div>

src/components/ReaderHeader.tsx

@@ -1,7 +1,9 @@
 import React from 'react'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faHighlighter, faClock, faCalendar } from '@fortawesome/free-solid-svg-icons'
+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,24 +23,25 @@ const ReaderHeader: React.FC<ReaderHeaderProps> = ({
   published,
   readingTimeText,
   hasHighlights,
-  highlightCount
+  highlightCount,
+  settings
 }) => {
-  const formattedDate = published ? format(new Date(published * 1000), 'MMMM d, yyyy') : null
-  if (image) {
+  const cachedImage = useImageCache(image, settings)
+  const formattedDate = published ? format(new Date(published * 1000), 'MMM d, yyyy') : null
+  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}
+          </div>
+        )}
         {title && (
           <div className="reader-header-overlay">
             <h2 className="reader-title">{title}</h2>
             {summary && <p className="reader-summary">{summary}</p>}
             <div className="reader-meta">
-              {formattedDate && (
-                <div className="publish-date">
-                  <FontAwesomeIcon icon={faCalendar} />
-                  <span>{formattedDate}</span>
-                </div>
-              )}
               {readingTimeText && (
                 <div className="reading-time">
                   <FontAwesomeIcon icon={faClock} />
@@ -61,15 +65,14 @@ const ReaderHeader: React.FC<ReaderHeaderProps> = ({
     <>
       {title && (
         <div className="reader-header">
+          {formattedDate && (
+            <div className="publish-date-topright">
+              {formattedDate}
+            </div>
+          )}
           <h2 className="reader-title">{title}</h2>
           {summary && <p className="reader-summary">{summary}</p>}
           <div className="reader-meta">
-            {formattedDate && (
-              <div className="publish-date">
-                <FontAwesomeIcon icon={faCalendar} />
-                <span>{formattedDate}</span>
-              </div>
-            )}
             {readingTimeText && (
               <div className="reading-time">
                 <FontAwesomeIcon icon={faClock} />

src/components/RelayStatusIndicator.tsx

@@ -0,0 +1,97 @@
+import React, { useState, useEffect } from 'react'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faPlane, faGlobe, faCircle, faSpinner } from '@fortawesome/free-solid-svg-icons'
+import { RelayPool } from 'applesauce-relay'
+import { useRelayStatus } from '../hooks/useRelayStatus'
+import { isLocalRelay } from '../utils/helpers'
+
+interface RelayStatusIndicatorProps {
+  relayPool: RelayPool | null
+}
+
+export const RelayStatusIndicator: React.FC<RelayStatusIndicatorProps> = ({ relayPool }) => {
+  // Poll frequently for responsive offline indicator (5s instead of default 20s)
+  const relayStatuses = useRelayStatus({ relayPool, pollingInterval: 5000 })
+  const [isConnecting, setIsConnecting] = useState(true)
+  
+  if (!relayPool) return null
+  
+  // Get currently connected relays
+  const connectedRelays = relayStatuses.filter(r => r.isInPool)
+  const connectedUrls = connectedRelays.map(r => r.url)
+  
+  // Determine connection status
+  const hasLocalRelay = connectedUrls.some(url => isLocalRelay(url))
+  const hasRemoteRelay = connectedUrls.some(url => !isLocalRelay(url))
+  const localOnlyMode = hasLocalRelay && !hasRemoteRelay
+  const offlineMode = connectedUrls.length === 0
+  
+  // Show "Connecting" for first few seconds or until relays connect
+  useEffect(() => {
+    if (connectedUrls.length > 0) {
+      // Connected! Stop showing connecting state
+      setIsConnecting(false)
+    } else {
+      // No connections yet - show connecting for 4 seconds
+      setIsConnecting(true)
+      const timeout = setTimeout(() => {
+        setIsConnecting(false)
+      }, 4000)
+      return () => clearTimeout(timeout)
+    }
+  }, [connectedUrls.length])
+  
+  // Debug logging
+  useEffect(() => {
+    console.log('🔌 Relay Status Indicator:', {
+      mode: isConnecting ? 'CONNECTING' : offlineMode ? 'OFFLINE' : localOnlyMode ? 'LOCAL_ONLY' : 'ONLINE',
+      totalStatuses: relayStatuses.length,
+      connectedCount: connectedUrls.length,
+      connectedUrls: connectedUrls.map(u => u.replace(/^wss?:\/\//, '')),
+      hasLocalRelay,
+      hasRemoteRelay,
+      isConnecting
+    })
+  }, [offlineMode, localOnlyMode, connectedUrls.length, relayStatuses.length, hasLocalRelay, hasRemoteRelay, isConnecting])
+  
+  // Don't show indicator when fully connected (but show when connecting)
+  if (!localOnlyMode && !offlineMode && !isConnecting) return null
+  
+  return (
+    <div className="relay-status-indicator" title={
+      isConnecting
+        ? 'Connecting to relays...'
+        : offlineMode 
+          ? 'Offline - No relays connected'
+          : 'Local Relays Only - Highlights will be marked as local'
+    }>
+      <div className="relay-status-icon">
+        <FontAwesomeIcon icon={isConnecting ? faSpinner : offlineMode ? faCircle : faPlane} spin={isConnecting} />
+      </div>
+      <div className="relay-status-text">
+        {isConnecting ? (
+          <>
+            <span className="relay-status-title">Connecting</span>
+            <span className="relay-status-subtitle">Establishing connections...</span>
+          </>
+        ) : offlineMode ? (
+          <>
+            <span className="relay-status-title">Offline</span>
+            <span className="relay-status-subtitle">No relays connected</span>
+          </>
+        ) : (
+          <>
+            <span className="relay-status-title">Flight Mode</span>
+            <span className="relay-status-subtitle">{connectedUrls.length} local relay{connectedUrls.length !== 1 ? 's' : ''}</span>
+          </>
+        )}
+      </div>
+      {!offlineMode && !isConnecting && (
+        <div className="relay-status-pulse">
+          <FontAwesomeIcon icon={faGlobe} className="pulse-icon" />
+        </div>
+      )}
+    </div>
+  )
+}
+

src/components/Settings.tsx

@@ -8,6 +8,7 @@ import ReadingDisplaySettings from './Settings/ReadingDisplaySettings'
 import LayoutNavigationSettings from './Settings/LayoutNavigationSettings'
 import StartupPreferencesSettings from './Settings/StartupPreferencesSettings'
 import ZapSettings from './Settings/ZapSettings'
+import OfflineModeSettings from './Settings/OfflineModeSettings'
 import RelaySettings from './Settings/RelaySettings'
 import { useRelayStatus } from '../hooks/useRelayStatus'
 
@@ -18,7 +19,7 @@ const DEFAULT_SETTINGS: UserSettings = {
   sidebarCollapsed: true,
   highlightsCollapsed: true,
   readingFont: 'source-serif-4',
-  fontSize: 18,
+  fontSize: 21,
   highlightStyle: 'marker',
   highlightColor: '#ffff00',
   highlightColorNostrverse: '#9333ea',
@@ -30,6 +31,8 @@ const DEFAULT_SETTINGS: UserSettings = {
   zapSplitHighlighterWeight: 50,
   zapSplitBorisWeight: 2.1,
   zapSplitAuthorWeight: 50,
+  useLocalRelayAsCache: true,
+  rebroadcastToAllRelays: false,
 }
 
 interface SettingsProps {
@@ -57,6 +60,7 @@ const Settings: React.FC<SettingsProps> = ({ settings, onSave, onClose, relayPoo
   const saveTimeoutRef = useRef<number | null>(null)
   const isLocallyUpdating = useRef(false)
   
+  // Poll for relay status updates
   const relayStatuses = useRelayStatus({ relayPool })
 
   useEffect(() => {
@@ -158,6 +162,7 @@ const Settings: React.FC<SettingsProps> = ({ settings, onSave, onClose, relayPoo
         <LayoutNavigationSettings settings={localSettings} onUpdate={handleUpdate} />
         <StartupPreferencesSettings settings={localSettings} onUpdate={handleUpdate} />
         <ZapSettings settings={localSettings} onUpdate={handleUpdate} />
+        <OfflineModeSettings settings={localSettings} onUpdate={handleUpdate} onClose={onClose} />
         <RelaySettings relayStatuses={relayStatuses} onClose={onClose} />
       </div>
     </div>

src/components/Settings/OfflineModeSettings.tsx

@@ -0,0 +1,173 @@
+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 { getImageCacheStatsAsync, clearImageCache } from '../../services/imageCacheService'
+import IconButton from '../IconButton'
+
+interface OfflineModeSettingsProps {
+  settings: UserSettings
+  onUpdate: (updates: Partial<UserSettings>) => void
+  onClose?: () => void
+}
+
+const OfflineModeSettings: React.FC<OfflineModeSettingsProps> = ({ settings, onUpdate, onClose }) => {
+  const navigate = useNavigate()
+  const [cacheStats, setCacheStats] = useState<{
+    totalSizeMB: number
+    itemCount: number
+    items: Array<{ url: string, sizeMB: number }>
+  }>({ totalSizeMB: 0, itemCount: 0, items: [] })
+
+  const handleLinkClick = (url: string) => {
+    if (onClose) onClose()
+    navigate(`/r/${encodeURIComponent(url)}`)
+  }
+
+  const handleClearCache = async () => {
+    if (confirm('Are you sure you want to clear all cached images?')) {
+      await clearImageCache()
+      const stats = await getImageCacheStatsAsync()
+      setCacheStats(stats)
+    }
+  }
+
+  // Update cache stats periodically
+  useEffect(() => {
+    const updateStats = async () => {
+      const stats = await getImageCacheStatsAsync()
+      setCacheStats(stats)
+    }
+    
+    updateStats() // Initial load
+    const interval = setInterval(updateStats, 3000) // Update every 3 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
+            id="useLocalRelayAsCache"
+            type="checkbox"
+            checked={settings.useLocalRelayAsCache ?? true}
+            onChange={(e) => onUpdate({ useLocalRelayAsCache: e.target.checked })}
+            className="setting-checkbox"
+          />
+          <span>Use local relays as cache</span>
+        </label>
+      </div>
+
+      <div style={{ 
+        marginTop: '1.5rem', 
+        padding: '1rem',
+        background: 'var(--surface-secondary)',
+        borderRadius: '6px',
+        fontSize: '0.9rem',
+        lineHeight: '1.6'
+      }}>
+        <p style={{ margin: 0, color: 'var(--text-secondary)' }}>
+          Boris works best with a local relay. Consider running{' '}
+          <a 
+            href="https://github.com/greenart7c3/Citrine?tab=readme-ov-file#download" 
+            target="_blank" 
+            rel="noopener noreferrer"
+            style={{ color: 'var(--accent, #8b5cf6)' }}
+          >
+            Citrine
+          </a>
+          {' or '}
+          <a 
+            href="https://github.com/CodyTseng/nostr-relay-tray/releases" 
+            target="_blank" 
+            rel="noopener noreferrer"
+            style={{ color: 'var(--accent, #8b5cf6)' }}
+          >
+            nostr-relay-tray
+          </a>
+          . Don't know what relays are? Learn more{' '}
+          <a 
+            onClick={(e) => {
+              e.preventDefault()
+              handleLinkClick('https://nostr.how/en/relays')
+            }}
+            style={{ color: 'var(--accent, #8b5cf6)', cursor: 'pointer' }}
+          >
+            here
+          </a>
+          {' and '}
+          <a 
+            onClick={(e) => {
+              e.preventDefault()
+              handleLinkClick('https://davidebtc186.substack.com/p/the-importance-of-hosting-your-own')
+            }}
+            style={{ color: 'var(--accent, #8b5cf6)', cursor: 'pointer' }}
+          >
+            here
+          </a>
+          .
+        </p>
+      </div>
+    </div>
+  )
+}
+
+export default OfflineModeSettings
+

src/components/Settings/ReadingDisplaySettings.tsx

@@ -20,30 +20,32 @@ const ReadingDisplaySettings: React.FC<ReadingDisplaySettingsProps> = ({ setting
     <div className="settings-section">
       <h3 className="section-title">Reading & Display</h3>
       
-      <div className="setting-group setting-inline">
-        <label htmlFor="readingFont">Reading Font</label>
-        <div className="setting-control">
-          <FontSelector
-            value={settings.readingFont || 'source-serif-4'}
-            onChange={(font) => onUpdate({ readingFont: font })}
-          />
+      <div style={{ display: 'flex', gap: '1rem', flexWrap: 'wrap' }}>
+        <div className="setting-group setting-inline" style={{ flex: '1 1 auto', minWidth: '200px' }}>
+          <label htmlFor="readingFont">Reading Font</label>
+          <div className="setting-control">
+            <FontSelector
+              value={settings.readingFont || 'source-serif-4'}
+              onChange={(font) => onUpdate({ readingFont: font })}
+            />
+          </div>
         </div>
-      </div>
 
-      <div className="setting-group setting-inline">
-        <label>Font Size</label>
-        <div className="setting-buttons">
-          {[14, 16, 18, 20, 22].map(size => (
-            <button
-              key={size}
-              onClick={() => onUpdate({ fontSize: size })}
-              className={`font-size-btn ${(settings.fontSize || 18) === size ? 'active' : ''}`}
-              title={`${size}px`}
-              style={{ fontSize: `${size - 2}px` }}
-            >
-              A
-            </button>
-          ))}
+        <div className="setting-group setting-inline" style={{ flex: '0 1 auto' }}>
+          <label>Font Size</label>
+          <div className="setting-buttons">
+            {[16, 18, 21, 24, 28, 32].map(size => (
+              <button
+                key={size}
+                onClick={() => onUpdate({ fontSize: size })}
+                className={`font-size-btn ${(settings.fontSize || 21) === size ? 'active' : ''}`}
+                title={`${size}px`}
+                style={{ fontSize: `${size - 2}px` }}
+              >
+                A
+              </button>
+            ))}
+          </div>
         </div>
       </div>
 
@@ -149,7 +151,7 @@ const ReadingDisplaySettings: React.FC<ReadingDisplaySettingsProps> = ({ setting
           className="preview-content" 
           style={{ 
             fontFamily: previewFontFamily,
-            fontSize: `${settings.fontSize || 18}px`,
+            fontSize: `${settings.fontSize || 21}px`,
             '--highlight-rgb': hexToRgb(settings.highlightColor || '#ffff00')
           } as React.CSSProperties}
         >

src/components/Settings/RelaySettings.tsx

@@ -1,25 +1,16 @@
 import React from 'react'
-import { useNavigate } from 'react-router-dom'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faCheckCircle, faCircle, faClock } from '@fortawesome/free-solid-svg-icons'
+import { faCheckCircle, faWifi, faClock, faPlane } from '@fortawesome/free-solid-svg-icons'
 import { RelayStatus } from '../../services/relayStatusService'
 import { formatDistanceToNow } from 'date-fns'
+import { isLocalRelay } from '../../utils/helpers'
 
 interface RelaySettingsProps {
   relayStatuses: RelayStatus[]
   onClose?: () => void
 }
 
-const RelaySettings: React.FC<RelaySettingsProps> = ({ relayStatuses, onClose }) => {
-  const navigate = useNavigate()
-  const activeRelays = relayStatuses.filter(r => r.isInPool)
-  const recentRelays = relayStatuses.filter(r => !r.isInPool)
-
-  const handleLinkClick = (url: string) => {
-    if (onClose) onClose()
-    navigate(`/r/${encodeURIComponent(url)}`)
-  }
-
+const RelaySettings: React.FC<RelaySettingsProps> = ({ relayStatuses }) => {
   const formatRelayUrl = (url: string) => {
     return url.replace(/^wss?:\/\//, '').replace(/\/$/, '')
   }
@@ -32,110 +23,109 @@ const RelaySettings: React.FC<RelaySettingsProps> = ({ relayStatuses, onClose })
     }
   }
 
+  // Sort relays: local relays first, then by connection status, then by URL
+  const sortedRelays = [...relayStatuses].sort((a, b) => {
+    const aIsLocal = isLocalRelay(a.url)
+    const bIsLocal = isLocalRelay(b.url)
+    
+    // Local relays always first
+    if (aIsLocal && !bIsLocal) return -1
+    if (!aIsLocal && bIsLocal) return 1
+    
+    // Within local or remote groups, connected before disconnected
+    if (a.isInPool !== b.isInPool) return a.isInPool ? -1 : 1
+    
+    // Finally sort by URL
+    return a.url.localeCompare(b.url)
+  })
+
+  const getRelayIcon = (relay: RelayStatus) => {
+    const isLocal = isLocalRelay(relay.url)
+    const isConnected = relay.isInPool
+    
+    if (isLocal) {
+      return {
+        icon: faPlane,
+        color: isConnected ? '#22c55e' : '#ef4444',
+        size: '1rem'
+      }
+    } else {
+      if (isConnected) {
+        return {
+          icon: faCheckCircle,
+          color: '#22c55e',
+          size: '1rem'
+        }
+      } else {
+        return {
+          icon: faWifi,
+          color: '#ef4444',
+          size: '1rem'
+        }
+      }
+    }
+  }
+
   return (
     <div className="settings-section">
-      <h3>Relays</h3>
+      <h3 className="section-title">Relays</h3>
 
-      {activeRelays.length > 0 && (
-        <div className="relay-group" style={{ marginBottom: '1.5rem' }}>
-          <div className="relay-list">
-            {activeRelays.map((relay) => (
-              <div 
-                key={relay.url} 
-                className="relay-item"
-                style={{
-                  display: 'flex',
-                  alignItems: 'center',
-                  gap: '0.75rem',
-                  padding: '0.75rem',
-                  background: 'var(--surface-secondary)',
-                  borderRadius: '6px',
-                  marginBottom: '0.5rem'
-                }}
-              >
-                <FontAwesomeIcon 
-                  icon={faCheckCircle} 
-                  style={{ 
-                    color: 'var(--success, #22c55e)',
-                    fontSize: '1rem'
-                  }} 
-                />
-                <div style={{ flex: 1, minWidth: 0 }}>
-                  <div style={{ 
-                    fontSize: '0.9rem',
-                    fontFamily: 'var(--font-mono, monospace)',
-                    whiteSpace: 'nowrap',
-                    overflow: 'hidden',
-                    textOverflow: 'ellipsis'
-                  }}>
-                    {formatRelayUrl(relay.url)}
-                  </div>
-                </div>
-              </div>
-            ))}
-          </div>
-        </div>
-      )}
-
-      {recentRelays.length > 0 && (
+      {sortedRelays.length > 0 && (
         <div className="relay-group">
-          <h4 style={{ 
-            fontSize: '0.85rem', 
-            fontWeight: 600, 
-            color: 'var(--text-secondary)',
-            marginBottom: '0.75rem',
-            textTransform: 'uppercase',
-            letterSpacing: '0.05em'
-          }}>
-            Recently Seen
-          </h4>
           <div className="relay-list">
-            {recentRelays.map((relay) => (
-              <div 
-                key={relay.url} 
-                className="relay-item"
-                style={{
-                  display: 'flex',
-                  alignItems: 'center',
-                  gap: '0.75rem',
-                  padding: '0.75rem',
-                  background: 'var(--surface-secondary)',
-                  borderRadius: '6px',
-                  marginBottom: '0.5rem',
-                  opacity: 0.7
-                }}
-              >
-                <FontAwesomeIcon 
-                  icon={faCircle} 
-                  style={{ 
-                    color: 'var(--text-tertiary, #6b7280)',
-                    fontSize: '0.7rem'
-                  }} 
-                />
-                <div style={{ flex: 1, minWidth: 0 }}>
-                  <div style={{ 
-                    fontSize: '0.9rem',
-                    fontFamily: 'var(--font-mono, monospace)',
-                    whiteSpace: 'nowrap',
-                    overflow: 'hidden',
-                    textOverflow: 'ellipsis'
-                  }}>
-                    {formatRelayUrl(relay.url)}
+            {sortedRelays.map((relay) => {
+              const iconConfig = getRelayIcon(relay)
+              const isDisconnected = !relay.isInPool
+              
+              return (
+                <div 
+                  key={relay.url} 
+                  className="relay-item"
+                  style={{
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: '0.75rem',
+                    padding: '0.75rem',
+                    background: 'var(--surface-secondary)',
+                    borderRadius: '6px',
+                    marginBottom: '0.5rem',
+                    opacity: isDisconnected ? 0.7 : 1
+                  }}
+                >
+                  <FontAwesomeIcon 
+                    icon={iconConfig.icon} 
+                    style={{ 
+                      color: iconConfig.color,
+                      fontSize: iconConfig.size
+                    }} 
+                  />
+                  <div style={{ flex: 1, minWidth: 0 }}>
+                    <div style={{ 
+                      fontSize: '0.9rem',
+                      fontFamily: 'var(--font-mono, monospace)',
+                      whiteSpace: 'nowrap',
+                      overflow: 'hidden',
+                      textOverflow: 'ellipsis'
+                    }}>
+                      {formatRelayUrl(relay.url)}
+                    </div>
                   </div>
+                  {isDisconnected && (
+                    <div style={{
+                      display: 'flex',
+                      alignItems: 'center',
+                      gap: '0.5rem',
+                      fontSize: '0.8rem',
+                      color: 'var(--text-tertiary)',
+                      whiteSpace: 'nowrap'
+                    }}>
+                      <FontAwesomeIcon icon={faClock} />
+                      {formatLastSeen(relay.lastSeen)}
+                    </div>
+                  )}
                 </div>
-                <div style={{
-                  display: 'flex',
-                  alignItems: 'center',
-                  gap: '0.5rem',
-                  fontSize: '0.8rem',
-                  color: 'var(--text-tertiary)',
-                  whiteSpace: 'nowrap'
-                }}>
-                  <FontAwesomeIcon icon={faClock} />
-                  {formatLastSeen(relay.lastSeen)}
-                </div>
-              </div>
-            ))}
+              )
+            })}
           </div>
         </div>
       )}
@@ -145,57 +135,6 @@ const RelaySettings: React.FC<RelaySettingsProps> = ({ relayStatuses, onClose })
           No relay connections found
         </p>
       )}
-
-      <div style={{ 
-        marginTop: '1.5rem', 
-        padding: '1rem',
-        background: 'var(--surface-secondary)',
-        borderRadius: '6px',
-        fontSize: '0.9rem',
-        lineHeight: '1.6'
-      }}>
-        <p style={{ margin: 0, color: 'var(--text-secondary)' }}>
-          Boris works best with a local relay. Consider running{' '}
-          <a 
-            href="https://github.com/greenart7c3/Citrine?tab=readme-ov-file#download" 
-            target="_blank" 
-            rel="noopener noreferrer"
-            style={{ color: 'var(--accent, #8b5cf6)' }}
-          >
-            Citrine
-          </a>
-          {' or '}
-          <a 
-            href="https://github.com/CodyTseng/nostr-relay-tray/releases" 
-            target="_blank" 
-            rel="noopener noreferrer"
-            style={{ color: 'var(--accent, #8b5cf6)' }}
-          >
-            nostr-relay-tray
-          </a>
-          . Don't know what relays are? Learn more{' '}
-          <a 
-            onClick={(e) => {
-              e.preventDefault()
-              handleLinkClick('https://nostr.how/en/relays')
-            }}
-            style={{ color: 'var(--accent, #8b5cf6)', cursor: 'pointer' }}
-          >
-            here
-          </a>
-          {' and '}
-          <a 
-            onClick={(e) => {
-              e.preventDefault()
-              handleLinkClick('https://davidebtc186.substack.com/p/the-importance-of-hosting-your-own')
-            }}
-            style={{ color: 'var(--accent, #8b5cf6)', cursor: 'pointer' }}
-          >
-            here
-          </a>
-          .
-        </p>
-      </div>
     </div>
   )
 }

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/SidebarHeader.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react'
 import { useNavigate } from 'react-router-dom'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faChevronRight, faRightFromBracket, faRightToBracket, faUserCircle, faGear, faRotate, faHome, faPlus } from '@fortawesome/free-solid-svg-icons'
+import { faChevronRight, faRightFromBracket, faRightToBracket, faUserCircle, faGear, faHome, faPlus, faNewspaper } from '@fortawesome/free-solid-svg-icons'
 import { Hooks } from 'applesauce-react'
 import { useEventModel } from 'applesauce-react/hooks'
 import { Models } from 'applesauce-core'
@@ -16,12 +16,10 @@ interface SidebarHeaderProps {
   onToggleCollapse: () => void
   onLogout: () => void
   onOpenSettings: () => void
-  onRefresh?: () => void
-  isRefreshing?: boolean
   relayPool: RelayPool | null
 }
 
-const SidebarHeader: React.FC<SidebarHeaderProps> = ({ onToggleCollapse, onLogout, onOpenSettings, onRefresh, isRefreshing, relayPool }) => {
+const SidebarHeader: React.FC<SidebarHeaderProps> = ({ onToggleCollapse, onLogout, onOpenSettings, relayPool }) => {
   const [isConnecting, setIsConnecting] = useState(false)
   const [showAddModal, setShowAddModal] = useState(false)
   const navigate = useNavigate()
@@ -61,11 +59,6 @@ const SidebarHeader: React.FC<SidebarHeaderProps> = ({ onToggleCollapse, onLogou
     }
 
     await createWebBookmark(url, title, description, tags, activeAccount, relayPool, RELAYS)
-    
-    // Refresh bookmarks after creating
-    if (onRefresh) {
-      onRefresh()
-    }
   }
 
   const profileImage = getProfileImage()
@@ -101,6 +94,13 @@ const SidebarHeader: React.FC<SidebarHeaderProps> = ({ onToggleCollapse, onLogou
           ariaLabel="Home"
           variant="ghost"
         />
+        <IconButton
+          icon={faNewspaper}
+          onClick={() => navigate('/explore')}
+          title="Explore"
+          ariaLabel="Explore"
+          variant="ghost"
+        />
         <IconButton
           icon={faGear}
           onClick={onOpenSettings}
@@ -108,17 +108,6 @@ const SidebarHeader: React.FC<SidebarHeaderProps> = ({ onToggleCollapse, onLogou
           ariaLabel="Settings"
           variant="ghost"
         />
-        {onRefresh && (
-          <IconButton
-            icon={faRotate}
-            onClick={onRefresh}
-            title="Refresh bookmarks"
-            ariaLabel="Refresh bookmarks"
-            variant="ghost"
-            disabled={isRefreshing}
-            spin={isRefreshing}
-          />
-        )}
         {activeAccount && (
           <IconButton
             icon={faPlus}

src/components/ThreePaneLayout.tsx

@@ -1,11 +1,13 @@
 import React from 'react'
 import { RelayPool } from 'applesauce-relay'
+import { IEventStore } from 'applesauce-core'
 import { BookmarkList } from './BookmarkList'
 import ContentPanel from './ContentPanel'
 import { HighlightsPanel } from './HighlightsPanel'
 import Settings from './Settings'
 import Toast from './Toast'
 import { HighlightButton } from './HighlightButton'
+import { RelayStatusIndicator } from './RelayStatusIndicator'
 import { ViewMode } from './Bookmarks'
 import { Bookmark } from '../types/bookmarks'
 import { Highlight } from '../types/highlights'
@@ -26,12 +28,14 @@ interface ThreePaneLayoutProps {
   bookmarksLoading: boolean
   viewMode: ViewMode
   isRefreshing: boolean
+  lastFetchTime?: number | null
   onToggleSidebar: () => void
   onLogout: () => void
   onViewModeChange: (mode: ViewMode) => void
   onOpenSettings: () => void
   onRefresh: () => void
   relayPool: RelayPool | null
+  eventStore: IEventStore | null
   
   // Content pane
   readerLoading: boolean
@@ -87,8 +91,10 @@ const ThreePaneLayout: React.FC<ThreePaneLayoutProps> = (props) => {
             onOpenSettings={props.onOpenSettings}
             onRefresh={props.onRefresh}
             isRefreshing={props.isRefreshing}
+            lastFetchTime={props.lastFetchTime}
             loading={props.bookmarksLoading}
             relayPool={props.relayPool}
+            settings={props.settings}
           />
         </div>
         <div className="pane main">
@@ -120,6 +126,7 @@ const ThreePaneLayout: React.FC<ThreePaneLayoutProps> = (props) => {
               onClearSelection={props.onClearSelection}
               currentUserPubkey={props.currentUserPubkey}
               followedPubkeys={props.followedPubkeys}
+              settings={props.settings}
             />
           )}
         </div>
@@ -139,6 +146,8 @@ const ThreePaneLayout: React.FC<ThreePaneLayoutProps> = (props) => {
             highlightVisibility={props.highlightVisibility}
             onHighlightVisibilityChange={props.onHighlightVisibilityChange}
             followedPubkeys={props.followedPubkeys}
+            relayPool={props.relayPool}
+            eventStore={props.eventStore}
           />
         </div>
       </div>
@@ -149,6 +158,7 @@ const ThreePaneLayout: React.FC<ThreePaneLayoutProps> = (props) => {
           highlightColor={props.settings.highlightColor || '#ffff00'}
         />
       )}
+      <RelayStatusIndicator relayPool={props.relayPool} />
       {props.toastMessage && (
         <Toast
           message={props.toastMessage}

src/config/relays.ts

@@ -3,9 +3,10 @@
  * Single set of relays used throughout the application
  */
 
-// All relays including local relay
+// All relays including local relays
 export const RELAYS = [
   'ws://localhost:10547',
+  'ws://localhost:4869',
   'wss://relay.damus.io',
   'wss://nos.lol',
   'wss://relay.nostr.band',

src/hooks/useArticleLoader.ts

@@ -5,6 +5,7 @@ import { fetchHighlightsForArticle } from '../services/highlightService'
 import { ReadableContent } from '../services/readerService'
 import { Highlight } from '../types/highlights'
 import { NostrEvent } from 'nostr-tools'
+import { UserSettings } from '../services/settingsService'
 
 interface UseArticleLoaderProps {
   naddr: string | undefined
@@ -18,6 +19,7 @@ interface UseArticleLoaderProps {
   setCurrentArticleCoordinate: (coord: string | undefined) => void
   setCurrentArticleEventId: (id: string | undefined) => void
   setCurrentArticle?: (article: NostrEvent) => void
+  settings?: UserSettings
 }
 
 export function useArticleLoader({
@@ -31,7 +33,8 @@ export function useArticleLoader({
   setHighlightsLoading,
   setCurrentArticleCoordinate,
   setCurrentArticleEventId,
-  setCurrentArticle
+  setCurrentArticle,
+  settings
 }: UseArticleLoaderProps) {
   useEffect(() => {
     if (!relayPool || !naddr) return
@@ -44,7 +47,7 @@ export function useArticleLoader({
       // Keep highlights panel collapsed by default - only open on user interaction
       
       try {
-        const article = await fetchArticleByNaddr(relayPool, naddr)
+        const article = await fetchArticleByNaddr(relayPool, naddr, false, settings)
         setReaderContent({
           title: article.title,
           markdown: article.markdown,
@@ -86,7 +89,8 @@ export function useArticleLoader({
                 const highlightsList = Array.from(highlightsMap.values())
                 setHighlights(highlightsList.sort((a, b) => b.created_at - a.created_at))
               }
-            }
+            },
+            settings
           )
           console.log(`📌 Found ${highlightsMap.size} highlights`)
         } catch (err) {
@@ -106,5 +110,5 @@ export function useArticleLoader({
     }
     
     loadArticle()
-  }, [naddr, relayPool, setSelectedUrl, setReaderContent, setReaderLoading, setIsCollapsed, setHighlights, setHighlightsLoading, setCurrentArticleCoordinate, setCurrentArticleEventId, setCurrentArticle])
+  }, [naddr, relayPool, setSelectedUrl, setReaderContent, setReaderLoading, setIsCollapsed, setHighlights, setHighlightsLoading, setCurrentArticleCoordinate, setCurrentArticleEventId, setCurrentArticle, settings])
 }

src/hooks/useBookmarksData.ts

@@ -5,6 +5,7 @@ import { Highlight } from '../types/highlights'
 import { fetchBookmarks } from '../services/bookmarkService'
 import { fetchHighlights, fetchHighlightsForArticle } from '../services/highlightService'
 import { fetchContacts } from '../services/contactService'
+import { UserSettings } from '../services/settingsService'
 
 interface UseBookmarksDataParams {
   relayPool: RelayPool | null
@@ -15,6 +16,7 @@ interface UseBookmarksDataParams {
   naddr?: string
   currentArticleCoordinate?: string
   currentArticleEventId?: string
+  settings?: UserSettings
 }
 
 export const useBookmarksData = ({
@@ -23,7 +25,8 @@ export const useBookmarksData = ({
   accountManager,
   naddr,
   currentArticleCoordinate,
-  currentArticleEventId
+  currentArticleEventId,
+  settings
 }: UseBookmarksDataParams) => {
   const [bookmarks, setBookmarks] = useState<Bookmark[]>([])
   const [bookmarksLoading, setBookmarksLoading] = useState(true)
@@ -31,6 +34,7 @@ export const useBookmarksData = ({
   const [highlightsLoading, setHighlightsLoading] = useState(true)
   const [followedPubkeys, setFollowedPubkeys] = useState<Set<string>>(new Set())
   const [isRefreshing, setIsRefreshing] = useState(false)
+  const [lastFetchTime, setLastFetchTime] = useState<number | null>(null)
 
   const handleFetchContacts = useCallback(async () => {
     if (!relayPool || !activeAccount) return
@@ -43,11 +47,11 @@ export const useBookmarksData = ({
     setBookmarksLoading(true)
     try {
       const fullAccount = accountManager.getActive()
-      await fetchBookmarks(relayPool, fullAccount || activeAccount, setBookmarks)
+      await fetchBookmarks(relayPool, fullAccount || activeAccount, setBookmarks, settings)
     } finally {
       setBookmarksLoading(false)
     }
-  }, [relayPool, activeAccount, accountManager])
+  }, [relayPool, activeAccount, accountManager, settings])
 
   const handleFetchHighlights = useCallback(async () => {
     if (!relayPool) return
@@ -67,11 +71,12 @@ export const useBookmarksData = ({
               const highlightsList = Array.from(highlightsMap.values())
               setHighlights(highlightsList.sort((a, b) => b.created_at - a.created_at))
             }
-          }
+          },
+          settings
         )
         console.log(`🔄 Refreshed ${highlightsMap.size} highlights for article`)
       } else if (activeAccount) {
-        const fetchedHighlights = await fetchHighlights(relayPool, activeAccount.pubkey)
+        const fetchedHighlights = await fetchHighlights(relayPool, activeAccount.pubkey, undefined, settings)
         setHighlights(fetchedHighlights)
       }
     } catch (err) {
@@ -79,7 +84,7 @@ export const useBookmarksData = ({
     } finally {
       setHighlightsLoading(false)
     }
-  }, [relayPool, activeAccount, currentArticleCoordinate, currentArticleEventId])
+  }, [relayPool, activeAccount, currentArticleCoordinate, currentArticleEventId, settings])
 
   const handleRefreshAll = useCallback(async () => {
     if (!relayPool || !activeAccount || isRefreshing) return
@@ -89,6 +94,7 @@ export const useBookmarksData = ({
       await handleFetchBookmarks()
       await handleFetchHighlights()
       await handleFetchContacts()
+      setLastFetchTime(Date.now())
     } catch (err) {
       console.error('Failed to refresh data:', err)
     } finally {
@@ -115,6 +121,7 @@ export const useBookmarksData = ({
     setHighlightsLoading,
     followedPubkeys,
     isRefreshing,
+    lastFetchTime,
     handleFetchBookmarks,
     handleFetchHighlights,
     handleRefreshAll

src/hooks/useHighlightCreation.ts

@@ -1,9 +1,10 @@
 import { useCallback, useRef } from 'react'
 import { RelayPool } from 'applesauce-relay'
 import { NostrEvent } from 'nostr-tools'
+import { IEventStore } from 'applesauce-core'
 import { Highlight } from '../types/highlights'
 import { ReadableContent } from '../services/readerService'
-import { createHighlight, eventToHighlight } from '../services/highlightCreationService'
+import { createHighlight } from '../services/highlightCreationService'
 import { HighlightButtonRef } from '../components/HighlightButton'
 import { UserSettings } from '../services/settingsService'
 
@@ -11,6 +12,7 @@ interface UseHighlightCreationParams {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   activeAccount: any
   relayPool: RelayPool | null
+  eventStore: IEventStore | null
   currentArticle: NostrEvent | undefined
   selectedUrl: string | undefined
   readerContent: ReadableContent | undefined
@@ -21,6 +23,7 @@ interface UseHighlightCreationParams {
 export const useHighlightCreation = ({
   activeAccount,
   relayPool,
+  eventStore,
   currentArticle,
   selectedUrl,
   readerContent,
@@ -38,7 +41,7 @@ export const useHighlightCreation = ({
   }, [])
 
   const handleCreateHighlight = useCallback(async (text: string) => {
-    if (!activeAccount || !relayPool) {
+    if (!activeAccount || !relayPool || !eventStore) {
       console.error('Missing requirements for highlight creation')
       return
     }
@@ -54,25 +57,34 @@ export const useHighlightCreation = ({
         ? currentArticle.content 
         : readerContent?.markdown || readerContent?.html
       
-      const signedEvent = await createHighlight(
+      console.log('🎯 Creating highlight...', { text: text.substring(0, 50) + '...' })
+      
+      const newHighlight = await createHighlight(
         text,
         source,
         activeAccount,
         relayPool,
+        eventStore,
         contentForContext,
         undefined,
         settings
       )
       
-      console.log('✅ Highlight created successfully!')
-      highlightButtonRef.current?.clearSelection()
+      console.log('✅ Highlight created successfully!', {
+        id: newHighlight.id,
+        isLocalOnly: newHighlight.isLocalOnly,
+        isOfflineCreated: newHighlight.isOfflineCreated,
+        publishedRelays: newHighlight.publishedRelays
+      })
       
-      const newHighlight = eventToHighlight(signedEvent)
+      highlightButtonRef.current?.clearSelection()
       onHighlightCreated(newHighlight)
     } catch (error) {
-      console.error('Failed to create highlight:', error)
+      console.error('❌ Failed to create highlight:', error)
+      // Re-throw to allow parent to handle
+      throw error
     }
-  }, [activeAccount, relayPool, currentArticle, selectedUrl, readerContent, onHighlightCreated, settings])
+  }, [activeAccount, relayPool, eventStore, currentArticle, selectedUrl, readerContent, onHighlightCreated, settings])
 
   return {
     highlightButtonRef,

src/hooks/useImageCache.ts

@@ -0,0 +1,34 @@
+import { UserSettings } from '../services/settingsService'
+
+/**
+ * Hook to return image URL for display
+ * Service Worker handles all caching transparently
+ * Images are cached on first load and available offline automatically
+ * 
+ * @param imageUrl - The URL of the image to display
+ * @returns The image URL (Service Worker handles caching)
+ */
+export function useImageCache(
+  imageUrl: string | undefined,
+  // eslint-disable-next-line no-unused-vars
+  _settings?: UserSettings
+): string | undefined {
+  // Service Worker handles everything - just return the URL as-is
+  return imageUrl
+}
+
+/**
+ * Pre-load image to ensure it's cached by Service Worker
+ * Triggers a fetch so the SW can cache it even if not visible yet
+ */
+export function useCacheImageOnLoad(
+  imageUrl: string | undefined,
+  // eslint-disable-next-line no-unused-vars
+  _settings?: UserSettings
+): void {
+  // Service Worker will cache on first fetch
+  // This hook is now a no-op, kept for API compatibility
+  // The browser will automatically fetch and cache images when they're used in <img> tags
+  void imageUrl
+}
+

src/hooks/useOfflineSync.ts

@@ -0,0 +1,70 @@
+import { useEffect, useRef } from 'react'
+import { RelayPool } from 'applesauce-relay'
+import { IAccount } from 'applesauce-accounts'
+import { IEventStore } from 'applesauce-core'
+import { syncLocalEventsToRemote } from '../services/offlineSyncService'
+import { isLocalRelay } from '../utils/helpers'
+import { RelayStatus } from '../services/relayStatusService'
+
+interface UseOfflineSyncParams {
+  relayPool: RelayPool | null
+  account: IAccount | null
+  eventStore: IEventStore | null
+  relayStatuses: RelayStatus[]
+  enabled?: boolean
+}
+
+export function useOfflineSync({
+  relayPool,
+  account: _account,
+  eventStore,
+  relayStatuses,
+  enabled = true
+}: UseOfflineSyncParams) {
+  const previousStateRef = useRef<{
+    hasRemoteRelays: boolean
+    initialized: boolean
+  }>({
+    hasRemoteRelays: false,
+    initialized: false
+  })
+
+  useEffect(() => {
+    if (!enabled || !relayPool || !_account || !eventStore) return
+
+    const connectedRelays = relayStatuses.filter(r => r.isInPool)
+    const hasRemoteRelays = connectedRelays.some(r => !isLocalRelay(r.url))
+    const hasLocalRelays = connectedRelays.some(r => isLocalRelay(r.url))
+
+    // Skip the first check to avoid syncing on initial load
+    if (!previousStateRef.current.initialized) {
+      previousStateRef.current = {
+        hasRemoteRelays,
+        initialized: true
+      }
+      return
+    }
+
+    // Detect transition: from local-only to having remote relays
+    const wasLocalOnly = !previousStateRef.current.hasRemoteRelays && hasLocalRelays
+    const isNowOnline = hasRemoteRelays
+
+    if (wasLocalOnly && isNowOnline) {
+      console.log('✈️ Detected transition: Flight Mode → Online')
+      console.log('📊 Relay state:', {
+        connectedRelays: connectedRelays.length,
+        remoteRelays: connectedRelays.filter(r => !isLocalRelay(r.url)).length,
+        localRelays: connectedRelays.filter(r => isLocalRelay(r.url)).length
+      })
+      
+      // Wait a moment for relays to fully establish connections
+      setTimeout(() => {
+        console.log('🚀 Starting sync after delay...')
+        syncLocalEventsToRemote(relayPool, eventStore)
+      }, 2000)
+    }
+
+    previousStateRef.current.hasRemoteRelays = hasRemoteRelays
+  }, [relayPool, _account, eventStore, relayStatuses, enabled])
+}
+

src/hooks/useRelayStatus.ts

@@ -9,7 +9,7 @@ interface UseRelayStatusParams {
 
 export function useRelayStatus({ 
   relayPool, 
-  pollingInterval = 5000 
+  pollingInterval = 20000 
 }: UseRelayStatusParams) {
   const [relayStatuses, setRelayStatuses] = useState<RelayStatus[]>([])
 

src/hooks/useSettings.ts

@@ -58,7 +58,7 @@ export function useSettings({ relayPool, eventStore, pubkey, accountManager }: U
       
       // Apply font settings after font is loaded
       root.setProperty('--reading-font', getFontFamily(fontKey))
-      root.setProperty('--reading-font-size', `${settings.fontSize || 18}px`)
+      root.setProperty('--reading-font-size', `${settings.fontSize || 21}px`)
       
       // Set highlight colors for three levels
       root.setProperty('--highlight-color-mine', settings.highlightColorMine || '#ffff00')

src/index.css

@@ -502,6 +502,7 @@ body {
 
 .reader-header {
   margin-bottom: 2rem;
+  position: relative;
 }
 
 .reader-title {
@@ -524,6 +525,31 @@ body {
   flex-wrap: wrap;
 }
 
+.publish-date {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  font-size: 0.813rem;
+  color: rgba(136, 136, 136, 0.7);
+  opacity: 0.85;
+}
+
+.publish-date svg {
+  font-size: 0.75rem;
+  opacity: 0.6;
+}
+
+.publish-date-topright {
+  position: absolute;
+  top: 1rem;
+  right: 1rem;
+  font-size: 0.813rem;
+  color: #fff;
+  padding: 0.4rem 0.75rem;
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
+  z-index: 10;
+}
+
 .reading-time {
   display: flex;
   align-items: center;
@@ -1069,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;
@@ -1116,6 +1142,17 @@ body {
   flex-wrap: wrap;
 }
 
+.reader-header-overlay .publish-date {
+  color: rgba(255, 255, 255, 0.65);
+  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+  opacity: 1;
+}
+
+.reader-header-overlay .publish-date svg {
+  opacity: 0.7;
+}
+
+
 .reader-header-overlay .reading-time,
 .reader-header-overlay .highlight-indicator {
   background: rgba(255, 255, 255, 0.15);
@@ -1220,6 +1257,14 @@ body {
     color: #646cff;
   }
   
+  .highlight-relay-indicator {
+    color: #666;
+  }
+  
+  .highlight-relay-indicator:hover {
+    color: #333;
+  }
+  
   .highlight-text {
     color: #213547;
   }
@@ -1520,6 +1565,28 @@ body {
   font-size: 1.2rem;
   flex-shrink: 0;
   margin-top: 0.25rem;
+  position: relative;
+}
+
+.highlight-relay-indicator {
+  position: absolute;
+  bottom: -4px;
+  left: 0;
+  font-size: 0.7rem;
+  color: #888;
+  opacity: 0.7;
+  transition: all 0.2s ease;
+  cursor: pointer;
+}
+
+.highlight-relay-indicator:hover {
+  opacity: 1;
+  color: #aaa;
+  transform: scale(1.1);
+}
+
+.highlight-relay-indicator:active {
+  transform: scale(0.95);
 }
 
 /* Level-colored quote icon */
@@ -2407,3 +2474,244 @@ body {
   opacity: 0.6;
   cursor: not-allowed;
 }
+
+/* Relay Status Indicator */
+.relay-status-indicator {
+  position: fixed;
+  bottom: 1.5rem;
+  left: 1.5rem;
+  z-index: 999;
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.75rem 1rem;
+  background: rgba(245, 158, 11, 0.95);
+  border: 1px solid rgba(245, 158, 11, 0.4);
+  border-radius: 8px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+  backdrop-filter: blur(10px);
+  transition: all 0.3s ease;
+  cursor: default;
+}
+
+.relay-status-indicator:hover {
+  background: rgba(245, 158, 11, 1);
+  transform: translateY(-2px);
+  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
+}
+
+.relay-status-icon {
+  font-size: 1.25rem;
+  color: #1a1a1a;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.relay-status-text {
+  display: flex;
+  flex-direction: column;
+  gap: 0.15rem;
+}
+
+.relay-status-title {
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: #1a1a1a;
+  line-height: 1.2;
+}
+
+.relay-status-subtitle {
+  font-size: 0.75rem;
+  color: rgba(26, 26, 26, 0.8);
+  line-height: 1.2;
+}
+
+.relay-status-pulse {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-left: 0.25rem;
+}
+
+.pulse-icon {
+  font-size: 0.875rem;
+  color: rgba(26, 26, 26, 0.6);
+  animation: pulse 2s ease-in-out infinite;
+}
+
+@keyframes pulse {
+  0%, 100% {
+    opacity: 0.4;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 1;
+    transform: scale(1.1);
+  }
+}
+
+/* Adjust for collapsed sidebar */
+.three-pane.sidebar-collapsed .relay-status-indicator {
+  left: calc(var(--sidebar-collapsed-width) + 1.5rem);
+}
+
+/* Explore Page Styles */
+.explore-container {
+  padding: 2rem;
+  max-width: 1400px;
+  margin: 0 auto;
+  min-height: 100vh;
+}
+
+.explore-header {
+  text-align: center;
+  margin-bottom: 3rem;
+}
+
+.explore-header h1 {
+  font-size: 2.5rem;
+  margin: 0 0 1rem 0;
+  color: #646cff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 1rem;
+}
+
+.explore-subtitle {
+  font-size: 1.125rem;
+  color: rgba(255, 255, 255, 0.7);
+  margin: 0;
+}
+
+.explore-loading,
+.explore-error {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 1rem;
+  min-height: 50vh;
+  color: rgba(255, 255, 255, 0.7);
+}
+
+.explore-error {
+  color: #ff6b6b;
+}
+
+.explore-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+  gap: 2rem;
+  margin-top: 2rem;
+}
+
+.blog-post-card {
+  background: #1a1a1a;
+  border: 1px solid #333;
+  border-radius: 12px;
+  overflow: hidden;
+  transition: all 0.3s ease;
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.blog-post-card:hover {
+  border-color: #646cff;
+  transform: translateY(-4px);
+  box-shadow: 0 8px 24px rgba(100, 108, 255, 0.15);
+}
+
+.blog-post-card-image {
+  width: 100%;
+  height: 200px;
+  overflow: hidden;
+  background: #0f0f0f;
+}
+
+.blog-post-card-image img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transition: transform 0.3s ease;
+}
+
+.blog-post-card:hover .blog-post-card-image img {
+  transform: scale(1.05);
+}
+
+.blog-post-card-content {
+  padding: 1.5rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  flex: 1;
+}
+
+.blog-post-card-title {
+  font-size: 1.25rem;
+  font-weight: 600;
+  margin: 0;
+  color: rgba(255, 255, 255, 0.95);
+  line-height: 1.4;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+
+.blog-post-card-summary {
+  font-size: 0.875rem;
+  color: rgba(255, 255, 255, 0.6);
+  margin: 0;
+  line-height: 1.6;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  flex: 1;
+}
+
+.blog-post-card-meta {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  padding-top: 0.75rem;
+  border-top: 1px solid #333;
+  font-size: 0.75rem;
+  color: rgba(255, 255, 255, 0.5);
+  flex-wrap: wrap;
+}
+
+.blog-post-card-author,
+.blog-post-card-date {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.blog-post-card-author svg,
+.blog-post-card-date svg {
+  opacity: 0.7;
+}
+
+@media (max-width: 768px) {
+  .explore-container {
+    padding: 1rem;
+  }
+
+  .explore-header h1 {
+    font-size: 2rem;
+  }
+
+  .explore-grid {
+    grid-template-columns: 1fr;
+    gap: 1.5rem;
+  }
+}

src/main.tsx

@@ -3,6 +3,32 @@ import ReactDOM from 'react-dom/client'
 import App from './App.tsx'
 import './index.css'
 
+// Register Service Worker for offline image caching
+if ('serviceWorker' in navigator) {
+  window.addEventListener('load', () => {
+    navigator.serviceWorker
+      .register('/sw.js')
+      .then(registration => {
+        console.log('✅ Service Worker registered:', registration.scope)
+        
+        // Update service worker when a new version is available
+        registration.addEventListener('updatefound', () => {
+          const newWorker = registration.installing
+          if (newWorker) {
+            newWorker.addEventListener('statechange', () => {
+              if (newWorker.state === 'activated') {
+                console.log('🔄 Service Worker updated, page may need reload')
+              }
+            })
+          }
+        })
+      })
+      .catch(error => {
+        console.error('❌ Service Worker registration failed:', error)
+      })
+  })
+}
+
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
     <App />

src/services/articleService.ts

@@ -5,6 +5,8 @@ import { AddressPointer } from 'nostr-tools/nip19'
 import { NostrEvent } from 'nostr-tools'
 import { Helpers } from 'applesauce-core'
 import { RELAYS } from '../config/relays'
+import { UserSettings } from './settingsService'
+import { rebroadcastEvents } from './rebroadcastService'
 
 const { getArticleTitle, getArticleImage, getArticlePublished, getArticleSummary } = Helpers
 
@@ -71,11 +73,13 @@ function saveToCache(naddr: string, content: ArticleContent): void {
  * @param relayPool - The relay pool to query
  * @param naddr - The article's naddr
  * @param bypassCache - If true, skip cache and fetch fresh from relays
+ * @param settings - User settings for rebroadcast options
  */
 export async function fetchArticleByNaddr(
   relayPool: RelayPool,
   naddr: string,
-  bypassCache = false
+  bypassCache = false,
+  settings?: UserSettings
 ): Promise<ArticleContent> {
   try {
     // Check cache first unless bypassed
@@ -120,6 +124,9 @@ export async function fetchArticleByNaddr(
     events.sort((a, b) => b.created_at - a.created_at)
     const article = events[0]
 
+    // Rebroadcast article to local/all relays based on settings
+    await rebroadcastEvents([article], relayPool, settings)
+
     const title = getArticleTitle(article) || 'Untitled Article'
     const image = getArticleImage(article)
     const published = getArticlePublished(article)
@@ -138,6 +145,8 @@ export async function fetchArticleByNaddr(
     // Save to cache before returning
     saveToCache(naddr, content)
     
+    // Image caching is handled automatically by Service Worker
+    
     return content
   } catch (err) {
     console.error('Failed to fetch article:', err)

src/services/bookmarkService.ts

@@ -14,13 +14,16 @@ import {
 } from './bookmarkHelpers'
 import { Bookmark } from '../types/bookmarks'
 import { collectBookmarksFromEvents } from './bookmarkProcessing.ts'
+import { UserSettings } from './settingsService'
+import { rebroadcastEvents } from './rebroadcastService'
 
 
 
 export const fetchBookmarks = async (
   relayPool: RelayPool,
   activeAccount: unknown, // Full account object with extension capabilities
-  setBookmarks: (bookmarks: Bookmark[]) => void
+  setBookmarks: (bookmarks: Bookmark[]) => void,
+  settings?: UserSettings
 ) => {
   try {
     
@@ -37,6 +40,9 @@ export const fetchBookmarks = async (
         .pipe(completeOnEose(), takeUntil(timer(20000)), toArray())
     )
     console.log('📊 Raw events fetched:', rawEvents.length, 'events')
+    
+    // Rebroadcast bookmark events to local/all relays based on settings
+    await rebroadcastEvents(rawEvents, relayPool, settings)
 
     // Check for events with potentially encrypted content
     const eventsWithContent = rawEvents.filter(evt => evt.content && evt.content.length > 0)

src/services/exploreService.ts

@@ -0,0 +1,87 @@
+import { RelayPool, completeOnEose } from 'applesauce-relay'
+import { lastValueFrom, takeUntil, timer, toArray } from 'rxjs'
+import { NostrEvent } from 'nostr-tools'
+import { Helpers } from 'applesauce-core'
+
+const { getArticleTitle, getArticleImage, getArticlePublished, getArticleSummary } = Helpers
+
+export interface BlogPostPreview {
+  event: NostrEvent
+  title: string
+  summary?: string
+  image?: string
+  published?: number
+  author: string
+}
+
+/**
+ * Fetches blog posts (kind:30023) from a list of pubkeys (friends)
+ * @param relayPool - The relay pool to query
+ * @param pubkeys - Array of pubkeys to fetch posts from
+ * @param relayUrls - Array of relay URLs to query
+ * @returns Array of blog post previews
+ */
+export const fetchBlogPostsFromAuthors = async (
+  relayPool: RelayPool,
+  pubkeys: string[],
+  relayUrls: string[]
+): Promise<BlogPostPreview[]> => {
+  try {
+    if (pubkeys.length === 0) {
+      console.log('⚠️ No pubkeys to fetch blog posts from')
+      return []
+    }
+
+    console.log('📚 Fetching blog posts (kind 30023) from', pubkeys.length, 'authors')
+    
+    const events = await lastValueFrom(
+      relayPool
+        .req(relayUrls, { 
+          kinds: [30023], 
+          authors: pubkeys,
+          limit: 100 // Fetch up to 100 recent posts
+        })
+        .pipe(completeOnEose(), takeUntil(timer(15000)), toArray())
+    )
+    
+    console.log('📊 Blog post events fetched:', events.length)
+    
+    // Deduplicate replaceable events by keeping the most recent version
+    // Group by author + d-tag identifier
+    const uniqueEvents = new Map<string, NostrEvent>()
+    
+    for (const event of events) {
+      const dTag = event.tags.find(t => t[0] === 'd')?.[1] || ''
+      const key = `${event.pubkey}:${dTag}`
+      
+      const existing = uniqueEvents.get(key)
+      if (!existing || event.created_at > existing.created_at) {
+        uniqueEvents.set(key, event)
+      }
+    }
+    
+    // Convert to blog post previews and sort by published date (most recent first)
+    const blogPosts: BlogPostPreview[] = Array.from(uniqueEvents.values())
+      .map(event => ({
+        event,
+        title: getArticleTitle(event) || 'Untitled',
+        summary: getArticleSummary(event),
+        image: getArticleImage(event),
+        published: getArticlePublished(event),
+        author: event.pubkey
+      }))
+      .sort((a, b) => {
+        const timeA = a.published || a.event.created_at
+        const timeB = b.published || b.event.created_at
+        return timeB - timeA // Most recent first
+      })
+    
+    console.log('📰 Processed', blogPosts.length, 'unique blog posts')
+    
+    return blogPosts
+  } catch (error) {
+    console.error('Failed to fetch blog posts:', error)
+    return []
+  }
+}
+

src/services/highlightCreationService.ts

@@ -3,10 +3,12 @@ import { RelayPool } from 'applesauce-relay'
 import { IAccount } from 'applesauce-accounts'
 import { AddressPointer } from 'nostr-tools/nip19'
 import { NostrEvent } from 'nostr-tools'
-import { Helpers } from 'applesauce-core'
+import { Helpers, IEventStore } from 'applesauce-core'
 import { RELAYS } from '../config/relays'
 import { Highlight } from '../types/highlights'
 import { UserSettings } from './settingsService'
+import { areAllRelaysLocal } from '../utils/helpers'
+import { markEventAsOfflineCreated } from './offlineSyncService'
 
 // Boris pubkey for zap splits
 const BORIS_PUBKEY = '6e468422dfb74a5738702a8823b9b28168fc6cfb119d613e49ca0ec5a0bbd0c3'
@@ -26,17 +28,18 @@ const { HighlightBlueprint } = Blueprints
 /**
  * Creates and publishes a highlight event (NIP-84)
  * Supports both nostr-native articles and external URLs
- * Returns the signed event for immediate UI updates
+ * Returns a Highlight object with relay tracking info for immediate UI updates
  */
 export async function createHighlight(
   selectedText: string,
   source: NostrEvent | string,
   account: IAccount,
   relayPool: RelayPool,
+  eventStore: IEventStore,
   contentForContext?: string,
   comment?: string,
   settings?: UserSettings
-): Promise<NostrEvent> {
+): Promise<Highlight> {
   if (!selectedText || !source) {
     throw new Error('Missing required data to create highlight')
   }
@@ -104,13 +107,60 @@ export async function createHighlight(
   // Sign the event
   const signedEvent = await factory.sign(highlightEvent)
 
-  // Publish to relays (including local relay)
-  await relayPool.publish(RELAYS, signedEvent)
+  // Publish to all configured relays - let the relay pool handle connection state
+  const targetRelays = RELAYS
   
-  console.log('✅ Highlight published to', RELAYS.length, 'relays (including local):', signedEvent)
+  // Store the event in the local EventStore FIRST for immediate UI display
+  eventStore.add(signedEvent)
+  console.log('💾 Stored highlight in EventStore:', signedEvent.id.slice(0, 8))
   
-  // Return the signed event for immediate UI updates
-  return signedEvent
+  // Check current connection status - are we online or in flight mode?
+  const connectedRelays = Array.from(relayPool.relays.values())
+    .filter(relay => relay.connected)
+    .map(relay => relay.url)
+  
+  const hasRemoteConnection = connectedRelays.some(url => 
+    !url.includes('localhost') && !url.includes('127.0.0.1')
+  )
+  
+  // Determine which relays we expect to succeed
+  const expectedSuccessRelays = hasRemoteConnection 
+    ? RELAYS 
+    : RELAYS.filter(r => r.includes('localhost') || r.includes('127.0.0.1'))
+  
+  const isLocalOnly = areAllRelaysLocal(expectedSuccessRelays)
+  
+  console.log('📍 Highlight relay status:', {
+    targetRelays: targetRelays.length,
+    expectedSuccessRelays,
+    isLocalOnly,
+    hasRemoteConnection,
+    eventId: signedEvent.id
+  })
+  
+  // If we're in local-only mode, mark this event for later sync
+  if (isLocalOnly) {
+    markEventAsOfflineCreated(signedEvent.id)
+  }
+  
+  // Convert to Highlight with relay tracking info and return IMMEDIATELY
+  const highlight = eventToHighlight(signedEvent)
+  highlight.publishedRelays = expectedSuccessRelays // Show only relays we expect to succeed
+  highlight.isLocalOnly = isLocalOnly
+  highlight.isOfflineCreated = isLocalOnly // Mark as created offline if local-only
+  
+  // Publish to relays in the background (non-blocking)
+  // This allows instant UI updates while publishing happens asynchronously
+  relayPool.publish(targetRelays, signedEvent)
+    .then(() => {
+      console.log('✅ Highlight published to', targetRelays.length, 'relay(s):', targetRelays)
+    })
+    .catch((error) => {
+      console.warn('⚠️ Failed to publish highlight to relays (event still saved locally):', error)
+    })
+  
+  // Return the highlight immediately for instant UI updates
+  return highlight
 }
 
 /**

src/services/highlightService.ts

@@ -4,18 +4,23 @@ import { NostrEvent } from 'nostr-tools'
 import { Highlight } from '../types/highlights'
 import { RELAYS } from '../config/relays'
 import { eventToHighlight, dedupeHighlights, sortHighlights } from './highlightEventProcessor'
+import { UserSettings } from './settingsService'
+import { rebroadcastEvents } from './rebroadcastService'
 
 /**
  * Fetches highlights for a specific article by its address coordinate and/or event ID
  * @param relayPool - The relay pool to query
  * @param articleCoordinate - The article's address in format "kind:pubkey:identifier" (e.g., "30023:abc...def:my-article")
  * @param eventId - Optional event ID to also query by 'e' tag
+ * @param onHighlight - Optional callback to receive highlights as they arrive
+ * @param settings - User settings for rebroadcast options
  */
 export const fetchHighlightsForArticle = async (
   relayPool: RelayPool,
   articleCoordinate: string,
   eventId?: string,
-  onHighlight?: (highlight: Highlight) => void
+  onHighlight?: (highlight: Highlight) => void,
+  settings?: UserSettings
 ): Promise<Highlight[]> => {
   try {
     console.log('🔍 Fetching highlights (kind 9802) for article:', articleCoordinate)
@@ -75,6 +80,9 @@ export const fetchHighlightsForArticle = async (
     const rawEvents = [...aTagEvents, ...eTagEvents]
     console.log('📊 Total raw highlight events fetched:', rawEvents.length)
     
+    // Rebroadcast highlight events to local/all relays based on settings
+    await rebroadcastEvents(rawEvents, relayPool, settings)
+    
     if (rawEvents.length > 0) {
       console.log('📄 Sample highlight tags:', JSON.stringify(rawEvents[0].tags, null, 2))
     } else {
@@ -99,10 +107,12 @@ export const fetchHighlightsForArticle = async (
  * Fetches highlights for a specific URL
  * @param relayPool - The relay pool to query
  * @param url - The external URL to find highlights for
+ * @param settings - User settings for rebroadcast options
  */
 export const fetchHighlightsForUrl = async (
   relayPool: RelayPool,
-  url: string
+  url: string,
+  settings?: UserSettings
 ): Promise<Highlight[]> => {
   try {
     console.log('🔍 Fetching highlights (kind 9802) for URL:', url)
@@ -124,6 +134,9 @@ export const fetchHighlightsForUrl = async (
     
     console.log('📊 Highlights for URL:', rawEvents.length)
     
+    // Rebroadcast highlight events to local/all relays based on settings
+    await rebroadcastEvents(rawEvents, relayPool, settings)
+    
     const uniqueEvents = dedupeHighlights(rawEvents)
     const highlights: Highlight[] = uniqueEvents.map(eventToHighlight)
     return sortHighlights(highlights)
@@ -138,11 +151,13 @@ export const fetchHighlightsForUrl = async (
  * @param relayPool - The relay pool to query
  * @param pubkey - The user's public key
  * @param onHighlight - Optional callback to receive highlights as they arrive
+ * @param settings - User settings for rebroadcast options
  */
 export const fetchHighlights = async (
   relayPool: RelayPool,
   pubkey: string,
-  onHighlight?: (highlight: Highlight) => void
+  onHighlight?: (highlight: Highlight) => void,
+  settings?: UserSettings
 ): Promise<Highlight[]> => {
   try {
     const relayUrls = Array.from(relayPool.relays.values()).map(relay => relay.url)
@@ -172,6 +187,9 @@ export const fetchHighlights = async (
     
     console.log('📊 Raw highlight events fetched:', rawEvents.length)
     
+    // Rebroadcast highlight events to local/all relays based on settings
+    await rebroadcastEvents(rawEvents, relayPool, settings)
+    
     // Deduplicate and process events
     const uniqueEvents = dedupeHighlights(rawEvents)
     console.log('📊 Unique highlight events after deduplication:', uniqueEvents.length)

src/services/imageCacheService.ts

@@ -0,0 +1,74 @@
+/**
+ * Image Cache Service
+ * 
+ * Utility functions for managing the Service Worker's image cache
+ * Service Worker automatically caches images on fetch
+ */
+
+const CACHE_NAME = 'boris-image-cache-v1'
+
+/**
+ * Clear all cached images
+ */
+export async function clearImageCache(): Promise<void> {
+  try {
+    await caches.delete(CACHE_NAME)
+    console.log('🗑️ Cleared all cached images')
+  } catch (err) {
+    console.error('Failed to clear image cache:', err)
+  }
+}
+
+/**
+ * Get cache statistics by inspecting Cache API directly
+ */
+export async function getImageCacheStatsAsync(): Promise<{
+  totalSizeMB: number
+  itemCount: number
+  items: Array<{ url: string, sizeMB: number }>
+}> {
+  try {
+    const cache = await caches.open(CACHE_NAME)
+    const requests = await cache.keys()
+    
+    let totalSize = 0
+    const items: Array<{ url: string, sizeMB: number }> = []
+    
+    for (const request of requests) {
+      const response = await cache.match(request)
+      if (response) {
+        const blob = await response.blob()
+        const sizeMB = blob.size / (1024 * 1024)
+        totalSize += blob.size
+        items.push({ url: request.url, sizeMB })
+      }
+    }
+    
+    return {
+      totalSizeMB: totalSize / (1024 * 1024),
+      itemCount: requests.length,
+      items
+    }
+  } catch (err) {
+    console.error('Failed to get cache stats:', err)
+    return { totalSizeMB: 0, itemCount: 0, items: [] }
+  }
+}
+
+/**
+ * Synchronous wrapper for cache stats (returns approximate values)
+ * For real-time stats, use getImageCacheStatsAsync
+ */
+export function getImageCacheStats(): {
+  totalSizeMB: number
+  itemCount: number
+  items: Array<{ url: string, sizeMB: number, lastAccessed: Date }>
+} {
+  // Return placeholder - actual stats require async Cache API access
+  // Component should use getImageCacheStatsAsync for real values
+  return {
+    totalSizeMB: 0,
+    itemCount: 0,
+    items: []
+  }
+}

src/services/offlineSyncService.ts

@@ -0,0 +1,158 @@
+import { RelayPool } from 'applesauce-relay'
+import { NostrEvent } from 'nostr-tools'
+import { IEventStore } from 'applesauce-core'
+import { RELAYS } from '../config/relays'
+import { isLocalRelay } from '../utils/helpers'
+
+let isSyncing = false
+
+// Track events created during offline period
+const offlineCreatedEvents = new Set<string>()
+
+// Track events currently being synced
+const syncingEvents = new Set<string>()
+
+// Callbacks to notify when sync state changes
+const syncStateListeners: Array<(eventId: string, isSyncing: boolean) => void> = []
+
+/**
+ * Marks an event as created during offline period
+ */
+export function markEventAsOfflineCreated(eventId: string): void {
+  offlineCreatedEvents.add(eventId)
+  console.log(`📝 Marked event ${eventId.slice(0, 8)} as offline-created. Total: ${offlineCreatedEvents.size}`)
+}
+
+/**
+ * Check if an event is currently being synced
+ */
+export function isEventSyncing(eventId: string): boolean {
+  return syncingEvents.has(eventId)
+}
+
+/**
+ * Subscribe to sync state changes
+ */
+export function onSyncStateChange(callback: (eventId: string, isSyncing: boolean) => void): () => void {
+  syncStateListeners.push(callback)
+  return () => {
+    const index = syncStateListeners.indexOf(callback)
+    if (index > -1) syncStateListeners.splice(index, 1)
+  }
+}
+
+/**
+ * Notify listeners of sync state change
+ */
+function notifySyncStateChange(eventId: string, isSyncing: boolean): void {
+  syncStateListeners.forEach(listener => listener(eventId, isSyncing))
+}
+
+/**
+ * Syncs local-only events to remote relays when coming back online
+ * Now uses applesauce EventStore instead of querying relays
+ */
+export async function syncLocalEventsToRemote(
+  relayPool: RelayPool,
+  eventStore: IEventStore
+): Promise<void> {
+  if (isSyncing) {
+    console.log('⏳ Sync already in progress, skipping...')
+    return
+  }
+
+  console.log('🔄 Coming back online - syncing local events to remote relays...')
+  console.log(`📦 Offline events tracked: ${offlineCreatedEvents.size}`)
+  isSyncing = true
+
+  try {
+    const remoteRelays = RELAYS.filter(url => !isLocalRelay(url))
+
+    console.log(`📡 Remote relays: ${remoteRelays.length}`)
+    
+    if (remoteRelays.length === 0) {
+      console.log('⚠️ No remote relays available for sync')
+      isSyncing = false
+      return
+    }
+
+    if (offlineCreatedEvents.size === 0) {
+      console.log('✅ No offline events to sync')
+      isSyncing = false
+      return
+    }
+
+    // Get events from EventStore using the tracked IDs
+    const eventsToSync: NostrEvent[] = []
+    console.log(`🔍 Querying EventStore for ${offlineCreatedEvents.size} offline events...`)
+
+    for (const eventId of offlineCreatedEvents) {
+      const event = eventStore.getEvent(eventId)
+      if (event) {
+        console.log(`📥 Found event ${eventId.slice(0, 8)} (kind ${event.kind}) in EventStore`)
+        eventsToSync.push(event)
+      } else {
+        console.warn(`⚠️ Event ${eventId.slice(0, 8)} not found in EventStore`)
+      }
+    }
+
+    console.log(`📊 Total events to sync: ${eventsToSync.length}`)
+
+    if (eventsToSync.length === 0) {
+      console.log('✅ No events found in EventStore to sync')
+      isSyncing = false
+      offlineCreatedEvents.clear()
+      return
+    }
+
+    // Deduplicate events by id
+    const uniqueEvents = Array.from(
+      new Map(eventsToSync.map(e => [e.id, e])).values()
+    )
+
+    console.log(`📤 Syncing ${uniqueEvents.length} event(s) to remote relays...`)
+
+    // Mark all events as syncing
+    uniqueEvents.forEach(event => {
+      syncingEvents.add(event.id)
+      notifySyncStateChange(event.id, true)
+    })
+
+    // Publish to remote relays
+    let successCount = 0
+    const successfulIds: string[] = []
+    
+    for (const event of uniqueEvents) {
+      try {
+        await relayPool.publish(remoteRelays, event)
+        successCount++
+        successfulIds.push(event.id)
+        console.log(`✅ Synced event ${event.id.slice(0, 8)}`)
+      } catch (error) {
+        console.warn(`⚠️ Failed to sync event ${event.id.slice(0, 8)}:`, error)
+      }
+    }
+
+    console.log(`✅ Synced ${successCount}/${uniqueEvents.length} events to remote relays`)
+    
+    // Clear syncing state and offline tracking for successful events
+    successfulIds.forEach(eventId => {
+      syncingEvents.delete(eventId)
+      offlineCreatedEvents.delete(eventId)
+      notifySyncStateChange(eventId, false)
+    })
+    
+    // Clear syncing state for failed events
+    uniqueEvents.forEach(event => {
+      if (!successfulIds.includes(event.id)) {
+        syncingEvents.delete(event.id)
+        notifySyncStateChange(event.id, false)
+      }
+    })
+  } catch (error) {
+    console.error('❌ Error during offline sync:', error)
+  } finally {
+    isSyncing = false
+  }
+}
+

src/services/rebroadcastService.ts

@@ -0,0 +1,78 @@
+import { RelayPool } from 'applesauce-relay'
+import { NostrEvent } from 'nostr-tools'
+import { UserSettings } from './settingsService'
+import { RELAYS } from '../config/relays'
+import { isLocalRelay } from '../utils/helpers'
+
+/**
+ * Rebroadcasts events to relays based on user settings
+ * @param events Events to rebroadcast
+ * @param relayPool The relay pool to use for publishing
+ * @param settings User settings to determine which relays to broadcast to
+ */
+export async function rebroadcastEvents(
+  events: NostrEvent[],
+  relayPool: RelayPool,
+  settings?: UserSettings
+): Promise<void> {
+  if (!events || events.length === 0) {
+    return
+  }
+
+  // Check if any rebroadcast is enabled
+  const useLocalCache = settings?.useLocalRelayAsCache ?? true
+  const broadcastToAll = settings?.rebroadcastToAllRelays ?? false
+
+  if (!useLocalCache && !broadcastToAll) {
+    return // No rebroadcast enabled
+  }
+
+  // Check current relay connectivity - don't rebroadcast in flight mode
+  const connectedRelays = Array.from(relayPool.relays.values())
+  const connectedRemoteRelays = connectedRelays.filter(relay => relay.connected && !isLocalRelay(relay.url))
+  const hasRemoteConnection = connectedRemoteRelays.length > 0
+  
+  // If we're in flight mode (only local relays connected) and user wants to broadcast to all relays, skip
+  if (broadcastToAll && !hasRemoteConnection) {
+    console.log('✈️ Flight mode: skipping rebroadcast to remote relays')
+    return
+  }
+
+  // Determine target relays based on settings
+  let targetRelays: string[] = []
+  
+  if (broadcastToAll) {
+    // Broadcast to all relays (only if we have remote connection)
+    targetRelays = RELAYS
+  } else if (useLocalCache) {
+    // Only broadcast to local relays
+    targetRelays = RELAYS.filter(isLocalRelay)
+  }
+
+  if (targetRelays.length === 0) {
+    console.log('📡 No target relays for rebroadcast')
+    return
+  }
+
+  // Rebroadcast each event
+  const rebroadcastPromises = events.map(async (event) => {
+    try {
+      await relayPool.publish(targetRelays, event)
+      console.log('📡 Rebroadcast event', event.id?.slice(0, 8), 'to', targetRelays.length, 'relay(s)')
+    } catch (error) {
+      console.warn('⚠️ Failed to rebroadcast event', event.id?.slice(0, 8), error)
+    }
+  })
+
+  // Execute all rebroadcasts (don't block on completion)
+  Promise.all(rebroadcastPromises).catch((err) => {
+    console.warn('⚠️ Some rebroadcasts failed:', err)
+  })
+
+  console.log(`📡 Rebroadcasting ${events.length} event(s) to ${targetRelays.length} relay(s)`, {
+    broadcastToAll,
+    useLocalCache,
+    targetRelays
+  })
+}
+

src/services/relayStatusService.ts

@@ -6,7 +6,8 @@ export interface RelayStatus {
   lastSeen: number // timestamp
 }
 
-const RECENT_CONNECTION_WINDOW = 20 * 60 * 1000 // 20 minutes
+// How long to show disconnected relays as "recently seen" before hiding them
+const RECENT_CONNECTION_WINDOW = 10 * 1000 // 10 seconds
 
 // In-memory tracking of relay last seen times
 const relayLastSeen = new Map<string, number>()
@@ -17,29 +18,48 @@ const relayLastSeen = new Map<string, number>()
 export function updateAndGetRelayStatuses(relayPool: RelayPool): RelayStatus[] {
   const statuses: RelayStatus[] = []
   const now = Date.now()
-  const currentRelayUrls = new Set<string>()
+  const currentlyConnectedUrls = new Set<string>()
   
-  // Update relays currently in the pool
+  // Check all relays in the pool for their actual connection status
   for (const relay of relayPool.relays.values()) {
-    currentRelayUrls.add(relay.url)
-    relayLastSeen.set(relay.url, now)
+    const isConnected = relay.connected
+    
+    if (isConnected) {
+      currentlyConnectedUrls.add(relay.url)
+      relayLastSeen.set(relay.url, now)
+    }
     
     statuses.push({
       url: relay.url,
-      isInPool: true,
-      lastSeen: now
+      isInPool: isConnected,
+      lastSeen: isConnected ? now : (relayLastSeen.get(relay.url) || now)
     })
   }
   
-  // Add recently seen relays that are no longer in the pool
+  // Debug logging
+  const connectedCount = statuses.filter(s => s.isInPool).length
+  const disconnectedCount = statuses.filter(s => !s.isInPool).length
+  if (connectedCount === 0 || disconnectedCount > 0) {
+    console.log(`🔌 Relay status: ${connectedCount} connected, ${disconnectedCount} disconnected`)
+    const connected = statuses.filter(s => s.isInPool).map(s => s.url.replace(/^wss?:\/\//, ''))
+    const disconnected = statuses.filter(s => !s.isInPool).map(s => s.url.replace(/^wss?:\/\//, ''))
+    if (connected.length > 0) console.log('✅ Connected:', connected.join(', '))
+    if (disconnected.length > 0) console.log('❌ Disconnected:', disconnected.join(', '))
+  }
+  
+  // Add recently seen relays that are no longer connected
   const cutoffTime = now - RECENT_CONNECTION_WINDOW
   for (const [url, lastSeen] of relayLastSeen.entries()) {
-    if (!currentRelayUrls.has(url) && lastSeen >= cutoffTime) {
-      statuses.push({
-        url,
-        isInPool: false,
-        lastSeen
-      })
+    if (!currentlyConnectedUrls.has(url) && lastSeen >= cutoffTime) {
+      // Check if this relay is already in statuses (might be in pool but not connected)
+      const existingStatus = statuses.find(s => s.url === url)
+      if (!existingStatus) {
+        statuses.push({
+          url,
+          isInPool: false,
+          lastSeen
+        })
+      }
     }
   }
   

src/services/settingsService.ts

@@ -39,6 +39,12 @@ export interface UserSettings {
   zapSplitHighlighterWeight?: number // default 50
   zapSplitBorisWeight?: number // default 2.1
   zapSplitAuthorWeight?: number // default 50
+  // 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(

src/types/highlights.ts

@@ -15,5 +15,11 @@ export interface Highlight {
   comment?: string // optional comment about the highlight
   // Level classification (computed based on user's context)
   level?: HighlightLevel
+  // Relay tracking for offline/local-only highlights
+  publishedRelays?: string[] // URLs of relays where this was published (for user-created highlights)
+  seenOnRelays?: string[] // URLs of relays where this event was fetched from
+  isLocalOnly?: boolean // true if only published to local relays
+  isOfflineCreated?: boolean // true if created while in flight mode (offline)
+  isSyncing?: boolean // true if currently being synced to remote relays
 }
 

src/utils/helpers.ts

@@ -40,3 +40,26 @@ export const classifyUrl = (url: string | undefined): UrlClassification => {
   return { type: 'article', buttonText: 'READ NOW' }
 }
 
+/**
+ * Checks if a relay URL is a local relay (localhost or 127.0.0.1)
+ */
+export const isLocalRelay = (relayUrl: string): boolean => {
+  return relayUrl.includes('localhost') || relayUrl.includes('127.0.0.1')
+}
+
+/**
+ * Checks if all relays in the list are local relays
+ */
+export const areAllRelaysLocal = (relayUrls: string[]): boolean => {
+  if (!relayUrls || relayUrls.length === 0) return false
+  return relayUrls.every(isLocalRelay)
+}
+
+/**
+ * Checks if at least one relay is a remote (non-local) relay
+ */
+export const hasRemoteRelay = (relayUrls: string[]): boolean => {
+  if (!relayUrls || relayUrls.length === 0) return false
+  return relayUrls.some(url => !isLocalRelay(url))
+}
+