chore: bump version to 0.9.1

fix(css): constrain video player to prevent horizontal overflow
- Set .reader-video to width: 100%, max-width: 100%, aspect-ratio: 16/9 - Remove negative margins and viewport-based sizing - Add overflow: hidden to contain player within reader bounds - Fixes video bleeding to the right on smaller screens
2026-02-16 12:34:41 +01:00 · 2025-10-20 21:26:25 +02:00 · 2025-10-20 21:26:05 +02:00 · 2025-10-20 21:20:39 +02:00 · 2025-10-20 21:19:27 +02:00 · 2025-10-20 21:15:46 +02:00
41 changed files with 1429 additions and 378 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,70 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0

 ## [Unreleased]

+## [0.9.0] - 2025-01-20
+
+### Added
+
+- User relay list integration (NIP-65) and blocked relays (NIP-51)
+  - Automatically loads user's relay list from kind 10002 events
+  - Supports blocked relay filtering from kind 10006 mute lists
+  - Integrates with existing relay pool for seamless user experience
+- Relay list debug section in Debug component
+  - Enhanced debugging capabilities for relay list loading
+  - Detailed logging for relay query diagnostics
+
+### Changed
+
+- Improved relay list loading performance
+  - Added streaming callback to relay list service for faster results
+  - User relay list now streams into pool immediately and finalizes after blocked relays
+  - Made relay list loading non-blocking in App.tsx
+- Enhanced relay URL handling
+  - Normalized relay URLs to match applesauce-relay internal format
+  - Removed relay.dergigi.com from default relays
+  - Use user's relay list exclusively when logged in
+
+### Fixed
+
+- Resolved all linting issues across the codebase
+- Fixed TypeScript type issues in relayListService
+  - Replaced any types with proper NostrEvent types
+  - Improved type safety and code quality
+- Cleaned up temporary test relays from hardcoded list
+- Removed non-relay console.log statements and debug output
+
+### Technical
+
+- Enhanced relay initialization logging for better diagnostics
+- Improved error handling and timeout management for relay queries
+- Better separation of concerns between relay loading and application startup
+
+## [0.8.6] - 2025-10-20
+
+### Fixed
+
+- React Hooks violations in NostrMentionLink component
+  - Fixed useEffect dependency warnings by removing isMounted from dependencies
+  - Reverted to inline mount tracking with useRef for safer lifecycle handling
+
+## [0.8.4] - 2024-10-20
+
+### Added
+
+- Progressive article hydration for reads tab
+  - Articles now load titles, summaries, images, and author information progressively
+  - Implemented readsController following the same pattern as bookmarkController
+  - Uses AddressLoader for efficient batched article event retrieval
+  - Articles rehydrate as data arrives from relays without blocking initial display
+  - Event store integration for caching article events
+  - Centralized reads data fetching following DRY principles
+
+### Fixed
+
+- Fixed React type imports in useArticleLoader
+  - Import `Dispatch` and `SetStateAction` directly from 'react' instead of using `React.` prefix
+  - Resolves ESLint no-undef errors
+
 ## [0.8.3] - 2025-01-19

 ### Fixed
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
  "name": "boris",
-  "version": "0.8.4",
+  "version": "0.9.0",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "boris",
-      "version": "0.8.4",
+      "version": "0.9.0",
      "dependencies": {
        "@fortawesome/fontawesome-svg-core": "^7.1.0",
        "@fortawesome/free-regular-svg-icons": "^7.1.0",
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "boris",
-  "version": "0.8.4",
+  "version": "0.9.1",
  "description": "A minimal nostr client for bookmark management",
  "homepage": "https://read.withboris.com/",
  "type": "module",
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -18,7 +18,8 @@ import { useToast } from './hooks/useToast'
 import { useOnlineStatus } from './hooks/useOnlineStatus'
 import { RELAYS } from './config/relays'
 import { SkeletonThemeProvider } from './components/Skeletons'
-import { DebugBus } from './utils/debugBus'
+import { loadUserRelayList, loadBlockedRelays, computeRelaySet } from './services/relayListService'
+import { applyRelaySetToPool, getActiveRelayUrls, ALWAYS_LOCAL_RELAYS } from './services/relayManager'
 import { Bookmark } from './types/bookmarks'
 import { bookmarkController } from './services/bookmarkController'
 import { contactsController } from './services/contactsController'
@@ -400,6 +401,8 @@ function App() {
      
      // Create a relay group for better event deduplication and management
      pool.group(RELAYS)
+      console.log('[relay-init] Initial pool setup - added RELAYS:', RELAYS.length, 'relays')
+      console.log('[relay-init] Pool now has:', Array.from(pool.relays.keys()).length, 'relays')
      
      // Load persisted accounts from localStorage
      try {
@@ -417,14 +420,10 @@ function App() {
          
          if (account) {
            accounts.setActive(activeId)
-          } else {
-            console.warn('[bunker] ⚠️  Active ID found but account not in list')
          }
-        } else {
-          // No active account ID in localStorage
        }
      } catch (err) {
-        console.error('[bunker] ❌ Failed to load accounts from storage:', err)
+        console.error('Failed to load accounts from storage:', err)
      }
      
      // Subscribe to accounts changes and persist to localStorage
@@ -493,61 +492,27 @@ function App() {
                  try {
                    const mergedRelays = Array.from(new Set([...(signerData.relays || []), ...RELAYS]))
                    recreatedSigner.relays = mergedRelays
-                  } catch (err) { console.warn('[bunker] failed to merge signer relays', err) }
+                  } catch (err) { /* ignore */ }
                  
                  // Replace the signer on the account
                  nostrConnectAccount.signer = recreatedSigner
                  
-                  // Debug: log publish/subscription calls made by signer (decrypt/sign requests)
+                  // Fire-and-forget publish for bunker: trigger but don't wait for completion
                  // IMPORTANT: bind originals to preserve `this` context used internally by the signer
                  const originalPublish = (recreatedSigner as unknown as { publishMethod: (relays: string[], event: unknown) => unknown }).publishMethod.bind(recreatedSigner)
                  ;(recreatedSigner as unknown as { publishMethod: (relays: string[], event: unknown) => unknown }).publishMethod = (relays: string[], event: unknown) => {
-                    try {
-                      let method: string | undefined
-                      const content = (event as { content?: unknown })?.content
-                      if (typeof content === 'string') {
-                        try {
-                          const parsed = JSON.parse(content) as { method?: string; id?: unknown }
-                          method = parsed?.method
-                        } catch (err) { console.warn('[bunker] failed to parse event content', err) }
-                      }
-                      const summary = {
-                        relays,
-                        kind: (event as { kind?: number })?.kind,
-                        method,
-                        // include tags array for debugging (NIP-46 expects method tag)
-                        tags: (event as { tags?: unknown })?.tags,
-                        contentLength: typeof content === 'string' ? content.length : undefined
-                      }
-                      try { DebugBus.info('bunker', 'publish', summary) } catch (err) { console.warn('[bunker] failed to log to DebugBus', err) }
-                    } catch (err) { console.warn('[bunker] failed to log publish summary', err) }
-                    // Fire-and-forget publish: trigger the publish but do not return the
-                    // Observable/Promise to upstream to avoid their awaiting of completion.
                    const result = originalPublish(relays, event)
                    if (result && typeof (result as { subscribe?: unknown }).subscribe === 'function') {
-                      // Subscribe to the observable but ignore completion/errors (fire-and-forget)
                      try { (result as { subscribe: (h: { complete?: () => void; error?: (e: unknown) => void }) => unknown }).subscribe({ complete: () => { /* noop */ }, error: () => { /* noop */ } }) } catch { /* ignore */ }
                    }
-                    // If it's a Promise, simply ignore it (no await) so it resolves in the background.
-                    // Return a benign object so callers that probe for a "subscribe" property
-                    // (e.g., applesauce makeRequest) won't throw on `"subscribe" in result`.
                    return {} as unknown as never
                  }
-                  const originalSubscribe = (recreatedSigner as unknown as { subscriptionMethod: (relays: string[], filters: unknown[]) => unknown }).subscriptionMethod.bind(recreatedSigner)
-                  ;(recreatedSigner as unknown as { subscriptionMethod: (relays: string[], filters: unknown[]) => unknown }).subscriptionMethod = (relays: string[], filters: unknown[]) => {
-                    try {
-                      try { DebugBus.info('bunker', 'subscribe', { relays, filters }) } catch (err) { console.warn('[bunker] failed to log subscribe to DebugBus', err) }
-                    } catch (err) { console.warn('[bunker] failed to log subscribe summary', err) }
-                    return originalSubscribe(relays, filters)
-                  }

                  
                  // Just ensure the signer is listening for responses - don't call connect() again
                  // The fromBunkerURI already connected with permissions during login
                  if (!nostrConnectAccount.signer.listening) {
                    await nostrConnectAccount.signer.open()
-                  } else {
-                    // Signer already listening
                  }
                  
                  // Attempt a guarded reconnect to ensure Amber authorizes decrypt operations
@@ -557,7 +522,7 @@ function App() {
                      await nostrConnectAccount.signer.connect(undefined, permissions)
                    }
                  } catch (e) {
-                    console.warn('[bunker] ⚠️ Guarded connect() failed:', e)
+                    // Ignore reconnect errors
                  }
                  
                  // Give the subscription a moment to fully establish before allowing decrypt operations
@@ -597,17 +562,137 @@ function App() {
                  // Mark this account as reconnected
                  reconnectedAccounts.add(account.id)
                } catch (error) {
-                  console.error('[bunker] ❌ Failed to open signer:', error)
+                  console.error('Failed to open signer:', error)
                }
              }
            })
      
+      // Handle user relay list and blocked relays when account changes
+      const userRelaysSub = accounts.active$.subscribe((account) => {
+        console.log('[relay-init] userRelaysSub fired, account:', account ? 'logged in' : 'logged out')
+        console.log('[relay-init] Pool has', Array.from(pool.relays.keys()).length, 'relays before applying changes')
+        if (account) {
+          // User logged in - start with hardcoded relays immediately, then stream user relay list updates
+          const pubkey = account.pubkey
+
+          // Bunker relays (if any)
+          let bunkerRelays: string[] = []
+          if (account.type === 'nostr-connect') {
+            const nostrConnectAccount = account as Accounts.NostrConnectAccount<unknown>
+            const signerData = nostrConnectAccount.toJSON().signer
+            bunkerRelays = signerData.relays || []
+          }
+          console.log('[relay-init] Bunker relays:', bunkerRelays.length, 'relays', bunkerRelays)
+
+          // Start with hardcoded + bunker relays immediately (non-blocking)
+          const initialRelays = computeRelaySet({
+            hardcoded: RELAYS,
+            bunker: bunkerRelays,
+            userList: [],
+            blocked: [],
+            alwaysIncludeLocal: ALWAYS_LOCAL_RELAYS
+          })
+          console.log('[relay-init] Initial relay set (hardcoded):', initialRelays.length, 'relays', initialRelays)
+
+          // Apply initial set immediately
+          applyRelaySetToPool(pool, initialRelays)
+          console.log('[relay-init] After initial applyRelaySetToPool, pool has:', Array.from(pool.relays.keys()).length, 'relays')
+
+          // Prepare keep-alive helper
+          const updateKeepAlive = () => {
+            const poolWithSub = pool as unknown as { _keepAliveSubscription?: { unsubscribe: () => void } }
+            if (poolWithSub._keepAliveSubscription) {
+              poolWithSub._keepAliveSubscription.unsubscribe()
+            }
+            const activeRelays = getActiveRelayUrls(pool)
+            const newKeepAliveSub = pool.subscription(activeRelays, { kinds: [0], limit: 0 }).subscribe({
+              next: () => {},
+              error: () => {}
+            })
+            poolWithSub._keepAliveSubscription = newKeepAliveSub
+          }
+
+          // Begin loading blocked relays in background
+          const blockedPromise = loadBlockedRelays(pool, pubkey)
+
+          // Stream user relay list; apply immediately on first/updated event
+          loadUserRelayList(pool, pubkey, {
+            onUpdate: (userRelays) => {
+              const interimRelays = computeRelaySet({
+                hardcoded: [],
+                bunker: bunkerRelays,
+                userList: userRelays,
+                blocked: [],
+                alwaysIncludeLocal: ALWAYS_LOCAL_RELAYS
+              })
+              console.log('[relay-init] Interim relay set from first user list:', interimRelays.length, 'relays', interimRelays)
+              applyRelaySetToPool(pool, interimRelays)
+              updateKeepAlive()
+            }
+          }).then(async (userRelayList) => {
+            const blockedRelays = await blockedPromise.catch(() => [])
+            console.log('[relay-init] User relay list (10002):', userRelayList.length, 'relays', userRelayList.map(r => r.url))
+            console.log('[relay-init] Blocked relays (10006):', blockedRelays.length, 'relays', blockedRelays)
+
+            const finalRelays = computeRelaySet({
+              hardcoded: userRelayList.length > 0 ? [] : RELAYS,
+              bunker: bunkerRelays,
+              userList: userRelayList,
+              blocked: blockedRelays,
+              alwaysIncludeLocal: ALWAYS_LOCAL_RELAYS
+            })
+            console.log('[relay-init] Final relay set (with user preferences):', finalRelays.length, 'relays', finalRelays)
+            applyRelaySetToPool(pool, finalRelays)
+            console.log('[relay-init] After user relay list apply, pool has:', Array.from(pool.relays.keys()).length, 'relays')
+            console.log('[relay-init] Final relay URLs:', Array.from(pool.relays.keys()))
+            updateKeepAlive()
+            
+            // Update address loader with new relays
+            const activeRelays = getActiveRelayUrls(pool)
+            const addressLoader = createAddressLoader(pool, {
+              eventStore: store,
+              lookupRelays: activeRelays
+            })
+            store.addressableLoader = addressLoader
+            store.replaceableLoader = addressLoader
+          }).catch((error) => {
+            console.error('[relay-init] Failed to load user relay list (continuing with initial set):', error)
+            // Continue with initial relay set on error - no need to change anything
+          })
+        } else {
+          // User logged out - reset to hardcoded relays
+          console.log('[relay-init] Applying RELAYS for logged out user, RELAYS.length:', RELAYS.length)
+          applyRelaySetToPool(pool, RELAYS)
+          console.log('[relay-init] After applyRelaySetToPool (logged out), pool has:', Array.from(pool.relays.keys()).length, 'relays')
+          console.log('[relay-init] Relay URLs:', Array.from(pool.relays.keys()))
+          
+          // Update keep-alive subscription
+          const poolWithSub = pool as unknown as { _keepAliveSubscription?: { unsubscribe: () => void } }
+          if (poolWithSub._keepAliveSubscription) {
+            poolWithSub._keepAliveSubscription.unsubscribe()
+          }
+          const newKeepAliveSub = pool.subscription(RELAYS, { kinds: [0], limit: 0 }).subscribe({
+            next: () => {},
+            error: () => {}
+          })
+          poolWithSub._keepAliveSubscription = newKeepAliveSub
+          
+          // Reset address loader
+          const addressLoader = createAddressLoader(pool, {
+            eventStore: store,
+            lookupRelays: RELAYS
+          })
+          store.addressableLoader = addressLoader
+          store.replaceableLoader = addressLoader
+        }
+      })
+      
      // Keep all relay connections alive indefinitely by creating a persistent subscription
      // This prevents disconnection when no other subscriptions are active
      // Create a minimal subscription that never completes to keep connections alive
      const keepAliveSub = pool.subscription(RELAYS, { kinds: [0], limit: 0 }).subscribe({
-        next: () => {}, // No-op, we don't care about events
-        error: (err) => console.warn('Keep-alive subscription error:', err)
+        next: () => {},
+        error: () => {}
      })
      
      // Store subscription for cleanup
@@ -630,6 +715,7 @@ function App() {
        accountsSub.unsubscribe()
        activeSub.unsubscribe()
        bunkerReconnectSub.unsubscribe()
+        userRelaysSub.unsubscribe()
        // Clean up keep-alive subscription if it exists
        const poolWithSub = pool as unknown as { _keepAliveSubscription?: { unsubscribe: () => void } }
        if (poolWithSub._keepAliveSubscription) {
--- a/src/components/BookmarkList.tsx
+++ b/src/components/BookmarkList.tsx
@@ -17,8 +17,8 @@ import { groupIndividualBookmarks, hasContent, getBookmarkSets, getBookmarksWith
 import { UserSettings } from '../services/settingsService'
 import AddBookmarkModal from './AddBookmarkModal'
 import { createWebBookmark } from '../services/webBookmarkService'
-import { RELAYS } from '../config/relays'
 import { Hooks } from 'applesauce-react'
+import { getActiveRelayUrls } from '../services/relayManager'
 import BookmarkFilters, { BookmarkFilterType } from './BookmarkFilters'
 import { filterBookmarksByType } from '../utils/bookmarkTypeClassifier'
 import LoginOptions from './LoginOptions'
@@ -125,7 +125,7 @@ export const BookmarkList: React.FC<BookmarkListProps> = ({
      throw new Error('Please login to create bookmarks')
    }

-    await createWebBookmark(url, title, description, tags, activeAccount, relayPool, RELAYS)
+    await createWebBookmark(url, title, description, tags, activeAccount, relayPool, getActiveRelayUrls(relayPool))
  }

  // Pull-to-refresh for bookmarks
--- a/src/components/BookmarkViews/CardView.tsx
+++ b/src/components/BookmarkViews/CardView.tsx
@@ -5,7 +5,7 @@ import { faChevronDown, faChevronUp } from '@fortawesome/free-solid-svg-icons'
 import { IconDefinition } from '@fortawesome/fontawesome-svg-core'
 import { IndividualBookmark } from '../../types/bookmarks'
 import { formatDate, renderParsedContent } from '../../utils/bookmarkUtils'
-import ContentWithResolvedProfiles from '../ContentWithResolvedProfiles'
+import RichContent from '../RichContent'
 import { classifyUrl } from '../../utils/helpers'
 import { useImageCache } from '../../hooks/useImageCache'
 import { getPreviewImage, fetchOgImage } from '../../utils/imagePreview'
@@ -147,19 +147,15 @@ export const CardView: React.FC<CardViewProps> = ({
      )}
      
      {isArticle && articleSummary ? (
-        <div className="bookmark-content article-summary">
-          <ContentWithResolvedProfiles content={articleSummary} />
-        </div>
+        <RichContent content={articleSummary} className="bookmark-content article-summary" />
      ) : bookmark.parsedContent ? (
        <div className="bookmark-content">
          {shouldTruncate && bookmark.content
-            ? <ContentWithResolvedProfiles content={`${bookmark.content.slice(0, 210).trimEnd()}…`} />
+            ? <RichContent content={`${bookmark.content.slice(0, 210).trimEnd()}…`} className="" />
            : renderParsedContent(bookmark.parsedContent)}
        </div>
      ) : bookmark.content && (
-        <div className="bookmark-content">
-          <ContentWithResolvedProfiles content={shouldTruncate ? `${bookmark.content.slice(0, 210).trimEnd()}…` : bookmark.content} />
-        </div>
+        <RichContent content={shouldTruncate ? `${bookmark.content.slice(0, 210).trimEnd()}…` : bookmark.content} />
      )}

      {contentLength > 210 && (
--- a/src/components/BookmarkViews/CompactView.tsx
+++ b/src/components/BookmarkViews/CompactView.tsx
@@ -3,7 +3,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { IconDefinition } from '@fortawesome/fontawesome-svg-core'
 import { IndividualBookmark } from '../../types/bookmarks'
 import { formatDateCompact } from '../../utils/bookmarkUtils'
-import ContentWithResolvedProfiles from '../ContentWithResolvedProfiles'
+import RichContent from '../RichContent'

 interface CompactViewProps {
  bookmark: IndividualBookmark
@@ -66,7 +66,7 @@ export const CompactView: React.FC<CompactViewProps> = ({
        </span>
        {displayText && (
          <div className="compact-text">
-            <ContentWithResolvedProfiles content={displayText.slice(0, 60) + (displayText.length > 60 ? '…' : '')} />
+            <RichContent content={displayText.slice(0, 60) + (displayText.length > 60 ? '…' : '')} className="" />
          </div>
        )}
        <span className="bookmark-date-compact">{formatDateCompact(bookmark.created_at)}</span>
--- a/src/components/BookmarkViews/LargeView.tsx
+++ b/src/components/BookmarkViews/LargeView.tsx
@@ -4,7 +4,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { IconDefinition } from '@fortawesome/fontawesome-svg-core'
 import { IndividualBookmark } from '../../types/bookmarks'
 import { formatDate } from '../../utils/bookmarkUtils'
-import ContentWithResolvedProfiles from '../ContentWithResolvedProfiles'
+import RichContent from '../RichContent'
 import { IconGetter } from './shared'
 import { useImageCache } from '../../hooks/useImageCache'
 import { getEventUrl } from '../../config/nostrGateways'
@@ -95,13 +95,9 @@ export const LargeView: React.FC<LargeViewProps> = ({
      
      <div className="large-content">
        {isArticle && articleSummary ? (
-          <div className="large-text article-summary">
-            <ContentWithResolvedProfiles content={articleSummary} />
-          </div>
+          <RichContent content={articleSummary} className="large-text article-summary" />
        ) : bookmark.content && (
-          <div className="large-text">
-            <ContentWithResolvedProfiles content={bookmark.content} />
-          </div>
+          <RichContent content={bookmark.content} className="large-text" />
        )}
        
        {/* Reading progress indicator for articles - shown only if there's progress */}
--- a/src/components/Bookmarks.tsx
+++ b/src/components/Bookmarks.tsx
@@ -328,7 +328,7 @@ const Bookmarks: React.FC<BookmarksProps> = ({
        relayPool ? <Explore relayPool={relayPool} eventStore={eventStore} settings={settings} activeTab={exploreTab} /> : null
      ) : undefined}
      me={showMe ? (
-        relayPool ? <Me relayPool={relayPool} eventStore={eventStore} activeTab={meTab} bookmarks={bookmarks} bookmarksLoading={bookmarksLoading} /> : null
+        relayPool ? <Me relayPool={relayPool} eventStore={eventStore} activeTab={meTab} bookmarks={bookmarks} bookmarksLoading={bookmarksLoading} settings={settings} /> : null
      ) : undefined}
      profile={showProfile && profilePubkey ? (
        relayPool ? <Profile relayPool={relayPool} eventStore={eventStore} pubkey={profilePubkey} activeTab={profileTab} /> : null
--- a/src/components/ContentPanel.tsx
+++ b/src/components/ContentPanel.tsx
@@ -4,14 +4,15 @@ import ReactMarkdown from 'react-markdown'
 import remarkGfm from 'remark-gfm'
 import rehypeRaw from 'rehype-raw'
 import rehypePrism from 'rehype-prism-plus'
+import VideoEmbedProcessor from './VideoEmbedProcessor'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import 'prismjs/themes/prism-tomorrow.css'
 import { faSpinner, faCheckCircle, faEllipsisH, faExternalLinkAlt, faMobileAlt, faCopy, faShare, faSearch } from '@fortawesome/free-solid-svg-icons'
 import { ContentSkeleton } from './Skeletons'
 import { nip19 } from 'nostr-tools'
 import { getNostrUrl, getSearchUrl } from '../config/nostrGateways'
-import { RELAYS } from '../config/relays'
 import { RelayPool } from 'applesauce-relay'
+import { getActiveRelayUrls } from '../services/relayManager'
 import { IAccount } from 'applesauce-accounts'
 import { NostrEvent } from 'nostr-tools'
 import { Highlight } from '../types/highlights'
@@ -357,7 +358,8 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
    if (!currentArticle) return null

    const dTag = currentArticle.tags.find(t => t[0] === 'd')?.[1] || ''
-    const relayHints = RELAYS.filter(r => 
+    const activeRelays = relayPool ? getActiveRelayUrls(relayPool) : []
+    const relayHints = activeRelays.filter(r => 
      !r.includes('localhost') && !r.includes('127.0.0.1')
    ).slice(0, 3)

@@ -579,9 +581,8 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
            try {
              const naddr = nip19.naddrEncode({ kind: 30023, pubkey: currentArticle.pubkey, identifier: dTag })
              hasRead = hasRead || archiveController.isMarked(naddr)
-              console.log('[archive][content] check article', { naddr: naddr.slice(0, 24) + '...', hasRead })
            } catch (e) {
-              console.warn('[archive][content] encode naddr failed', e)
+              // Silently ignore encoding errors
            }
          }
        } else {
@@ -593,7 +594,6 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
          // Also check archiveController
          const ctrl = archiveController.isMarked(selectedUrl)
          hasRead = hasRead || ctrl
-          console.log('[archive][content] check url', { url: selectedUrl, hasRead, ctrl })
        }
        setIsMarkedAsRead(hasRead)
      } catch (error) {
@@ -674,7 +674,6 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
            if (dTag) {
              const naddr = nip19.naddrEncode({ kind: 30023, pubkey: currentArticle.pubkey, identifier: dTag })
              archiveController.mark(naddr)
-              console.log('[archive][content] optimistic mark article', naddr.slice(0, 24) + '...')
            }
          } catch (err) {
            console.warn('[archive][content] optimistic article mark failed', err)
@@ -686,7 +685,6 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
            relayPool
          )
          archiveController.mark(selectedUrl)
-          console.log('[archive][content] optimistic mark url', selectedUrl)
        }
      } catch (error) {
        console.error('Failed to mark as read:', error)
@@ -736,11 +734,10 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
            remarkPlugins={[remarkGfm]}
            rehypePlugins={[rehypeRaw, rehypePrism]}
            components={{
-              img: ({ src, alt, ...props }) => (
+              img: ({ src, alt }) => (
                <img 
                  src={src} 
                  alt={alt} 
-                  {...props}
                />
              )
            }}
@@ -846,10 +843,11 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
        <>
          {markdown ? (
            renderedMarkdownHtml && finalHtml ? (
-              <div 
-                ref={contentRef} 
-                className="reader-markdown" 
-                dangerouslySetInnerHTML={{ __html: finalHtml }}
+              <VideoEmbedProcessor
+                ref={contentRef}
+                html={finalHtml}
+                renderVideoLinksAsEmbeds={settings?.renderVideoLinksAsEmbeds === true && !isExternalVideo}
+                className="reader-markdown"
                onMouseUp={handleSelectionEnd}
                onTouchEnd={handleSelectionEnd}
              />
@@ -861,10 +859,11 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
              </div>
            )
          ) : (
-            <div 
-              ref={contentRef} 
-              className="reader-html" 
-              dangerouslySetInnerHTML={{ __html: finalHtml || html || '' }}
+            <VideoEmbedProcessor
+              ref={contentRef}
+              html={finalHtml || html || ''}
+              renderVideoLinksAsEmbeds={settings?.renderVideoLinksAsEmbeds === true && !isExternalVideo}
+              className="reader-html"
              onMouseUp={handleSelectionEnd}
              onTouchEnd={handleSelectionEnd}
            />
--- a/src/components/Debug.tsx
+++ b/src/components/Debug.tsx
@@ -114,6 +114,12 @@ const Debug: React.FC<DebugProps> = ({
  const [markAsReadReactions, setMarkAsReadReactions] = useState<NostrEvent[]>([])
  const [tLoadMarkAsRead, setTLoadMarkAsRead] = useState<number | null>(null)
  const [tFirstMarkAsRead, setTFirstMarkAsRead] = useState<number | null>(null)
+
+  // Relay list loading state
+  const [isLoadingRelayList, setIsLoadingRelayList] = useState(false)
+  const [relayListEvents, setRelayListEvents] = useState<NostrEvent[]>([])
+  const [tLoadRelayList, setTLoadRelayList] = useState<number | null>(null)
+  const [tFirstRelayList, setTFirstRelayList] = useState<number | null>(null)
  
  // Deduplicated reading progress from controller
  const [deduplicatedProgressMap, setDeduplicatedProgressMap] = useState<Map<string, number>>(new Map())
@@ -127,6 +133,7 @@ const Debug: React.FC<DebugProps> = ({
    loadHighlights?: { startTime: number }
    loadReadingProgress?: { startTime: number }
    loadMarkAsRead?: { startTime: number }
+    loadRelayList?: { startTime: number }
  }>({})
  
  // Web of Trust state
@@ -886,6 +893,70 @@ const Debug: React.FC<DebugProps> = ({
    DebugBus.info('debug', 'Cleared mark-as-read reactions data')
  }

+  const handleLoadRelayList = async () => {
+    if (!relayPool || !activeAccount?.pubkey) {
+      DebugBus.warn('debug', 'Please log in to load relay list')
+      return
+    }
+
+    try {
+      setIsLoadingRelayList(true)
+      setRelayListEvents([])
+      setTLoadRelayList(null)
+      setTFirstRelayList(null)
+      DebugBus.info('debug', 'Loading relay list (kind 10002)...')
+
+      const start = performance.now()
+      let firstEventTime: number | null = null
+      setLiveTiming(prev => ({ ...prev, loadRelayList: { startTime: start } }))
+
+      const { queryEvents } = await import('../services/dataFetch')
+
+      // Query for kind:10002 (relay list)
+      const events = await queryEvents(relayPool, { 
+        kinds: [10002], 
+        authors: [activeAccount.pubkey],
+        limit: 10
+      }, {
+        onEvent: (evt) => {
+          if (firstEventTime === null) {
+            firstEventTime = performance.now() - start
+            setTFirstRelayList(Math.round(firstEventTime))
+          }
+          setRelayListEvents(prev => [...prev, evt])
+        }
+      })
+      
+      const elapsed = Math.round(performance.now() - start)
+      setTLoadRelayList(elapsed)
+      setLiveTiming(prev => {
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars, no-unused-vars
+        const { loadRelayList, ...rest } = prev
+        return rest
+      })
+
+      DebugBus.info('debug', `Loaded ${events.length} relay list events in ${elapsed}ms`)
+      
+      // Log details about the events
+      events.forEach((event, index) => {
+        const relayCount = event.tags.filter(tag => tag[0] === 'r').length
+        DebugBus.info('debug', `Event ${index + 1}: ${relayCount} relays, created ${new Date(event.created_at * 1000).toISOString()}`)
+      })
+    } catch (err) {
+      console.error('Failed to load relay list:', err)
+      DebugBus.error('debug', `Failed to load relay list: ${err instanceof Error ? err.message : String(err)}`)
+    } finally {
+      setIsLoadingRelayList(false)
+    }
+  }
+
+  const handleClearRelayList = () => {
+    setRelayListEvents([])
+    setTLoadRelayList(null)
+    setTFirstRelayList(null)
+    DebugBus.info('debug', 'Cleared relay list data')
+  }
+
  const handleLoadFriendsList = async () => {
    if (!relayPool || !activeAccount?.pubkey) {
      DebugBus.warn('debug', 'Please log in to load friends list')
@@ -1698,6 +1769,72 @@ const Debug: React.FC<DebugProps> = ({
          )}
        </div>

+        {/* Relay List Loading Section */}
+        <div className="settings-section">
+          <h3 className="section-title">Relay List Loading (kind 10002)</h3>
+          <div className="text-sm opacity-70 mb-3">Load your relay list to debug dynamic relay integration:</div>
+          
+          <div className="flex gap-2 mb-3 items-center">
+            <button 
+              className="btn btn-primary" 
+              onClick={handleLoadRelayList}
+              disabled={isLoadingRelayList || !relayPool || !activeAccount}
+            >
+              {isLoadingRelayList ? (
+                <>
+                  <FontAwesomeIcon icon={faSpinner} className="animate-spin mr-2" />
+                  Loading...
+                </>
+              ) : (
+                'Load Relay List'
+              )}
+            </button>
+            <button 
+              className="btn btn-secondary ml-auto" 
+              onClick={handleClearRelayList}
+              disabled={relayListEvents.length === 0}
+            >
+              Clear
+            </button>
+          </div>
+          
+          <div className="flex gap-4 mb-3 text-sm">
+            <Stat label="total" value={tLoadRelayList} />
+            <Stat label="first event" value={tFirstRelayList} />
+          </div>
+          {relayListEvents.length > 0 && (
+            <div className="mb-3">
+              <div className="text-sm opacity-70 mb-2">Loaded Relay List Events ({relayListEvents.length}):</div>
+              <div className="space-y-2 max-h-96 overflow-y-auto">
+                {relayListEvents.map((evt, idx) => {
+                  const relayTags = evt.tags?.filter((t: string[]) => t[0] === 'r') || []
+                  
+                  return (
+                    <div key={idx} className="font-mono text-xs p-2 bg-gray-100 dark:bg-gray-800 rounded">
+                      <div className="font-semibold mb-1">Relay List Event #{idx + 1}</div>
+                      <div className="opacity-70 mb-1">
+                        <div>Kind: {evt.kind}</div>
+                        <div>Author: {evt.pubkey.slice(0, 16)}...</div>
+                        <div>Created: {new Date(evt.created_at * 1000).toLocaleString()}</div>
+                        <div>Relays: {relayTags.length}</div>
+                      </div>
+                      <div className="mt-1">
+                        <div className="text-[11px] opacity-70 mb-1">Relay URLs:</div>
+                        {relayTags.map((tag, tagIdx) => (
+                          <div key={tagIdx} className="text-[10px] opacity-60 break-all">
+                            {tag[1]} {tag[2] ? `(${tag[2]})` : ''}
+                          </div>
+                        ))}
+                      </div>
+                      <div className="opacity-50 mt-1 text-[10px] break-all">ID: {evt.id}</div>
+                    </div>
+                  )
+                })}
+              </div>
+            </div>
+          )}
+        </div>
+
        {/* Web of Trust Section */}
        <div className="settings-section">
          <h3 className="section-title">Web of Trust</h3>
--- a/src/components/HighlightItem.tsx
+++ b/src/components/HighlightItem.tsx
@@ -8,8 +8,8 @@ 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 { getActiveRelayUrls } from '../services/relayManager'
 import { nip19 } from 'nostr-tools'
 import { formatDateCompact } from '../utils/bookmarkUtils'
 import { createDeletionRequest } from '../services/deletionService'
@@ -17,6 +17,7 @@ import { getNostrUrl } from '../config/nostrGateways'
 import CompactButton from './CompactButton'
 import { HighlightCitation } from './HighlightCitation'
 import { useNavigate } from 'react-router-dom'
+import NostrMentionLink from './NostrMentionLink'

 // Helper to detect if a URL is an image
 const isImageUrl = (url: string): boolean => {
@@ -29,99 +30,6 @@ const isImageUrl = (url: string): boolean => {
  }
 }

-// Helper to render a nostr identifier
-const renderNostrId = (nostrUri: string, index: number): React.ReactElement => {
-  try {
-    // Remove nostr: prefix
-    const identifier = nostrUri.replace(/^nostr:/, '')
-    const decoded = nip19.decode(identifier)
-    
-    switch (decoded.type) {
-      case 'npub': {
-        const pubkey = decoded.data
-        return (
-          <a
-            key={index}
-            href={`/p/${nip19.npubEncode(pubkey)}`}
-            className="highlight-comment-link"
-            onClick={(e) => e.stopPropagation()}
-          >
-            @{pubkey.slice(0, 8)}...
-          </a>
-        )
-      }
-      case 'nprofile': {
-        const { pubkey } = decoded.data
-        const npub = nip19.npubEncode(pubkey)
-        return (
-          <a
-            key={index}
-            href={`/p/${npub}`}
-            className="highlight-comment-link"
-            onClick={(e) => e.stopPropagation()}
-          >
-            @{pubkey.slice(0, 8)}...
-          </a>
-        )
-      }
-      case 'naddr': {
-        const { kind, pubkey, identifier } = decoded.data
-        // Check if it's a blog post (kind:30023)
-        if (kind === 30023) {
-          const naddr = nip19.naddrEncode({ kind, pubkey, identifier })
-          return (
-            <a
-              key={index}
-              href={`/a/${naddr}`}
-              className="highlight-comment-link"
-              onClick={(e) => e.stopPropagation()}
-            >
-              {identifier || 'Article'}
-            </a>
-          )
-        }
-        // For other kinds, show shortened identifier
-        return (
-          <span key={index} className="highlight-comment-nostr-id">
-            nostr:{identifier.slice(0, 12)}...
-          </span>
-        )
-      }
-      case 'note': {
-        const eventId = decoded.data
-        return (
-          <span key={index} className="highlight-comment-nostr-id">
-            note:{eventId.slice(0, 12)}...
-          </span>
-        )
-      }
-      case 'nevent': {
-        const { id } = decoded.data
-        return (
-          <span key={index} className="highlight-comment-nostr-id">
-            event:{id.slice(0, 12)}...
-          </span>
-        )
-      }
-      default:
-        // Fallback for unrecognized types
-        return (
-          <span key={index} className="highlight-comment-nostr-id">
-            {identifier.slice(0, 20)}...
-          </span>
-        )
-    }
-  } catch (error) {
-    // If decoding fails, show shortened identifier
-    const identifier = nostrUri.replace(/^nostr:/, '')
-    return (
-      <span key={index} className="highlight-comment-nostr-id">
-        {identifier.slice(0, 20)}...
-      </span>
-    )
-  }
-}
-
 // Component to render comment with links, inline images, and nostr identifiers
 const CommentContent: React.FC<{ text: string }> = ({ text }) => {
  // Pattern to match both http(s) URLs and nostr: URIs
@@ -131,9 +39,15 @@ const CommentContent: React.FC<{ text: string }> = ({ text }) => {
  return (
    <>
      {parts.map((part, index) => {
-        // Handle nostr: URIs
+        // Handle nostr: URIs - now with profile resolution
        if (part.startsWith('nostr:')) {
-          return renderNostrId(part, index)
+          return (
+            <NostrMentionLink
+              key={index}
+              nostrUri={part}
+              onClick={(e) => e.stopPropagation()}
+            />
+          )
        }
        
        // Handle http(s) URLs
@@ -236,10 +150,10 @@ export const HighlightItem: React.FC<HighlightItemProps> = ({
          setShowOfflineIndicator(false)
          
          // Update the highlight with all relays after successful sync
-          if (onHighlightUpdate && highlight.isLocalOnly) {
+          if (onHighlightUpdate && highlight.isLocalOnly && relayPool) {
            const updatedHighlight = {
              ...highlight,
-              publishedRelays: RELAYS,
+              publishedRelays: getActiveRelayUrls(relayPool),
              isLocalOnly: false,
              isOfflineCreated: false
            }
@@ -250,7 +164,7 @@ export const HighlightItem: React.FC<HighlightItemProps> = ({
    })
    
    return unsubscribe
-  }, [highlight, onHighlightUpdate])
+  }, [highlight, onHighlightUpdate, relayPool])
  
  useEffect(() => {
    if (isSelected && itemRef.current) {
@@ -310,7 +224,8 @@ export const HighlightItem: React.FC<HighlightItemProps> = ({
  const getHighlightLinks = () => {
    // Encode the highlight event itself (kind 9802) as a nevent
    // Get non-local relays for the hint
-    const relayHints = RELAYS.filter(r => 
+    const activeRelays = relayPool ? getActiveRelayUrls(relayPool) : []
+    const relayHints = activeRelays.filter(r => 
      !r.includes('localhost') && !r.includes('127.0.0.1')
    ).slice(0, 3) // Include up to 3 relay hints
    
@@ -346,7 +261,7 @@ export const HighlightItem: React.FC<HighlightItemProps> = ({
      }
      
      // Publish to all configured relays - let the relay pool handle connection state
-      const targetRelays = RELAYS
+      const targetRelays = getActiveRelayUrls(relayPool)
      
      
      await relayPool.publish(targetRelays, event)
@@ -414,7 +329,8 @@ export const HighlightItem: React.FC<HighlightItemProps> = ({
    }
    
    // Fallback: show all relays we queried (where this was likely fetched from)
-    const relayNames = RELAYS.map(url => 
+    const activeRelays = relayPool ? getActiveRelayUrls(relayPool) : []
+    const relayNames = activeRelays.map(url => 
      url.replace(/^wss?:\/\//, '').replace(/\/$/, '')
    )
    return {
--- a/src/components/LoginOptions.tsx
+++ b/src/components/LoginOptions.tsx
@@ -124,7 +124,7 @@ const LoginOptions: React.FC = () => {
      <div className="login-content">
        <h2 className="login-title">Hi! I'm Boris.</h2>
        <p className="login-description">
-          Connect your npub to see your bookmarks, explore long-form articles, and create <mark className="login-highlight">your own highlights</mark>.
+          <mark className="login-highlight">Connect your npub</mark> to see your bookmarks, explore long-form articles, and create <mark className="login-highlight">your own highlights.</mark>
        </p>
        
        <div className="login-buttons">
--- a/src/components/Me.tsx
+++ b/src/components/Me.tsx
@@ -23,7 +23,7 @@ import { getCachedMeData, updateCachedHighlights } from '../services/meCache'
 import { faBooks } from '../icons/customIcons'
 import { usePullToRefresh } from 'use-pull-to-refresh'
 import RefreshIndicator from './RefreshIndicator'
-import { groupIndividualBookmarks, hasContent } from '../utils/bookmarkUtils'
+import { groupIndividualBookmarks, hasContent, hasCreationDate } from '../utils/bookmarkUtils'
 import BookmarkFilters, { BookmarkFilterType } from './BookmarkFilters'
 import { filterBookmarksByType } from '../utils/bookmarkTypeClassifier'
 import ReadingProgressFilters, { ReadingProgressFilterType } from './ReadingProgressFilters'
@@ -31,6 +31,7 @@ import { filterByReadingProgress } from '../utils/readingProgressUtils'
 import { deriveLinksFromBookmarks } from '../utils/linksFromBookmarks'
 import { readingProgressController } from '../services/readingProgressController'
 import { archiveController } from '../services/archiveController'
+import { UserSettings } from '../services/settingsService'

 interface MeProps {
  relayPool: RelayPool
@@ -38,6 +39,7 @@ interface MeProps {
  activeTab?: TabType
  bookmarks: Bookmark[] // From centralized App.tsx state
  bookmarksLoading?: boolean // From centralized App.tsx state (reserved for future use)
+  settings: UserSettings
 }

 type TabType = 'highlights' | 'reading-list' | 'reads' | 'links' | 'writings'
@@ -49,7 +51,8 @@ const Me: React.FC<MeProps> = ({
  relayPool, 
  eventStore,
  activeTab: propActiveTab,
-  bookmarks
+  bookmarks,
+  settings
 }) => {
  const activeAccount = Hooks.useActiveAccount()
  const navigate = useNavigate()
@@ -489,6 +492,7 @@ const Me: React.FC<MeProps> = ({
  // Merge and flatten all individual bookmarks
  const allIndividualBookmarks = bookmarks.flatMap(b => b.individualBookmarks || [])
    .filter(hasContent)
+    .filter(b => !settings?.hideBookmarksWithoutCreationDate || hasCreationDate(b))
  
  // Apply bookmark filter
  const filteredBookmarks = filterBookmarksByType(allIndividualBookmarks, bookmarkFilter)
@@ -560,27 +564,6 @@ const Me: React.FC<MeProps> = ({
    ? buildArchiveOnly(linksWithProgress, { kind: 'external' })
    : []

-  // Debug logs for archive filter issues
-  if (readingProgressFilter === 'archive') {
-    const ids = Array.from(new Set([
-      ...archiveController.getMarkedIds(),
-      ...readingProgressController.getMarkedAsReadIds()
-    ]))
-    const readIds = new Set(reads.map(i => i.id))
-    const matches = ids.filter(id => readIds.has(id))
-    const nonMatches = ids.filter(id => !readIds.has(id)).slice(0, 5)
-    console.log('[archive][me] counts', {
-      reads: reads.length,
-      filteredReads: filteredReads.length,
-      links: links.length,
-      linksWithProgress: linksWithProgress.length,
-      filteredLinks: filteredLinks.length,
-      markedIds: ids.length,
-      sampleMarked: ids.slice(0, 3),
-      matches: matches.length,
-      nonMatches
-    })
-  }
  const sections: Array<{ key: string; title: string; items: IndividualBookmark[] }> = 
    groupingMode === 'flat'
      ? [{ key: 'all', title: `All Bookmarks (${filteredBookmarks.length})`, items: filteredBookmarks }]
--- a/src/components/NostrMentionLink.tsx
+++ b/src/components/NostrMentionLink.tsx
@@ -0,0 +1,134 @@
+import React from 'react'
+import { nip19 } from 'nostr-tools'
+import { useEventModel } from 'applesauce-react/hooks'
+import { Models } from 'applesauce-core'
+
+interface NostrMentionLinkProps {
+  nostrUri: string
+  onClick?: (e: React.MouseEvent) => void
+  className?: string
+}
+
+/**
+ * Component to render nostr mentions with resolved profile names
+ * Handles npub, nprofile, note, nevent, and naddr URIs
+ */
+const NostrMentionLink: React.FC<NostrMentionLinkProps> = ({ 
+  nostrUri, 
+  onClick,
+  className = 'highlight-comment-link'
+}) => {
+  // Decode the nostr URI first
+  let decoded: ReturnType<typeof nip19.decode> | null = null
+  let pubkey: string | undefined
+  
+  try {
+    const identifier = nostrUri.replace(/^nostr:/, '')
+    decoded = nip19.decode(identifier)
+    
+    // Extract pubkey for profile fetching (works for npub and nprofile)
+    if (decoded.type === 'npub') {
+      pubkey = decoded.data
+    } else if (decoded.type === 'nprofile') {
+      pubkey = decoded.data.pubkey
+    }
+  } catch (error) {
+    // Decoding failed, will fallback to shortened identifier
+  }
+  
+  // Fetch profile at top level (Rules of Hooks)
+  const profile = useEventModel(Models.ProfileModel, pubkey ? [pubkey] : null)
+  
+  // If decoding failed, show shortened identifier
+  if (!decoded) {
+    const identifier = nostrUri.replace(/^nostr:/, '')
+    return (
+      <span className="highlight-comment-nostr-id">
+        {identifier.slice(0, 20)}...
+      </span>
+    )
+  }
+  
+  // Render based on decoded type
+  switch (decoded.type) {
+    case 'npub': {
+      const pk = decoded.data
+      const displayName = profile?.name || profile?.display_name || profile?.nip05 || `${pk.slice(0, 8)}...`
+      
+      return (
+        <a
+          href={`/p/${nip19.npubEncode(pk)}`}
+          className={className}
+          onClick={onClick}
+        >
+          @{displayName}
+        </a>
+      )
+    }
+    case 'nprofile': {
+      const { pubkey: pk } = decoded.data
+      const displayName = profile?.name || profile?.display_name || profile?.nip05 || `${pk.slice(0, 8)}...`
+      const npub = nip19.npubEncode(pk)
+      
+      return (
+        <a
+          href={`/p/${npub}`}
+          className={className}
+          onClick={onClick}
+        >
+          @{displayName}
+        </a>
+      )
+    }
+    case 'naddr': {
+      const { kind, pubkey: pk, identifier: addrIdentifier } = decoded.data
+      // Check if it's a blog post (kind:30023)
+      if (kind === 30023) {
+        const naddr = nip19.naddrEncode({ kind, pubkey: pk, identifier: addrIdentifier })
+        return (
+          <a
+            href={`/a/${naddr}`}
+            className={className}
+            onClick={onClick}
+          >
+            {addrIdentifier || 'Article'}
+          </a>
+        )
+      }
+      // For other kinds, show shortened identifier
+      return (
+        <span className="highlight-comment-nostr-id">
+          nostr:{addrIdentifier.slice(0, 12)}...
+        </span>
+      )
+    }
+    case 'note': {
+      const eventId = decoded.data
+      return (
+        <span className="highlight-comment-nostr-id">
+          note:{eventId.slice(0, 12)}...
+        </span>
+      )
+    }
+    case 'nevent': {
+      const { id } = decoded.data
+      return (
+        <span className="highlight-comment-nostr-id">
+          event:{id.slice(0, 12)}...
+        </span>
+      )
+    }
+    default: {
+      // Fallback for unrecognized types
+      const identifier = nostrUri.replace(/^nostr:/, '')
+      return (
+        <span className="highlight-comment-nostr-id">
+          {identifier.slice(0, 20)}...
+        </span>
+      )
+    }
+  }
+}
+
+export default NostrMentionLink
+
--- a/src/components/Profile.tsx
+++ b/src/components/Profile.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useCallback } from 'react'
+import React, { useState, useEffect, useCallback, useMemo } from 'react'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faHighlighter, faPenToSquare } from '@fortawesome/free-solid-svg-icons'
 import { IEventStore } from 'applesauce-core'
@@ -8,8 +8,8 @@ import { useNavigate } from 'react-router-dom'
 import { HighlightItem } from './HighlightItem'
 import { BlogPostPreview, fetchBlogPostsFromAuthors } from '../services/exploreService'
 import { fetchHighlights } from '../services/highlightService'
-import { RELAYS } from '../config/relays'
 import { KINDS } from '../config/kinds'
+import { getActiveRelayUrls } from '../services/relayManager'
 import AuthorCard from './AuthorCard'
 import BlogPostCard from './BlogPostCard'
 import { BlogPostSkeleton, HighlightSkeleton } from './Skeletons'
@@ -57,6 +57,15 @@ const Profile: React.FC<ProfileProps> = ({
    [pubkey]
  )

+  // Sort writings by publication date, newest first
+  const sortedWritings = useMemo(() => {
+    return cachedWritings.slice().sort((a, b) => {
+      const timeA = a.published || a.event.created_at
+      const timeB = b.published || b.event.created_at
+      return timeB - timeA
+    })
+  }, [cachedWritings])
+
  // Update local state when prop changes
  useEffect(() => {
    if (propActiveTab) {
@@ -109,7 +118,7 @@ const Profile: React.FC<ProfileProps> = ({
      })
    
    // Fetch writings in background (no limit for single user profile)
-    fetchBlogPostsFromAuthors(relayPool, [pubkey], RELAYS, undefined, null)
+    fetchBlogPostsFromAuthors(relayPool, [pubkey], getActiveRelayUrls(relayPool), undefined, null)
      .then(writings => {
        writings.forEach(w => eventStore.add(w.event))
      })
@@ -168,7 +177,7 @@ const Profile: React.FC<ProfileProps> = ({
  }

  const npub = nip19.npubEncode(pubkey)
-  const showSkeletons = cachedHighlights.length === 0 && cachedWritings.length === 0
+  const showSkeletons = cachedHighlights.length === 0 && sortedWritings.length === 0

  const renderTabContent = () => {
    switch (activeTab) {
@@ -209,13 +218,13 @@ const Profile: React.FC<ProfileProps> = ({
            </div>
          )
        }
-        return cachedWritings.length === 0 ? (
+        return sortedWritings.length === 0 ? (
          <div className="explore-loading" style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', padding: '4rem', color: 'var(--text-secondary)' }}>
            No articles written yet.
          </div>
        ) : (
          <div className="explore-grid">
-            {cachedWritings.map((post) => (
+            {sortedWritings.map((post) => (
              <BlogPostCard
                key={post.event.id}
                post={post}
--- a/src/components/RichContent.tsx
+++ b/src/components/RichContent.tsx
@@ -0,0 +1,77 @@
+import React from 'react'
+import NostrMentionLink from './NostrMentionLink'
+
+interface RichContentProps {
+  content: string
+  className?: string
+}
+
+/**
+ * Component to render text content with:
+ * - Clickable links
+ * - Resolved nostr mentions (npub, nprofile, note, nevent, naddr)
+ * - Plain text
+ * 
+ * Handles both nostr:npub1... and plain npub1... formats
+ */
+const RichContent: React.FC<RichContentProps> = ({ 
+  content, 
+  className = 'bookmark-content' 
+}) => {
+  // Pattern to match:
+  // 1. nostr: URIs (nostr:npub1..., nostr:note1..., etc.)
+  // 2. Plain nostr identifiers (npub1..., nprofile1..., note1..., etc.)
+  // 3. http(s) URLs
+  const pattern = /(nostr:[a-z0-9]+|npub1[a-z0-9]+|nprofile1[a-z0-9]+|note1[a-z0-9]+|nevent1[a-z0-9]+|naddr1[a-z0-9]+|https?:\/\/[^\s]+)/gi
+  
+  const parts = content.split(pattern)
+  
+  return (
+    <div className={className}>
+      {parts.map((part, index) => {
+        // Handle nostr: URIs
+        if (part.startsWith('nostr:')) {
+          return (
+            <NostrMentionLink
+              key={index}
+              nostrUri={part}
+            />
+          )
+        }
+        
+        // Handle plain nostr identifiers (add nostr: prefix)
+        if (
+          part.match(/^(npub1|nprofile1|note1|nevent1|naddr1)[a-z0-9]+$/i)
+        ) {
+          return (
+            <NostrMentionLink
+              key={index}
+              nostrUri={`nostr:${part}`}
+            />
+          )
+        }
+        
+        // Handle http(s) URLs
+        if (part.match(/^https?:\/\//)) {
+          return (
+            <a
+              key={index}
+              href={part}
+              className="nostr-link"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              {part}
+            </a>
+          )
+        }
+        
+        // Plain text
+        return <React.Fragment key={index}>{part}</React.Fragment>
+      })}
+    </div>
+  )
+}
+
+export default RichContent
+
--- a/src/components/Settings.tsx
+++ b/src/components/Settings.tsx
@@ -6,6 +6,7 @@ import IconButton from './IconButton'
 import { loadFont } from '../utils/fontLoader'
 import ThemeSettings from './Settings/ThemeSettings'
 import ReadingDisplaySettings from './Settings/ReadingDisplaySettings'
+import MediaDisplaySettings from './Settings/MediaDisplaySettings'
 import ExploreSettings from './Settings/ExploreSettings'
 import LayoutBehaviorSettings from './Settings/LayoutBehaviorSettings'
 import ZapSettings from './Settings/ZapSettings'
@@ -39,6 +40,8 @@ const DEFAULT_SETTINGS: UserSettings = {
  useLocalRelayAsCache: true,
  rebroadcastToAllRelays: false,
  paragraphAlignment: 'justify',
+  fullWidthImages: true,
+  renderVideoLinksAsEmbeds: true,
  syncReadingPosition: true,
  autoMarkAsReadOnCompletion: false,
  hideBookmarksWithoutCreationDate: true,
@@ -169,6 +172,7 @@ const Settings: React.FC<SettingsProps> = ({ settings, onSave, onClose, relayPoo
      <div className="settings-content">
        <ThemeSettings settings={localSettings} onUpdate={handleUpdate} />
        <ReadingDisplaySettings settings={localSettings} onUpdate={handleUpdate} />
+        <MediaDisplaySettings settings={localSettings} onUpdate={handleUpdate} />
        <ExploreSettings settings={localSettings} onUpdate={handleUpdate} />
        <ZapSettings settings={localSettings} onUpdate={handleUpdate} />
        <LayoutBehaviorSettings settings={localSettings} onUpdate={handleUpdate} />
--- a/src/components/Settings/MediaDisplaySettings.tsx
+++ b/src/components/Settings/MediaDisplaySettings.tsx
@@ -0,0 +1,43 @@
+import React from 'react'
+import { UserSettings } from '../../services/settingsService'
+
+interface MediaDisplaySettingsProps {
+  settings: UserSettings
+  onUpdate: (updates: Partial<UserSettings>) => void
+}
+
+const MediaDisplaySettings: React.FC<MediaDisplaySettingsProps> = ({ settings, onUpdate }) => {
+  return (
+    <div className="settings-section">
+      <h3 className="section-title">Media Display</h3>
+      
+      <div className="setting-group">
+        <label htmlFor="fullWidthImages" className="checkbox-label">
+          <input
+            id="fullWidthImages"
+            type="checkbox"
+            checked={settings.fullWidthImages === true}
+            onChange={(e) => onUpdate({ fullWidthImages: e.target.checked })}
+            className="setting-checkbox"
+          />
+          <span>Full-width images in articles</span>
+        </label>
+      </div>
+
+      <div className="setting-group">
+        <label htmlFor="renderVideoLinksAsEmbeds" className="checkbox-label">
+          <input
+            id="renderVideoLinksAsEmbeds"
+            type="checkbox"
+            checked={settings.renderVideoLinksAsEmbeds === true}
+            onChange={(e) => onUpdate({ renderVideoLinksAsEmbeds: e.target.checked })}
+            className="setting-checkbox"
+          />
+          <span>Render video links as embeds</span>
+        </label>
+      </div>
+    </div>
+  )
+}
+
+export default MediaDisplaySettings
--- a/src/components/Settings/ReadingDisplaySettings.tsx
+++ b/src/components/Settings/ReadingDisplaySettings.tsx
@@ -59,6 +59,7 @@ const ReadingDisplaySettings: React.FC<ReadingDisplaySettingsProps> = ({ setting
        </div>
      </div>

+
      <div className="setting-group setting-inline">
        <label>Default Highlight Visibility</label>
        <div className="highlight-level-toggles">
--- a/src/components/Support.tsx
+++ b/src/components/Support.tsx
@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react'
 import { RelayPool } from 'applesauce-relay'
 import { IEventStore } from 'applesauce-core'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faHeart, faSpinner, faUserCircle } from '@fortawesome/free-solid-svg-icons'
+import { faHeart, faUserCircle } from '@fortawesome/free-solid-svg-icons'
 import { fetchBorisZappers, ZapSender } from '../services/zapReceiptService'
 import { fetchProfiles } from '../services/profileService'
 import { UserSettings } from '../services/settingsService'
@@ -21,7 +21,7 @@ type SupporterProfile = ZapSender

 const Support: React.FC<SupportProps> = ({ relayPool, eventStore, settings }) => {
  const [supporters, setSupporters] = useState<SupporterProfile[]>([])
-  const [loading, setLoading] = useState(true)
+  const [loading, setLoading] = useState(false)

  useEffect(() => {
    const loadSupporters = async () => {
@@ -31,7 +31,8 @@ const Support: React.FC<SupportProps> = ({ relayPool, eventStore, settings }) =>
        
        if (zappers.length > 0) {
          const pubkeys = zappers.map(z => z.pubkey)
-          await fetchProfiles(relayPool, eventStore, pubkeys, settings)
+          // Fetch profiles in background without blocking
+          fetchProfiles(relayPool, eventStore, pubkeys, settings).catch(() => {})
        }
        
        setSupporters(zappers)
@@ -45,14 +46,6 @@ const Support: React.FC<SupportProps> = ({ relayPool, eventStore, settings }) =>
    loadSupporters()
  }, [relayPool, eventStore, settings])

-  if (loading) {
-    return (
-      <div className="flex items-center justify-center min-h-screen p-4">
-        <FontAwesomeIcon icon={faSpinner} spin size="2x" className="text-zinc-400" />
-      </div>
-    )
-  }
-
  return (
    <div className="min-h-screen" style={{ backgroundColor: 'var(--color-bg)', color: 'var(--color-text)' }}>
      <div className="max-w-5xl mx-auto px-4 py-12 md:py-16">
@@ -82,7 +75,32 @@ const Support: React.FC<SupportProps> = ({ relayPool, eventStore, settings }) =>
          </p>
        </div>

-        {supporters.length === 0 ? (
+        {loading ? (
+          <>
+            {/* Loading Skeletons */}
+            <div className="mb-16 md:mb-20">
+              <h2 className="text-2xl md:text-3xl font-semibold mb-8 md:mb-10 text-center" style={{ color: 'var(--color-text)' }}>
+                Legends
+              </h2>
+              <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-8 md:gap-10">
+                {Array.from({ length: 3 }).map((_, i) => (
+                  <SupporterSkeleton key={`whale-${i}`} isWhale={true} />
+                ))}
+              </div>
+            </div>
+
+            <div className="mb-12">
+              <h2 className="text-xl md:text-2xl font-semibold mb-8 text-center" style={{ color: 'var(--color-text)' }}>
+                Supporters
+              </h2>
+              <div className="grid grid-cols-4 sm:grid-cols-6 md:grid-cols-8 lg:grid-cols-10 gap-4 md:gap-5">
+                {Array.from({ length: 12 }).map((_, i) => (
+                  <SupporterSkeleton key={`supporter-${i}`} isWhale={false} />
+                ))}
+              </div>
+            </div>
+          </>
+        ) : supporters.length === 0 ? (
          <div className="text-center py-12" style={{ color: 'var(--color-text-muted)' }}>
            <p>No supporters yet. Be the first to zap Boris!</p>
          </div>
@@ -231,5 +249,55 @@ const SupporterCard: React.FC<SupporterCardProps> = ({ supporter, isWhale }) =>
  )
 }

+interface SupporterSkeletonProps {
+  isWhale: boolean
+}
+
+const SupporterSkeleton: React.FC<SupporterSkeletonProps> = ({ isWhale }) => {
+  return (
+    <div className="flex flex-col items-center">
+      <div className="relative">
+        {/* Avatar Skeleton */}
+        <div
+          className={`rounded-full overflow-hidden flex items-center justify-center animate-pulse
+            ${isWhale ? 'w-24 h-24 md:w-28 md:h-28' : 'w-10 h-10 md:w-12 md:h-12'}
+          `}
+          style={{ 
+            backgroundColor: 'var(--color-bg-elevated)'
+          }}
+        >
+          <div 
+            className={`rounded-full ${isWhale ? 'w-20 h-20 md:w-24 md:h-24' : 'w-8 h-8 md:w-10 md:h-10'}`}
+            style={{ backgroundColor: 'var(--color-border)' }}
+          />
+        </div>
+
+        {/* Whale Badge Skeleton */}
+        {isWhale && (
+          <div 
+            className="absolute -bottom-1 -right-1 w-8 h-8 rounded-full animate-pulse border-2"
+            style={{ 
+              backgroundColor: 'var(--color-border)',
+              borderColor: 'var(--color-bg)' 
+            }}
+          />
+        )}
+      </div>
+
+      {/* Name and Total Skeleton */}
+      <div className="mt-2 text-center space-y-1">
+        <div 
+          className={`rounded animate-pulse ${isWhale ? 'h-4 w-16' : 'h-3 w-12'}`}
+          style={{ backgroundColor: 'var(--color-border)' }}
+        />
+        <div 
+          className={`rounded animate-pulse ${isWhale ? 'h-3 w-12' : 'h-2 w-10'}`}
+          style={{ backgroundColor: 'var(--color-border)' }}
+        />
+      </div>
+    </div>
+  )
+}
+
 export default Support

--- a/src/components/VideoEmbedProcessor.tsx
+++ b/src/components/VideoEmbedProcessor.tsx
@@ -0,0 +1,212 @@
+import React, { useMemo, forwardRef } from 'react'
+import ReactPlayer from 'react-player'
+import { classifyUrl } from '../utils/helpers'
+
+interface VideoEmbedProcessorProps {
+  html: string
+  renderVideoLinksAsEmbeds: boolean
+  className?: string
+  onMouseUp?: (e: React.MouseEvent) => void
+  onTouchEnd?: (e: React.TouchEvent) => void
+}
+
+/**
+ * Component that processes HTML content and optionally embeds video links
+ * as ReactPlayer components when renderVideoLinksAsEmbeds is enabled
+ */
+const VideoEmbedProcessor = forwardRef<HTMLDivElement, VideoEmbedProcessorProps>(({
+  html,
+  renderVideoLinksAsEmbeds,
+  className,
+  onMouseUp,
+  onTouchEnd
+}, ref) => {
+  const processedHtml = useMemo(() => {
+    if (!renderVideoLinksAsEmbeds || !html) {
+      return html
+    }
+
+    // Process HTML in stages: <video> blocks, <img> tags with video src, and bare video URLs
+    let result = html
+
+    const collectedUrls: string[] = []
+    let placeholderIndex = 0
+
+    // 1) Replace entire <video>...</video> blocks when they reference a video URL
+    const videoBlockPattern = /<video[^>]*>[\s\S]*?<\/video>/gi
+    const videoBlocks = result.match(videoBlockPattern) || []
+    videoBlocks.forEach((block) => {
+      // Try src on <video>
+      let url: string | null = null
+      const videoSrcMatch = block.match(/<video[^>]*\s+src=["']?(https?:\/\/[^\s<>"']+\.(mp4|webm|ogg|mov|avi|mkv|m4v)[^\s<>"']*)["']?[^>]*>/i)
+      if (videoSrcMatch && videoSrcMatch[1]) {
+        url = videoSrcMatch[1]
+      } else {
+        // Try nested <source>
+        const sourceSrcMatch = block.match(/<source[^>]*\s+src=["']?(https?:\/\/[^\s<>"']+\.(mp4|webm|ogg|mov|avi|mkv|m4v)[^\s<>"']*)["']?[^>]*>/i)
+        if (sourceSrcMatch && sourceSrcMatch[1]) {
+          url = sourceSrcMatch[1]
+        }
+      }
+      if (url) {
+        collectedUrls.push(url)
+        const placeholder = `__VIDEO_EMBED_${placeholderIndex}__`
+        const escaped = block.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
+        result = result.replace(new RegExp(escaped, 'g'), placeholder)
+        placeholderIndex++
+      }
+    })
+
+    // 2) Replace entire <img ...> tags if their src points to a video
+    const imgTagPattern = /<img[^>]*>/gi
+    const allImgTags = result.match(imgTagPattern) || []
+    allImgTags.forEach((imgTag) => {
+      const srcMatch = imgTag.match(/src=["']?(https?:\/\/[^\s<>"']+\.(mp4|webm|ogg|mov|avi|mkv|m4v)[^\s<>"']*)["']?/i)
+      if (srcMatch && srcMatch[1]) {
+        const videoUrl = srcMatch[1]
+        collectedUrls.push(videoUrl)
+        const placeholder = `__VIDEO_EMBED_${placeholderIndex}__`
+        const escapedTag = imgTag.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
+        result = result.replace(new RegExp(escapedTag, 'g'), placeholder)
+        placeholderIndex++
+      }
+    })
+
+    // 3) Replace remaining bare video URLs (direct files or recognized video platforms)
+    const fileVideoPattern = /https?:\/\/[^\s<>"']+\.(mp4|webm|ogg|mov|avi|mkv|m4v)(?:\?[^\s<>"']*)?/gi
+    const fileVideoUrls: string[] = result.match(fileVideoPattern) || []
+
+    const allUrlPattern = /https?:\/\/[^\s<>"']+(?=\s|>|"|'|$)/gi
+    const allUrls: string[] = result.match(allUrlPattern) || []
+    const platformVideoUrls = allUrls.filter(url => {
+      // include URLs classified as video and not already collected
+      const classification = classifyUrl(url)
+      return classification.type === 'video' && !collectedUrls.includes(url)
+    })
+
+    const remainingUrls = [...fileVideoUrls, ...platformVideoUrls].filter(url => !collectedUrls.includes(url))
+
+    let processedHtml = result
+    remainingUrls.forEach((url) => {
+      const placeholder = `__VIDEO_EMBED_${placeholderIndex}__`
+      processedHtml = processedHtml.replace(new RegExp(url.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'), 'g'), placeholder)
+      collectedUrls.push(url)
+      placeholderIndex++
+    })
+
+    // If nothing collected, return original html
+    if (collectedUrls.length === 0) {
+      return html
+    }
+
+    return processedHtml
+  }, [html, renderVideoLinksAsEmbeds])
+
+  const videoUrls = useMemo(() => {
+    if (!renderVideoLinksAsEmbeds || !html) {
+      return []
+    }
+
+    const urls: string[] = []
+
+    // 1) Extract from <video> blocks first (video src or nested source src)
+    const videoBlockPattern = /<video[^>]*>[\s\S]*?<\/video>/gi
+    const videoBlocks = html.match(videoBlockPattern) || []
+    videoBlocks.forEach((block) => {
+      let url: string | null = null
+      const videoSrcMatch = block.match(/<video[^>]*\s+src=["']?(https?:\/\/[^\s<>"']+\.(mp4|webm|ogg|mov|avi|mkv|m4v)[^\s<>"']*)["']?[^>]*>/i)
+      if (videoSrcMatch && videoSrcMatch[1]) {
+        url = videoSrcMatch[1]
+      } else {
+        const sourceSrcMatch = block.match(/<source[^>]*\s+src=["']?(https?:\/\/[^\s<>"']+\.(mp4|webm|ogg|mov|avi|mkv|m4v)[^\s<>"']*)["']?[^>]*>/i)
+        if (sourceSrcMatch && sourceSrcMatch[1]) {
+          url = sourceSrcMatch[1]
+        }
+      }
+      if (url && !urls.includes(url)) urls.push(url)
+    })
+
+    // 2) Extract from <img> tags with video src
+    const imgTagPattern = /<img[^>]*>/gi
+    const allImgTags = html.match(imgTagPattern) || []
+    allImgTags.forEach((imgTag) => {
+      const srcMatch = imgTag.match(/src=["']?(https?:\/\/[^\s<>"']+\.(mp4|webm|ogg|mov|avi|mkv|m4v)[^\s<>"']*)["']?/i)
+      if (srcMatch && srcMatch[1] && !urls.includes(srcMatch[1])) {
+        urls.push(srcMatch[1])
+      }
+    })
+
+    // 3) Extract remaining direct file URLs and platform-classified video URLs
+    const fileVideoPattern = /https?:\/\/[^\s<>"']+\.(mp4|webm|ogg|mov|avi|mkv|m4v)(?:\?[^\s<>"']*)?/gi
+    const fileVideoUrls: string[] = html.match(fileVideoPattern) || []
+    fileVideoUrls.forEach(u => { if (!urls.includes(u)) urls.push(u) })
+
+    const allUrlPattern = /https?:\/\/[^\s<>"']+(?=\s|>|"|'|$)/gi
+    const allUrls: string[] = html.match(allUrlPattern) || []
+    allUrls.forEach(u => {
+      const classification = classifyUrl(u)
+      if (classification.type === 'video' && !urls.includes(u)) {
+        urls.push(u)
+      }
+    })
+
+    return urls
+  }, [html, renderVideoLinksAsEmbeds])
+
+  // If no video embedding is enabled, just render the HTML normally
+  if (!renderVideoLinksAsEmbeds || videoUrls.length === 0) {
+    return (
+      <div 
+        ref={ref}
+        className={className}
+        dangerouslySetInnerHTML={{ __html: processedHtml }}
+        onMouseUp={onMouseUp}
+        onTouchEnd={onTouchEnd}
+      />
+    )
+  }
+
+  // Split the HTML by video placeholders and render with embedded players
+  const parts = processedHtml.split(/(__VIDEO_EMBED_\d+__)/)
+  
+  return (
+    <div ref={ref} className={className} onMouseUp={onMouseUp} onTouchEnd={onTouchEnd}>
+      {parts.map((part, index) => {
+        const videoMatch = part.match(/^__VIDEO_EMBED_(\d+)__$/)
+        if (videoMatch) {
+          const videoIndex = parseInt(videoMatch[1])
+          const videoUrl = videoUrls[videoIndex]
+          if (videoUrl) {
+            return (
+              <div key={index} className="reader-video" style={{ margin: '1rem 0' }}>
+                <ReactPlayer 
+                  url={videoUrl}
+                  controls 
+                  width="100%"
+                  height="auto"
+                  style={{ 
+                    width: '100%', 
+                    height: 'auto', 
+                    aspectRatio: '16/9' 
+                  }}
+                />
+              </div>
+            )
+          }
+        }
+        
+        // Regular HTML content
+        return (
+          <div 
+            key={index}
+            dangerouslySetInnerHTML={{ __html: part }}
+          />
+        )
+      })}
+    </div>
+  )
+})
+
+VideoEmbedProcessor.displayName = 'VideoEmbedProcessor'
+
+export default VideoEmbedProcessor
--- a/src/config/relays.ts
+++ b/src/config/relays.ts
@@ -11,12 +11,11 @@ export const RELAYS = [
  'wss://relay.damus.io',
  'wss://nos.lol',
  'wss://relay.nostr.band',
-  'wss://relay.dergigi.com',
  'wss://wot.dergigi.com',
  'wss://relay.snort.social',
  'wss://nostr-pub.wellorder.net',
  'wss://purplepag.es',
  'wss://relay.primal.net',
-  'wss://proxy.nostr-relay.app/5d0d38afc49c4b84ca0da951a336affa18438efed302aeedfa92eb8b0d3fcb87'
+  'wss://proxy.nostr-relay.app/5d0d38afc49c4b84ca0da951a336affa18438efed302aeedfa92eb8b0d3fcb87',
 ]

--- a/src/hooks/useArticleLoader.ts
+++ b/src/hooks/useArticleLoader.ts
@@ -1,4 +1,4 @@
-import { useEffect, Dispatch, SetStateAction } from 'react'
+import { useEffect, useRef, Dispatch, SetStateAction } from 'react'
 import { RelayPool } from 'applesauce-relay'
 import { fetchArticleByNaddr } from '../services/articleService'
 import { fetchHighlightsForArticle } from '../services/highlightService'
@@ -36,18 +36,26 @@ export function useArticleLoader({
  setCurrentArticle,
  settings
 }: UseArticleLoaderProps) {
+  const mountedRef = useRef(true)
+  
  useEffect(() => {
+    mountedRef.current = true
+    
    if (!relayPool || !naddr) return
    
    const loadArticle = async () => {
+      if (!mountedRef.current) return
+      
      setReaderLoading(true)
      setReaderContent(undefined)
      setSelectedUrl(`nostr:${naddr}`)
      setIsCollapsed(true)
-      // Keep highlights panel collapsed by default - only open on user interaction
      
      try {
        const article = await fetchArticleByNaddr(relayPool, naddr, false, settings)
+        
+        if (!mountedRef.current) return
+        
        setReaderContent({
          title: article.title,
          markdown: article.markdown,
@@ -63,24 +71,22 @@ export function useArticleLoader({
        setCurrentArticleCoordinate(articleCoordinate)
        setCurrentArticleEventId(article.event.id)
        setCurrentArticle?.(article.event)
-        
-        
-        // Set reader loading to false immediately after article content is ready
-        // Don't wait for highlights to finish loading
        setReaderLoading(false)
        
        // Fetch highlights asynchronously without blocking article display
-        // Stream them as they arrive for instant rendering
        try {
+          if (!mountedRef.current) return
+          
          setHighlightsLoading(true)
-          setHighlights([]) // Clear old highlights
+          setHighlights([])
          
          await fetchHighlightsForArticle(
            relayPool, 
            articleCoordinate, 
            article.event.id,
            (highlight) => {
-              // Merge streaming results with existing UI state to preserve locally created highlights
+              if (!mountedRef.current) return
+              
              setHighlights((prev: Highlight[]) => {
                if (prev.some((h: Highlight) => h.id === highlight.id)) return prev
                const next = [highlight, ...prev]
@@ -92,19 +98,29 @@ export function useArticleLoader({
        } catch (err) {
          console.error('Failed to fetch highlights:', err)
        } finally {
-          setHighlightsLoading(false)
+          if (mountedRef.current) {
+            setHighlightsLoading(false)
+          }
        }
      } catch (err) {
        console.error('Failed to load article:', err)
-        setReaderContent({
-          title: 'Error Loading Article',
-          html: `<p>Failed to load article: ${err instanceof Error ? err.message : 'Unknown error'}</p>`,
-          url: `nostr:${naddr}`
-        })
-        setReaderLoading(false)
+        if (mountedRef.current) {
+          setReaderContent({
+            title: 'Error Loading Article',
+            html: `<p>Failed to load article: ${err instanceof Error ? err.message : 'Unknown error'}</p>`,
+            url: `nostr:${naddr}`
+          })
+          setReaderLoading(false)
+        }
      }
    }
    
    loadArticle()
-  }, [naddr, relayPool, setSelectedUrl, setReaderContent, setReaderLoading, setIsCollapsed, setHighlights, setHighlightsLoading, setCurrentArticleCoordinate, setCurrentArticleEventId, setCurrentArticle, settings])
+    
+    return () => {
+      mountedRef.current = false
+    }
+    // Intentionally excluding setter functions from dependencies to prevent race conditions
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [naddr, relayPool, settings])
 }
--- a/src/hooks/useExternalUrlLoader.ts
+++ b/src/hooks/useExternalUrlLoader.ts
@@ -1,4 +1,4 @@
-import { useEffect, useMemo } from 'react'
+import { useEffect, useRef, useMemo } from 'react'
 import { RelayPool } from 'applesauce-relay'
 import { IEventStore } from 'applesauce-core'
 import { fetchReadableContent, ReadableContent } from '../services/readerService'
@@ -48,6 +48,8 @@ export function useExternalUrlLoader({
  setCurrentArticleCoordinate,
  setCurrentArticleEventId
 }: UseExternalUrlLoaderProps) {
+  const mountedRef = useRef(true)
+  
  // Load cached URL-specific highlights from event store
  const urlFilter = useMemo(() => {
    if (!url) return null
@@ -63,33 +65,37 @@ export function useExternalUrlLoader({
  
  // Load content and start streaming highlights when URL changes
  useEffect(() => {
+    mountedRef.current = true
+    
    if (!relayPool || !url) return
    
    const loadExternalUrl = async () => {
+      if (!mountedRef.current) return
+      
      setReaderLoading(true)
      setReaderContent(undefined)
      setSelectedUrl(url)
      setIsCollapsed(true)
-      // Clear article-specific state
      setCurrentArticleCoordinate(undefined)
      setCurrentArticleEventId(undefined)
      
      try {
        const content = await fetchReadableContent(url)
+        
+        if (!mountedRef.current) return
+        
        setReaderContent(content)
-        
-        
-        // Set reader loading to false immediately after content is ready
        setReaderLoading(false)
        
        // Fetch highlights for this URL asynchronously
        try {
+          if (!mountedRef.current) return
+          
          setHighlightsLoading(true)
          
          // Seed with cached highlights first
          if (cachedUrlHighlights.length > 0) {
            setHighlights((prev) => {
-              // Seed with cache but keep any locally created highlights already in state
              const seen = new Set<string>(cachedUrlHighlights.map(h => h.id))
              const localOnly = prev.filter(h => !seen.has(h.id))
              const next = [...cachedUrlHighlights, ...localOnly]
@@ -99,16 +105,16 @@ export function useExternalUrlLoader({
            setHighlights([])
          }
          
-          // Check if fetchHighlightsForUrl exists, otherwise skip
          if (typeof fetchHighlightsForUrl === 'function') {
            const seen = new Set<string>()
-            // Seed with cached IDs
            cachedUrlHighlights.forEach(h => seen.add(h.id))
            
            await fetchHighlightsForUrl(
              relayPool,
              url,
              (highlight) => {
+                if (!mountedRef.current) return
+                
                if (seen.has(highlight.id)) return
                seen.add(highlight.id)
                setHighlights((prev) => {
@@ -117,32 +123,40 @@ export function useExternalUrlLoader({
                  return next.sort((a, b) => b.created_at - a.created_at)
                })
              },
-              undefined, // settings
-              false, // force
+              undefined,
+              false,
              eventStore || undefined
            )
          }
        } catch (err) {
          console.error('Failed to fetch highlights:', err)
        } finally {
-          setHighlightsLoading(false)
+          if (mountedRef.current) {
+            setHighlightsLoading(false)
+          }
        }
      } catch (err) {
        console.error('Failed to load external URL:', err)
-        // For videos and other media files, use the filename as the title
-        const filename = getFilenameFromUrl(url)
-        setReaderContent({
-          title: filename,
-          html: `<p>Failed to load content: ${err instanceof Error ? err.message : 'Unknown error'}</p>`,
-          url
-        })
-        setReaderLoading(false)
+        if (mountedRef.current) {
+          const filename = getFilenameFromUrl(url)
+          setReaderContent({
+            title: filename,
+            html: `<p>Failed to load content: ${err instanceof Error ? err.message : 'Unknown error'}</p>`,
+            url
+          })
+          setReaderLoading(false)
+        }
      }
    }
    
    loadExternalUrl()
+    
+    return () => {
+      mountedRef.current = false
+    }
+    // Intentionally excluding setter functions from dependencies to prevent race conditions
    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [url, relayPool, eventStore, setSelectedUrl, setReaderContent, setReaderLoading, setIsCollapsed, setHighlights, setHighlightsLoading, setCurrentArticleCoordinate, setCurrentArticleEventId])
+  }, [url, relayPool, eventStore, cachedUrlHighlights])

  // Keep UI highlights synced with cached store updates without reloading content
  useEffect(() => {
@@ -155,6 +169,8 @@ export function useExternalUrlLoader({
      const next = [...additions, ...prev]
      return next.sort((a, b) => b.created_at - a.created_at)
    })
-  }, [cachedUrlHighlights, url, setHighlights])
+    // setHighlights is intentionally excluded from dependencies - it's stable
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [cachedUrlHighlights, url])
 }

--- a/src/hooks/useMountedState.ts
+++ b/src/hooks/useMountedState.ts
@@ -0,0 +1,28 @@
+import { useRef, useEffect, useCallback } from 'react'
+
+/**
+ * Hook to track if component is mounted and prevent state updates after unmount.
+ * Returns a function to check if still mounted.
+ * 
+ * @example
+ * const isMounted = useMountedState()
+ * 
+ * async function loadData() {
+ *   const data = await fetch(...)
+ *   if (isMounted()) {
+ *     setState(data)
+ *   }
+ * }
+ */
+export function useMountedState(): () => boolean {
+  const mountedRef = useRef(true)
+  
+  useEffect(() => {
+    return () => {
+      mountedRef.current = false
+    }
+  }, [])
+  
+  return useCallback(() => mountedRef.current, [])
+}
+
--- a/src/hooks/useSettings.ts
+++ b/src/hooks/useSettings.ts
@@ -16,7 +16,7 @@ interface UseSettingsParams {
 }

 export function useSettings({ relayPool, eventStore, pubkey, accountManager }: UseSettingsParams) {
-  const [settings, setSettings] = useState<UserSettings>({})
+  const [settings, setSettings] = useState<UserSettings>({ renderVideoLinksAsEmbeds: true })
  const [toastMessage, setToastMessage] = useState<string | null>(null)
  const [toastType, setToastType] = useState<'success' | 'error'>('success')

@@ -27,7 +27,7 @@ export function useSettings({ relayPool, eventStore, pubkey, accountManager }: U
    const loadAndWatch = async () => {
      try {
        const loadedSettings = await loadSettings(relayPool, eventStore, pubkey, RELAYS)
-        if (loadedSettings) setSettings(loadedSettings)
+        if (loadedSettings) setSettings({ renderVideoLinksAsEmbeds: true, ...loadedSettings })
      } catch (err) {
        console.error('Failed to load settings:', err)
      }
@@ -36,7 +36,7 @@ export function useSettings({ relayPool, eventStore, pubkey, accountManager }: U
    loadAndWatch()

    const subscription = watchSettings(eventStore, pubkey, (loadedSettings) => {
-      if (loadedSettings) setSettings(loadedSettings)
+      if (loadedSettings) setSettings({ renderVideoLinksAsEmbeds: true, ...loadedSettings })
    })

    return () => subscription.unsubscribe()
@@ -73,6 +73,9 @@ export function useSettings({ relayPool, eventStore, pubkey, accountManager }: U
      // Set paragraph alignment
      root.setProperty('--paragraph-alignment', settings.paragraphAlignment || 'justify')
      
+      // Set image max-width based on full-width setting
+      root.setProperty('--image-max-width', settings.fullWidthImages ? 'none' : '100%')
+      
    }
    
    applyStyles()
--- a/src/services/archiveController.ts
+++ b/src/services/archiveController.ts
@@ -3,7 +3,6 @@ import { IEventStore } from 'applesauce-core'
 import { NostrEvent } from 'nostr-tools'
 import { queryEvents } from './dataFetch'
 import { KINDS } from '../config/kinds'
-import { RELAYS } from '../config/relays'
 import { ARCHIVE_EMOJI } from './reactionService'
 import { nip19 } from 'nostr-tools'

@@ -35,14 +34,12 @@ class ArchiveController {
    if (!this.markedIds.has(id)) {
      this.markedIds.add(id)
      this.emit()
-      console.log('[archive] mark() added', id.slice(0, 48))
    }
  }

  unmark(id: string): void {
    if (this.markedIds.delete(id)) {
      this.emit()
-      console.log('[archive] unmark() removed', id.slice(0, 48))
    }
  }

@@ -61,7 +58,7 @@ class ArchiveController {
  reset(): void {
    this.generation++
      if (this.timelineSubscription) {
-        try { this.timelineSubscription.unsubscribe() } catch (e) { console.warn('[archive] timeline unsub error', e) }
+        try { this.timelineSubscription.unsubscribe() } catch { /* ignore */ }
        this.timelineSubscription = null
      }
    this.markedIds = new Set()
@@ -80,13 +77,11 @@ class ArchiveController {
    const startGen = this.generation

    if (!force && this.isLoadedFor(pubkey)) {
-      console.log('[archive] start() skipped - already loaded for pubkey')
      return
    }

    // Mark as loaded immediately (fetch runs non-blocking)
    this.lastLoadedPubkey = pubkey
-    console.log('[archive] start() begin for pubkey:', pubkey.slice(0, 12), '...')

    // Handlers for streaming queries
    const handleUrlReaction = (evt: NostrEvent) => {
@@ -95,7 +90,6 @@ class ArchiveController {
      if (!rTag) return
      this.markedIds.add(rTag)
      this.emit()
-      console.log('[archive] mark url:', rTag)
    }

    const handleEventReaction = (evt: NostrEvent) => {
@@ -110,7 +104,6 @@ class ArchiveController {
            const naddr = nip19.naddrEncode({ kind, pubkey, identifier })
            this.markedIds.add(naddr)
            this.emit()
-            console.log('[archive] mark naddr via a-tag:', naddr.slice(0, 24), '...')
            return
          }
        } catch { /* ignore malformed a-tag */ }
@@ -118,14 +111,13 @@ class ArchiveController {
      const eTag = evt.tags.find(t => t[0] === 'e')?.[1]
      if (!eTag) return
      this.pendingEventIds.add(eTag)
-      console.log('[archive] pending event id:', eTag)
    }

    try {
      // Stream kind:17 and kind:7 in parallel
      const [kind17, kind7] = await Promise.all([
-        queryEvents(relayPool, { kinds: [17], authors: [pubkey] }, { relayUrls: RELAYS, onEvent: handleUrlReaction }),
-        queryEvents(relayPool, { kinds: [7], authors: [pubkey] }, { relayUrls: RELAYS, onEvent: handleEventReaction })
+        queryEvents(relayPool, { kinds: [17], authors: [pubkey] }, { onEvent: handleUrlReaction }),
+        queryEvents(relayPool, { kinds: [7], authors: [pubkey] }, { onEvent: handleEventReaction })
      ])

      if (startGen !== this.generation) return
@@ -133,27 +125,23 @@ class ArchiveController {
      // Include EOSE events
      kind17.forEach(handleUrlReaction)
      kind7.forEach(handleEventReaction)
-      console.log('[archive] EOSE sizes kind17:', kind17.length, 'kind7:', kind7.length, 'pendingEventIds:', this.pendingEventIds.size)

      if (this.pendingEventIds.size > 0) {
        // Fetch referenced articles (kind:30023) and map event IDs to naddr
        const ids = Array.from(this.pendingEventIds)
-        const articleEvents = await queryEvents(relayPool, { kinds: [KINDS.BlogPost], ids }, { relayUrls: RELAYS })
-        console.log('[archive] fetched articles for mapping:', articleEvents.length)
+        const articleEvents = await queryEvents(relayPool, { kinds: [KINDS.BlogPost], ids })
        for (const article of articleEvents) {
          const dTag = article.tags.find(t => t[0] === 'd')?.[1]
          if (!dTag) continue
          try {
            const naddr = nip19.naddrEncode({ kind: KINDS.BlogPost, pubkey: article.pubkey, identifier: dTag })
            this.markedIds.add(naddr)
-            console.log('[archive] mark naddr:', naddr.slice(0, 24), '...')
          } catch {
            // skip invalid
          }
        }
        this.emit()
      }
-      console.log('[archive] total marked ids:', this.markedIds.size)

      // Try immediate mapping via eventStore for any still-pending e-ids
      if (this.pendingEventIds.size > 0) {
@@ -167,7 +155,6 @@ class ArchiveController {
              if (dTag) {
                const naddr = nip19.naddrEncode({ kind: KINDS.BlogPost, pubkey: evt.pubkey, identifier: dTag })
                this.markedIds.add(naddr)
-                console.log('[archive] map via eventStore naddr:', naddr.slice(0, 24), '...')
              }
            } else {
              stillPending.add(eId)
@@ -178,7 +165,7 @@ class ArchiveController {
        if (stillPending.size > 0) {
          // Subscribe to future 30023 arrivals to finalize mapping
          if (this.timelineSubscription) {
-            try { this.timelineSubscription.unsubscribe() } catch (e) { console.warn('[archive] timeline unsub error', e) }
+            try { this.timelineSubscription.unsubscribe() } catch { /* ignore */ }
            this.timelineSubscription = null
          }
          const sub$ = eventStore.timeline({ kinds: [KINDS.BlogPost] })
@@ -193,16 +180,14 @@ class ArchiveController {
                const naddr = nip19.naddrEncode({ kind: KINDS.BlogPost, pubkey: evt.pubkey, identifier: dTag })
                this.markedIds.add(naddr)
                this.pendingEventIds.delete(evt.id)
-                console.log('[archive] map via timeline naddr:', naddr.slice(0, 24), '...')
                this.emit()
-              } catch (e) { console.warn('[archive] map via timeline encode error', e) }
+              } catch { /* ignore */ }
            }
          })
        }
      }
    } catch (err) {
      // Non-blocking fetch; ignore errors here
-      console.warn('[archive] start() error:', err)
    }
  }
 }
--- a/src/services/bookmarkHelpers.ts
+++ b/src/services/bookmarkHelpers.ts
@@ -62,7 +62,8 @@ export { dedupeNip51Events } from './bookmarkEvents'
 export const processApplesauceBookmarks = (
  bookmarks: unknown,
  activeAccount: ActiveAccount,
-  isPrivate: boolean
+  isPrivate: boolean,
+  parentCreatedAt?: number
 ): IndividualBookmark[] => {
  if (!bookmarks) return []

@@ -76,14 +77,14 @@ export const processApplesauceBookmarks = (
        allItems.push({
          id: note.id,
          content: '',
-          created_at: Math.floor(Date.now() / 1000),
+          created_at: parentCreatedAt || 0,
          pubkey: note.author || activeAccount.pubkey,
          kind: 1, // Short note kind
          tags: [],
          parsedContent: undefined,
          type: 'event' as const,
          isPrivate,
-          added_at: Math.floor(Date.now() / 1000)
+          added_at: parentCreatedAt || 0
        })
      })
    }
@@ -96,14 +97,14 @@ export const processApplesauceBookmarks = (
        allItems.push({
          id: coordinate,
          content: '',
-          created_at: Math.floor(Date.now() / 1000),
+          created_at: parentCreatedAt || 0,
          pubkey: article.pubkey,
          kind: article.kind, // Usually 30023 for long-form articles
          tags: [],
          parsedContent: undefined,
          type: 'event' as const,
          isPrivate,
-          added_at: Math.floor(Date.now() / 1000)
+          added_at: parentCreatedAt || 0
        })
      })
    }
@@ -114,14 +115,14 @@ export const processApplesauceBookmarks = (
        allItems.push({
          id: `hashtag-${hashtag}`,
          content: `#${hashtag}`,
-          created_at: Math.floor(Date.now() / 1000),
+          created_at: parentCreatedAt || 0,
          pubkey: activeAccount.pubkey,
          kind: 1,
          tags: [['t', hashtag]],
          parsedContent: undefined,
          type: 'event' as const,
          isPrivate,
-          added_at: Math.floor(Date.now() / 1000)
+          added_at: parentCreatedAt || 0
        })
      })
    }
@@ -132,14 +133,14 @@ export const processApplesauceBookmarks = (
        allItems.push({
          id: `url-${url}`,
          content: url,
-          created_at: Math.floor(Date.now() / 1000),
+          created_at: parentCreatedAt || 0,
          pubkey: activeAccount.pubkey,
          kind: 1,
          tags: [['r', url]],
          parsedContent: undefined,
          type: 'event' as const,
          isPrivate,
-          added_at: Math.floor(Date.now() / 1000)
+          added_at: parentCreatedAt || 0
        })
      })
    }
@@ -153,14 +154,14 @@ export const processApplesauceBookmarks = (
    .map((bookmark: BookmarkData) => ({
      id: bookmark.id!,
      content: bookmark.content || '',
-      created_at: bookmark.created_at || Math.floor(Date.now() / 1000),
+      created_at: bookmark.created_at || parentCreatedAt || 0,
      pubkey: activeAccount.pubkey,
      kind: bookmark.kind || 30001,
      tags: bookmark.tags || [],
      parsedContent: bookmark.content ? (getParsedContent(bookmark.content) as ParsedContent) : undefined,
      type: 'event' as const,
      isPrivate,
-      added_at: bookmark.created_at || Math.floor(Date.now() / 1000)
+      added_at: bookmark.created_at || parentCreatedAt || 0
    }))
 }

@@ -169,29 +170,35 @@ export function hydrateItems(
  items: IndividualBookmark[],
  idToEvent: Map<string, NostrEvent>
 ): IndividualBookmark[] {
-  return items.map(item => {
-    const ev = idToEvent.get(item.id)
-    if (!ev) return item
-    
-    // For long-form articles (kind:30023), use the article title as content
-    let content = ev.content || item.content || ''
-    if (ev.kind === 30023) {
-      const articleTitle = getArticleTitle(ev)
-      if (articleTitle) {
-        content = articleTitle
+  return items
+    .map(item => {
+      const ev = idToEvent.get(item.id)
+      if (!ev) return item
+      
+      // For long-form articles (kind:30023), use the article title as content
+      let content = ev.content || item.content || ''
+      if (ev.kind === 30023) {
+        const articleTitle = getArticleTitle(ev)
+        if (articleTitle) {
+          content = articleTitle
+        }
      }
-    }
-    
-    return {
-      ...item,
-      pubkey: ev.pubkey || item.pubkey,
-      content,
-      created_at: ev.created_at || item.created_at,
-      kind: ev.kind || item.kind,
-      tags: ev.tags || item.tags,
-      parsedContent: ev.content ? (getParsedContent(content) as ParsedContent) : item.parsedContent
-    }
-  })
+      
+      return {
+        ...item,
+        pubkey: ev.pubkey || item.pubkey,
+        content,
+        created_at: ev.created_at || item.created_at,
+        kind: ev.kind || item.kind,
+        tags: ev.tags || item.tags,
+        parsedContent: ev.content ? (getParsedContent(content) as ParsedContent) : item.parsedContent
+      }
+    })
+    .filter(item => {
+      // Filter out bookmark list events (they're containers, not content)
+      const isBookmarkListEvent = item.kind === 10003 || item.kind === 30003 || item.kind === 30001
+      return !isBookmarkListEvent
+    })
 }

 // Note: event decryption/collection lives in `bookmarkProcessing.ts`
--- a/src/services/bookmarkProcessing.ts
+++ b/src/services/bookmarkProcessing.ts
@@ -64,7 +64,7 @@ async function decryptEvent(
          const hiddenTags = JSON.parse(decryptedContent) as string[][]
          const manualPrivate = Helpers.parseBookmarkTags(hiddenTags)
          privateItems.push(
-            ...processApplesauceBookmarks(manualPrivate, activeAccount, true).map(i => ({
+            ...processApplesauceBookmarks(manualPrivate, activeAccount, true, evt.created_at).map(i => ({
              ...i,
              sourceKind: evt.kind,
              setName: dTag,
@@ -84,7 +84,7 @@ async function decryptEvent(
    const priv = Helpers.getHiddenBookmarks(evt)
    if (priv) {
      privateItems.push(
-        ...processApplesauceBookmarks(priv, activeAccount, true).map(i => ({
+        ...processApplesauceBookmarks(priv, activeAccount, true, evt.created_at).map(i => ({
          ...i,
          sourceKind: evt.kind,
          setName: dTag,
@@ -155,7 +155,7 @@ export async function collectBookmarksFromEvents(

    const pub = Helpers.getPublicBookmarks(evt)
    publicItemsAll.push(
-      ...processApplesauceBookmarks(pub, activeAccount, false).map(i => ({
+      ...processApplesauceBookmarks(pub, activeAccount, false, evt.created_at).map(i => ({
        ...i,
        sourceKind: evt.kind,
        setName: dTag,
@@ -181,7 +181,7 @@ export async function collectBookmarksFromEvents(
      const priv = Helpers.getHiddenBookmarks(evt)
      if (priv) {
        publicItemsAll.push(
-          ...processApplesauceBookmarks(priv, activeAccount, true).map(i => ({
+          ...processApplesauceBookmarks(priv, activeAccount, true, evt.created_at).map(i => ({
            ...i,
            sourceKind: evt.kind,
            setName: dTag,
--- a/src/services/libraryService.ts
+++ b/src/services/libraryService.ts
@@ -1,7 +1,6 @@
 import { RelayPool } from 'applesauce-relay'
 import { NostrEvent } from 'nostr-tools'
 import { Helpers } from 'applesauce-core'
-import { RELAYS } from '../config/relays'
 import { KINDS } from '../config/kinds'
 import { ARCHIVE_EMOJI } from './reactionService'
 import { BlogPostPreview } from './exploreService'
@@ -30,8 +29,8 @@ export async function fetchReadArticles(
  try {
    // Fetch kind:7 and kind:17 reactions in parallel
    const [kind7Events, kind17Events] = await Promise.all([
-      queryEvents(relayPool, { kinds: [KINDS.ReactionToEvent], authors: [userPubkey] }, { relayUrls: RELAYS }),
-      queryEvents(relayPool, { kinds: [KINDS.ReactionToUrl], authors: [userPubkey] }, { relayUrls: RELAYS })
+      queryEvents(relayPool, { kinds: [KINDS.ReactionToEvent], authors: [userPubkey] }),
+      queryEvents(relayPool, { kinds: [KINDS.ReactionToUrl], authors: [userPubkey] })
    ])

    const readArticles: ReadArticle[] = []
@@ -115,8 +114,7 @@ export async function fetchReadArticlesWithData(
    
    const articleEvents = await queryEvents(
      relayPool,
-      { kinds: [KINDS.BlogPost], ids: eventIds },
-      { relayUrls: RELAYS }
+      { kinds: [KINDS.BlogPost], ids: eventIds }
    )

    // Deduplicate article events by ID
--- a/src/services/reactionService.ts
+++ b/src/services/reactionService.ts
@@ -2,8 +2,8 @@ import { RelayPool, completeOnEose, onlyEvents } from 'applesauce-relay'
 import { IAccount } from 'applesauce-accounts'
 import { NostrEvent } from 'nostr-tools'
 import { lastValueFrom, takeUntil, timer, toArray } from 'rxjs'
-import { RELAYS } from '../config/relays'
 import { EventFactory } from 'applesauce-factory'
+import { getActiveRelayUrls } from './relayManager'

 const ARCHIVE_EMOJI = '📚'

@@ -35,7 +35,6 @@ export async function createEventReaction(
  ]
  if (options?.aCoord) {
    tags.push(['a', options.aCoord])
-    console.log('[archive] createEventReaction add a-tag:', options.aCoord)
  }

  const draft = await factory.create(async () => ({
@@ -49,7 +48,7 @@ export async function createEventReaction(


  // Publish to relays
-  await relayPool.publish(RELAYS, signed)
+  await relayPool.publish(getActiveRelayUrls(relayPool), signed)


  return signed
@@ -99,7 +98,7 @@ export async function createWebsiteReaction(


  // Publish to relays
-  await relayPool.publish(RELAYS, signed)
+  await relayPool.publish(getActiveRelayUrls(relayPool), signed)


  return signed
@@ -122,7 +121,7 @@ export async function deleteReaction(
    created_at: Math.floor(Date.now() / 1000)
  }))
  const signed = await factory.sign(draft)
-  await relayPool.publish(RELAYS, signed)
+  await relayPool.publish(getActiveRelayUrls(relayPool), signed)
  return signed
 }

@@ -146,7 +145,7 @@ export async function hasMarkedEventAsRead(
    }

    const events$ = relayPool
-      .req(RELAYS, filter)
+      .req(getActiveRelayUrls(relayPool), filter)
      .pipe(
        onlyEvents(),
        completeOnEose(),
@@ -199,7 +198,7 @@ export async function hasMarkedWebsiteAsRead(
    }

    const events$ = relayPool
-      .req(RELAYS, filter)
+      .req(getActiveRelayUrls(relayPool), filter)
      .pipe(
        onlyEvents(),
        completeOnEose(),
--- a/src/services/readingProgressController.ts
+++ b/src/services/readingProgressController.ts
@@ -3,13 +3,11 @@ import { IEventStore } from 'applesauce-core'
 import { NostrEvent } from 'nostr-tools'
 import { queryEvents } from './dataFetch'
 import { KINDS } from '../config/kinds'
-import { RELAYS } from '../config/relays'
 import { processReadingProgress } from './readingDataProcessor'
 import { ReadItem } from './readsService'
 import { ARCHIVE_EMOJI } from './reactionService'
 import { nip19 } from 'nostr-tools'

-console.log('[readingProgress] Module loaded')

 type ProgressMapCallback = (progressMap: Map<string, number>) => void
 type LoadingCallback = (loading: boolean) => void
@@ -176,17 +174,14 @@ class ReadingProgressController {
    const { relayPool, eventStore, pubkey, force = false } = params
    const startGeneration = this.generation

-    console.log('[readingProgress] start() called for pubkey:', pubkey.slice(0, 16), '...', 'force:', force)

    // Skip if already loaded for this pubkey and not forcing
    if (!force && this.isLoadedFor(pubkey)) {
-      console.log('[readingProgress] Already loaded for pubkey, skipping')
      return
    }

    // Prevent concurrent starts
    if (this.isLoading) {
-      console.log('[readingProgress] Already loading, skipping concurrent start')
      return
    }

@@ -212,7 +207,6 @@ class ReadingProgressController {
        this.timelineSubscription = null
      }

-      console.log('[readingProgress] Setting up eventStore subscription...')
      const timeline$ = eventStore.timeline({
        kinds: [KINDS.ReadingProgress],
        authors: [pubkey]
@@ -223,20 +217,17 @@ class ReadingProgressController {
        if (!Array.isArray(localEvents) || localEvents.length === 0) return
        this.processEvents(localEvents)
      })
-      console.log('[readingProgress] EventStore subscription ready - updates streaming')

      // Mark as loaded immediately - queries run in background non-blocking
      this.lastLoadedPubkey = pubkey

      // Query reading progress from relays in background (non-blocking, fire-and-forget)
-      console.log('[readingProgress] Starting background relay query for reading progress...')
      queryEvents(relayPool, {
        kinds: [KINDS.ReadingProgress],
        authors: [pubkey]
-      }, { relayUrls: RELAYS })
+      })
        .then((relayEvents) => {
          if (startGeneration !== this.generation) return
-          console.log('[readingProgress] Got reading progress from relays:', relayEvents.length)
          if (relayEvents.length > 0) {
            relayEvents.forEach(e => eventStore.add(e))
            this.processEvents(relayEvents)
@@ -249,10 +240,8 @@ class ReadingProgressController {
        })

      // Load mark-as-read reactions in background (non-blocking, streaming)
-      console.log('[readingProgress] Starting background relay query for mark-as-read reactions...')
      this.loadMarkAsReadReactions(relayPool, eventStore, pubkey, startGeneration)
        .then(() => {
-          console.log('[readingProgress] Mark-as-read reactions loading complete')
        })
        .catch((err) => {
          console.warn('[readingProgress] Mark-as-read reactions loading failed:', err)
@@ -265,9 +254,6 @@ class ReadingProgressController {
        this.setLoading(false)
      }
      this.isLoading = false
-      console.log('[readingProgress] === LOADED ===')
-      console.log('[readingProgress] progressMap keys:', Array.from(this.currentProgressMap.keys()))
-      console.log('[readingProgress] markedAsReadIds:', Array.from(this.markedAsReadIds))
    }
  }

@@ -318,7 +304,6 @@ class ReadingProgressController {
  ): Promise<void> {
    try {
      // Stream kind:17 (URL reactions) and kind:7 (event reactions) in parallel
-      console.log('[readingProgress] Querying kind:17 and kind:7 reactions (streaming)...')
      const seenReactionIds = new Set<string>()

      const handleUrlReaction = (evt: NostrEvent) => {
@@ -343,8 +328,8 @@ class ReadingProgressController {

      // Fire queries with onEvent callbacks for streaming behavior
      const [kind17Events, kind7Events] = await Promise.all([
-        queryEvents(relayPool, { kinds: [17], authors: [pubkey] }, { relayUrls: RELAYS, onEvent: handleUrlReaction }),
-        queryEvents(relayPool, { kinds: [7], authors: [pubkey] }, { relayUrls: RELAYS, onEvent: handleEventReaction })
+        queryEvents(relayPool, { kinds: [17], authors: [pubkey] }, { onEvent: handleUrlReaction }),
+        queryEvents(relayPool, { kinds: [7], authors: [pubkey] }, { onEvent: handleEventReaction })
      ])

      if (generation !== this.generation) return
@@ -356,7 +341,7 @@ class ReadingProgressController {
      if (pendingEventIds.size > 0) {
        // Fetch referenced 30023 events, streaming not required here
        const ids = Array.from(pendingEventIds)
-        const articleEvents = await queryEvents(relayPool, { kinds: [KINDS.BlogPost], ids }, { relayUrls: RELAYS })
+        const articleEvents = await queryEvents(relayPool, { kinds: [KINDS.BlogPost], ids })
        const eventIdToNaddr = new Map<string, string>()
        for (const article of articleEvents) {
          const dTag = article.tags.find(t => t[0] === 'd')?.[1]
@@ -379,7 +364,6 @@ class ReadingProgressController {
        this.emitMarkedAsReadChanged()
      }

-      console.log('[readingProgress] Mark-as-read reactions complete. Total:', Array.from(this.markedAsReadIds).length)
    } catch (err) {
      console.warn('[readingProgress] Failed to load mark-as-read reactions:', err)
    }
--- a/src/services/readsService.ts
+++ b/src/services/readsService.ts
@@ -3,7 +3,6 @@ import { Helpers } from 'applesauce-core'
 import { Bookmark } from '../types/bookmarks'
 import { fetchReadArticles } from './libraryService'
 import { queryEvents } from './dataFetch'
-import { RELAYS } from '../config/relays'
 import { KINDS } from '../config/kinds'
 import { classifyBookmarkType } from '../utils/bookmarkTypeClassifier'
 import { nip19 } from 'nostr-tools'
@@ -44,7 +43,7 @@ export async function fetchAllReads(
  try {
    // Fetch all data sources in parallel
    const [progressEvents, markedAsReadArticles] = await Promise.all([
-      queryEvents(relayPool, { kinds: [KINDS.ReadingProgress], authors: [userPubkey] }, { relayUrls: RELAYS }),
+      queryEvents(relayPool, { kinds: [KINDS.ReadingProgress], authors: [userPubkey] }),
      fetchReadArticles(relayPool, userPubkey)
    ])

@@ -130,8 +129,7 @@ export async function fetchAllReads(
        
        const events = await queryEvents(
          relayPool,
-          { kinds: [KINDS.BlogPost], authors, '#d': identifiers },
-          { relayUrls: RELAYS }
+          { kinds: [KINDS.BlogPost], authors, '#d': identifiers }
        )

        // Merge event data into ReadItems and emit
--- a/src/services/relayListService.ts
+++ b/src/services/relayListService.ts
@@ -0,0 +1,194 @@
+import { RelayPool } from 'applesauce-relay'
+import { NostrEvent } from 'nostr-tools'
+import { queryEvents } from './dataFetch'
+
+export interface UserRelayInfo {
+  url: string
+  mode?: 'read' | 'write' | 'both'
+}
+
+/**
+ * Loads user's relay list from kind 10002 (NIP-65)
+ */
+export async function loadUserRelayList(
+  relayPool: RelayPool,
+  pubkey: string,
+  options?: {
+    onUpdate?: (relays: UserRelayInfo[]) => void
+  }
+): Promise<UserRelayInfo[]> {
+  try {
+    console.log('[relayListService] Loading user relay list for pubkey:', pubkey.slice(0, 16) + '...')
+    console.log('[relayListService] Available relays:', Array.from(relayPool.relays.keys()))
+    
+    console.log('[relayListService] Starting query for kind 10002...')
+    const startTime = Date.now()
+    
+    // Try querying with streaming callback for faster results
+    const events: NostrEvent[] = []
+    const eventsMap = new Map<string, NostrEvent>()
+    
+    const result = await queryEvents(relayPool, {
+      kinds: [10002],
+      authors: [pubkey],
+      limit: 10
+    }, {
+      onEvent: (evt) => {
+        // Deduplicate by id and keep most recent
+        const existing = eventsMap.get(evt.id)
+        if (!existing || evt.created_at > existing.created_at) {
+          eventsMap.set(evt.id, evt)
+          // Update events array with deduplicated events
+          events.length = 0
+          events.push(...Array.from(eventsMap.values()))
+
+          // Stream immediate updates to caller using the newest event
+          if (options?.onUpdate) {
+            const tags = evt.tags || []
+            const relays: UserRelayInfo[] = []
+            for (const tag of tags) {
+              if (tag[0] === 'r' && tag[1]) {
+                const url = tag[1]
+                const mode = (tag[2] as 'read' | 'write' | undefined) || 'both'
+                relays.push({ url, mode })
+              }
+            }
+            if (relays.length > 0) {
+              options.onUpdate(relays)
+            }
+          }
+        }
+      }
+    })
+    
+    // Use the streaming results if we got any, otherwise fall back to the full result
+    const finalEvents = events.length > 0 ? events : result
+    
+    const queryTime = Date.now() - startTime
+    console.log('[relayListService] Query completed in', queryTime, 'ms')
+    
+    // Also try a broader query to see if we get any events at all
+    console.log('[relayListService] Trying broader query for any kind 10002 events...')
+    const allEvents = await queryEvents(relayPool, {
+      kinds: [10002],
+      limit: 5
+    })
+    console.log('[relayListService] Found', allEvents.length, 'total kind 10002 events from any author')
+    
+
+    console.log('[relayListService] Found', finalEvents.length, 'kind 10002 events')
+    if (finalEvents.length > 0) {
+      console.log('[relayListService] Event details:', finalEvents.map(e => ({ id: e.id, created_at: e.created_at, tags: e.tags.length })))
+    }
+
+    if (finalEvents.length === 0) return []
+
+    // Get most recent event
+    const sortedEvents = finalEvents.sort((a, b) => b.created_at - a.created_at)
+    const relayListEvent = sortedEvents[0]
+
+    const relays: UserRelayInfo[] = []
+    for (const tag of relayListEvent.tags) {
+      if (tag[0] === 'r' && tag[1]) {
+        const url = tag[1]
+        const mode = tag[2] as 'read' | 'write' | undefined
+        relays.push({
+          url,
+          mode: mode || 'both'
+        })
+      }
+    }
+
+    console.log('[relayListService] Parsed', relays.length, 'relays from event')
+    return relays
+  } catch (error) {
+    console.error('Failed to load user relay list:', error)
+    return []
+  }
+}
+
+/**
+ * Loads blocked relays from kind 10006 (NIP-51 mute list)
+ */
+export async function loadBlockedRelays(
+  relayPool: RelayPool,
+  pubkey: string
+): Promise<string[]> {
+  try {
+    const events = await queryEvents(relayPool, {
+      kinds: [10006],
+      authors: [pubkey]
+    })
+
+    if (events.length === 0) return []
+
+    // Get most recent event
+    const sortedEvents = events.sort((a, b) => b.created_at - a.created_at)
+    const muteListEvent = sortedEvents[0]
+
+    const blocked: string[] = []
+    for (const tag of muteListEvent.tags) {
+      if (tag[0] === 'r' && tag[1]) {
+        blocked.push(tag[1])
+      }
+    }
+
+    return blocked
+  } catch (error) {
+    console.error('Failed to load blocked relays:', error)
+    return []
+  }
+}
+
+/**
+ * Computes final relay set by merging inputs and removing blocked relays
+ */
+export function computeRelaySet(params: {
+  hardcoded: string[]
+  bunker?: string[]
+  userList?: UserRelayInfo[]
+  blocked?: string[]
+  alwaysIncludeLocal: string[]
+}): string[] {
+  const {
+    hardcoded,
+    bunker = [],
+    userList = [],
+    blocked = [],
+    alwaysIncludeLocal
+  } = params
+
+  const relaySet = new Set<string>()
+  const blockedSet = new Set(blocked)
+
+  // Helper to check if relay should be included
+  const shouldInclude = (url: string): boolean => {
+    // Always include local relays
+    if (alwaysIncludeLocal.includes(url)) return true
+    // Otherwise check if blocked
+    return !blockedSet.has(url)
+  }
+
+  // Add hardcoded relays
+  for (const url of hardcoded) {
+    if (shouldInclude(url)) relaySet.add(url)
+  }
+
+  // Add bunker relays
+  for (const url of bunker) {
+    if (shouldInclude(url)) relaySet.add(url)
+  }
+
+  // Add user relays (treating 'both' and 'read' as applicable for queries)
+  for (const relay of userList) {
+    if (shouldInclude(relay.url)) relaySet.add(relay.url)
+  }
+
+  // Always ensure local relays are present
+  for (const url of alwaysIncludeLocal) {
+    relaySet.add(url)
+  }
+
+  return Array.from(relaySet)
+}
+
--- a/src/services/relayManager.ts
+++ b/src/services/relayManager.ts
@@ -0,0 +1,86 @@
+import { RelayPool } from 'applesauce-relay'
+import { prioritizeLocalRelays } from '../utils/helpers'
+
+/**
+ * Local relays that are always included
+ */
+export const ALWAYS_LOCAL_RELAYS = [
+  'ws://localhost:10547',
+  'ws://localhost:4869'
+]
+
+/**
+ * Gets active relay URLs from the relay pool
+ */
+export function getActiveRelayUrls(relayPool: RelayPool): string[] {
+  const urls = Array.from(relayPool.relays.keys())
+  return prioritizeLocalRelays(urls)
+}
+
+/**
+ * Normalizes a relay URL to match what applesauce-relay stores internally
+ * Adds trailing slash for URLs without a path
+ */
+function normalizeRelayUrl(url: string): string {
+  try {
+    const parsed = new URL(url)
+    // If the pathname is empty or just "/", ensure it ends with "/"
+    if (parsed.pathname === '' || parsed.pathname === '/') {
+      return url.endsWith('/') ? url : url + '/'
+    }
+    return url
+  } catch {
+    // If URL parsing fails, return as-is
+    return url
+  }
+}
+
+/**
+ * Applies a new relay set to the pool: adds missing relays, removes extras
+ */
+export function applyRelaySetToPool(
+  relayPool: RelayPool,
+  finalUrls: string[]
+): void {
+  // Normalize all URLs to match pool's internal format
+  const currentUrls = new Set(Array.from(relayPool.relays.keys()))
+  const normalizedTargetUrls = new Set(finalUrls.map(normalizeRelayUrl))
+
+  console.log('[relayManager] applyRelaySetToPool called')
+  console.log('[relayManager] Current pool has:', currentUrls.size, 'relays')
+  console.log('[relayManager] Target has:', finalUrls.length, 'relays')
+
+  // Add new relays (use original URLs for adding, not normalized)
+  const toAdd = finalUrls.filter(url => !currentUrls.has(normalizeRelayUrl(url)))
+  console.log('[relayManager] Will add:', toAdd.length, 'relays', toAdd)
+  if (toAdd.length > 0) {
+    relayPool.group(toAdd)
+  }
+
+  // Remove relays not in target (but always keep local relays)
+  const toRemove: string[] = []
+  for (const url of currentUrls) {
+    // Check if this normalized URL is in the target set
+    if (!normalizedTargetUrls.has(url)) {
+      // Also check if it's a local relay (check both normalized and original forms)
+      const isLocal = ALWAYS_LOCAL_RELAYS.some(localUrl => 
+        normalizeRelayUrl(localUrl) === url || localUrl === url
+      )
+      if (!isLocal) {
+        toRemove.push(url)
+      }
+    }
+  }
+  console.log('[relayManager] Will remove:', toRemove.length, 'relays', toRemove)
+
+  for (const url of toRemove) {
+    const relay = relayPool.relays.get(url)
+    if (relay) {
+      relay.close()
+      relayPool.relays.delete(url)
+    }
+  }
+  
+  console.log('[relayManager] After apply, pool has:', relayPool.relays.size, 'relays')
+}
+
--- a/src/services/settingsService.ts
+++ b/src/services/settingsService.ts
@@ -58,6 +58,8 @@ export interface UserSettings {
  lightColorTheme?: 'paper-white' | 'sepia' | 'ivory' // default: sepia
  // Reading settings
  paragraphAlignment?: 'left' | 'justify' // default: justify
+  fullWidthImages?: boolean // default: false
+  renderVideoLinksAsEmbeds?: boolean // default: false
  // Reading position sync
  syncReadingPosition?: boolean // default: false (opt-in)
  autoMarkAsReadOnCompletion?: boolean // default: false (opt-in)
--- a/src/services/writeService.ts
+++ b/src/services/writeService.ts
@@ -1,9 +1,9 @@
 import { RelayPool } from 'applesauce-relay'
 import { NostrEvent } from 'nostr-tools'
 import { IEventStore } from 'applesauce-core'
-import { RELAYS } from '../config/relays'
 import { isLocalRelay, areAllRelaysLocal } from '../utils/helpers'
 import { markEventAsOfflineCreated } from './offlineSyncService'
+import { getActiveRelayUrls } from './relayManager'

 /**
 * Unified write helper: add event to EventStore, detect connectivity, 
@@ -27,10 +27,13 @@ export async function publishEvent(

  const hasRemoteConnection = connectedRelays.some(url => !isLocalRelay(url))

+  // Get active relay URLs from the pool
+  const activeRelays = getActiveRelayUrls(relayPool)
+
  // Determine which relays we expect to succeed
  const expectedSuccessRelays = hasRemoteConnection
-    ? RELAYS
-    : RELAYS.filter(isLocalRelay)
+    ? activeRelays
+    : activeRelays.filter(isLocalRelay)

  const isLocalOnly = areAllRelaysLocal(expectedSuccessRelays)

@@ -42,7 +45,7 @@ export async function publishEvent(
  }

  // Publish to all configured relays in the background (non-blocking)
-  relayPool.publish(RELAYS, event)
+  relayPool.publish(activeRelays, event)
    .then(() => {
    })
    .catch((error) => {
--- a/src/styles/components/login.css
+++ b/src/styles/components/login.css
@@ -29,7 +29,7 @@

 .login-highlight {
  background-color: var(--highlight-color-mine, #fde047);
-  color: var(--color-text);
+  color: #000000;
  padding: 0.125rem 0.25rem;
  border-radius: 3px;
  font-weight: 500;
--- a/src/styles/components/reader.css
+++ b/src/styles/components/reader.css
@@ -14,12 +14,12 @@
 /* Video container - responsive wrapper following react-player docs */
 .reader-video { 
  position: relative;
-  width: 80vw;  /* 80% of viewport width */
-  min-width: 400px;  /* Minimum width */
-  max-width: 1000px;   /* Maximum width */
+  width: 100%;
+  max-width: 100%;
  aspect-ratio: 16/9;
-  margin: 0 -0.75rem 1rem -0.75rem; /* Negative margins to counteract reader padding */
+  margin: 0 0 1rem 0; /* align with reader padding, no bleed */
  background: rgb(0 0 0); /* black */
+  overflow: hidden;
 }
 .reader.empty { color: var(--color-text-secondary); }
 .loading-spinner { display: flex; align-items: center; gap: 0.5rem; color: var(--color-text-secondary); }
@@ -54,7 +54,15 @@
 .reader .reader-html h1, .reader .reader-html h2, .reader .reader-html h3, .reader .reader-html h4, .reader .reader-html h5, .reader .reader-html h6,
 .reader .reader-markdown h1, .reader .reader-markdown h2, .reader .reader-markdown h3, .reader .reader-markdown h4, .reader .reader-markdown h5, .reader .reader-markdown h6 { text-align: left !important; }
 /* Tame images from external content */
-.reader .reader-html img, .reader .reader-markdown img { max-width: 100%; max-height: 70vh; height: auto; width: auto; display: block; margin: 0.75rem 0; border-radius: 6px; }
+.reader .reader-html img, .reader .reader-markdown img { 
+  max-width: var(--image-max-width, 100%); 
+  max-height: 70vh; 
+  height: auto; 
+  width: auto; 
+  display: block; 
+  margin: 0.75rem auto; 
+  border-radius: 6px; 
+}
 /* Headlines with Tailwind typography */
 .reader-markdown h1, .reader-html h1 { 
  font-size: 2.25rem; /* text-4xl */
--- a/src/utils/bookmarkUtils.tsx
+++ b/src/utils/bookmarkUtils.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 import { formatDistanceToNow, differenceInSeconds, differenceInMinutes, differenceInHours, differenceInDays, differenceInMonths, differenceInYears } from 'date-fns'
 import { ParsedContent, ParsedNode, IndividualBookmark } from '../types/bookmarks'
 import ResolvedMention from '../components/ResolvedMention'
-// Note: ContentWithResolvedProfiles is imported by components directly to keep this file component-only for fast refresh
+// Note: RichContent is imported by components directly to keep this file component-only for fast refresh

 export const formatDate = (timestamp: number) => {
  const date = new Date(timestamp * 1000)
Author	SHA1	Message	Date
Gigi	1e613bd2a2	chore: bump version to 0.9.1	2025-10-20 21:26:25 +02:00
Gigi	95b882b0d1	fix(css): constrain video player to prevent horizontal overflow - Set .reader-video to width: 100%, max-width: 100%, aspect-ratio: 16/9 - Remove negative margins and viewport-based sizing - Add overflow: hidden to contain player within reader bounds - Fixes video bleeding to the right on smaller screens	2025-10-20 21:26:05 +02:00
Gigi	be00f1434d	feat(settings): default renderVideoLinksAsEmbeds to true - Initialize settings with renderVideoLinksAsEmbeds: true - Merge default when loading and watching settings events - Ensures video links are embedded by default	2025-10-20 21:20:39 +02:00
Gigi	568890e131	fix: prevent ReactMarkdown img renderer from injecting unknown props - Remove props spread to avoid node="[object Object]" artifacts - Ensures downstream VideoEmbedProcessor can cleanly replace video <img> tags	2025-10-20 21:19:27 +02:00
Gigi	f000ac3be1	feat: embed <video> blocks and <img> video src in VideoEmbedProcessor - Replace entire <video>...</video> and <img> tags with placeholders - Extract URLs in same order to align with placeholders - Also replace bare file URLs and platform-classified video URLs - Ensures no broken tags remain; uses ReactPlayer for rendering	2025-10-20 21:15:46 +02:00
Gigi	2fed1cc6e7	fix: robustly replace img tags with video URLs - Changed approach to find ALL img tags first, then check if they contain video URLs - Properly escapes regex special characters in img tags before replacement - Fixes issue where img tags with video src attributes were not being replaced - Handles edge cases like React-added attributes (node=[object Object]) - Now correctly converts markdown video images to embedded players	2025-10-20 21:11:58 +02:00
Gigi	4bdcfcaeb4	feat: properly handle video URLs in markdown img tags	2025-10-20 21:10:16 +02:00
Gigi	a5494ba15c	fix: improve URL regex patterns to prevent text artifacts - Updated VideoEmbedProcessor regex patterns to use lookahead assertions - This prevents capturing HTML attribute syntax like quotes and angle brackets - Fixes text artifact appearing in UI when processing video URLs in HTML content	2025-10-20 20:45:22 +02:00
Gigi	64aad42be3	fix: prevent double video player rendering - Modified ContentPanel to disable VideoEmbedProcessor when isExternalVideo is true - This prevents both ContentPanel and VideoEmbedProcessor from rendering ReactPlayer for the same video URL - Fixes issue where video players were showing twice	2025-10-20 20:44:38 +02:00
Gigi	3673849a9a	feat: enable media display options by default - Set fullWidthImages default to true - Set renderVideoLinksAsEmbeds default to true - Users now get enhanced media experience out of the box - Can still be disabled in settings if preferred	2025-10-20 20:40:17 +02:00
Gigi	c6795f7c18	fix: resolve linting and TypeScript errors - Remove unused faExpand import from ReadingDisplaySettings - Fix TypeScript type errors in VideoEmbedProcessor - Add explicit string[] type annotations for regex match results - All linting and type checking now passes	2025-10-20 20:40:03 +02:00
Gigi	b27f26b639	refactor: create dedicated Media Display settings section - Create new MediaDisplaySettings component for media-related settings - Move full-width images and video embed settings from Reading & Display - Add MediaDisplaySettings to main Settings component - Improve settings organization and user experience - Keep media settings logically grouped together	2025-10-20 20:38:46 +02:00
Gigi	975399e293	feat: add video embed setting and processor - Add renderVideoLinksAsEmbeds setting to UserSettings interface - Add checkbox control in ReadingDisplaySettings component - Create VideoEmbedProcessor component to handle video link embedding - Integrate VideoEmbedProcessor into ContentPanel for article rendering - Support .mp4, .webm, .ogg, .mov, .avi, .mkv, .m4v video formats - Use ReactPlayer for embedded video playback - Default to false (render as links) - When enabled, video links are rendered as embedded players	2025-10-20 20:37:45 +02:00
Gigi	53b8356373	feat: add full-width images setting - Add fullWidthImages setting to UserSettings interface - Add checkbox control in ReadingDisplaySettings component - Implement CSS custom property --image-max-width - Set property in useSettings hook based on user preference - Default to false (constrained width) - When enabled, images use max-width: none for full-width display	2025-10-20 20:35:24 +02:00
Gigi	8c5225b271	perf: optimize support page loading with instant display and skeletons - Remove blocking full-screen spinner on support page - Show page content immediately with skeleton placeholders - Load supporters data in background without blocking UI - Fetch profiles asynchronously to avoid blocking - Add SupporterSkeleton component with proper animations - Significantly improve perceived loading performance	2025-10-20 20:33:10 +02:00
Gigi	dfac7a5089	feat: sort writings by publication date, newest first - Add sorting to Profile component's cachedWritings - Sort by publication date (or created_at as fallback) with newest first - Ensures consistent sorting across all writings displays - Uses useMemo for performance optimization	2025-10-20 20:31:28 +02:00
Gigi	9fe09b813b	fix: include period in 'your own highlights' highlight - Update highlight to include the period: 'your own highlights.' - Ensures complete phrase is highlighted for better visual consistency - Maintains proper sentence structure in the highlighted text	2025-10-20 20:30:08 +02:00
Gigi	ea30c136f2	feat: highlight 'Connect your npub' in login text - Add highlight styling to 'Connect your npub' text in login screen - Now both 'Connect your npub' and 'your own highlights' are highlighted - Uses same login-highlight class for consistent styling - Improves visual emphasis on key action phrases	2025-10-20 20:29:39 +02:00
Gigi	623856ffe9	feat: center images in article view - Update CSS to center images in reader content - Change margin from '0.75rem 0' to '0.75rem auto' for horizontal centering - Applies to both HTML and Markdown content in article view - Improves visual presentation of images in articles	2025-10-20 20:28:50 +02:00
Gigi	d08071def2	fix: improve contrast for highlighted text in login screen - Change login-highlight text color from var(--color-text) to #000000 - Ensures proper contrast against bright yellow highlight background in dark mode - Fixes readability issue where light gray text was hard to read on yellow background	2025-10-20 20:28:04 +02:00
Gigi	556e8f2f7d	docs: update CHANGELOG for v0.9.0 - Added user relay list integration (NIP-65) and blocked relays (NIP-51) - Improved relay list loading performance with streaming callbacks - Enhanced relay URL handling and normalization - Fixed all linting issues and TypeScript type safety - Added relay list debug capabilities - Cleaned up temporary test relays and debug output	2025-10-20 20:13:33 +02:00
Gigi	9ab6847501	chore: bump version to 0.9.0	2025-10-20 20:13:15 +02:00
Gigi	31afe3792e	fix: replace any types with proper NostrEvent types in relayListService - Import NostrEvent type from nostr-tools - Replace any[] with NostrEvent[] for events array - Replace Map<string, any> with Map<string, NostrEvent> for eventsMap - Resolves ESLint warnings about explicit any usage	2025-10-20 20:13:05 +02:00
Gigi	ebe8ecf63b	feat: stream user relay list into pool immediately and finalize after blocked relays - loadUserRelayList accepts onUpdate callback to stream first user relay list - App.tsx applies interim relay set on first event, keeps alive, then recomputes with blocked relays - Keeps startup non-blocking and matches Debug page behavior	2025-10-20 20:10:08 +02:00
Gigi	c418000a0c	fix: add streaming callback to relay list service for faster results - Add onEvent streaming callback to relayListService queryEvents call - Process events as they arrive instead of waiting for all relays to respond - Deduplicate events by id and keep most recent version - Remove artificial delay since streaming provides immediate results - Should resolve hanging issue where debug works but app query hangs	2025-10-20 20:03:16 +02:00
Gigi	15fd19f6a4	fix: resolve all linting issues - Remove unused DebugBus import from App.tsx - Remove unused NostrEvent import from relayListService.ts - Add comment to empty catch block in ContentPanel.tsx - Remove unused targetUrlsMap variable from relayManager.ts - All linting errors resolved, TypeScript type checking passes	2025-10-20 20:01:40 +02:00
Gigi	2a44b4e3c0	cleanup: remove temporary test relays from hardcoded list - Remove temporary relay additions that were added for debugging - Restore clean hardcoded relay list now that dynamic relay integration is working - The non-blocking relay loading implementation handles user relay lists properly	2025-10-20 20:01:02 +02:00
Gigi	aa7807e3d2	fix: make relay list loading non-blocking in App.tsx - Start with hardcoded relays immediately when user logs in - Load user relay list and blocked relays in background Promise - Apply user relay preferences when they become available - Remove blocking await that was preventing immediate relay setup - Update keep-alive subscription and address loader when user relays load - Continue with initial relay set if user relay loading fails	2025-10-20 19:58:55 +02:00
Gigi	359d3d0dd6	feat: add relay list debug section to Debug component - Add state variables for relay list loading (isLoadingRelayList, relayListEvents, timing) - Add handleLoadRelayList function to query kind 10002 events - Add handleClearRelayList function to clear loaded data - Add UI section with Load/Clear buttons and event display - Show relay URLs and permissions for each relay list event - Add loadRelayList to live timing type definition	2025-10-20 19:56:00 +02:00
Gigi	d40b3c0048	debug: add more detailed logging to relay list query including broader query test	2025-10-20 19:54:07 +02:00
Gigi	7b4ca50b16	debug: add timeout to relay list query and temporarily add user's relays to hardcoded set to test relay list loading	2025-10-20 19:52:40 +02:00
Gigi	76e001aba4	debug: add logging to relay list loading to diagnose why user relay list is not found	2025-10-20 19:51:42 +02:00
Gigi	0b42aeb383	refactor: remove non-relay console.log statements - Remove console.log statements from ContentPanel.tsx (archive/content related) - Remove console.log statements from readingProgressController.ts (reading progress related) - Remove console.log statements from reactionService.ts (reaction related) - Remove debug console.log block from Me.tsx (archive/me related) - Preserve all relay-related console.log statements in App.tsx and relayManager.ts	2025-10-20 19:46:50 +02:00
Gigi	a4554e5176	chore: remove non-relay debug output Remove bunker-related debug logs and keep-alive subscription warnings. Keep only relay-related logs ([relay-init] and [relayManager]) for debugging relay loading and management.	2025-10-20 19:35:39 +02:00
Gigi	2e844fc26b	fix: use user's relay list exclusively when logged in When logged in: - If user has relay list (kind:10002): use ONLY user relays + bunker + localhost - If user has NO relay list: fall back to hardcoded RELAYS This ensures the relay list changes when you log in based on your NIP-65 relay list. Added debug logging to show user relay list, blocked relays, and final relay set.	2025-10-20 19:31:21 +02:00
Gigi	8c0a4cac16	config: remove relay.dergigi.com from default relays Keep only wot.dergigi.com (WoT relay) in the default relay list.	2025-10-20 19:30:00 +02:00
Gigi	c6eccc9589	fix: normalize relay URLs to match applesauce-relay internal format applesauce-relay adds trailing slashes to relay URLs without paths, but our RELAYS config doesn't include them. This caused applyRelaySetToPool to think they were different URLs and remove all relays except the proxy. Now we normalize URLs before comparison to match the pool's format.	2025-10-20 19:26:43 +02:00
Gigi	2e5536c331	debug: add logging to relay initialization to diagnose single relay issue	2025-10-20 19:18:03 +02:00
Gigi	fc025b9579	feat: integrate user relay lists (NIP-65) and blocked relays (NIP-51) - Add relayListService to load kind:10002 (user relay list) and kind:10006 (blocked relays) - Add relayManager to compute active relay set and dynamically manage pool membership - Update App.tsx to fetch and apply user relays on login, reset on logout - Replace all hardcoded RELAYS usages with dynamic getActiveRelayUrls() across services and components - Always preserve localhost relays (ws://localhost:10547, ws://localhost:4869) regardless of user blocks - Merge bunker relays, user relays, and hardcoded relays while excluding blocked relays - Update keep-alive subscription and address loaders to use dynamic relay set - Modified files: App.tsx, relayListService.ts (new), relayManager.ts (new), readsService.ts, readingProgressController.ts, archiveController.ts, libraryService.ts, reactionService.ts, writeService.ts, HighlightItem.tsx, ContentPanel.tsx, BookmarkList.tsx, Profile.tsx	2025-10-20 18:40:23 +02:00
Gigi	88db14c352	docs: update CHANGELOG for v0.8.6	2025-10-20 18:07:46 +02:00
Gigi	49c5f0c3ad	chore: bump version to 0.8.6	2025-10-20 18:07:24 +02:00
Gigi	dbed4ad253	fix: revert to inline mount tracking with useRef - Replace useMountedState custom hook with inline useRef approach - Set mountedRef.current = true at start of each effect run - Ensures proper reset when navigating between articles - Simpler and more reliable than custom hook approach	2025-10-20 18:05:02 +02:00
Gigi	b117b1e6cf	fix: remove isMounted from useEffect dependencies - isMounted is a stable function from useMountedState and shouldn't be in deps - Including it was preventing effects from running correctly - Fixes issue where articles wouldn't load (stuck on spinner)	2025-10-20 17:46:41 +02:00
Gigi	627ffd6c5d	fix: resolve React Hooks violation in NostrMentionLink component - Move useEventModel hook call to top level (Rules of Hooks) - Extract pubkey before calling the hook - Profile resolution now works correctly for npub and nprofile mentions - Fixes issue where profiles weren't being fetched and displayed	2025-10-20 16:36:52 +02:00
Gigi	0d53027818	chore: bump version to 0.8.5	2025-10-20 16:34:30 +02:00
Gigi	811d96dee0	refactor: extract common isMounted pattern into reusable useMountedState hook - Create useMountedState hook to track component mount status - Refactor useArticleLoader to use shared hook - Refactor useExternalUrlLoader to use shared hook - Remove duplicated isMounted pattern across both loaders - Cleaner, more DRY code with same functionality	2025-10-20 16:33:05 +02:00
Gigi	21335d56dc	fix: prevent infinite loading spinner by fixing race conditions in article/URL loaders - Add isMounted flag to track component lifecycle in useArticleLoader - Add isMounted flag to track component lifecycle in useExternalUrlLoader - Remove setter functions from useEffect dependencies to prevent re-triggers - Add cleanup functions to cancel pending state updates on unmount - Check isMounted before all state updates in async operations - Fixes issue where spinner would spin forever when loading articles	2025-10-20 15:00:39 +02:00
Gigi	f7e50023a3	feat: replace ContentWithResolvedProfiles with comprehensive RichContent component - Create RichContent component to handle ALL nostr URI types - Support npub, nprofile, note, nevent, naddr with profile resolution - Handle both 'nostr:npub1...' and plain 'npub1...' formats - Replace all ContentWithResolvedProfiles usages in CardView, LargeView, and CompactView - Now all bookmark content properly displays resolved nostr mentions	2025-10-20 14:57:39 +02:00
Gigi	6b09212fe9	feat: resolve user profiles for npub mentions in highlight comments - Create NostrMentionLink component to fetch and display user names - Replace truncated pubkey display with resolved profile names - Fetch profiles in background non-blocking way using useEventModel - Falls back to truncated pubkey if profile not available	2025-10-20 14:55:00 +02:00
Gigi	cecff6b8d5	fix: filter out bookmark list events from individual bookmarks display - Bookmark list events (kind:10003, 30003, 30001) are containers, not content - Add filter in hydrateItems to exclude these kinds after hydration - Add debug logging to track which items are being filtered - Prevents bookmark list events from showing as individual bookmarks in UI	2025-10-20 14:45:30 +02:00
Gigi	2b061afa47	debug: add [BOOKMARK_TS] logging to investigate timestamp issues - Log parentCreatedAt value when processApplesauceBookmarks is called - Log each bookmark event with its kind and created_at timestamp - Log count and timestamp for notes, articles, and URLs being processed - Prefixed with [BOOKMARK_TS] for easy console filtering	2025-10-20 13:56:07 +02:00
Gigi	7516013e67	fix: use parent event timestamp for bookmarks instead of placeholder - Add parentCreatedAt parameter to processApplesauceBookmarks function - Replace all Math.floor(Date.now() / 1000) placeholders with parentCreatedAt \|\| 0 - Update all call sites in bookmarkProcessing.ts to pass evt.created_at - Individual bookmarks now inherit timestamp from their bookmark list event - Bookmarks without valid parent timestamp will show as 0 (epoch) and be filtered by hideBookmarksWithoutCreationDate setting - Eliminates 'now' placeholder timestamps in bookmark sidebar	2025-10-20 13:51:26 +02:00
Gigi	567641de77	fix: improve detection of placeholder bookmarks without valid timestamps - Enhanced hasCreationDate() to better detect unhydrated bookmark references - Web bookmarks (kind 39701) always have real timestamps, always shown - Filter out bookmarks with no content (failed hydration) - Filter out URL-only bookmarks with minimal tags and synthetic IDs - These are created during NIP-51 processing and show 'now' if not hydrated - Fixes issue where placeholder timestamps would pass filter after time elapsed	2025-10-20 13:45:00 +02:00
Gigi	4e86907663	fix: apply hideBookmarksWithoutCreationDate setting to Me component - Import hasCreationDate utility function in Me.tsx - Add UserSettings to MeProps interface - Pass settings prop from Bookmarks to Me component - Filter out bookmarks without creation dates when setting is enabled - This ensures bookmarks showing 'Now' are hidden by default	2025-10-20 13:41:45 +02:00
Gigi	ec34e00573	docs: update CHANGELOG for v0.8.4 release - Document progressive article hydration feature for reads tab - Document React type imports fix in useArticleLoader	2025-10-20 13:36:19 +02:00