- Merge settings load and subscription setup into single useEffect
- Ensure settings are loaded immediately upon successful login
- Set up watchSettings subscription at the same time as initial load
- Add eventStore as dependency to ensure proper initialization
- Improves timing and prevents race conditions
- Import and use watchSettings from settingsService
- Subscribe to settings changes in eventStore
- Automatically update app state when settings change from Nostr
- Properly cleanup subscription on component unmount
- Fixes settings resetting on browser refresh
- Remove loading state variable from Bookmarks component
- Remove 'Loading bookmarks...' screen
- Start with empty list and populate bookmarks in background
- Remove timeout and loading callbacks from fetchBookmarks
- Better UX: show UI immediately, bookmarks appear when ready
- Bookmarks.tsx now at 197 lines
- Add fontSize to UserSettings interface
- Add font size dropdown in Settings with options from 12px to 22px
- Apply font size to preview content instantly
- Set --reading-font-size CSS variable in Bookmarks when settings change
- Apply font-size variable to .reader-html and .reader-markdown
- Condense code in Bookmarks.tsx to stay under 210 lines (now at 207)
- Add handleHighlightClick that opens panel if collapsed
- Sets selected highlight ID to scroll to it in the panel
- Add console logging for debugging
- When user clicks highlight in article with panel closed, panel opens automatically
- 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
- 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)
- 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
- 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.
- 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.
- 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.
- 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.
- 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
- 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
- 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
- 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 debug logging to track profile loading
- Show 'Loading profile...' while profile data is being fetched
- Better handling of profile loading states
- Ensures user sees proper name instead of pubkey when available
- Detect markdown blocks from r.jina.ai output
- Add react-markdown + remark-gfm for rendering
- Extend ContentPanel to render markdown or HTML
- Add styles for markdown content
- Added detailed logging to understand why getHiddenBookmarks returns undefined
- Check bookmark list content and encryption format
- Verify account has decryption capabilities
- Pass full account object with extension capabilities to applesauce helpers
- This will help diagnose the NIP-44 vs NIP-04 encryption issue
- Extract types to src/types/bookmarks.ts
- Extract utility functions to src/utils/bookmarkUtils.tsx
- Extract BookmarkItem component to src/components/BookmarkItem.tsx
- Extract BookmarkList component to src/components/BookmarkList.tsx
- Extract bookmark fetching logic to src/services/bookmarkService.ts
- Reduce main Bookmarks component from 416 to 100 lines
- Maintain all functionality while improving code organization
- Pass all linting and type checking
- Move timeoutId declaration outside try block to make it accessible in both try and catch blocks
- Fixes ESLint no-undef error and TypeScript compilation error
- Remove loading check from early return condition
- Add timeout to ensure loading state gets reset
- Clear timeout when function completes
- This should allow fetchBookmarks to run properly
- Add console logs to track if fetchBookmarks is called
- Log early return conditions
- This will help identify why the function might not be executing
- Fetch bookmark list event (kind 10003) first
- Extract event IDs from e tags
- Fetch each individual event by ID
- Remove complex async parsing logic
- Simplify to direct sequential fetching
- Remove unused functions
- Add broader test filter to see if user has any events
- Log event kinds to understand what events exist
- This will help diagnose if the issue is with bookmark events specifically
- Disable individual bookmark fetching to isolate the issue
- Keep basic bookmark list functionality working
- Add TODO to re-enable individual bookmark fetching later
