chore: bump version to 0.8.1

- Add bookmarks to useEffect dependencies that load tab data
- Reads tab now updates when bookmarks are loaded/updated
- Fixes 'No articles ready yet' disappearing when switching tabs
- Ensures reads are always derived from current bookmark state
- Re-renders Reads tab whenever bookmarks change

CHANGELOG.md

@@ -7,6 +7,37 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [0.8.0] - 2025-10-19
+
+### Added
+
+- Centralized reading progress controller for non-blocking reading position sync
+  - Progressive loading with caching from event store
+  - Streaming updates from relays with proper merging
+  - 2-second completion hold at 100% reading position to prevent UI jitter
+  - Configurable auto-mark-as-read at 100% reading progress
+- Reading progress indicators on blog post cards
+  - Visual progress bars on article cards in Explore and bookmarks sidebar
+  - Persistent reading position synced across devices via NIP-85
+
+### Changed
+
+- Reading position sync now enabled by default in runtime paths
+- Improved auto-mark-as-read behavior with reliable completion detection
+- Reading progress events use proper NIP-85 specification (kind 39802)
+
+### Fixed
+
+- Reading position saves with proper validation and event store integration
+- Profile page writings loading now fetches all writings without limits
+- Consistent reading progress calculation and event publishing
+
+### Performance
+
+- Non-blocking reading progress controller with streaming updates
+- Cache-first loading strategy with local event store before relay queries
+- Efficient progress merging and deduplication
+
 ## [0.7.4] - 2025-10-18
 
 ### Added
@@ -2013,7 +2044,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.7.4...HEAD
+[Unreleased]: https://github.com/dergigi/boris/compare/v0.8.0...HEAD
+[0.8.0]: https://github.com/dergigi/boris/compare/v0.7.4...v0.8.0
 [0.7.4]: https://github.com/dergigi/boris/compare/v0.7.3...v0.7.4
 [0.7.3]: https://github.com/dergigi/boris/compare/v0.7.2...v0.7.3
 [0.7.2]: https://github.com/dergigi/boris/compare/v0.7.0...v0.7.2

package.json

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

src/App.tsx

@@ -116,6 +116,12 @@ function AppRoutes({
         writingsController.start({ relayPool, eventStore, pubkey })
       }
 
+      // Load reading progress (controller manages its own state)
+      if (pubkey && eventStore && !readingProgressController.isLoadedFor(pubkey)) {
+        console.log('[progress] 🚀 Auto-loading reading progress on mount/login')
+        readingProgressController.start({ relayPool, eventStore, pubkey })
+      }
+
       // Start centralized nostrverse highlights controller (non-blocking)
       if (eventStore) {
         nostrverseHighlightsController.start({ relayPool, eventStore })

src/components/BookmarkItem.tsx

@@ -19,9 +19,10 @@ interface BookmarkItemProps {
   index: number
   onSelectUrl?: (url: string, bookmark?: { id: string; kind: number; tags: string[][]; pubkey: string }) => void
   viewMode?: ViewMode
+  readingProgress?: number
 }
 
-export const BookmarkItem: React.FC<BookmarkItemProps> = ({ bookmark, index, onSelectUrl, viewMode = 'cards' }) => {
+export const BookmarkItem: React.FC<BookmarkItemProps> = ({ bookmark, index, onSelectUrl, viewMode = 'cards', readingProgress }) => {
   const [ogImage, setOgImage] = useState<string | null>(null)
 
   const short = (v: string) => `${v.slice(0, 8)}...${v.slice(-8)}`
@@ -139,7 +140,8 @@ export const BookmarkItem: React.FC<BookmarkItemProps> = ({ bookmark, index, onS
     handleReadNow,
     articleImage,
     articleSummary,
-    contentTypeIcon: getContentTypeIcon()
+    contentTypeIcon: getContentTypeIcon(),
+    readingProgress
   }
 
   if (viewMode === 'compact') {

src/components/BookmarkList.tsx

@@ -13,7 +13,7 @@ import { ViewMode } from './Bookmarks'
 import { usePullToRefresh } from 'use-pull-to-refresh'
 import RefreshIndicator from './RefreshIndicator'
 import { BookmarkSkeleton } from './Skeletons'
-import { groupIndividualBookmarks, hasContent, getBookmarkSets, getBookmarksWithoutSet } from '../utils/bookmarkUtils'
+import { groupIndividualBookmarks, hasContent, getBookmarkSets, getBookmarksWithoutSet, hasCreationDate } from '../utils/bookmarkUtils'
 import { UserSettings } from '../services/settingsService'
 import AddBookmarkModal from './AddBookmarkModal'
 import { createWebBookmark } from '../services/webBookmarkService'
@@ -100,6 +100,7 @@ export const BookmarkList: React.FC<BookmarkListProps> = ({
   // Merge and flatten all individual bookmarks from all lists
   const allIndividualBookmarks = bookmarks.flatMap(b => b.individualBookmarks || [])
     .filter(hasContent)
+    .filter(b => !settings?.hideBookmarksWithoutCreationDate || hasCreationDate(b))
   
   // Apply filter
   const filteredBookmarks = filterBookmarksByType(allIndividualBookmarks, selectedFilter)
@@ -116,8 +117,8 @@ export const BookmarkList: React.FC<BookmarkListProps> = ({
       : [
           { key: 'nip51-private', title: 'Private Bookmarks', items: groups.nip51Private },
           { key: 'nip51-public', title: 'My Bookmarks', items: groups.nip51Public },
-          { key: 'amethyst-private', title: 'Amethyst Private', items: groups.amethystPrivate },
-          { key: 'amethyst-public', title: 'Amethyst Lists', items: groups.amethystPublic },
+          { key: 'amethyst-private', title: 'Private Lists', items: groups.amethystPrivate },
+          { key: 'amethyst-public', title: 'My Lists', items: groups.amethystPublic },
           { key: 'web', title: 'Web Bookmarks', items: groups.standaloneWeb }
         ]
   

src/components/BookmarkViews/CardView.tsx

@@ -24,6 +24,7 @@ interface CardViewProps {
   articleImage?: string
   articleSummary?: string
   contentTypeIcon: IconDefinition
+  readingProgress?: number
 }
 
 export const CardView: React.FC<CardViewProps> = ({
@@ -38,7 +39,8 @@ export const CardView: React.FC<CardViewProps> = ({
   handleReadNow,
   articleImage,
   articleSummary,
-  contentTypeIcon
+  contentTypeIcon,
+  readingProgress
 }) => {
   const firstUrl = hasUrls ? extractedUrls[0] : null
   const firstUrlClassificationType = firstUrl ? classifyUrl(firstUrl)?.type : null
@@ -52,6 +54,14 @@ export const CardView: React.FC<CardViewProps> = ({
   const shouldTruncate = !expanded && contentLength > 210
   const isArticle = bookmark.kind === 30023
   
+  // Calculate progress color (matching BlogPostCard logic)
+  let progressColor = '#6366f1' // Default blue (reading)
+  if (readingProgress && readingProgress >= 0.95) {
+    progressColor = '#10b981' // Green (completed)
+  } else if (readingProgress && readingProgress > 0 && readingProgress <= 0.10) {
+    progressColor = 'var(--color-text)' // Neutral text color (started)
+  }
+  
   // Determine which image to use (article image, instant preview, or OG image)
   const previewImage = articleImage || instantPreview || ogImage
   const cachedImage = useImageCache(previewImage || undefined)
@@ -163,6 +173,28 @@ export const CardView: React.FC<CardViewProps> = ({
         </button>
       )}
       
+      {/* Reading progress indicator for articles */}
+      {isArticle && readingProgress !== undefined && readingProgress > 0 && (
+        <div 
+          style={{
+            height: '3px',
+            width: '100%',
+            background: 'var(--color-border)',
+            overflow: 'hidden',
+            marginTop: '0.75rem'
+          }}
+        >
+          <div
+            style={{
+              height: '100%',
+              width: `${Math.round(readingProgress * 100)}%`,
+              background: progressColor,
+              transition: 'width 0.3s ease, background 0.3s ease'
+            }}
+          />
+        </div>
+      )}
+      
       <div className="bookmark-footer">
         <div className="bookmark-meta-minimal">
           <Link

src/components/BookmarkViews/CompactView.tsx

@@ -13,6 +13,7 @@ interface CompactViewProps {
   onSelectUrl?: (url: string, bookmark?: { id: string; kind: number; tags: string[][]; pubkey: string }) => void
   articleSummary?: string
   contentTypeIcon: IconDefinition
+  readingProgress?: number
 }
 
 export const CompactView: React.FC<CompactViewProps> = ({
@@ -22,12 +23,21 @@ export const CompactView: React.FC<CompactViewProps> = ({
   extractedUrls,
   onSelectUrl,
   articleSummary,
-  contentTypeIcon
+  contentTypeIcon,
+  readingProgress
 }) => {
   const isArticle = bookmark.kind === 30023
   const isWebBookmark = bookmark.kind === 39701
   const isClickable = hasUrls || isArticle || isWebBookmark
   
+  // Calculate progress color (matching BlogPostCard logic)
+  let progressColor = '#6366f1' // Default blue (reading)
+  if (readingProgress && readingProgress >= 0.95) {
+    progressColor = '#10b981' // Green (completed)
+  } else if (readingProgress && readingProgress > 0 && readingProgress <= 0.10) {
+    progressColor = 'var(--color-text)' // Neutral text color (started)
+  }
+
   const handleCompactClick = () => {
     if (!onSelectUrl) return
     
@@ -62,6 +72,28 @@ export const CompactView: React.FC<CompactViewProps> = ({
         <span className="bookmark-date-compact">{formatDateCompact(bookmark.created_at)}</span>
         {/* CTA removed */}
       </div>
+      
+      {/* Reading progress indicator for articles */}
+      {isArticle && readingProgress !== undefined && readingProgress > 0 && (
+        <div 
+          style={{
+            height: '2px',
+            width: '100%',
+            background: 'var(--color-border)',
+            overflow: 'hidden',
+            margin: '0'
+          }}
+        >
+          <div
+            style={{
+              height: '100%',
+              width: `${Math.round(readingProgress * 100)}%`,
+              background: progressColor,
+              transition: 'width 0.3s ease, background 0.3s ease'
+            }}
+          />
+        </div>
+      )}
     </div>
   )
 }

src/components/ContentPanel.tsx

@@ -32,7 +32,7 @@ import {
 import AuthorCard from './AuthorCard'
 import { faBooks } from '../icons/customIcons'
 import { extractYouTubeId, getYouTubeMeta } from '../services/youtubeMetaService'
-import { classifyUrl } from '../utils/helpers'
+import { classifyUrl, shouldTrackReadingProgress } from '../utils/helpers'
 import { buildNativeVideoUrl } from '../utils/videoHelpers'
 import { useReadingPosition } from '../hooks/useReadingPosition'
 import { ReadingProgressIndicator } from './ReadingProgressIndicator'
@@ -163,6 +163,12 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
       console.log('[progress] ⏭️ ContentPanel: Sync disabled in settings')
       return
     }
+    
+    // Check if content is long enough to track reading progress
+    if (!shouldTrackReadingProgress(html, markdown)) {
+      console.log('[progress] ⏭️ ContentPanel: Content too short to track reading progress')
+      return
+    }
 
     const scrollTop = window.pageYOffset || document.documentElement.scrollTop
     console.log('[progress] 💾 ContentPanel: Saving position:', {
@@ -190,7 +196,7 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
     } catch (error) {
       console.error('[progress] ❌ ContentPanel: Failed to save reading position:', error)
     }
-  }, [activeAccount, relayPool, eventStore, articleIdentifier, settings?.syncReadingPosition, selectedUrl])
+  }, [activeAccount, relayPool, eventStore, articleIdentifier, settings?.syncReadingPosition, selectedUrl, html, markdown])
 
   const { isReadingComplete, progressPercentage, saveNow } = useReadingPosition({
     enabled: isTextContent,

src/components/Me.tsx

@@ -44,7 +44,7 @@ interface MeProps {
 type TabType = 'highlights' | 'reading-list' | 'reads' | 'links' | 'writings'
 
 // Valid reading progress filters
-const VALID_FILTERS: ReadingProgressFilterType[] = ['all', 'unopened', 'started', 'reading', 'completed']
+const VALID_FILTERS: ReadingProgressFilterType[] = ['all', 'unopened', 'started', 'reading', 'completed', 'highlighted']
 
 const Me: React.FC<MeProps> = ({ 
   relayPool, 
@@ -348,7 +348,7 @@ const Me: React.FC<MeProps> = ({
         break
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [activeTab, viewingPubkey, refreshTrigger])
+  }, [activeTab, viewingPubkey, refreshTrigger, bookmarks])
 
   // Sync myHighlights from controller
   useEffect(() => {
@@ -471,6 +471,25 @@ const Me: React.FC<MeProps> = ({
     }
   }
 
+  // Helper to get reading progress for a bookmark
+  const getBookmarkReadingProgress = (bookmark: IndividualBookmark): number | undefined => {
+    if (bookmark.kind === 30023) {
+      const dTag = bookmark.tags.find(t => t[0] === 'd')?.[1]
+      if (!dTag) return undefined
+      try {
+        const naddr = nip19.naddrEncode({
+          kind: 30023,
+          pubkey: bookmark.pubkey,
+          identifier: dTag
+        })
+        return readingProgressMap.get(naddr)
+      } catch (err) {
+        return undefined
+      }
+    }
+    return undefined
+  }
+
   // Merge and flatten all individual bookmarks
   const allIndividualBookmarks = bookmarks.flatMap(b => b.individualBookmarks || [])
     .filter(hasContent)
@@ -480,17 +499,38 @@ const Me: React.FC<MeProps> = ({
   
   const groups = groupIndividualBookmarks(filteredBookmarks)
 
+  // Enrich reads and links with reading progress from controller
+  const readsWithProgress = reads.map(item => {
+    if (item.type === 'article' && item.author) {
+      const progress = readingProgressMap.get(item.id)
+      if (progress !== undefined) {
+        return { ...item, readingProgress: progress }
+      }
+    }
+    return item
+  })
+  
+  const linksWithProgress = links.map(item => {
+    if (item.url) {
+      const progress = readingProgressMap.get(item.url)
+      if (progress !== undefined) {
+        return { ...item, readingProgress: progress }
+      }
+    }
+    return item
+  })
+
   // Apply reading progress filter
-  const filteredReads = filterByReadingProgress(reads, readingProgressFilter)
-  const filteredLinks = filterByReadingProgress(links, readingProgressFilter)
+  const filteredReads = filterByReadingProgress(readsWithProgress, readingProgressFilter, highlights)
+  const filteredLinks = filterByReadingProgress(linksWithProgress, readingProgressFilter, highlights)
   const sections: Array<{ key: string; title: string; items: IndividualBookmark[] }> = 
     groupingMode === 'flat'
       ? [{ key: 'all', title: `All Bookmarks (${filteredBookmarks.length})`, items: filteredBookmarks }]
       : [
           { key: 'nip51-private', title: 'Private Bookmarks', items: groups.nip51Private },
           { key: 'nip51-public', title: 'My Bookmarks', items: groups.nip51Public },
-          { key: 'amethyst-private', title: 'Amethyst Private', items: groups.amethystPrivate },
-          { key: 'amethyst-public', title: 'Amethyst Lists', items: groups.amethystPublic },
+          { key: 'amethyst-private', title: 'Private Lists', items: groups.amethystPrivate },
+          { key: 'amethyst-public', title: 'My Lists', items: groups.amethystPublic },
           { key: 'web', title: 'Web Bookmarks', items: groups.standaloneWeb }
         ]
 
@@ -567,6 +607,7 @@ const Me: React.FC<MeProps> = ({
                       index={index}
                       viewMode="cards"
                       onSelectUrl={handleSelectUrl}
+                      readingProgress={getBookmarkReadingProgress(individualBookmark)}
                     />
                   ))}
                 </div>

src/components/ReadingProgressFilters.tsx

@@ -1,9 +1,9 @@
 import React from 'react'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faBookOpen, faCheckCircle, faAsterisk } from '@fortawesome/free-solid-svg-icons'
+import { faBookOpen, faCheckCircle, faAsterisk, faHighlighter } from '@fortawesome/free-solid-svg-icons'
 import { faEnvelope, faEnvelopeOpen } from '@fortawesome/free-regular-svg-icons'
 
-export type ReadingProgressFilterType = 'all' | 'unopened' | 'started' | 'reading' | 'completed'
+export type ReadingProgressFilterType = 'all' | 'unopened' | 'started' | 'reading' | 'completed' | 'highlighted'
 
 interface ReadingProgressFiltersProps {
   selectedFilter: ReadingProgressFilterType
@@ -16,6 +16,7 @@ const ReadingProgressFilters: React.FC<ReadingProgressFiltersProps> = ({ selecte
     { type: 'unopened' as const, icon: faEnvelope, label: 'Unopened' },
     { type: 'started' as const, icon: faEnvelopeOpen, label: 'Started' },
     { type: 'reading' as const, icon: faBookOpen, label: 'Reading' },
+    { type: 'highlighted' as const, icon: faHighlighter, label: 'Highlighted' },
     { type: 'completed' as const, icon: faCheckCircle, label: 'Completed' }
   ]
 
@@ -23,8 +24,15 @@ const ReadingProgressFilters: React.FC<ReadingProgressFiltersProps> = ({ selecte
     <div className="bookmark-filters">
       {filters.map(filter => {
         const isActive = selectedFilter === filter.type
-        // Only "completed" gets green color, everything else uses default blue
-        const activeStyle = isActive && filter.type === 'completed' ? { color: '#10b981' } : undefined
+        // Only "completed" gets green color, "highlighted" gets yellow, everything else uses default blue
+        let activeStyle: Record<string, string> | undefined = undefined
+        if (isActive) {
+          if (filter.type === 'completed') {
+            activeStyle = { color: '#10b981' } // green
+          } else if (filter.type === 'highlighted') {
+            activeStyle = { color: '#fde047' } // yellow
+          }
+        }
         
         return (
           <button

src/components/RelayStatusIndicator.tsx

@@ -156,7 +156,7 @@ export const RelayStatusIndicator: React.FC<RelayStatusIndicatorProps> = ({
                     fontWeight: 400
                   }}
                 >
-                  {connectedUrls.length} local relay{connectedUrls.length !== 1 ? 's' : ''}
+                  Local relays only
                 </span>
               </>
             )}

src/components/Settings.tsx

@@ -41,6 +41,7 @@ const DEFAULT_SETTINGS: UserSettings = {
   paragraphAlignment: 'justify',
   syncReadingPosition: true,
   autoMarkAsReadOnCompletion: false,
+  hideBookmarksWithoutCreationDate: false,
 }
 
 interface SettingsProps {

src/components/Settings/LayoutBehaviorSettings.tsx

@@ -130,6 +130,19 @@ const LayoutBehaviorSettings: React.FC<LayoutBehaviorSettingsProps> = ({ setting
           <span>Automatically mark as read at 100%</span>
         </label>
       </div>
+
+      <div className="setting-group">
+        <label htmlFor="hideBookmarksWithoutCreationDate" className="checkbox-label">
+          <input
+            id="hideBookmarksWithoutCreationDate"
+            type="checkbox"
+            checked={settings.hideBookmarksWithoutCreationDate ?? false}
+            onChange={(e) => onUpdate({ hideBookmarksWithoutCreationDate: e.target.checked })}
+            className="setting-checkbox"
+          />
+          <span>Hide bookmarks missing a creation date</span>
+        </label>
+      </div>
     </div>
   )
 }

src/config/kinds.ts

@@ -14,3 +14,9 @@ export const KINDS = {
 
 export type KindValue = typeof KINDS[keyof typeof KINDS]
 
+// Reading progress tracking configuration
+export const READING_PROGRESS = {
+  // Minimum character count to track reading progress (roughly 150 words)
+  MIN_CONTENT_LENGTH: 1000
+} as const
+

src/services/settingsService.ts

@@ -61,6 +61,8 @@ export interface UserSettings {
   // Reading position sync
   syncReadingPosition?: boolean // default: false (opt-in)
   autoMarkAsReadOnCompletion?: boolean // default: false (opt-in)
+  // Bookmark filtering
+  hideBookmarksWithoutCreationDate?: boolean // default: false
 }
 
 export async function loadSettings(

src/utils/bookmarkUtils.tsx

@@ -118,6 +118,16 @@ export function hasContent(bookmark: IndividualBookmark): boolean {
   return hasValidContent || hasId
 }
 
+// Check if bookmark has a real creation date (not "Now" / current time)
+export function hasCreationDate(bookmark: IndividualBookmark): boolean {
+  if (!bookmark.created_at) return false
+  // If timestamp is missing or equals current time (within 1 second), consider it invalid
+  const now = Math.floor(Date.now() / 1000)
+  const createdAt = Math.floor(bookmark.created_at)
+  // If created_at is within 1 second of now, it's likely missing/placeholder
+  return Math.abs(createdAt - now) > 1
+}
+
 // Bookmark sets helpers (kind 30003)
 export interface BookmarkSet {
   name: string

src/utils/helpers.ts

@@ -1,4 +1,6 @@
 // Extract pubkeys from nprofile strings in content
+import { READING_PROGRESS } from '../config/kinds'
+
 export const extractNprofilePubkeys = (content: string): string[] => {
   const nprofileRegex = /nprofile1[a-z0-9]+/gi
   const matches = content.match(nprofileRegex) || []
@@ -123,3 +125,14 @@ export function createParallelReqStreams(
   return { local$, remote$ }
 }
 
+/**
+ * Checks if content is long enough to track reading progress
+ * Minimum 1000 characters (roughly 150 words)
+ */
+export const shouldTrackReadingProgress = (html: string | undefined, markdown: string | undefined): boolean => {
+  const content = (html || markdown || '').trim()
+  // Strip HTML tags to get character count
+  const plainText = content.replace(/<[^>]*>/g, '').trim()
+  return plainText.length >= READING_PROGRESS.MIN_CONTENT_LENGTH
+}
+

src/utils/readingProgressUtils.ts

@@ -1,16 +1,58 @@
 import { ReadItem } from '../services/readsService'
 import { ReadingProgressFilterType } from '../components/ReadingProgressFilters'
+import { Highlight } from '../types/highlights'
+import { nip19 } from 'nostr-tools'
 
 /**
  * Filters ReadItems by reading progress
  */
 export function filterByReadingProgress(
   items: ReadItem[],
-  filter: ReadingProgressFilterType
+  filter: ReadingProgressFilterType,
+  highlights?: Highlight[]
 ): ReadItem[] {
+  // Build a map of article references to highlight count
+  // Normalize both coordinate and naddr formats for matching
+  const articleHighlightCount = new Map<string, number>()
+  if (highlights) {
+    highlights.forEach(h => {
+      if (h.eventReference) {
+        // eventReference could be a hex ID or a coordinate (30023:pubkey:identifier)
+        let normalizedRef = h.eventReference
+        
+        // If it's a coordinate, convert to naddr format for matching
+        if (h.eventReference.includes(':')) {
+          const parts = h.eventReference.split(':')
+          if (parts.length === 3) {
+            const [kind, pubkey, identifier] = parts
+            try {
+              normalizedRef = nip19.naddrEncode({
+                kind: parseInt(kind),
+                pubkey,
+                identifier
+              })
+            } catch {
+              // If conversion fails, use the original reference
+              normalizedRef = h.eventReference
+            }
+          }
+        }
+        
+        const count = articleHighlightCount.get(normalizedRef) || 0
+        articleHighlightCount.set(normalizedRef, count + 1)
+      }
+      if (h.urlReference) {
+        const count = articleHighlightCount.get(h.urlReference) || 0
+        articleHighlightCount.set(h.urlReference, count + 1)
+      }
+    })
+  }
+
   return items.filter((item) => {
     const progress = item.readingProgress || 0
     const isMarked = item.markedAsRead || false
+    const hasHighlights = (articleHighlightCount.get(item.id) || 0) > 0 || 
+                         (item.url && (articleHighlightCount.get(item.url) || 0) > 0)
     
     switch (filter) {
       case 'unopened':
@@ -21,6 +63,8 @@ export function filterByReadingProgress(
         return progress > 0.10 && progress <= 0.94 && !isMarked
       case 'completed':
         return progress >= 0.95 || isMarked
+      case 'highlighted':
+        return hasHighlights
       case 'all':
       default:
         return true