chore: bump version to 0.8.5

- 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

CHANGELOG.md

@@ -7,6 +7,24 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [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

package.json

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

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 && (

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>

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 */}

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

src/components/HighlightItem.tsx

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

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)

src/components/NostrMentionLink.tsx

@@ -0,0 +1,118 @@
+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'
+}) => {
+  try {
+    // Remove nostr: prefix
+    const identifier = nostrUri.replace(/^nostr:/, '')
+    const decoded = nip19.decode(identifier)
+    
+    switch (decoded.type) {
+      case 'npub': {
+        const pubkey = decoded.data
+        // Fetch profile in the background
+        const profile = useEventModel(Models.ProfileModel, [pubkey])
+        const displayName = profile?.name || profile?.display_name || profile?.nip05 || `${pubkey.slice(0, 8)}...`
+        
+        return (
+          <a
+            href={`/p/${nip19.npubEncode(pubkey)}`}
+            className={className}
+            onClick={onClick}
+          >
+            @{displayName}
+          </a>
+        )
+      }
+      case 'nprofile': {
+        const { pubkey } = decoded.data
+        // Fetch profile in the background
+        const profile = useEventModel(Models.ProfileModel, [pubkey])
+        const displayName = profile?.name || profile?.display_name || profile?.nip05 || `${pubkey.slice(0, 8)}...`
+        const npub = nip19.npubEncode(pubkey)
+        
+        return (
+          <a
+            href={`/p/${npub}`}
+            className={className}
+            onClick={onClick}
+          >
+            @{displayName}
+          </a>
+        )
+      }
+      case 'naddr': {
+        const { kind, pubkey, identifier: addrIdentifier } = decoded.data
+        // Check if it's a blog post (kind:30023)
+        if (kind === 30023) {
+          const naddr = nip19.naddrEncode({ kind, pubkey, 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
+        return (
+          <span 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 className="highlight-comment-nostr-id">
+        {identifier.slice(0, 20)}...
+      </span>
+    )
+  }
+}
+
+export default NostrMentionLink
+

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
+

src/hooks/useArticleLoader.ts

@@ -6,6 +6,7 @@ import { ReadableContent } from '../services/readerService'
 import { Highlight } from '../types/highlights'
 import { NostrEvent } from 'nostr-tools'
 import { UserSettings } from '../services/settingsService'
+import { useMountedState } from './useMountedState'
 
 interface UseArticleLoaderProps {
   naddr: string | undefined
@@ -36,18 +37,24 @@ export function useArticleLoader({
   setCurrentArticle,
   settings
 }: UseArticleLoaderProps) {
+  const isMounted = useMountedState()
+  
   useEffect(() => {
     if (!relayPool || !naddr) return
     
     const loadArticle = async () => {
+      if (!isMounted()) 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 (!isMounted()) return
+        
         setReaderContent({
           title: article.title,
           markdown: article.markdown,
@@ -63,24 +70,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 (!isMounted()) 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 (!isMounted()) return
+              
               setHighlights((prev: Highlight[]) => {
                 if (prev.some((h: Highlight) => h.id === highlight.id)) return prev
                 const next = [highlight, ...prev]
@@ -92,19 +97,25 @@ export function useArticleLoader({
         } catch (err) {
           console.error('Failed to fetch highlights:', err)
         } finally {
-          setHighlightsLoading(false)
+          if (isMounted()) {
+            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 (isMounted()) {
+          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])
+    // Intentionally excluding setter functions from dependencies to prevent race conditions
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [naddr, relayPool, settings, isMounted])
 }

src/hooks/useExternalUrlLoader.ts

@@ -7,6 +7,7 @@ import { Highlight } from '../types/highlights'
 import { useStoreTimeline } from './useStoreTimeline'
 import { eventToHighlight } from '../services/highlightEventProcessor'
 import { KINDS } from '../config/kinds'
+import { useMountedState } from './useMountedState'
 
 // Helper to extract filename from URL
 function getFilenameFromUrl(url: string): string {
@@ -48,6 +49,8 @@ export function useExternalUrlLoader({
   setCurrentArticleCoordinate,
   setCurrentArticleEventId
 }: UseExternalUrlLoaderProps) {
+  const isMounted = useMountedState()
+  
   // Load cached URL-specific highlights from event store
   const urlFilter = useMemo(() => {
     if (!url) return null
@@ -66,30 +69,32 @@ export function useExternalUrlLoader({
     if (!relayPool || !url) return
     
     const loadExternalUrl = async () => {
+      if (!isMounted()) return
+      
       setReaderLoading(true)
       setReaderContent(undefined)
       setSelectedUrl(url)
       setIsCollapsed(true)
-      // Clear article-specific state
       setCurrentArticleCoordinate(undefined)
       setCurrentArticleEventId(undefined)
       
       try {
         const content = await fetchReadableContent(url)
+        
+        if (!isMounted()) return
+        
         setReaderContent(content)
-        
-        
-        // Set reader loading to false immediately after content is ready
         setReaderLoading(false)
         
         // Fetch highlights for this URL asynchronously
         try {
+          if (!isMounted()) 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 +104,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 (!isMounted()) return
+                
                 if (seen.has(highlight.id)) return
                 seen.add(highlight.id)
                 setHighlights((prev) => {
@@ -117,32 +122,36 @@ 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 (isMounted()) {
+            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 (isMounted()) {
+          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()
+    // 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, isMounted])
 
   // Keep UI highlights synced with cached store updates without reloading content
   useEffect(() => {
@@ -155,6 +164,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])
 }
 

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, [])
+}
+

src/services/bookmarkHelpers.ts

@@ -62,48 +62,53 @@ export { dedupeNip51Events } from './bookmarkEvents'
 export const processApplesauceBookmarks = (
   bookmarks: unknown,
   activeAccount: ActiveAccount,
-  isPrivate: boolean
+  isPrivate: boolean,
+  parentCreatedAt?: number
 ): IndividualBookmark[] => {
   if (!bookmarks) return []
 
+  console.log('[BOOKMARK_TS] processApplesauceBookmarks called with parentCreatedAt:', parentCreatedAt, 'isPrivate:', isPrivate)
+
   if (typeof bookmarks === 'object' && bookmarks !== null && !Array.isArray(bookmarks)) {
     const applesauceBookmarks = bookmarks as ApplesauceBookmarks
     const allItems: IndividualBookmark[] = []
     
     // Process notes (EventPointer[])
     if (applesauceBookmarks.notes) {
+      console.log('[BOOKMARK_TS] Processing', applesauceBookmarks.notes.length, 'notes with timestamp:', parentCreatedAt || 0)
       applesauceBookmarks.notes.forEach((note: EventPointer) => {
         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
         })
       })
     }
     
     // Process articles (AddressPointer[])
     if (applesauceBookmarks.articles) {
+      console.log('[BOOKMARK_TS] Processing', applesauceBookmarks.articles.length, 'articles with timestamp:', parentCreatedAt || 0)
       applesauceBookmarks.articles.forEach((article: AddressPointer) => {
         // Convert AddressPointer to coordinate format: kind:pubkey:identifier
         const coordinate = `${article.kind}:${article.pubkey}:${article.identifier || ''}`
         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,32 +119,33 @@ 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
         })
       })
     }
     
     // Process URLs (string[])
     if (applesauceBookmarks.urls) {
+      console.log('[BOOKMARK_TS] Processing', applesauceBookmarks.urls.length, 'URLs with timestamp:', parentCreatedAt || 0)
       applesauceBookmarks.urls.forEach((url: string) => {
         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 +159,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 +175,36 @@ 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
+      console.log('[BOOKMARK_TS] After hydration - id:', item.id, 'kind:', item.kind, 'isBookmarkListEvent:', isBookmarkListEvent, 'content:', item.content?.substring(0, 50))
+      return !isBookmarkListEvent
+    })
 }
 
 // Note: event decryption/collection lives in `bookmarkProcessing.ts`

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,
@@ -121,6 +121,7 @@ export async function collectBookmarksFromEvents(
   const decryptJobs: Array<{ evt: NostrEvent; metadata: { dTag?: string; setTitle?: string; setDescription?: string; setImage?: string } }> = []
 
   for (const evt of bookmarkListEvents) {
+    console.log('[BOOKMARK_TS] Processing bookmark event', evt.id, 'kind:', evt.kind, 'created_at:', evt.created_at)
     newestCreatedAt = Math.max(newestCreatedAt, evt.created_at || 0)
     if (!latestContent && evt.content && !Helpers.hasHiddenContent(evt)) latestContent = evt.content
     if (Array.isArray(evt.tags)) allTags = allTags.concat(evt.tags)
@@ -155,7 +156,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 +182,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,

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)