- Create handleHighlightClick handler that sets highlight ID and opens panel
- Automatically expand highlights sidebar if collapsed when highlight clicked
- Improves UX by ensuring highlights panel is visible when interacting with highlights
- Applied to both ContentPanel and HighlightsPanel click handlers
- Preview highlight dynamically shows/hides based on showUnderlines setting
- Users can see highlight appearance changes instantly
- Conditional className applied to preview highlight
- Add highlighted text in preview using content-highlight class
- Shows how highlights appear with different fonts
- Helps users see complete reading experience before saving
- Add preview section showing Lorem Ipsum passage
- Preview updates instantly when font is changed
- Load font dynamically for preview
- Style preview to match reader appearance
- Helps users see font changes before saving
- Add readingFont setting to UserSettings interface
- Create fontLoader utility to load fonts from Bunny Fonts
- Add font selector dropdown in settings with popular reading fonts
- Use CSS variable --reading-font to apply font to reader content
- Support fonts: Inter, Lora, Merriweather, Open Sans, Roboto, Source Serif 4, Crimson Text, Libre Baskerville, PT Serif
- Fonts loaded from https://fonts.bunny.net/ (GDPR-friendly)
- Put label and icon buttons on same line
- Remove background container from view mode buttons
- Add setting-inline and setting-buttons classes
- Clean, minimal inline layout without background styling
- Remove background, border, and bar styling from settings header
- Keep simple header with title and close button on same line
- Match padding with content panel for proper alignment
- Clean, minimal header without visual container
- Change settings-header to settings-header-bar class
- Match styling of sidebar-header-bar (background, border, padding)
- Reduce title font size to match sidebar style
- Adjust padding and spacing for consistent visual alignment
- Settings header now appears on same visual line as sidebar buttons
- Add text-align: left to settings view, header, and content
- Add justify-content: flex-start to checkbox labels
- Add flex-shrink: 0 to checkboxes to prevent squishing
- Ensure consistent left alignment throughout settings panel
- Automatically collapse bookmarks sidebar when settings opened
- Automatically collapse highlights panel when settings opened
- Provides full-width settings view for better UX
- Move Settings component from overlay to main pane
- Update Settings styling for inline display
- Conditionally render Settings or ContentPanel in main pane
- Remove overlay-specific styles and simplify layout
- Add collapseOnArticleOpen setting (default: true)
- Position as first setting in settings panel
- Auto-collapse bookmark bar when user opens an article
- User can disable this behavior in settings
- Create settings service using Kind 30078 for user preferences
- Add Settings component with UI for configuring app preferences
- Wire settings icon to open settings modal
- Store settings like default view mode, sidebar collapse states, etc.
- Use d tag: com.dergigi.boris.user-settings
- Cache articles in localStorage with 7-day TTL
- Check cache before fetching from jina.ai
- Add optional bypassCache parameter
- Automatically expire and cleanup old cached content
- Add 500ms delay before starting pulse animation
- Prevents pulse from starting while element is still scrolling
- Creates better visual flow: scroll → pause → pulse
- Makes the highlight easier to track with your eyes
The pulse now starts after the smooth scroll completes,
making it much clearer which highlight you jumped to.
- Replace brightness change with subtle pulse animation
- Pulse twice over 1.5 seconds with scale and glow effects
- Scale slightly (1.02x) and increase shadow glow
- More elegant visual feedback than color change
- Easier to spot without being jarring
The highlight now pulses twice when clicked from the
sidebar, making it easy to see where you've jumped to.
- 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.
