- Add selectedHighlightId prop to ContentPanel
- Add useEffect to watch for selectedHighlightId changes
- Find and scroll to the corresponding mark element
- Temporarily brighten the highlight for visual feedback
- Pass selectedHighlightId from Bookmarks to ContentPanel
Now clicking a highlight in the sidebar properly scrolls
to and highlights the text in the article view.
- Add onHighlightClick callback to HighlightItem
- Make entire highlight item clickable with pointer cursor
- Reuse existing setSelectedHighlightId to trigger scroll
- Clicking a highlight in sidebar scrolls to it in article view
- Works with existing click-to-scroll from article to sidebar
Users can now click highlights in either direction:
- Click highlight in article → scrolls to item in sidebar
- Click highlight in sidebar → scrolls to text in article
- Bookmark icon glows blue when selectedUrl matches a bookmark
- Use app's primary blue color (#646cff) for consistency
- Check bookmark URLs with flexible matching (exact, includes)
- Pass selectedUrl to BookmarkList component
- Add glow-blue CSS class with drop-shadow effect
The bookmark icon now glows blue when viewing a bookmarked
article, providing visual feedback that it's in your collection.
- Highlighter icon glows yellow when filteredHighlights > 0
- Add pulsing animation for subtle attention-grabbing effect
- Use highlight color (#ffff00) with drop-shadow for glow
- Only applies when highlights panel is collapsed
- Provides visual feedback that highlights are available
The icon now pulses with a yellow glow when the current
article has highlights, making it easy to see at a glance.
- Show both chevron and bookmark icons when collapsed
- Button width adjusts to fit both icons
- Add gap between icons for proper spacing
- Mirrors the highlights panel behavior
- Makes it clear what the panel contains when collapsed
Both sidebars now show their respective icons (bookmark/highlighter)
when collapsed for better visual consistency and clarity.
- Show both highlighter and chevron icons when collapsed
- Button width adjusts to fit both icons
- Add gap between icons for proper spacing
- Makes it clear what the panel contains when collapsed
- Left sidebar collapsed: chevron points left (←) outward
- Right sidebar collapsed: chevron points right (→) outward
This makes it more intuitive - the chevrons point away from
the center when collapsed, indicating the direction to expand.
- Left sidebar: chevron points right (→) when collapsed
- Right sidebar: chevron points left (←) when collapsed
- Both use same button size (36x36px)
- Both use same positioning (top-aligned with 0.75rem padding)
- Both use same styling (background, border, hover states)
- Left sidebar aligns to right, right sidebar to left (mirrored)
- Remove rotation transforms for cleaner implementation
The collapse/expand mechanics now feel and look identical
but properly mirrored for left and right panels.
- Add refresh button with rotate icon to highlights header
- Button spins while loading highlights
- Disabled state when already loading
- Positioned before toggle underlines button
- Calls handleFetchHighlights to refetch from relays
- Add CSS styles for refresh button with disabled state
Users can now manually refresh highlights to see newly
created highlights without reloading the page.
- Change chevron to point right (rotation 180) when collapsed
- Position button at top-left instead of center
- Align with header position for consistency
- Adjust padding to match expanded state header
The expand button now appears at the top of the panel
next to where the highlight count would be, making it
more intuitive and consistent with the UI.
- Replace underline with semi-transparent yellow background
- Add subtle glow effect with box-shadow
- Add slight padding and border-radius for marker look
- Increase opacity on hover for better feedback
- Adjust colors for both light and dark modes
- Change cursor from 'help' to 'pointer' for clarity
Highlights now look like they were marked with a real
fluorescent highlighter marker instead of just underlined.
- Clicking a highlight in the main text scrolls to it in the sidebar
- Selected highlight is visually highlighted with border and shadow
- Add selectedHighlightId state management in Bookmarks component
- Add click handlers to mark elements in ContentPanel
- Add isSelected prop to HighlightItem with scroll-into-view
- Add CSS styles for selected highlight state
- Set cursor to pointer on clickable highlights
Users can now click on highlighted text to jump to the corresponding
highlight in the right sidebar for easy navigation.
- Remove unused applyHighlightsToText import from ContentPanel
- Replace while(true) with proper condition in findHighlightMatches
- Remove unused match parameter from replaceTextWithMark function
All ESLint and TypeScript checks now pass with no errors.
- Update useEffect to check for both html and markdown content
- Add contentRef to markdown div for DOM manipulation
- Add markdown to useEffect dependencies
- Improve logging to show which content type is available
This fixes the issue where highlights weren't appearing because
the reader service was returning markdown instead of HTML.
- Replace setTimeout with requestAnimationFrame for proper DOM timing
- Ensures contentRef is available before applying highlights
- Reorganize useEffect logic for clearer flow
- Add more specific logging for debugging
This fixes the issue where highlights weren't appearing because
the effect ran before React finished rendering the HTML content.
- Add eye/eye-slash toggle button in highlights panel header
- Button only appears when there are highlights to show
- Clicking toggles underlines on/off in the main content panel
- When hidden, removes existing <mark> elements from DOM
- Add showUnderlines state management through Bookmarks component
- Style toggle button consistently with collapse button
- Add highlights-actions container for button group
Users can now toggle highlight visibility without losing the highlight list.
- Log when useEffect is triggered
- Log contentRef status, relevant highlights count, and html presence
- Log specific reason when skipping highlight application
- This will help identify why highlights aren't being applied to DOM
- Add selectedUrl prop to HighlightsPanel
- Filter highlights by URL using same normalization logic as ContentPanel
- Update count badge to show filtered count
- Improve empty state message based on context
- Now shows "No highlights for this article" instead of all highlights
This makes the highlights panel contextual to the current article being viewed.
- Use useEffect to apply highlights after HTML is rendered
- Add 100ms delay to ensure DOM is fully parsed
- Use ref to directly manipulate rendered content
- Remove pre-rendering highlight application from useMemo
- Add detailed logging for debugging
This fixes the issue where highlights weren't appearing because they
were being applied to the HTML string before the DOM was ready.
- Remove background color, use transparent background
- Change border-bottom from blue to gold/yellow (#ffd700)
- Add subtle yellow background on hover
- Adjust light mode colors for better contrast
- Replace manual tag parsing with applesauce-core helper functions
- Use getHighlightText, getHighlightContext, getHighlightComment, etc.
- Add support for highlight comments in UI
- Extract author from attributions using proper helper
- Handle both event and address pointers correctly
- Add styling for highlight comments
This follows applesauce best practices and makes the code more robust.
- Add dedupeHighlights function to remove duplicate events from multiple relays
- Log both raw and deduplicated event counts for debugging
- Follows same pattern as bookmark deduplication
- Use proper URL parsing to normalize URLs (remove www, query params, fragments)
- Add detailed logging for URL comparison to debug matching issues
- Implement two-pass text matching: exact match first, then normalized whitespace
- Handle whitespace variations in highlighted text more flexibly
- Add context to debug logs showing surrounding text
This should make highlights appear more reliably even with URL variations
and whitespace differences between the highlight and the actual content.
- Replace simple string replacement with proper DOM tree walking
- Find text nodes and split them to insert mark elements
- Add extensive debugging to track highlight matching
- Handle text that spans across HTML elements correctly
This should fix the issue where highlights weren't showing up in
article content due to HTML tags breaking up the text.
- Flip chevron icon direction (left when collapsed, right when expanded)
- Match bookmarks sidebar styling for collapsed state
- Remove background/border when collapsed for cleaner look
- Ensure toggle button stays at top of panel
- Add proper hover states for collapsed button
The highlights panel now behaves consistently with the bookmarks sidebar,
with the chevron pointing in the correct direction and proper visual feedback.
- Create highlightMatching utility to find and apply highlights to text/HTML
- Update ContentPanel to accept highlights and match them to current URL
- Add visual highlighting with yellow background and blue underline
- Show highlight count indicator when content has highlights
- Add hover effects and tooltips showing highlight date
- Support both HTML and markdown content highlighting
Highlighted text now appears underlined in the main content panel when
viewing URLs that have associated NIP-84 highlights.
- Add HighlightsPanel component with collapsible functionality
- Add HighlightItem component to display individual highlights
- Create highlightService to fetch kind 9802 events
- Add Highlight type definitions for NIP-84
- Update Bookmarks to support three-pane layout (bookmarks, content, highlights)
- Add comprehensive CSS styling for highlights panel
- Update README with highlights feature documentation
The highlights panel mirrors the bookmark sidebar on the right side, showing
all NIP-84 highlights with context, source links, and timestamps. Both panels
are independently collapsible for flexible viewing.
- Extract CompactView, LargeView, and CardView into separate files
- Keep all files under 210 lines (BookmarkItem: 307→105 lines)
- Improve code organization and maintainability
- Add shared type definitions for view components
- Keep DRY with shared props object
- Move OG image fetching useEffect to component top level
- Make hook logic conditional instead of hook call itself
- Prevents 'Rendered more hooks than during previous render' error
- Remove duplicate firstUrlClassification declaration
- Add Open Graph image extraction from article HTML
- Use allorigins.win as free CORS proxy (no auth required)
- Implement HTML parsing to extract og:image meta tags
- Add in-memory caching to avoid repeated fetches
- Async loading with React useEffect for non-YouTube URLs
- 5 second timeout for fetch requests
- Graceful fallback to icon placeholder on errors
- Extract YouTube video thumbnails from URLs
- Display thumbnail images as background in large preview cards
- Add gradient overlay for better text contrast
- Fallback to icon placeholder for non-YouTube URLs
- Handle multiple YouTube URL formats (watch, youtu.be, shorts)
- Gracefully handle missing images with icon fallback
- Add large preview layout with image placeholder area
- Display truncated content (3 lines max) below preview
- Footer with author, timestamp, and action button
- Clickable preview area opens URL in reader
- Clean, minimalistic design with larger spacing
- All views now fully functional: compact, cards, and large
- Timestamp in card view now links to event in search portal
- Add hover effect showing link is clickable
- Remove unused getKindIcon import
- All linter and type checks pass
- Add gradient backgrounds to cards and buttons
- Improve visual hierarchy with borders and dividers
- Enhance hover effects with better shadows and transitions
- Increase padding and spacing for better readability
- Add subtle gradients to bookmark type badges
- Improve kind icon styling with hover effects
- Better typography with increased line height and font sizes
- Add onClick handler to compact-row div
- Show pointer cursor on rows with URLs
- Add stopPropagation to action button to prevent double-trigger
- Include accessibility attributes (role, tabIndex)
- Move all elements to a single horizontal line
- Reduce text preview from 100 to 60 characters
- Decrease padding and font sizes
- Fix row height to 28px for consistent spacing
- Improve text truncation with ellipsis
- Add ViewMode type with options: compact, cards, large
- Add view mode toggle buttons in SidebarHeader
- Implement compact list view rendering in BookmarkItem
- Add CSS styles for compact view with condensed layout
- Cards view remains the default and current style
- Remove position: sticky from sidebar
- Set fixed height on two-pane container (calc(100vh - 4rem))
- Add overflow-y: auto to both sidebar and main panes
- Each pane now scrolls independently without affecting the other
- Fix issue where bookmark bar was 'stuck' with long articles
- Change URL links to buttons that open in reader
- Style URL buttons to look like links (cursor, hover, no button appearance)
- Rename 'content-panel' to 'reader' throughout codebase
- Update all CSS classes: content-panel → reader, content-title → reader-title, etc.
- Change empty state text from 'preview' to 'read' to match reader terminology
- Keep things simple and focused on in-app reading experience
- Keep single formatDate implementation in bookmarkUtils.tsx
- Both BookmarkList and BookmarkItem already import from bookmarkUtils
- Maintain DRY principle by eliminating duplication
- Replace relative-time package (which uses Temporal API) with date-fns
- Update formatDate to use formatDistanceToNow from date-fns
- Remove relative-time type declarations
- Apply fix to both helpers.ts and bookmarkUtils.tsx
- Fix runtime error: relative-time expects Temporal objects, not Date objects
- date-fns provides better compatibility with current JavaScript standards
- Change from calling relativeTime as function to instantiating RelativeTime class
- Use relativeTime.from(date) method instead of relativeTime(date)
- Update TypeScript type definitions to reflect class-based API
- Fix runtime error: 'Cannot call a class as a function'
- Apply fix to both bookmarkUtils.tsx and helpers.ts
- Update features list to reflect current functionality
- Add comprehensive project structure documentation
- Add TODO section with prioritized next steps
- Include high priority, medium priority, and nice-to-have items
- Add contributing guidelines
- Keep technical details about private bookmarks implementation
- When sidebar is expanded: show chevron RIGHT (to collapse/hide)
- When sidebar is collapsed: show chevron LEFT (to expand/show)
- Update SidebarHeader to use faChevronRight
- Update BookmarkList collapsed state to use faChevronLeft
