- Remove unused imports (useRef, faExclamationCircle, getProfileUrl, Observable, UserSettings)
- Remove unused error state and setError calls in Explore and Me components
- Remove unused 'events' variable from exploreService and nostrverseService
- Remove unused '_relays' parameter from saveSettings
- Remove unused '_settings' parameter from publishEvent
- Update all callers of publishEvent and saveSettings to match new signatures
- Add eslint-disable comment for intentional dependency omission in Explore
- Update BookmarkList to use new pull-to-refresh library and RefreshIndicator
- All type checks and linting now pass
- Replace old usePullToRefresh hook with use-pull-to-refresh library
- Update to use RefreshIndicator component
- Remove ref-based implementation in favor of simpler library API
- Add showCitation prop to HighlightItem (defaults to true)
- Set showCitation={false} in HighlightsPanel
- Reduces redundancy since all sidebar highlights are from same article
- Citation still shown in Explore and Me pages where context is needed
- Update HighlightsPanelCollapsed to accept settings prop
- Apply highlightColorMine to the expand button icon and text
- Pass settings through HighlightsPanel and ThreePaneLayout
- Create deletionService for NIP-09 kind:5 event deletion requests
- Add ConfirmDialog component for user confirmation before deletion
- Add subtle delete button to highlight items (trash icon)
- Only show delete button for user's own highlights
- Position delete button symmetrically opposite to relay indicator
- Add confirmation dialog to prevent accidental deletions
- Remove highlights from UI immediately after deletion request
- Style delete button with red hover color
- Add comprehensive confirmation dialog styling (danger/warning/info variants)
Implements NIP-09 Event Deletion Request.
Users can now delete their own highlights after confirming the action.
Make relay indicator icons clickable to trigger manual rebroadcast to all connected relays:
- Click plane icon (local/offline) to rebroadcast to remote relays
- Click server icon to rebroadcast to all relays
- Show spinner while rebroadcasting
- Update icon from plane to server on successful rebroadcast
- Keep plane icon on failure
- Pass relayPool and eventStore through component chain
- Add local state management for highlight updates in HighlightsPanel
- Enhance CSS with scale animation on hover/active
- Show friends and user highlight buttons regardless of login status
- Disable buttons when user is not logged in (instead of hiding them)
- Add helpful tooltips indicating login is required
- Add disabled state styling with reduced opacity and not-allowed cursor
- Remove 'Highlights' text and count number to save space in panel
- Fix markdown rendering fallback to always show content when finalHtml is not ready
- Simplify render logic by removing highlight count condition that prevented content display
- Add three highlight levels: nostrverse (all), friends (followed), and mine (user's own)
- Create contactService to fetch user's follow list from kind 3 events
- Add three configurable colors in settings (purple, orange, yellow defaults)
- Replace mode switcher with independent toggle buttons for each level
- Update highlight rendering to apply level-specific colors using CSS custom properties
- Add CSS styles for three-level highlights in both marker and underline modes
- Classify highlights dynamically based on user's context and follow list
- All three levels can be shown/hidden independently via toggle buttons
Fixes:
- Fixed highlight filtering for Nostr articles in urlHelpers.ts
Now returns all highlights for nostr: URLs since they're pre-filtered
- This fixes highlights not appearing in article content
Features:
- Added highlight mode toggle: 'my highlights' vs 'other highlights'
- Icons: faUser (mine) and faUserGroup (others)
- Mode toggle only shows when user is logged in
- Filters highlights by user pubkey based on selected mode
- Default mode is 'others' to show community highlights
- Added CSS styling for mode toggle buttons
Result: Highlights now show both in the panel AND underlined in
the article text. Users can switch between viewing their own
highlights vs highlights from others.
The HighlightsPanel was filtering out ALL highlights that didn't have
a urlReference. But Nostr article highlights reference the article via
the 'a' tag (article coordinate), not a URL.
Since we already fetch highlights specifically for the current article
using fetchHighlightsForArticle(), we don't need to filter them again.
Solution:
- Skip URL filtering when selectedUrl starts with 'nostr:'
- Keep URL filtering for web articles (backwards compatible)
- Highlights are already pre-filtered by the fetch query
This fixes the issue where 101 highlights existed for the default
article but weren't being displayed in the UI.
- 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
- 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 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.
- 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.
- 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.
- 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.
- 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.
- 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.
