chore: bump version to 0.6.6

- Use eventStore.add() directly instead of mapEventsToStore
- Use tap() operator to process and store events as they arrive
- Add eventStore and settings to useEffect dependencies
- Fixes TypeScript and ESLint errors

CHANGELOG.md

@@ -7,6 +7,67 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [0.6.5] - 2025-10-14
+
+### Added
+
+- Highlights tab on `/explore` page
+  - View highlights from friends and followed users
+  - Tab structure matching `/me` and profile pages
+  - Grid layout for highlights with cards
+  - Highlights shown first, writings second
+  - Clicking highlight opens source article and scrolls to position
+  - Opens highlights sidebar automatically when clicking from explore
+- Citation attribution on highlight items
+  - Shows "— Author, Article Title" for Nostr-native content
+  - Shows "— domain.com" for web URLs
+  - Resolves author profiles and article titles automatically
+- Comment icon (fa-comments) for highlights with comments
+  - Flipped horizontally for better visual alignment
+  - Colored based on highlight level (mine/friends/nostrverse)
+  - No background or extra indent for cleaner look
+- Click timestamp to open highlight in native Nostr app
+  - Uses nostr:nevent links for native app integration
+
+### Changed
+
+- Highlight counter text color now matches article text (var(--color-text))
+  - Better readability in both light and dark modes
+  - Only forces white in overlay context (hero images)
+- Highlight level colors applied to explore page highlights
+  - Yellow for own highlights
+  - Orange for friends' highlights
+  - Purple for nostrverse highlights
+- Explore page tab order: Highlights first, Writings second
+- Explore page tabs now extend full width to match content grid
+
+### Fixed
+
+- Highlight counter readability in light mode
+  - Theme-aware text color instead of hardcoded blue
+  - Consistent with reading time indicator styling
+- Scroll-to-highlight reliability in article view
+  - Added retry mechanism for asynchronous content loading
+  - Attempts to find highlight element up to 20 times over 2 seconds
+- Author attribution in highlight citations
+  - Correctly extracts author pubkey from highlight's p tag
+  - No more "Unknown" author names
+- Explore page grid layout
+  - Removed max-width constraint blocking full-width display
+  - Tabs and content now properly aligned
+
+### Style
+
+- Replaced server icon with highlighter icon in highlight items
+- Switch from solid comment icon to outlined comments icon (fa-regular)
+- Removed background from highlight comments for cleaner appearance
+- Removed extra left margin from comments (icon provides sufficient indent)
+- Comment icon colored by highlight level with no opacity
+
+### Dependencies
+
+- Added @fortawesome/free-regular-svg-icons package for outlined icons
+
 ## [0.6.4] - 2025-10-14
 
 ### Added
@@ -1155,7 +1216,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Optimize relay usage following applesauce-relay best practices
 - Use applesauce-react event models for better profile handling
 
-[Unreleased]: https://github.com/dergigi/boris/compare/v0.6.4...HEAD
+[Unreleased]: https://github.com/dergigi/boris/compare/v0.6.5...HEAD
+[0.6.5]: https://github.com/dergigi/boris/compare/v0.6.4...v0.6.5
 [0.6.4]: https://github.com/dergigi/boris/compare/v0.6.3...v0.6.4
 [0.6.3]: https://github.com/dergigi/boris/compare/v0.6.2...v0.6.3
 [0.6.2]: https://github.com/dergigi/boris/compare/v0.6.1...v0.6.2

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "boris",
-  "version": "0.6.5",
+  "version": "0.6.6",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "boris",
-      "version": "0.6.5",
+      "version": "0.6.6",
       "dependencies": {
         "@fortawesome/fontawesome-svg-core": "^7.1.0",
         "@fortawesome/free-regular-svg-icons": "^7.1.0",

package.json

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

src/components/Bookmarks.tsx

@@ -305,7 +305,7 @@ const Bookmarks: React.FC<BookmarksProps> = ({ relayPool, onLogout }) => {
       onCreateHighlight={handleCreateHighlight}
       hasActiveAccount={!!(activeAccount && relayPool)}
       explore={showExplore ? (
-        relayPool ? <Explore relayPool={relayPool} activeTab={exploreTab} /> : null
+        relayPool ? <Explore relayPool={relayPool} eventStore={eventStore} settings={settings} activeTab={exploreTab} /> : null
       ) : undefined}
       me={showMe ? (
         relayPool ? <Me relayPool={relayPool} activeTab={meTab} /> : null

src/components/Explore.tsx

@@ -3,12 +3,15 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faSpinner, faExclamationCircle, faNewspaper, faPenToSquare, faHighlighter } from '@fortawesome/free-solid-svg-icons'
 import { Hooks } from 'applesauce-react'
 import { RelayPool } from 'applesauce-relay'
+import { IEventStore } from 'applesauce-core'
 import { nip19 } from 'nostr-tools'
 import { useNavigate } from 'react-router-dom'
 import { fetchContacts } from '../services/contactService'
 import { fetchBlogPostsFromAuthors, BlogPostPreview } from '../services/exploreService'
 import { fetchHighlightsFromAuthors } from '../services/highlightService'
+import { fetchProfiles } from '../services/profileService'
 import { Highlight } from '../types/highlights'
+import { UserSettings } from '../services/settingsService'
 import BlogPostCard from './BlogPostCard'
 import { HighlightItem } from './HighlightItem'
 import { getCachedPosts, upsertCachedPost, setCachedPosts, getCachedHighlights, upsertCachedHighlight, setCachedHighlights } from '../services/exploreCache'
@@ -18,12 +21,14 @@ import { classifyHighlights } from '../utils/highlightClassification'
 
 interface ExploreProps {
   relayPool: RelayPool
+  eventStore: IEventStore
+  settings?: UserSettings
   activeTab?: TabType
 }
 
 type TabType = 'writings' | 'highlights'
 
-const Explore: React.FC<ExploreProps> = ({ relayPool, activeTab: propActiveTab }) => {
+const Explore: React.FC<ExploreProps> = ({ relayPool, eventStore, settings, activeTab: propActiveTab }) => {
   const activeAccount = Hooks.useActiveAccount()
   const navigate = useNavigate()
   const [activeTab, setActiveTab] = useState<TabType>(propActiveTab || 'highlights')
@@ -152,6 +157,14 @@ const Explore: React.FC<ExploreProps> = ({ relayPool, activeTab: propActiveTab }
           fetchHighlightsFromAuthors(relayPool, contactsArray)
         ])
 
+        // Fetch profiles for all blog post authors to cache them
+        if (posts.length > 0) {
+          const authorPubkeys = Array.from(new Set(posts.map(p => p.author)))
+          fetchProfiles(relayPool, eventStore, authorPubkeys, settings).catch(err => {
+            console.error('Failed to fetch author profiles:', err)
+          })
+        }
+
         if (posts.length === 0 && userHighlights.length === 0) {
           setError('No content found from your friends yet')
         }
@@ -184,7 +197,7 @@ const Explore: React.FC<ExploreProps> = ({ relayPool, activeTab: propActiveTab }
     }
 
     loadData()
-  }, [relayPool, activeAccount, blogPosts.length, highlights.length, refreshTrigger])
+  }, [relayPool, activeAccount, blogPosts.length, highlights.length, refreshTrigger, eventStore, settings])
 
   // Pull-to-refresh
   const pullToRefreshState = usePullToRefresh(exploreContainerRef, {
@@ -243,16 +256,25 @@ const Explore: React.FC<ExploreProps> = ({ relayPool, activeTab: propActiveTab }
     return classifyHighlights(highlights, activeAccount?.pubkey, followedPubkeys)
   }, [highlights, activeAccount?.pubkey, followedPubkeys])
 
+  // Filter out blog posts with unreasonable future dates (allow 1 day for clock skew)
+  const filteredBlogPosts = useMemo(() => {
+    const maxFutureTime = Date.now() / 1000 + (24 * 60 * 60) // 1 day from now
+    return blogPosts.filter(post => {
+      const publishedTime = post.published || post.event.created_at
+      return publishedTime <= maxFutureTime
+    })
+  }, [blogPosts])
+
   const renderTabContent = () => {
     switch (activeTab) {
       case 'writings':
-        return blogPosts.length === 0 ? (
+        return filteredBlogPosts.length === 0 ? (
           <div className="explore-empty" style={{ gridColumn: '1/-1', textAlign: 'center', color: 'var(--text-secondary)' }}>
             <p>No blog posts found yet.</p>
           </div>
         ) : (
           <div className="explore-grid">
-            {blogPosts.map((post) => (
+            {filteredBlogPosts.map((post) => (
               <BlogPostCard
                 key={`${post.author}:${post.event.tags.find(t => t[0] === 'd')?.[1]}`}
                 post={post}

src/components/HighlightItem.tsx

@@ -18,6 +18,58 @@ import { getNostrUrl } from '../config/nostrGateways'
 import CompactButton from './CompactButton'
 import { HighlightCitation } from './HighlightCitation'
 
+// Helper to detect if a URL is an image
+const isImageUrl = (url: string): boolean => {
+  try {
+    const urlObj = new URL(url)
+    const pathname = urlObj.pathname.toLowerCase()
+    return /\.(jpg|jpeg|png|gif|webp|svg|bmp|ico)(\?.*)?$/.test(pathname)
+  } catch {
+    return false
+  }
+}
+
+// Component to render comment with links and inline images
+const CommentContent: React.FC<{ text: string }> = ({ text }) => {
+  // URL regex pattern
+  const urlPattern = /(https?:\/\/[^\s]+)/g
+  const parts = text.split(urlPattern)
+  
+  return (
+    <>
+      {parts.map((part, index) => {
+        if (part.match(urlPattern)) {
+          if (isImageUrl(part)) {
+            return (
+              <img
+                key={index}
+                src={part}
+                alt="Comment attachment"
+                className="highlight-comment-image"
+                loading="lazy"
+              />
+            )
+          } else {
+            return (
+              <a
+                key={index}
+                href={part}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="highlight-comment-link"
+                onClick={(e) => e.stopPropagation()}
+              >
+                {part}
+              </a>
+            )
+          }
+        }
+        return <span key={index}>{part}</span>
+      })}
+    </>
+  )
+}
+
 interface HighlightWithLevel extends Highlight {
   level?: 'mine' | 'friends' | 'nostrverse'
 }
@@ -31,6 +83,7 @@ interface HighlightItemProps {
   eventStore?: IEventStore | null
   onHighlightUpdate?: (highlight: Highlight) => void
   onHighlightDelete?: (highlightId: string) => void
+  showCitation?: boolean
 }
 
 export const HighlightItem: React.FC<HighlightItemProps> = ({ 
@@ -41,7 +94,8 @@ export const HighlightItem: React.FC<HighlightItemProps> = ({
   relayPool,
   eventStore,
   onHighlightUpdate,
-  onHighlightDelete
+  onHighlightDelete,
+  showCitation = true
 }) => {
   const itemRef = useRef<HTMLDivElement>(null)
   const menuRef = useRef<HTMLDivElement>(null)
@@ -343,15 +397,19 @@ export const HighlightItem: React.FC<HighlightItemProps> = ({
           {highlight.content}
         </blockquote>
         
-        <HighlightCitation
-          highlight={highlight}
-          relayPool={relayPool}
-        />
+        {showCitation && (
+          <HighlightCitation
+            highlight={highlight}
+            relayPool={relayPool}
+          />
+        )}
         
         {highlight.comment && (
           <div className="highlight-comment">
             <FontAwesomeIcon icon={faComments} flip="horizontal" className="highlight-comment-icon" />
-            {highlight.comment}
+            <div className="highlight-comment-text">
+              <CommentContent text={highlight.comment} />
+            </div>
           </div>
         )}
         

src/components/HighlightsPanel.tsx

@@ -162,6 +162,7 @@ export const HighlightsPanel: React.FC<HighlightsPanelProps> = ({
               eventStore={eventStore}
               onHighlightUpdate={handleHighlightUpdate}
               onHighlightDelete={handleHighlightDelete}
+              showCitation={false}
             />
           ))}
         </div>

src/services/profileService.ts

@@ -0,0 +1,81 @@
+import { RelayPool, completeOnEose, onlyEvents } from 'applesauce-relay'
+import { lastValueFrom, merge, Observable, takeUntil, timer, toArray, tap } from 'rxjs'
+import { NostrEvent } from 'nostr-tools'
+import { IEventStore } from 'applesauce-core'
+import { prioritizeLocalRelays, partitionRelays } from '../utils/helpers'
+import { rebroadcastEvents } from './rebroadcastService'
+import { UserSettings } from './settingsService'
+
+/**
+ * Fetches profile metadata (kind:0) for a list of pubkeys
+ * Stores profiles in the event store and optionally to local relays
+ */
+export const fetchProfiles = async (
+  relayPool: RelayPool,
+  eventStore: IEventStore,
+  pubkeys: string[],
+  settings?: UserSettings
+): Promise<NostrEvent[]> => {
+  try {
+    if (pubkeys.length === 0) {
+      return []
+    }
+
+    const uniquePubkeys = Array.from(new Set(pubkeys))
+    console.log('👤 Fetching profiles (kind:0) for', uniquePubkeys.length, 'authors')
+
+    const relayUrls = Array.from(relayPool.relays.values()).map(relay => relay.url)
+    const prioritized = prioritizeLocalRelays(relayUrls)
+    const { local: localRelays, remote: remoteRelays } = partitionRelays(prioritized)
+
+    // Keep only the most recent profile for each pubkey
+    const profilesByPubkey = new Map<string, NostrEvent>()
+
+    const processEvent = (event: NostrEvent) => {
+      const existing = profilesByPubkey.get(event.pubkey)
+      if (!existing || event.created_at > existing.created_at) {
+        profilesByPubkey.set(event.pubkey, event)
+        // Store in event store immediately
+        eventStore.add(event)
+      }
+    }
+
+    const local$ = localRelays.length > 0
+      ? relayPool
+          .req(localRelays, { kinds: [0], authors: uniquePubkeys })
+          .pipe(
+            onlyEvents(),
+            tap((event: NostrEvent) => processEvent(event)),
+            completeOnEose(),
+            takeUntil(timer(1200))
+          )
+      : new Observable<NostrEvent>((sub) => sub.complete())
+
+    const remote$ = remoteRelays.length > 0
+      ? relayPool
+          .req(remoteRelays, { kinds: [0], authors: uniquePubkeys })
+          .pipe(
+            onlyEvents(),
+            tap((event: NostrEvent) => processEvent(event)),
+            completeOnEose(),
+            takeUntil(timer(6000))
+          )
+      : new Observable<NostrEvent>((sub) => sub.complete())
+
+    await lastValueFrom(merge(local$, remote$).pipe(toArray()))
+
+    const profiles = Array.from(profilesByPubkey.values())
+    console.log('✅ Fetched', profiles.length, 'unique profiles')
+
+    // Rebroadcast profiles to local/all relays based on settings
+    if (profiles.length > 0) {
+      await rebroadcastEvents(profiles, relayPool, settings)
+    }
+
+    return profiles
+  } catch (error) {
+    console.error('Failed to fetch profiles:', error)
+    return []
+  }
+}
+

src/styles/layout/highlights.css

@@ -129,8 +129,12 @@
 .highlight-content { flex: 1; display: flex; flex-direction: column; gap: 0.5rem; padding: 2.25rem 0.75rem 2.5rem; }
 .highlight-text { margin: 0; padding: 0 0 0 1.25rem; font-style: italic; color: var(--color-text); line-height: 1.6; border-left: none; font-size: 0.95rem; }
 .highlight-citation { margin-left: 1.25rem; font-size: 0.8rem; color: var(--color-text-secondary); font-style: normal; padding-top: 0.25rem; }
-.highlight-comment { margin-top: 0.5rem; padding: 0.75rem; border-radius: 4px; font-size: 0.875rem; color: var(--color-text); line-height: 1.5; display: flex; gap: 0.5rem; align-items: flex-start; }
+.highlight-comment { margin-top: 0.5rem; padding: 0.75rem; border-radius: 4px; font-size: 0.875rem; color: var(--color-text); line-height: 1.5; display: flex; gap: 0.5rem; align-items: flex-start; word-wrap: break-word; overflow-wrap: break-word; word-break: break-word; min-width: 0; }
 .highlight-comment-icon { flex-shrink: 0; margin-top: 0.125rem; }
+.highlight-comment-text { flex: 1; min-width: 0; }
+.highlight-comment-link { color: var(--color-primary); text-decoration: underline; word-wrap: break-word; overflow-wrap: break-word; }
+.highlight-comment-link:hover { opacity: 0.8; }
+.highlight-comment-image { display: block; max-width: 100%; height: auto; margin-top: 0.5rem; border-radius: 6px; border: 1px solid var(--color-border); }
 
 /* Level-colored comment icons */
 .highlight-item.level-mine .highlight-comment-icon { color: var(--highlight-color-mine, #ffff00); }