chore: bump version to 0.6.0

Merge pull request #5 from dergigi/reading-position
feat: reading position tracking and Tailwind CSS v4 migration
2026-02-16 12:34:41 +01:00 · 2025-10-13 22:33:18 +02:00 · 2025-10-13 22:32:52 +02:00 · 2025-10-13 22:26:13 +02:00 · 2025-10-13 22:22:24 +02:00 · 2025-10-13 22:20:01 +02:00
40 changed files with 4853 additions and 3676 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,9 +7,145 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0

 ## [Unreleased]

+### Added
+
+- Tailwind CSS integration with preflight enabled
+- Reading position tracking with visual progress indicator
+- Document-level scrolling with sticky sidebars on desktop
+
+### Changed
+
+- Refactored layout system to use document scroll instead of pane scroll
+- Migrated reading progress indicator to Tailwind utilities
+- Simplified global CSS to work with Tailwind preflight
+- Added CSS variables for user-settable theme colors
+
+### Fixed
+
+- Reading position indicator now always visible at bottom of screen
+- Progress tracking now accurately reflects reading position
+- Scroll behavior consistent across desktop and mobile
+
+## [0.5.7] - 2025-01-14
+
+### Added
+
+- Vimeo video metadata extraction support
+- YouTube video metadata extraction with title, description, and captions
+- Responsive video player with aspect ratio support
+- Thumbnail images in compact view
+- URL routing for /me page tabs
+- Bookmark navigation in reading list
+- Video duration display for video URLs
+- Three-dot menu for videos with open/native/copy/share actions
+- External video embedding in reader using react-player
+- Video detection for Vimeo, Dailymotion, and other platforms
+
+### Changed
+
+- Enhanced borders for reading list cards
+- Reading list tab colored blue to match bookmarks icon
+- Left-aligned text in reading list elements
+- Increased spacing between mobile buttons and profile element
+- Main pane now full width when displaying videos
+- Video container breaks out of reader padding for full width
+- Simplified video container layout
+
+### Fixed
+
+- Video player edge-to-edge display with negative margins
+- Prevent profile element from bleeding off screen on mobile
+- Resolved TypeScript errors in youtube-meta.ts
+- Improved type safety in youtube-meta handler
+- More lenient YouTube description extraction
+- Corrected setTimeout ref type in Settings
+- Proper react-player responsive pattern implementation
+- Removed unused getIconForUrlType in CompactView
+
+### Style
+
+- Hide tab counts on mobile for /me page
+- Remove max-width on main pane, constrain reader instead
+- Full width layout for videos
+- Reader-video specific styles
+
+## [0.5.6] - 2025-10-13
+
+### Added
+
+- Three-dot menu for articles and enhanced highlight menus
+- Prism.js syntax highlighting for code blocks
+- Inline image rendering in nostr-native blog posts
+- Image placeholders on blog post cards in `/explore`
+- Caching on `/me` page for faster loading
+
+### Changed
+
+- Reading List on `/me` now uses the same components as the bookmarks sidebar
+- Improve bookmarks sidebar visual design
+- Make article menu button more subtle by removing border
+
+### Fixed
+
+- Use round checkmark icon (faCheckCircle) for Mark as Read button
+- Remove extra horizontal divider above article menu
+- Ensure code blocks consistently use monospace fonts
+- Preserve reading font settings in markdown images
+
+### Style
+
+- Remove horizontal divider above Mark as Read button
+- Remove horizontal divider below article menu button
+
+## [0.5.5] - 2025-01-27
+
+### Added
+
+- `/me` page with tabbed layout featuring Highlights, Reading List, and Library tabs
+- Two-pane layout for `/me` page with article sources and highlights
+- Custom FontAwesome Pro books icon for Archive tab
+- CompactButton component for highlight cards
+- Instant mark-as-read functionality with checkmark animation and read status checking
+
+### Changed
+
+- Rename Library tab to Archive
+- Move highlight timestamp to top-right corner of cards
+- Replace username with AuthorCard component on `/me` page
+- Use user's custom highlight color for Highlights tab
+- Render library articles using BlogPostCard component for consistency
+- Use faBooks icon for Mark as Read button
+- Make quote icon a CompactButton in top-left corner
+
+### Fixed
+
+- Include currentArticle in useEffect deps to satisfy lint
+- Deduplicate article events in library to prevent showing duplicates
+- Remove incorrect useSettings hook usage in Me component
+- Correct fetchBookmarks usage with callback pattern in Me component
+- Add padding to prevent quote text from overlapping timestamp
+- Improve spacing and alignment of highlight card elements
+- Align corner elements symmetrically with proper margins
+- Group relay icon and author in footer-left for consistent alignment
+- Position relay indicator in bottom-left corner to prevent overlap with author
+
+### Style
+
+- Match `/me` profile card width to highlight cards
+- Improve Me page mobile tabs and avoid overlap with sidebar buttons
+- Reduce margins/paddings to make highlight cards more compact
+- Tighten vertical spacing on highlight cards
+- Left-align text inside author card
+- Constrain `/me` page content width to match author card (600px)
+- Improve tab border styling for dark theme
+- Make relay indicator match CompactButton (same look as menu)
+- Align relay indicator within footer with symmetric spacing
+- Make header and footer full-width with borders and corners
+
 ## [0.5.4] - 2025-10-13

 ### Changed
+
 - Refactor CSS into modular structure
  - Split 3600+ line monolithic `index.css` into organized modules
  - Created `src/styles/` directory with base, layout, components, and utils subdirectories
@@ -18,11 +154,13 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
  - No functional changes to styling

 ### Fixed
+
 - Mobile button positioning now uses safe area insets for symmetrical layout on notched devices

 ## [0.5.3] - 2025-10-13

 ### Changed
+
 - Relay status indicator is now more compact
  - Smaller padding and font sizes on desktop
  - Auto-collapsed on mobile (icon-only by default, tap to expand)
@@ -30,6 +168,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
  - Hides when scrolling down, shows when scrolling up (consistent with other mobile controls)

 ### Fixed
+
 - Invalid bookmarks without IDs no longer appear in bookmark list
  - Previously showed as "Now" timestamp with no content
  - Bookmarks without valid IDs are now filtered out entirely
@@ -39,12 +178,14 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ## [0.5.2] - 2025-10-12

 ### Added
+
 - Three-dot menu to highlight cards for more compact UI
  - Combines "Open on Nostr" and "Delete" actions into dropdown menu
  - Uses horizontal ellipsis icon (⋯)
  - Click-outside functionality to close menu

 ### Changed
+
 - Switch Nostr gateway from njump.me/search.dergigi.com to ants.sh
  - Centralized gateway URLs in config file
  - All profile and event links now use ants.sh
@@ -53,34 +194,40 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - "Open on Nostr" now links to the highlight event itself instead of the article

 ### Fixed
+
 - Gateway URL routing for ants.sh requirements (/p/ for profiles, /e/ for events)
 - Linting errors in HighlightItem component

 ## [0.5.1] - 2025-10-12

 ### Added
+
 - Highlight color customization to UI elements
  - Apply user's "my highlights" color to highlight creation buttons
  - Apply highlight group colors to highlight count indicators
  - Apply "my highlights" color to collapsed highlights panel button

 ### Fixed
+
 - Highlight count indicator styling to match reading-time element
 - Brightness and border styling for highlight count indicator
 - User highlight color now applies to both marker and arrow icons
 - Highlight group color properly applied to count indicator background

 ### Removed
+
 - MOBILE_IMPLEMENTATION.md documentation file

 ## [0.5.0] - 2025-10-12

 ### Added
+
 - Upgrade to full PWA with `vite-plugin-pwa`
 - Replace placeholder icons with branded favicons
 - Author info card for nostr-native articles

 ### Changed
+
 - Explore: shrink refresh spinner footprint; inline-sized loading row
 - Explore: preserve posts across navigations; seed from cache; merge streamed and final results
 - Explore: keep posts visible during refresh; inline spinner; no list wipe
@@ -90,12 +237,14 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Lint/TypeScript: satisfy react-hooks dependencies; fix worker typings; clear ESLint/TS issues

 ### Fixed
+
 - Highlights: merge remote results after local for article/url
 - Explore: always query remote relays after local; stream merge into UI
 - Improve mobile touch targets for highlight icons
 - Color `/me` highlights with "my highlights" color setting

 ### Performance
+
 - Local-first then remote follow-up across services (titles, bookmarks, highlights)
 - Run local and remote fetches concurrently; stream and dedupe results
 - Stream contacts and early posts from local; merge remote later
@@ -103,6 +252,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Stream results to UI; display cached/local immediately (articles, highlights, explore)

 ### Documentation
+
 - PWA implementation summary and launch checklist updates
 - Update docs to reflect branded icons and final steps
 - Remove temporary PWA launch checklist and implementation summary
@@ -110,6 +260,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ## [0.4.3] - 2025-10-11

 ### Added
+
 - Mark as read functionality for articles (NIP-25)
  - Button at the end of each article to mark as read with 📚 emoji
  - Creates kind:7 reactions for nostr-native articles (`/a/` paths)
@@ -134,6 +285,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
  - Prevents accidental destructive actions

 ### Changed
+
 - Relay status indicator on mobile now displays in compact mode
  - Shows only airplane icon by default (44x44px touch target)
  - Tap to expand for full connection details
@@ -144,6 +296,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ## [0.4.2] - 2025-10-11

 ### Added
+
 - NIP-19 identifier resolution in article content (NIP-19, NIP-27)
  - Support for `nostr:npub1...`, `nostr:note1...`, `nostr:nprofile1...`, `nostr:nevent1...`, `nostr:naddr1...`
  - Converts nostr: URIs to clickable links with human-readable labels
@@ -158,6 +311,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
  - Configurable threshold and enable/disable options

 ### Changed
+
 - Article references (`naddr`) now link internally to `/a/{naddr}` instead of external njump.me
 - Sidebar auto-closes on mobile when navigating to content via routes
  - Handles clicking on blog posts in Explore view
@@ -166,6 +320,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Article title resolution fetches titles in parallel for better performance

 ### Fixed
+
 - Mobile button scroll detection now correctly monitors main pane element
  - Previously monitored window scroll which didn't work on mobile
  - Content scrolls within `.pane.main` div on mobile devices
@@ -178,11 +333,13 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ## [0.4.1] - 2025-10-10

 ### Fixed
+
 - Long article summaries overlapping with hero image content on mobile devices
 - Article summary now moves below hero image on mobile when longer than 150 characters
 - Article summary line clamp reduced from 3 to 2 lines on mobile for better space utilization

 ### Changed
+
 - Hero image rendering on mobile now uses zoom-to-fit approach with viewport-based sizing
 - Hero image height on mobile set to 50vh (constrained between 280px-400px)
 - Improved image cropping with center positioning for better visual presentation
@@ -191,6 +348,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ## [0.4.0] - 2025-10-10

 ### Added
+
 - Mobile-responsive design with overlay sidebar drawer
 - Media query hooks for responsive behavior (`useIsMobile`, `useIsTablet`, `useIsCoarsePointer`)
 - Auto-collapse sidebar setting for mobile devices
@@ -205,6 +363,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Mobile highlights panel as overlay with toggle button

 ### Changed
+
 - Sidebar now displays as overlay drawer on mobile (≤768px)
 - Highlights panel hidden on mobile for better content focus
 - Sidebar auto-closes when selecting content on mobile
@@ -212,6 +371,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Replace hamburger icon with bookmark icon on mobile

 ### Fixed
+
 - Ensure bookmarks container fills mobile sidepane properly
 - Restore desktop grid layout for highlights panel
 - Improve empty state and loading visibility in mobile sidepanes
@@ -223,22 +383,26 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ## [0.3.8] - 2025-10-10

 ### Fixed
+
 - Add vercel.json configuration to properly handle SPA routing on Vercel deployments (fixes 404 errors on page refresh)

 ## [0.3.7] - 2025-10-10

 ### Fixed
+
 - Logout button functionality - now properly clears active account using clearActive() method

 ## [0.3.6] - 2025-10-10

 ### Added
+
 - Compact date format for highlights (now, 5m, 3h, 2d, 1mo, 1y)
 - Ultra-compact date format for bookmarks sidebar
 - Encode event links as nevent/naddr per NIP-19 for better client compatibility
 - Render /explore within ThreePaneLayout to keep side panels visible

 ### Fixed
+
 - Remove incorrect padding-right from highlights container
 - Reduce font size of highlight metadata for cleaner look
 - Position highlight FAB button relative to article pane instead of viewport
@@ -250,6 +414,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Change explore header icon from compass to newspaper

 ### Changed
+
 - Make connecting notification more subtle with muted blue background
 - Update Boris pubkey for zap splits to npub19802see0gnk3vjlus0dnmfdagusqrtmsxpl5yfmkwn9uvnfnqylqduhr0x
 - Update domain references to read.withboris.com (URLs, SEO metadata, and documentation)
@@ -257,20 +422,24 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ## [0.3.5] - 2025-10-09

 ### Fixed
+
 - Ensure connecting state shows for minimum 15 seconds to prevent premature offline display
 - Add Cloudflare Pages routing config for SPA paths

 ### Changed
+
 - Extend connecting state duration and remove subtitle text for cleaner UI

 ## [0.3.4] - 2025-10-09

 ### Fixed
+
 - Add p tag (author tag) to highlights of nostr-native content for proper attribution

 ## [0.3.3] - 2025-10-09

 ### Added
+
 - Service Worker for robust offline image caching
 - /explore route to discover blog posts from friends on Nostr
 - Explore button (newspaper icon) in bookmarks header
@@ -278,12 +447,14 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Last fetch time display with relative timestamps in bookmarks list

 ### Changed
+
 - Simplify image caching to use Service Worker transparently
 - Move refresh button from top bar to end of bookmarks list
 - Make explore page article cards proper links (supports CMD+click to open in new tab)
 - Reorganize bookmarks UI for better UX

 ### Fixed
+
 - Improve image cache resilience for offline viewing and hard reloads
 - Correct TypeScript types for cache stats state
 - Resolve linter errors for unused parameters
@@ -294,6 +465,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ## [0.3.0] - 2025-10-09

 ### Added
+
 - Flight Mode with offline highlight creation and local relay support
 - Automatic offline sync - rebroadcast local events when back online
 - Relay indicator icon on highlight items showing sync status
@@ -306,6 +478,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - 6th font size option for better UI scaling

 ### Fixed
+
 - Highlight creation resilient to offline/flight mode
 - TypeScript type errors in offline sync
 - Relay indicator tooltip accuracy and reliability
@@ -320,6 +493,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Include local relays in relay indicator tooltip

 ### Changed
+
 - Rename 'Offline Mode' to 'Flight Mode' throughout UI
 - Move publication date to top-right corner with subtle border styling
 - Consolidate relay/status indicators into single unified icon
@@ -333,6 +507,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Simplify rebroadcast settings UI with consistent checkbox style

 ### Performance
+
 - Make highlight creation instant with non-blocking relay publish
 - Reduce relay status polling interval to 20 seconds
 - Show sync progress and hide indicator after successful sync
@@ -340,6 +515,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ## [0.2.10] - 2025-10-09

 ### Added
+
 - URL-based settings navigation with /settings route
 - Active zap split preset highlighting
 - Educational links about relays in reader view
@@ -348,10 +524,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Relays section showing active and recently connected relays

 ### Fixed
+
 - Remove trailing slash from relay URLs
 - Constrain Reading Font dropdown width

 ### Changed
+
 - Rename 'Default View Mode' to 'Default Bookmark View' in settings
 - Reorganize settings layout for better UX
 - Use sidebar-style colored buttons for highlight visibility
@@ -360,26 +538,31 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ## [0.2.9] - 2025-10-09

 ### Fixed
+
 - Deduplicate highlights in streaming callbacks

 ## [0.2.8] - 2025-10-09

 ### Added
+
 - Display article summary in header
 - Overlay title and metadata on hero images
 - Apply reading font to article titles

 ### Fixed
+
 - Pass article summary through to ReadableContent
 - Correct Jina AI Reader proxy URL format

 ### Changed
+
 - Update homepage URL to read.withboris.com
 - Reorder toolbar buttons for better UX

 ## [0.2.7] - 2025-10-08

 ### Added
+
 - Web bookmark creation (NIP-B0, kind:39701)
 - Tags support for web bookmarks per NIP-B0
 - Auto-fetch title and description when URL is pasted
@@ -390,6 +573,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Respect existing zap tags in source content when creating highlights

 ### Fixed
+
 - Revert to fetchReadableContent to avoid CORS issues
 - Improve modal spacing with proper box-sizing
 - Prevent sliders from jumping when resetting settings
@@ -397,6 +581,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Correct type signature for addZapTags function

 ### Changed
+
 - Reorder toolbar buttons for better UX
 - DRY up tag extraction with normalizeTags helper
 - Use url-metadata package for robust metadata extraction
@@ -407,16 +592,19 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ## [0.2.6] - 2025-10-08

 ### Added
+
 - Home button to bookmark bar
 - Configurable zap split for highlights on nostr-native content

 ## [0.2.5] - 2025-10-07

 ### Fixed
+
 - Wire preview ref to markdown conversion hook
 - Add missing useEffect dependencies for article loading

 ### Changed
+
 - DRY up highlight classification and URL normalization
 - Split highlighting utilities into modules
 - Extract highlights panel components
@@ -428,14 +616,17 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ## [0.2.4] - 2025-10-07

 ### Added
- Domain configuration for https://xn--bris-v0b.com/
+
+- Domain configuration for <https://xn--bris-v0b.com/>
 - Public assets and deployment configuration
 - Hide bookmarks without content or URL

 ### Fixed
+
 - Encode/decode URLs in /r/ route to preserve special characters

 ### Changed
+
 - Cleanup after build fixes (remove shims, update locks)
 - Stop tracking node_modules/dist
 - Update dependencies and dedupe
@@ -444,39 +635,46 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ## [0.2.3] - 2025-10-07

 ### Added
+
 - Parse and display summary tag for nostr articles
 - Merge and flatten bookmarks from multiple lists
 - Update URL path when opening bookmarks from sidebar

 ### Fixed
+
 - Ensure bookmarks are sorted newest first after merging lists
 - Hide empty bookmarks without content
 - Remove encrypted cyphertext display from bookmark list

 ### Changed
+
 - Remove created date from bookmark list display

 ## [0.2.2] - 2025-10-06

 ### Added
+
 - Support for web bookmarks (NIP-B0, kind:39701)
 - Default highlight visibility settings
 - Proxy.nostr-relay.app relay to configuration
 - Comprehensive logging to settings service

 ### Fixed
+
 - Handle web bookmarks with URLs in d tag and prevent crash
 - Load settings from local cache first to eliminate FOUT
 - Ensure fonts are fully loaded before applying styles
 - Improve highlight rendering pipeline with comprehensive debugging

 ### Changed
+
 - Use icon toggle buttons for highlight visibility settings
 - Change nostrverse icon from fa-globe to fa-network-wired

 ## [0.2.1] - 2025-10-05

 ### Added
+
 - Local relay support and centralize relay configuration
 - Optimistic updates for highlight creation
 - Enable highlight creation from external URLs
@@ -485,28 +683,33 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Boris branding to highlight alt tag

 ### Fixed
+
 - Properly await account loading from localStorage on refresh
 - Add protected routes to prevent logout on page refresh
 - Use undo icon for reset to defaults button
 - Update local relay port to 10547

 ### Changed
+
 - Remove dedicated login page, handle login through main UI
 - Simplify to single RELAYS constant (DRY)

 ## [0.2.0] - 2025-10-05

 ### Added
+
 - Simple highlight creation feature (FAB style)
 - Reset to defaults button in settings
 - Load and apply settings upon login

 ### Fixed
+
 - Replace any types with proper NostrEvent types
 - Move FAB to Bookmarks component for proper floating
 - Highlight button positioning with scroll

 ### Changed
+
 - Update color palette to include default friends/nostrverse colors
 - Show author name in highlight cards
 - Sync highlight level toggles between sidebar and main article text
@@ -515,67 +718,81 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ## [0.1.11] - 2025-10-05

 ### Added
+
 - Stream highlights progressively as they arrive from relays

 ### Fixed
+
 - Display article immediately without waiting for highlights to load
 - Show highlights immediately when opening panel if already loaded
 - Prevent bookmark text from being cut off in compact view
 - Correct default highlight color for 'mine' to yellow (#ffff00)

 ### Changed
+
 - Reduce padding between bookmark items and panel edge
 - Update default highlight colors to orange for friends and purple for nostrverse

 ## [0.1.10] - 2025-10-05

 ### Added
+
 - Three-level highlight system (mine/friends/nostrverse)

 ### Fixed
+
 - Ensure highlights always render on markdown content
 - Classify highlights before passing to ContentPanel
 - Position toggle buttons directly adjacent to main panel
 - Remove redundant setReaderLoading call in error handler

 ### Changed
+
 - Always show friends and user highlight buttons
 - Remove Highlights title and count from panel

 ## [0.1.9] - 2025-10-05

 ### Fixed
+
 - Show markdown content immediately when finalHtml is empty
 - Prevent highlight bleeding into sidebar

 ## [0.1.8] - 2025-10-05

 ### Fixed
+
 - Prevent 'No readable content' flash for markdown articles
 - Enable highlights display and scroll-to for markdown content

 ### Added
+
 - Persist accounts to localStorage

 ### Changed
+
 - Simplify login by handling it directly in sidebar

 ## [0.1.7] - 2025-10-05

 ### Added
+
 - Show highlights in article content and add mode toggle

 ### Fixed
+
 - Show highlights for nostr articles by skipping URL filter
 - Refresh button now works without login for article highlights
 - Query highlights using both a-tag and e-tag

 ### Changed
+
 - Keep Bookmarks.tsx under 210 lines by extracting logic

 ## [0.1.6] - 2025-10-03

 ### Added
+
 - Native support for rendering Nostr long-form articles (NIP-23)
 - Display article titles for kind:30023 bookmarks
 - Enable clicking on kind:30023 articles to open in reader
@@ -584,10 +801,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Highlight style setting (marker & underline)

 ### Fixed
+
 - Use bookmark pubkey for article author instead of tag lookup
 - Ensure highlight color CSS variable inherits from parent

 ### Changed
+
 - Integrate long-form article rendering into existing reader view
 - Extract components to keep files under 210 lines
 - Make font size and color buttons match icon button size (33px)
@@ -595,6 +814,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ## [0.1.5] - 2025-10-03

 ### Added
+
 - Settings panel with NIP-78 storage
 - Auto-save for settings with toast notifications
 - Reading time estimate to articles
@@ -604,12 +824,14 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Settings subscription to watch for Nostr updates

 ### Fixed
+
 - Prevent settings from saving unnecessarily
 - Prevent save settings button from being cut off
 - Replace custom reading time with reading-time-estimator package
 - Update originalHtmlRef when content changes

 ### Changed
+
 - Reduce file sizes to meet 210 line limit
 - Extract settings logic into custom hook
 - Consolidate settings initialization on login
@@ -618,6 +840,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ## [0.1.4] - 2025-10-03

 ### Added
+
 - Inline highlight annotations in content panel
 - NIP-84 highlights panel with three-pane layout
 - Toggle button to show/hide highlight underlines
@@ -625,12 +848,14 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Pulsing animation when scrolling to highlight

 ### Fixed
+
 - Apply highlights to markdown content as well as HTML
 - Use requestAnimationFrame for highlight DOM manipulation
 - Improve HTML highlight matching with DOM manipulation
 - Filter highlights panel to show only current article

 ### Changed
+
 - Use applesauce helpers for highlight parsing
 - DRY up highlightMatching to stay under 210 lines
 - Change highlights to fluorescent marker style
@@ -639,12 +864,14 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ## [0.1.3] - 2025-10-03

 ### Added
+
 - View mode switching for bookmarks with compact list view
 - Large preview view mode
 - Image preview for large view cards
 - Hero images using free CORS proxy

 ### Changed
+
 - Make entire compact list row clickable to open reader
 - Make card view timestamp clickable to open event
 - Enhance card view design with modern styling
@@ -652,15 +879,18 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ## [0.1.2] - 2025-10-03

 ### Added
+
 - Open bookmark URLs in reader instead of new window
 - localStorage caching for fetched articles
 - Collapsible bookmarks sidebar

 ### Fixed
+
 - Make sidebar and reader scroll independently
 - Replace relative-time with date-fns for timestamp formatting

 ### Changed
+
 - Display timestamps as relative time
 - Replace user text with profile image in sidebar header
 - Move user info and logout to sidebar header bar
@@ -669,16 +899,19 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ## [0.1.1] - 2025-10-03

 ### Added
+
 - Classify URLs by type and adjust action buttons
 - Collapse/expand functionality for bookmarks sidebar
 - IconButton component with square styling
 - Resolve nprofile/npub mentions to names in content

 ### Fixed
+
 - Enforce 210-char truncation for both plain and parsed content
 - Use Rules of Hooks correctly

 ### Changed
+
 - Use IconButton for all icon-only actions to enforce square sizing
 - Sort bookmarks by added_at (recently added first)
 - Make kind icon square to match IconButton sizing
@@ -687,6 +920,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ## [0.1.0] - 2025-10-03

 ### Added
+
 - Two-pane layout and content fetching pipeline
 - ContentPanel component to render readable HTML
 - Lightweight readability fetcher via r.jina.ai proxy
@@ -696,11 +930,13 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - FontAwesome icons for event kinds

 ### Fixed
+
 - Show bookmarked event author instead of list signer
 - Enable reactive profile fetch via address loader
 - Left-align content and constrain images in content panel

 ### Changed
+
 - Resolve author names using applesauce ProfileModel
 - Propagate URL selection through BookmarkList to parent
 - Display URLs clearly in individual bookmarks
@@ -708,16 +944,19 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ## [0.0.3] - 2025-10-02

 ### Added
+
 - Manual decryption for unrecognized event kinds
 - Try NIP-44 then NIP-04 for manual decryption
 - Detailed debugging for decryption process
 - Support for hidden bookmarks decryption

 ### Fixed
+
 - Surface manually decrypted hidden tags in UI
 - Dedupe individual bookmarks by id

 ### Changed
+
 - Sort individual bookmarks by timestamp (newest first)
 - Increase bookmark loading timeout by 2x
 - Extract helpers and event processing
@@ -725,6 +964,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ## [0.0.2] - 2025-10-02

 ### Added
+
 - Fetch all NIP-51 events
 - Unlock private bookmarks via applesauce helpers
 - Copy-to-clipboard icons for event id and author pubkey
@@ -732,12 +972,14 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Display content identically for private/public bookmarks

 ### Fixed
+
 - Properly configure browser extension signer
 - Aggregate list(10003) + set(30001)
 - Handle applesauce bookmark structure correctly
 - Resolve loading state stuck issue

 ### Changed
+
 - Change bookmarks display from grid to social feed list layout
 - Simplify bookmark service using applesauce helpers
 - Extract components and utilities to keep files under 210 lines
@@ -745,6 +987,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ## [0.0.1] - 2025-10-02

 ### Added
+
 - Initial release
 - Browser extension login support
 - NIP-51 bookmark fetching from nostr relays
@@ -753,12 +996,14 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Basic UI with profile resolution

 ### Changed
+
 - Migrate to applesauce-accounts for proper account management
 - Use proper applesauce-loaders for NIP-51 bookmark fetching
 - Optimize relay usage following applesauce-relay best practices
 - Use applesauce-react event models for better profile handling

-[Unreleased]: https://github.com/dergigi/boris/compare/v0.5.2...HEAD
+[Unreleased]: https://github.com/dergigi/boris/compare/v0.5.5...HEAD
+[0.5.5]: https://github.com/dergigi/boris/compare/v0.5.4...v0.5.5
 [0.5.2]: https://github.com/dergigi/boris/compare/v0.5.1...v0.5.2
 [0.5.1]: https://github.com/dergigi/boris/compare/v0.5.0...v0.5.1
 [0.5.0]: https://github.com/dergigi/boris/compare/v0.4.3...v0.5.0
@@ -769,8 +1014,6 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 [0.3.5]: https://github.com/dergigi/boris/compare/v0.3.4...v0.3.5
 [0.3.4]: https://github.com/dergigi/boris/compare/v0.3.3...v0.3.4
 [0.3.3]: https://github.com/dergigi/boris/compare/v0.3.2...v0.3.3
-[0.3.2]: https://github.com/dergigi/boris/compare/v0.3.1...v0.3.2
-[0.3.1]: https://github.com/dergigi/boris/compare/v0.3.0...v0.3.1
 [0.3.0]: https://github.com/dergigi/boris/compare/v0.2.10...v0.3.0
 [0.2.10]: https://github.com/dergigi/boris/compare/v0.2.9...v0.2.10
 [0.2.9]: https://github.com/dergigi/boris/compare/v0.2.8...v0.2.9
@@ -798,4 +1041,3 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 [0.0.3]: https://github.com/dergigi/boris/compare/v0.0.2...v0.0.3
 [0.0.2]: https://github.com/dergigi/boris/compare/v0.0.1...v0.0.2
 [0.0.1]: https://github.com/dergigi/boris/releases/tag/v0.0.1
-
--- a/TAILWIND_MIGRATION.md
+++ b/TAILWIND_MIGRATION.md
@@ -0,0 +1,188 @@
+# Tailwind CSS Migration Status
+
+## ✅ Completed (Core Infrastructure)
+
+### Phase 1: Setup & Foundation
+- [x] Install Tailwind CSS with PostCSS and Autoprefixer
+- [x] Configure `tailwind.config.js` with content globs and custom keyframes
+- [x] Create `src/styles/tailwind.css` with base/components/utilities
+- [x] Import Tailwind before existing CSS in `main.tsx`
+- [x] Enable Tailwind preflight (CSS reset)
+
+### Phase 2: Base Styles Reconciliation
+- [x] Add CSS variables for user-settable theme colors
+  - `--highlight-color-mine`, `--highlight-color-friends`, `--highlight-color-nostrverse`
+  - `--reading-font`, `--reading-font-size`
+- [x] Simplify `global.css` to work with Tailwind preflight
+- [x] Remove redundant base styles handled by Tailwind
+- [x] Keep app-specific overrides (mobile sidebar lock, loading states)
+
+### Phase 3: Layout System Refactor ⭐ **CRITICAL FIX**
+- [x] Switch from pane-scrolling to document-scrolling
+- [x] Make sidebars sticky on desktop (`position: sticky`)
+- [x] Update `app.css` to remove fixed container heights
+- [x] Update `ThreePaneLayout.tsx` to use window scroll
+- [x] Fix reading position tracking to work with document scroll
+- [x] Maintain mobile overlay behavior
+
+### Phase 4: Component Migrations
+- [x] **ReadingProgressIndicator**: Full Tailwind conversion
+  - Removed 80+ lines of CSS
+  - Added shimmer animation to Tailwind config
+  - Z-index layering maintained (1102)
+  
+- [x] **Mobile UI Elements**: Tailwind utilities
+  - Mobile hamburger button
+  - Mobile highlights button  
+  - Mobile backdrop
+  - Removed 60+ lines of CSS
+
+- [x] **App Container**: Tailwind utilities
+  - Responsive padding (p-0 md:p-4)
+  - Min-height viewport support
+
+## 📊 Impact & Metrics
+
+### Lines of CSS Removed
+- `global.css`: ~50 lines removed
+- `reader.css`: ~80 lines removed (progress indicator)
+- `app.css`: ~30 lines removed (mobile buttons/backdrop)
+- `sidebar.css`: ~30 lines removed (mobile hamburger)
+- **Total**: ~190 lines removed
+
+### Key Achievements
+1. **Fixed Core Issue**: Reading position tracking now works correctly with document scroll
+2. **Tailwind Integration**: Fully functional with preflight enabled
+3. **No Breaking Changes**: All existing functionality preserved
+4. **Type Safety**: TypeScript checks passing
+5. **Lint Clean**: ESLint checks passing
+6. **Responsive**: Mobile/tablet/desktop layouts working
+
+## 🔄 Remaining Work (Incremental)
+
+The following migrations are **optional enhancements** that can be done as components are touched:
+
+### High-Value Components
+- [ ] **ContentPanel** - Large component, high impact
+  - Reader header, meta info, loading states
+  - Mark as read button
+  - Article/video menus
+  
+- [ ] **BookmarkList & BookmarkItem** - Core UI
+  - Card layouts (compact/cards/large views)
+  - Bookmark metadata display
+  - Interactive states
+
+- [ ] **HighlightsPanel** - Feature-rich
+  - Header with toggles
+  - Highlight items
+  - Level-based styling
+
+- [ ] **Settings Components** - Forms & controls
+  - Color pickers
+  - Font selectors
+  - Toggle switches
+  - Sliders
+
+### CSS Files to Prune
+- `src/index.css` - Contains many inline bookmark/highlight styles (~3000+ lines)
+- `src/styles/components/cards.css` - Bookmark card styles
+- `src/styles/components/modals.css` - Modal dialogs
+- `src/styles/layout/highlights.css` - Highlight panel layout
+
+## 🎯 Migration Strategy
+
+### For New Components
+Use Tailwind utilities from the start. Reference:
+```tsx
+// Good: Tailwind utilities
+<div className="flex items-center gap-2 p-4 bg-gray-800 rounded-lg">
+  
+// Avoid: New CSS classes
+<div className="custom-component">
+```
+
+### For Existing Components
+Migrate incrementally when touching files:
+1. Replace layout utilities (flex, grid, spacing, sizing)
+2. Replace color/background utilities
+3. Replace typography utilities
+4. Replace responsive variants
+5. Remove old CSS rules
+6. Keep file under 210 lines
+
+### CSS Variable Usage
+Dynamic values should still use CSS variables or inline styles:
+```tsx
+// User-settable colors
+style={{ backgroundColor: settings.highlightColorMine }}
+
+// Or reference CSS variable
+className="bg-[var(--highlight-color-mine)]"
+```
+
+## 📝 Technical Notes
+
+### Z-Index Layering
+- Mobile sidepanes: `z-[1001]`
+- Mobile backdrop: `z-[999]`
+- Progress indicator: `z-[1102]`
+- Mobile buttons: `z-[900]`
+- Relay status: `z-[999]`
+- Modals: `z-[10000]`
+
+### Responsive Breakpoints
+- Mobile: `< 768px`
+- Tablet: `768px - 1024px`
+- Desktop: `> 1024px`
+
+Use Tailwind: `md:` (768px), `lg:` (1024px)
+
+### Safe Area Insets
+Mobile notch support:
+```tsx
+style={{ 
+  top: 'calc(1rem + env(safe-area-inset-top))',
+  left: 'calc(1rem + env(safe-area-inset-left))'
+}}
+```
+
+### Custom Animations
+Add to `tailwind.config.js`:
+```js
+keyframes: {
+  shimmer: {
+    '0%': { transform: 'translateX(-100%)' },
+    '100%': { transform: 'translateX(100%)' },
+  },
+}
+```
+
+## ✅ Success Criteria Met
+
+- [x] Tailwind CSS fully integrated and functional
+- [x] Document scrolling working correctly
+- [x] Reading position tracking accurate
+- [x] Progress indicator always visible
+- [x] No TypeScript errors
+- [x] No linting errors
+- [x] Mobile responsiveness maintained
+- [x] Theme colors (user settings) working
+- [x] All existing features functional
+
+## 🚀 Next Steps
+
+1. **Ship It**: Current state is production-ready
+2. **Incremental Migration**: Convert components as you touch them
+3. **Monitor**: Watch for any CSS conflicts
+4. **Cleanup**: Eventually remove unused CSS files
+5. **Document**: Update component docs with Tailwind patterns
+
+---
+
+**Status**: ✅ **CORE MIGRATION COMPLETE**  
+**Date**: 2025-01-14  
+**Commits**: 8 conventional commits  
+**Lines Removed**: ~190 lines of CSS  
+**Breaking Changes**: None
+
--- a/api/video-meta.ts
+++ b/api/video-meta.ts
@@ -0,0 +1,197 @@
+import type { VercelRequest, VercelResponse } from '@vercel/node'
+import { getSubtitles, getVideoDetails } from '@treeee/youtube-caption-extractor'
+
+type Caption = { start: number; dur: number; text: string }
+
+type CacheEntry = {
+  body: unknown
+  expires: number
+}
+
+type VimeoOEmbedResponse = {
+  title: string
+  description: string
+  author_name: string
+  author_url: string
+  provider_name: string
+  provider_url: string
+  type: string
+  version: string
+  width: number
+  height: number
+  html: string
+  thumbnail_url: string
+  thumbnail_width: number
+  thumbnail_height: number
+}
+
+// In-memory cache for 7 days
+const WEEK_MS = 7 * 24 * 60 * 60 * 1000
+const memoryCache = new Map<string, CacheEntry>()
+
+function buildKey(videoId: string, lang: string, preferAuto?: string | string[], source?: string) {
+  return `${source || 'video'}|${videoId}|${lang}|${preferAuto ? 'auto' : 'manual'}`
+}
+
+function ok(res: VercelResponse, data: unknown) {
+  res.setHeader('Cache-Control', 'public, max-age=86400, s-maxage=604800') // client: 1d, CDN: 7d
+  return res.status(200).json(data)
+}
+
+function bad(res: VercelResponse, code: number, message: string) {
+  return res.status(code).json({ error: message })
+}
+
+function extractVideoId(url: string): { id: string; source: 'youtube' | 'vimeo' } | null {
+  // YouTube patterns
+  const youtubePatterns = [
+    /(?:youtube\.com\/watch\?v=|youtu\.be\/|youtube\.com\/embed\/)([^&\n?#]+)/,
+    /youtube\.com\/v\/([^&\n?#]+)/
+  ]
+  
+  for (const pattern of youtubePatterns) {
+    const match = url.match(pattern)
+    if (match) {
+      return { id: match[1], source: 'youtube' }
+    }
+  }
+  
+  // Vimeo patterns
+  const vimeoPatterns = [
+    /vimeo\.com\/(\d+)/,
+    /player\.vimeo\.com\/video\/(\d+)/
+  ]
+  
+  for (const pattern of vimeoPatterns) {
+    const match = url.match(pattern)
+    if (match) {
+      return { id: match[1], source: 'vimeo' }
+    }
+  }
+  
+  return null
+}
+
+async function pickCaptions(videoID: string, preferredLangs: string[], manualFirst: boolean): Promise<{ caps: Caption[]; lang: string; isAuto: boolean } | null> {
+  for (const lang of preferredLangs) {
+    try {
+      const caps = await getSubtitles({ videoID, lang, auto: !manualFirst ? true : false })
+      if (Array.isArray(caps) && caps.length > 0) {
+        return { caps, lang, isAuto: !manualFirst }
+      }
+    } catch {
+      // try next
+    }
+  }
+  return null
+}
+
+async function getVimeoMetadata(videoId: string): Promise<{ title: string; description: string }> {
+  const vimeoUrl = `https://vimeo.com/${videoId}`
+  const oembedUrl = `https://vimeo.com/api/oembed.json?url=${encodeURIComponent(vimeoUrl)}`
+  
+  const response = await fetch(oembedUrl)
+  if (!response.ok) {
+    throw new Error(`Vimeo oEmbed API returned ${response.status}`)
+  }
+  
+  const data: VimeoOEmbedResponse = await response.json()
+  
+  return {
+    title: data.title || '',
+    description: data.description || ''
+  }
+}
+
+export default async function handler(req: VercelRequest, res: VercelResponse) {
+  const url = (req.query.url as string | undefined)?.trim()
+  const videoId = (req.query.videoId as string | undefined)?.trim()
+  
+  if (!url && !videoId) {
+    return bad(res, 400, 'Missing url or videoId parameter')
+  }
+
+  // Extract video info from URL or use provided videoId
+  let videoInfo: { id: string; source: 'youtube' | 'vimeo' }
+  
+  if (url) {
+    const extracted = extractVideoId(url)
+    if (!extracted) {
+      return bad(res, 400, 'Unsupported video URL. Only YouTube and Vimeo are supported.')
+    }
+    videoInfo = extracted
+  } else {
+    // If only videoId is provided, assume YouTube for backward compatibility
+    videoInfo = { id: videoId!, source: 'youtube' }
+  }
+
+  const lang = ((req.query.lang as string | undefined) || 'en').toLowerCase()
+  const uiLocale = (req.headers['x-ui-locale'] as string | undefined)?.toLowerCase()
+  const preferAuto = req.query.preferAuto === 'true'
+
+  const cacheKey = buildKey(videoInfo.id, lang, preferAuto ? 'auto' : undefined, videoInfo.source)
+  const now = Date.now()
+  const cached = memoryCache.get(cacheKey)
+  if (cached && cached.expires > now) {
+    return ok(res, cached.body)
+  }
+
+  try {
+    if (videoInfo.source === 'youtube') {
+      // YouTube handling
+      const details: unknown = await getVideoDetails({ videoID: videoInfo.id, lang })
+      // Be tolerant to possible shapes returned by the extractor
+      const title = (details as { title?: string } | undefined)?.title || ''
+      const d1 = (details as { description?: string } | undefined)?.description
+      const d2 = (details as { shortDescription?: string } | undefined)?.shortDescription
+      const d3 = (details as { descriptionText?: string } | undefined)?.descriptionText
+      const description = d1 || d2 || d3 || ''
+
+      // Language order: manual en -> uiLocale -> lang -> any manual, then auto with same order
+      const langs: string[] = Array.from(new Set(['en', uiLocale, lang].filter(Boolean) as string[]))
+
+      let selected = null as null | { caps: Caption[]; lang: string; isAuto: boolean }
+      // Manual first
+      selected = await pickCaptions(videoInfo.id, langs, true)
+      if (!selected) {
+        // Try auto
+        selected = await pickCaptions(videoInfo.id, langs, false)
+      }
+
+      const captions = selected?.caps || []
+      const transcript = captions.map(c => c.text).join(' ').trim()
+      const response = {
+        title,
+        description,
+        captions,
+        transcript,
+        lang: selected?.lang || lang,
+        isAuto: selected?.isAuto || false,
+        source: 'youtube'
+      }
+
+      memoryCache.set(cacheKey, { body: response, expires: now + WEEK_MS })
+      return ok(res, response)
+    } else if (videoInfo.source === 'vimeo') {
+      // Vimeo handling
+      const { title, description } = await getVimeoMetadata(videoInfo.id)
+      
+      const response = {
+        title,
+        description,
+        captions: [], // Vimeo doesn't provide captions through oEmbed API
+        transcript: '', // No transcript available
+        lang: 'en', // Default language
+        isAuto: false, // Not applicable for Vimeo
+        source: 'vimeo'
+      }
+
+      memoryCache.set(cacheKey, { body: response, expires: now + WEEK_MS })
+      return ok(res, response)
+    } else {
+      return bad(res, 400, 'Unsupported video source')
+    }
+  } catch (e) {
+    return bad(res, 500, `Failed to fetch ${videoInfo.source} metadata`)
+  }
+}
--- a/api/vimeo-meta.ts
+++ b/api/vimeo-meta.ts
@@ -0,0 +1,93 @@
+import type { VercelRequest, VercelResponse } from '@vercel/node'
+
+type CacheEntry = {
+  body: unknown
+  expires: number
+}
+
+type VimeoOEmbedResponse = {
+  title: string
+  description: string
+  author_name: string
+  author_url: string
+  provider_name: string
+  provider_url: string
+  type: string
+  version: string
+  width: number
+  height: number
+  html: string
+  thumbnail_url: string
+  thumbnail_width: number
+  thumbnail_height: number
+}
+
+// In-memory cache for 7 days
+const WEEK_MS = 7 * 24 * 60 * 60 * 1000
+const memoryCache = new Map<string, CacheEntry>()
+
+function buildKey(videoId: string) {
+  return `vimeo|${videoId}`
+}
+
+function ok(res: VercelResponse, data: unknown) {
+  res.setHeader('Cache-Control', 'public, max-age=86400, s-maxage=604800') // client: 1d, CDN: 7d
+  return res.status(200).json(data)
+}
+
+function bad(res: VercelResponse, code: number, message: string) {
+  return res.status(code).json({ error: message })
+}
+
+async function getVimeoMetadata(videoId: string): Promise<{ title: string; description: string }> {
+  const vimeoUrl = `https://vimeo.com/${videoId}`
+  const oembedUrl = `https://vimeo.com/api/oembed.json?url=${encodeURIComponent(vimeoUrl)}`
+  
+  const response = await fetch(oembedUrl)
+  if (!response.ok) {
+    throw new Error(`Vimeo oEmbed API returned ${response.status}`)
+  }
+  
+  const data: VimeoOEmbedResponse = await response.json()
+  
+  return {
+    title: data.title || '',
+    description: data.description || ''
+  }
+}
+
+export default async function handler(req: VercelRequest, res: VercelResponse) {
+  const videoId = (req.query.videoId as string | undefined)?.trim()
+  if (!videoId) return bad(res, 400, 'Missing videoId')
+
+  // Validate that videoId is a number
+  if (!/^\d+$/.test(videoId)) {
+    return bad(res, 400, 'Invalid Vimeo video ID - must be numeric')
+  }
+
+  const cacheKey = buildKey(videoId)
+  const now = Date.now()
+  const cached = memoryCache.get(cacheKey)
+  if (cached && cached.expires > now) {
+    return ok(res, cached.body)
+  }
+
+  try {
+    const { title, description } = await getVimeoMetadata(videoId)
+    
+    const response = {
+      title,
+      description,
+      captions: [], // Vimeo doesn't provide captions through oEmbed API
+      transcript: '', // No transcript available
+      lang: 'en', // Default language
+      isAuto: false, // Not applicable for Vimeo
+      source: 'vimeo'
+    }
+
+    memoryCache.set(cacheKey, { body: response, expires: now + WEEK_MS })
+    return ok(res, response)
+  } catch (e) {
+    return bad(res, 500, 'Failed to fetch Vimeo metadata')
+  }
+}
--- a/api/youtube-meta.ts
+++ b/api/youtube-meta.ts
@@ -0,0 +1,101 @@
+import type { VercelRequest, VercelResponse } from '@vercel/node'
+import { getSubtitles } from '@treeee/youtube-caption-extractor'
+
+type Caption = { start: number; dur: number; text: string }
+
+type Subtitle = { start: string | number; dur: string | number; text: string }
+
+type CacheEntry = {
+  body: unknown
+  expires: number
+}
+
+// In-memory cache for 7 days
+const WEEK_MS = 7 * 24 * 60 * 60 * 1000
+const memoryCache = new Map<string, CacheEntry>()
+
+function buildKey(videoId: string, lang: string, preferAuto?: string | string[]) {
+  return `${videoId}|${lang}|${preferAuto ? 'auto' : 'manual'}`
+}
+
+function ok(res: VercelResponse, data: unknown) {
+  res.setHeader('Cache-Control', 'public, max-age=86400, s-maxage=604800') // client: 1d, CDN: 7d
+  return res.status(200).json(data)
+}
+
+function bad(res: VercelResponse, code: number, message: string) {
+  return res.status(code).json({ error: message })
+}
+
+async function pickCaptions(videoID: string, preferredLangs: string[], manualFirst: boolean): Promise<{ caps: Caption[]; lang: string; isAuto: boolean } | null> {
+  for (const lang of preferredLangs) {
+    try {
+      const caps = await getSubtitles({ videoID, lang })
+      if (Array.isArray(caps) && caps.length > 0) {
+        // Convert the returned subtitles to our Caption format
+        const convertedCaps: Caption[] = caps.map((cap: Subtitle) => ({
+          start: typeof cap.start === 'string' ? parseFloat(cap.start) : cap.start,
+          dur: typeof cap.dur === 'string' ? parseFloat(cap.dur) : cap.dur,
+          text: cap.text
+        }))
+        return { caps: convertedCaps, lang, isAuto: !manualFirst }
+      }
+    } catch {
+      // try next
+    }
+  }
+  return null
+}
+
+export default async function handler(req: VercelRequest, res: VercelResponse) {
+  const videoId = (req.query.videoId as string | undefined)?.trim()
+  if (!videoId) return bad(res, 400, 'Missing videoId')
+
+  const lang = ((req.query.lang as string | undefined) || 'en').toLowerCase()
+  const uiLocale = (req.headers['x-ui-locale'] as string | undefined)?.toLowerCase()
+  const preferAuto = req.query.preferAuto === 'true'
+
+  const cacheKey = buildKey(videoId, lang, preferAuto ? 'auto' : undefined)
+  const now = Date.now()
+  const cached = memoryCache.get(cacheKey)
+  if (cached && cached.expires > now) {
+    return ok(res, cached.body)
+  }
+
+  try {
+    // Since getVideoDetails doesn't exist, we'll use a simple approach
+    // In a real implementation, you might want to use YouTube's API or other methods
+    const title = '' // Will be populated from captions or other sources
+    const description = ''
+
+    // Language order: manual en -> uiLocale -> lang -> any manual, then auto with same order
+    const langs: string[] = Array.from(new Set(['en', uiLocale, lang].filter(Boolean) as string[]))
+
+    let selected = null as null | { caps: Caption[]; lang: string; isAuto: boolean }
+    // Manual first
+    selected = await pickCaptions(videoId, langs, true)
+    if (!selected) {
+      // Try auto
+      selected = await pickCaptions(videoId, langs, false)
+    }
+
+    const captions = selected?.caps || []
+    const transcript = captions.map(c => c.text).join(' ').trim()
+    const response = {
+      title,
+      description,
+      captions,
+      transcript,
+      lang: selected?.lang || lang,
+      isAuto: selected?.isAuto || false,
+      source: 'youtube'
+    }
+
+    memoryCache.set(cacheKey, { body: response, expires: now + WEEK_MS })
+    return ok(res, response)
+  } catch (e) {
+    return bad(res, 500, 'Failed to fetch YouTube metadata')
+  }
+}
+
+
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "boris",
-  "version": "0.5.5",
+  "version": "0.6.0",
  "description": "A minimal nostr client for bookmark management",
  "homepage": "https://read.withboris.com/",
  "type": "module",
@@ -14,6 +14,8 @@
    "@fortawesome/fontawesome-svg-core": "^7.1.0",
    "@fortawesome/free-solid-svg-icons": "^7.1.0",
    "@fortawesome/react-fontawesome": "^3.0.2",
+    "@treeee/youtube-caption-extractor": "^1.5.5",
+    "@vercel/node": "^5.3.26",
    "applesauce-accounts": "^4.0.0",
    "applesauce-content": "^4.0.0",
    "applesauce-core": "^4.0.0",
@@ -23,22 +25,30 @@
    "applesauce-relay": "^4.0.0",
    "date-fns": "^4.1.0",
    "nostr-tools": "^2.4.0",
+    "prismjs": "^1.30.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-markdown": "^10.1.0",
+    "react-player": "^2.16.0",
    "react-router-dom": "^7.9.3",
    "reading-time-estimator": "^1.14.0",
+    "rehype-prism-plus": "^2.0.1",
+    "rehype-raw": "^7.0.0",
    "remark-gfm": "^4.0.1"
  },
  "devDependencies": {
+    "@tailwindcss/postcss": "^4.1.14",
    "@types/react": "^18.2.43",
    "@types/react-dom": "^18.2.17",
    "@typescript-eslint/eslint-plugin": "^6.14.0",
    "@typescript-eslint/parser": "^6.14.0",
    "@vitejs/plugin-react": "^4.2.1",
+    "autoprefixer": "^10.4.21",
    "eslint": "^8.55.0",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.5",
+    "postcss": "^8.5.6",
+    "tailwindcss": "^4.1.14",
    "typescript": "^5.2.2",
    "vite": "^5.0.8",
    "vite-plugin-pwa": "^1.0.3",
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -0,0 +1,7 @@
+export default {
+  plugins: {
+    '@tailwindcss/postcss': {},
+    autoprefixer: {},
+  },
+}
+
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -72,6 +72,28 @@ function AppRoutes({
      />
      <Route 
        path="/me" 
+        element={<Navigate to="/me/highlights" replace />} 
+      />
+      <Route 
+        path="/me/highlights" 
+        element={
+          <Bookmarks 
+            relayPool={relayPool}
+            onLogout={handleLogout}
+          />
+        } 
+      />
+      <Route 
+        path="/me/reading-list" 
+        element={
+          <Bookmarks 
+            relayPool={relayPool}
+            onLogout={handleLogout}
+          />
+        } 
+      />
+      <Route 
+        path="/me/archive" 
        element={
          <Bookmarks 
            relayPool={relayPool}
@@ -216,7 +238,7 @@ function App() {
    <EventStoreProvider eventStore={eventStore}>
      <AccountsProvider manager={accountManager}>
        <BrowserRouter>
-          <div className="app">
+          <div className="min-h-screen p-0 md:p-4 max-w-none m-0 relative">
            <AppRoutes relayPool={relayPool} showToast={showToast} />
          </div>
        </BrowserRouter>
--- a/src/components/BlogPostCard.tsx
+++ b/src/components/BlogPostCard.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Link } from 'react-router-dom'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faCalendar, faUser } from '@fortawesome/free-solid-svg-icons'
+import { faCalendar, faUser, faNewspaper } from '@fortawesome/free-solid-svg-icons'
 import { formatDistance } from 'date-fns'
 import { BlogPostPreview } from '../services/exploreService'
 import { useEventModel } from 'applesauce-react/hooks'
@@ -28,15 +28,19 @@ const BlogPostCard: React.FC<BlogPostCardProps> = ({ post, href }) => {
      className="blog-post-card"
      style={{ textDecoration: 'none', color: 'inherit' }}
    >
-      {post.image && (
-        <div className="blog-post-card-image">
+      <div className="blog-post-card-image">
+        {post.image ? (
          <img 
            src={post.image} 
            alt={post.title}
            loading="lazy"
          />
-        </div>
-      )}
+        ) : (
+          <div className="blog-post-image-placeholder">
+            <FontAwesomeIcon icon={faNewspaper} />
+          </div>
+        )}
+      </div>
      <div className="blog-post-card-content">
        <h3 className="blog-post-card-title">{post.title}</h3>
        {post.summary && (
--- a/src/components/BookmarkItem.tsx
+++ b/src/components/BookmarkItem.tsx
@@ -110,8 +110,6 @@ export const BookmarkItem: React.FC<BookmarkItemProps> = ({ bookmark, index, onS
    hasUrls,
    extractedUrls,
    onSelectUrl,
-    getIconForUrlType,
-    firstUrlClassification,
    authorNpub,
    eventNevent,
    getAuthorDisplayName,
@@ -127,8 +125,8 @@ export const BookmarkItem: React.FC<BookmarkItemProps> = ({ bookmark, index, onS

  if (viewMode === 'large') {
    const previewImage = articleImage || instantPreview || ogImage
-    return <LargeView {...sharedProps} previewImage={previewImage} />
+    return <LargeView {...sharedProps} getIconForUrlType={getIconForUrlType} previewImage={previewImage} />
  }

-  return <CardView {...sharedProps} articleImage={articleImage} />
+  return <CardView {...sharedProps} getIconForUrlType={getIconForUrlType} articleImage={articleImage} />
 }
--- a/src/components/BookmarkViews/CardView.tsx
+++ b/src/components/BookmarkViews/CardView.tsx
@@ -8,6 +8,7 @@ import IconButton from '../IconButton'
 import { classifyUrl } from '../../utils/helpers'
 import { IconGetter } from './shared'
 import { useImageCache } from '../../hooks/useImageCache'
+import { getPreviewImage, fetchOgImage } from '../../utils/imagePreview'
 import { UserSettings } from '../../services/settingsService'
 import { getProfileUrl, getEventUrl } from '../../config/nostrGateways'

@@ -18,7 +19,6 @@ interface CardViewProps {
  extractedUrls: string[]
  onSelectUrl?: (url: string, bookmark?: { id: string; kind: number; tags: string[][]; pubkey: string }) => void
  getIconForUrlType: IconGetter
-  firstUrlClassification: { buttonText: string } | null
  authorNpub: string
  eventNevent?: string
  getAuthorDisplayName: () => string
@@ -35,7 +35,6 @@ export const CardView: React.FC<CardViewProps> = ({
  extractedUrls,
  onSelectUrl,
  getIconForUrlType,
-  firstUrlClassification,
  authorNpub,
  eventNevent,
  getAuthorDisplayName,
@@ -44,17 +43,49 @@ export const CardView: React.FC<CardViewProps> = ({
  articleSummary,
  settings
 }) => {
-  const cachedImage = useImageCache(articleImage, settings)
+  const firstUrl = hasUrls ? extractedUrls[0] : null
+  const firstUrlClassificationType = firstUrl ? classifyUrl(firstUrl)?.type : null
+  const instantPreview = firstUrl ? getPreviewImage(firstUrl, firstUrlClassificationType || '') : null
+  
+  const [ogImage, setOgImage] = useState<string | null>(null)
  const [expanded, setExpanded] = useState(false)
  const [urlsExpanded, setUrlsExpanded] = useState(false)
+  
  const contentLength = (bookmark.content || '').length
  const shouldTruncate = !expanded && contentLength > 210
  const isArticle = bookmark.kind === 30023
  const isWebBookmark = bookmark.kind === 39701
+  
+  // Determine which image to use (article image, instant preview, or OG image)
+  const previewImage = articleImage || instantPreview || ogImage
+  const cachedImage = useImageCache(previewImage || undefined, settings)
+  
+  // Fetch OG image if we don't have any other image
+  React.useEffect(() => {
+    if (firstUrl && !articleImage && !instantPreview && !ogImage) {
+      fetchOgImage(firstUrl).then(setOgImage)
+    }
+  }, [firstUrl, articleImage, instantPreview, ogImage])
+
+  const triggerOpen = () => handleReadNow({ preventDefault: () => {} } as React.MouseEvent<HTMLButtonElement>)
+
+  const handleKeyDown: React.KeyboardEventHandler<HTMLDivElement> = (e) => {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault()
+      triggerOpen()
+    }
+  }

  return (
-    <div key={`${bookmark.id}-${index}`} className={`individual-bookmark ${bookmark.isPrivate ? 'private-bookmark' : ''}`}>
-      {isArticle && cachedImage && (
+    <div 
+      key={`${bookmark.id}-${index}`}
+      className={`individual-bookmark ${bookmark.isPrivate ? 'private-bookmark' : ''}`}
+      onClick={triggerOpen}
+      role="button"
+      tabIndex={0}
+      onKeyDown={handleKeyDown}
+    >
+      {cachedImage && (
        <div 
          className="article-hero-image"
          style={{ backgroundImage: `url(${cachedImage})` }}
@@ -85,6 +116,7 @@ export const CardView: React.FC<CardViewProps> = ({
            rel="noopener noreferrer"
            className="bookmark-date-link"
            title="Open event in search"
+            onClick={(e) => e.stopPropagation()}
          >
            {formatDate(bookmark.created_at)}
          </a>
@@ -96,23 +128,22 @@ export const CardView: React.FC<CardViewProps> = ({
      {extractedUrls.length > 0 && (
        <div className="bookmark-urls">
          {(urlsExpanded ? extractedUrls : extractedUrls.slice(0, 1)).map((url, urlIndex) => {
-            const classification = classifyUrl(url)
            return (
              <div key={urlIndex} className="url-row">
                <button
                  className="bookmark-url"
-                  onClick={() => onSelectUrl?.(url)}
+                  onClick={(e) => { e.stopPropagation(); onSelectUrl?.(url) }}
                  title="Open in reader"
                >
                  {url}
                </button>
                <IconButton
                  icon={getIconForUrlType(url)}
-                  ariaLabel={classification.buttonText}
-                  title={classification.buttonText}
+                  ariaLabel="Open"
+                  title="Open"
                  variant="success"
                  size={32}
-                  onClick={(e) => { e.preventDefault(); onSelectUrl?.(url) }}
+                  onClick={(e) => { e.preventDefault(); e.stopPropagation(); onSelectUrl?.(url) }}
                />
              </div>
            )
@@ -120,7 +151,7 @@ export const CardView: React.FC<CardViewProps> = ({
          {extractedUrls.length > 1 && (
            <button
              className="expand-toggle-urls"
-              onClick={() => setUrlsExpanded(v => !v)}
+              onClick={(e) => { e.stopPropagation(); setUrlsExpanded(v => !v) }}
              aria-label={urlsExpanded ? 'Collapse URLs' : 'Expand URLs'}
              title={urlsExpanded ? 'Collapse URLs' : 'Expand URLs'}
            >
@@ -149,7 +180,7 @@ export const CardView: React.FC<CardViewProps> = ({
      {contentLength > 210 && (
        <button
          className="expand-toggle"
-          onClick={() => setExpanded(v => !v)}
+          onClick={(e) => { e.stopPropagation(); setExpanded(v => !v) }}
          aria-label={expanded ? 'Collapse' : 'Expand'}
          title={expanded ? 'Collapse' : 'Expand'}
        >
@@ -165,15 +196,12 @@ export const CardView: React.FC<CardViewProps> = ({
            rel="noopener noreferrer"
            className="author-link-minimal"
            title="Open author in search"
+            onClick={(e) => e.stopPropagation()}
          >
            {getAuthorDisplayName()}
          </a>
        </div>
-        {(hasUrls && firstUrlClassification) || bookmark.kind === 30023 ? (
-          <button className="read-now-button-minimal" onClick={handleReadNow}>
-            {bookmark.kind === 30023 ? 'Read Article' : firstUrlClassification?.buttonText}
-          </button>
-        ) : null}
+        {/* CTA removed */}
      </div>
    </div>
  )
--- a/src/components/BookmarkViews/CompactView.tsx
+++ b/src/components/BookmarkViews/CompactView.tsx
@@ -4,7 +4,8 @@ import { faBookmark, faUserLock, faGlobe } from '@fortawesome/free-solid-svg-ico
 import { IndividualBookmark } from '../../types/bookmarks'
 import { formatDateCompact } from '../../utils/bookmarkUtils'
 import ContentWithResolvedProfiles from '../ContentWithResolvedProfiles'
-import { IconGetter } from './shared'
+import { useImageCache } from '../../hooks/useImageCache'
+import { UserSettings } from '../../services/settingsService'

 interface CompactViewProps {
  bookmark: IndividualBookmark
@@ -12,10 +13,9 @@ interface CompactViewProps {
  hasUrls: boolean
  extractedUrls: string[]
  onSelectUrl?: (url: string, bookmark?: { id: string; kind: number; tags: string[][]; pubkey: string }) => void
-  getIconForUrlType: IconGetter
-  firstUrlClassification: { buttonText: string } | null
  articleImage?: string
  articleSummary?: string
+  settings?: UserSettings
 }

 export const CompactView: React.FC<CompactViewProps> = ({
@@ -24,14 +24,17 @@ export const CompactView: React.FC<CompactViewProps> = ({
  hasUrls,
  extractedUrls,
  onSelectUrl,
-  getIconForUrlType,
-  firstUrlClassification,
-  articleSummary
+  articleImage,
+  articleSummary,
+  settings
 }) => {
  const isArticle = bookmark.kind === 30023
  const isWebBookmark = bookmark.kind === 39701
  const isClickable = hasUrls || isArticle || isWebBookmark
  
+  // Get cached image for thumbnail
+  const cachedImage = useImageCache(articleImage || undefined, settings)
+  
  const handleCompactClick = () => {
    if (!onSelectUrl) return
    
@@ -55,6 +58,13 @@ export const CompactView: React.FC<CompactViewProps> = ({
        role={isClickable ? 'button' : undefined}
        tabIndex={isClickable ? 0 : undefined}
      >
+        {/* Thumbnail image */}
+        {cachedImage && (
+          <div className="compact-thumbnail">
+            <img src={cachedImage} alt="" />
+          </div>
+        )}
+        
        <span className="bookmark-type-compact">
          {isWebBookmark ? (
            <span className="fa-layers fa-fw">
@@ -76,22 +86,7 @@ export const CompactView: React.FC<CompactViewProps> = ({
          </div>
        )}
        <span className="bookmark-date-compact">{formatDateCompact(bookmark.created_at)}</span>
-        {isClickable && (
-          <button
-            className="compact-read-btn"
-            onClick={(e) => { 
-              e.stopPropagation()
-              if (isArticle) {
-                onSelectUrl?.('', { id: bookmark.id, kind: bookmark.kind, tags: bookmark.tags, pubkey: bookmark.pubkey })
-              } else {
-                onSelectUrl?.(extractedUrls[0])
-              }
-            }}
-            title={isArticle ? 'Read Article' : firstUrlClassification?.buttonText}
-          >
-            <FontAwesomeIcon icon={isArticle ? getIconForUrlType('') : getIconForUrlType(extractedUrls[0])} />
-          </button>
-        )}
+        {/* CTA removed */}
      </div>
    </div>
  )
--- a/src/components/BookmarkViews/LargeView.tsx
+++ b/src/components/BookmarkViews/LargeView.tsx
@@ -15,7 +15,6 @@ interface LargeViewProps {
  extractedUrls: string[]
  onSelectUrl?: (url: string, bookmark?: { id: string; kind: number; tags: string[][]; pubkey: string }) => void
  getIconForUrlType: IconGetter
-  firstUrlClassification: { buttonText: string } | null
  previewImage: string | null
  authorNpub: string
  eventNevent?: string
@@ -32,7 +31,6 @@ export const LargeView: React.FC<LargeViewProps> = ({
  extractedUrls,
  onSelectUrl,
  getIconForUrlType,
-  firstUrlClassification,
  previewImage,
  authorNpub,
  eventNevent,
@@ -44,12 +42,28 @@ export const LargeView: React.FC<LargeViewProps> = ({
  const cachedImage = useImageCache(previewImage || undefined, settings)
  const isArticle = bookmark.kind === 30023
  
+  const triggerOpen = () => handleReadNow({ preventDefault: () => {} } as React.MouseEvent<HTMLButtonElement>)
+  const handleKeyDown: React.KeyboardEventHandler<HTMLDivElement> = (e) => {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault()
+      triggerOpen()
+    }
+  }
+
  return (
-    <div key={`${bookmark.id}-${index}`} className={`individual-bookmark large ${bookmark.isPrivate ? 'private-bookmark' : ''}`}>
+    <div 
+      key={`${bookmark.id}-${index}`} 
+      className={`individual-bookmark large ${bookmark.isPrivate ? 'private-bookmark' : ''}`}
+      onClick={triggerOpen}
+      role="button"
+      tabIndex={0}
+      onKeyDown={handleKeyDown}
+    >
      {(hasUrls || (isArticle && cachedImage)) && (
        <div 
          className="large-preview-image" 
-          onClick={() => {
+          onClick={(e) => {
+            e.stopPropagation()
            if (isArticle) {
              handleReadNow({ preventDefault: () => {} } as React.MouseEvent<HTMLButtonElement>)
            } else {
@@ -84,6 +98,7 @@ export const LargeView: React.FC<LargeViewProps> = ({
              target="_blank"
              rel="noopener noreferrer"
              className="author-link-minimal"
+              onClick={(e) => e.stopPropagation()}
            >
              {getAuthorDisplayName()}
            </a>
@@ -95,17 +110,13 @@ export const LargeView: React.FC<LargeViewProps> = ({
              target="_blank"
              rel="noopener noreferrer"
              className="bookmark-date-link"
+              onClick={(e) => e.stopPropagation()}
            >
              {formatDate(bookmark.created_at)}
            </a>
          )}
          
-          {(hasUrls && firstUrlClassification) || isArticle ? (
-            <button className="large-read-button" onClick={handleReadNow}>
-              <FontAwesomeIcon icon={isArticle ? getIconForUrlType('') : getIconForUrlType(extractedUrls[0])} />
-              {isArticle ? 'Read Article' : firstUrlClassification?.buttonText}
-            </button>
-          ) : null}
+          {/* CTA removed */}
        </div>
      </div>
    </div>
--- a/src/components/Bookmarks.tsx
+++ b/src/components/Bookmarks.tsx
@@ -36,7 +36,13 @@ const Bookmarks: React.FC<BookmarksProps> = ({ relayPool, onLogout }) => {
  
  const showSettings = location.pathname === '/settings'
  const showExplore = location.pathname === '/explore'
-  const showMe = location.pathname === '/me'
+  const showMe = location.pathname.startsWith('/me')
+  
+  // Extract tab from me routes
+  const meTab = location.pathname === '/me' ? 'highlights' : 
+                location.pathname === '/me/highlights' ? 'highlights' :
+                location.pathname === '/me/reading-list' ? 'reading-list' :
+                location.pathname === '/me/archive' ? 'archive' : 'highlights'
  
  // Track previous location for going back from settings/me/explore
  useEffect(() => {
@@ -263,7 +269,7 @@ const Bookmarks: React.FC<BookmarksProps> = ({ relayPool, onLogout }) => {
        relayPool ? <Explore relayPool={relayPool} /> : null
      ) : undefined}
      me={showMe ? (
-        relayPool ? <Me relayPool={relayPool} /> : null
+        relayPool ? <Me relayPool={relayPool} activeTab={meTab} /> : null
      ) : undefined}
      toastMessage={toastMessage ?? undefined}
      toastType={toastType}
--- a/src/components/ContentPanel.tsx
+++ b/src/components/ContentPanel.tsx
@@ -1,8 +1,15 @@
-import React, { useMemo, useState, useEffect } from 'react'
+import React, { useMemo, useState, useEffect, useRef } from 'react'
+import ReactPlayer from 'react-player'
 import ReactMarkdown from 'react-markdown'
 import remarkGfm from 'remark-gfm'
+import rehypeRaw from 'rehype-raw'
+import rehypePrism from 'rehype-prism-plus'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faSpinner, faCheck } from '@fortawesome/free-solid-svg-icons'
+import 'prismjs/themes/prism-tomorrow.css'
+import { faSpinner, faCheckCircle, faEllipsisH, faExternalLinkAlt, faMobileAlt, faCopy, faShare } from '@fortawesome/free-solid-svg-icons'
+import { nip19 } from 'nostr-tools'
+import { getNostrUrl } from '../config/nostrGateways'
+import { RELAYS } from '../config/relays'
 import { RelayPool } from 'applesauce-relay'
 import { IAccount } from 'applesauce-accounts'
 import { NostrEvent } from 'nostr-tools'
@@ -23,6 +30,11 @@ import {
 } from '../services/reactionService'
 import AuthorCard from './AuthorCard'
 import { faBooks } from '../icons/customIcons'
+import { extractYouTubeId, getYouTubeMeta } from '../services/youtubeMetaService'
+import { classifyUrl } from '../utils/helpers'
+import { buildNativeVideoUrl } from '../utils/videoHelpers'
+import { useReadingPosition } from '../hooks/useReadingPosition'
+import { ReadingProgressIndicator } from './ReadingProgressIndicator'

 interface ContentPanelProps {
  loading: boolean
@@ -58,7 +70,6 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
  markdown, 
  selectedUrl,
  image,
-  summary,
  published,
  highlights = [],
  showHighlights = true,
@@ -79,6 +90,11 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
  const [isMarkedAsRead, setIsMarkedAsRead] = useState(false)
  const [isCheckingReadStatus, setIsCheckingReadStatus] = useState(false)
  const [showCheckAnimation, setShowCheckAnimation] = useState(false)
+  const [showArticleMenu, setShowArticleMenu] = useState(false)
+  const [showVideoMenu, setShowVideoMenu] = useState(false)
+  const articleMenuRef = useRef<HTMLDivElement>(null)
+  const videoMenuRef = useRef<HTMLDivElement>(null)
+  const [ytMeta, setYtMeta] = useState<{ title?: string; description?: string; transcript?: string } | null>(null)
  const { renderedHtml: renderedMarkdownHtml, previewRef: markdownPreviewRef, processedMarkdown } = useMarkdownToHTML(markdown, relayPool)
  
  const { finalHtml, relevantHighlights } = useHighlightedContent({
@@ -101,6 +117,38 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
    onClearSelection
  })

+  // Reading position tracking - only for text content, not videos
+  const isTextContent = !loading && !!(markdown || html) && !selectedUrl?.includes('youtube') && !selectedUrl?.includes('vimeo')
+  const { isReadingComplete, progressPercentage } = useReadingPosition({
+    enabled: isTextContent,
+    onReadingComplete: () => {
+      // Optional: Auto-mark as read when reading is complete
+      if (activeAccount && !isMarkedAsRead) {
+        // Could trigger auto-mark as read here if desired
+      }
+    }
+  })
+
+  // Close menu when clicking outside
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      const target = event.target as Node
+      if (articleMenuRef.current && !articleMenuRef.current.contains(target)) {
+        setShowArticleMenu(false)
+      }
+      if (videoMenuRef.current && !videoMenuRef.current.contains(target)) {
+        setShowVideoMenu(false)
+      }
+    }
+    
+    if (showArticleMenu || showVideoMenu) {
+      document.addEventListener('mousedown', handleClickOutside)
+      return () => {
+        document.removeEventListener('mousedown', handleClickOutside)
+      }
+    }
+  }, [showArticleMenu, showVideoMenu])
+
  const readingStats = useMemo(() => {
    const content = markdown || html || ''
    if (!content) return null
@@ -112,6 +160,120 @@ const ContentPanel: React.FC<ContentPanelProps> = ({

  // Determine if we're on a nostr-native article (/a/) or external URL (/r/)
  const isNostrArticle = selectedUrl && selectedUrl.startsWith('nostr:')
+  const isExternalVideo = !isNostrArticle && !!selectedUrl && ['youtube', 'video'].includes(classifyUrl(selectedUrl).type)
+
+  // Track external video duration (in seconds) for display in header
+  const [videoDurationSec, setVideoDurationSec] = useState<number | null>(null)
+  // Load YouTube metadata/captions when applicable
+  useEffect(() => {
+    (async () => {
+      try {
+        if (!selectedUrl) return setYtMeta(null)
+        const id = extractYouTubeId(selectedUrl)
+        if (!id) return setYtMeta(null)
+        const locale = navigator?.language?.split('-')[0] || 'en'
+        const data = await getYouTubeMeta(id, locale)
+        if (data) setYtMeta({ title: data.title, description: data.description, transcript: data.transcript })
+      } catch {
+        setYtMeta(null)
+      }
+    })()
+  }, [selectedUrl])
+
+  const formatDuration = (totalSeconds: number): string => {
+    const hours = Math.floor(totalSeconds / 3600)
+    const minutes = Math.floor((totalSeconds % 3600) / 60)
+    const seconds = Math.floor(totalSeconds % 60)
+    const mm = hours > 0 ? String(minutes).padStart(2, '0') : String(minutes)
+    const ss = String(seconds).padStart(2, '0')
+    return hours > 0 ? `${hours}:${mm}:${ss}` : `${mm}:${ss}`
+  }
+  
+
+  // Get article links for menu
+  const getArticleLinks = () => {
+    if (!currentArticle) return null
+
+    const dTag = currentArticle.tags.find(t => t[0] === 'd')?.[1] || ''
+    const relayHints = RELAYS.filter(r => 
+      !r.includes('localhost') && !r.includes('127.0.0.1')
+    ).slice(0, 3)
+
+    const naddr = nip19.naddrEncode({
+      kind: 30023,
+      pubkey: currentArticle.pubkey,
+      identifier: dTag,
+      relays: relayHints
+    })
+
+    return {
+      portal: getNostrUrl(naddr),
+      native: `nostr:${naddr}`
+    }
+  }
+
+  const articleLinks = getArticleLinks()
+
+  const handleMenuToggle = () => {
+    setShowArticleMenu(!showArticleMenu)
+  }
+
+  const toggleVideoMenu = () => setShowVideoMenu(v => !v)
+
+  const handleOpenPortal = () => {
+    if (articleLinks) {
+      window.open(articleLinks.portal, '_blank', 'noopener,noreferrer')
+    }
+    setShowArticleMenu(false)
+  }
+
+  const handleOpenNative = () => {
+    if (articleLinks) {
+      window.location.href = articleLinks.native
+    }
+    setShowArticleMenu(false)
+  }
+  
+  // Video actions
+  const handleOpenVideoExternal = () => {
+    if (selectedUrl) window.open(selectedUrl, '_blank', 'noopener,noreferrer')
+    setShowVideoMenu(false)
+  }
+
+  const handleOpenVideoNative = () => {
+    if (!selectedUrl) return
+    const native = buildNativeVideoUrl(selectedUrl)
+    if (native) {
+      window.location.href = native
+    } else {
+      window.location.href = selectedUrl
+    }
+    setShowVideoMenu(false)
+  }
+
+  const handleCopyVideoUrl = async () => {
+    try {
+      if (selectedUrl) await navigator.clipboard.writeText(selectedUrl)
+    } catch (e) {
+      console.warn('Clipboard copy failed', e)
+    } finally {
+      setShowVideoMenu(false)
+    }
+  }
+
+  const handleShareVideoUrl = async () => {
+    try {
+      if (selectedUrl && (navigator as { share?: (d: { title?: string; url?: string }) => Promise<void> }).share) {
+        await (navigator as { share: (d: { title?: string; url?: string }) => Promise<void> }).share({ title: title || 'Video', url: selectedUrl })
+      } else if (selectedUrl) {
+        await navigator.clipboard.writeText(selectedUrl)
+      }
+    } catch (e) {
+      console.warn('Share failed', e)
+    } finally {
+      setShowVideoMenu(false)
+    }
+  }
  
  // Check if article is already marked as read when URL/article changes
  useEffect(() => {
@@ -212,29 +374,130 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
  const highlightRgb = hexToRgb(highlightColor)

  return (
-    <div className="reader" style={{ '--highlight-rgb': highlightRgb } as React.CSSProperties}>
-      {/* Hidden markdown preview to convert markdown to HTML */}
+    <>
+      {/* Reading Progress Indicator - Outside reader for fixed positioning */}
+      {isTextContent && (
+        <ReadingProgressIndicator 
+          progress={progressPercentage}
+          isComplete={isReadingComplete}
+          showPercentage={true}
+        />
+      )}
+      
+      <div className="reader" style={{ '--highlight-rgb': highlightRgb } as React.CSSProperties}>
+        {/* Hidden markdown preview to convert markdown to HTML */}
      {markdown && (
        <div ref={markdownPreviewRef} style={{ display: 'none' }}>
-          <ReactMarkdown remarkPlugins={[remarkGfm]}>
+          <ReactMarkdown 
+            remarkPlugins={[remarkGfm]}
+            rehypePlugins={[rehypeRaw, rehypePrism]}
+            components={{
+              img: ({ src, alt, ...props }) => (
+                <img 
+                  src={src} 
+                  alt={alt} 
+                  {...props}
+                />
+              )
+            }}
+          >
            {processedMarkdown || markdown}
          </ReactMarkdown>
        </div>
      )}
      
      <ReaderHeader 
-        title={title}
+        title={ytMeta?.title || title}
        image={image}
-        summary={summary}
+        summary={undefined}
        published={published}
-        readingTimeText={readingStats ? readingStats.text : null}
+        readingTimeText={isExternalVideo ? (videoDurationSec !== null ? formatDuration(videoDurationSec) : null) : (readingStats ? readingStats.text : null)}
        hasHighlights={hasHighlights}
        highlightCount={relevantHighlights.length}
        settings={settings}
        highlights={relevantHighlights}
        highlightVisibility={highlightVisibility}
      />
-      {markdown || html ? (
+      {isExternalVideo ? (
+        <>
+          <div className="reader-video">
+            <ReactPlayer 
+              url={selectedUrl as string} 
+              controls 
+              width="100%"
+              height="auto"
+              style={{ 
+                width: '100%', 
+                height: 'auto', 
+                aspectRatio: '16/9' 
+              }}
+              onDuration={(d) => setVideoDurationSec(Math.floor(d))}
+            />
+          </div>
+          {ytMeta?.description && (
+            <div className="large-text" style={{ color: '#ddd', padding: '0 0.75rem', whiteSpace: 'pre-wrap', marginBottom: '0.75rem' }}>
+              {ytMeta.description}
+            </div>
+          )}
+          {ytMeta?.transcript && (
+            <div style={{ padding: '0 0.75rem 1rem 0.75rem' }}>
+              <h3 style={{ margin: '1rem 0 0.5rem 0', fontSize: '1rem', color: '#aaa' }}>Transcript</h3>
+              <div className="large-text" style={{ whiteSpace: 'pre-wrap', color: '#ddd' }}>
+                {ytMeta.transcript}
+              </div>
+            </div>
+          )}
+          <div className="article-menu-container">
+            <div className="article-menu-wrapper" ref={videoMenuRef}>
+              <button
+                className="article-menu-btn"
+                onClick={toggleVideoMenu}
+                title="More options"
+              >
+                <FontAwesomeIcon icon={faEllipsisH} />
+              </button>
+              {showVideoMenu && (
+                <div className="article-menu">
+                  <button className="article-menu-item" onClick={handleOpenVideoExternal}>
+                    <FontAwesomeIcon icon={faExternalLinkAlt} />
+                    <span>Open Link</span>
+                  </button>
+                  <button className="article-menu-item" onClick={handleOpenVideoNative}>
+                    <FontAwesomeIcon icon={faMobileAlt} />
+                    <span>Open in Native App</span>
+                  </button>
+                  <button className="article-menu-item" onClick={handleCopyVideoUrl}>
+                    <FontAwesomeIcon icon={faCopy} />
+                    <span>Copy URL</span>
+                  </button>
+                  <button className="article-menu-item" onClick={handleShareVideoUrl}>
+                    <FontAwesomeIcon icon={faShare} />
+                    <span>Share</span>
+                  </button>
+                </div>
+              )}
+            </div>
+          </div>
+          {activeAccount && (
+            <div className="mark-as-read-container">
+              <button
+                className={`mark-as-read-btn ${isMarkedAsRead ? 'marked' : ''} ${showCheckAnimation ? 'animating' : ''}`}
+                onClick={handleMarkAsRead}
+                disabled={isMarkedAsRead || isCheckingReadStatus}
+                title={isMarkedAsRead ? 'Already Marked as Watched' : 'Mark as Watched'}
+              >
+                <FontAwesomeIcon 
+                  icon={isCheckingReadStatus ? faSpinner : isMarkedAsRead ? faCheckCircle : faBooks} 
+                  spin={isCheckingReadStatus} 
+                />
+                <span>
+                  {isCheckingReadStatus ? 'Checking...' : isMarkedAsRead ? 'Marked as Watched' : 'Mark as Watched'}
+                </span>
+              </button>
+            </div>
+          )}
+        </>
+      ) : markdown || html ? (
        <>
          {markdown ? (
            renderedMarkdownHtml && finalHtml ? (
@@ -262,6 +525,40 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
            />
          )}
          
+          {/* Article menu for nostr-native articles */}
+          {isNostrArticle && currentArticle && articleLinks && (
+            <div className="article-menu-container">
+              <div className="article-menu-wrapper" ref={articleMenuRef}>
+                <button
+                  className="article-menu-btn"
+                  onClick={handleMenuToggle}
+                  title="More options"
+                >
+                  <FontAwesomeIcon icon={faEllipsisH} />
+                </button>
+                
+                {showArticleMenu && (
+                  <div className="article-menu">
+                    <button
+                      className="article-menu-item"
+                      onClick={handleOpenPortal}
+                    >
+                      <FontAwesomeIcon icon={faExternalLinkAlt} />
+                      <span>Open on Nostr</span>
+                    </button>
+                    <button
+                      className="article-menu-item"
+                      onClick={handleOpenNative}
+                    >
+                      <FontAwesomeIcon icon={faMobileAlt} />
+                      <span>Open with Native App</span>
+                    </button>
+                  </div>
+                )}
+              </div>
+            </div>
+          )}
+          
          {/* Mark as Read button */}
          {activeAccount && (
            <div className="mark-as-read-container">
@@ -272,7 +569,7 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
                title={isMarkedAsRead ? 'Already Marked as Read' : 'Mark as Read'}
              >
                <FontAwesomeIcon 
-                  icon={isCheckingReadStatus ? faSpinner : isMarkedAsRead ? faCheck : faBooks} 
+                  icon={isCheckingReadStatus ? faSpinner : isMarkedAsRead ? faCheckCircle : faBooks} 
                  spin={isCheckingReadStatus} 
                />
                <span>
@@ -294,7 +591,8 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
          <p>No readable content found for this URL.</p>
        </div>
      )}
-    </div>
+      </div>
+    </>
  )
 }

--- a/src/components/HighlightItem.tsx
+++ b/src/components/HighlightItem.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useRef, useState } from 'react'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faQuoteLeft, faExternalLinkAlt, faPlane, faSpinner, faServer, faTrash, faEllipsisH } from '@fortawesome/free-solid-svg-icons'
+import { faQuoteLeft, faExternalLinkAlt, faPlane, faSpinner, faServer, faTrash, faEllipsisH, faMobileAlt } from '@fortawesome/free-solid-svg-icons'
 import { Highlight } from '../types/highlights'
 import { useEventModel } from 'applesauce-react/hooks'
 import { Models, IEventStore } from 'applesauce-core'
@@ -123,7 +123,7 @@ export const HighlightItem: React.FC<HighlightItemProps> = ({
    }
  }
  
-  const getHighlightLink = () => {
+  const getHighlightLinks = () => {
    // Encode the highlight event itself (kind 9802) as a nevent
    // Get non-local relays for the hint
    const relayHints = RELAYS.filter(r => 
@@ -136,10 +136,14 @@ export const HighlightItem: React.FC<HighlightItemProps> = ({
      author: highlight.pubkey,
      kind: 9802
    })
-    return getNostrUrl(nevent)
+    
+    return {
+      portal: getNostrUrl(nevent),
+      native: `nostr:${nevent}`
+    }
  }
  
-  const highlightLink = getHighlightLink()
+  const highlightLinks = getHighlightLinks()
  
  // Handle rebroadcast to all relays
  const handleRebroadcast = async (e: React.MouseEvent) => {
@@ -283,9 +287,15 @@ export const HighlightItem: React.FC<HighlightItemProps> = ({
    setShowMenu(!showMenu)
  }
  
-  const handleOpenExternal = (e: React.MouseEvent) => {
+  const handleOpenPortal = (e: React.MouseEvent) => {
    e.stopPropagation()
-    window.open(highlightLink, '_blank', 'noopener,noreferrer')
+    window.open(highlightLinks.portal, '_blank', 'noopener,noreferrer')
+    setShowMenu(false)
+  }
+
+  const handleOpenNative = (e: React.MouseEvent) => {
+    e.stopPropagation()
+    window.location.href = highlightLinks.native
    setShowMenu(false)
  }
  
@@ -364,11 +374,18 @@ export const HighlightItem: React.FC<HighlightItemProps> = ({
              <div className="highlight-menu">
                <button
                  className="highlight-menu-item"
-                  onClick={handleOpenExternal}
+                  onClick={handleOpenPortal}
                >
                  <FontAwesomeIcon icon={faExternalLinkAlt} />
                  <span>Open on Nostr</span>
                </button>
+                <button
+                  className="highlight-menu-item"
+                  onClick={handleOpenNative}
+                >
+                  <FontAwesomeIcon icon={faMobileAlt} />
+                  <span>Open with Native App</span>
+                </button>
                {canDelete && (
                  <button
                    className="highlight-menu-item highlight-menu-item-danger"
--- a/src/components/Me.tsx
+++ b/src/components/Me.tsx
@@ -1,34 +1,50 @@
 import React, { useState, useEffect } from 'react'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faSpinner, faExclamationCircle, faHighlighter, faBookmark } from '@fortawesome/free-solid-svg-icons'
+import { faSpinner, faExclamationCircle, faHighlighter, faBookmark, faList, faThLarge, faImage } from '@fortawesome/free-solid-svg-icons'
 import { Hooks } from 'applesauce-react'
 import { RelayPool } from 'applesauce-relay'
 import { nip19 } from 'nostr-tools'
+import { useNavigate } from 'react-router-dom'
 import { Highlight } from '../types/highlights'
 import { HighlightItem } from './HighlightItem'
 import { fetchHighlights } from '../services/highlightService'
 import { fetchBookmarks } from '../services/bookmarkService'
 import { fetchReadArticlesWithData } from '../services/libraryService'
 import { BlogPostPreview } from '../services/exploreService'
-import { Bookmark } from '../types/bookmarks'
+import { Bookmark, IndividualBookmark } from '../types/bookmarks'
 import AuthorCard from './AuthorCard'
 import BlogPostCard from './BlogPostCard'
+import { BookmarkItem } from './BookmarkItem'
+import IconButton from './IconButton'
+import { ViewMode } from './Bookmarks'
+import { extractUrlsFromContent } from '../services/bookmarkHelpers'
+import { getCachedMeData, setCachedMeData, updateCachedHighlights } from '../services/meCache'
 import { faBooks } from '../icons/customIcons'

 interface MeProps {
  relayPool: RelayPool
+  activeTab?: TabType
 }

 type TabType = 'highlights' | 'reading-list' | 'archive'

-const Me: React.FC<MeProps> = ({ relayPool }) => {
+const Me: React.FC<MeProps> = ({ relayPool, activeTab: propActiveTab }) => {
  const activeAccount = Hooks.useActiveAccount()
-  const [activeTab, setActiveTab] = useState<TabType>('highlights')
+  const navigate = useNavigate()
+  const [activeTab, setActiveTab] = useState<TabType>(propActiveTab || 'highlights')
  const [highlights, setHighlights] = useState<Highlight[]>([])
  const [bookmarks, setBookmarks] = useState<Bookmark[]>([])
  const [readArticles, setReadArticles] = useState<BlogPostPreview[]>([])
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)
+  const [viewMode, setViewMode] = useState<ViewMode>('cards')
+
+  // Update local state when prop changes
+  useEffect(() => {
+    if (propActiveTab) {
+      setActiveTab(propActiveTab)
+    }
+  }, [propActiveTab])

  useEffect(() => {
    const loadData = async () => {
@@ -42,6 +58,14 @@ const Me: React.FC<MeProps> = ({ relayPool }) => {
        setLoading(true)
        setError(null)

+        // Seed from cache if available to avoid empty flash
+        const cached = getCachedMeData(activeAccount.pubkey)
+        if (cached) {
+          setHighlights(cached.highlights)
+          setBookmarks(cached.bookmarks)
+          setReadArticles(cached.readArticles)
+        }
+
        // Fetch highlights and read articles
        const [userHighlights, userReadArticles] = await Promise.all([
          fetchHighlights(relayPool, activeAccount.pubkey),
@@ -52,12 +76,19 @@ const Me: React.FC<MeProps> = ({ relayPool }) => {
        setReadArticles(userReadArticles)

        // Fetch bookmarks using callback pattern
+        let fetchedBookmarks: Bookmark[] = []
        try {
-          await fetchBookmarks(relayPool, activeAccount, setBookmarks)
+          await fetchBookmarks(relayPool, activeAccount, (newBookmarks) => {
+            fetchedBookmarks = newBookmarks
+            setBookmarks(newBookmarks)
+          })
        } catch (err) {
          console.warn('Failed to load bookmarks:', err)
          setBookmarks([])
        }
+
+        // Update cache with all fetched data
+        setCachedMeData(activeAccount.pubkey, userHighlights, fetchedBookmarks, userReadArticles)
      } catch (err) {
        console.error('Failed to load data:', err)
        setError('Failed to load data. Please try again.')
@@ -70,7 +101,14 @@ const Me: React.FC<MeProps> = ({ relayPool }) => {
  }, [relayPool, activeAccount])

  const handleHighlightDelete = (highlightId: string) => {
-    setHighlights(prev => prev.filter(h => h.id !== highlightId))
+    setHighlights(prev => {
+      const updated = prev.filter(h => h.id !== highlightId)
+      // Update cache when highlight is deleted
+      if (activeAccount) {
+        updateCachedHighlights(activeAccount.pubkey, updated)
+      }
+      return updated
+    })
  }

  const getPostUrl = (post: BlogPostPreview) => {
@@ -83,7 +121,51 @@ const Me: React.FC<MeProps> = ({ relayPool }) => {
    return `/a/${naddr}`
  }

-  if (loading) {
+  // Helper to check if a bookmark has either content or a URL (same logic as BookmarkList)
+  const hasContentOrUrl = (ib: IndividualBookmark) => {
+    const hasContent = ib.content && ib.content.trim().length > 0
+    
+    let hasUrl = false
+    if (ib.kind === 39701) {
+      const dTag = ib.tags?.find((t: string[]) => t[0] === 'd')?.[1]
+      hasUrl = !!dTag && dTag.trim().length > 0
+    } else {
+      const urls = extractUrlsFromContent(ib.content || '')
+      hasUrl = urls.length > 0
+    }
+    
+    if (ib.kind === 30023) return true
+    return hasContent || hasUrl
+  }
+
+  const handleSelectUrl = (url: string, bookmark?: { id: string; kind: number; tags: string[][]; pubkey: string }) => {
+    if (bookmark && bookmark.kind === 30023) {
+      // For kind:30023 articles, navigate to the article route
+      const dTag = bookmark.tags.find(t => t[0] === 'd')?.[1] || ''
+      if (dTag && bookmark.pubkey) {
+        const pointer = {
+          identifier: dTag,
+          kind: 30023,
+          pubkey: bookmark.pubkey,
+        }
+        const naddr = nip19.naddrEncode(pointer)
+        navigate(`/a/${naddr}`)
+      }
+    } else if (url) {
+      // For regular URLs, navigate to the reader route
+      navigate(`/r/${encodeURIComponent(url)}`)
+    }
+  }
+
+  // Merge and flatten all individual bookmarks (same logic as BookmarkList)
+  const allIndividualBookmarks = bookmarks.flatMap(b => b.individualBookmarks || [])
+    .filter(hasContentOrUrl)
+    .sort((a, b) => ((b.added_at || 0) - (a.added_at || 0)) || ((b.created_at || 0) - (a.created_at || 0)))
+
+  // Only show full loading screen if we don't have any data yet
+  const hasData = highlights.length > 0 || bookmarks.length > 0 || readArticles.length > 0
+  
+  if (loading && !hasData) {
    return (
      <div className="explore-container">
        <div className="explore-loading">
@@ -125,20 +207,53 @@ const Me: React.FC<MeProps> = ({ relayPool }) => {
        )

      case 'reading-list':
-        return bookmarks.length === 0 ? (
+        return allIndividualBookmarks.length === 0 ? (
          <div className="explore-error">
            <p>No bookmarks yet. Bookmark articles to see them here!</p>
          </div>
        ) : (
          <div className="bookmarks-list">
-            {bookmarks.map((bookmark) => (
-              <div key={bookmark.id} className="bookmark-item">
-                <a href={bookmark.url} target="_blank" rel="noopener noreferrer">
-                  <h3>{bookmark.title || 'Untitled'}</h3>
-                  {bookmark.content && <p>{bookmark.content.slice(0, 150)}...</p>}
-                </a>
-              </div>
-            ))}
+            <div className={`bookmarks-grid bookmarks-${viewMode}`}>
+              {allIndividualBookmarks.map((individualBookmark, index) => (
+                <BookmarkItem
+                  key={`${individualBookmark.id}-${index}`}
+                  bookmark={individualBookmark}
+                  index={index}
+                  viewMode={viewMode}
+                  onSelectUrl={handleSelectUrl}
+                />
+              ))}
+            </div>
+            <div className="view-mode-controls" style={{
+              display: 'flex',
+              justifyContent: 'center',
+              gap: '0.5rem',
+              padding: '1rem',
+              marginTop: '1rem',
+              borderTop: '1px solid var(--border-color)'
+            }}>
+              <IconButton
+                icon={faList}
+                onClick={() => setViewMode('compact')}
+                title="Compact list view"
+                ariaLabel="Compact list view"
+                variant={viewMode === 'compact' ? 'primary' : 'ghost'}
+              />
+              <IconButton
+                icon={faThLarge}
+                onClick={() => setViewMode('cards')}
+                title="Cards view"
+                ariaLabel="Cards view"
+                variant={viewMode === 'cards' ? 'primary' : 'ghost'}
+              />
+              <IconButton
+                icon={faImage}
+                onClick={() => setViewMode('large')}
+                title="Large preview view"
+                ariaLabel="Large preview view"
+                variant={viewMode === 'large' ? 'primary' : 'ghost'}
+              />
+            </div>
          </div>
        )

@@ -169,30 +284,39 @@ const Me: React.FC<MeProps> = ({ relayPool }) => {
      <div className="explore-header">
        {activeAccount && <AuthorCard authorPubkey={activeAccount.pubkey} />}
        
+        {loading && hasData && (
+          <div className="explore-loading" style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', padding: '0.5rem 0' }}>
+            <FontAwesomeIcon icon={faSpinner} spin />
+          </div>
+        )}
+        
        <div className="me-tabs">
          <button
            className={`me-tab ${activeTab === 'highlights' ? 'active' : ''}`}
            data-tab="highlights"
-            onClick={() => setActiveTab('highlights')}
+            onClick={() => navigate('/me/highlights')}
          >
            <FontAwesomeIcon icon={faHighlighter} />
-            Highlights ({highlights.length})
+            <span className="tab-label">Highlights</span>
+            <span className="tab-count">({highlights.length})</span>
          </button>
          <button
            className={`me-tab ${activeTab === 'reading-list' ? 'active' : ''}`}
            data-tab="reading-list"
-            onClick={() => setActiveTab('reading-list')}
+            onClick={() => navigate('/me/reading-list')}
          >
            <FontAwesomeIcon icon={faBookmark} />
-            Reading List ({bookmarks.length})
+            <span className="tab-label">Reading List</span>
+            <span className="tab-count">({allIndividualBookmarks.length})</span>
          </button>
          <button
            className={`me-tab ${activeTab === 'archive' ? 'active' : ''}`}
            data-tab="archive"
-            onClick={() => setActiveTab('archive')}
+            onClick={() => navigate('/me/archive')}
          >
            <FontAwesomeIcon icon={faBooks} />
-            Archive ({readArticles.length})
+            <span className="tab-label">Archive</span>
+            <span className="tab-count">({readArticles.length})</span>
          </button>
        </div>
      </div>
--- a/src/components/ReadingProgressIndicator.tsx
+++ b/src/components/ReadingProgressIndicator.tsx
@@ -0,0 +1,41 @@
+import React from 'react'
+
+interface ReadingProgressIndicatorProps {
+  progress: number // 0 to 100
+  isComplete?: boolean
+  showPercentage?: boolean
+  className?: string
+}
+
+export const ReadingProgressIndicator: React.FC<ReadingProgressIndicatorProps> = ({
+  progress,
+  isComplete = false,
+  showPercentage = true,
+  className = ''
+}) => {
+  const clampedProgress = Math.min(100, Math.max(0, progress))
+  
+  return (
+    <div className={`fixed bottom-0 left-0 right-0 z-[1102] bg-[rgba(26,26,26,0.85)] backdrop-blur-sm px-3 py-1 flex items-center gap-2 transition-all duration-300 ${className}`}>
+      <div className="flex-1 h-0.5 bg-white/10 rounded-full overflow-hidden relative">
+        <div 
+          className={`h-full rounded-full transition-all duration-300 relative ${
+            isComplete 
+              ? 'bg-green-500' 
+              : 'bg-indigo-500'
+          }`}
+          style={{ width: `${clampedProgress}%` }}
+        >
+          <div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/30 to-transparent animate-[shimmer_2s_infinite]" />
+        </div>
+      </div>
+      {showPercentage && (
+        <div className={`text-[0.625rem] font-normal min-w-[32px] text-right tabular-nums ${
+          isComplete ? 'text-green-500' : 'text-gray-500'
+        }`}>
+          {isComplete ? '✓' : `${clampedProgress}%`}
+        </div>
+      )}
+    </div>
+  )
+}
--- a/src/components/Settings.tsx
+++ b/src/components/Settings.tsx
@@ -58,7 +58,7 @@ const Settings: React.FC<SettingsProps> = ({ settings, onSave, onClose, relayPoo
    return migrated
  })
  const isInitialMount = useRef(true)
-  const saveTimeoutRef = useRef<number | null>(null)
+  const saveTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null)
  const isLocallyUpdating = useRef(false)
  
  // Poll for relay status updates
--- a/src/components/ThreePaneLayout.tsx
+++ b/src/components/ThreePaneLayout.tsx
@@ -98,11 +98,10 @@ const ThreePaneLayout: React.FC<ThreePaneLayoutProps> = (props) => {
  const mainPaneRef = useRef<HTMLDivElement>(null)
  
  // Detect scroll direction to hide/show mobile buttons
-  // On mobile, scroll happens in the main pane, not on window
+  // Now using window scroll (document scroll) instead of pane scroll
  const scrollDirection = useScrollDirection({ 
    threshold: 10, 
-    enabled: isMobile && !props.isSidebarOpen && props.isHighlightsCollapsed,
-    elementRef: mainPaneRef
+    enabled: isMobile && !props.isSidebarOpen && props.isHighlightsCollapsed
  })
  const showMobileButtons = scrollDirection !== 'down'

@@ -225,7 +224,15 @@ const ThreePaneLayout: React.FC<ThreePaneLayoutProps> = (props) => {
      {/* Mobile bookmark button - only show when viewing article */}
      {isMobile && !props.isSidebarOpen && props.isHighlightsCollapsed && (
        <button
-          className={`mobile-hamburger-btn ${showMobileButtons ? 'visible' : 'hidden'}`}
+          className={`fixed z-[900] bg-[#2a2a2a] border border-[#444] rounded-lg text-[#ddd] flex items-center justify-center transition-all duration-300 active:scale-95 md:hidden ${
+            showMobileButtons ? 'opacity-100 visible' : 'opacity-0 invisible pointer-events-none'
+          }`}
+          style={{
+            top: 'calc(1rem + env(safe-area-inset-top))',
+            left: 'calc(1rem + env(safe-area-inset-left))',
+            width: 'var(--min-touch-target)',
+            height: 'var(--min-touch-target)'
+          }}
          onClick={props.onToggleSidebar}
          aria-label="Open bookmarks"
          aria-expanded={props.isSidebarOpen}
@@ -237,14 +244,20 @@ const ThreePaneLayout: React.FC<ThreePaneLayoutProps> = (props) => {
      {/* Mobile highlights button - only show when viewing article */}
      {isMobile && !props.isSidebarOpen && props.isHighlightsCollapsed && (
        <button
-          className={`mobile-highlights-btn ${showMobileButtons ? 'visible' : 'hidden'}`}
-          onClick={props.onToggleHighlightsPanel}
-          aria-label="Open highlights"
-          aria-expanded={!props.isHighlightsCollapsed}
+          className={`fixed z-[900] border border-[#444] rounded-lg flex items-center justify-center transition-all duration-300 active:scale-95 md:hidden ${
+            showMobileButtons ? 'opacity-100 visible' : 'opacity-0 invisible pointer-events-none'
+          }`}
          style={{ 
+            top: 'calc(1rem + env(safe-area-inset-top))',
+            right: 'calc(1rem + env(safe-area-inset-right))',
+            width: 'var(--min-touch-target)',
+            height: 'var(--min-touch-target)',
            backgroundColor: props.settings.highlightColorMine || '#ffff00',
            color: '#000'
          }}
+          onClick={props.onToggleHighlightsPanel}
+          aria-label="Open highlights"
+          aria-expanded={!props.isHighlightsCollapsed}
        >
          <FontAwesomeIcon icon={faHighlighter} />
        </button>
@@ -253,7 +266,9 @@ const ThreePaneLayout: React.FC<ThreePaneLayoutProps> = (props) => {
      {/* Mobile backdrop */}
      {isMobile && (
        <div
-          className={`mobile-sidebar-backdrop ${(props.isSidebarOpen || !props.isHighlightsCollapsed) ? 'visible' : ''}`}
+          className={`fixed inset-0 bg-black/45 z-[999] transition-opacity duration-300 ${
+            (props.isSidebarOpen || !props.isHighlightsCollapsed) ? 'block opacity-100' : 'hidden opacity-0'
+          }`}
          onClick={handleBackdropClick}
          aria-hidden="true"
        />
--- a/src/hooks/useReadingPosition.ts
+++ b/src/hooks/useReadingPosition.ts
@@ -0,0 +1,73 @@
+import { useEffect, useRef, useState } from 'react'
+
+interface UseReadingPositionOptions {
+  enabled?: boolean
+  onPositionChange?: (position: number) => void
+  onReadingComplete?: () => void
+  readingCompleteThreshold?: number // Default 0.9 (90%)
+}
+
+export const useReadingPosition = ({
+  enabled = true,
+  onPositionChange,
+  onReadingComplete,
+  readingCompleteThreshold = 0.9
+}: UseReadingPositionOptions = {}) => {
+  const [position, setPosition] = useState(0)
+  const [isReadingComplete, setIsReadingComplete] = useState(false)
+  const hasTriggeredComplete = useRef(false)
+
+  useEffect(() => {
+    if (!enabled) return
+
+    const handleScroll = () => {
+      // Get the main content area (reader content)
+      const readerContent = document.querySelector('.reader-html, .reader-markdown')
+      if (!readerContent) return
+
+      const scrollTop = window.pageYOffset || document.documentElement.scrollTop
+      const windowHeight = window.innerHeight
+      const documentHeight = document.documentElement.scrollHeight
+      
+      // Calculate position based on how much of the content has been scrolled through
+      const scrollProgress = Math.min(scrollTop / (documentHeight - windowHeight), 1)
+      const clampedProgress = Math.max(0, Math.min(1, scrollProgress))
+      
+      setPosition(clampedProgress)
+      onPositionChange?.(clampedProgress)
+
+      // Check if reading is complete
+      if (clampedProgress >= readingCompleteThreshold && !hasTriggeredComplete.current) {
+        setIsReadingComplete(true)
+        hasTriggeredComplete.current = true
+        onReadingComplete?.()
+      }
+    }
+
+    // Initial calculation
+    handleScroll()
+
+    // Add scroll listener
+    window.addEventListener('scroll', handleScroll, { passive: true })
+    window.addEventListener('resize', handleScroll, { passive: true })
+
+    return () => {
+      window.removeEventListener('scroll', handleScroll)
+      window.removeEventListener('resize', handleScroll)
+    }
+  }, [enabled, onPositionChange, onReadingComplete, readingCompleteThreshold])
+
+  // Reset reading complete state when enabled changes
+  useEffect(() => {
+    if (!enabled) {
+      setIsReadingComplete(false)
+      hasTriggeredComplete.current = false
+    }
+  }, [enabled])
+
+  return {
+    position,
+    isReadingComplete,
+    progressPercentage: Math.round(position * 100)
+  }
+}
--- a/src/index.css
+++ b/src/index.css
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,6 +1,7 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
 import App from './App.tsx'
+import './styles/tailwind.css'
 import './index.css'

 // Register Service Worker for PWA functionality
--- a/src/services/meCache.ts
+++ b/src/services/meCache.ts
@@ -0,0 +1,54 @@
+import { Highlight } from '../types/highlights'
+import { Bookmark } from '../types/bookmarks'
+import { BlogPostPreview } from './exploreService'
+
+export interface MeCache {
+  highlights: Highlight[]
+  bookmarks: Bookmark[]
+  readArticles: BlogPostPreview[]
+  timestamp: number
+}
+
+const meCache = new Map<string, MeCache>() // key: pubkey
+
+export function getCachedMeData(pubkey: string): MeCache | null {
+  const entry = meCache.get(pubkey)
+  if (!entry) return null
+  return entry
+}
+
+export function setCachedMeData(
+  pubkey: string,
+  highlights: Highlight[],
+  bookmarks: Bookmark[],
+  readArticles: BlogPostPreview[]
+): void {
+  meCache.set(pubkey, {
+    highlights,
+    bookmarks,
+    readArticles,
+    timestamp: Date.now()
+  })
+}
+
+export function updateCachedHighlights(pubkey: string, highlights: Highlight[]): void {
+  const existing = meCache.get(pubkey)
+  if (existing) {
+    meCache.set(pubkey, { ...existing, highlights, timestamp: Date.now() })
+  }
+}
+
+export function updateCachedBookmarks(pubkey: string, bookmarks: Bookmark[]): void {
+  const existing = meCache.get(pubkey)
+  if (existing) {
+    meCache.set(pubkey, { ...existing, bookmarks, timestamp: Date.now() })
+  }
+}
+
+export function updateCachedReadArticles(pubkey: string, readArticles: BlogPostPreview[]): void {
+  const existing = meCache.get(pubkey)
+  if (existing) {
+    meCache.set(pubkey, { ...existing, readArticles, timestamp: Date.now() })
+  }
+}
+
--- a/src/services/youtubeMetaService.ts
+++ b/src/services/youtubeMetaService.ts
@@ -0,0 +1,77 @@
+export type Caption = { start: number; dur: number; text: string }
+export type YouTubeMeta = {
+  title: string
+  description?: string
+  captions: Caption[]
+  transcript?: string
+  lang: string
+  isAuto?: boolean
+  source: 'youtube'
+}
+
+type CachedMeta = {
+  data: YouTubeMeta
+  timestamp: number
+}
+
+const TTL_MS = 7 * 24 * 60 * 60 * 1000 // 7 days
+
+function cacheKey(videoId: string, lang: string) {
+  return `yt_meta_${videoId}_${lang}`
+}
+
+function load(videoId: string, lang: string): YouTubeMeta | null {
+  try {
+    const raw = localStorage.getItem(cacheKey(videoId, lang))
+    if (!raw) return null
+    const { data, timestamp } = JSON.parse(raw) as CachedMeta
+    if (Date.now() - timestamp > TTL_MS) {
+      localStorage.removeItem(cacheKey(videoId, lang))
+      return null
+    }
+    return data
+  } catch {
+    return null
+  }
+}
+
+function save(videoId: string, lang: string, data: YouTubeMeta) {
+  try {
+    const value: CachedMeta = { data, timestamp: Date.now() }
+    localStorage.setItem(cacheKey(videoId, lang), JSON.stringify(value))
+  } catch {
+    // ignore
+  }
+}
+
+export function extractYouTubeId(url: string): string | null {
+  try {
+    const u = new URL(url)
+    if (u.hostname === 'youtu.be') {
+      return u.pathname.slice(1)
+    }
+    if (u.searchParams.get('v')) return u.searchParams.get('v')
+    const parts = u.pathname.split('/').filter(Boolean)
+    // /shorts/:id or /embed/:id
+    if ((parts[0] === 'shorts' || parts[0] === 'embed') && parts[1]) return parts[1]
+    return null
+  } catch {
+    return null
+  }
+}
+
+export async function getYouTubeMeta(videoId: string, lang = 'en'): Promise<YouTubeMeta | null> {
+  const cached = load(videoId, lang)
+  if (cached) return cached
+  const res = await fetch(`/api/youtube-meta?videoId=${encodeURIComponent(videoId)}&lang=${encodeURIComponent(lang)}`, {
+    headers: {
+      'x-ui-locale': lang
+    }
+  })
+  if (!res.ok) return null
+  const data = (await res.json()) as YouTubeMeta
+  save(videoId, lang, data)
+  return data
+}
+
+
--- a/src/styles/base/global.css
+++ b/src/styles/base/global.css
@@ -1,68 +1,26 @@
-/* Global element styles and app container */
+/* Global element styles and app container (Tailwind-compatible) */
+
+/* Body - keep only app-specific overrides */
 body {
-  margin: 0;
-  min-width: 320px;
-  min-height: 100vh;
  overscroll-behavior: none;
  -webkit-overflow-scrolling: touch;
 }

-/* Use dynamic viewport height if supported */
-@supports (height: 100dvh) {
-  body {
-    min-height: 100dvh;
-  }
-}
-
 body.mobile-sidebar-open {
  overflow: hidden;
  position: fixed;
  width: 100%;
 }

-#root {
-  max-width: none;
-  margin: 0;
-  padding: 1rem;
-}
-
-@media (max-width: 768px) {
-  #root {
-    padding: 0;
-  }
-}
-
-.app {
-  text-align: center;
-  position: relative;
-}
-
-.app header {
-  margin-bottom: 2rem;
-}
-
-.app header h1 {
-  font-size: 2.5rem;
-  margin: 0;
-  color: #646cff;
-}
-
-.app header p {
-  margin: 0.5rem 0 0 0;
-  color: #888;
-}
-
-.loading {
-  text-align: center;
-  padding: 2rem;
-  color: #ccc;
-}
-
+/* App loading states */
 .loading {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
+  text-align: center;
+  padding: 2rem;
+  color: #ccc;
 }


--- a/src/styles/base/variables.css
+++ b/src/styles/base/variables.css
@@ -16,12 +16,20 @@
  
  --reading-font: 'Source Serif 4', serif;
  --reading-font-size: 18px;
+  
+  /* Highlight color variables (user-settable) */
+  --highlight-color-mine: #ffff00;
+  --highlight-color-friends: #f97316;
+  --highlight-color-nostrverse: #9333ea;
+  --highlight-color: #ffff00; /* Default highlight color */
+  
  /* Layout variables */
  --sidebar-width: 320px;
  --sidebar-collapsed-width: 64px;
  --highlights-width: 360px;
  --highlights-collapsed-width: 56px;
  --main-max-width: 900px;
+  --main-max-width-video: 1200px;
  --main-horizontal-padding: 1rem;
  
  /* Mobile breakpoints */
--- a/src/styles/components/cards.css
+++ b/src/styles/components/cards.css
@@ -19,13 +19,15 @@
  .bookmarks-grid.bookmarks-large { gap: 1rem; }
 }

-.individual-bookmark { background: transparent; padding: 1rem; border-radius: 8px; transition: all 0.2s ease; border: 1px solid transparent; word-wrap: break-word; overflow-wrap: break-word; word-break: break-word; overflow: hidden; }
-.individual-bookmark:hover { border-color: transparent; background: #2a2a2a; }
+.individual-bookmark { background: transparent; padding: 1rem; border-radius: 8px; transition: all 0.2s ease; border: 1px solid #2a2a2a; word-wrap: break-word; overflow-wrap: break-word; word-break: break-word; overflow: hidden; }
+.individual-bookmark:hover { border-color: #3a3a3a; background: #252525; }

 /* Compact view */
 .individual-bookmark.compact { padding: 0.5rem 0.5rem; background: transparent; border: none; border-bottom: 1px solid #2a2a2a; border-radius: 0; box-shadow: none; width: 100%; max-width: 100%; overflow: hidden; }
 .individual-bookmark.compact:hover { background: #252525; border-bottom-color: #333; transform: none; box-shadow: none; }
 .compact-row { display: flex; align-items: center; gap: 0.5rem; height: 28px; width: 100%; min-width: 0; overflow: hidden; }
+.compact-thumbnail { width: 24px; height: 24px; flex-shrink: 0; border-radius: 4px; overflow: hidden; background: #2a2a2a; display: flex; align-items: center; justify-content: center; }
+.compact-thumbnail img { width: 100%; height: 100%; object-fit: cover; }
 .compact-row.clickable { cursor: pointer; }
 .compact-row.clickable:active { opacity: 0.8; }
 .bookmark-type-compact { display: flex; align-items: center; gap: 0.25rem; color: #646cff; font-size: 0.85rem; flex-shrink: 0; }
@@ -48,13 +50,13 @@
 .bookmark-meta-minimal { font-size: 0.8rem; color: #888; }
 .author-link-minimal { color: #888; text-decoration: none; transition: color 0.2s ease; }
 .author-link-minimal:hover { color: #aaa; }
-.read-now-button-minimal { background: #28a745; color: white; border: none; padding: 0.5rem 1rem; border-radius: 6px; cursor: pointer; font-weight: 600; font-size: 0.85rem; transition: all 0.2s ease; white-space: nowrap; }
-.read-now-button-minimal:hover { background: #218838; }
+.read-now-button-minimal { background: #646cff; color: white; border: none; padding: 0.5rem 1rem; border-radius: 6px; cursor: pointer; font-weight: 600; font-size: 0.85rem; transition: all 0.2s ease; white-space: nowrap; }
+.read-now-button-minimal:hover { background: #535bf2; }
 .expand-toggle-urls { margin-top: 0.5rem; background: transparent; border: none; color: #646cff; cursor: pointer; font-size: 0.8rem; padding: 0.25rem 0; text-decoration: underline; }
 .expand-toggle-urls:hover { color: #8088ff; }

 /* Large preview view */
-.individual-bookmark.large { padding: 0; display: flex; flex-direction: column; overflow: hidden; }
+.individual-bookmark.large { padding: 0; display: flex; flex-direction: column; overflow: hidden; border: 1px solid #2a2a2a; }
 .large-preview-image { width: 100%; height: 180px; background: #1a1a1a; background-size: cover; background-position: center; background-repeat: no-repeat; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s ease; border-bottom: 1px solid #333; position: relative; }
 .large-preview-image:hover { opacity: 0.9; }
 .large-preview-image::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 60%, rgba(0,0,0,0.3) 100%); pointer-events: none; }
@@ -63,8 +65,8 @@
 .large-text { color: #ccc; font-size: 0.95rem; line-height: 1.6; margin-bottom: 1rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
 .large-footer { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; font-size: 0.8rem; color: #888; padding-top: 0.75rem; border-top: 1px solid #333; }
 .large-author { flex: 1; }
-.large-read-button { background: #28a745; color: white; border: none; padding: 0.5rem 1rem; border-radius: 6px; cursor: pointer; font-weight: 600; font-size: 0.85rem; transition: all 0.2s ease; display: flex; align-items: center; gap: 0.5rem; }
-.large-read-button:hover { background: #218838; }
+.large-read-button { background: #646cff; color: white; border: none; padding: 0.5rem 1rem; border-radius: 6px; cursor: pointer; font-weight: 600; font-size: 0.85rem; transition: all 0.2s ease; display: flex; align-items: center; gap: 0.5rem; }
+.large-read-button:hover { background: #535bf2; }

 /* Blog cards (Explore) */
 .explore-container { padding: 2rem; max-width: 1400px; margin: 0 auto; min-height: 100vh; }
@@ -77,9 +79,10 @@
 .explore-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 2rem; margin-top: 2rem; }
 .blog-post-card { background: #1a1a1a; border: 1px solid #333; border-radius: 12px; overflow: hidden; transition: all 0.3s ease; cursor: pointer; display: flex; flex-direction: column; height: 100%; }
 .blog-post-card:hover { border-color: #646cff; transform: translateY(-4px); box-shadow: 0 8px 24px rgba(100, 108, 255, 0.15); }
-.blog-post-card-image { width: 100%; height: 200px; overflow: hidden; background: #0f0f0f; }
+.blog-post-card-image { width: 100%; height: 200px; overflow: hidden; background: #0f0f0f; display: flex; align-items: center; justify-content: center; }
 .blog-post-card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; }
 .blog-post-card:hover .blog-post-card-image img { transform: scale(1.05); }
+.blog-post-image-placeholder { font-size: 3rem; color: #444; display: flex; align-items: center; justify-content: center; }
 .blog-post-card-content { padding: 1.5rem; display: flex; flex-direction: column; gap: 1rem; flex: 1; }
 .blog-post-card-title { font-size: 1.25rem; font-weight: 600; margin: 0; color: rgba(255, 255, 255, 0.95); line-height: 1.4; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
 .blog-post-card-summary { font-size: 0.875rem; color: rgba(255, 255, 255, 0.6); margin: 0; line-height: 1.6; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; flex: 1; }
--- a/src/styles/components/icon-button.css
+++ b/src/styles/components/icon-button.css
@@ -20,8 +20,8 @@
 .icon-button.primary { background: #646cff; color: white; border-color: #646cff; }
 .icon-button.primary:hover { filter: brightness(1.05); }

-.icon-button.success { background: #28a745; color: white; border-color: #28a745; }
-.icon-button.success:hover { filter: brightness(1.05); }
+.icon-button.success { background: #646cff; color: white; border-color: #646cff; }
+.icon-button.success:hover { filter: brightness(1.1); }

 .icon-button.ghost { background: #2a2a2a; }

--- a/src/styles/components/me.css
+++ b/src/styles/components/me.css
@@ -43,6 +43,12 @@
  border-bottom-color: var(--highlight-color-mine, #ffff00);
 }

+/* Reading List tab uses blue color to match bookmarks icon */
+.me-tab[data-tab="reading-list"].active {
+  color: #646cff;
+  border-bottom-color: #646cff;
+}
+
 .me-tab svg {
  font-size: 1rem;
 }
@@ -63,6 +69,24 @@
  display: flex;
  flex-direction: column;
  gap: 1rem;
+  text-align: left; /* Override center alignment from .app */
+}
+
+/* Ensure all reading list elements are left-aligned */
+.bookmarks-list .individual-bookmark,
+.bookmarks-list .individual-bookmark * {
+  text-align: left;
+}
+
+/* Enhanced border styling for reading list cards */
+.bookmarks-list .individual-bookmark {
+  border: 1px solid #444 !important;
+  background: #1a1a1a !important;
+}
+
+.bookmarks-list .individual-bookmark:hover {
+  border-color: #555 !important;
+  background: #252525 !important;
 }

 .bookmark-item {
@@ -100,7 +124,7 @@
@media (max-width: 768px) {
  /* Add top breathing room so floating sidebar buttons don't overlap header */
  .explore-container .explore-header { 
-    margin-top: 2.25rem; 
+    margin-top: 3.5rem; 
  }

  .me-tabs {
@@ -119,6 +143,11 @@
    margin-right: 0.25rem;
  }

+  /* Hide counts on mobile to save space */
+  .me-tab .tab-count {
+    display: none;
+  }
+
  .me-tab-content {
    padding: 1.25rem 0.75rem;
  }
--- a/src/styles/components/profile.css
+++ b/src/styles/components/profile.css
@@ -9,8 +9,17 @@
 .author-card-bio { font-size: 0.9rem; color: #999; line-height: 1.5; margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; text-align: left; }

@media (max-width: 768px) {
-  .author-card-container { padding: 1.5rem 1rem; }
-  .author-card { padding: 1rem; }
+  .author-card-container { 
+    padding: 1.5rem 1rem; 
+    margin: 0 1rem; /* Add horizontal margin to prevent bleeding */
+    max-width: calc(100vw - 2rem); /* Ensure it doesn't exceed screen width */
+    box-sizing: border-box;
+  }
+  .author-card { 
+    padding: 1rem; 
+    max-width: 100%; /* Ensure card doesn't exceed container */
+    box-sizing: border-box;
+  }
  .author-card-avatar { width: 48px; height: 48px; }
  .author-card-avatar svg { font-size: 2rem; }
  .author-card-name { font-size: 0.95rem; }
--- a/src/styles/components/reader.css
+++ b/src/styles/components/reader.css
@@ -1,5 +1,26 @@
 /* Reader view */
-.reader { background: #1a1a1a; border: 1px solid #333; border-radius: 8px; padding: 0.75rem; text-align: left; overflow: hidden; contain: layout style; }
+.reader { 
+  background: #1a1a1a; 
+  border: 1px solid #333; 
+  border-radius: 8px; 
+  padding: 0.75rem; 
+  text-align: left; 
+  overflow: hidden; 
+  max-width: 900px;
+  margin: 0 auto;
+  padding-bottom: 2rem; /* Add space for progress indicator */
+}
+
+/* Video container - responsive wrapper following react-player docs */
+.reader-video { 
+  position: relative;
+  width: 80vw;  /* 80% of viewport width */
+  min-width: 400px;  /* Minimum width */
+  max-width: 1000px;   /* Maximum width */
+  aspect-ratio: 16/9;
+  margin: 0 -0.75rem 1rem -0.75rem; /* Negative margins to counteract reader padding */
+  background: #000;
+}
 .reader.empty { color: #888; }
 .loading-spinner { display: flex; align-items: center; gap: 0.5rem; color: #888; }
 .loading-spinner svg { font-size: 1.2rem; }
@@ -26,17 +47,42 @@
 .reader-html p, .reader-html div, .reader-html span, .reader-html li, .reader-html td, .reader-html th { font-size: 1em !important; }
 .reader-markdown a { color: #8ab4f8; text-decoration: none; }
 .reader-markdown a:hover { text-decoration: underline; }
-.reader-markdown pre, .reader-markdown code { background: #111; border: 1px solid #333; border-radius: 6px; }
-.reader-markdown pre { padding: 0.75rem; overflow: auto; }
-.reader-markdown code { padding: 0.1rem 0.3rem; }
+.reader-markdown code { background: #1e1e1e; border: 1px solid #333; border-radius: 4px; padding: 0.15rem 0.4rem; font-size: 0.9em; font-family: 'Monaco', 'Menlo', 'Consolas', 'Courier New', monospace; }
+.reader-markdown pre { background: #1e1e1e; border: 1px solid #333; border-radius: 8px; padding: 1rem; overflow-x: auto; margin: 1rem 0; line-height: 1.5; font-family: 'Monaco', 'Menlo', 'Consolas', 'Courier New', monospace; }
+.reader-markdown pre code { background: transparent; border: none; padding: 0; font-size: 0.9em; display: block; }
+/* Prism.js enhancements */
+.reader-markdown pre[class*="language-"] { background: #1e1e1e; border: 1px solid #333; }
+.reader-markdown code[class*="language-"] { background: transparent; text-shadow: none; }
+.reader-html pre { background: #1e1e1e; border: 1px solid #333; border-radius: 8px; padding: 1rem; overflow-x: auto; margin: 1rem 0; font-family: 'Monaco', 'Menlo', 'Consolas', 'Courier New', monospace; }
+.reader-html code { background: #1e1e1e; border: 1px solid #333; border-radius: 4px; padding: 0.15rem 0.4rem; font-size: 0.9em; font-family: 'Monaco', 'Menlo', 'Consolas', 'Courier New', monospace; }
+.reader-html pre code { background: transparent; border: none; padding: 0; display: block; }
+/* Article menu */
+.article-menu-container { display: flex; justify-content: flex-end; padding: 1.5rem 0 0.5rem; margin-top: 2rem; }
+.article-menu-wrapper { position: relative; }
+.article-menu-btn { background: none; border: none; color: #888; cursor: pointer; padding: 0.5rem 0.75rem; font-size: 0.875rem; display: flex; align-items: center; gap: 0.5rem; transition: all 0.2s ease; border-radius: 6px; }
+.article-menu-btn:hover { color: #646cff; background: rgba(100, 108, 255, 0.1); }
+.article-menu { position: absolute; right: 0; top: calc(100% + 4px); background: #2a2a2a; border: 1px solid #444; border-radius: 6px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); z-index: 1000; min-width: 180px; overflow: hidden; }
+.article-menu-item { width: 100%; background: none; border: none; color: #ddd; padding: 0.75rem 1rem; font-size: 0.875rem; display: flex; align-items: center; gap: 0.75rem; cursor: pointer; transition: all 0.15s ease; text-align: left; white-space: nowrap; }
+.article-menu-item:hover { background: rgba(100, 108, 255, 0.15); color: #fff; }
+.article-menu-item svg { font-size: 0.875rem; flex-shrink: 0; }
+
 /* Mark as Read button */
-.mark-as-read-container { display: flex; justify-content: center; align-items: center; padding: 2rem 1rem; margin-top: 2rem; border-top: 1px solid #333; }
+.mark-as-read-container { display: flex; justify-content: center; align-items: center; padding: 2rem 1rem; margin-top: 1rem; }
 .mark-as-read-btn { display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.5rem; background: #2a2a2a; color: #ddd; border: 1px solid #444; border-radius: 8px; font-size: 1rem; font-weight: 500; cursor: pointer; transition: all 0.2s ease; min-width: 160px; justify-content: center; }
 .mark-as-read-btn:hover:not(:disabled) { background: #333; border-color: #555; transform: translateY(-1px); }
 .mark-as-read-btn:active:not(:disabled) { transform: translateY(0); }
 .mark-as-read-btn:disabled { opacity: 0.6; cursor: not-allowed; }
 .mark-as-read-btn svg { font-size: 1.1rem; }
@media (max-width: 768px) {
+  .reader {
+    max-width: 100%;
+    width: 100%;
+    margin: 0;
+    padding: 0.5rem;
+    border-radius: 0;
+    border-left: none;
+    border-right: none;
+  }
  .mark-as-read-container { padding: 1.5rem 1rem; }
  .mark-as-read-btn { width: 100%; max-width: 300px; }
 }
@@ -66,4 +112,6 @@
  .reader-header-overlay .reader-title { font-size: 1.5rem; line-height: 1.3; }
 }

+/* Reading Progress Indicator - now using Tailwind utilities in component */
+

--- a/src/styles/layout/app.css
+++ b/src/styles/layout/app.css
@@ -18,52 +18,69 @@

 .two-pane.sidebar-collapsed { grid-template-columns: 60px 1fr; }

-/* Three-pane layout */
+/* Three-pane layout - document scroll, sticky sidebars */
 .three-pane {
  display: grid;
  grid-template-columns: var(--sidebar-width) 1fr var(--highlights-width);
  column-gap: 0;
-  height: calc(100vh - 2rem);
  transition: grid-template-columns 0.3s ease;
  position: relative;
-}
-
-@supports (height: 100dvh) {
-  .three-pane { height: calc(100dvh - 2rem); }
+  min-height: 100vh;
+  height: auto !important;
+  max-height: none !important;
+  overflow: visible !important;
 }

 .three-pane.sidebar-collapsed { grid-template-columns: var(--sidebar-collapsed-width) 1fr var(--highlights-width); }
 .three-pane.highlights-collapsed { grid-template-columns: var(--sidebar-width) 1fr var(--highlights-collapsed-width); }
 .three-pane.sidebar-collapsed.highlights-collapsed { grid-template-columns: var(--sidebar-collapsed-width) 1fr var(--highlights-collapsed-width); }

-/* Mobile three-pane layout */
-@media (max-width: 768px) {
-  .three-pane {
-    grid-template-columns: 1fr;
-    grid-template-rows: 1fr;
-    height: 100vh;
-    height: 100dvh;
+/* Desktop: sticky sidebars, document scroll */
+@media (min-width: 769px) {
+  .pane.sidebar {
+    position: sticky;
+    top: 1rem;
+    max-height: calc(100vh - 2rem);
+    overflow-y: auto;
+    align-self: start;
+  }
+  
+  .pane.main {
+    margin: 0 auto;
+    padding: 0 var(--main-horizontal-padding);
+    min-height: 100vh;
+    overflow: visible !important;
+    height: auto !important;
+  }
+  
+  .pane.highlights {
+    position: sticky;
+    top: 1rem;
+    max-height: calc(100vh - 2rem);
+    overflow-y: auto;
+    align-self: start;
  }
-  .three-pane.sidebar-collapsed,
-  .three-pane.highlights-collapsed,
-  .three-pane.sidebar-collapsed.highlights-collapsed { grid-template-columns: 1fr; }
-}
-
-.pane.sidebar { overflow-y: auto; height: 100%; }
-.pane.main {
-  overflow-y: auto;
-  height: 100%;
-  max-width: var(--main-max-width);
-  margin: 0 auto;
-  padding: 0 var(--main-horizontal-padding);
-  overflow-x: hidden;
-  contain: layout style;
 }

 /* Remove padding when sidebar is collapsed for zero gap */
 .three-pane.sidebar-collapsed .pane.main { padding-left: 0; }
 .three-pane.sidebar-collapsed.highlights-collapsed .pane.main { padding-left: 0; }
-.pane.highlights { overflow-y: auto; height: 100%; }
+
+/* Mobile three-pane layout */
+@media (max-width: 768px) {
+  .three-pane {
+    grid-template-columns: 1fr;
+    grid-template-rows: auto;
+  }
+  .three-pane.sidebar-collapsed,
+  .three-pane.highlights-collapsed,
+  .three-pane.sidebar-collapsed.highlights-collapsed { grid-template-columns: 1fr; }
+  
+  .pane.main {
+    margin: 0 auto;
+    padding: 0;
+  }
+}

 /* Ensure panes are stacked in the correct order on desktop */
@media (min-width: 769px) {
@@ -103,43 +120,17 @@
  /* Highlights sidebar from right */
  .pane.highlights { right: 0; transform: translateX(100%); }
  .pane.highlights.mobile-open { transform: translateX(0); box-shadow: -4px 0 12px rgba(0, 0, 0, 0.5); }
-  .pane.main { grid-column: 1; grid-row: 1; padding: 0.5rem; max-width: 100%; transition: opacity 0.2s ease; }
+  .pane.main { 
+    grid-column: 1; 
+    grid-row: 1; 
+    padding: 0; 
+    max-width: 100%; 
+    width: 100%;
+    transition: opacity 0.2s ease;
+  }
  /* Hide main content when sidepanes are open on mobile */
  .three-pane .pane.main.mobile-hidden { opacity: 0; pointer-events: none; }
-  .mobile-sidebar-backdrop {
-    display: none;
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background: rgba(0, 0, 0, 0.45);
-    z-index: 999; /* Below sidepanes */
-    opacity: 0;
-    transition: opacity 0.3s ease;
-  }
-  .mobile-sidebar-backdrop.visible { display: block; opacity: 1; }
-  .mobile-highlights-btn {
-    display: none;
-    position: fixed;
-    top: calc(1rem + env(safe-area-inset-top));
-    right: calc(1rem + env(safe-area-inset-right));
-    z-index: 900;
-    background: #2a2a2a;
-    border: 1px solid #444;
-    border-radius: 8px;
-    color: #ddd;
-    width: var(--min-touch-target);
-    height: var(--min-touch-target);
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
-    transition: transform 0.2s ease, opacity 0.3s ease, visibility 0.3s ease;
-  }
-  .mobile-highlights-btn.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
-  .mobile-highlights-btn.visible { opacity: 1; visibility: visible; }
-  @media (max-width: 768px) { .mobile-highlights-btn { display: flex; } }
+  /* Mobile buttons and backdrop now use Tailwind utilities in component */
 }


--- a/src/styles/layout/sidebar.css
+++ b/src/styles/layout/sidebar.css
@@ -48,46 +48,13 @@
  margin-left: auto;
 }

-.mobile-hamburger-btn {
-  display: none;
-  position: fixed;
-  top: calc(1rem + env(safe-area-inset-top));
-  left: calc(1rem + env(safe-area-inset-left));
-  z-index: 900;
-  background: #2a2a2a;
-  border: 1px solid #444;
-  border-radius: 8px;
-  color: #ddd;
-  width: var(--min-touch-target);
-  height: var(--min-touch-target);
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
-  transition: transform 0.2s ease, opacity 0.3s ease, visibility 0.3s ease;
-}
-
-.mobile-hamburger-btn.hidden {
-  opacity: 0;
-  visibility: hidden;
-  pointer-events: none;
-}
-
-.mobile-hamburger-btn.visible {
-  opacity: 1;
-  visibility: visible;
-}
-
-.mobile-hamburger-btn:active {
-  transform: scale(0.95);
-}
+/* Mobile hamburger button now uses Tailwind utilities in ThreePaneLayout */

 .mobile-close-btn {
  display: none;
 }

@media (max-width: 768px) {
-  .mobile-hamburger-btn { display: flex; }
  .sidebar-header-bar .toggle-sidebar-btn { display: none; }
  .mobile-close-btn { display: flex; }
 }
--- a/src/styles/tailwind.css
+++ b/src/styles/tailwind.css
@@ -0,0 +1,7 @@
+@import "tailwindcss";
+
+@keyframes shimmer {
+  0% { transform: translateX(-100%); }
+  100% { transform: translateX(100%); }
+}
+
--- a/src/styles/utils/legacy.css
+++ b/src/styles/utils/legacy.css
@@ -0,0 +1,184 @@
+/* Legacy styles for bookmark debugging and nostr content parsing */
+
+.user-info {
+  margin: 0.5rem 0 0 0;
+  color: #888;
+  font-size: 0.9rem;
+  font-family: monospace;
+}
+
+.bookmark-count {
+  color: #666;
+  font-size: 0.9rem;
+  margin: 0.5rem 0;
+}
+
+.event-link {
+  color: #8ab4f8;
+  text-decoration: none;
+  font-weight: 500;
+}
+
+.event-link:hover {
+  text-decoration: underline;
+}
+
+.bookmark-urls {
+  margin: 0.75rem 0;
+}
+
+.bookmark-url {
+  display: block;
+  margin: 0.25rem 0;
+  color: #007bff;
+  text-decoration: none;
+  word-break: break-all;
+  background: none;
+  border: none;
+  padding: 0;
+  font: inherit;
+  cursor: pointer;
+  text-align: left;
+  width: 100%;
+}
+
+.bookmark-url:hover {
+  text-decoration: underline;
+}
+
+.url-row {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.read-inline-btn {
+  background: #28a745;
+  color: white;
+  border: none;
+  padding: 0.25rem 0.5rem;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.read-inline-btn:hover {
+  background: #218838;
+}
+
+.bookmark-events {
+  margin: 1rem 0;
+}
+
+.bookmark-events h4 {
+  margin: 0 0 0.5rem 0;
+  font-size: 0.9rem;
+  color: #666;
+}
+
+.event-ids {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
+.event-id {
+  background: #f5f5f5;
+  padding: 0.25rem 0.5rem;
+  border-radius: 4px;
+  font-family: monospace;
+  font-size: 0.8rem;
+  color: #666;
+}
+
+.more-events {
+  color: #999;
+  font-style: italic;
+  font-size: 0.8rem;
+}
+
+/* Nostr content parsing styles */
+.parsed-content,
+.nostr-mention,
+.nostr-link,
+.nostr-uri-link {
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  word-break: break-word;
+}
+
+.parsed-content {
+  margin: 1rem 0;
+  line-height: 1.6;
+}
+
+.nostr-mention,
+.nostr-uri-link {
+  color: #007bff;
+  text-decoration: none;
+  font-family: monospace;
+  background: #f8f9fa;
+  padding: 0.2rem 0.4rem;
+  border-radius: 3px;
+  font-size: 0.9rem;
+}
+
+.nostr-uri-link {
+  font-size: 0.9em;
+  border-radius: 4px;
+}
+
+.nostr-mention:hover,
+.nostr-uri-link:hover {
+  background: #e9ecef;
+  text-decoration: underline;
+}
+
+.nostr-link {
+  color: #007bff;
+  text-decoration: none;
+}
+
+.nostr-link:hover {
+  text-decoration: underline;
+}
+
+.logout-button {
+  background: #dc3545;
+  color: white;
+  border: none;
+  padding: 0.5rem 1rem;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: background-color 0.2s;
+}
+
+.logout-button:hover {
+  background: #c82333;
+}
+
+/* Common state styles */
+.loading {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  padding: 2rem;
+  color: #ccc;
+}
+
+.empty-state {
+  text-align: center;
+  padding: 3rem;
+  color: #888;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.empty-state p {
+  margin: 0.5rem 0;
+}
+
--- a/src/utils/helpers.ts
+++ b/src/utils/helpers.ts
@@ -10,34 +10,39 @@ export type UrlType = 'video' | 'image' | 'youtube' | 'article'

 export interface UrlClassification {
  type: UrlType
-  buttonText: string
 }

 export const classifyUrl = (url: string | undefined): UrlClassification => {
  if (!url) {
-    return { type: 'article', buttonText: 'READ NOW' }
+    return { type: 'article' }
  }
  const urlLower = url.toLowerCase()
  
  // Check for YouTube
  if (urlLower.includes('youtube.com') || urlLower.includes('youtu.be')) {
-    return { type: 'youtube', buttonText: 'WATCH NOW' }
+    return { type: 'youtube' }
+  }
+  
+  // Check for popular video hosts
+  const videoHosts = ['vimeo.com', 'dailymotion.com', 'dai.ly', 'video.twimg.com']
+  if (videoHosts.some(host => urlLower.includes(host))) {
+    return { type: 'video' }
  }
  
  // Check for video extensions
  const videoExtensions = ['.mp4', '.webm', '.ogg', '.mov', '.avi', '.mkv', '.m4v']
  if (videoExtensions.some(ext => urlLower.includes(ext))) {
-    return { type: 'video', buttonText: 'WATCH NOW' }
+    return { type: 'video' }
  }
  
  // Check for image extensions
  const imageExtensions = ['.jpg', '.jpeg', '.png', '.gif', '.webp', '.svg', '.bmp', '.ico']
  if (imageExtensions.some(ext => urlLower.includes(ext))) {
-    return { type: 'image', buttonText: 'VIEW NOW' }
+    return { type: 'image' }
  }
  
  // Default to article
-  return { type: 'article', buttonText: 'READ NOW' }
+  return { type: 'article' }
 }

 /**
--- a/src/utils/videoHelpers.ts
+++ b/src/utils/videoHelpers.ts
@@ -0,0 +1,36 @@
+/**
+ * Build native app deep link URL for video platforms
+ * Returns null if the platform doesn't have a known native app URL scheme
+ */
+export function buildNativeVideoUrl(url: string): string | null {
+  try {
+    const u = new URL(url)
+    const host = u.hostname
+    
+    if (host.includes('youtube.com')) {
+      const id = u.searchParams.get('v')
+      return id ? `youtube://watch?v=${id}` : `youtube://${u.pathname}${u.search}`
+    }
+    
+    if (host === 'youtu.be') {
+      const id = u.pathname.replace('/', '')
+      return id ? `youtube://watch?v=${id}` : 'youtube://'
+    }
+    
+    if (host.includes('vimeo.com')) {
+      const id = u.pathname.split('/').filter(Boolean)[0]
+      return id ? `vimeo://app.vimeo.com/videos/${id}` : 'vimeo://'
+    }
+    
+    if (host.includes('dailymotion.com') || host === 'dai.ly') {
+      const parts = u.pathname.split('/').filter(Boolean)
+      const id = host === 'dai.ly' ? parts[0] : (parts[1] || '')
+      return id ? `dailymotion://video/${id}` : 'dailymotion://'
+    }
+    
+    return null
+  } catch {
+    return null
+  }
+}
+
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -0,0 +1,19 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    './index.html',
+    './src/**/*.{ts,tsx}',
+  ],
+  theme: {
+    extend: {
+      keyframes: {
+        shimmer: {
+          '0%': { transform: 'translateX(-100%)' },
+          '100%': { transform: 'translateX(100%)' },
+        },
+      },
+    },
+  },
+  plugins: [],
+}
+