Commit Graph

51 Commits

Author SHA1 Message Date
Gigi
a941449ba4 style: change highlights to fluorescent marker style
- 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.
2025-10-04 22:22:11 +01:00
Gigi
05636046a8 feat: add click-to-scroll for highlights
- 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.
2025-10-04 22:21:43 +01:00
Gigi
842bfa5491 feat: add toggle button to show/hide highlight underlines
- 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.
2025-10-04 21:54:18 +01:00
Gigi
2dea3c2a5c style: change highlights to yellow underline
- 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
2025-10-04 20:45:54 +01:00
Gigi
c0de624fe6 refactor: use applesauce helpers for highlight parsing
- 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.
2025-10-04 20:41:26 +01:00
Gigi
4aa496ec3f fix: improve highlights panel collapse behavior
- 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.
2025-10-04 19:59:03 +01:00
Gigi
296600bb0d feat: add inline highlight annotations in content panel
- 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.
2025-10-04 19:58:10 +01:00
Gigi
7390104414 feat: add NIP-84 highlights panel with three-pane layout
- 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.
2025-10-04 19:47:45 +01:00
Gigi
57c5be9907 feat: add image preview for large view cards
- 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
2025-10-03 10:16:22 +02:00
Gigi
bd3193957c feat: implement large preview view mode
- 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
2025-10-03 10:10:17 +02:00
Gigi
64efb103a4 feat: make card view timestamp clickable to open event
- 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
2025-10-03 10:08:56 +02:00
Gigi
4afd9ed6d1 feat: enhance card view design with modern styling
- 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
2025-10-03 09:54:34 +02:00
Gigi
bdfb7ca9a6 feat: make entire compact list row clickable to open reader
- 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)
2025-10-03 09:51:34 +02:00
Gigi
288b96d614 refactor: make compact list view even more compact
- 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
2025-10-03 09:49:07 +02:00
Gigi
99c6a4c23b feat: add view mode switching for bookmarks with compact list view
- 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
2025-10-03 09:44:39 +02:00
Gigi
9046150d1f fix(ui): make sidebar and reader scroll independently
- 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
2025-10-03 09:31:04 +02:00
Gigi
53b54c77e7 feat(reader): open bookmark URLs in reader instead of new window
- 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
2025-10-03 09:30:28 +02:00
Gigi
c21c29d5ee fix(ui): ensure all icon buttons remain perfectly square
- Add padding: 0 and box-sizing: border-box to .icon-button
- Add box-sizing: border-box to .profile-avatar
- Update .sidebar-header-bar .toggle-sidebar-btn to use fixed width/height instead of min values
- Add explicit styling for .bookmarks-container.collapsed .toggle-sidebar-btn
- Ensure borders don't add to total dimensions (33px x 33px including borders)
2025-10-03 02:05:19 +02:00
Gigi
8fe01d5337 feat(ui): replace user text with profile image in sidebar header
- 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
2025-10-03 02:02:15 +02:00
Gigi
55c4fe9d4e refactor(ui): move user info and logout to sidebar header bar
- 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
2025-10-03 02:00:54 +02:00
Gigi
8014ee4ddd refactor(ui): reduce IconButton size by 25%
- 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
2025-10-03 01:58:42 +02:00
Gigi
c419679099 refactor(ui): remove horizontal line below collapse button
- Remove border-bottom from bookmarks-header
- Remove padding-bottom for cleaner appearance
2025-10-03 01:56:44 +02:00
Gigi
e644f07828 refactor(ui): move user info to top-right app header
- 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
2025-10-03 01:56:16 +02:00
Gigi
85695b5934 feat(ui): improve bookmark list heading with event links
- 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
2025-10-03 01:52:07 +02:00
Gigi
ef3ce445f5 refactor(ui): move logout button to top-right of app
- 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
2025-10-03 01:51:03 +02:00
Gigi
53a6c86d8a feat(ui): add collapse/expand functionality for bookmarks sidebar
- 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
2025-10-03 01:45:42 +02:00
Gigi
974cecb85f style(ui): use full-width slim chevron toggle; keep IconButton square for actions 2025-10-03 01:02:52 +02:00
Gigi
9b245b3d29 style(ui): make kind icon square to match IconButton sizing 2025-10-03 01:01:37 +02:00
Gigi
18af2d02ea style(ui): remove colored borders and gradients; keep neutral cards 2025-10-03 00:56:58 +02:00
Gigi
728c269a29 feat(ui): make IconButton square and mobile-tappable (44px min) 2025-10-03 00:50:12 +02:00
Gigi
f9d381e451 feat(ui): add reusable IconButton component with square styling 2025-10-03 00:47:37 +02:00
Gigi
386a821c6b feat(ui): make kind icon open event on search.dergigi.com\n\n- Wrap kind icon with link to nevent-encoded event\n- Adds fallback when id is not hex 2025-10-03 00:44:40 +02:00
Gigi
d10e12b8df feat(ui): link author to search.dergigi.com with npub\n\n- Clickable 'by: <author>' opens profile search in new tab\n- Styles for author link 2025-10-03 00:43:19 +02:00
Gigi
a2620caa29 feat(ui): add 'Read now' button next to each URL in bookmarks\n\n- Display inline book-open icon button per URL\n- Clicking loads readability content in the right panel\n- Added styles for url rows and inline button 2025-10-03 00:32:16 +02:00
Gigi
609e15a738 feat(ui): truncate long bookmark text with expand/collapse chevron\n\n- Show first 210 chars by default\n- Toggle expansion with FontAwesome chevrons\n- Add minimal styles for the toggle 2025-10-03 00:27:31 +02:00
Gigi
096509baf6 feat(ui): replace kind numbers with FontAwesome icons
- Import all kind-specific icons from FontAwesome
- Add getKindIcon mapping function based on kind-icons.txt
- Replace 'Kind: X' text with visual icon in bookmark-meta
- Add styling for kind-icon with blue accent color
- Fallback to file icon for unmapped kinds
2025-10-02 23:59:11 +02:00
Gigi
4c2626f3c4 feat(ui): add spinner to content loading state
- Replace text with FontAwesome spinner icon
- Add loading-spinner styles for proper alignment
- Improve visual feedback during content fetch
2025-10-02 23:54:19 +02:00
Gigi
70fa3bb6a8 fix(ui): left-align content and constrain images in content panel
- Force left alignment for HTML/Markdown content
- Constrain images to container width and 70vh height
- Improve readability of rendered articles
2025-10-02 23:52:12 +02:00
Gigi
719ddf3f0b feat(readability): render Markdown when proxy provides it
- 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
2025-10-02 23:46:33 +02:00
Gigi
4163ffa4ba feat(ui): add READ NOW button to bookmark cards
- Shows when a bookmark has URLs
- Triggers onSelectUrl to load readability content in main panel
- Added styles for prominent call-to-action
2025-10-02 23:41:03 +02:00
Gigi
eb57330915 feat(ui): add two-pane layout and styles for content panel
- Grid layout with sidebar and main pane
- Styled content panel and readable HTML area
- Sticky sidebar behavior
2025-10-02 23:34:47 +02:00
Gigi
b671e0e259 feat: update bookmark icons to use fa-bookmark and fa-user-lock
- Replace faGlobe with faBookmark for public bookmarks
- Add faUserLock icon alongside faBookmark for private bookmarks
- Import faBookmark and faUserLock from FontAwesome
- Update CSS to handle icon spacing with flexbox and gap
- Private bookmarks now show both bookmark and user-lock icons
2025-10-02 23:23:57 +02:00
Gigi
e5d6fe99f3 fix: improve word-wrap for long strings and prevent overflow
- Add word-wrap, overflow-wrap, and word-break properties to content areas
- Apply to .parsed-content, .bookmark-content, .individual-bookmark
- Update .nostr-mention and .nostr-link for better long string handling
- Add overflow: hidden to .individual-bookmark container
- Ensures long nprofile strings and URLs break properly within containers
2025-10-02 23:20:09 +02:00
Gigi
465278742e refactor: simplify bookmark service and reduce code duplication
- Extracted fetchEvent helper function to eliminate duplication
- Simplified main fetchBookmarks function with cleaner logic
- Used Promise.all for parallel event fetching instead of sequential loops
- Consolidated private bookmark CSS styles and removed duplicates
- Reduced file from 140 to 102 lines while maintaining functionality
- Removed unused imports and simplified error handling
2025-10-02 09:37:41 +02:00
Gigi
79f83b214f feat: add private bookmarks support with NIP-51 and visual indicators
- Updated bookmark types to support private bookmarks with isPrivate and encryptedContent fields
- Enhanced bookmark service to detect encrypted content and mark bookmarks as private
- Added visual indicators for private bookmarks with lock icon and special styling
- Added CSS styles for private bookmarks with red accent border and gradient background
- Updated BookmarkItem component to show private bookmark indicators
- Maintained compatibility with existing public bookmark functionality
2025-10-02 09:36:46 +02:00
Gigi
e0acd2f7e7 feat: change bookmarks display from grid to social feed list layout
- Update .bookmarks-list to use flex column layout with max-width
- Change .bookmarks-grid to flex column for individual bookmarks
- Add social media-like styling with shadows and hover effects
- Improve visual hierarchy and spacing for feed-like appearance
2025-10-02 09:21:42 +02:00
Gigi
bf79bbceb8 feat: implement individual bookmark fetching and display
- Add IndividualBookmark interface for individual bookmark events
- Implement fetchIndividualBookmarks function to fetch events by e and a tags
- Update parseBookmarkEvent to be async and fetch individual bookmarks
- Add renderIndividualBookmark component for displaying individual bookmarks
- Update UI to show individual bookmarks in a grid layout
- Add CSS styles for individual bookmarks with dark/light mode support
- Support both event references (e tags) and article references (a tags)
- Use applesauce content parsing for proper content rendering
2025-10-02 09:05:32 +02:00
Gigi
c1e0e82704 feat: integrate applesauce-content for proper content parsing and rendering
- Install applesauce-content package for content parsing
- Use getParsedContent() to parse nostr content according to applesauce patterns
- Create proper TypeScript interfaces for ParsedNode and ParsedContent
- Add renderParsedContent() component to render parsed content with proper styling
- Handle mentions, links, and text content with appropriate styling
- Add CSS styles for nostr-mention and nostr-link classes
- Follow applesauce-content documentation patterns for content rendering
- Maintain type safety with proper interfaces instead of 'any' types

This follows the applesauce-content documentation exactly as shown
in the examples, providing proper content parsing and rendering.
2025-10-02 08:33:00 +02:00
Gigi
b6721f685b fix: properly parse NIP-51 bookmark lists (kind 10003) according to specification
- Parse bookmark lists correctly according to NIP-51 specification
- Handle 'e' tags for event references (the actual bookmarks)
- Handle 'a' tags for article references
- Handle 'r' tags for URL references
- Display bookmark count and organize references by type
- Show event IDs in a readable format with truncation
- Add proper CSS styling for bookmark list display
- Update Bookmark interface to include metadata fields

This fixes the issue where kind:10003 bookmark lists weren't being
displayed properly. Now follows the NIP-51 specification exactly
as shown in the example event structure.
2025-10-02 08:31:19 +02:00
Gigi
fe35f45a42 feat: display user public key after successful login
- Add userPublicKey state to App component
- Pass public key from Login to App to Bookmarks
- Display formatted public key in bookmarks header
- Show 'Logged in as: abc12345...xyz67890' format
- Update header layout to accommodate user info
- Add styling for user info display
- Improve login success feedback for users
2025-10-02 07:19:35 +02:00