fix: replace any type with proper bookmark interface for linter compliance

Without this configuration, page refreshes result in 404 errors because
Vercel tries to serve non-existent files instead of routing through
index.html for client-side routing.

.gitignore

@@ -7,3 +7,7 @@ dist
 # Misc
 *.log
 .DS_Store
+
+# Applesauce Reference
+applesauce
+

CHANGELOG.md

@@ -5,6 +5,211 @@ 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).
 
+## [Unreleased]
+
+### Added
+- Mobile-responsive design with overlay sidebar drawer
+- Media query hooks for responsive behavior (`useIsMobile`, `useIsTablet`, `useIsCoarsePointer`)
+- Auto-collapse sidebar setting for mobile devices
+- Touch-optimized UI with 44x44px minimum touch targets
+- Safe area inset support for notched devices
+- Mobile hamburger menu and backdrop
+- Focus trap in mobile sidebar with ESC key support
+- Body scroll locking when mobile sidebar is open
+- Mobile-optimized modals (full-screen sheet style)
+- Mobile-optimized toast notifications (bottom position)
+- Dynamic viewport height support (100dvh)
+
+### Changed
+- Sidebar now displays as overlay drawer on mobile (≤768px)
+- Highlights panel hidden on mobile for better content focus
+- Sidebar auto-closes when selecting content on mobile
+- Hover effects disabled on touch devices
+
+## [0.3.8] - 2025-10-10
+
+### Fixed
+- Add vercel.json configuration to properly handle SPA routing on Vercel deployments (fixes 404 errors on page refresh)
+
+## [0.3.7] - 2025-10-10
+
+### Fixed
+- Logout button functionality - now properly clears active account using clearActive() method
+
+## [0.3.6] - 2025-10-10
+
+### Added
+- Compact date format for highlights (now, 5m, 3h, 2d, 1mo, 1y)
+- Ultra-compact date format for bookmarks sidebar
+- Encode event links as nevent/naddr per NIP-19 for better client compatibility
+- Render /explore within ThreePaneLayout to keep side panels visible
+
+### Fixed
+- Remove incorrect padding-right from highlights container
+- Reduce font size of highlight metadata for cleaner look
+- Position highlight FAB button relative to article pane instead of viewport
+- Adjust relay indicator position for better visual alignment
+- Ensure highlight metadata elements align on single visual line with consistent line-height
+- Prevent bookmark icons from being cut off in compact view
+- Clean up nested borders in bookmark items and sidebar view mode controls
+- Align highlight metadata elements on single line in sidebar
+- Change explore header icon from compass to newspaper
+
+### Changed
+- Make connecting notification more subtle with muted blue background
+- Update Boris pubkey for zap splits to npub19802see0gnk3vjlus0dnmfdagusqrtmsxpl5yfmkwn9uvnfnqylqduhr0x
+- Update domain references to read.withboris.com (URLs, SEO metadata, and documentation)
+
+## [0.3.5] - 2025-10-09
+
+### Fixed
+- Ensure connecting state shows for minimum 15 seconds to prevent premature offline display
+- Add Cloudflare Pages routing config for SPA paths
+
+### Changed
+- Extend connecting state duration and remove subtitle text for cleaner UI
+
+## [0.3.4] - 2025-10-09
+
+### Fixed
+- Add p tag (author tag) to highlights of nostr-native content for proper attribution
+
+## [0.3.3] - 2025-10-09
+
+### Added
+- Service Worker for robust offline image caching
+- /explore route to discover blog posts from friends on Nostr
+- Explore button (newspaper icon) in bookmarks header
+- "Connecting" status indicator on page load (instead of immediately showing "Offline")
+- Last fetch time display with relative timestamps in bookmarks list
+
+### Changed
+- Simplify image caching to use Service Worker transparently
+- Move refresh button from top bar to end of bookmarks list
+- Make explore page article cards proper links (supports CMD+click to open in new tab)
+- Reorganize bookmarks UI for better UX
+
+### Fixed
+- Improve image cache resilience for offline viewing and hard reloads
+- Correct TypeScript types for cache stats state
+- Resolve linter errors for unused parameters
+- Import useEventModel from applesauce-react/hooks for proper type safety
+- Import Models from applesauce-core instead of applesauce-react
+- Use correct useEventModel hook for profile loading in BlogPostCard
+
+## [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 +564,17 @@ 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.6]: https://github.com/dergigi/boris/compare/v0.3.5...v0.3.6
+[0.3.5]: https://github.com/dergigi/boris/compare/v0.3.4...v0.3.5
+[0.3.4]: https://github.com/dergigi/boris/compare/v0.3.3...v0.3.4
+[0.3.3]: https://github.com/dergigi/boris/compare/v0.3.2...v0.3.3
+[0.3.2]: https://github.com/dergigi/boris/compare/v0.3.1...v0.3.2
+[0.3.1]: https://github.com/dergigi/boris/compare/v0.3.0...v0.3.1
+[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

MOBILE_IMPLEMENTATION.md

@@ -0,0 +1,156 @@
+# Mobile Implementation Summary
+
+## Overview
+Boris is now mobile-friendly! The app now works seamlessly on mobile devices with a responsive design that includes:
+- Auto-collapsing sidebar that opens as an overlay drawer on small screens
+- Touch-optimized UI with proper touch target sizes (44x44px minimum)
+- Safe area insets for notched devices (iPhone X+, etc.)
+- Focus trap and keyboard navigation in the mobile sidebar
+- Mobile-optimized modals, toasts, and other UI elements
+
+## Changes Made
+
+### 1. Viewport & Base Setup
+**File: `index.html`**
+- Updated viewport meta tag to include `viewport-fit=cover` for proper safe area handling
+
+### 2. Media Query Hooks
+**File: `src/hooks/useMediaQuery.ts` (NEW)**
+- `useMediaQuery(query)` - Generic hook for any media query
+- `useIsMobile()` - Detects mobile viewport (≤768px)
+- `useIsTablet()` - Detects tablet viewport (≤1024px)
+- `useIsCoarsePointer()` - Detects touch devices
+
+### 3. Mobile CSS Styles
+**File: `src/index.css`**
+- Added CSS custom properties for mobile breakpoints and safe areas
+- Mobile-specific three-pane layout that stacks into single column
+- Overlay sidebar with backdrop and transitions
+- Touch target improvements (44x44px minimum)
+- Disabled hover effects on touch devices
+- Mobile-optimized modals (full-screen sheet style)
+- Mobile-optimized toasts (bottom position with safe area)
+- Dynamic viewport height support (`100dvh`)
+- Overscroll behavior and body scroll locking
+
+### 4. Sidebar State Management
+**File: `src/hooks/useBookmarksUI.ts`**
+- Added `isMobile` state from media query
+- Added `isSidebarOpen` state for mobile overlay
+- Added `toggleSidebar()` function
+- Auto-collapse logic based on `autoCollapseSidebarOnMobile` setting
+- Mobile sidebar defaults to closed, desktop defaults to open
+
+### 5. Three-Pane Layout Mobile Support
+**File: `src/components/ThreePaneLayout.tsx`**
+- Mobile hamburger button (visible only on mobile)
+- Mobile backdrop for closing sidebar
+- Body scroll locking when sidebar is open
+- ESC key handler to close sidebar
+- Focus trap in sidebar (Tab navigation stays within sidebar)
+- Focus restoration when closing sidebar
+- Accessibility attributes (`aria-hidden`, `aria-expanded`, etc.)
+
+### 6. Sidebar Header Mobile Controls
+**File: `src/components/SidebarHeader.tsx`**
+- Close button (X) visible on mobile instead of collapse chevron
+- Hamburger button hidden in header (shown in layout instead)
+
+### 7. Bookmark List Mobile Props
+**File: `src/components/BookmarkList.tsx`**
+- Added `isMobile` prop support
+- Passes mobile state to SidebarHeader
+
+### 8. Main Bookmarks Component
+**File: `src/components/Bookmarks.tsx`**
+- Uses mobile state from `useBookmarksUI`
+- Auto-closes sidebar when selecting bookmark on mobile
+- Closes sidebar when opening settings on mobile
+- Proper desktop/mobile toggle behavior
+
+### 9. Icon Button Enhancement
+**File: `src/components/IconButton.tsx`**
+- Added optional `className` prop for additional styling
+
+### 10. Mobile Settings
+**File: `src/services/settingsService.ts`**
+- Added `autoCollapseSidebarOnMobile?: boolean` setting (default: true)
+
+**File: `src/components/Settings/StartupPreferencesSettings.tsx`**
+- Added UI toggle for "Auto-collapse sidebar on small screens"
+
+## Accessibility Features
+- Focus trap in mobile sidebar (Tab key navigation stays within drawer)
+- ESC key closes mobile sidebar
+- Backdrop click closes mobile sidebar
+- Proper ARIA attributes (`aria-hidden`, `aria-expanded`, `aria-controls`)
+- Touch target minimum size enforcement (44x44px)
+- Focus restoration when closing sidebar
+
+## Mobile Behaviors
+1. **Sidebar**: Slides in from left as overlay drawer with backdrop
+2. **Hamburger Menu**: Fixed position top-left when sidebar closed
+3. **Selecting Content**: Auto-closes sidebar on mobile
+4. **Opening Settings**: Auto-closes sidebar on mobile
+5. **Highlights Panel**: Hidden on mobile (content takes full width)
+6. **Modals**: Full-screen sheet style from bottom
+7. **Toasts**: Bottom position with safe area padding
+
+## Responsive Breakpoints
+- **Mobile**: ≤768px (sidebar overlay, single column)
+- **Tablet**: ≤1024px (defined but not actively used yet)
+- **Desktop**: >768px (three-pane layout as before)
+
+## Browser Support
+- Modern browsers with CSS Grid support
+- iOS Safari (including safe area insets)
+- Chrome for Android
+- Firefox Mobile
+- Safari on iPadOS
+
+## Safe Area Support
+The app respects device safe areas (notches, home indicators) through CSS environment variables:
+- `env(safe-area-inset-top)`
+- `env(safe-area-inset-bottom)`
+- `env(safe-area-inset-left)`
+- `env(safe-area-inset-right)`
+
+## Future Enhancements
+Potential improvements for future iterations:
+- Swipe gesture to open/close sidebar
+- Pull-to-refresh on mobile
+- Bottom sheet for highlights panel on mobile
+- Optimized font sizes for mobile reading
+- Mobile-specific view mode (perhaps auto-switch to compact on mobile)
+- Haptic feedback on interactions (iOS/Android)
+- Share sheet integration
+- Install prompt for PWA
+
+## Testing Checklist
+- [x] Sidebar opens/closes on mobile
+- [x] Hamburger button visible on mobile
+- [x] Backdrop closes sidebar
+- [x] ESC key closes sidebar
+- [x] Focus trap works in sidebar
+- [x] Selecting bookmark closes sidebar
+- [x] No horizontal scroll
+- [x] Touch targets ≥ 44px
+- [x] Modals are full-screen on mobile
+- [x] Toasts appear at bottom with safe area
+- [x] Build completes without errors
+- [ ] Test on actual iOS device (iPhone)
+- [ ] Test on actual Android device
+- [ ] Test with keyboard navigation
+- [ ] Test with screen reader
+- [ ] Test landscape orientation
+- [ ] Test on various screen sizes (320px, 375px, 414px, 768px)
+
+## Commit History
+1. `feat: update viewport meta for mobile support`
+2. `feat: add media query hooks for responsive design`
+3. `feat: add mobile sidebar state management to useBookmarksUI`
+4. `feat: add mobile-responsive CSS with breakpoints and safe areas`
+5. `feat: implement mobile overlay sidebar with focus trap and ESC handling`
+6. `feat: add mobile auto-collapse setting`
+7. `fix: resolve TypeScript errors for mobile implementation`
+

README.md

@@ -6,7 +6,7 @@ Boris turns your Nostr bookmarks into a calm, fast, and focused reading experien
 
 ## Live
 
-- App: [https://xn--bris-v0b.com/](https://xn--bris-v0b.com/)
+- App: [https://read.withboris.com/](https://read.withboris.com/)
 
 ## The Vision
 

index.html

@@ -3,21 +3,21 @@
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
     <title>Boris - Nostr Bookmarks</title>
     <meta name="description" content="Your reading list for the Nostr world. A minimal nostr client for bookmark management with highlights." />
-    <link rel="canonical" href="https://xn--bris-v0b.com/" />
+    <link rel="canonical" href="https://read.withboris.com/" />
     
     <!-- Open Graph / Social Media -->
     <meta property="og:type" content="website" />
-    <meta property="og:url" content="https://xn--bris-v0b.com/" />
+    <meta property="og:url" content="https://read.withboris.com/" />
     <meta property="og:title" content="Boris - Nostr Bookmarks" />
     <meta property="og:description" content="Your reading list for the Nostr world. A minimal nostr client for bookmark management with highlights." />
     <meta property="og:site_name" content="Boris" />
     
     <!-- Twitter Card -->
     <meta name="twitter:card" content="summary_large_image" />
-    <meta name="twitter:url" content="https://xn--bris-v0b.com/" />
+    <meta name="twitter:url" content="https://read.withboris.com/" />
     <meta name="twitter:title" content="Boris - Nostr Bookmarks" />
     <meta name="twitter:description" content="Your reading list for the Nostr world. A minimal nostr client for bookmark management with highlights." />
   </head>

package.json

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

public/_routes.json

@@ -0,0 +1,6 @@
+{
+  "version": 1,
+  "include": ["/*"],
+  "exclude": ["/assets/*", "/robots.txt", "/sw.js", "/_headers", "/_redirects"]
+}
+

public/robots.txt

@@ -1,5 +1,5 @@
 User-agent: *
 Allow: /
 
-Sitemap: https://xn--bris-v0b.com/sitemap.xml
+Sitemap: https://read.withboris.com/sitemap.xml
 

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

@@ -27,8 +27,7 @@ function AppRoutes({
   const accountManager = Hooks.useAccountManager()
 
   const handleLogout = () => {
-    accountManager.setActive(undefined as never)
+    accountManager.clearActive()
-    localStorage.removeItem('active')
     showToast('Logged out successfully')
   }
 
@@ -61,6 +60,15 @@ function AppRoutes({
           />
         } 
       />
+      <Route 
+        path="/explore" 
+        element={
+          <Bookmarks 
+            relayPool={relayPool}
+            onLogout={handleLogout}
+          />
+        } 
+      />
       <Route path="/" element={<Navigate to={`/a/${DEFAULT_ARTICLE}`} replace />} />
     </Routes>
   )
@@ -118,6 +126,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 +155,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,11 @@ interface BookmarkListProps {
   onOpenSettings: () => void
   onRefresh?: () => void
   isRefreshing?: boolean
+  lastFetchTime?: number | null
   loading?: boolean
   relayPool: RelayPool | null
+  settings?: UserSettings
+  isMobile?: boolean
 }
 
 export const BookmarkList: React.FC<BookmarkListProps> = ({
@@ -37,8 +42,11 @@ export const BookmarkList: React.FC<BookmarkListProps> = ({
   onOpenSettings,
   onRefresh,
   isRefreshing,
+  lastFetchTime,
   loading = false,
-  relayPool
+  relayPool,
+  settings,
+  isMobile = false
 }) => {
   // Helper to check if a bookmark has either content or a URL
   const hasContentOrUrl = (ib: IndividualBookmark) => {
@@ -99,9 +107,8 @@ export const BookmarkList: React.FC<BookmarkListProps> = ({
         onToggleCollapse={onToggleCollapse} 
         onLogout={onLogout}
         onOpenSettings={onOpenSettings}
-        onRefresh={onRefresh}
-        isRefreshing={isRefreshing}
         relayPool={relayPool}
+        isMobile={isMobile}
       />
       
       {loading ? (
@@ -123,9 +130,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/CompactView.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faBookmark, faUserLock, faGlobe } from '@fortawesome/free-solid-svg-icons'
 import { IndividualBookmark } from '../../types/bookmarks'
-import { formatDate } from '../../utils/bookmarkUtils'
+import { formatDateCompact } from '../../utils/bookmarkUtils'
 import ContentWithResolvedProfiles from '../ContentWithResolvedProfiles'
 import { IconGetter } from './shared'
 
@@ -75,7 +75,7 @@ export const CompactView: React.FC<CompactViewProps> = ({
             <ContentWithResolvedProfiles content={displayText.slice(0, 60) + (displayText.length > 60 ? '…' : '')} />
           </div>
         )}
-        <span className="bookmark-date-compact">{formatDate(bookmark.created_at)}</span>
+        <span className="bookmark-date-compact">{formatDateCompact(bookmark.created_at)}</span>
         {isClickable && (
           <button
             className="compact-read-btn"

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,7 +10,10 @@ 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 Explore from './Explore'
 import { classifyHighlights } from '../utils/highlightClassification'
 
 export type ViewMode = 'compact' | 'cards' | 'large'
@@ -31,6 +34,7 @@ const Bookmarks: React.FC<BookmarksProps> = ({ relayPool, onLogout }) => {
     : undefined
   
   const showSettings = location.pathname === '/settings'
+  const showExplore = location.pathname === '/explore'
   
   // Track previous location for going back from settings
   useEffect(() => {
@@ -50,7 +54,22 @@ 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 {
+    isMobile,
+    isSidebarOpen,
+    toggleSidebar,
     isCollapsed,
     setIsCollapsed,
     isHighlightsCollapsed,
@@ -80,6 +99,7 @@ const Bookmarks: React.FC<BookmarksProps> = ({ relayPool, onLogout }) => {
     setHighlightsLoading,
     followedPubkeys,
     isRefreshing,
+    lastFetchTime,
     handleFetchHighlights,
     handleRefreshAll
   } = useBookmarksData({
@@ -88,7 +108,8 @@ const Bookmarks: React.FC<BookmarksProps> = ({ relayPool, onLogout }) => {
     accountManager,
     naddr,
     currentArticleCoordinate,
-    currentArticleEventId
+    currentArticleEventId,
+    settings
   })
 
   const {
@@ -98,7 +119,7 @@ const Bookmarks: React.FC<BookmarksProps> = ({ relayPool, onLogout }) => {
     setReaderLoading,
     readerContent,
     setReaderContent,
-    handleSelectUrl
+    handleSelectUrl: baseHandleSelectUrl
   } = useContentSelection({
     relayPool,
     settings,
@@ -107,6 +128,14 @@ const Bookmarks: React.FC<BookmarksProps> = ({ relayPool, onLogout }) => {
     setCurrentArticle
   })
 
+  // Wrap handleSelectUrl to close mobile sidebar when selecting content
+  const handleSelectUrl = (url: string, bookmark?: { id: string; kind: number; tags: string[][]; pubkey: string }) => {
+    if (isMobile && isSidebarOpen) {
+      toggleSidebar()
+    }
+    baseHandleSelectUrl(url, bookmark)
+  }
+
   const {
     highlightButtonRef,
     handleTextSelection,
@@ -115,6 +144,7 @@ const Bookmarks: React.FC<BookmarksProps> = ({ relayPool, onLogout }) => {
   } = useHighlightCreation({
     activeAccount,
     relayPool,
+    eventStore,
     currentArticle,
     selectedUrl,
     readerContent,
@@ -134,7 +164,8 @@ const Bookmarks: React.FC<BookmarksProps> = ({ relayPool, onLogout }) => {
     setHighlightsLoading,
     setCurrentArticleCoordinate,
     setCurrentArticleEventId,
-    setCurrentArticle
+    setCurrentArticle,
+    settings
   })
   
   // Load external URL if /r/* route is used
@@ -160,21 +191,29 @@ const Bookmarks: React.FC<BookmarksProps> = ({ relayPool, onLogout }) => {
     <ThreePaneLayout
       isCollapsed={isCollapsed}
       isHighlightsCollapsed={isHighlightsCollapsed}
+      isSidebarOpen={isSidebarOpen}
       showSettings={showSettings}
+      showExplore={showExplore}
       bookmarks={bookmarks}
       bookmarksLoading={bookmarksLoading}
       viewMode={viewMode}
       isRefreshing={isRefreshing}
-      onToggleSidebar={() => setIsCollapsed(!isCollapsed)}
+      lastFetchTime={lastFetchTime}
+      onToggleSidebar={isMobile ? toggleSidebar : () => setIsCollapsed(!isCollapsed)}
       onLogout={onLogout}
       onViewModeChange={setViewMode}
       onOpenSettings={() => {
         navigate('/settings')
-        setIsCollapsed(true)
+        if (isMobile) {
+          toggleSidebar()
+        } else {
+          setIsCollapsed(true)
+        }
         setIsHighlightsCollapsed(true)
       }}
       onRefresh={handleRefreshAll}
       relayPool={relayPool}
+      eventStore={eventStore}
       readerLoading={readerLoading}
       readerContent={readerContent}
       selectedUrl={selectedUrl}
@@ -207,6 +246,9 @@ const Bookmarks: React.FC<BookmarksProps> = ({ relayPool, onLogout }) => {
       highlightButtonRef={highlightButtonRef}
       onCreateHighlight={handleCreateHighlight}
       hasActiveAccount={!!(activeAccount && relayPool)}
+      explore={showExplore ? (
+        relayPool ? <Explore relayPool={relayPool} /> : null
+      ) : undefined}
       toastMessage={toastMessage ?? undefined}
       toastType={toastType}
       onClearToast={clearToast}

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, faNewspaper } 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={faNewspaper} />
+          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,15 @@
-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'
+import { nip19 } from 'nostr-tools'
+import { formatDateCompact } from '../utils/bookmarkUtils'
 
 interface HighlightWithLevel extends Highlight {
   level?: 'mine' | 'friends' | 'nostrverse'
@@ -15,10 +20,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 +49,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' })
@@ -51,13 +103,146 @@ export const HighlightItem: React.FC<HighlightItemProps> = ({ highlight, onSelec
   
   const getSourceLink = () => {
     if (highlight.eventReference) {
-      return `https://search.dergigi.com/e/${highlight.eventReference}`
+      // Check if it's a coordinate string (kind:pubkey:identifier) or a simple event ID
+      if (highlight.eventReference.includes(':')) {
+        // It's an addressable event coordinate, encode as naddr
+        const parts = highlight.eventReference.split(':')
+        if (parts.length === 3) {
+          const [kindStr, pubkey, identifier] = parts
+          const kind = parseInt(kindStr, 10)
+          
+          // Get non-local relays for the hint
+          const relayHints = RELAYS.filter(r => 
+            !r.includes('localhost') && !r.includes('127.0.0.1')
+          ).slice(0, 3) // Include up to 3 relay hints
+          
+          const naddr = nip19.naddrEncode({
+            kind,
+            pubkey,
+            identifier,
+            relays: relayHints
+          })
+          return `https://njump.me/${naddr}`
+        }
+      } else {
+        // It's a simple event ID, encode as nevent
+        // Get non-local relays for the hint
+        const relayHints = RELAYS.filter(r => 
+          !r.includes('localhost') && !r.includes('127.0.0.1')
+        ).slice(0, 3) // Include up to 3 relay hints
+        
+        const nevent = nip19.neventEncode({
+          id: highlight.eventReference,
+          relays: relayHints,
+          author: highlight.author
+        })
+        return `https://njump.me/${nevent}`
+      }
     }
     return highlight.urlReference
   }
   
   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 +253,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">
@@ -88,7 +283,7 @@ export const HighlightItem: React.FC<HighlightItemProps> = ({ highlight, onSelec
           </span>
           <span className="highlight-meta-separator">•</span>
           <span className="highlight-time">
-            {formatDistanceToNow(new Date(highlight.created_at * 1000), { addSuffix: true })}
+            {formatDateCompact(highlight.created_at)}
           </span>
           
           {sourceLink && (

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

@@ -11,6 +11,7 @@ interface IconButtonProps {
   size?: number
   disabled?: boolean
   spin?: boolean
+  className?: string
 }
 
 const IconButton: React.FC<IconButtonProps> = ({
@@ -21,11 +22,12 @@ const IconButton: React.FC<IconButtonProps> = ({
   variant = 'ghost',
   size = 33,
   disabled = false,
-  spin = false
+  spin = false,
+  className = ''
 }) => {
   return (
     <button
-      className={`icon-button ${variant}`}
+      className={`icon-button ${variant} ${className}`.trim()}
       onClick={onClick}
       title={title}
       aria-label={ariaLabel || title}

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
+  const cachedImage = useImageCache(image, settings)
-  if (image) {
+  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,94 @@
+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 8 seconds
+      setIsConnecting(true)
+      const timeout = setTimeout(() => {
+        setIsConnecting(false)
+      }, 8000)
+      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 ${isConnecting ? 'connecting' : ''}`} 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>
+        ) : 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">
+      <div style={{ display: 'flex', gap: '1rem', flexWrap: 'wrap' }}>
-        <label htmlFor="readingFont">Reading Font</label>
+        <div className="setting-group setting-inline" style={{ flex: '1 1 auto', minWidth: '200px' }}>
-        <div className="setting-control">
+          <label htmlFor="readingFont">Reading Font</label>
-          <FontSelector
+          <div className="setting-control">
-            value={settings.readingFont || 'source-serif-4'}
+            <FontSelector
-            onChange={(font) => onUpdate({ readingFont: font })}
+              value={settings.readingFont || 'source-serif-4'}
-          />
+              onChange={(font) => onUpdate({ readingFont: font })}
+            />
+          </div>
         </div>
-      </div>
 
-      <div className="setting-group setting-inline">
+        <div className="setting-group setting-inline" style={{ flex: '0 1 auto' }}>
-        <label>Font Size</label>
+          <label>Font Size</label>
-        <div className="setting-buttons">
+          <div className="setting-buttons">
-          {[14, 16, 18, 20, 22].map(size => (
+            {[16, 18, 21, 24, 28, 32].map(size => (
-            <button
+              <button
-              key={size}
+                key={size}
-              onClick={() => onUpdate({ fontSize: size })}
+                onClick={() => onUpdate({ fontSize: size })}
-              className={`font-size-btn ${(settings.fontSize || 18) === size ? 'active' : ''}`}
+                className={`font-size-btn ${(settings.fontSize || 21) === size ? 'active' : ''}`}
-              title={`${size}px`}
+                title={`${size}px`}
-              style={{ fontSize: `${size - 2}px` }}
+                style={{ fontSize: `${size - 2}px` }}
-            >
+              >
-              A
+                A
-            </button>
+              </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 RelaySettings: React.FC<RelaySettingsProps> = ({ relayStatuses }) => {
-  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 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 && (
+      {sortedRelays.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 && (
         <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) => (
+            {sortedRelays.map((relay) => {
-              <div 
+              const iconConfig = getRelayIcon(relay)
-                key={relay.url} 
+              const isDisconnected = !relay.isInPool
-                className="relay-item"
+              
-                style={{
+              return (
-                  display: 'flex',
+                <div 
-                  alignItems: 'center',
+                  key={relay.url} 
-                  gap: '0.75rem',
+                  className="relay-item"
-                  padding: '0.75rem',
+                  style={{
-                  background: 'var(--surface-secondary)',
+                    display: 'flex',
-                  borderRadius: '6px',
+                    alignItems: 'center',
-                  marginBottom: '0.5rem',
+                    gap: '0.75rem',
-                  opacity: 0.7
+                    padding: '0.75rem',
-                }}
+                    background: 'var(--surface-secondary)',
-              >
+                    borderRadius: '6px',
-                <FontAwesomeIcon 
+                    marginBottom: '0.5rem',
-                  icon={faCircle} 
+                    opacity: isDisconnected ? 0.7 : 1
-                  style={{ 
+                  }}
-                    color: 'var(--text-tertiary, #6b7280)',
+                >
-                    fontSize: '0.7rem'
+                  <FontAwesomeIcon 
-                  }} 
+                    icon={iconConfig.icon} 
-                />
+                    style={{ 
-                <div style={{ flex: 1, minWidth: 0 }}>
+                      color: iconConfig.color,
-                  <div style={{ 
+                      fontSize: iconConfig.size
-                    fontSize: '0.9rem',
+                    }} 
-                    fontFamily: 'var(--font-mono, monospace)',
+                  />
-                    whiteSpace: 'nowrap',
+                  <div style={{ flex: 1, minWidth: 0 }}>
-                    overflow: 'hidden',
+                    <div style={{ 
-                    textOverflow: 'ellipsis'
+                      fontSize: '0.9rem',
-                  }}>
+                      fontFamily: 'var(--font-mono, monospace)',
-                    {formatRelayUrl(relay.url)}
+                      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,32 @@ 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 className="setting-group">
+        <label htmlFor="autoCollapseSidebarOnMobile" className="checkbox-label">
+          <input
+            id="autoCollapseSidebarOnMobile"
+            type="checkbox"
+            checked={settings.autoCollapseSidebarOnMobile !== false}
+            onChange={(e) => onUpdate({ autoCollapseSidebarOnMobile: e.target.checked })}
+            className="setting-checkbox"
+          />
+          <span>Auto-collapse sidebar on small screens</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, faTimes } 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,11 @@ interface SidebarHeaderProps {
   onToggleCollapse: () => void
   onLogout: () => void
   onOpenSettings: () => void
-  onRefresh?: () => void
-  isRefreshing?: boolean
   relayPool: RelayPool | null
+  isMobile?: boolean
 }
 
-const SidebarHeader: React.FC<SidebarHeaderProps> = ({ onToggleCollapse, onLogout, onOpenSettings, onRefresh, isRefreshing, relayPool }) => {
+const SidebarHeader: React.FC<SidebarHeaderProps> = ({ onToggleCollapse, onLogout, onOpenSettings, relayPool, isMobile = false }) => {
   const [isConnecting, setIsConnecting] = useState(false)
   const [showAddModal, setShowAddModal] = useState(false)
   const navigate = useNavigate()
@@ -61,11 +60,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()
@@ -73,14 +67,25 @@ const SidebarHeader: React.FC<SidebarHeaderProps> = ({ onToggleCollapse, onLogou
   return (
     <>
       <div className="sidebar-header-bar">
-        <button 
+        {isMobile ? (
-          onClick={onToggleCollapse}
+          <IconButton
-          className="toggle-sidebar-btn"
+            icon={faTimes}
-          title="Collapse bookmarks sidebar"
+            onClick={onToggleCollapse}
-          aria-label="Collapse bookmarks sidebar"
+            title="Close sidebar"
-        >
+            ariaLabel="Close sidebar"
-          <FontAwesomeIcon icon={faChevronRight} />
+            variant="ghost"
-        </button>
+            className="mobile-close-btn"
+          />
+        ) : (
+          <button 
+            onClick={onToggleCollapse}
+            className="toggle-sidebar-btn"
+            title="Collapse bookmarks sidebar"
+            aria-label="Collapse bookmarks sidebar"
+          >
+            <FontAwesomeIcon icon={faChevronRight} />
+          </button>
+        )}
         <div className="sidebar-header-right">
         <div 
           className="profile-avatar" 
@@ -101,6 +106,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 +120,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,15 @@
-import React from 'react'
+import React, { useEffect, useRef } from 'react'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faBookmark, faHighlighter } from '@fortawesome/free-solid-svg-icons'
 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'
@@ -14,24 +18,29 @@ import { UserSettings } from '../services/settingsService'
 import { HighlightVisibility } from './HighlightsPanel'
 import { HighlightButtonRef } from './HighlightButton'
 import { BookmarkReference } from '../utils/contentLoader'
+import { useIsMobile } from '../hooks/useMediaQuery'
 
 interface ThreePaneLayoutProps {
   // Layout state
   isCollapsed: boolean
   isHighlightsCollapsed: boolean
+  isSidebarOpen: boolean
   showSettings: boolean
+  showExplore?: boolean
   
   // Bookmarks pane
   bookmarks: Bookmark[]
   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
@@ -68,17 +77,173 @@ interface ThreePaneLayoutProps {
   toastMessage?: string
   toastType?: 'success' | 'error'
   onClearToast: () => void
+  
+  // Optional Explore content
+  explore?: React.ReactNode
 }
 
 const ThreePaneLayout: React.FC<ThreePaneLayoutProps> = (props) => {
+  const isMobile = useIsMobile()
+  const sidebarRef = useRef<HTMLDivElement>(null)
+  const highlightsRef = useRef<HTMLDivElement>(null)
+
+  // Lock body scroll when mobile sidebar or highlights is open
+  useEffect(() => {
+    if (isMobile && (props.isSidebarOpen || !props.isHighlightsCollapsed)) {
+      document.body.classList.add('mobile-sidebar-open')
+    } else {
+      document.body.classList.remove('mobile-sidebar-open')
+    }
+    
+    return () => {
+      document.body.classList.remove('mobile-sidebar-open')
+    }
+  }, [isMobile, props.isSidebarOpen, props.isHighlightsCollapsed])
+
+  // Handle ESC key to close sidebar or highlights
+  useEffect(() => {
+    if (!isMobile) return
+    if (!props.isSidebarOpen && props.isHighlightsCollapsed) return
+
+    const handleEscape = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        if (props.isSidebarOpen) {
+          props.onToggleSidebar()
+        } else if (!props.isHighlightsCollapsed) {
+          props.onToggleHighlightsPanel()
+        }
+      }
+    }
+
+    document.addEventListener('keydown', handleEscape)
+    return () => document.removeEventListener('keydown', handleEscape)
+  }, [isMobile, props.isSidebarOpen, props.isHighlightsCollapsed, props.onToggleSidebar, props.onToggleHighlightsPanel])
+
+  // Trap focus in sidebar when open on mobile
+  useEffect(() => {
+    if (!isMobile || !props.isSidebarOpen || !sidebarRef.current) return
+
+    const sidebar = sidebarRef.current
+    const focusableElements = sidebar.querySelectorAll<HTMLElement>(
+      'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+    )
+    const firstElement = focusableElements[0]
+    const lastElement = focusableElements[focusableElements.length - 1]
+
+    const handleTab = (e: KeyboardEvent) => {
+      if (e.key !== 'Tab') return
+
+      if (e.shiftKey) {
+        if (document.activeElement === firstElement) {
+          e.preventDefault()
+          lastElement?.focus()
+        }
+      } else {
+        if (document.activeElement === lastElement) {
+          e.preventDefault()
+          firstElement?.focus()
+        }
+      }
+    }
+
+    sidebar.addEventListener('keydown', handleTab)
+    firstElement?.focus()
+
+    return () => {
+      sidebar.removeEventListener('keydown', handleTab)
+    }
+  }, [isMobile, props.isSidebarOpen])
+
+  // Trap focus in highlights panel when open on mobile
+  useEffect(() => {
+    if (!isMobile || props.isHighlightsCollapsed || !highlightsRef.current) return
+
+    const highlights = highlightsRef.current
+    const focusableElements = highlights.querySelectorAll<HTMLElement>(
+      'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+    )
+    const firstElement = focusableElements[0]
+    const lastElement = focusableElements[focusableElements.length - 1]
+
+    const handleTab = (e: KeyboardEvent) => {
+      if (e.key !== 'Tab') return
+
+      if (e.shiftKey) {
+        if (document.activeElement === firstElement) {
+          e.preventDefault()
+          lastElement?.focus()
+        }
+      } else {
+        if (document.activeElement === lastElement) {
+          e.preventDefault()
+          firstElement?.focus()
+        }
+      }
+    }
+
+    highlights.addEventListener('keydown', handleTab)
+    firstElement?.focus()
+
+    return () => {
+      highlights.removeEventListener('keydown', handleTab)
+    }
+  }, [isMobile, props.isHighlightsCollapsed])
+
+  const handleBackdropClick = () => {
+    if (isMobile) {
+      if (props.isSidebarOpen) {
+        props.onToggleSidebar()
+      } else if (!props.isHighlightsCollapsed) {
+        props.onToggleHighlightsPanel()
+      }
+    }
+  }
+
   return (
     <>
+      {/* Mobile bookmark button - only show when viewing article */}
+      {isMobile && !props.isSidebarOpen && props.isHighlightsCollapsed && (
+        <button
+          className="mobile-hamburger-btn"
+          onClick={props.onToggleSidebar}
+          aria-label="Open bookmarks"
+          aria-expanded={props.isSidebarOpen}
+        >
+          <FontAwesomeIcon icon={faBookmark} />
+        </button>
+      )}
+
+      {/* Mobile highlights button - only show when viewing article */}
+      {isMobile && !props.isSidebarOpen && props.isHighlightsCollapsed && (
+        <button
+          className="mobile-highlights-btn"
+          onClick={props.onToggleHighlightsPanel}
+          aria-label="Open highlights"
+          aria-expanded={!props.isHighlightsCollapsed}
+        >
+          <FontAwesomeIcon icon={faHighlighter} />
+        </button>
+      )}
+
+      {/* Mobile backdrop */}
+      {isMobile && (
+        <div
+          className={`mobile-sidebar-backdrop ${(props.isSidebarOpen || !props.isHighlightsCollapsed) ? 'visible' : ''}`}
+          onClick={handleBackdropClick}
+          aria-hidden="true"
+        />
+      )}
+
       <div className={`three-pane ${props.isCollapsed ? 'sidebar-collapsed' : ''} ${props.isHighlightsCollapsed ? 'highlights-collapsed' : ''}`}>
-        <div className="pane sidebar">
+        <div 
+          ref={sidebarRef}
+          className={`pane sidebar ${isMobile && props.isSidebarOpen ? 'mobile-open' : ''}`}
+          aria-hidden={isMobile && !props.isSidebarOpen}
+        >
           <BookmarkList 
             bookmarks={props.bookmarks}
             onSelectUrl={props.onSelectUrl}
-            isCollapsed={props.isCollapsed}
+            isCollapsed={isMobile ? false : props.isCollapsed}
             onToggleCollapse={props.onToggleSidebar}
             onLogout={props.onLogout}
             viewMode={props.viewMode}
@@ -87,11 +252,14 @@ 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}
+            isMobile={isMobile}
           />
         </div>
-        <div className="pane main">
+        <div className={`pane main ${isMobile && (props.isSidebarOpen || !props.isHighlightsCollapsed) ? 'mobile-hidden' : ''}`}>
           {props.showSettings ? (
             <Settings 
               settings={props.settings}
@@ -99,6 +267,11 @@ const ThreePaneLayout: React.FC<ThreePaneLayoutProps> = (props) => {
               onClose={props.onCloseSettings}
               relayPool={props.relayPool}
             />
+          ) : props.showExplore && props.explore ? (
+            // Render Explore inside the main pane to keep side panels
+            <>
+              {props.explore}
+            </>
           ) : (
             <ContentPanel 
               loading={props.readerLoading}
@@ -120,10 +293,15 @@ const ThreePaneLayout: React.FC<ThreePaneLayoutProps> = (props) => {
               onClearSelection={props.onClearSelection}
               currentUserPubkey={props.currentUserPubkey}
               followedPubkeys={props.followedPubkeys}
+              settings={props.settings}
             />
           )}
         </div>
-        <div className="pane highlights">
+        <div 
+          ref={highlightsRef}
+          className={`pane highlights ${isMobile && !props.isHighlightsCollapsed ? 'mobile-open' : ''}`}
+          aria-hidden={isMobile && props.isHighlightsCollapsed}
+        >
           <HighlightsPanel
             highlights={props.highlights}
             loading={props.highlightsLoading}
@@ -139,6 +317,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 +329,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/useBookmarksUI.ts

@@ -3,12 +3,15 @@ import { NostrEvent } from 'nostr-tools'
 import { HighlightVisibility } from '../components/HighlightsPanel'
 import { UserSettings } from '../services/settingsService'
 import { ViewMode } from '../components/Bookmarks'
+import { useIsMobile } from './useMediaQuery'
 
 interface UseBookmarksUIParams {
   settings: UserSettings
 }
 
 export const useBookmarksUI = ({ settings }: UseBookmarksUIParams) => {
+  const isMobile = useIsMobile()
+  const [isSidebarOpen, setIsSidebarOpen] = useState(false)
   const [isCollapsed, setIsCollapsed] = useState(true)
   const [isHighlightsCollapsed, setIsHighlightsCollapsed] = useState(true)
   const [viewMode, setViewMode] = useState<ViewMode>('compact')
@@ -23,6 +26,16 @@ export const useBookmarksUI = ({ settings }: UseBookmarksUIParams) => {
     mine: true
   })
 
+  // Auto-collapse sidebar on mobile based on settings
+  useEffect(() => {
+    const autoCollapse = settings.autoCollapseSidebarOnMobile !== false
+    if (isMobile && autoCollapse) {
+      setIsSidebarOpen(false)
+    } else if (!isMobile) {
+      setIsSidebarOpen(true)
+    }
+  }, [isMobile, settings.autoCollapseSidebarOnMobile])
+
   // Apply UI settings
   useEffect(() => {
     if (settings.defaultViewMode) setViewMode(settings.defaultViewMode)
@@ -34,7 +47,15 @@ export const useBookmarksUI = ({ settings }: UseBookmarksUIParams) => {
     })
   }, [settings])
 
+  const toggleSidebar = () => {
+    setIsSidebarOpen(prev => !prev)
+  }
+
   return {
+    isMobile,
+    isSidebarOpen,
+    setIsSidebarOpen,
+    toggleSidebar,
     isCollapsed,
     setIsCollapsed,
     isHighlightsCollapsed,

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!')
+      console.log('✅ Highlight created successfully!', {
-      highlightButtonRef.current?.clearSelection()
+        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/useMediaQuery.ts

@@ -0,0 +1,62 @@
+import { useState, useEffect } from 'react'
+
+/**
+ * Hook to detect if a media query matches
+ * @param query The media query string (e.g., '(max-width: 768px)')
+ * @returns true if the media query matches, false otherwise
+ */
+export function useMediaQuery(query: string): boolean {
+  const [matches, setMatches] = useState(() => {
+    if (typeof window === 'undefined') return false
+    return window.matchMedia(query).matches
+  })
+
+  useEffect(() => {
+    if (typeof window === 'undefined') return
+
+    const mediaQuery = window.matchMedia(query)
+    
+    // Update state if the media query changes
+    const handleChange = (event: MediaQueryListEvent) => {
+      setMatches(event.matches)
+    }
+
+    // Modern browsers
+    if (mediaQuery.addEventListener) {
+      mediaQuery.addEventListener('change', handleChange)
+      return () => mediaQuery.removeEventListener('change', handleChange)
+    } 
+    // Legacy browsers
+    else {
+      mediaQuery.addListener(handleChange)
+      return () => mediaQuery.removeListener(handleChange)
+    }
+  }, [query])
+
+  return matches
+}
+
+/**
+ * Hook to detect if the user is on a coarse pointer device (touch)
+ * @returns true if the user is using a coarse pointer (touch), false otherwise
+ */
+export function useIsCoarsePointer(): boolean {
+  return useMediaQuery('(pointer: coarse)')
+}
+
+/**
+ * Hook to detect if the viewport is mobile-sized
+ * @returns true if viewport width is <= 768px, false otherwise
+ */
+export function useIsMobile(): boolean {
+  return useMediaQuery('(max-width: 768px)')
+}
+
+/**
+ * Hook to detect if the viewport is tablet-sized
+ * @returns true if viewport width is <= 1024px, false otherwise
+ */
+export function useIsTablet(): boolean {
+  return useMediaQuery('(max-width: 1024px)')
+}
+

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

@@ -22,12 +22,40 @@
   --highlights-collapsed-width: 56px;
   --main-max-width: 900px;
   --main-horizontal-padding: 1rem;
+  
+  /* Mobile breakpoints */
+  --mobile-breakpoint: 768px;
+  --tablet-breakpoint: 1024px;
+  
+  /* Mobile touch target minimum */
+  --min-touch-target: 44px;
+  
+  /* Safe area insets for notched devices */
+  --safe-area-top: env(safe-area-inset-top, 0px);
+  --safe-area-bottom: env(safe-area-inset-bottom, 0px);
+  --safe-area-left: env(safe-area-inset-left, 0px);
+  --safe-area-right: env(safe-area-inset-right, 0px);
 }
 
 body {
   margin: 0;
   min-width: 320px;
   min-height: 100vh;
+  overscroll-behavior: none;
+  -webkit-overflow-scrolling: touch;
+}
+
+/* Use dynamic viewport height if supported */
+@supports (height: 100dvh) {
+  body {
+    min-height: 100dvh;
+  }
+}
+
+body.mobile-sidebar-open {
+  overflow: hidden;
+  position: fixed;
+  width: 100%;
 }
 
 #root {
@@ -36,6 +64,12 @@ body {
   padding: 1rem;
 }
 
+@media (max-width: 768px) {
+  #root {
+    padding: 0;
+  }
+}
+
 .app {
   text-align: center;
   position: relative;
@@ -71,15 +105,16 @@ body {
 
 .bookmarks-container .view-mode-controls {
   margin-top: auto;
-  padding: 0.75rem 1rem;
+  padding: 1rem;
   border-top: 1px solid #333;
-  background: #1a1a1a;
+  background: transparent;
-  border-radius: 0 0 12px 12px;
+  border-radius: 0;
 }
 
 .bookmarks-container .bookmarks-list {
-  padding: 0.25rem;
+  padding: 0.5rem;
   overflow-y: auto;
+  overflow-x: hidden;
   flex: 1;
   width: 100%;
   max-width: 100%;
@@ -105,16 +140,52 @@ body {
   margin-left: auto;
 }
 
+.mobile-hamburger-btn {
+  display: none;
+  position: fixed;
+  top: 1rem;
+  left: 1rem;
+  z-index: 900;
+  background: #2a2a2a;
+  border: 1px solid #444;
+  border-radius: 8px;
+  color: #ddd;
+  width: var(--min-touch-target);
+  height: var(--min-touch-target);
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+  transition: all 0.2s ease;
+}
+
+.mobile-hamburger-btn:active {
+  transform: scale(0.95);
+}
+
+.mobile-close-btn {
+  display: none;
+}
+
+@media (max-width: 768px) {
+  .mobile-hamburger-btn {
+    display: flex;
+  }
+  
+  .sidebar-header-bar .toggle-sidebar-btn {
+    display: none;
+  }
+  
+  .mobile-close-btn {
+    display: flex;
+  }
+}
+
 .view-mode-controls {
   display: flex;
   align-items: center;
-  gap: 0.5rem;
-  padding: 0.5rem 1rem;
-  background: #1a1a1a;
-  border: 1px solid #333;
-  border-radius: 8px;
-  margin-bottom: 1rem;
   justify-content: center;
+  gap: 0.5rem;
 }
 
 .profile-avatar {
@@ -305,6 +376,29 @@ body {
 
 .icon-button.ghost { background: #2a2a2a; }
 
+/* Mobile touch target improvements */
+@media (max-width: 768px) {
+  .icon-button {
+    min-width: var(--min-touch-target);
+    min-height: var(--min-touch-target);
+  }
+}
+
+/* Disable hover effects on touch devices */
+@media (pointer: coarse) {
+  .icon-button:hover {
+    background: #2a2a2a;
+  }
+  
+  .icon-button.ghost:hover {
+    background: #2a2a2a;
+  }
+  
+  .icon-button:active {
+    background: #333;
+  }
+}
+
 .bookmark-events {
   margin: 1rem 0;
 }
@@ -398,12 +492,24 @@ body {
   text-align: center;
   padding: 3rem;
   color: #888;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
 }
 
 .empty-state p {
   margin: 0.5rem 0;
 }
 
+.loading {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
 .bookmarks-list {
   display: flex;
   flex-direction: column;
@@ -432,6 +538,13 @@ body {
   column-gap: 0;
   height: calc(100vh - 2rem);
   transition: grid-template-columns 0.3s ease;
+  position: relative;
+}
+
+@supports (height: 100dvh) {
+  .three-pane {
+    height: calc(100dvh - 2rem);
+  }
 }
 
 .three-pane.sidebar-collapsed {
@@ -446,6 +559,22 @@ body {
   grid-template-columns: var(--sidebar-collapsed-width) 1fr var(--highlights-collapsed-width);
 }
 
+/* Mobile three-pane layout */
+@media (max-width: 768px) {
+  .three-pane {
+    grid-template-columns: 1fr;
+    grid-template-rows: 1fr;
+    height: 100vh;
+    height: 100dvh;
+  }
+  
+  .three-pane.sidebar-collapsed,
+  .three-pane.highlights-collapsed,
+  .three-pane.sidebar-collapsed.highlights-collapsed {
+    grid-template-columns: 1fr;
+  }
+}
+
 .pane.sidebar {
   overflow-y: auto;
   height: 100%;
@@ -475,6 +604,133 @@ body {
   height: 100%;
 }
 
+/* Ensure panes are stacked in the correct order on desktop */
+@media (min-width: 769px) {
+  /* Desktop stacking to keep highlights above main without overlap */
+  .three-pane .pane.sidebar { z-index: 1; }
+  .three-pane .pane.main { z-index: 1; }
+  .three-pane .pane.highlights { z-index: 2; }
+}
+
+/* Mobile pane styles */
+@media (max-width: 768px) {
+  /* Both sidepanes slide in as overlays */
+  .pane.sidebar,
+  .pane.highlights {
+    position: fixed;
+    top: 0;
+    width: 85%;
+    max-width: 320px;
+    height: 100vh;
+    height: 100dvh;
+    background: #1a1a1a;
+    z-index: 1001; /* Above backdrop */
+    transition: transform 0.3s ease;
+    box-shadow: none;
+    display: flex;
+    flex-direction: column;
+  }
+  
+  /* Ensure content fills the mobile sidepanes */
+  .pane.sidebar > *,
+  .pane.highlights > * {
+    width: 100%;
+    height: 100%;
+  }
+  
+  /* Remove borders from containers in mobile overlays */
+  .pane.sidebar .bookmarks-container,
+  .pane.highlights .highlights-container {
+    border: none;
+    border-radius: 0;
+    flex: 1;
+    min-height: 0;
+  }
+  
+  /* Bookmarks sidebar from left */
+  .pane.sidebar {
+    left: 0;
+    transform: translateX(-100%);
+  }
+  
+  .pane.sidebar.mobile-open {
+    transform: translateX(0);
+    box-shadow: 4px 0 12px rgba(0, 0, 0, 0.5);
+  }
+  
+  /* Highlights sidebar from right */
+  .pane.highlights {
+    right: 0;
+    transform: translateX(100%);
+  }
+  
+  .pane.highlights.mobile-open {
+    transform: translateX(0);
+    box-shadow: -4px 0 12px rgba(0, 0, 0, 0.5);
+  }
+  
+  .pane.main {
+    grid-column: 1;
+    grid-row: 1;
+    padding: 0.5rem;
+    max-width: 100%;
+    transition: opacity 0.2s ease;
+  }
+  
+  /* Hide main content when sidepanes are open on mobile */
+  .three-pane .pane.main.mobile-hidden {
+    opacity: 0;
+    pointer-events: none;
+  }
+  
+  .mobile-sidebar-backdrop {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.45);
+    z-index: 999; /* Below sidepanes */
+    opacity: 0;
+    transition: opacity 0.3s ease;
+  }
+  
+  .mobile-sidebar-backdrop.visible {
+    display: block;
+    opacity: 1;
+  }
+  
+  .mobile-highlights-btn {
+    display: none;
+    position: fixed;
+    top: 1rem;
+    right: 1rem;
+    z-index: 900;
+    background: #2a2a2a;
+    border: 1px solid #444;
+    border-radius: 8px;
+    color: #ddd;
+    width: var(--min-touch-target);
+    height: var(--min-touch-target);
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+    transition: all 0.2s ease;
+  }
+  
+  .mobile-highlights-btn:active {
+    transform: scale(0.95);
+  }
+  
+  @media (max-width: 768px) {
+    .mobile-highlights-btn {
+      display: flex;
+    }
+  }
+}
+
 .reader {
   background: #1a1a1a;
   border: 1px solid #333;
@@ -502,6 +758,7 @@ body {
 
 .reader-header {
   margin-bottom: 2rem;
+  position: relative;
 }
 
 .reader-title {
@@ -524,6 +781,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;
@@ -720,12 +1002,26 @@ body {
   gap: 1.5rem;
 }
 
+@media (max-width: 768px) {
+  .bookmarks-grid {
+    gap: 0.75rem;
+  }
+  
+  .bookmarks-grid.bookmarks-compact {
+    gap: 0.25rem;
+  }
+  
+  .bookmarks-grid.bookmarks-large {
+    gap: 1rem;
+  }
+}
+
 .individual-bookmark {
-  background: #2a2a2a;
+  background: transparent;
   padding: 1rem;
   border-radius: 8px;
   transition: all 0.2s ease;
-  border: 1px solid #333;
+  border: 1px solid transparent;
   word-wrap: break-word;
   overflow-wrap: break-word;
   word-break: break-word;
@@ -733,23 +1029,26 @@ body {
 }
 
 .individual-bookmark:hover {
-  border-color: #444;
+  border-color: transparent;
-  background: #2d2d2d;
+  background: #2a2a2a;
 }
 
 /* Compact view styles */
 .individual-bookmark.compact {
-  padding: 0.3rem 0.25rem;
+  padding: 0.5rem 0.5rem;
   background: transparent;
-  border-bottom: 1px solid #333;
+  border: none;
+  border-bottom: 1px solid #2a2a2a;
   border-radius: 0;
   box-shadow: none;
   width: 100%;
   max-width: 100%;
+  overflow: hidden;
 }
 
 .individual-bookmark.compact:hover {
-  background: #2a2a2a;
+  background: #252525;
+  border-bottom-color: #333;
   transform: none;
   box-shadow: none;
 }
@@ -757,11 +1056,11 @@ body {
 .compact-row {
   display: flex;
   align-items: center;
-  gap: 0.75rem;
+  gap: 0.5rem;
   height: 28px;
-  justify-content: space-between;
   width: 100%;
   min-width: 0;
+  overflow: hidden;
 }
 
 .compact-row.clickable {
@@ -782,7 +1081,7 @@ body {
 }
 
 .compact-text {
-  flex: 1 1 0;
+  flex: 1;
   min-width: 0;
   color: #ccc;
   font-size: 0.85rem;
@@ -790,7 +1089,6 @@ body {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  max-width: 100%;
 }
 
 .bookmark-date-compact {
@@ -811,10 +1109,9 @@ body {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 26px;
+  width: 24px;
   height: 22px;
   flex-shrink: 0;
-  margin-left: auto;
   transition: color 0.2s ease;
 }
 
@@ -1069,9 +1366,9 @@ body {
 
 /* Hero image in reader view */
 .reader-hero-image {
-  width: 100%;
+  width: calc(100% + 1.5rem);
-  margin: 0 0 2rem 0;
+  margin: -0.75rem -0.75rem 2rem -0.75rem;
-  border-radius: 8px;
+  border-radius: 0;
   overflow: hidden;
   position: relative;
   min-height: 300px;
@@ -1116,6 +1413,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);
@@ -1171,12 +1479,22 @@ body {
   }
   
   .individual-bookmark {
-    background: #f5f5f5;
+    background: transparent;
-    border-color: #ddd;
+    border-color: transparent;
   }
   
   .individual-bookmark:hover {
-    border-color: #646cff;
+    background: #f5f5f5;
+    border-color: transparent;
+  }
+  
+  .individual-bookmark.compact {
+    border-bottom-color: #e5e5e5;
+  }
+  
+  .individual-bookmark.compact:hover {
+    background: #fafafa;
+    border-bottom-color: #ddd;
   }
   
   .individual-bookmarks h4 {
@@ -1220,6 +1538,14 @@ body {
     color: #646cff;
   }
   
+  .highlight-relay-indicator {
+    color: #666;
+  }
+  
+  .highlight-relay-indicator:hover {
+    color: #333;
+  }
+  
   .highlight-text {
     color: #213547;
   }
@@ -1234,7 +1560,6 @@ body {
   flex-direction: column;
   height: 100%;
   overflow: hidden;
-  padding-right: 1rem;
 }
 
 .highlights-container.collapsed {
@@ -1520,6 +1845,28 @@ body {
   font-size: 1.2rem;
   flex-shrink: 0;
   margin-top: 0.25rem;
+  position: relative;
+}
+
+.highlight-relay-indicator {
+  position: absolute;
+  bottom: -2px;
+  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 */
@@ -1568,22 +1915,33 @@ body {
   display: flex;
   align-items: center;
   gap: 0.5rem;
-  font-size: 0.875rem;
+  font-size: 0.8rem;
   color: #888;
-  flex-wrap: wrap;
+  flex-wrap: nowrap;
+  min-height: 20px;
 }
 
 .highlight-author {
   color: #aaa;
   font-weight: 500;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 150px;
+  line-height: 1;
 }
 
 .highlight-meta-separator {
   color: #666;
+  flex-shrink: 0;
+  line-height: 1;
 }
 
 .highlight-time {
   color: #888;
+  white-space: nowrap;
+  flex-shrink: 0;
+  line-height: 1;
 }
 
 .highlight-source {
@@ -1593,6 +1951,9 @@ body {
   color: #646cff;
   text-decoration: none;
   transition: color 0.2s ease;
+  flex-shrink: 0;
+  margin-left: auto;
+  line-height: 1;
 }
 
 .highlight-source:hover {
@@ -2216,6 +2577,27 @@ body {
   font-size: 0.95rem;
 }
 
+@media (max-width: 768px) {
+  .toast {
+    top: auto;
+    bottom: calc(1rem + var(--safe-area-bottom));
+    right: 1rem;
+    left: 1rem;
+    max-width: calc(100% - 2rem);
+  }
+  
+  @keyframes toast-slide-in {
+    from {
+      transform: translateY(100px);
+      opacity: 0;
+    }
+    to {
+      transform: translateY(0);
+      opacity: 1;
+    }
+  }
+}
+
 .toast-success {
   border-color: #28a745;
 }
@@ -2270,6 +2652,22 @@ body {
   box-sizing: border-box;
 }
 
+@media (max-width: 768px) {
+  .modal-overlay {
+    padding: 0;
+    align-items: flex-end;
+  }
+  
+  .modal-content {
+    max-width: 100%;
+    max-height: 95vh;
+    max-height: 95dvh;
+    border-radius: 16px 16px 0 0;
+    margin: 0;
+    padding-bottom: var(--safe-area-bottom);
+  }
+}
+
 .modal-header {
   display: flex;
   align-items: center;
@@ -2407,3 +2805,261 @@ 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.connecting {
+  background: rgba(100, 108, 255, 0.15);
+  border: 1px solid rgba(100, 108, 255, 0.25);
+}
+
+.relay-status-indicator.connecting:hover {
+  background: rgba(100, 108, 255, 0.25);
+}
+
+.relay-status-indicator.connecting .relay-status-icon {
+  color: rgba(100, 108, 255, 0.9);
+}
+
+.relay-status-indicator.connecting .relay-status-title {
+  color: rgba(100, 108, 255, 1);
+}
+
+.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,13 +3,16 @@ 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'
+// npub19802see0gnk3vjlus0dnmfdagusqrtmsxpl5yfmkwn9uvnfnqylqduhr0x
+const BORIS_PUBKEY = '29dea8672f44ed164bfc83db3da5bd472001af70307f42277674cbc64d33013e'
 
 const {
   getHighlightText,
@@ -26,17 +29,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')
   }
@@ -72,9 +76,19 @@ export async function createHighlight(
   // Update the alt tag to identify Boris as the creator
   const altTagIndex = highlightEvent.tags.findIndex(tag => tag[0] === 'alt')
   if (altTagIndex !== -1) {
-    highlightEvent.tags[altTagIndex] = ['alt', 'Highlight created by Boris. readwithboris.com']
+    highlightEvent.tags[altTagIndex] = ['alt', 'Highlight created by Boris. read.withboris.com']
   } else {
-    highlightEvent.tags.push(['alt', 'Highlight created by Boris. readwithboris.com'])
+    highlightEvent.tags.push(['alt', 'Highlight created by Boris. read.withboris.com'])
+  }
+
+  // Add p tag (author tag) for nostr-native content
+  // This tags the original author so they can see highlights of their work
+  if (typeof source === 'object' && 'kind' in source) {
+    // Only add p tag if it doesn't already exist
+    const hasPTag = highlightEvent.tags.some(tag => tag[0] === 'p' && tag[1] === source.pubkey)
+    if (!hasPTag) {
+      highlightEvent.tags.push(['p', source.pubkey])
+    }
   }
 
   // Add zap tags for nostr-native content (NIP-57 Appendix G)
@@ -104,13 +118,60 @@ export async function createHighlight(
   // Sign the event
   const signedEvent = await factory.sign(highlightEvent)
 
-  // Publish to relays (including local relay)
+  // Publish to all configured relays - let the relay pool handle connection state
-  await relayPool.publish(RELAYS, signedEvent)
+  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
+  // Check current connection status - are we online or in flight mode?
-  return signedEvent
+  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)
+    const isConnected = relay.connected
-    relayLastSeen.set(relay.url, now)
+    
+    if (isConnected) {
+      currentlyConnectedUrls.add(relay.url)
+      relayLastSeen.set(relay.url, now)
+    }
     
     statuses.push({
       url: relay.url,
-      isInPool: true,
+      isInPool: isConnected,
-      lastSeen: now
+      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) {
+    if (!currentlyConnectedUrls.has(url) && lastSeen >= cutoffTime) {
-      statuses.push({
+      // Check if this relay is already in statuses (might be in pool but not connected)
-        url,
+      const existingStatus = statuses.find(s => s.url === url)
-        isInPool: false,
+      if (!existingStatus) {
-        lastSeen
+        statuses.push({
-      })
+          url,
+          isInPool: false,
+          lastSeen
+        })
+      }
     }
   }
   

src/services/settingsService.ts

@@ -39,6 +39,14 @@ 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)
+  // Mobile settings
+  autoCollapseSidebarOnMobile?: boolean // Auto-collapse sidebar on mobile (default: true)
 }
 
 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/bookmarkUtils.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { formatDistanceToNow } from 'date-fns'
+import { formatDistanceToNow, differenceInSeconds, differenceInMinutes, differenceInHours, differenceInDays, differenceInMonths, differenceInYears } from 'date-fns'
 import { ParsedContent, ParsedNode } from '../types/bookmarks'
 import ResolvedMention from '../components/ResolvedMention'
 // Note: ContentWithResolvedProfiles is imported by components directly to keep this file component-only for fast refresh
@@ -9,6 +9,26 @@ export const formatDate = (timestamp: number) => {
   return formatDistanceToNow(date, { addSuffix: true })
 }
 
+// Ultra-compact date format for tight spaces (e.g., compact view)
+export const formatDateCompact = (timestamp: number) => {
+  const date = new Date(timestamp * 1000)
+  const now = new Date()
+  
+  const seconds = differenceInSeconds(now, date)
+  const minutes = differenceInMinutes(now, date)
+  const hours = differenceInHours(now, date)
+  const days = differenceInDays(now, date)
+  const months = differenceInMonths(now, date)
+  const years = differenceInYears(now, date)
+  
+  if (seconds < 60) return 'now'
+  if (minutes < 60) return `${minutes}m`
+  if (hours < 24) return `${hours}h`
+  if (days < 30) return `${days}d`
+  if (months < 12) return `${months}mo`
+  return `${years}y`
+}
+
 // Component to render content with resolved nprofile names
 // Intentionally no exports except components and render helpers
 

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))
+}
+

vercel.json

@@ -0,0 +1,9 @@
+{
+  "rewrites": [
+    {
+      "source": "/(.*)",
+      "destination": "/index.html"
+    }
+  ]
+}
+