- 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.
- 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.
- 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.
- 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 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
- 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
- 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
- Replace 'Logged in as: [user]' text with profile avatar
- Use applesauce ProfileModel to fetch user's profile picture
- Display profile image in 33px square (same size as IconButton)
- Show fallback user icon when no profile image available
- Style avatar with same border radius and styling as IconButton
- Add tooltip showing user display name on hover
- Create new SidebarHeader component as bar-shaped container
- Combine collapse button, user info, and logout button in one bar
- Position header bar at top of bookmark sidebar with matching width
- Remove fixed top-right positioning for user header
- Style as cohesive bar with background, border, and spacing
- Update all prop passing from App through Bookmarks to BookmarkList
- Remove old UserHeader component
- Change default size from 44px to 33px (25% reduction)
- Update min-width and min-height in CSS to match
- Apply size reduction to toggle-sidebar-btn as well for consistency
- Remove bookmark title (h3) from bookmark items
- Remove duplicate h4 heading from individual-bookmarks section
- Keep only the single 'X bookmarks in this list:' line with event link
- Create UserHeader component to display user info and logout button
- Move 'Logged in as: user' from sidebar to app-header in top-right
- Remove user info display from BookmarkList and Bookmarks components
- Simplify bookmarks-header layout (only contains collapse button now)
- Update CSS to display user info and logout button inline with proper spacing
- Add URL classification system (article, video, youtube, image)
- Classify based on domain (youtube) and file extensions
- Update button text: 'READ NOW' for articles, 'WATCH NOW' for videos, 'VIEW NOW' for images
- Update icons: faBookOpen for articles, faPlay for videos, faEye for images
- Apply classification to both individual URL buttons and main action button
- Replace 'Bookmarks (count)' with 'count bookmarks in this list:'
- Replace 'Individual Bookmarks (count):' with 'count bookmarks in this list:'
- Make 'this list' a clickable link to search.dergigi.com/e/{eventId}
- Add event-link CSS styling with blue color and hover effect
- Move logout IconButton from sidebar to App component
- Position logout button fixed at top-right corner
- Remove onLogout prop from Bookmarks and BookmarkList components
- Clean up sidebar header by removing logout button
- Add app-header CSS with fixed positioning and high z-index
- Replace text logout buttons with IconButton component
- Use faRightFromBracket icon for a cleaner, more minimal interface
- Apply changes to both loading state and normal state
- Maintain consistent styling with ghost variant
- Add toggle button to collapse/expand the bookmarks sidebar completely
- Sidebar collapses to 60px width showing only expand button
- Main content area expands to fill available space when sidebar collapsed
- Smooth transitions when toggling between states
- Use FontAwesome chevron icons for visual feedback
- Preserve all functionality in both collapsed and expanded states
- Add proper type guards in ContentWithResolvedProfiles to avoid type assertions
- Remove href/link functionality from IconButton component for simplification
- Replace 'as any' with proper type narrowing using type predicates
- Add ResolvedMention component using applesauce ProfileModel
- Update parsed content renderer to use ResolvedMention for mentions
- Mentions now show @name and link to search page
