Commit Graph

37 Commits

Author SHA1 Message Date
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
Gigi
5d53a827e0 feat: initialize markr nostr bookmark client
- Add project structure with TypeScript, React, and Vite
- Implement nostr authentication using browser extension (NIP-07)
- Add NIP-51 compliant bookmark fetching and display
- Create minimal UI with login and bookmark components
- Integrate applesauce-core and applesauce-react libraries
- Add responsive styling with dark/light mode support
- Include comprehensive README with setup instructions

This is a minimal MVP for a nostr bookmark client that allows users to
view their bookmarks according to NIP-51 specification.
2025-10-02 07:17:07 +02:00