Commit Graph

684 Commits

Author SHA1 Message Date
Gigi
146aa85e76 feat(bookmarks): make entire bookmark cards clickable; stop propagation on internal controls 2025-10-13 17:27:25 +02:00
Gigi
a26c7497b5 feat(reader): embed external videos in /r/ using react-player; add vimeo/dailymotion detection 2025-10-13 17:25:34 +02:00
Gigi
aebb6d1762 refactor(bookmarks): remove READ/VIEW/WATCH CTA buttons and texts; simplify classifyUrl 2025-10-13 17:21:59 +02:00
Gigi
8f5cf6a0b4 refactor(utils): remove CTA buttonText from classifyUrl and UrlClassification 2025-10-13 17:20:02 +02:00
Gigi
613956bbaf fix: use round checkmark icon (faCheckCircle) in Mark as Read button 2025-10-13 17:10:29 +02:00
Gigi
041ba5c05b style: remove horizontal divider above Mark as Read button 2025-10-13 17:09:26 +02:00
Gigi
05c21cfd6d style: remove horizontal divider below article menu button 2025-10-13 17:07:02 +02:00
Gigi
4898f99ae1 style: make article menu button more subtle by removing border 2025-10-13 17:05:49 +02:00
Gigi
be920e8c44 fix: remove extra horizontal divider above article menu 2025-10-13 17:05:15 +02:00
Gigi
0fa5ac536b feat: add three-dot menu to articles and enhance highlight menus
- Add three-dot menu button at end of articles (before Mark as Read)
- Right-aligned menu with two options:
  - Open on Nostr (using nostr gateway/portal)
  - Open with Native App (using nostr: URI scheme)
- Add 'Open with Native App' option to highlight card menus
- Menu only appears for nostr-native articles (kind:30023)
- Styled consistently with highlight card menus
- Click outside to close menu functionality
2025-10-13 17:03:00 +02:00
Gigi
cef359af29 fix: ensure code blocks use monospace fonts explicitly
- Add explicit monospace font-family to all pre elements
- Include Courier New as additional cross-platform fallback
- Apply to both reader-markdown and reader-html contexts
- Ensures code always renders in monospace even if Prism theme is overridden
2025-10-13 16:58:03 +02:00
Gigi
2de72b73c1 feat: add Prism.js syntax highlighting for code blocks
- Install prismjs and rehype-prism-plus packages
- Integrate rehype-prism plugin into ReactMarkdown
- Use prism-tomorrow dark theme for syntax highlighting
- Enhanced code block styling with better padding and borders
- Inline code now has distinct styling from code blocks
- Monospace font for all code (Monaco, Menlo, Consolas)
- Improved readability with proper line-height and spacing
2025-10-13 16:55:06 +02:00
Gigi
a794331c1a feat: add image placeholders to blog post cards in /explore
- Show newspaper icon placeholder when blog posts don't have images
- Always render image container with consistent height
- Match the same placeholder style as large bookmark preview
- Improves visual consistency across the app
2025-10-13 16:52:32 +02:00
Gigi
e09be543bc feat: add caching to /me page for faster loading
- Create meCache service to store highlights, bookmarks, and read articles
- Seed Me component from cache on load to avoid empty flash
- Show small spinner while refreshing if cached data is displayed
- Update cache when highlights are deleted
- Only show full loading screen if no cached data is available
- Improves perceived performance similar to /explore page
2025-10-13 16:50:43 +02:00
Gigi
88085c48d2 style: improve bookmarks sidebar visual design
- Replace green buttons with purple/blue primary color
- Add subtle borders to card and large preview views
- Enable image previews in card view for all bookmarks (not just articles)
- Fetch OG images for regular bookmarks in card view
- Improve hover states with lighter border colors
2025-10-13 16:47:41 +02:00
Gigi
e32010771b refactor: make /me Reading List use same components as bookmark sidebar
- Reuse BookmarkItem component for rendering individual bookmarks
- Apply same filtering logic (hasContentOrUrl) as BookmarkList
- Add view mode controls (compact/cards/large) matching sidebar
- Count shows individual bookmarks not bookmark lists
- Keeps code DRY by reusing existing components and logic
2025-10-13 16:41:01 +02:00
Gigi
03e7484e71 fix: preserve reading font settings in markdown images
- Remove inline styles from custom image component
- Let CSS inheritance handle font and styling properly
- Images now respect user's reading font and size settings
2025-10-13 16:35:11 +02:00
Gigi
d9fd4ec286 feat: enable inline image rendering in nostr-native blog posts
- Install rehype-raw plugin for HTML support in ReactMarkdown
- Configure ReactMarkdown to parse and render HTML img tags
- Add responsive image styling with max-width and auto height
- Images now render inline in nostr-native blog posts with proper styling
2025-10-13 16:34:08 +02:00
Gigi
326d571871 fix(content): include currentArticle in useEffect deps to satisfy lint 2025-10-13 16:27:18 +02:00
Gigi
744e86b290 style: match /me profile card width to highlight cards
- Constrain AuthorCard width via header context
- Remove extra padding on .me-highlights-list so widths align
- Keeps both at 600px max with auto centering
2025-10-13 16:20:54 +02:00
Gigi
e46b68da7e style: improve Me page mobile tabs and avoid overlap with sidebar buttons
- Add top margin to header on mobile for floating buttons
- Tighten tab paddings and content spacing
- Reduce left/right padding for more room on small screens
2025-10-13 16:15:21 +02:00
Gigi
811a962632 style: reduce margins/paddings to make highlight cards more compact
- Decrease list gap and content padding
- Bring corner buttons closer to edges (header/footer 0.5rem, quote 0.25/0.5rem)
- Keep safe spacing to avoid text/button overlap
2025-10-13 16:13:11 +02:00
Gigi
eb82e8762a style: tighten vertical spacing on highlight cards
- Reduce header/footer vertical padding (0.5rem -> 0.375rem)
- Reduce content top/bottom padding (3rem -> 2.25rem)
- Slightly reduce gaps to compact layout
2025-10-13 16:09:42 +02:00
Gigi
d919da153f feat: make quote icon a CompactButton in top-left corner
- Replace static quote icon with CompactButton
- Position top-left with same corner margin as others
- Preserve level-based coloring via CSS (
  - mine: var(--highlight-color-mine)
  - friends: var(--highlight-color-friends)
  - nostrverse: var(--highlight-color-nostrverse)
)
2025-10-13 16:08:37 +02:00
Gigi
8389d5811a fix: make relay button match menu spacing within footer
- Force footer relay indicator to be in normal flow (position: static)
- Remove margins and rely on footer gap/padding
- Ensures same visual spacing as the three-dot CompactButton
2025-10-13 15:55:18 +02:00
Gigi
0aa0c44441 fix: group relay icon and author in footer-left for consistent alignment
- Add  container (relay + author)
- Footer now uses space-between with left group and right menu
- Consistent gap and truncation behavior for author
- Matches the visual rhythm of the three-dot button
2025-10-13 15:47:22 +02:00
Gigi
49ea7504a1 style: make relay indicator match CompactButton (same look as menu)
- Remove custom opacity for relay indicator
- Rely on  styles for hover/active/spacing
- Ensures relay button visually matches three-dot menu button
2025-10-13 15:37:16 +02:00
Gigi
6602fb9359 fix: align relay indicator within footer with symmetric spacing
- Place relay indicator as first element in footer (no absolute positioning)
- Remove extra author left padding; rely on footer gap/padding
- Ensure consistent 1rem outer padding and 0.75rem gap between footer items
- Matches spacing of timestamp and menu in their corners
2025-10-13 15:35:07 +02:00
Gigi
731eb6915a fix: align corner elements symmetrically with proper margins
- Change quote icon left margin from 0.5rem to 1rem
- Change relay indicator left margin from 0.5rem to 1rem
- All corner elements now have 1rem horizontal margin (matching header/footer padding)
- Adjust author padding-left to 2.5rem to accommodate relay icon
- Creates symmetrical appearance across all four corners
2025-10-13 15:28:55 +02:00
Gigi
3459179310 refactor: move quote icon to top-left corner and make it smaller
- Position quote icon absolutely in top-left corner (0.5rem, 0.5rem)
- Reduce font size from 1.2rem to 0.85rem
- Add opacity: 0.7 to make it more subtle
- Remove quote icon from document flow
- Update content padding to be uniform (3rem 1rem)
- Remove gap from highlight-item since content is only in-flow element
- Clean up mobile styles for quote icon
2025-10-13 15:25:10 +02:00
Gigi
b1f951daf5 fix: position relay indicator in bottom-left corner
- Move relay indicator to be absolutely positioned in bottom-left corner
- Similar to timestamp in top-right corner
- Add padding-left to author name to prevent overlap with relay icon
- Relay indicator sits outside the footer content flow
- z-index: 10 ensures it's above footer background
2025-10-13 15:23:29 +02:00
Gigi
caebcec0af fix: move relay indicator to footer to prevent overlap with author
- Move relay indicator from quote icon to footer as first element
- Remove absolute positioning from relay indicator
- Update footer layout: relay icon, author name, menu button (left to right)
- Author name now sits to the right of relay icon with no overlap
- Use margin-right: auto on author to push menu to the right
2025-10-13 15:20:40 +02:00
Gigi
5f50f4b8d6 fix: improve spacing and alignment of highlight card elements
- Remove padding from highlight-item, let header/footer/content handle it
- Fix header and footer to use left: 0 and right: 0 instead of negative offsets
- Use padding on quote-icon and highlight-content for proper spacing
- Adjust relay indicator positioning to work with new padding model
- Ensure all elements have proper vertical and horizontal spacing
2025-10-13 15:17:08 +02:00
Gigi
3039208ba0 refactor: make header and footer full-width with borders and corners
- Header and footer now span 100% width of the card
- Header has top border and top rounded corners
- Footer has bottom border and bottom rounded corners
- Main item has only left/right borders
- Properly adjust padding to accommodate absolute positioned header/footer
- Border colors transition correctly for hover, selected, and level states
2025-10-13 15:03:53 +02:00
Gigi
397c956e87 refactor: create highlight-header for timestamp positioning
- Add highlight-header container for timestamp
- Position header absolutely in top-right corner
- Remove padding-right workaround from highlight-content
- Use pointer-events to allow timestamp click while preventing header clicks
- Cleaner structure prevents any text overlap naturally
2025-10-13 14:45:21 +02:00
Gigi
cf47ceb74b refactor: create highlight-footer for perfect alignment
- Rename highlight-meta to highlight-footer for semantic clarity
- Use flexbox with space-between for proper element spacing
- Ensure author name and menu button are perfectly vertically aligned
- Add min-height to author to match button height
2025-10-13 14:42:23 +02:00
Gigi
da7aa2c115 fix: add padding to prevent quote text from overlapping timestamp 2025-10-13 14:40:30 +02:00
Gigi
c0046bc04c refactor: remove clock icon from timestamp button 2025-10-13 14:38:31 +02:00
Gigi
2f8f6a0652 feat: introduce CompactButton component for highlight cards
- Create reusable CompactButton component for small, borderless buttons
- Refactor relay indicator to use CompactButton
- Refactor menu toggle button to use CompactButton
- Make timestamp clickable with CompactButton (shows full date on hover)
- Simplify CSS by removing duplicate button styles
- Improve mobile touch targets for all compact buttons
2025-10-13 14:01:51 +02:00
Gigi
9a6f788b98 feat: move highlight timestamp to top-right corner of cards 2025-10-13 12:55:00 +02:00
Gigi
c1a628260c feat(icons): import books.svg as raw and register faBooks; add *.svg?raw types 2025-10-13 12:42:56 +02:00
Gigi
7b0bd7077c feat: use faBooks icon for Mark as Read button 2025-10-13 12:29:23 +02:00
Gigi
7d47f0a86e feat: add custom FontAwesome Pro books icon for Archive tab 2025-10-13 12:28:08 +02:00
Gigi
44fcd74cbe refactor: rename Library tab to Archive 2025-10-13 12:20:18 +02:00
Gigi
5ac0e7ed87 fix: deduplicate article events in library to prevent showing duplicates 2025-10-13 12:15:16 +02:00
Gigi
743968f7fb feat: use user's custom highlight color for Highlights tab 2025-10-13 12:14:25 +02:00
Gigi
e1a3ae4b4d feat: render library articles using BlogPostCard component for consistency 2025-10-13 12:13:12 +02:00
Gigi
acf13448ae style: improve tab border styling for dark theme 2025-10-13 12:10:19 +02:00
Gigi
a5daa8b56c fix: remove incorrect useSettings hook usage in Me component 2025-10-13 12:02:15 +02:00
Gigi
267169c5c1 fix: correct fetchBookmarks usage with callback pattern in Me component 2025-10-13 10:45:46 +02:00