chore: bump version to 0.5.2

- Remove unused handleDeleteClick function (replaced by handleMenuDeleteClick)
- Remove onSelectUrl from destructuring (not used after menu refactor)
- Add comment explaining onSelectUrl is kept in props for API compatibility

.cursor/rules/mobile-first-ui-ux.mdc

@@ -0,0 +1,6 @@
+---
+description: anything related to UI/UX
+alwaysApply: false
+---
+
+This is a mobile-first application. All UI elements should be designed with that in mind. The application should work well on small screens, including older smartphones. The UX should be immaculate on mobile, even when in flight mode. (We use local caches and local relays, so that app works offline too.)

.gitignore

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

CHANGELOG.md

@@ -5,6 +5,198 @@ 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]
+
+## [0.5.0] - 2025-10-12
+
+### Added
+- Upgrade to full PWA with `vite-plugin-pwa`
+- Replace placeholder icons with branded favicons
+- Author info card for nostr-native articles
+
+### Changed
+- Explore: shrink refresh spinner footprint; inline-sized loading row
+- Explore: preserve posts across navigations; seed from cache; merge streamed and final results
+- Explore: keep posts visible during refresh; inline spinner; no list wipe
+- Bookmarks: keep list visible during refresh; show spinner only; no wipe
+- Bookmarks: avoid clearing list when no new events; decouple refetch from route changes
+- Highlights: split service into smaller modules to keep files under 210 lines
+- Lint/TypeScript: satisfy react-hooks dependencies; fix worker typings; clear ESLint/TS issues
+
+### Fixed
+- Highlights: merge remote results after local for article/url
+- Explore: always query remote relays after local; stream merge into UI
+- Improve mobile touch targets for highlight icons
+- Color `/me` highlights with "my highlights" color setting
+
+### Performance
+- Local-first then remote follow-up across services (titles, bookmarks, highlights)
+- Run local and remote fetches concurrently; stream and dedupe results
+- Stream contacts and early posts from local; merge remote later
+- Relay queries use local-first with short timeouts; fallback to remote when needed
+- Stream results to UI; display cached/local immediately (articles, highlights, explore)
+
+### Documentation
+- PWA implementation summary and launch checklist updates
+- Update docs to reflect branded icons and final steps
+- Remove temporary PWA launch checklist and implementation summary
+
+## [0.4.3] - 2025-10-11
+
+### Added
+- Mark as read functionality for articles (NIP-25)
+  - Button at the end of each article to mark as read with 📚 emoji
+  - Creates kind:7 reactions for nostr-native articles (`/a/` paths)
+  - Creates kind:17 reactions for external websites (`/r/` paths)
+  - Button shows loading state while publishing reaction
+  - Only visible when user is logged in
+- Highlight deletion with confirmation dialog (NIP-09)
+  - Small delete button (trash icon) on highlight items
+  - Only visible for user's own highlights
+  - Confirmation dialog prevents accidental deletions
+  - Styled to match relay indicator (subtle, same size)
+  - Removes highlights from UI immediately after deletion request
+- `/me` page showing user's recent highlights
+  - Accessible by clicking profile picture in bookmark sidebar
+  - Displays all highlights created by the logged-in user
+  - Uses same rendering as Settings and Explore pages
+  - Includes highlight count in header
+- Confirmation dialog component
+  - Reusable modal with danger/warning/info variants
+  - Backdrop blur effect
+  - Mobile-responsive design
+  - Prevents accidental destructive actions
+
+### Changed
+- Relay status indicator on mobile now displays in compact mode
+  - Shows only airplane icon by default (44x44px touch target)
+  - Tap to expand for full connection details
+  - Reduces screen clutter on mobile while keeping info accessible
+  - Smooth transition between compact and expanded states
+  - Desktop view remains unchanged (always shows full details)
+
+## [0.4.2] - 2025-10-11
+
+### Added
+- NIP-19 identifier resolution in article content (NIP-19, NIP-27)
+  - Support for `nostr:npub1...`, `nostr:note1...`, `nostr:nprofile1...`, `nostr:nevent1...`, `nostr:naddr1...`
+  - Converts nostr: URIs to clickable links with human-readable labels
+  - Automatically fetches and displays article titles for `naddr` references
+  - Falls back to identifier when title fetch fails
+- Auto-hide mobile UI buttons on scroll down
+  - Floating bookmark/highlights buttons hide when scrolling down
+  - Buttons reappear when scrolling up for distraction-free reading
+  - Smooth opacity transitions for better UX
+- Scroll direction detection hook (`useScrollDirection`)
+  - Supports both window and element-based scroll detection
+  - Configurable threshold and enable/disable options
+
+### Changed
+- Article references (`naddr`) now link internally to `/a/{naddr}` instead of external njump.me
+- Sidebar auto-closes on mobile when navigating to content via routes
+  - Handles clicking on blog posts in Explore view
+  - Complements existing sidebar auto-close for bookmarks
+- Markdown processing now async to support article title resolution
+- Article title resolution fetches titles in parallel for better performance
+
+### Fixed
+- Mobile button scroll detection now correctly monitors main pane element
+  - Previously monitored window scroll which didn't work on mobile
+  - Content scrolls within `.pane.main` div on mobile devices
+- All ESLint warnings and TypeScript type errors resolved
+  - Added react-hooks plugin to ESLint configuration
+  - Fixed exhaustive-deps warnings in components
+  - Added block scoping to switch case statements
+  - Corrected type references for nostr-tools decode result
+
+## [0.4.1] - 2025-10-10
+
+### Fixed
+- Long article summaries overlapping with hero image content on mobile devices
+- Article summary now moves below hero image on mobile when longer than 150 characters
+- Article summary line clamp reduced from 3 to 2 lines on mobile for better space utilization
+
+### Changed
+- Hero image rendering on mobile now uses zoom-to-fit approach with viewport-based sizing
+- Hero image height on mobile set to 50vh (constrained between 280px-400px)
+- Improved image cropping with center positioning for better visual presentation
+- Optimized reader header overlay padding and title sizing on mobile
+
+## [0.4.0] - 2025-10-10
+
+### 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)
+- Mobile highlights panel as overlay with toggle button
+
+### 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
+- Replace hamburger icon with bookmark icon on mobile
+
+### Fixed
+- Ensure bookmarks container fills mobile sidepane properly
+- Restore desktop grid layout for highlights panel
+- Improve empty state and loading visibility in mobile sidepanes
+- Add flex properties to mobile bookmark containers for proper filling
+- Force bookmarks pane expanded on mobile and ensure highlights pane sits above content on desktop
+- Reduce mobile backdrop opacity and ensure sidepanes appear above it
+- Replace any type with proper bookmark interface for linter compliance
+
+## [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
@@ -500,6 +692,13 @@ 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
 
+[Unreleased]: https://github.com/dergigi/boris/compare/v0.5.0...HEAD
+[0.5.0]: https://github.com/dergigi/boris/compare/v0.4.3...v0.5.0
+[0.4.0]: https://github.com/dergigi/boris/compare/v0.3.8...v0.4.0
+[0.3.8]: https://github.com/dergigi/boris/compare/v0.3.7...v0.3.8
+[0.3.7]: https://github.com/dergigi/boris/compare/v0.3.6...v0.3.7
+[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

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

@@ -2,22 +2,27 @@
 <html lang="en">
   <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" />
+    <link rel="icon" type="image/x-icon" href="/favicon.ico" />
+    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
+    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
+    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
+    <meta name="theme-color" content="#0f172a" />
+    <link rel="manifest" href="/manifest.webmanifest" />
     <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.3.5",
+  "version": "0.5.2",
   "description": "A minimal nostr client for bookmark management",
   "homepage": "https://read.withboris.com/",
   "type": "module",
@@ -40,7 +40,9 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.5",
     "typescript": "^5.2.2",
-    "vite": "^5.0.8"
+    "vite": "^5.0.8",
+    "vite-plugin-pwa": "^1.0.3",
+    "workbox-window": "^7.3.0"
   },
   "eslintConfig": {
     "root": true,
@@ -59,7 +61,8 @@
     "parser": "@typescript-eslint/parser",
     "plugins": [
       "@typescript-eslint",
-      "react-refresh"
+      "react-refresh",
+      "react-hooks"
     ],
     "rules": {
       "react-refresh/only-export-components": [
@@ -68,6 +71,7 @@
           "allowConstantExport": true
         }
       ],
+      "react-hooks/exhaustive-deps": "warn",
       "@typescript-eslint/no-unused-vars": [
         "error",
         {

public/manifest.webmanifest

@@ -0,0 +1,37 @@
+{
+  "name": "Boris - Nostr Bookmarks",
+  "short_name": "Boris",
+  "description": "Your reading list for the Nostr world. A minimal nostr client for bookmark management with highlights.",
+  "start_url": "/",
+  "scope": "/",
+  "display": "standalone",
+  "theme_color": "#0f172a",
+  "background_color": "#0b1220",
+  "orientation": "any",
+  "categories": ["productivity", "social", "utilities"],
+  "icons": [
+    {
+      "src": "/icon-192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/icon-512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    },
+    {
+      "src": "/icon-maskable-192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "maskable"
+    },
+    {
+      "src": "/icon-maskable-512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "maskable"
+    }
+  ]
+}
+

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

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

src/App.tsx

@@ -9,9 +9,9 @@ import { registerCommonAccountTypes } from 'applesauce-accounts/accounts'
 import { RelayPool } from 'applesauce-relay'
 import { createAddressLoader } from 'applesauce-loaders/loaders'
 import Bookmarks from './components/Bookmarks'
-import Explore from './components/Explore'
 import Toast from './components/Toast'
 import { useToast } from './hooks/useToast'
+import { useOnlineStatus } from './hooks/useOnlineStatus'
 import { RELAYS } from './config/relays'
 
 const DEFAULT_ARTICLE = import.meta.env.VITE_DEFAULT_ARTICLE_NADDR || 
@@ -28,8 +28,7 @@ function AppRoutes({
   const accountManager = Hooks.useAccountManager()
 
   const handleLogout = () => {
-    accountManager.setActive(undefined as never)
-    localStorage.removeItem('active')
+    accountManager.clearActive()
     showToast('Logged out successfully')
   }
 
@@ -65,7 +64,19 @@ function AppRoutes({
       <Route 
         path="/explore" 
         element={
-          <Explore relayPool={relayPool} />
+          <Bookmarks 
+            relayPool={relayPool}
+            onLogout={handleLogout}
+          />
+        } 
+      />
+      <Route 
+        path="/me" 
+        element={
+          <Bookmarks 
+            relayPool={relayPool}
+            onLogout={handleLogout}
+          />
         } 
       />
       <Route path="/" element={<Navigate to={`/a/${DEFAULT_ARTICLE}`} replace />} />
@@ -78,6 +89,7 @@ function App() {
   const [accountManager, setAccountManager] = useState<AccountManager | null>(null)
   const [relayPool, setRelayPool] = useState<RelayPool | null>(null)
   const { toastMessage, toastType, showToast, clearToast } = useToast()
+  const isOnline = useOnlineStatus()
 
   useEffect(() => {
     const initializeApp = async () => {
@@ -173,6 +185,25 @@ function App() {
     }
   }, [])
 
+  // Monitor online/offline status
+  useEffect(() => {
+    if (!isOnline) {
+      showToast('You are offline. Some features may be limited.')
+    }
+  }, [isOnline, showToast])
+
+  // Listen for service worker updates
+  useEffect(() => {
+    const handleSWUpdate = () => {
+      showToast('New version available! Refresh to update.')
+    }
+
+    window.addEventListener('sw-update-available', handleSWUpdate)
+    return () => {
+      window.removeEventListener('sw-update-available', handleSWUpdate)
+    }
+  }, [showToast])
+
   if (!eventStore || !accountManager || !relayPool) {
     return (
       <div className="loading">

src/components/AddBookmarkModal.tsx

@@ -139,7 +139,8 @@ const AddBookmarkModal: React.FC<AddBookmarkModalProps> = ({ onClose, onSave })
         clearTimeout(fetchTimeoutRef.current)
       }
     }
-  }, [url]) // Only depend on url
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [url]) // Only depend on url - title, description, tagsInput are intentionally checked but not dependencies
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault()

src/components/AuthorCard.tsx

@@ -0,0 +1,43 @@
+import React from 'react'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faUserCircle } from '@fortawesome/free-solid-svg-icons'
+import { useEventModel } from 'applesauce-react/hooks'
+import { Models } from 'applesauce-core'
+
+interface AuthorCardProps {
+  authorPubkey: string
+}
+
+const AuthorCard: React.FC<AuthorCardProps> = ({ authorPubkey }) => {
+  const profile = useEventModel(Models.ProfileModel, [authorPubkey])
+  
+  const getAuthorName = () => {
+    if (profile?.name) return profile.name
+    if (profile?.display_name) return profile.display_name
+    return `${authorPubkey.slice(0, 8)}...${authorPubkey.slice(-8)}`
+  }
+  
+  const authorImage = profile?.picture || profile?.image
+  const authorBio = profile?.about
+  
+  return (
+    <div className="author-card">
+      <div className="author-card-avatar">
+        {authorImage ? (
+          <img src={authorImage} alt={getAuthorName()} />
+        ) : (
+          <FontAwesomeIcon icon={faUserCircle} />
+        )}
+      </div>
+      <div className="author-card-content">
+        <div className="author-card-name">{getAuthorName()}</div>
+        {authorBio && (
+          <p className="author-card-bio">{authorBio}</p>
+        )}
+      </div>
+    </div>
+  )
+}
+
+export default AuthorCard
+

src/components/BookmarkList.tsx

@@ -27,6 +27,7 @@ interface BookmarkListProps {
   loading?: boolean
   relayPool: RelayPool | null
   settings?: UserSettings
+  isMobile?: boolean
 }
 
 export const BookmarkList: React.FC<BookmarkListProps> = ({
@@ -44,7 +45,8 @@ export const BookmarkList: React.FC<BookmarkListProps> = ({
   lastFetchTime,
   loading = false,
   relayPool,
-  settings
+  settings,
+  isMobile = false
 }) => {
   // Helper to check if a bookmark has either content or a URL
   const hasContentOrUrl = (ib: IndividualBookmark) => {
@@ -106,17 +108,21 @@ export const BookmarkList: React.FC<BookmarkListProps> = ({
         onLogout={onLogout}
         onOpenSettings={onOpenSettings}
         relayPool={relayPool}
+        isMobile={isMobile}
       />
       
-      {loading ? (
-        <div className="loading">
-          <FontAwesomeIcon icon={faSpinner} spin />
-        </div>
-      ) : allIndividualBookmarks.length === 0 ? (
-        <div className="empty-state">
-          <p>No bookmarks found.</p>
-          <p>Add bookmarks using your nostr client to see them here.</p>
-        </div>
+      {allIndividualBookmarks.length === 0 ? (
+        loading ? (
+          <div className="loading">
+            <FontAwesomeIcon icon={faSpinner} spin />
+          </div>
+        ) : (
+          <div className="empty-state">
+            <p>No bookmarks found.</p>
+            <p>Add bookmarks using your nostr client to see them here.</p>
+            <p>If you aren't on nostr yet, start here: <a href="https://nstart.me/" target="_blank" rel="noopener noreferrer">nstart.me</a></p>
+          </div>
+        )
       ) : (
         <div className="bookmarks-list">
           <div className={`bookmarks-grid bookmarks-${viewMode}`}>

src/components/BookmarkViews/CardView.tsx

@@ -9,6 +9,7 @@ import { classifyUrl } from '../../utils/helpers'
 import { IconGetter } from './shared'
 import { useImageCache } from '../../hooks/useImageCache'
 import { UserSettings } from '../../services/settingsService'
+import { getProfileUrl, getEventUrl } from '../../config/nostrGateways'
 
 interface CardViewProps {
   bookmark: IndividualBookmark
@@ -79,7 +80,7 @@ export const CardView: React.FC<CardViewProps> = ({
         
         {eventNevent ? (
           <a
-            href={`https://search.dergigi.com/e/${eventNevent}`}
+            href={getEventUrl(eventNevent)}
             target="_blank"
             rel="noopener noreferrer"
             className="bookmark-date-link"
@@ -159,7 +160,7 @@ export const CardView: React.FC<CardViewProps> = ({
       <div className="bookmark-footer">
         <div className="bookmark-meta-minimal">
           <a
-            href={`https://search.dergigi.com/p/${authorNpub}`}
+            href={getProfileUrl(authorNpub)}
             target="_blank"
             rel="noopener noreferrer"
             className="author-link-minimal"

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

@@ -6,6 +6,7 @@ import ContentWithResolvedProfiles from '../ContentWithResolvedProfiles'
 import { IconGetter } from './shared'
 import { useImageCache } from '../../hooks/useImageCache'
 import { UserSettings } from '../../services/settingsService'
+import { getProfileUrl, getEventUrl } from '../../config/nostrGateways'
 
 interface LargeViewProps {
   bookmark: IndividualBookmark
@@ -79,7 +80,7 @@ export const LargeView: React.FC<LargeViewProps> = ({
         <div className="large-footer">
           <span className="large-author">
             <a
-              href={`https://search.dergigi.com/p/${authorNpub}`}
+              href={getProfileUrl(authorNpub)}
               target="_blank"
               rel="noopener noreferrer"
               className="author-link-minimal"
@@ -90,7 +91,7 @@ export const LargeView: React.FC<LargeViewProps> = ({
           
           {eventNevent && (
             <a
-              href={`https://search.dergigi.com/e/${eventNevent}`}
+              href={getEventUrl(eventNevent)}
               target="_blank"
               rel="noopener noreferrer"
               className="bookmark-date-link"

src/components/Bookmarks.tsx

@@ -13,6 +13,8 @@ import { useBookmarksUI } from '../hooks/useBookmarksUI'
 import { useRelayStatus } from '../hooks/useRelayStatus'
 import { useOfflineSync } from '../hooks/useOfflineSync'
 import ThreePaneLayout from './ThreePaneLayout'
+import Explore from './Explore'
+import Me from './Me'
 import { classifyHighlights } from '../utils/highlightClassification'
 
 export type ViewMode = 'compact' | 'cards' | 'large'
@@ -33,13 +35,15 @@ const Bookmarks: React.FC<BookmarksProps> = ({ relayPool, onLogout }) => {
     : undefined
   
   const showSettings = location.pathname === '/settings'
+  const showExplore = location.pathname === '/explore'
+  const showMe = location.pathname === '/me'
   
-  // Track previous location for going back from settings
+  // Track previous location for going back from settings/me/explore
   useEffect(() => {
-    if (!showSettings) {
+    if (!showSettings && !showMe && !showExplore) {
       previousLocationRef.current = location.pathname
     }
-  }, [location.pathname, showSettings])
+  }, [location.pathname, showSettings, showMe, showExplore])
     
   const activeAccount = Hooks.useActiveAccount()
   const accountManager = Hooks.useAccountManager()
@@ -65,6 +69,9 @@ const Bookmarks: React.FC<BookmarksProps> = ({ relayPool, onLogout }) => {
   })
 
   const {
+    isMobile,
+    isSidebarOpen,
+    toggleSidebar,
     isCollapsed,
     setIsCollapsed,
     isHighlightsCollapsed,
@@ -85,6 +92,14 @@ const Bookmarks: React.FC<BookmarksProps> = ({ relayPool, onLogout }) => {
     setHighlightVisibility
   } = useBookmarksUI({ settings })
 
+  // Close sidebar on mobile when route changes (e.g., clicking on blog posts in Explore)
+  useEffect(() => {
+    if (isMobile && isSidebarOpen) {
+      toggleSidebar()
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [location.pathname])
+
   const {
     bookmarks,
     bookmarksLoading,
@@ -114,7 +129,7 @@ const Bookmarks: React.FC<BookmarksProps> = ({ relayPool, onLogout }) => {
     setReaderLoading,
     readerContent,
     setReaderContent,
-    handleSelectUrl
+    handleSelectUrl: baseHandleSelectUrl
   } = useContentSelection({
     relayPool,
     settings,
@@ -123,6 +138,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,
@@ -178,18 +201,25 @@ const Bookmarks: React.FC<BookmarksProps> = ({ relayPool, onLogout }) => {
     <ThreePaneLayout
       isCollapsed={isCollapsed}
       isHighlightsCollapsed={isHighlightsCollapsed}
+      isSidebarOpen={isSidebarOpen}
       showSettings={showSettings}
+      showExplore={showExplore}
+      showMe={showMe}
       bookmarks={bookmarks}
       bookmarksLoading={bookmarksLoading}
       viewMode={viewMode}
       isRefreshing={isRefreshing}
       lastFetchTime={lastFetchTime}
-      onToggleSidebar={() => setIsCollapsed(!isCollapsed)}
+      onToggleSidebar={isMobile ? toggleSidebar : () => setIsCollapsed(!isCollapsed)}
       onLogout={onLogout}
       onViewModeChange={setViewMode}
       onOpenSettings={() => {
         navigate('/settings')
-        setIsCollapsed(true)
+        if (isMobile) {
+          toggleSidebar()
+        } else {
+          setIsCollapsed(true)
+        }
         setIsHighlightsCollapsed(true)
       }}
       onRefresh={handleRefreshAll}
@@ -217,6 +247,8 @@ const Bookmarks: React.FC<BookmarksProps> = ({ relayPool, onLogout }) => {
       onClearSelection={handleClearSelection}
       currentUserPubkey={activeAccount?.pubkey}
       followedPubkeys={followedPubkeys}
+      activeAccount={activeAccount}
+      currentArticle={currentArticle}
       highlights={highlights}
       highlightsLoading={highlightsLoading}
       onToggleHighlightsPanel={() => setIsHighlightsCollapsed(!isHighlightsCollapsed)}
@@ -227,6 +259,12 @@ const Bookmarks: React.FC<BookmarksProps> = ({ relayPool, onLogout }) => {
       highlightButtonRef={highlightButtonRef}
       onCreateHighlight={handleCreateHighlight}
       hasActiveAccount={!!(activeAccount && relayPool)}
+      explore={showExplore ? (
+        relayPool ? <Explore relayPool={relayPool} /> : null
+      ) : undefined}
+      me={showMe ? (
+        relayPool ? <Me relayPool={relayPool} /> : null
+      ) : undefined}
       toastMessage={toastMessage ?? undefined}
       toastType={toastType}
       onClearToast={clearToast}

src/components/ConfirmDialog.tsx

@@ -0,0 +1,56 @@
+import React from 'react'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faExclamationTriangle } from '@fortawesome/free-solid-svg-icons'
+
+interface ConfirmDialogProps {
+  isOpen: boolean
+  title: string
+  message: string
+  confirmText?: string
+  cancelText?: string
+  onConfirm: () => void
+  onCancel: () => void
+  variant?: 'danger' | 'warning' | 'info'
+}
+
+const ConfirmDialog: React.FC<ConfirmDialogProps> = ({
+  isOpen,
+  title,
+  message,
+  confirmText = 'Confirm',
+  cancelText = 'Cancel',
+  onConfirm,
+  onCancel,
+  variant = 'warning'
+}) => {
+  if (!isOpen) return null
+
+  return (
+    <div className="confirm-dialog-overlay" onClick={onCancel}>
+      <div className="confirm-dialog" onClick={(e) => e.stopPropagation()}>
+        <div className={`confirm-dialog-icon ${variant}`}>
+          <FontAwesomeIcon icon={faExclamationTriangle} />
+        </div>
+        <h3 className="confirm-dialog-title">{title}</h3>
+        <p className="confirm-dialog-message">{message}</p>
+        <div className="confirm-dialog-actions">
+          <button
+            className="confirm-dialog-btn cancel"
+            onClick={onCancel}
+          >
+            {cancelText}
+          </button>
+          <button
+            className={`confirm-dialog-btn confirm ${variant}`}
+            onClick={onConfirm}
+          >
+            {confirmText}
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default ConfirmDialog
+

src/components/ContentPanel.tsx

@@ -1,8 +1,11 @@
-import React, { useMemo } from 'react'
+import React, { useMemo, useState } from 'react'
 import ReactMarkdown from 'react-markdown'
 import remarkGfm from 'remark-gfm'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faSpinner } from '@fortawesome/free-solid-svg-icons'
+import { faSpinner, faBook } from '@fortawesome/free-solid-svg-icons'
+import { RelayPool } from 'applesauce-relay'
+import { IAccount } from 'applesauce-accounts'
+import { NostrEvent } from 'nostr-tools'
 import { Highlight } from '../types/highlights'
 import { readingTime } from 'reading-time-estimator'
 import { hexToRgb } from '../utils/colorHelpers'
@@ -12,6 +15,8 @@ import { useMarkdownToHTML } from '../hooks/useMarkdownToHTML'
 import { useHighlightedContent } from '../hooks/useHighlightedContent'
 import { useHighlightInteractions } from '../hooks/useHighlightInteractions'
 import { UserSettings } from '../services/settingsService'
+import { createEventReaction, createWebsiteReaction } from '../services/reactionService'
+import AuthorCard from './AuthorCard'
 
 interface ContentPanelProps {
   loading: boolean
@@ -32,6 +37,9 @@ interface ContentPanelProps {
   currentUserPubkey?: string
   followedPubkeys?: Set<string>
   settings?: UserSettings
+  relayPool?: RelayPool | null
+  activeAccount?: IAccount | null
+  currentArticle?: NostrEvent | null
   // For highlight creation
   onTextSelection?: (text: string) => void
   onClearSelection?: () => void
@@ -51,6 +59,9 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
   highlightStyle = 'marker',
   highlightColor = '#ffff00',
   settings,
+  relayPool,
+  activeAccount,
+  currentArticle,
   onHighlightClick,
   selectedHighlightId,
   highlightVisibility = { nostrverse: true, friends: true, mine: true },
@@ -59,7 +70,8 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
   onTextSelection,
   onClearSelection
 }) => {
-  const { renderedHtml: renderedMarkdownHtml, previewRef: markdownPreviewRef } = useMarkdownToHTML(markdown)
+  const [isMarkingAsRead, setIsMarkingAsRead] = useState(false)
+  const { renderedHtml: renderedMarkdownHtml, previewRef: markdownPreviewRef, processedMarkdown } = useMarkdownToHTML(markdown, relayPool)
   
   const { finalHtml, relevantHighlights } = useHighlightedContent({
     html,
@@ -74,7 +86,7 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
     followedPubkeys
   })
 
-  const { contentRef, handleMouseUp } = useHighlightInteractions({
+  const { contentRef, handleSelectionEnd } = useHighlightInteractions({
     onHighlightClick,
     selectedHighlightId,
     onTextSelection,
@@ -90,6 +102,44 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
 
   const hasHighlights = relevantHighlights.length > 0
 
+  // Determine if we're on a nostr-native article (/a/) or external URL (/r/)
+  const isNostrArticle = selectedUrl && selectedUrl.startsWith('nostr:')
+  
+  const handleMarkAsRead = async () => {
+    if (!activeAccount || !relayPool) {
+      console.warn('Cannot mark as read: no account or relay pool')
+      return
+    }
+
+    setIsMarkingAsRead(true)
+
+    try {
+      if (isNostrArticle && currentArticle) {
+        // Kind 7 reaction for nostr-native articles
+        await createEventReaction(
+          currentArticle.id,
+          currentArticle.pubkey,
+          currentArticle.kind,
+          activeAccount,
+          relayPool
+        )
+        console.log('✅ Marked nostr article as read')
+      } else if (selectedUrl) {
+        // Kind 17 reaction for external websites
+        await createWebsiteReaction(
+          selectedUrl,
+          activeAccount,
+          relayPool
+        )
+        console.log('✅ Marked website as read')
+      }
+    } catch (error) {
+      console.error('Failed to mark as read:', error)
+    } finally {
+      setIsMarkingAsRead(false)
+    }
+  }
+
   if (!selectedUrl) {
     return (
       <div className="reader empty">
@@ -116,7 +166,7 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
       {markdown && (
         <div ref={markdownPreviewRef} style={{ display: 'none' }}>
           <ReactMarkdown remarkPlugins={[remarkGfm]}>
-            {markdown}
+            {processedMarkdown || markdown}
           </ReactMarkdown>
         </div>
       )}
@@ -130,31 +180,59 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
         hasHighlights={hasHighlights}
         highlightCount={relevantHighlights.length}
         settings={settings}
+        highlights={relevantHighlights}
+        highlightVisibility={highlightVisibility}
       />
       {markdown || html ? (
-        markdown ? (
-          renderedMarkdownHtml && finalHtml ? (
+        <>
+          {markdown ? (
+            renderedMarkdownHtml && finalHtml ? (
+              <div 
+                ref={contentRef} 
+                className="reader-markdown" 
+                dangerouslySetInnerHTML={{ __html: finalHtml }}
+                onMouseUp={handleSelectionEnd}
+                onTouchEnd={handleSelectionEnd}
+              />
+            ) : (
+              <div className="reader-markdown">
+                <div className="loading-spinner">
+                  <FontAwesomeIcon icon={faSpinner} spin size="sm" />
+                </div>
+              </div>
+            )
+          ) : (
             <div 
               ref={contentRef} 
-              className="reader-markdown" 
-              dangerouslySetInnerHTML={{ __html: finalHtml }}
-              onMouseUp={handleMouseUp}
+              className="reader-html" 
+              dangerouslySetInnerHTML={{ __html: finalHtml || html || '' }}
+              onMouseUp={handleSelectionEnd}
+              onTouchEnd={handleSelectionEnd}
             />
-          ) : (
-            <div className="reader-markdown">
-              <div className="loading-spinner">
-                <FontAwesomeIcon icon={faSpinner} spin size="sm" />
-              </div>
+          )}
+          
+          {/* Mark as Read button */}
+          {activeAccount && (
+            <div className="mark-as-read-container">
+              <button
+                className="mark-as-read-btn"
+                onClick={handleMarkAsRead}
+                disabled={isMarkingAsRead}
+                title="Mark as Read"
+              >
+                <FontAwesomeIcon icon={isMarkingAsRead ? faSpinner : faBook} spin={isMarkingAsRead} />
+                <span>{isMarkingAsRead ? 'Marking...' : 'Mark as Read'}</span>
+              </button>
             </div>
-          )
-        ) : (
-          <div 
-            ref={contentRef} 
-            className="reader-html" 
-            dangerouslySetInnerHTML={{ __html: finalHtml || html || '' }}
-            onMouseUp={handleMouseUp}
-          />
-        )
+          )}
+          
+          {/* Author info card for nostr-native articles */}
+          {isNostrArticle && currentArticle && (
+            <div className="author-card-container">
+              <AuthorCard authorPubkey={currentArticle.pubkey} />
+            </div>
+          )}
+        </>
       ) : (
         <div className="reader empty">
           <p>No readable content found for this URL.</p>

src/components/Explore.tsx

@@ -1,12 +1,13 @@
 import React, { useState, useEffect } from 'react'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faSpinner, faExclamationCircle, faCompass } from '@fortawesome/free-solid-svg-icons'
+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'
+import { getCachedPosts, upsertCachedPost, setCachedPosts } from '../services/exploreCache'
 
 interface ExploreProps {
   relayPool: RelayPool
@@ -27,11 +28,59 @@ const Explore: React.FC<ExploreProps> = ({ relayPool }) => {
       }
 
       try {
+        // show spinner but keep existing posts
         setLoading(true)
         setError(null)
 
+        // Seed from in-memory cache if available to avoid empty flash
+        const cached = getCachedPosts(activeAccount.pubkey)
+        if (cached && cached.length > 0 && blogPosts.length === 0) {
+          setBlogPosts(cached)
+        }
+
         // Fetch the user's contacts (friends)
-        const contacts = await fetchContacts(relayPool, activeAccount.pubkey)
+        const contacts = await fetchContacts(
+          relayPool,
+          activeAccount.pubkey,
+          (partial) => {
+            // When local contacts are available, kick off early posts fetch
+            if (partial.size > 0) {
+              const relayUrls = Array.from(relayPool.relays.values()).map(relay => relay.url)
+              fetchBlogPostsFromAuthors(
+                relayPool,
+                Array.from(partial),
+                relayUrls,
+                (post) => {
+                  // merge into UI and cache as we stream
+                  setBlogPosts((prev) => {
+                    const exists = prev.some(p => p.event.id === post.event.id)
+                    if (exists) return prev
+                    const next = [...prev, post]
+                    return next.sort((a, b) => {
+                      const timeA = a.published || a.event.created_at
+                      const timeB = b.published || b.event.created_at
+                      return timeB - timeA
+                    })
+                  })
+                  setCachedPosts(activeAccount.pubkey, upsertCachedPost(activeAccount.pubkey, post))
+                }
+              ).then((all) => {
+                // Ensure union of streamed + final is displayed
+                setBlogPosts((prev) => {
+                  const byId = new Map(prev.map(p => [p.event.id, p]))
+                  for (const post of all) byId.set(post.event.id, post)
+                  const merged = Array.from(byId.values()).sort((a, b) => {
+                    const timeA = a.published || a.event.created_at
+                    const timeB = b.published || b.event.created_at
+                    return timeB - timeA
+                  })
+                  setCachedPosts(activeAccount.pubkey, merged)
+                  return merged
+                })
+              })
+            }
+          }
+        )
         
         if (contacts.size === 0) {
           setError('You are not following anyone yet. Follow some people to see their blog posts!')
@@ -39,21 +88,25 @@ const Explore: React.FC<ExploreProps> = ({ relayPool }) => {
           return
         }
 
-        // Get relay URLs from pool
+        // After full contacts, do a final pass for completeness
         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
-        )
+        const posts = await fetchBlogPostsFromAuthors(relayPool, Array.from(contacts), relayUrls)
 
         if (posts.length === 0) {
           setError('No blog posts found from your friends yet')
         }
 
-        setBlogPosts(posts)
+        setBlogPosts((prev) => {
+          const byId = new Map(prev.map(p => [p.event.id, p]))
+          for (const post of posts) byId.set(post.event.id, post)
+          const merged = Array.from(byId.values()).sort((a, b) => {
+            const timeA = a.published || a.event.created_at
+            const timeB = b.published || b.event.created_at
+            return timeB - timeA
+          })
+          setCachedPosts(activeAccount.pubkey, merged)
+          return merged
+        })
       } catch (err) {
         console.error('Failed to load blog posts:', err)
         setError('Failed to load blog posts. Please try again.')
@@ -63,7 +116,7 @@ const Explore: React.FC<ExploreProps> = ({ relayPool }) => {
     }
 
     loadBlogPosts()
-  }, [relayPool, activeAccount])
+  }, [relayPool, activeAccount, blogPosts.length])
 
   const getPostUrl = (post: BlogPostPreview) => {
     // Get the d-tag identifier
@@ -79,17 +132,6 @@ const Explore: React.FC<ExploreProps> = ({ relayPool }) => {
     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">
@@ -105,13 +147,18 @@ const Explore: React.FC<ExploreProps> = ({ relayPool }) => {
     <div className="explore-container">
       <div className="explore-header">
         <h1>
-          <FontAwesomeIcon icon={faCompass} />
+          <FontAwesomeIcon icon={faNewspaper} />
           Explore
         </h1>
         <p className="explore-subtitle">
           Discover blog posts from your friends on Nostr
         </p>
       </div>
+      {loading && (
+        <div className="explore-loading" style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', padding: '0.5rem 0' }}>
+          <FontAwesomeIcon icon={faSpinner} spin />
+        </div>
+      )}
       <div className="explore-grid">
         {blogPosts.map((post) => (
           <BlogPostCard
@@ -120,6 +167,11 @@ const Explore: React.FC<ExploreProps> = ({ relayPool }) => {
             href={getPostUrl(post)}
           />
         ))}
+        {!loading && blogPosts.length === 0 && (
+          <div className="explore-empty" style={{ gridColumn: '1/-1', textAlign: 'center', color: 'var(--text-secondary)' }}>
+            <p>No blog posts found yet.</p>
+          </div>
+        )}
       </div>
     </div>
   )

src/components/HighlightItem.tsx

@@ -1,14 +1,19 @@
 import React, { useEffect, useRef, useState } from 'react'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faQuoteLeft, faExternalLinkAlt, faPlane, faSpinner, faServer } from '@fortawesome/free-solid-svg-icons'
+import { faQuoteLeft, faExternalLinkAlt, faPlane, faSpinner, faServer, faTrash, faEllipsisH } from '@fortawesome/free-solid-svg-icons'
 import { Highlight } from '../types/highlights'
-import { formatDistanceToNow } from 'date-fns'
 import { useEventModel } from 'applesauce-react/hooks'
 import { Models, IEventStore } from 'applesauce-core'
 import { RelayPool } from 'applesauce-relay'
+import { Hooks } from 'applesauce-react'
 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'
+import { createDeletionRequest } from '../services/deletionService'
+import ConfirmDialog from './ConfirmDialog'
+import { getNostrUrl } from '../config/nostrGateways'
 
 interface HighlightWithLevel extends Highlight {
   level?: 'mine' | 'friends' | 'nostrverse'
@@ -22,21 +27,29 @@ interface HighlightItemProps {
   relayPool?: RelayPool | null
   eventStore?: IEventStore | null
   onHighlightUpdate?: (highlight: Highlight) => void
+  onHighlightDelete?: (highlightId: string) => void
 }
 
 export const HighlightItem: React.FC<HighlightItemProps> = ({ 
   highlight, 
-  onSelectUrl, 
+  // onSelectUrl is not used but kept in props for API compatibility
   isSelected, 
   onHighlightClick,
   relayPool,
   eventStore,
-  onHighlightUpdate
+  onHighlightUpdate,
+  onHighlightDelete
 }) => {
   const itemRef = useRef<HTMLDivElement>(null)
+  const menuRef = useRef<HTMLDivElement>(null)
   const [isSyncing, setIsSyncing] = useState(() => isEventSyncing(highlight.id))
   const [showOfflineIndicator, setShowOfflineIndicator] = useState(() => highlight.isOfflineCreated && !isSyncing)
   const [isRebroadcasting, setIsRebroadcasting] = useState(false)
+  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false)
+  const [isDeleting, setIsDeleting] = useState(false)
+  const [showMenu, setShowMenu] = useState(false)
+  
+  const activeAccount = Hooks.useActiveAccount()
   
   // Resolve the profile of the user who made the highlight
   const profile = useEventModel(Models.ProfileModel, [highlight.pubkey])
@@ -87,27 +100,45 @@ export const HighlightItem: React.FC<HighlightItemProps> = ({
     }
   }, [isSelected])
   
+  // Close menu when clicking outside
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (menuRef.current && !menuRef.current.contains(event.target as Node)) {
+        setShowMenu(false)
+      }
+    }
+    
+    if (showMenu) {
+      document.addEventListener('mousedown', handleClickOutside)
+      return () => {
+        document.removeEventListener('mousedown', handleClickOutside)
+      }
+    }
+  }, [showMenu])
+  
   const handleItemClick = () => {
     if (onHighlightClick) {
       onHighlightClick(highlight.id)
     }
   }
   
-  const handleLinkClick = (url: string, e: React.MouseEvent) => {
-    if (onSelectUrl) {
-      e.preventDefault()
-      onSelectUrl(url)
-    }
+  const getHighlightLink = () => {
+    // Encode the highlight event itself (kind 9802) as a 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.id,
+      relays: relayHints,
+      author: highlight.pubkey,
+      kind: 9802
+    })
+    return getNostrUrl(nevent)
   }
   
-  const getSourceLink = () => {
-    if (highlight.eventReference) {
-      return `https://search.dergigi.com/e/${highlight.eventReference}`
-    }
-    return highlight.urlReference
-  }
-  
-  const sourceLink = getSourceLink()
+  const highlightLink = getHighlightLink()
   
   // Handle rebroadcast to all relays
   const handleRebroadcast = async (e: React.MouseEvent) => {
@@ -208,7 +239,63 @@ export const HighlightItem: React.FC<HighlightItemProps> = ({
   
   const relayIndicator = getRelayIndicatorInfo()
   
+  // Check if current user can delete this highlight
+  const canDelete = activeAccount && highlight.pubkey === activeAccount.pubkey
+  
+  const handleConfirmDelete = async () => {
+    if (!activeAccount || !relayPool) {
+      console.warn('Cannot delete: no account or relay pool')
+      return
+    }
+    
+    setIsDeleting(true)
+    setShowDeleteConfirm(false)
+    
+    try {
+      await createDeletionRequest(
+        highlight.id,
+        9802, // kind for highlights
+        'Deleted by user',
+        activeAccount,
+        relayPool
+      )
+      
+      console.log('✅ Highlight deletion request published')
+      
+      // Notify parent to remove this highlight from the list
+      if (onHighlightDelete) {
+        onHighlightDelete(highlight.id)
+      }
+    } catch (error) {
+      console.error('Failed to delete highlight:', error)
+    } finally {
+      setIsDeleting(false)
+    }
+  }
+  
+  const handleCancelDelete = () => {
+    setShowDeleteConfirm(false)
+  }
+  
+  const handleMenuToggle = (e: React.MouseEvent) => {
+    e.stopPropagation()
+    setShowMenu(!showMenu)
+  }
+  
+  const handleOpenExternal = (e: React.MouseEvent) => {
+    e.stopPropagation()
+    window.open(highlightLink, '_blank', 'noopener,noreferrer')
+    setShowMenu(false)
+  }
+  
+  const handleMenuDeleteClick = (e: React.MouseEvent) => {
+    e.stopPropagation()
+    setShowMenu(false)
+    setShowDeleteConfirm(true)
+  }
+  
   return (
+    <>
     <div 
       ref={itemRef} 
       className={`highlight-item ${isSelected ? 'selected' : ''} ${highlight.level ? `level-${highlight.level}` : ''}`} 
@@ -248,24 +335,55 @@ export const HighlightItem: React.FC<HighlightItemProps> = ({
           </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 && (
-            <a
-              href={sourceLink}
-              target="_blank"
-              rel="noopener noreferrer"
-              onClick={(e) => highlight.urlReference && onSelectUrl ? handleLinkClick(highlight.urlReference, e) : undefined}
-              className="highlight-source"
-              title={highlight.eventReference ? 'Open on Nostr' : 'Open source'}
+          <div className="highlight-menu-wrapper" ref={menuRef}>
+            <button
+              className="highlight-menu-btn"
+              onClick={handleMenuToggle}
+              title="More options"
             >
-              <FontAwesomeIcon icon={faExternalLinkAlt} />
-            </a>
-          )}
+              <FontAwesomeIcon icon={faEllipsisH} />
+            </button>
+            
+            {showMenu && (
+              <div className="highlight-menu">
+                <button
+                  className="highlight-menu-item"
+                  onClick={handleOpenExternal}
+                >
+                  <FontAwesomeIcon icon={faExternalLinkAlt} />
+                  <span>Open on Nostr</span>
+                </button>
+                {canDelete && (
+                  <button
+                    className="highlight-menu-item highlight-menu-item-danger"
+                    onClick={handleMenuDeleteClick}
+                    disabled={isDeleting}
+                  >
+                    <FontAwesomeIcon icon={isDeleting ? faSpinner : faTrash} spin={isDeleting} />
+                    <span>Delete</span>
+                  </button>
+                )}
+              </div>
+            )}
+          </div>
         </div>
       </div>
     </div>
+    
+    <ConfirmDialog
+      isOpen={showDeleteConfirm}
+      title="Delete Highlight?"
+      message="This will request deletion of your highlight. It may still be visible on some relays that don't honor deletion requests."
+      confirmText="Delete"
+      cancelText="Cancel"
+      variant="danger"
+      onConfirm={handleConfirmDelete}
+      onCancel={handleCancelDelete}
+    />
+    </>
   )
 }
 

src/components/HighlightsPanel.tsx

@@ -8,6 +8,7 @@ import HighlightsPanelCollapsed from './HighlightsPanel/HighlightsPanelCollapsed
 import HighlightsPanelHeader from './HighlightsPanel/HighlightsPanelHeader'
 import { RelayPool } from 'applesauce-relay'
 import { IEventStore } from 'applesauce-core'
+import { UserSettings } from '../services/settingsService'
 
 export interface HighlightVisibility {
   nostrverse: boolean
@@ -32,6 +33,7 @@ interface HighlightsPanelProps {
   followedPubkeys?: Set<string>
   relayPool?: RelayPool | null
   eventStore?: IEventStore | null
+  settings?: UserSettings
 }
 
 export const HighlightsPanel: React.FC<HighlightsPanelProps> = ({
@@ -50,7 +52,8 @@ export const HighlightsPanel: React.FC<HighlightsPanelProps> = ({
   onHighlightVisibilityChange,
   followedPubkeys = new Set(),
   relayPool,
-  eventStore
+  eventStore,
+  settings
 }) => {
   const [showHighlights, setShowHighlights] = useState(true)
   const [localHighlights, setLocalHighlights] = useState(highlights)
@@ -72,6 +75,11 @@ export const HighlightsPanel: React.FC<HighlightsPanelProps> = ({
     )
   }
   
+  const handleHighlightDelete = (highlightId: string) => {
+    // Remove highlight from local state
+    setLocalHighlights(prev => prev.filter(h => h.id !== highlightId))
+  }
+  
   const filteredHighlights = useFilteredHighlights({
     highlights: localHighlights,
     selectedUrl,
@@ -85,6 +93,7 @@ export const HighlightsPanel: React.FC<HighlightsPanelProps> = ({
       <HighlightsPanelCollapsed 
         hasHighlights={filteredHighlights.length > 0} 
         onToggleCollapse={onToggleCollapse}
+        settings={settings}
       />
     )
   }
@@ -129,6 +138,7 @@ export const HighlightsPanel: React.FC<HighlightsPanelProps> = ({
               relayPool={relayPool}
               eventStore={eventStore}
               onHighlightUpdate={handleHighlightUpdate}
+              onHighlightDelete={handleHighlightDelete}
             />
           ))}
         </div>

src/components/HighlightsPanel/HighlightsPanelCollapsed.tsx

@@ -1,16 +1,21 @@
 import React from 'react'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faHighlighter, faChevronRight } from '@fortawesome/free-solid-svg-icons'
+import { UserSettings } from '../../services/settingsService'
 
 interface HighlightsPanelCollapsedProps {
   hasHighlights: boolean
   onToggleCollapse: () => void
+  settings?: UserSettings
 }
 
 const HighlightsPanelCollapsed: React.FC<HighlightsPanelCollapsedProps> = ({
   hasHighlights,
-  onToggleCollapse
+  onToggleCollapse,
+  settings
 }) => {
+  const highlightColor = settings?.highlightColorMine || '#ffff00'
+  
   return (
     <div className="highlights-container collapsed">
       <button
@@ -19,8 +24,12 @@ const HighlightsPanelCollapsed: React.FC<HighlightsPanelCollapsedProps> = ({
         title="Expand highlights panel"
         aria-label="Expand highlights panel"
       >
-        <FontAwesomeIcon icon={faHighlighter} className={hasHighlights ? 'glow' : ''} />
-        <FontAwesomeIcon icon={faChevronRight} />
+        <FontAwesomeIcon 
+          icon={faHighlighter} 
+          className={hasHighlights ? 'glow' : ''} 
+          style={{ color: highlightColor }}
+        />
+        <FontAwesomeIcon icon={faChevronRight} style={{ color: highlightColor }} />
       </button>
     </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/Me.tsx

@@ -0,0 +1,118 @@
+import React, { useState, useEffect } from 'react'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faSpinner, faExclamationCircle, faUser, faHighlighter } from '@fortawesome/free-solid-svg-icons'
+import { Hooks } from 'applesauce-react'
+import { RelayPool } from 'applesauce-relay'
+import { useEventModel } from 'applesauce-react/hooks'
+import { Models } from 'applesauce-core'
+import { Highlight } from '../types/highlights'
+import { HighlightItem } from './HighlightItem'
+import { fetchHighlights } from '../services/highlightService'
+
+interface MeProps {
+  relayPool: RelayPool
+}
+
+const Me: React.FC<MeProps> = ({ relayPool }) => {
+  const activeAccount = Hooks.useActiveAccount()
+  const [highlights, setHighlights] = useState<Highlight[]>([])
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+
+  const profile = useEventModel(Models.ProfileModel, activeAccount ? [activeAccount.pubkey] : null)
+
+  const getUserDisplayName = () => {
+    if (!activeAccount) return 'Unknown User'
+    if (profile?.name) return profile.name
+    if (profile?.display_name) return profile.display_name
+    if (profile?.nip05) return profile.nip05
+    return `${activeAccount.pubkey.slice(0, 8)}...${activeAccount.pubkey.slice(-8)}`
+  }
+
+  useEffect(() => {
+    const loadHighlights = async () => {
+      if (!activeAccount) {
+        setError('Please log in to view your highlights')
+        setLoading(false)
+        return
+      }
+
+      try {
+        setLoading(true)
+        setError(null)
+
+        // Fetch highlights created by the user
+        const userHighlights = await fetchHighlights(
+          relayPool,
+          activeAccount.pubkey
+        )
+
+        if (userHighlights.length === 0) {
+          setError('No highlights yet. Start highlighting content to see them here!')
+        }
+
+        setHighlights(userHighlights)
+      } catch (err) {
+        console.error('Failed to load highlights:', err)
+        setError('Failed to load highlights. Please try again.')
+      } finally {
+        setLoading(false)
+      }
+    }
+
+    loadHighlights()
+  }, [relayPool, activeAccount])
+
+  const handleHighlightDelete = (highlightId: string) => {
+    // Remove highlight from local state
+    setHighlights(prev => prev.filter(h => h.id !== highlightId))
+  }
+
+  if (loading) {
+    return (
+      <div className="explore-container">
+        <div className="explore-loading">
+          <FontAwesomeIcon icon={faSpinner} spin size="2x" />
+        </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={faUser} />
+          {getUserDisplayName()}
+        </h1>
+        <p className="explore-subtitle">
+          <FontAwesomeIcon icon={faHighlighter} /> {highlights.length} highlight{highlights.length !== 1 ? 's' : ''}
+        </p>
+      </div>
+      <div className="highlights-list me-highlights-list">
+        {highlights.map((highlight) => (
+          <HighlightItem
+            key={highlight.id}
+            highlight={{ ...highlight, level: 'mine' }}
+            relayPool={relayPool}
+            onHighlightDelete={handleHighlightDelete}
+          />
+        ))}
+      </div>
+    </div>
+  )
+}
+
+export default Me
+

src/components/ReaderHeader.tsx

@@ -1,9 +1,12 @@
-import React from 'react'
+import React, { useMemo } from 'react'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faHighlighter, faClock } from '@fortawesome/free-solid-svg-icons'
 import { format } from 'date-fns'
 import { useImageCache } from '../hooks/useImageCache'
 import { UserSettings } from '../services/settingsService'
+import { Highlight, HighlightLevel } from '../types/highlights'
+import { HighlightVisibility } from './HighlightsPanel'
+import { hexToRgb } from '../utils/colorHelpers'
 
 interface ReaderHeaderProps {
   title?: string
@@ -14,6 +17,8 @@ interface ReaderHeaderProps {
   hasHighlights: boolean
   highlightCount: number
   settings?: UserSettings
+  highlights?: Highlight[]
+  highlightVisibility?: HighlightVisibility
 }
 
 const ReaderHeader: React.FC<ReaderHeaderProps> = ({
@@ -24,40 +29,86 @@ const ReaderHeader: React.FC<ReaderHeaderProps> = ({
   readingTimeText,
   hasHighlights,
   highlightCount,
-  settings
+  settings,
+  highlights = [],
+  highlightVisibility = { nostrverse: true, friends: true, mine: true }
 }) => {
   const cachedImage = useImageCache(image, settings)
   const formattedDate = published ? format(new Date(published * 1000), 'MMM d, yyyy') : null
+  const isLongSummary = summary && summary.length > 150
+  
+  // Determine the dominant highlight color based on visibility and priority
+  const highlightIndicatorStyles = useMemo(() => {
+    if (!highlights.length) return undefined
+    
+    // Count highlights by level that are visible
+    const visibleLevels = new Set<HighlightLevel>()
+    highlights.forEach(h => {
+      if (h.level && highlightVisibility[h.level]) {
+        visibleLevels.add(h.level)
+      }
+    })
+    
+    let hexColor: string | undefined
+    // Priority: nostrverse > friends > mine
+    if (visibleLevels.has('nostrverse') && highlightVisibility.nostrverse) {
+      hexColor = settings?.highlightColorNostrverse || '#9333ea'
+    } else if (visibleLevels.has('friends') && highlightVisibility.friends) {
+      hexColor = settings?.highlightColorFriends || '#f97316'
+    } else if (visibleLevels.has('mine') && highlightVisibility.mine) {
+      hexColor = settings?.highlightColorMine || '#ffff00'
+    }
+    
+    if (!hexColor) return undefined
+    
+    const rgb = hexToRgb(hexColor)
+    return {
+      backgroundColor: `rgba(${rgb}, 0.1)`,
+      borderColor: `rgba(${rgb}, 0.3)`,
+      color: '#fff'
+    }
+  }, [highlights, highlightVisibility, settings])
+  
   if (cachedImage) {
     return (
-      <div className="reader-hero-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">
-              {readingTimeText && (
-                <div className="reading-time">
-                  <FontAwesomeIcon icon={faClock} />
-                  <span>{readingTimeText}</span>
-                </div>
-              )}
-              {hasHighlights && (
-                <div className="highlight-indicator">
-                  <FontAwesomeIcon icon={faHighlighter} />
-                  <span>{highlightCount} highlight{highlightCount !== 1 ? 's' : ''}</span>
-                </div>
-              )}
+      <>
+        <div className="reader-hero-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 ${isLongSummary ? 'hide-on-mobile' : ''}`}>{summary}</p>}
+              <div className="reader-meta">
+                {readingTimeText && (
+                  <div className="reading-time">
+                    <FontAwesomeIcon icon={faClock} />
+                    <span>{readingTimeText}</span>
+                  </div>
+                )}
+                {hasHighlights && (
+                  <div 
+                    className="highlight-indicator"
+                    style={highlightIndicatorStyles}
+                  >
+                    <FontAwesomeIcon icon={faHighlighter} />
+                    <span>{highlightCount} highlight{highlightCount !== 1 ? 's' : ''}</span>
+                  </div>
+                )}
+              </div>
+            </div>
+          )}
+        </div>
+        {isLongSummary && (
+          <div className="reader-summary-below-image">
+            <p className="reader-summary">{summary}</p>
           </div>
         )}
-      </div>
+      </>
     )
   }
 
@@ -80,7 +131,10 @@ const ReaderHeader: React.FC<ReaderHeaderProps> = ({
               </div>
             )}
             {hasHighlights && (
-              <div className="highlight-indicator">
+              <div 
+                className="highlight-indicator"
+                style={highlightIndicatorStyles}
+              >
                 <FontAwesomeIcon icon={faHighlighter} />
                 <span>{highlightCount} highlight{highlightCount !== 1 ? 's' : ''}</span>
               </div>

src/components/RelayStatusIndicator.tsx

@@ -4,6 +4,7 @@ import { faPlane, faGlobe, faCircle, faSpinner } from '@fortawesome/free-solid-s
 import { RelayPool } from 'applesauce-relay'
 import { useRelayStatus } from '../hooks/useRelayStatus'
 import { isLocalRelay } from '../utils/helpers'
+import { useIsMobile } from '../hooks/useMediaQuery'
 
 interface RelayStatusIndicatorProps {
   relayPool: RelayPool | null
@@ -13,7 +14,8 @@ export const RelayStatusIndicator: React.FC<RelayStatusIndicatorProps> = ({ rela
   // Poll frequently for responsive offline indicator (5s instead of default 20s)
   const relayStatuses = useRelayStatus({ relayPool, pollingInterval: 5000 })
   const [isConnecting, setIsConnecting] = useState(true)
-  const [connectingStartTime] = useState(Date.now())
+  const [isExpanded, setIsExpanded] = useState(false)
+  const isMobile = useIsMobile()
   
   if (!relayPool) return null
   
@@ -27,27 +29,20 @@ export const RelayStatusIndicator: React.FC<RelayStatusIndicatorProps> = ({ rela
   const localOnlyMode = hasLocalRelay && !hasRemoteRelay
   const offlineMode = connectedUrls.length === 0
   
-  // Show "Connecting" for minimum duration (15s) to avoid flashing states
+  // Show "Connecting" for first few seconds or until relays connect
   useEffect(() => {
-    const MIN_CONNECTING_DURATION = 15000 // 15 seconds minimum
-    const elapsedTime = Date.now() - connectingStartTime
-    
-    if (connectedUrls.length > 0 && elapsedTime >= MIN_CONNECTING_DURATION) {
-      // Connected and minimum time passed - stop showing connecting state
+    if (connectedUrls.length > 0) {
+      // Connected! Stop showing connecting state
       setIsConnecting(false)
-    } else if (connectedUrls.length > 0) {
-      // Connected but haven't shown connecting long enough
-      const remainingTime = MIN_CONNECTING_DURATION - elapsedTime
+    } else {
+      // No connections yet - show connecting for 8 seconds
+      setIsConnecting(true)
       const timeout = setTimeout(() => {
         setIsConnecting(false)
-      }, remainingTime)
+      }, 8000)
       return () => clearTimeout(timeout)
-    } else if (elapsedTime >= MIN_CONNECTING_DURATION) {
-      // No connections and minimum time passed - show offline
-      setIsConnecting(false)
     }
-    // If no connections and time hasn't passed, keep showing connecting
-  }, [connectedUrls.length, connectingStartTime])
+  }, [connectedUrls.length])
   
   // Debug logging
   useEffect(() => {
@@ -60,41 +55,60 @@ export const RelayStatusIndicator: React.FC<RelayStatusIndicatorProps> = ({ rela
       hasRemoteRelay,
       isConnecting
     })
-  }, [offlineMode, localOnlyMode, connectedUrls.length, relayStatuses.length, hasLocalRelay, hasRemoteRelay, isConnecting])
+  }, [offlineMode, localOnlyMode, connectedUrls, relayStatuses.length, hasLocalRelay, hasRemoteRelay, isConnecting])
   
   // Don't show indicator when fully connected (but show when connecting)
   if (!localOnlyMode && !offlineMode && !isConnecting) return null
   
+  const handleClick = () => {
+    if (isMobile) {
+      setIsExpanded(!isExpanded)
+    }
+  }
+
+  const showDetails = !isMobile || isExpanded
+  
   return (
-    <div className="relay-status-indicator" title={
-      isConnecting
-        ? 'Connecting to relays...'
-        : offlineMode 
-          ? 'Offline - No relays connected'
-          : 'Local Relays Only - Highlights will be marked as local'
-    }>
+    <div 
+      className={`relay-status-indicator ${isConnecting ? 'connecting' : ''} ${isMobile ? 'mobile' : ''} ${isExpanded ? 'expanded' : ''}`}
+      title={
+        !isMobile ? (
+          isConnecting
+            ? 'Connecting to relays...'
+            : offlineMode 
+              ? 'Offline - No relays connected'
+              : 'Local Relays Only - Highlights will be marked as local'
+        ) : undefined
+      }
+      onClick={handleClick}
+      style={{ cursor: isMobile ? 'pointer' : 'default' }}
+    >
       <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>
+      {showDetails && (
+        <>
+          <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/ResolvedMention.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 import { useEventModel } from 'applesauce-react/hooks'
 import { Models, Helpers } from 'applesauce-core'
 import { decode, npubEncode } from 'nostr-tools/nip19'
+import { getProfileUrl } from '../config/nostrGateways'
 
 const { getPubkeyFromDecodeResult } = Helpers
 
@@ -25,7 +26,7 @@ const ResolvedMention: React.FC<ResolvedMentionProps> = ({ encoded }) => {
   if (npub) {
     return (
       <a
-        href={`https://search.dergigi.com/p/${npub}`}
+        href={getProfileUrl(npub)}
         className="nostr-mention"
         target="_blank"
         rel="noopener noreferrer"

src/components/Settings.tsx

@@ -10,6 +10,7 @@ import StartupPreferencesSettings from './Settings/StartupPreferencesSettings'
 import ZapSettings from './Settings/ZapSettings'
 import OfflineModeSettings from './Settings/OfflineModeSettings'
 import RelaySettings from './Settings/RelaySettings'
+import PWASettings from './Settings/PWASettings'
 import { useRelayStatus } from '../hooks/useRelayStatus'
 
 const DEFAULT_SETTINGS: UserSettings = {
@@ -164,6 +165,7 @@ const Settings: React.FC<SettingsProps> = ({ settings, onSave, onClose, relayPoo
         <ZapSettings settings={localSettings} onUpdate={handleUpdate} />
         <OfflineModeSettings settings={localSettings} onUpdate={handleUpdate} onClose={onClose} />
         <RelaySettings relayStatuses={relayStatuses} onClose={onClose} />
+        <PWASettings />
       </div>
     </div>
   )

src/components/Settings/PWASettings.tsx

@@ -0,0 +1,84 @@
+import React from 'react'
+import { faDownload, faCheckCircle, faMobileAlt } from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { usePWAInstall } from '../../hooks/usePWAInstall'
+
+const PWASettings: React.FC = () => {
+  const { isInstallable, isInstalled, installApp } = usePWAInstall()
+
+  const handleInstall = async () => {
+    const success = await installApp()
+    if (success) {
+      console.log('App installed successfully')
+    }
+  }
+
+  if (isInstalled) {
+    return (
+      <div className="settings-section">
+        <h3>Progressive Web App</h3>
+        <div className="setting-item">
+          <div className="setting-info">
+            <FontAwesomeIcon icon={faCheckCircle} style={{ color: '#22c55e', marginRight: '8px' }} />
+            <span>Boris is installed as an app</span>
+          </div>
+          <p className="setting-description">
+            You can launch Boris from your home screen or app drawer.
+          </p>
+        </div>
+      </div>
+    )
+  }
+
+  if (!isInstallable) {
+    return null
+  }
+
+  return (
+    <div className="settings-section">
+      <h3>Progressive Web App</h3>
+      <div className="setting-item">
+        <div className="setting-info">
+          <FontAwesomeIcon icon={faMobileAlt} style={{ marginRight: '8px' }} />
+          <span>Install Boris as an app</span>
+        </div>
+        <p className="setting-description">
+          Install Boris on your device for a native app experience with offline support.
+        </p>
+        <button
+          onClick={handleInstall}
+          className="install-button"
+          style={{
+            marginTop: '12px',
+            padding: '8px 16px',
+            background: 'linear-gradient(135deg, #3b82f6 0%, #1e40af 100%)',
+            color: 'white',
+            border: 'none',
+            borderRadius: '8px',
+            cursor: 'pointer',
+            display: 'flex',
+            alignItems: 'center',
+            gap: '8px',
+            fontSize: '14px',
+            fontWeight: '500',
+            transition: 'transform 0.2s, box-shadow 0.2s',
+          }}
+          onMouseEnter={(e) => {
+            e.currentTarget.style.transform = 'translateY(-2px)'
+            e.currentTarget.style.boxShadow = '0 4px 12px rgba(59, 130, 246, 0.3)'
+          }}
+          onMouseLeave={(e) => {
+            e.currentTarget.style.transform = 'translateY(0)'
+            e.currentTarget.style.boxShadow = 'none'
+          }}
+        >
+          <FontAwesomeIcon icon={faDownload} />
+          Install App
+        </button>
+      </div>
+    </div>
+  )
+}
+
+export default PWASettings
+

src/components/Settings/StartupPreferencesSettings.tsx

@@ -49,6 +49,19 @@ const StartupPreferencesSettings: React.FC<StartupPreferencesSettingsProps> = ({
           <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, faHome, faPlus, faNewspaper } 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'
@@ -17,9 +17,10 @@ interface SidebarHeaderProps {
   onLogout: () => void
   onOpenSettings: () => void
   relayPool: RelayPool | null
+  isMobile?: boolean
 }
 
-const SidebarHeader: React.FC<SidebarHeaderProps> = ({ onToggleCollapse, onLogout, onOpenSettings, 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()
@@ -35,7 +36,7 @@ const SidebarHeader: React.FC<SidebarHeaderProps> = ({ onToggleCollapse, onLogou
       accountManager.setActive(account)
     } catch (error) {
       console.error('Login failed:', error)
-      alert('Login failed. Please install a nostr browser extension and try again.')
+      alert('Login failed. Please install a nostr browser extension and try again.\n\nIf you aren\'t on nostr yet, start here: https://nstart.me/')
     } finally {
       setIsConnecting(false)
     }
@@ -66,20 +67,35 @@ const SidebarHeader: React.FC<SidebarHeaderProps> = ({ onToggleCollapse, onLogou
   return (
     <>
       <div className="sidebar-header-bar">
-        <button 
-          onClick={onToggleCollapse}
-          className="toggle-sidebar-btn"
-          title="Collapse bookmarks sidebar"
-          aria-label="Collapse bookmarks sidebar"
-        >
-          <FontAwesomeIcon icon={faChevronRight} />
-        </button>
+        {isMobile ? (
+          <IconButton
+            icon={faTimes}
+            onClick={onToggleCollapse}
+            title="Close sidebar"
+            ariaLabel="Close sidebar"
+            variant="ghost"
+            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" 
           title={activeAccount ? getUserDisplayName() : "Login"}
-          onClick={!activeAccount ? (isConnecting ? () => {} : handleLogin) : undefined}
-          style={{ cursor: !activeAccount ? 'pointer' : 'default' }}
+          onClick={
+            activeAccount 
+              ? () => navigate('/me')
+              : (isConnecting ? () => {} : handleLogin)
+          }
+          style={{ cursor: 'pointer' }}
         >
           {profileImage ? (
             <img src={profileImage} alt={getUserDisplayName()} />

src/components/ThreePaneLayout.tsx

@@ -1,4 +1,6 @@
-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'
@@ -16,12 +18,19 @@ import { UserSettings } from '../services/settingsService'
 import { HighlightVisibility } from './HighlightsPanel'
 import { HighlightButtonRef } from './HighlightButton'
 import { BookmarkReference } from '../utils/contentLoader'
+import { useIsMobile } from '../hooks/useMediaQuery'
+import { useScrollDirection } from '../hooks/useScrollDirection'
+import { IAccount } from 'applesauce-accounts'
+import { NostrEvent } from 'nostr-tools'
 
 interface ThreePaneLayoutProps {
   // Layout state
   isCollapsed: boolean
   isHighlightsCollapsed: boolean
+  isSidebarOpen: boolean
   showSettings: boolean
+  showExplore?: boolean
+  showMe?: boolean
   
   // Bookmarks pane
   bookmarks: Bookmark[]
@@ -53,6 +62,8 @@ interface ThreePaneLayoutProps {
   onClearSelection: () => void
   currentUserPubkey?: string
   followedPubkeys: Set<string>
+  activeAccount?: IAccount | null
+  currentArticle?: NostrEvent | null
   
   // Highlights pane
   highlights: Highlight[]
@@ -72,17 +83,192 @@ interface ThreePaneLayoutProps {
   toastMessage?: string
   toastType?: 'success' | 'error'
   onClearToast: () => void
+  
+  // Optional Explore content
+  explore?: React.ReactNode
+  
+  // Optional Me content
+  me?: React.ReactNode
 }
 
 const ThreePaneLayout: React.FC<ThreePaneLayoutProps> = (props) => {
+  const isMobile = useIsMobile()
+  const sidebarRef = useRef<HTMLDivElement>(null)
+  const highlightsRef = useRef<HTMLDivElement>(null)
+  const mainPaneRef = useRef<HTMLDivElement>(null)
+  
+  // Detect scroll direction to hide/show mobile buttons
+  // On mobile, scroll happens in the main pane, not on window
+  const scrollDirection = useScrollDirection({ 
+    threshold: 10, 
+    enabled: isMobile && !props.isSidebarOpen && props.isHighlightsCollapsed,
+    elementRef: mainPaneRef
+  })
+  const showMobileButtons = scrollDirection !== 'down'
+
+  // 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(() => {
+    const { isSidebarOpen, isHighlightsCollapsed, onToggleSidebar, onToggleHighlightsPanel } = props
+    
+    if (!isMobile) return
+    if (!isSidebarOpen && isHighlightsCollapsed) return
+
+    const handleEscape = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        if (isSidebarOpen) {
+          onToggleSidebar()
+        } else if (!isHighlightsCollapsed) {
+          onToggleHighlightsPanel()
+        }
+      }
+    }
+
+    document.addEventListener('keydown', handleEscape)
+    return () => document.removeEventListener('keydown', handleEscape)
+  }, [isMobile, props])
+
+  // 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 ${showMobileButtons ? 'visible' : 'hidden'}`}
+          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 ${showMobileButtons ? 'visible' : 'hidden'}`}
+          onClick={props.onToggleHighlightsPanel}
+          aria-label="Open highlights"
+          aria-expanded={!props.isHighlightsCollapsed}
+          style={{ 
+            backgroundColor: props.settings.highlightColorMine || '#ffff00',
+            color: '#000'
+          }}
+        >
+          <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}
@@ -95,9 +281,13 @@ const ThreePaneLayout: React.FC<ThreePaneLayoutProps> = (props) => {
             loading={props.bookmarksLoading}
             relayPool={props.relayPool}
             settings={props.settings}
+            isMobile={isMobile}
           />
         </div>
-        <div className="pane main">
+        <div 
+          ref={mainPaneRef}
+          className={`pane main ${isMobile && (props.isSidebarOpen || !props.isHighlightsCollapsed) ? 'mobile-hidden' : ''}`}
+        >
           {props.showSettings ? (
             <Settings 
               settings={props.settings}
@@ -105,6 +295,16 @@ 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}
+            </>
+          ) : props.showMe && props.me ? (
+            // Render Me inside the main pane to keep side panels
+            <>
+              {props.me}
+            </>
           ) : (
             <ContentPanel 
               loading={props.readerLoading}
@@ -127,10 +327,17 @@ const ThreePaneLayout: React.FC<ThreePaneLayoutProps> = (props) => {
               currentUserPubkey={props.currentUserPubkey}
               followedPubkeys={props.followedPubkeys}
               settings={props.settings}
+              relayPool={props.relayPool}
+              activeAccount={props.activeAccount}
+              currentArticle={props.currentArticle}
             />
           )}
         </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}
@@ -148,6 +355,7 @@ const ThreePaneLayout: React.FC<ThreePaneLayoutProps> = (props) => {
             followedPubkeys={props.followedPubkeys}
             relayPool={props.relayPool}
             eventStore={props.eventStore}
+            settings={props.settings}
           />
         </div>
       </div>
@@ -155,7 +363,7 @@ const ThreePaneLayout: React.FC<ThreePaneLayoutProps> = (props) => {
         <HighlightButton 
           ref={props.highlightButtonRef} 
           onHighlight={props.onCreateHighlight}
-          highlightColor={props.settings.highlightColor || '#ffff00'}
+          highlightColor={props.settings.highlightColorMine || '#ffff00'}
         />
       )}
       <RelayStatusIndicator relayPool={props.relayPool} />

src/config/nostrGateways.ts

@@ -0,0 +1,34 @@
+/**
+ * Nostr gateway URLs for viewing events and profiles on the web
+ */
+
+export const NOSTR_GATEWAY = 'https://ants.sh' as const
+
+/**
+ * Get a profile URL on the gateway
+ */
+export function getProfileUrl(npub: string): string {
+  return `${NOSTR_GATEWAY}/p/${npub}`
+}
+
+/**
+ * Get an event URL on the gateway
+ */
+export function getEventUrl(nevent: string): string {
+  return `${NOSTR_GATEWAY}/e/${nevent}`
+}
+
+/**
+ * Get a general nostr link on the gateway
+ * Automatically detects if it's a profile (npub/nprofile) or event (note/nevent/naddr)
+ */
+export function getNostrUrl(identifier: string): string {
+  // Check the prefix to determine if it's a profile or event
+  if (identifier.startsWith('npub') || identifier.startsWith('nprofile')) {
+    return `${NOSTR_GATEWAY}/p/${identifier}`
+  }
+  
+  // Everything else (note, nevent, naddr) goes to /e/
+  return `${NOSTR_GATEWAY}/e/${identifier}`
+}
+

src/hooks/useBookmarksData.ts

@@ -44,10 +44,14 @@ export const useBookmarksData = ({
 
   const handleFetchBookmarks = useCallback(async () => {
     if (!relayPool || !activeAccount) return
+    // don't clear existing bookmarks: we keep UI stable and show spinner unobtrusively
     setBookmarksLoading(true)
     try {
       const fullAccount = accountManager.getActive()
-      await fetchBookmarks(relayPool, fullAccount || activeAccount, setBookmarks, settings)
+      // merge-friendly: updater form that preserves visible list until replacement
+      await fetchBookmarks(relayPool, fullAccount || activeAccount, (next) => {
+        setBookmarks(() => next)
+      }, settings)
     } finally {
       setBookmarksLoading(false)
     }
@@ -102,15 +106,21 @@ export const useBookmarksData = ({
     }
   }, [relayPool, activeAccount, isRefreshing, handleFetchBookmarks, handleFetchHighlights, handleFetchContacts])
 
-  // Load initial data
+  // Load initial data (avoid clearing on route-only changes)
   useEffect(() => {
     if (!relayPool || !activeAccount) return
+    // Only (re)fetch bookmarks when account or relayPool changes, not on naddr route changes
     handleFetchBookmarks()
+  }, [relayPool, activeAccount, handleFetchBookmarks])
+
+  // Fetch highlights/contacts independently to avoid disturbing bookmarks
+  useEffect(() => {
+    if (!relayPool || !activeAccount) return
     if (!naddr) {
       handleFetchHighlights()
     }
     handleFetchContacts()
-  }, [relayPool, activeAccount?.pubkey, naddr, handleFetchBookmarks, handleFetchHighlights, handleFetchContacts])
+  }, [relayPool, activeAccount, naddr, handleFetchHighlights, handleFetchContacts])
 
   return {
     bookmarks,

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/useExternalUrlLoader.ts

@@ -11,7 +11,7 @@ interface UseExternalUrlLoaderProps {
   setReaderContent: (content: ReadableContent | undefined) => void
   setReaderLoading: (loading: boolean) => void
   setIsCollapsed: (collapsed: boolean) => void
-  setHighlights: (highlights: Highlight[]) => void
+  setHighlights: (highlights: Highlight[] | ((prev: Highlight[]) => Highlight[])) => void
   setHighlightsLoading: (loading: boolean) => void
   setCurrentArticleCoordinate: (coord: string | undefined) => void
   setCurrentArticleEventId: (id: string | undefined) => void
@@ -57,7 +57,21 @@ export function useExternalUrlLoader({
           
           // Check if fetchHighlightsForUrl exists, otherwise skip
           if (typeof fetchHighlightsForUrl === 'function') {
-            const highlightsList = await fetchHighlightsForUrl(relayPool, url)
+            const seen = new Set<string>()
+            const highlightsList = await fetchHighlightsForUrl(
+              relayPool,
+              url,
+              (highlight) => {
+                if (seen.has(highlight.id)) return
+                seen.add(highlight.id)
+                setHighlights((prev) => {
+                  if (prev.some(h => h.id === highlight.id)) return prev
+                  const next = [...prev, highlight]
+                  return next.sort((a, b) => b.created_at - a.created_at)
+                })
+              }
+            )
+            // Ensure final list is sorted and contains all items
             setHighlights(highlightsList.sort((a, b) => b.created_at - a.created_at))
             console.log(`📌 Found ${highlightsList.length} highlights for URL`)
           } else {

src/hooks/useHighlightInteractions.ts

@@ -56,8 +56,8 @@ export const useHighlightInteractions = ({
     }
   }, [selectedHighlightId])
 
-  // Handle text selection
-  const handleMouseUp = useCallback(() => {
+  // Handle text selection (works for both mouse and touch)
+  const handleSelectionEnd = useCallback(() => {
     setTimeout(() => {
       const selection = window.getSelection()
       if (!selection || selection.rangeCount === 0) {
@@ -76,6 +76,6 @@ export const useHighlightInteractions = ({
     }, 10)
   }, [onTextSelection, onClearSelection])
 
-  return { contentRef, handleMouseUp }
+  return { contentRef, handleSelectionEnd }
 }
 

src/hooks/useMarkdownToHTML.ts

@@ -1,34 +1,86 @@
 import React, { useState, useEffect, useRef } from 'react'
+import { RelayPool } from 'applesauce-relay'
+import { extractNaddrUris, replaceNostrUrisInMarkdown, replaceNostrUrisInMarkdownWithTitles } from '../utils/nostrUriResolver'
+import { fetchArticleTitles } from '../services/articleTitleResolver'
 
 /**
  * Hook to convert markdown to HTML using a hidden ReactMarkdown component
+ * Also processes nostr: URIs in the markdown and resolves article titles
  */
-export const useMarkdownToHTML = (markdown?: string): { renderedHtml: string, previewRef: React.RefObject<HTMLDivElement> } => {
+export const useMarkdownToHTML = (
+  markdown?: string,
+  relayPool?: RelayPool | null
+): { 
+  renderedHtml: string
+  previewRef: React.RefObject<HTMLDivElement>
+  processedMarkdown: string 
+} => {
   const previewRef = useRef<HTMLDivElement>(null)
   const [renderedHtml, setRenderedHtml] = useState<string>('')
+  const [processedMarkdown, setProcessedMarkdown] = useState<string>('')
 
   useEffect(() => {
     if (!markdown) {
       setRenderedHtml('')
+      setProcessedMarkdown('')
       return
     }
 
-    console.log('📝 Converting markdown to HTML...')
-    
-    const rafId = requestAnimationFrame(() => {
-      if (previewRef.current) {
-        const html = previewRef.current.innerHTML
-        console.log('✅ Markdown converted to HTML:', html.length, 'chars')
-        setRenderedHtml(html)
+    let isCancelled = false
+
+    const processMarkdown = async () => {
+      // Extract all naddr references
+      const naddrs = extractNaddrUris(markdown)
+      
+      let processed: string
+      
+      if (naddrs.length > 0 && relayPool) {
+        // Fetch article titles for all naddrs
+        try {
+          const articleTitles = await fetchArticleTitles(relayPool, naddrs)
+          
+          if (isCancelled) return
+          
+          // Replace nostr URIs with resolved titles
+          processed = replaceNostrUrisInMarkdownWithTitles(markdown, articleTitles)
+          console.log(`📚 Resolved ${articleTitles.size} article titles`)
+        } catch (error) {
+          console.warn('Failed to fetch article titles:', error)
+          // Fall back to basic replacement
+          processed = replaceNostrUrisInMarkdown(markdown)
+        }
       } else {
-        console.warn('⚠️ markdownPreviewRef.current is null')
+        // No articles to resolve, use basic replacement
+        processed = replaceNostrUrisInMarkdown(markdown)
       }
-    })
+      
+      if (isCancelled) return
+      
+      setProcessedMarkdown(processed)
 
-    return () => cancelAnimationFrame(rafId)
-  }, [markdown])
+      console.log('📝 Converting markdown to HTML...')
+      
+      const rafId = requestAnimationFrame(() => {
+        if (previewRef.current && !isCancelled) {
+          const html = previewRef.current.innerHTML
+          console.log('✅ Markdown converted to HTML:', html.length, 'chars')
+          setRenderedHtml(html)
+        } else if (!isCancelled) {
+          console.warn('⚠️ markdownPreviewRef.current is null')
+        }
+      })
 
-  return { renderedHtml, previewRef }
+      return () => cancelAnimationFrame(rafId)
+    }
+
+    processMarkdown()
+
+    return () => {
+      isCancelled = true
+    }
+  }, [markdown, relayPool])
+
+  return { renderedHtml, previewRef, processedMarkdown }
 }
 
 // Removed separate useMarkdownPreviewRef; use useMarkdownToHTML to obtain previewRef

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/useOnlineStatus.ts

@@ -0,0 +1,28 @@
+import { useState, useEffect } from 'react'
+
+export function useOnlineStatus() {
+  const [isOnline, setIsOnline] = useState(navigator.onLine)
+
+  useEffect(() => {
+    const handleOnline = () => {
+      console.log('🌐 Back online')
+      setIsOnline(true)
+    }
+
+    const handleOffline = () => {
+      console.log('📴 Gone offline')
+      setIsOnline(false)
+    }
+
+    window.addEventListener('online', handleOnline)
+    window.addEventListener('offline', handleOffline)
+
+    return () => {
+      window.removeEventListener('online', handleOnline)
+      window.removeEventListener('offline', handleOffline)
+    }
+  }, [])
+
+  return isOnline
+}
+

src/hooks/usePWAInstall.ts

@@ -0,0 +1,74 @@
+import { useState, useEffect } from 'react'
+
+interface BeforeInstallPromptEvent extends Event {
+  prompt: () => Promise<void>
+  userChoice: Promise<{ outcome: 'accepted' | 'dismissed' }>
+}
+
+export function usePWAInstall() {
+  const [deferredPrompt, setDeferredPrompt] = useState<BeforeInstallPromptEvent | null>(null)
+  const [isInstallable, setIsInstallable] = useState(false)
+  const [isInstalled, setIsInstalled] = useState(false)
+
+  useEffect(() => {
+    // Check if app is already installed
+    if (window.matchMedia('(display-mode: standalone)').matches) {
+      setIsInstalled(true)
+      return
+    }
+
+    // Listen for the beforeinstallprompt event
+    const handleBeforeInstallPrompt = (e: Event) => {
+      e.preventDefault()
+      const installPromptEvent = e as BeforeInstallPromptEvent
+      setDeferredPrompt(installPromptEvent)
+      setIsInstallable(true)
+    }
+
+    // Listen for successful installation
+    const handleAppInstalled = () => {
+      setIsInstalled(true)
+      setIsInstallable(false)
+      setDeferredPrompt(null)
+    }
+
+    window.addEventListener('beforeinstallprompt', handleBeforeInstallPrompt)
+    window.addEventListener('appinstalled', handleAppInstalled)
+
+    return () => {
+      window.removeEventListener('beforeinstallprompt', handleBeforeInstallPrompt)
+      window.removeEventListener('appinstalled', handleAppInstalled)
+    }
+  }, [])
+
+  const installApp = async () => {
+    if (!deferredPrompt) {
+      return false
+    }
+
+    try {
+      await deferredPrompt.prompt()
+      const choiceResult = await deferredPrompt.userChoice
+      
+      if (choiceResult.outcome === 'accepted') {
+        console.log('✅ PWA installed')
+        setIsInstallable(false)
+        setDeferredPrompt(null)
+        return true
+      } else {
+        console.log('❌ PWA installation dismissed')
+        return false
+      }
+    } catch (error) {
+      console.error('Error installing PWA:', error)
+      return false
+    }
+  }
+
+  return {
+    isInstallable,
+    isInstalled,
+    installApp,
+  }
+}
+

src/hooks/useScrollDirection.ts

@@ -0,0 +1,70 @@
+import { useState, useEffect, RefObject } from 'react'
+
+export type ScrollDirection = 'up' | 'down' | 'none'
+
+interface UseScrollDirectionOptions {
+  threshold?: number
+  enabled?: boolean
+  elementRef?: RefObject<HTMLElement>
+}
+
+/**
+ * Hook to detect scroll direction on window or a specific element
+ * @param options Configuration options
+ * @param options.threshold Minimum scroll distance to trigger direction change (default: 10)
+ * @param options.enabled Whether scroll detection is enabled (default: true)
+ * @param options.elementRef Optional ref to a scrollable element (uses window if not provided)
+ * @returns Current scroll direction ('up', 'down', or 'none')
+ */
+export function useScrollDirection({ 
+  threshold = 10, 
+  enabled = true,
+  elementRef
+}: UseScrollDirectionOptions = {}): ScrollDirection {
+  const [scrollDirection, setScrollDirection] = useState<ScrollDirection>('none')
+
+  useEffect(() => {
+    if (!enabled) return
+
+    const scrollElement = elementRef?.current || window
+    const getScrollY = () => {
+      if (elementRef?.current) {
+        return elementRef.current.scrollTop
+      }
+      return window.scrollY
+    }
+
+    let lastScrollY = getScrollY()
+    let ticking = false
+
+    const updateScrollDirection = () => {
+      const scrollY = getScrollY()
+
+      // Only update if scroll distance exceeds threshold
+      if (Math.abs(scrollY - lastScrollY) < threshold) {
+        ticking = false
+        return
+      }
+
+      setScrollDirection(scrollY > lastScrollY ? 'down' : 'up')
+      lastScrollY = scrollY > 0 ? scrollY : 0
+      ticking = false
+    }
+
+    const onScroll = () => {
+      if (!ticking) {
+        window.requestAnimationFrame(updateScrollDirection)
+        ticking = true
+      }
+    }
+
+    scrollElement.addEventListener('scroll', onScroll)
+
+    return () => {
+      scrollElement.removeEventListener('scroll', onScroll)
+    }
+  }, [threshold, enabled, elementRef])
+
+  return scrollDirection
+}
+

src/main.tsx

@@ -3,21 +3,31 @@ import ReactDOM from 'react-dom/client'
 import App from './App.tsx'
 import './index.css'
 
-// Register Service Worker for offline image caching
+// Register Service Worker for PWA functionality
 if ('serviceWorker' in navigator) {
   window.addEventListener('load', () => {
     navigator.serviceWorker
-      .register('/sw.js')
+      .register('/sw.js', { type: 'module' })
       .then(registration => {
         console.log('✅ Service Worker registered:', registration.scope)
         
-        // Update service worker when a new version is available
+        // Check for updates periodically
+        setInterval(() => {
+          registration.update()
+        }, 60 * 60 * 1000) // Check every hour
+        
+        // Handle service worker updates
         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')
+              if (newWorker.state === 'installed' && navigator.serviceWorker.controller) {
+                // New service worker available
+                console.log('🔄 New version available! Reload to update.')
+                
+                // Optionally show a toast notification
+                const updateAvailable = new CustomEvent('sw-update-available')
+                window.dispatchEvent(updateAvailable)
               }
             })
           }

src/services/articleService.ts

@@ -1,10 +1,12 @@
-import { RelayPool, completeOnEose } from 'applesauce-relay'
-import { lastValueFrom, takeUntil, timer, toArray } from 'rxjs'
+import { RelayPool } from 'applesauce-relay'
+import { lastValueFrom, take } from 'rxjs'
 import { nip19 } from 'nostr-tools'
 import { AddressPointer } from 'nostr-tools/nip19'
 import { NostrEvent } from 'nostr-tools'
 import { Helpers } from 'applesauce-core'
 import { RELAYS } from '../config/relays'
+import { prioritizeLocalRelays, partitionRelays, createParallelReqStreams } from '../utils/helpers'
+import { merge, toArray as rxToArray } from 'rxjs'
 import { UserSettings } from './settingsService'
 import { rebroadcastEvents } from './rebroadcastService'
 
@@ -98,9 +100,11 @@ export async function fetchArticleByNaddr(
     const pointer = decoded.data as AddressPointer
 
     // Define relays to query - prefer relays from naddr, fallback to configured relays (including local)
-    const relays = pointer.relays && pointer.relays.length > 0 
+    const baseRelays = pointer.relays && pointer.relays.length > 0 
       ? pointer.relays 
       : RELAYS
+    const orderedRelays = prioritizeLocalRelays(baseRelays)
+    const { local: localRelays, remote: remoteRelays } = partitionRelays(orderedRelays)
 
     // Fetch the article event
     const filter = {
@@ -109,12 +113,10 @@ export async function fetchArticleByNaddr(
       '#d': [pointer.identifier]
     }
 
-    // Use applesauce relay pool pattern
-    const events = await lastValueFrom(
-      relayPool
-        .req(relays, filter)
-        .pipe(completeOnEose(), takeUntil(timer(10000)), toArray())
-    )
+    // Parallel local+remote, stream immediate, collect up to first from each
+    const { local$, remote$ } = createParallelReqStreams(relayPool, localRelays, remoteRelays, filter, 1200, 6000)
+    const collected = await lastValueFrom(merge(local$.pipe(take(1)), remote$.pipe(take(1))).pipe(rxToArray()))
+    const events = collected as NostrEvent[]
 
     if (events.length === 0) {
       throw new Error('Article not found')

src/services/articleTitleResolver.ts

@@ -0,0 +1,91 @@
+import { RelayPool } from 'applesauce-relay'
+import { lastValueFrom, take } from 'rxjs'
+import { nip19 } from 'nostr-tools'
+import { AddressPointer } from 'nostr-tools/nip19'
+import { Helpers } from 'applesauce-core'
+import { RELAYS } from '../config/relays'
+import { prioritizeLocalRelays, partitionRelays, createParallelReqStreams } from '../utils/helpers'
+import { merge, toArray as rxToArray } from 'rxjs'
+
+const { getArticleTitle } = Helpers
+
+/**
+ * Fetch article title for a single naddr
+ * Returns the title or null if not found/error
+ */
+export async function fetchArticleTitle(
+  relayPool: RelayPool,
+  naddr: string
+): Promise<string | null> {
+  try {
+    const decoded = nip19.decode(naddr)
+    
+    if (decoded.type !== 'naddr') {
+      return null
+    }
+
+    const pointer = decoded.data as AddressPointer
+
+    // Define relays to query
+    const baseRelays = pointer.relays && pointer.relays.length > 0 
+      ? pointer.relays 
+      : RELAYS
+    const orderedRelays = prioritizeLocalRelays(baseRelays)
+    const { local: localRelays, remote: remoteRelays } = partitionRelays(orderedRelays)
+
+    // Fetch the article event
+    const filter = {
+      kinds: [pointer.kind],
+      authors: [pointer.pubkey],
+      '#d': [pointer.identifier]
+    }
+
+    // Parallel local+remote: collect up to one event from each
+    const { local$, remote$ } = createParallelReqStreams(relayPool, localRelays, remoteRelays, filter, 1200, 5000)
+    const events = await lastValueFrom(
+      merge(local$.pipe(take(1)), remote$.pipe(take(1))).pipe(rxToArray())
+    ) as unknown as { created_at: number }[]
+
+    if (events.length === 0) {
+      return null
+    }
+
+    // Sort by created_at and take the most recent
+    events.sort((a, b) => b.created_at - a.created_at)
+    const article = events[0] as unknown as Parameters<typeof getArticleTitle>[0]
+
+    return getArticleTitle(article) || null
+  } catch (err) {
+    console.warn('Failed to fetch article title for', naddr, err)
+    return null
+  }
+}
+
+/**
+ * Fetch titles for multiple naddrs in parallel
+ * Returns a map of naddr -> title
+ */
+export async function fetchArticleTitles(
+  relayPool: RelayPool,
+  naddrs: string[]
+): Promise<Map<string, string>> {
+  const titleMap = new Map<string, string>()
+  
+  // Fetch all titles in parallel
+  const results = await Promise.allSettled(
+    naddrs.map(async (naddr) => {
+      const title = await fetchArticleTitle(relayPool, naddr)
+      return { naddr, title }
+    })
+  )
+
+  // Process results
+  results.forEach((result) => {
+    if (result.status === 'fulfilled' && result.value.title) {
+      titleMap.set(result.value.naddr, result.value.title)
+    }
+  })
+
+  return titleMap
+}
+

src/services/bookmarkService.ts

@@ -1,5 +1,5 @@
 import { RelayPool, completeOnEose } from 'applesauce-relay'
-import { lastValueFrom, takeUntil, timer, toArray } from 'rxjs'
+import { lastValueFrom, merge, Observable, takeUntil, timer, toArray } from 'rxjs'
 import {
   AccountWithExtension,
   NostrEvent,
@@ -16,6 +16,7 @@ import { Bookmark } from '../types/bookmarks'
 import { collectBookmarksFromEvents } from './bookmarkProcessing.ts'
 import { UserSettings } from './settingsService'
 import { rebroadcastEvents } from './rebroadcastService'
+import { prioritizeLocalRelays, partitionRelays } from '../utils/helpers'
 
 
 
@@ -31,14 +32,22 @@ export const fetchBookmarks = async (
       throw new Error('Invalid account object provided')
     }
     // Get relay URLs from the pool
-    const relayUrls = Array.from(relayPool.relays.values()).map(relay => relay.url)
+    const relayUrls = prioritizeLocalRelays(Array.from(relayPool.relays.values()).map(relay => relay.url))
+    const { local: localRelays, remote: remoteRelays } = partitionRelays(relayUrls)
     // Fetch bookmark events - NIP-51 standards, legacy formats, and web bookmarks (NIP-B0)
     console.log('🔍 Fetching bookmark events from relays:', relayUrls)
-    const rawEvents = await lastValueFrom(
-      relayPool
-        .req(relayUrls, { kinds: [10003, 30003, 30001, 39701], authors: [activeAccount.pubkey] })
-        .pipe(completeOnEose(), takeUntil(timer(20000)), toArray())
-    )
+    // Try local-first quickly, then full set fallback
+    const local$ = localRelays.length > 0
+      ? relayPool
+          .req(localRelays, { kinds: [10003, 30003, 30001, 39701], authors: [activeAccount.pubkey] })
+          .pipe(completeOnEose(), takeUntil(timer(1200)))
+      : new Observable<NostrEvent>((sub) => sub.complete())
+    const remote$ = remoteRelays.length > 0
+      ? relayPool
+          .req(remoteRelays, { kinds: [10003, 30003, 30001, 39701], authors: [activeAccount.pubkey] })
+          .pipe(completeOnEose(), takeUntil(timer(6000)))
+      : new Observable<NostrEvent>((sub) => sub.complete())
+    const rawEvents = await lastValueFrom(merge(local$, remote$).pipe(toArray()))
     console.log('📊 Raw events fetched:', rawEvents.length, 'events')
     
     // Rebroadcast bookmark events to local/all relays based on settings
@@ -64,7 +73,7 @@ export const fetchBookmarks = async (
     const bookmarkListEvents = dedupeNip51Events(rawEvents)
     console.log('📋 After deduplication:', bookmarkListEvents.length, 'bookmark events')
     if (bookmarkListEvents.length === 0) {
-      setBookmarks([])
+      // Keep existing bookmarks visible; do not clear list if nothing new found
       return
     }
     // Aggregate across events
@@ -102,9 +111,14 @@ export const fetchBookmarks = async (
     let idToEvent: Map<string, NostrEvent> = new Map()
     if (noteIds.length > 0) {
       try {
-        const events = await lastValueFrom(
-          relayPool.req(relayUrls, { ids: noteIds }).pipe(completeOnEose(), takeUntil(timer(10000)), toArray())
-        )
+        const { local: localHydrate, remote: remoteHydrate } = partitionRelays(relayUrls)
+        const localHydrate$ = localHydrate.length > 0
+          ? relayPool.req(localHydrate, { ids: noteIds }).pipe(completeOnEose(), takeUntil(timer(800)))
+          : new Observable<NostrEvent>((sub) => sub.complete())
+        const remoteHydrate$ = remoteHydrate.length > 0
+          ? relayPool.req(remoteHydrate, { ids: noteIds }).pipe(completeOnEose(), takeUntil(timer(2500)))
+          : new Observable<NostrEvent>((sub) => sub.complete())
+        const events: NostrEvent[] = await lastValueFrom(merge(localHydrate$, remoteHydrate$).pipe(toArray()))
         idToEvent = new Map(events.map((e: NostrEvent) => [e.id, e]))
       } catch (error) {
         console.warn('Failed to fetch events for hydration:', error)

src/services/contactService.ts

@@ -1,5 +1,6 @@
 import { RelayPool, completeOnEose } from 'applesauce-relay'
-import { lastValueFrom, takeUntil, timer, toArray } from 'rxjs'
+import { lastValueFrom, merge, Observable, takeUntil, timer, toArray } from 'rxjs'
+import { prioritizeLocalRelays } from '../utils/helpers'
 
 /**
  * Fetches the contact list (follows) for a specific user
@@ -9,40 +10,49 @@ import { lastValueFrom, takeUntil, timer, toArray } from 'rxjs'
  */
 export const fetchContacts = async (
   relayPool: RelayPool,
-  pubkey: string
+  pubkey: string,
+  onPartial?: (contacts: Set<string>) => void
 ): Promise<Set<string>> => {
   try {
-    const relayUrls = Array.from(relayPool.relays.values()).map(relay => relay.url)
+    const relayUrls = prioritizeLocalRelays(Array.from(relayPool.relays.values()).map(relay => relay.url))
     
     console.log('🔍 Fetching contacts (kind 3) for user:', pubkey)
     
+    // Local-first quick attempt
+    const localRelays = relayUrls.filter(url => url.includes('localhost') || url.includes('127.0.0.1'))
+    const remoteRelays = relayUrls.filter(url => !url.includes('localhost') && !url.includes('127.0.0.1'))
+    const local$ = localRelays.length > 0
+      ? relayPool
+          .req(localRelays, { kinds: [3], authors: [pubkey] })
+          .pipe(completeOnEose(), takeUntil(timer(1200)))
+      : new Observable<{ created_at: number; tags: string[][] }>((sub) => sub.complete())
+    const remote$ = remoteRelays.length > 0
+      ? relayPool
+          .req(remoteRelays, { kinds: [3], authors: [pubkey] })
+          .pipe(completeOnEose(), takeUntil(timer(6000)))
+      : new Observable<{ created_at: number; tags: string[][] }>((sub) => sub.complete())
     const events = await lastValueFrom(
-      relayPool
-        .req(relayUrls, { kinds: [3], authors: [pubkey] })
-        .pipe(completeOnEose(), takeUntil(timer(10000)), toArray())
+      merge(local$, remote$).pipe(toArray())
     )
+    const followed = new Set<string>()
+    if (events.length > 0) {
+      // Get the most recent contact list
+      const sortedEvents = events.sort((a, b) => b.created_at - a.created_at)
+      const contactList = sortedEvents[0]
+      // Extract pubkeys from 'p' tags
+      for (const tag of contactList.tags) {
+        if (tag[0] === 'p' && tag[1]) {
+          followed.add(tag[1])
+        }
+      }
+      if (onPartial) onPartial(new Set(followed))
+    }
+    // merged already via streams
     
     console.log('📊 Contact events fetched:', events.length)
     
-    if (events.length === 0) {
-      return new Set()
-    }
-    
-    // Get the most recent contact list
-    const sortedEvents = events.sort((a, b) => b.created_at - a.created_at)
-    const contactList = sortedEvents[0]
-    
-    // Extract pubkeys from 'p' tags
-    const followedPubkeys = new Set<string>()
-    for (const tag of contactList.tags) {
-      if (tag[0] === 'p' && tag[1]) {
-        followedPubkeys.add(tag[1])
-      }
-    }
-    
-    console.log('👥 Followed contacts:', followedPubkeys.size)
-    
-    return followedPubkeys
+    console.log('👥 Followed contacts:', followed.size)
+    return followed
   } catch (error) {
     console.error('Failed to fetch contacts:', error)
     return new Set()

src/services/deletionService.ts

@@ -0,0 +1,48 @@
+import { EventFactory } from 'applesauce-factory'
+import { RelayPool } from 'applesauce-relay'
+import { IAccount } from 'applesauce-accounts'
+import { NostrEvent } from 'nostr-tools'
+import { RELAYS } from '../config/relays'
+
+/**
+ * Creates a kind:5 event deletion request (NIP-09)
+ * @param eventId The ID of the event to delete
+ * @param eventKind The kind of the event being deleted
+ * @param reason Optional reason for deletion
+ * @param account The user's account for signing
+ * @param relayPool The relay pool for publishing
+ * @returns The signed deletion request event
+ */
+export async function createDeletionRequest(
+  eventId: string,
+  eventKind: number,
+  reason: string | undefined,
+  account: IAccount,
+  relayPool: RelayPool
+): Promise<NostrEvent> {
+  const factory = new EventFactory({ signer: account })
+
+  const tags: string[][] = [
+    ['e', eventId],
+    ['k', eventKind.toString()]
+  ]
+
+  const draft = await factory.create(async () => ({
+    kind: 5, // Event Deletion Request
+    content: reason || '',
+    tags,
+    created_at: Math.floor(Date.now() / 1000)
+  }))
+
+  const signed = await factory.sign(draft)
+
+  console.log('🗑️ Created kind:5 deletion request for event:', eventId.slice(0, 8))
+
+  // Publish to relays
+  await relayPool.publish(RELAYS, signed)
+
+  console.log('✅ Deletion request published to', RELAYS.length, 'relay(s)')
+
+  return signed
+}
+

src/services/exploreCache.ts

@@ -0,0 +1,42 @@
+import { NostrEvent } from 'nostr-tools'
+
+export interface CachedBlogPostPreview {
+  event: NostrEvent
+  title: string
+  summary?: string
+  image?: string
+  published?: number
+  author: string
+}
+
+type CacheValue = {
+  posts: CachedBlogPostPreview[]
+  timestamp: number
+}
+
+const exploreCache = new Map<string, CacheValue>() // key: pubkey
+
+export function getCachedPosts(pubkey: string): CachedBlogPostPreview[] | null {
+  const entry = exploreCache.get(pubkey)
+  if (!entry) return null
+  return entry.posts
+}
+
+export function setCachedPosts(pubkey: string, posts: CachedBlogPostPreview[]): void {
+  exploreCache.set(pubkey, { posts, timestamp: Date.now() })
+}
+
+export function upsertCachedPost(pubkey: string, post: CachedBlogPostPreview): CachedBlogPostPreview[] {
+  const current = exploreCache.get(pubkey)?.posts || []
+  const byId = new Map(current.map(p => [p.event.id, p]))
+  byId.set(post.event.id, post)
+  const merged = Array.from(byId.values()).sort((a, b) => {
+    const ta = a.published || a.event.created_at
+    const tb = b.published || b.event.created_at
+    return tb - ta
+  })
+  setCachedPosts(pubkey, merged)
+  return merged
+}
+
+

src/services/exploreService.ts

@@ -1,5 +1,6 @@
 import { RelayPool, completeOnEose } from 'applesauce-relay'
-import { lastValueFrom, takeUntil, timer, toArray } from 'rxjs'
+import { lastValueFrom, merge, Observable, takeUntil, timer, toArray } from 'rxjs'
+import { prioritizeLocalRelays, partitionRelays } from '../utils/helpers'
 import { NostrEvent } from 'nostr-tools'
 import { Helpers } from 'applesauce-core'
 
@@ -24,7 +25,8 @@ export interface BlogPostPreview {
 export const fetchBlogPostsFromAuthors = async (
   relayPool: RelayPool,
   pubkeys: string[],
-  relayUrls: string[]
+  relayUrls: string[],
+  onPost?: (post: BlogPostPreview) => void
 ): Promise<BlogPostPreview[]> => {
   try {
     if (pubkeys.length === 0) {
@@ -34,42 +36,65 @@ export const fetchBlogPostsFromAuthors = async (
 
     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)
-    
+    const prioritized = prioritizeLocalRelays(relayUrls)
+    const { local: localRelays, remote: remoteRelays } = partitionRelays(prioritized)
+
     // 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)
+
+    const processEvents = (incoming: NostrEvent[]) => {
+      for (const event of incoming) {
+        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)
+          // Emit as we incorporate
+          if (onPost) {
+            const post: BlogPostPreview = {
+              event,
+              title: getArticleTitle(event) || 'Untitled',
+              summary: getArticleSummary(event),
+              image: getArticleImage(event),
+              published: getArticlePublished(event),
+              author: event.pubkey
+            }
+            onPost(post)
+          }
+        }
       }
     }
+
+    const local$ = localRelays.length > 0
+      ? relayPool
+          .req(localRelays, { kinds: [30023], authors: pubkeys, limit: 100 })
+          .pipe(completeOnEose(), takeUntil(timer(1200)))
+      : new Observable<NostrEvent>((sub) => sub.complete())
+    const remote$ = remoteRelays.length > 0
+      ? relayPool
+          .req(remoteRelays, { kinds: [30023], authors: pubkeys, limit: 100 })
+          .pipe(completeOnEose(), takeUntil(timer(6000)))
+      : new Observable<NostrEvent>((sub) => sub.complete())
+    const events = await lastValueFrom(merge(local$, remote$).pipe(toArray()))
+    processEvents(events)
+
+    console.log('📊 Blog post events fetched (unique):', uniqueEvents.size)
     
     // 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
-      }))
+      .map(event => {
+        const post: BlogPostPreview = {
+          event,
+          title: getArticleTitle(event) || 'Untitled',
+          summary: getArticleSummary(event),
+          image: getArticleImage(event),
+          published: getArticlePublished(event),
+          author: event.pubkey
+        }
+        if (onPost) onPost(post)
+        return post
+      })
       .sort((a, b) => {
         const timeA = a.published || a.event.created_at
         const timeB = b.published || b.event.created_at

src/services/highlightCreationService.ts

@@ -11,7 +11,8 @@ 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,
@@ -75,9 +76,9 @@ 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

src/services/highlightService.ts

@@ -1,204 +1,5 @@
-import { RelayPool, completeOnEose, onlyEvents } from 'applesauce-relay'
-import { lastValueFrom, takeUntil, timer, tap, toArray } from 'rxjs'
-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'
+export * from './highlights/fetchForArticle'
+export * from './highlights/fetchForUrl'
+export * from './highlights/fetchByAuthor'
 
-/**
- * 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,
-  settings?: UserSettings
-): Promise<Highlight[]> => {
-  try {
-    console.log('🔍 Fetching highlights (kind 9802) for article:', articleCoordinate)
-    console.log('🔍 Event ID:', eventId || 'none')
-    console.log('🔍 From relays (including local):', RELAYS)
-    
-    const seenIds = new Set<string>()
-    const processEvent = (event: NostrEvent): Highlight | null => {
-      if (seenIds.has(event.id)) return null
-      seenIds.add(event.id)
-      return eventToHighlight(event)
-    }
-    
-    // Query for highlights that reference this article via the 'a' tag
-    const aTagEvents = await lastValueFrom(
-      relayPool
-        .req(RELAYS, { kinds: [9802], '#a': [articleCoordinate] })
-        .pipe(
-          onlyEvents(),
-          tap((event: NostrEvent) => {
-            const highlight = processEvent(event)
-            if (highlight && onHighlight) {
-              onHighlight(highlight)
-            }
-          }),
-          completeOnEose(),
-          takeUntil(timer(10000)),
-          toArray()
-        )
-    )
-    
-    console.log('📊 Highlights via a-tag:', aTagEvents.length)
-    
-    // If we have an event ID, also query for highlights that reference via the 'e' tag
-    let eTagEvents: NostrEvent[] = []
-    if (eventId) {
-      eTagEvents = await lastValueFrom(
-        relayPool
-          .req(RELAYS, { kinds: [9802], '#e': [eventId] })
-          .pipe(
-            onlyEvents(),
-            tap((event: NostrEvent) => {
-              const highlight = processEvent(event)
-              if (highlight && onHighlight) {
-                onHighlight(highlight)
-              }
-            }),
-            completeOnEose(),
-            takeUntil(timer(10000)),
-            toArray()
-          )
-      )
-      console.log('📊 Highlights via e-tag:', eTagEvents.length)
-    }
-    
-    // Combine results from both queries
-    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 {
-      console.log('❌ No highlights found. Article coordinate:', articleCoordinate)
-      console.log('❌ Event ID:', eventId || 'none')
-      console.log('💡 Try checking if there are any highlights on this article at https://highlighter.com')
-    }
-    
-    // Deduplicate events by ID
-    const uniqueEvents = dedupeHighlights(rawEvents)
-    console.log('📊 Unique highlight events after deduplication:', uniqueEvents.length)
-    
-    const highlights: Highlight[] = uniqueEvents.map(eventToHighlight)
-    return sortHighlights(highlights)
-  } catch (error) {
-    console.error('Failed to fetch highlights for article:', error)
-    return []
-  }
-}
-
-/**
- * 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,
-  settings?: UserSettings
-): Promise<Highlight[]> => {
-  try {
-    console.log('🔍 Fetching highlights (kind 9802) for URL:', url)
-    
-    const seenIds = new Set<string>()
-    const rawEvents = await lastValueFrom(
-      relayPool
-        .req(RELAYS, { kinds: [9802], '#r': [url] })
-        .pipe(
-          onlyEvents(),
-          tap((event: NostrEvent) => {
-            seenIds.add(event.id)
-          }),
-          completeOnEose(),
-          takeUntil(timer(10000)),
-          toArray()
-        )
-    )
-    
-    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)
-  } catch (error) {
-    console.error('Failed to fetch highlights for URL:', error)
-    return []
-  }
-}
-
-/**
- * Fetches highlights created by a specific user
- * @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,
-  settings?: UserSettings
-): Promise<Highlight[]> => {
-  try {
-    const relayUrls = Array.from(relayPool.relays.values()).map(relay => relay.url)
-    
-    console.log('🔍 Fetching highlights (kind 9802) by author:', pubkey)
-    
-    const seenIds = new Set<string>()
-    const rawEvents = await lastValueFrom(
-      relayPool
-        .req(relayUrls, { kinds: [9802], authors: [pubkey] })
-        .pipe(
-          onlyEvents(),
-          tap((event: NostrEvent) => {
-            if (!seenIds.has(event.id)) {
-              seenIds.add(event.id)
-              const highlight = eventToHighlight(event)
-              if (onHighlight) {
-                onHighlight(highlight)
-              }
-            }
-          }),
-          completeOnEose(),
-          takeUntil(timer(10000)),
-          toArray()
-        )
-    )
-    
-    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)
-    
-    const highlights: Highlight[] = uniqueEvents.map(eventToHighlight)
-    return sortHighlights(highlights)
-  } catch (error) {
-    console.error('Failed to fetch highlights by author:', error)
-    return []
-  }
-}
 

src/services/highlights/fetchByAuthor.ts

@@ -0,0 +1,63 @@
+import { RelayPool, completeOnEose, onlyEvents } from 'applesauce-relay'
+import { lastValueFrom, merge, Observable, takeUntil, timer, tap, toArray } from 'rxjs'
+import { NostrEvent } from 'nostr-tools'
+import { Highlight } from '../../types/highlights'
+import { prioritizeLocalRelays, partitionRelays } from '../../utils/helpers'
+import { eventToHighlight, dedupeHighlights, sortHighlights } from '../highlightEventProcessor'
+import { UserSettings } from '../settingsService'
+import { rebroadcastEvents } from '../rebroadcastService'
+
+export const fetchHighlights = async (
+  relayPool: RelayPool,
+  pubkey: string,
+  onHighlight?: (highlight: Highlight) => void,
+  settings?: UserSettings
+): Promise<Highlight[]> => {
+  try {
+    const relayUrls = Array.from(relayPool.relays.values()).map(relay => relay.url)
+    const ordered = prioritizeLocalRelays(relayUrls)
+    const { local: localRelays, remote: remoteRelays } = partitionRelays(ordered)
+
+    const seenIds = new Set<string>()
+    const local$ = localRelays.length > 0
+      ? relayPool
+          .req(localRelays, { kinds: [9802], authors: [pubkey] })
+          .pipe(
+            onlyEvents(),
+            tap((event: NostrEvent) => {
+              if (!seenIds.has(event.id)) {
+                seenIds.add(event.id)
+                if (onHighlight) onHighlight(eventToHighlight(event))
+              }
+            }),
+            completeOnEose(),
+            takeUntil(timer(1200))
+          )
+      : new Observable<NostrEvent>((sub) => sub.complete())
+    const remote$ = remoteRelays.length > 0
+      ? relayPool
+          .req(remoteRelays, { kinds: [9802], authors: [pubkey] })
+          .pipe(
+            onlyEvents(),
+            tap((event: NostrEvent) => {
+              if (!seenIds.has(event.id)) {
+                seenIds.add(event.id)
+                if (onHighlight) onHighlight(eventToHighlight(event))
+              }
+            }),
+            completeOnEose(),
+            takeUntil(timer(6000))
+          )
+      : new Observable<NostrEvent>((sub) => sub.complete())
+    const rawEvents: NostrEvent[] = await lastValueFrom(merge(local$, remote$).pipe(toArray()))
+
+    await rebroadcastEvents(rawEvents, relayPool, settings)
+    const uniqueEvents = dedupeHighlights(rawEvents)
+    const highlights = uniqueEvents.map(eventToHighlight)
+    return sortHighlights(highlights)
+  } catch {
+    return []
+  }
+}
+
+

src/services/highlights/fetchForArticle.ts

@@ -0,0 +1,98 @@
+import { RelayPool, completeOnEose, onlyEvents } from 'applesauce-relay'
+import { lastValueFrom, merge, Observable, takeUntil, timer, tap, toArray } from 'rxjs'
+import { NostrEvent } from 'nostr-tools'
+import { Highlight } from '../../types/highlights'
+import { RELAYS } from '../../config/relays'
+import { prioritizeLocalRelays, partitionRelays } from '../../utils/helpers'
+import { eventToHighlight, dedupeHighlights, sortHighlights } from '../highlightEventProcessor'
+import { UserSettings } from '../settingsService'
+import { rebroadcastEvents } from '../rebroadcastService'
+
+export const fetchHighlightsForArticle = async (
+  relayPool: RelayPool,
+  articleCoordinate: string,
+  eventId?: string,
+  onHighlight?: (highlight: Highlight) => void,
+  settings?: UserSettings
+): Promise<Highlight[]> => {
+  try {
+    const seenIds = new Set<string>()
+    const processEvent = (event: NostrEvent): Highlight | null => {
+      if (seenIds.has(event.id)) return null
+      seenIds.add(event.id)
+      return eventToHighlight(event)
+    }
+
+    const orderedRelays = prioritizeLocalRelays(RELAYS)
+    const { local: localRelays, remote: remoteRelays } = partitionRelays(orderedRelays)
+
+    const aLocal$ = localRelays.length > 0
+      ? relayPool
+          .req(localRelays, { kinds: [9802], '#a': [articleCoordinate] })
+          .pipe(
+            onlyEvents(),
+            tap((event: NostrEvent) => {
+              const highlight = processEvent(event)
+              if (highlight && onHighlight) onHighlight(highlight)
+            }),
+            completeOnEose(),
+            takeUntil(timer(1200))
+          )
+      : new Observable<NostrEvent>((sub) => sub.complete())
+    const aRemote$ = remoteRelays.length > 0
+      ? relayPool
+          .req(remoteRelays, { kinds: [9802], '#a': [articleCoordinate] })
+          .pipe(
+            onlyEvents(),
+            tap((event: NostrEvent) => {
+              const highlight = processEvent(event)
+              if (highlight && onHighlight) onHighlight(highlight)
+            }),
+            completeOnEose(),
+            takeUntil(timer(6000))
+          )
+      : new Observable<NostrEvent>((sub) => sub.complete())
+    const aTagEvents: NostrEvent[] = await lastValueFrom(merge(aLocal$, aRemote$).pipe(toArray()))
+
+    let eTagEvents: NostrEvent[] = []
+    if (eventId) {
+      const eLocal$ = localRelays.length > 0
+        ? relayPool
+            .req(localRelays, { kinds: [9802], '#e': [eventId] })
+            .pipe(
+              onlyEvents(),
+              tap((event: NostrEvent) => {
+                const highlight = processEvent(event)
+                if (highlight && onHighlight) onHighlight(highlight)
+              }),
+              completeOnEose(),
+              takeUntil(timer(1200))
+            )
+        : new Observable<NostrEvent>((sub) => sub.complete())
+      const eRemote$ = remoteRelays.length > 0
+        ? relayPool
+            .req(remoteRelays, { kinds: [9802], '#e': [eventId] })
+            .pipe(
+              onlyEvents(),
+              tap((event: NostrEvent) => {
+                const highlight = processEvent(event)
+                if (highlight && onHighlight) onHighlight(highlight)
+              }),
+              completeOnEose(),
+              takeUntil(timer(6000))
+            )
+        : new Observable<NostrEvent>((sub) => sub.complete())
+      eTagEvents = await lastValueFrom(merge(eLocal$, eRemote$).pipe(toArray()))
+    }
+
+    const rawEvents = [...aTagEvents, ...eTagEvents]
+    await rebroadcastEvents(rawEvents, relayPool, settings)
+    const uniqueEvents = dedupeHighlights(rawEvents)
+    const highlights: Highlight[] = uniqueEvents.map(eventToHighlight)
+    return sortHighlights(highlights)
+  } catch {
+    return []
+  }
+}
+
+

src/services/highlights/fetchForUrl.ts

@@ -0,0 +1,57 @@
+import { RelayPool, completeOnEose, onlyEvents } from 'applesauce-relay'
+import { lastValueFrom, merge, Observable, takeUntil, timer, tap, toArray } from 'rxjs'
+import { NostrEvent } from 'nostr-tools'
+import { Highlight } from '../../types/highlights'
+import { RELAYS } from '../../config/relays'
+import { prioritizeLocalRelays, partitionRelays } from '../../utils/helpers'
+import { eventToHighlight, dedupeHighlights, sortHighlights } from '../highlightEventProcessor'
+import { UserSettings } from '../settingsService'
+import { rebroadcastEvents } from '../rebroadcastService'
+
+export const fetchHighlightsForUrl = async (
+  relayPool: RelayPool,
+  url: string,
+  onHighlight?: (highlight: Highlight) => void,
+  settings?: UserSettings
+): Promise<Highlight[]> => {
+  try {
+    const seenIds = new Set<string>()
+    const orderedRelaysUrl = prioritizeLocalRelays(RELAYS)
+    const { local: localRelaysUrl, remote: remoteRelaysUrl } = partitionRelays(orderedRelaysUrl)
+    const local$ = localRelaysUrl.length > 0
+      ? relayPool
+          .req(localRelaysUrl, { kinds: [9802], '#r': [url] })
+          .pipe(
+            onlyEvents(),
+            tap((event: NostrEvent) => {
+              seenIds.add(event.id)
+              if (onHighlight) onHighlight(eventToHighlight(event))
+            }),
+            completeOnEose(),
+            takeUntil(timer(1200))
+          )
+      : new Observable<NostrEvent>((sub) => sub.complete())
+    const remote$ = remoteRelaysUrl.length > 0
+      ? relayPool
+          .req(remoteRelaysUrl, { kinds: [9802], '#r': [url] })
+          .pipe(
+            onlyEvents(),
+            tap((event: NostrEvent) => {
+              seenIds.add(event.id)
+              if (onHighlight) onHighlight(eventToHighlight(event))
+            }),
+            completeOnEose(),
+            takeUntil(timer(6000))
+          )
+      : new Observable<NostrEvent>((sub) => sub.complete())
+    const rawEvents: NostrEvent[] = await lastValueFrom(merge(local$, remote$).pipe(toArray()))
+    await rebroadcastEvents(rawEvents, relayPool, settings)
+    const uniqueEvents = dedupeHighlights(rawEvents)
+    const highlights: Highlight[] = uniqueEvents.map(eventToHighlight)
+    return sortHighlights(highlights)
+  } catch {
+    return []
+  }
+}
+
+

src/services/reactionService.ts

@@ -0,0 +1,103 @@
+import { EventFactory } from 'applesauce-factory'
+import { RelayPool } from 'applesauce-relay'
+import { IAccount } from 'applesauce-accounts'
+import { NostrEvent } from 'nostr-tools'
+import { RELAYS } from '../config/relays'
+
+const MARK_AS_READ_EMOJI = '📚'
+
+/**
+ * Creates a kind:7 reaction to a nostr event (for nostr-native articles)
+ * @param eventId The ID of the event being reacted to
+ * @param eventAuthor The pubkey of the event author
+ * @param eventKind The kind of the event being reacted to
+ * @param account The user's account for signing
+ * @param relayPool The relay pool for publishing
+ * @returns The signed reaction event
+ */
+export async function createEventReaction(
+  eventId: string,
+  eventAuthor: string,
+  eventKind: number,
+  account: IAccount,
+  relayPool: RelayPool
+): Promise<NostrEvent> {
+  const factory = new EventFactory({ signer: account })
+
+  const tags: string[][] = [
+    ['e', eventId],
+    ['p', eventAuthor],
+    ['k', eventKind.toString()]
+  ]
+
+  const draft = await factory.create(async () => ({
+    kind: 7, // Reaction
+    content: MARK_AS_READ_EMOJI,
+    tags,
+    created_at: Math.floor(Date.now() / 1000)
+  }))
+
+  const signed = await factory.sign(draft)
+
+  console.log('📚 Created kind:7 reaction (mark as read) for event:', eventId.slice(0, 8))
+
+  // Publish to relays
+  await relayPool.publish(RELAYS, signed)
+
+  console.log('✅ Reaction published to', RELAYS.length, 'relay(s)')
+
+  return signed
+}
+
+/**
+ * Creates a kind:17 reaction to a website (for external URLs)
+ * @param url The URL being reacted to
+ * @param account The user's account for signing
+ * @param relayPool The relay pool for publishing
+ * @returns The signed reaction event
+ */
+export async function createWebsiteReaction(
+  url: string,
+  account: IAccount,
+  relayPool: RelayPool
+): Promise<NostrEvent> {
+  const factory = new EventFactory({ signer: account })
+
+  // Normalize URL (remove fragments, trailing slashes as per NIP-25)
+  let normalizedUrl = url
+  try {
+    const parsed = new URL(url)
+    // Remove fragment
+    parsed.hash = ''
+    normalizedUrl = parsed.toString()
+    // Remove trailing slash if present
+    if (normalizedUrl.endsWith('/')) {
+      normalizedUrl = normalizedUrl.slice(0, -1)
+    }
+  } catch (error) {
+    console.warn('Failed to normalize URL:', error)
+  }
+
+  const tags: string[][] = [
+    ['r', normalizedUrl]
+  ]
+
+  const draft = await factory.create(async () => ({
+    kind: 17, // Reaction to a website
+    content: MARK_AS_READ_EMOJI,
+    tags,
+    created_at: Math.floor(Date.now() / 1000)
+  }))
+
+  const signed = await factory.sign(draft)
+
+  console.log('📚 Created kind:17 reaction (mark as read) for URL:', normalizedUrl)
+
+  // Publish to relays
+  await relayPool.publish(RELAYS, signed)
+
+  console.log('✅ Website reaction published to', RELAYS.length, 'relay(s)')
+
+  return signed
+}
+

src/services/settingsService.ts

@@ -45,6 +45,8 @@ export interface UserSettings {
   // 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/sw.ts

@@ -0,0 +1,111 @@
+/// <reference lib="webworker" />
+/* eslint-env worker */
+/* global ServiceWorkerGlobalScope, ExtendableMessageEvent, FetchEvent */
+import { clientsClaim } from 'workbox-core'
+import { precacheAndRoute, cleanupOutdatedCaches } from 'workbox-precaching'
+import { registerRoute, NavigationRoute } from 'workbox-routing'
+import { StaleWhileRevalidate } from 'workbox-strategies'
+import { ExpirationPlugin } from 'workbox-expiration'
+import { CacheableResponsePlugin } from 'workbox-cacheable-response'
+
+// Narrow the global service worker scope for proper typings
+const sw = self as unknown as ServiceWorkerGlobalScope
+
+// Precache all build assets (app shell)
+// @ts-ignore - __WB_MANIFEST is injected by vite-plugin-pwa
+precacheAndRoute(self.__WB_MANIFEST)
+
+// Clean up old caches
+cleanupOutdatedCaches()
+
+// Take control immediately
+sw.skipWaiting()
+clientsClaim()
+
+console.log('[SW] Boris service worker loaded')
+
+// Runtime cache: Cross-origin images
+// This preserves the existing image caching behavior
+registerRoute(
+  ({ request, url }) => {
+    const isImage = request.destination === 'image' || 
+                    /\.(jpg|jpeg|png|gif|webp|svg)$/i.test(url.pathname)
+    return isImage && url.origin !== sw.location.origin
+  },
+  new StaleWhileRevalidate({
+    cacheName: 'boris-images',
+    plugins: [
+      new ExpirationPlugin({
+        maxEntries: 300,
+        maxAgeSeconds: 60 * 60 * 24 * 30, // 30 days
+      }),
+      new CacheableResponsePlugin({
+        statuses: [0, 200],
+      }),
+    ],
+  })
+)
+
+// Runtime cache: Cross-origin article HTML
+// Cache fetched articles for offline reading
+registerRoute(
+  ({ request, url }) => {
+    const accept = request.headers.get('accept') || ''
+    const isHTML = accept.includes('text/html')
+    const isCrossOrigin = url.origin !== sw.location.origin
+    // Exclude relay connections and local URLs
+    const isNotRelay = !url.protocol.includes('ws')
+    return isHTML && isCrossOrigin && isNotRelay
+  },
+  new StaleWhileRevalidate({
+    cacheName: 'boris-articles',
+    plugins: [
+      new ExpirationPlugin({
+        maxEntries: 100,
+        maxAgeSeconds: 60 * 60 * 24 * 14, // 14 days
+      }),
+      new CacheableResponsePlugin({
+        statuses: [0, 200],
+      }),
+    ],
+  })
+)
+
+// SPA navigation fallback - serve app shell for navigation requests
+// This ensures the app loads offline
+const navigationRoute = new NavigationRoute(
+  async ({ request }) => {
+    try {
+      // Try to fetch from network first
+      const response = await fetch(request)
+      return response
+    } catch (error) {
+      // If offline, serve the cached app shell
+      const cache = await caches.match('/index.html')
+      if (cache) {
+        return cache
+      }
+      throw error
+    }
+  }
+)
+
+registerRoute(navigationRoute)
+
+// Listen for messages from the app
+sw.addEventListener('message', (event: ExtendableMessageEvent) => {
+  if (event.data && event.data.type === 'SKIP_WAITING') {
+    sw.skipWaiting()
+  }
+})
+
+// Log fetch errors for debugging (doesn't affect functionality)
+sw.addEventListener('fetch', (event: FetchEvent) => {
+  const url = new URL(event.request.url)
+  
+  // Don't interfere with WebSocket connections (relay traffic)
+  if (url.protocol === 'ws:' || url.protocol === 'wss:') {
+    return
+  }
+})
+

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

@@ -63,3 +63,58 @@ export const hasRemoteRelay = (relayUrls: string[]): boolean => {
   return relayUrls.some(url => !isLocalRelay(url))
 }
 
+/**
+ * Splits relay URLs into local and remote groups
+ */
+export const partitionRelays = (
+  relayUrls: string[]
+): { local: string[]; remote: string[] } => {
+  const local: string[] = []
+  const remote: string[] = []
+  for (const url of relayUrls) {
+    if (isLocalRelay(url)) local.push(url)
+    else remote.push(url)
+  }
+  return { local, remote }
+}
+
+/**
+ * Returns relays ordered with local first while keeping uniqueness
+ */
+export const prioritizeLocalRelays = (relayUrls: string[]): string[] => {
+  const { local, remote } = partitionRelays(relayUrls)
+  const seen = new Set<string>()
+  const out: string[] = []
+  for (const url of [...local, ...remote]) {
+    if (!seen.has(url)) {
+      seen.add(url)
+      out.push(url)
+    }
+  }
+  return out
+}
+
+// Parallel request helper
+import { completeOnEose, onlyEvents, RelayPool } from 'applesauce-relay'
+import { Observable, takeUntil, timer } from 'rxjs'
+
+export function createParallelReqStreams(
+  relayPool: RelayPool,
+  localRelays: string[],
+  remoteRelays: string[],
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  filter: any,
+  localTimeoutMs = 1200,
+  remoteTimeoutMs = 6000
+): { local$: Observable<unknown>; remote$: Observable<unknown> } {
+  const local$ = (localRelays.length > 0)
+    ? relayPool.req(localRelays, filter).pipe(onlyEvents(), completeOnEose(), takeUntil(timer(localTimeoutMs)))
+    : new Observable<unknown>((sub) => { sub.complete() })
+
+  const remote$ = (remoteRelays.length > 0)
+    ? relayPool.req(remoteRelays, filter).pipe(onlyEvents(), completeOnEose(), takeUntil(timer(remoteTimeoutMs)))
+    : new Observable<unknown>((sub) => { sub.complete() })
+
+  return { local$, remote$ }
+}
+

src/utils/nostrUriResolver.tsx

@@ -0,0 +1,189 @@
+import { decode, npubEncode, noteEncode } from 'nostr-tools/nip19'
+import { getNostrUrl } from '../config/nostrGateways'
+
+/**
+ * Regular expression to match nostr: URIs and bare NIP-19 identifiers
+ * Matches: nostr:npub1..., nostr:note1..., nostr:nprofile1..., nostr:nevent1..., nostr:naddr1...
+ * Also matches bare identifiers without the nostr: prefix
+ */
+const NOSTR_URI_REGEX = /(?:nostr:)?((npub|note|nprofile|nevent|naddr)1[qpzry9x8gf2tvdw0s3jn54khce6mua7l]{58,})/gi
+
+/**
+ * Extract all nostr URIs from text
+ */
+export function extractNostrUris(text: string): string[] {
+  const matches = text.match(NOSTR_URI_REGEX)
+  if (!matches) return []
+  
+  // Extract just the NIP-19 identifier (without nostr: prefix)
+  return matches.map(match => {
+    const cleanMatch = match.replace(/^nostr:/, '')
+    return cleanMatch
+  })
+}
+
+/**
+ * Extract all naddr (article) identifiers from text
+ */
+export function extractNaddrUris(text: string): string[] {
+  const allUris = extractNostrUris(text)
+  return allUris.filter(uri => {
+    try {
+      const decoded = decode(uri)
+      return decoded.type === 'naddr'
+    } catch {
+      return false
+    }
+  })
+}
+
+/**
+ * Decode a NIP-19 identifier and return a human-readable link
+ * For articles (naddr), returns an internal app link
+ * For other types, returns an external gateway link
+ */
+export function createNostrLink(encoded: string): string {
+  try {
+    const decoded = decode(encoded)
+    
+    switch (decoded.type) {
+      case 'naddr':
+        // For articles, link to our internal app route
+        return `/a/${encoded}`
+      case 'npub':
+      case 'nprofile':
+      case 'note':
+      case 'nevent':
+        return getNostrUrl(encoded)
+      default:
+        return getNostrUrl(encoded)
+    }
+  } catch (error) {
+    console.warn('Failed to decode nostr URI:', encoded, error)
+    return getNostrUrl(encoded)
+  }
+}
+
+/**
+ * Get a display label for a nostr URI
+ */
+export function getNostrUriLabel(encoded: string): string {
+  try {
+    const decoded = decode(encoded)
+    
+    switch (decoded.type) {
+      case 'npub':
+        return `@${encoded.slice(0, 12)}...`
+      case 'nprofile': {
+        const npub = npubEncode(decoded.data.pubkey)
+        return `@${npub.slice(0, 12)}...`
+      }
+      case 'note':
+        return `note:${encoded.slice(5, 12)}...`
+      case 'nevent': {
+        const note = noteEncode(decoded.data.id)
+        return `note:${note.slice(5, 12)}...`
+      }
+      case 'naddr': {
+        // For articles, show the identifier if available
+        const identifier = decoded.data.identifier
+        if (identifier && identifier.length > 0) {
+          // Truncate long identifiers but keep them readable
+          return identifier.length > 40 ? `${identifier.slice(0, 37)}...` : identifier
+        }
+        return 'nostr article'
+      }
+      default:
+        return encoded.slice(0, 16) + '...'
+    }
+  } catch (error) {
+    return encoded.slice(0, 16) + '...'
+  }
+}
+
+/**
+ * Replace nostr: URIs in markdown with proper markdown links
+ * This converts: nostr:npub1... to [label](link)
+ */
+export function replaceNostrUrisInMarkdown(markdown: string): string {
+  return markdown.replace(NOSTR_URI_REGEX, (match) => {
+    // Extract just the NIP-19 identifier (without nostr: prefix)
+    const encoded = match.replace(/^nostr:/, '')
+    const link = createNostrLink(encoded)
+    const label = getNostrUriLabel(encoded)
+    
+    return `[${label}](${link})`
+  })
+}
+
+/**
+ * Replace nostr: URIs in markdown with proper markdown links, using resolved titles for articles
+ * This converts: nostr:naddr1... to [Article Title](link)
+ * @param markdown The markdown content to process
+ * @param articleTitles Map of naddr -> title for resolved articles
+ */
+export function replaceNostrUrisInMarkdownWithTitles(
+  markdown: string, 
+  articleTitles: Map<string, string>
+): string {
+  return markdown.replace(NOSTR_URI_REGEX, (match) => {
+    // Extract just the NIP-19 identifier (without nostr: prefix)
+    const encoded = match.replace(/^nostr:/, '')
+    const link = createNostrLink(encoded)
+    
+    // For articles, use the resolved title if available
+    try {
+      const decoded = decode(encoded)
+      if (decoded.type === 'naddr' && articleTitles.has(encoded)) {
+        const title = articleTitles.get(encoded)!
+        return `[${title}](${link})`
+      }
+    } catch (error) {
+      // Ignore decode errors, fall through to default label
+    }
+    
+    // For other types or if title not resolved, use default label
+    const label = getNostrUriLabel(encoded)
+    return `[${label}](${link})`
+  })
+}
+
+/**
+ * Replace nostr: URIs in HTML with clickable links
+ * This is used when processing HTML content directly
+ */
+export function replaceNostrUrisInHTML(html: string): string {
+  return html.replace(NOSTR_URI_REGEX, (match) => {
+    // Extract just the NIP-19 identifier (without nostr: prefix)
+    const encoded = match.replace(/^nostr:/, '')
+    const link = createNostrLink(encoded)
+    const label = getNostrUriLabel(encoded)
+    
+    return `<a href="${link}" class="nostr-uri-link" target="_blank" rel="noopener noreferrer">${label}</a>`
+  })
+}
+
+/**
+ * Get decoded information from a nostr URI for detailed display
+ */
+export function getNostrUriInfo(encoded: string): {
+  type: string
+  decoded: ReturnType<typeof decode> | null
+  link: string
+  label: string
+} {
+  let decoded: ReturnType<typeof decode> | null = null
+  try {
+    decoded = decode(encoded)
+  } catch (error) {
+    // ignore decoding errors
+  }
+  
+  return {
+    type: decoded?.type || 'unknown',
+    decoded,
+    link: createNostrLink(encoded),
+    label: getNostrUriLabel(encoded)
+  }
+}
+

vercel.json

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

vite.config.ts

@@ -1,8 +1,43 @@
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
+import { VitePWA } from 'vite-plugin-pwa'
 
 export default defineConfig({
-  plugins: [react()],
+  plugins: [
+    react(),
+    VitePWA({
+      strategies: 'injectManifest',
+      srcDir: 'src',
+      filename: 'sw.ts',
+      injectRegister: null,
+      manifest: {
+        name: 'Boris - Nostr Bookmarks',
+        short_name: 'Boris',
+        description: 'Your reading list for the Nostr world. A minimal nostr client for bookmark management with highlights.',
+        start_url: '/',
+        scope: '/',
+        display: 'standalone',
+        theme_color: '#0f172a',
+        background_color: '#0b1220',
+        orientation: 'any',
+        categories: ['productivity', 'social', 'utilities'],
+        icons: [
+          { src: '/icon-192.png', sizes: '192x192', type: 'image/png' },
+          { src: '/icon-512.png', sizes: '512x512', type: 'image/png' },
+          { src: '/icon-maskable-192.png', sizes: '192x192', type: 'image/png', purpose: 'maskable' },
+          { src: '/icon-maskable-512.png', sizes: '512x512', type: 'image/png', purpose: 'maskable' }
+        ]
+      },
+      injectManifest: {
+        globPatterns: ['**/*.{js,css,html,ico,png,svg,webp}'],
+        globIgnores: ['**/_headers', '**/_redirects', '**/robots.txt']
+      },
+      devOptions: {
+        enabled: true,
+        type: 'module'
+      }
+    })
+  ],
   server: {
     port: 9802
   },