- Convert mobile hamburger and highlights buttons to Tailwind
- Migrate mobile backdrop to Tailwind utilities
- Remove 60+ lines of CSS from app.css and sidebar.css
- Maintain responsive behavior and z-index layering
- Keep dynamic color support for highlight button
- Install position-indicator library for scroll position tracking
- Create useReadingPosition hook for position management
- Add ReadingProgressIndicator component with animated progress bar
- Integrate reading progress in ContentPanel for text content only
- Add CSS styles for fixed progress indicator with shimmer animation
- Track reading completion at 90% threshold
- Exclude video content from position tracking
- Update ReactPlayer to use width='100%', height='auto' with aspectRatio: '16/9'
- Replace padding-top approach with modern aspect-ratio CSS property
- Add minimum width (300px) and maximum width (800px) constraints
- Center video container with margin: 0 auto
- Ensure video player is no longer constrained by title length
- Improve video viewing experience across different screen sizes
- Replace 'any' type with proper UserSettings type in CompactView
- Fix import path for UserSettings from services/settingsService
- Resolve @typescript-eslint/no-explicit-any warning
- Ensure all TypeScript type checks pass
- Maintain strict linting rules without removing any rules
- Add compact-thumbnail styling for small square images (24x24px)
- Update CompactView component to include thumbnail images on the left
- Use useImageCache hook to get cached article images
- Add settings prop to CompactView interface
- Position thumbnails before bookmark type icon in compact row
- Match design from screenshot with small square thumbnails on left side
- Improve visual hierarchy and content recognition in compact view
- Add routes for /me/highlights, /me/reading-list, /me/archive
- Redirect /me to /me/highlights by default
- Update Bookmarks component to extract tab from URL path
- Pass activeTab prop to Me component based on current route
- Update Me component to use URL-based tab state instead of local state
- Update tab click handlers to navigate to appropriate URLs
- Enable deep-linking to specific tabs (e.g., /me/reading-list)
- Add useNavigate hook to Me component
- Implement handleSelectUrl function for bookmark navigation
- Pass onSelectUrl prop to BookmarkItem components in reading list
- Support both regular URLs (/r/*) and nostr articles (/a/*) navigation
- Enables clicking bookmarks in reading list to open content in main pane
- Wrap tab labels and counts in separate spans for better control
- Hide counts on mobile devices (max-width: 768px) to save space
- Maintain counts on desktop for better UX
- Follows mobile-first design principles
- 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
- 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
- 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
- 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
- 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
- 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
- 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
- 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
- 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
- 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
- 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
- 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
- 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
- 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
- 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
