docs: remove temporary PWA launch checklist and implementation summary

docs(pwa): update implementation summary to reflect final icons and next steps
chore(lint): fix service worker typings and satisfy ESLint for worker globals
2026-02-16 12:34:41 +01:00 · 2025-10-12 07:18:20 +01:00 · 2025-10-12 07:18:02 +01:00 · 2025-10-12 07:15:52 +01:00 · 2025-10-11 21:01:27 +01:00 · 2025-10-11 20:58:56 +01:00
51 changed files with 7116 additions and 195 deletions
--- a/.cursor/rules/mobile-first-ui-ux.mdc
+++ b/.cursor/rules/mobile-first-ui-ux.mdc
@@ -0,0 +1,6 @@
+---
+description: anything related to UI/UX
+alwaysApply: false
+---
+
+This is a mobile-first application. All UI elements should be designed with that in mind. The application should work well on small screens, including older smartphones. The UX should be immaculate on mobile, even when in flight mode. (We use local caches and local relays, so that app works offline too.)
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,126 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).

+## [Unreleased]
+
+## [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)
+  - Creates kind:17 reactions for external websites (`/r/` paths)
+  - Button shows loading state while publishing reaction
+  - Only visible when user is logged in
+- Highlight deletion with confirmation dialog (NIP-09)
+  - Small delete button (trash icon) on highlight items
+  - Only visible for user's own highlights
+  - Confirmation dialog prevents accidental deletions
+  - Styled to match relay indicator (subtle, same size)
+  - Removes highlights from UI immediately after deletion request
+- `/me` page showing user's recent highlights
+  - Accessible by clicking profile picture in bookmark sidebar
+  - Displays all highlights created by the logged-in user
+  - Uses same rendering as Settings and Explore pages
+  - Includes highlight count in header
+- Confirmation dialog component
+  - Reusable modal with danger/warning/info variants
+  - Backdrop blur effect
+  - Mobile-responsive design
+  - 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
+  - Reduces screen clutter on mobile while keeping info accessible
+  - Smooth transition between compact and expanded states
+  - Desktop view remains unchanged (always shows full details)
+
+## [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
+  - Automatically fetches and displays article titles for `naddr` references
+  - Falls back to identifier when title fetch fails
+- Auto-hide mobile UI buttons on scroll down
+  - Floating bookmark/highlights buttons hide when scrolling down
+  - Buttons reappear when scrolling up for distraction-free reading
+  - Smooth opacity transitions for better UX
+- Scroll direction detection hook (`useScrollDirection`)
+  - Supports both window and element-based scroll detection
+  - 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
+  - Complements existing sidebar auto-close for bookmarks
+- Markdown processing now async to support article title resolution
+- 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
+- All ESLint warnings and TypeScript type errors resolved
+  - Added react-hooks plugin to ESLint configuration
+  - Fixed exhaustive-deps warnings in components
+  - Added block scoping to switch case statements
+  - Corrected type references for nostr-tools decode result
+
+## [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
+- Optimized reader header overlay padding and title sizing on mobile
+
+## [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
+- Touch-optimized UI with 44x44px minimum touch targets
+- Safe area inset support for notched devices
+- Mobile hamburger menu and backdrop
+- Focus trap in mobile sidebar with ESC key support
+- Body scroll locking when mobile sidebar is open
+- Mobile-optimized modals (full-screen sheet style)
+- Mobile-optimized toast notifications (bottom position)
+- Dynamic viewport height support (100dvh)
+- 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
+- Hover effects disabled on touch devices
+- 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
+- Add flex properties to mobile bookmark containers for proper filling
+- Force bookmarks pane expanded on mobile and ensure highlights pane sits above content on desktop
+- Reduce mobile backdrop opacity and ensure sidepanes appear above it
+- Replace any type with proper bookmark interface for linter compliance
+
+## [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
@@ -538,6 +658,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Optimize relay usage following applesauce-relay best practices
 - Use applesauce-react event models for better profile handling

+[0.4.0]: https://github.com/dergigi/boris/compare/v0.3.8...v0.4.0
+[0.3.8]: https://github.com/dergigi/boris/compare/v0.3.7...v0.3.8
+[0.3.7]: https://github.com/dergigi/boris/compare/v0.3.6...v0.3.7
 [0.3.6]: https://github.com/dergigi/boris/compare/v0.3.5...v0.3.6
 [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
--- a/MOBILE_IMPLEMENTATION.md
+++ b/MOBILE_IMPLEMENTATION.md
@@ -0,0 +1,156 @@
+# Mobile Implementation Summary
+
+## Overview
+Boris is now mobile-friendly! The app now works seamlessly on mobile devices with a responsive design that includes:
+- Auto-collapsing sidebar that opens as an overlay drawer on small screens
+- Touch-optimized UI with proper touch target sizes (44x44px minimum)
+- Safe area insets for notched devices (iPhone X+, etc.)
+- Focus trap and keyboard navigation in the mobile sidebar
+- Mobile-optimized modals, toasts, and other UI elements
+
+## Changes Made
+
+### 1. Viewport & Base Setup
+**File: `index.html`**
+- Updated viewport meta tag to include `viewport-fit=cover` for proper safe area handling
+
+### 2. Media Query Hooks
+**File: `src/hooks/useMediaQuery.ts` (NEW)**
+- `useMediaQuery(query)` - Generic hook for any media query
+- `useIsMobile()` - Detects mobile viewport (≤768px)
+- `useIsTablet()` - Detects tablet viewport (≤1024px)
+- `useIsCoarsePointer()` - Detects touch devices
+
+### 3. Mobile CSS Styles
+**File: `src/index.css`**
+- Added CSS custom properties for mobile breakpoints and safe areas
+- Mobile-specific three-pane layout that stacks into single column
+- Overlay sidebar with backdrop and transitions
+- Touch target improvements (44x44px minimum)
+- Disabled hover effects on touch devices
+- Mobile-optimized modals (full-screen sheet style)
+- Mobile-optimized toasts (bottom position with safe area)
+- Dynamic viewport height support (`100dvh`)
+- Overscroll behavior and body scroll locking
+
+### 4. Sidebar State Management
+**File: `src/hooks/useBookmarksUI.ts`**
+- Added `isMobile` state from media query
+- Added `isSidebarOpen` state for mobile overlay
+- Added `toggleSidebar()` function
+- Auto-collapse logic based on `autoCollapseSidebarOnMobile` setting
+- Mobile sidebar defaults to closed, desktop defaults to open
+
+### 5. Three-Pane Layout Mobile Support
+**File: `src/components/ThreePaneLayout.tsx`**
+- Mobile hamburger button (visible only on mobile)
+- Mobile backdrop for closing sidebar
+- Body scroll locking when sidebar is open
+- ESC key handler to close sidebar
+- Focus trap in sidebar (Tab navigation stays within sidebar)
+- Focus restoration when closing sidebar
+- Accessibility attributes (`aria-hidden`, `aria-expanded`, etc.)
+
+### 6. Sidebar Header Mobile Controls
+**File: `src/components/SidebarHeader.tsx`**
+- Close button (X) visible on mobile instead of collapse chevron
+- Hamburger button hidden in header (shown in layout instead)
+
+### 7. Bookmark List Mobile Props
+**File: `src/components/BookmarkList.tsx`**
+- Added `isMobile` prop support
+- Passes mobile state to SidebarHeader
+
+### 8. Main Bookmarks Component
+**File: `src/components/Bookmarks.tsx`**
+- Uses mobile state from `useBookmarksUI`
+- Auto-closes sidebar when selecting bookmark on mobile
+- Closes sidebar when opening settings on mobile
+- Proper desktop/mobile toggle behavior
+
+### 9. Icon Button Enhancement
+**File: `src/components/IconButton.tsx`**
+- Added optional `className` prop for additional styling
+
+### 10. Mobile Settings
+**File: `src/services/settingsService.ts`**
+- Added `autoCollapseSidebarOnMobile?: boolean` setting (default: true)
+
+**File: `src/components/Settings/StartupPreferencesSettings.tsx`**
+- Added UI toggle for "Auto-collapse sidebar on small screens"
+
+## Accessibility Features
+- Focus trap in mobile sidebar (Tab key navigation stays within drawer)
+- ESC key closes mobile sidebar
+- Backdrop click closes mobile sidebar
+- Proper ARIA attributes (`aria-hidden`, `aria-expanded`, `aria-controls`)
+- Touch target minimum size enforcement (44x44px)
+- Focus restoration when closing sidebar
+
+## Mobile Behaviors
+1. **Sidebar**: Slides in from left as overlay drawer with backdrop
+2. **Hamburger Menu**: Fixed position top-left when sidebar closed
+3. **Selecting Content**: Auto-closes sidebar on mobile
+4. **Opening Settings**: Auto-closes sidebar on mobile
+5. **Highlights Panel**: Hidden on mobile (content takes full width)
+6. **Modals**: Full-screen sheet style from bottom
+7. **Toasts**: Bottom position with safe area padding
+
+## Responsive Breakpoints
+- **Mobile**: ≤768px (sidebar overlay, single column)
+- **Tablet**: ≤1024px (defined but not actively used yet)
+- **Desktop**: >768px (three-pane layout as before)
+
+## Browser Support
+- Modern browsers with CSS Grid support
+- iOS Safari (including safe area insets)
+- Chrome for Android
+- Firefox Mobile
+- Safari on iPadOS
+
+## Safe Area Support
+The app respects device safe areas (notches, home indicators) through CSS environment variables:
+- `env(safe-area-inset-top)`
+- `env(safe-area-inset-bottom)`
+- `env(safe-area-inset-left)`
+- `env(safe-area-inset-right)`
+
+## Future Enhancements
+Potential improvements for future iterations:
+- Swipe gesture to open/close sidebar
+- Pull-to-refresh on mobile
+- Bottom sheet for highlights panel on mobile
+- Optimized font sizes for mobile reading
+- Mobile-specific view mode (perhaps auto-switch to compact on mobile)
+- Haptic feedback on interactions (iOS/Android)
+- Share sheet integration
+- Install prompt for PWA
+
+## Testing Checklist
+- [x] Sidebar opens/closes on mobile
+- [x] Hamburger button visible on mobile
+- [x] Backdrop closes sidebar
+- [x] ESC key closes sidebar
+- [x] Focus trap works in sidebar
+- [x] Selecting bookmark closes sidebar
+- [x] No horizontal scroll
+- [x] Touch targets ≥ 44px
+- [x] Modals are full-screen on mobile
+- [x] Toasts appear at bottom with safe area
+- [x] Build completes without errors
+- [ ] Test on actual iOS device (iPhone)
+- [ ] Test on actual Android device
+- [ ] Test with keyboard navigation
+- [ ] Test with screen reader
+- [ ] Test landscape orientation
+- [ ] Test on various screen sizes (320px, 375px, 414px, 768px)
+
+## Commit History
+1. `feat: update viewport meta for mobile support`
+2. `feat: add media query hooks for responsive design`
+3. `feat: add mobile sidebar state management to useBookmarksUI`
+4. `feat: add mobile-responsive CSS with breakpoints and safe areas`
+5. `feat: implement mobile overlay sidebar with focus trap and ESC handling`
+6. `feat: add mobile auto-collapse setting`
+7. `fix: resolve TypeScript errors for mobile implementation`
+
--- a/index.html
+++ b/index.html
@@ -2,8 +2,13 @@
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="icon" type="image/x-icon" href="/favicon.ico" />
+    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
+    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
+    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
+    <meta name="theme-color" content="#0f172a" />
+    <link rel="manifest" href="/manifest.webmanifest" />
    <title>Boris - Nostr Bookmarks</title>
    <meta name="description" content="Your reading list for the Nostr world. A minimal nostr client for bookmark management with highlights." />
    <link rel="canonical" href="https://read.withboris.com/" />
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "boris",
-  "version": "0.3.8",
+  "version": "0.4.3",
  "description": "A minimal nostr client for bookmark management",
  "homepage": "https://read.withboris.com/",
  "type": "module",
@@ -40,7 +40,9 @@
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.5",
    "typescript": "^5.2.2",
-    "vite": "^5.0.8"
+    "vite": "^5.0.8",
+    "vite-plugin-pwa": "^1.0.3",
+    "workbox-window": "^7.3.0"
  },
  "eslintConfig": {
    "root": true,
@@ -59,7 +61,8 @@
    "parser": "@typescript-eslint/parser",
    "plugins": [
      "@typescript-eslint",
-      "react-refresh"
+      "react-refresh",
+      "react-hooks"
    ],
    "rules": {
      "react-refresh/only-export-components": [
@@ -68,6 +71,7 @@
          "allowConstantExport": true
        }
      ],
+      "react-hooks/exhaustive-deps": "warn",
      "@typescript-eslint/no-unused-vars": [
        "error",
        {
--- a/public/apple-touch-icon.png
+++ b/public/apple-touch-icon.png
--- a/public/favicon-16x16.png
+++ b/public/favicon-16x16.png
--- a/public/favicon-32x32.png
+++ b/public/favicon-32x32.png
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/public/icon-192.png
+++ b/public/icon-192.png
--- a/public/icon-512.png
+++ b/public/icon-512.png
--- a/public/icon-maskable-192.png
+++ b/public/icon-maskable-192.png
--- a/public/icon-maskable-512.png
+++ b/public/icon-maskable-512.png
--- a/public/manifest.webmanifest
+++ b/public/manifest.webmanifest
@@ -0,0 +1,37 @@
+{
+  "name": "Boris - Nostr Bookmarks",
+  "short_name": "Boris",
+  "description": "Your reading list for the Nostr world. A minimal nostr client for bookmark management with highlights.",
+  "start_url": "/",
+  "scope": "/",
+  "display": "standalone",
+  "theme_color": "#0f172a",
+  "background_color": "#0b1220",
+  "orientation": "any",
+  "categories": ["productivity", "social", "utilities"],
+  "icons": [
+    {
+      "src": "/icon-192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/icon-512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    },
+    {
+      "src": "/icon-maskable-192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "maskable"
+    },
+    {
+      "src": "/icon-maskable-512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "maskable"
+    }
+  ]
+}
+
--- a/public/sw.js
+++ b/public/sw.js
@@ -1,56 +0,0 @@
-// Service Worker for Boris - handles offline image caching
-const CACHE_NAME = 'boris-image-cache-v1'
-
-// Install event - activate immediately
-self.addEventListener('install', (event) => {
-  console.log('[SW] Installing service worker...')
-  self.skipWaiting()
-})
-
-// Activate event - take control immediately
-self.addEventListener('activate', (event) => {
-  console.log('[SW] Activating service worker...')
-  event.waitUntil(self.clients.claim())
-})
-
-// Fetch event - intercept image requests
-self.addEventListener('fetch', (event) => {
-  const url = new URL(event.request.url)
-  
-  // Only intercept image requests
-  const isImage = event.request.destination === 'image' || 
-                  /\.(jpg|jpeg|png|gif|webp|svg)$/i.test(url.pathname)
-  
-  if (!isImage) {
-    return // Let other requests pass through
-  }
-
-  event.respondWith(
-    caches.open(CACHE_NAME).then(cache => {
-      return cache.match(event.request).then(cachedResponse => {
-        if (cachedResponse) {
-          console.log('[SW] Serving cached image:', url.pathname)
-          return cachedResponse
-        }
-
-        // Not in cache, try to fetch
-        return fetch(event.request)
-          .then(response => {
-            // Only cache successful responses
-            if (response && response.status === 200) {
-              // Clone the response before caching
-              cache.put(event.request, response.clone())
-              console.log('[SW] Cached new image:', url.pathname)
-            }
-            return response
-          })
-          .catch(error => {
-            console.error('[SW] Fetch failed for:', url.pathname, error)
-            // Return a fallback or let it fail
-            throw error
-          })
-      })
-    })
-  )
-})
-
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -11,6 +11,7 @@ import { createAddressLoader } from 'applesauce-loaders/loaders'
 import Bookmarks from './components/Bookmarks'
 import Toast from './components/Toast'
 import { useToast } from './hooks/useToast'
+import { useOnlineStatus } from './hooks/useOnlineStatus'
 import { RELAYS } from './config/relays'

 const DEFAULT_ARTICLE = import.meta.env.VITE_DEFAULT_ARTICLE_NADDR || 
@@ -69,6 +70,15 @@ function AppRoutes({
          />
        } 
      />
+      <Route 
+        path="/me" 
+        element={
+          <Bookmarks 
+            relayPool={relayPool}
+            onLogout={handleLogout}
+          />
+        } 
+      />
      <Route path="/" element={<Navigate to={`/a/${DEFAULT_ARTICLE}`} replace />} />
    </Routes>
  )
@@ -79,6 +89,7 @@ function App() {
  const [accountManager, setAccountManager] = useState<AccountManager | null>(null)
  const [relayPool, setRelayPool] = useState<RelayPool | null>(null)
  const { toastMessage, toastType, showToast, clearToast } = useToast()
+  const isOnline = useOnlineStatus()

  useEffect(() => {
    const initializeApp = async () => {
@@ -174,6 +185,25 @@ function App() {
    }
  }, [])

+  // Monitor online/offline status
+  useEffect(() => {
+    if (!isOnline) {
+      showToast('You are offline. Some features may be limited.')
+    }
+  }, [isOnline, showToast])
+
+  // Listen for service worker updates
+  useEffect(() => {
+    const handleSWUpdate = () => {
+      showToast('New version available! Refresh to update.')
+    }
+
+    window.addEventListener('sw-update-available', handleSWUpdate)
+    return () => {
+      window.removeEventListener('sw-update-available', handleSWUpdate)
+    }
+  }, [showToast])
+
  if (!eventStore || !accountManager || !relayPool) {
    return (
      <div className="loading">
--- a/src/components/AddBookmarkModal.tsx
+++ b/src/components/AddBookmarkModal.tsx
@@ -139,7 +139,8 @@ const AddBookmarkModal: React.FC<AddBookmarkModalProps> = ({ onClose, onSave })
        clearTimeout(fetchTimeoutRef.current)
      }
    }
-  }, [url]) // Only depend on url
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [url]) // Only depend on url - title, description, tagsInput are intentionally checked but not dependencies

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
--- a/src/components/AuthorCard.tsx
+++ b/src/components/AuthorCard.tsx
@@ -0,0 +1,43 @@
+import React from 'react'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faUserCircle } from '@fortawesome/free-solid-svg-icons'
+import { useEventModel } from 'applesauce-react/hooks'
+import { Models } from 'applesauce-core'
+
+interface AuthorCardProps {
+  authorPubkey: string
+}
+
+const AuthorCard: React.FC<AuthorCardProps> = ({ authorPubkey }) => {
+  const profile = useEventModel(Models.ProfileModel, [authorPubkey])
+  
+  const getAuthorName = () => {
+    if (profile?.name) return profile.name
+    if (profile?.display_name) return profile.display_name
+    return `${authorPubkey.slice(0, 8)}...${authorPubkey.slice(-8)}`
+  }
+  
+  const authorImage = profile?.picture || profile?.image
+  const authorBio = profile?.about
+  
+  return (
+    <div className="author-card">
+      <div className="author-card-avatar">
+        {authorImage ? (
+          <img src={authorImage} alt={getAuthorName()} />
+        ) : (
+          <FontAwesomeIcon icon={faUserCircle} />
+        )}
+      </div>
+      <div className="author-card-content">
+        <div className="author-card-name">{getAuthorName()}</div>
+        {authorBio && (
+          <p className="author-card-bio">{authorBio}</p>
+        )}
+      </div>
+    </div>
+  )
+}
+
+export default AuthorCard
+
--- a/src/components/BookmarkList.tsx
+++ b/src/components/BookmarkList.tsx
@@ -27,6 +27,7 @@ interface BookmarkListProps {
  loading?: boolean
  relayPool: RelayPool | null
  settings?: UserSettings
+  isMobile?: boolean
 }

 export const BookmarkList: React.FC<BookmarkListProps> = ({
@@ -44,7 +45,8 @@ export const BookmarkList: React.FC<BookmarkListProps> = ({
  lastFetchTime,
  loading = false,
  relayPool,
-  settings
+  settings,
+  isMobile = false
 }) => {
  // Helper to check if a bookmark has either content or a URL
  const hasContentOrUrl = (ib: IndividualBookmark) => {
@@ -106,6 +108,7 @@ export const BookmarkList: React.FC<BookmarkListProps> = ({
        onLogout={onLogout}
        onOpenSettings={onOpenSettings}
        relayPool={relayPool}
+        isMobile={isMobile}
      />
      
      {loading ? (
@@ -116,6 +119,7 @@ export const BookmarkList: React.FC<BookmarkListProps> = ({
        <div className="empty-state">
          <p>No bookmarks found.</p>
          <p>Add bookmarks using your nostr client to see them here.</p>
+          <p>If you aren't on nostr yet, start here: <a href="https://nstart.me/" target="_blank" rel="noopener noreferrer">nstart.me</a></p>
        </div>
      ) : (
        <div className="bookmarks-list">
--- a/src/components/Bookmarks.tsx
+++ b/src/components/Bookmarks.tsx
@@ -14,6 +14,7 @@ import { useRelayStatus } from '../hooks/useRelayStatus'
 import { useOfflineSync } from '../hooks/useOfflineSync'
 import ThreePaneLayout from './ThreePaneLayout'
 import Explore from './Explore'
+import Me from './Me'
 import { classifyHighlights } from '../utils/highlightClassification'

 export type ViewMode = 'compact' | 'cards' | 'large'
@@ -35,13 +36,14 @@ const Bookmarks: React.FC<BookmarksProps> = ({ relayPool, onLogout }) => {
  
  const showSettings = location.pathname === '/settings'
  const showExplore = location.pathname === '/explore'
+  const showMe = location.pathname === '/me'
  
-  // Track previous location for going back from settings
+  // Track previous location for going back from settings/me/explore
  useEffect(() => {
-    if (!showSettings) {
+    if (!showSettings && !showMe && !showExplore) {
      previousLocationRef.current = location.pathname
    }
-  }, [location.pathname, showSettings])
+  }, [location.pathname, showSettings, showMe, showExplore])
    
  const activeAccount = Hooks.useActiveAccount()
  const accountManager = Hooks.useAccountManager()
@@ -67,6 +69,9 @@ const Bookmarks: React.FC<BookmarksProps> = ({ relayPool, onLogout }) => {
  })

  const {
+    isMobile,
+    isSidebarOpen,
+    toggleSidebar,
    isCollapsed,
    setIsCollapsed,
    isHighlightsCollapsed,
@@ -87,6 +92,14 @@ const Bookmarks: React.FC<BookmarksProps> = ({ relayPool, onLogout }) => {
    setHighlightVisibility
  } = useBookmarksUI({ settings })

+  // Close sidebar on mobile when route changes (e.g., clicking on blog posts in Explore)
+  useEffect(() => {
+    if (isMobile && isSidebarOpen) {
+      toggleSidebar()
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [location.pathname])
+
  const {
    bookmarks,
    bookmarksLoading,
@@ -116,7 +129,7 @@ const Bookmarks: React.FC<BookmarksProps> = ({ relayPool, onLogout }) => {
    setReaderLoading,
    readerContent,
    setReaderContent,
-    handleSelectUrl
+    handleSelectUrl: baseHandleSelectUrl
  } = useContentSelection({
    relayPool,
    settings,
@@ -125,6 +138,14 @@ const Bookmarks: React.FC<BookmarksProps> = ({ relayPool, onLogout }) => {
    setCurrentArticle
  })

+  // Wrap handleSelectUrl to close mobile sidebar when selecting content
+  const handleSelectUrl = (url: string, bookmark?: { id: string; kind: number; tags: string[][]; pubkey: string }) => {
+    if (isMobile && isSidebarOpen) {
+      toggleSidebar()
+    }
+    baseHandleSelectUrl(url, bookmark)
+  }
+
  const {
    highlightButtonRef,
    handleTextSelection,
@@ -180,19 +201,25 @@ const Bookmarks: React.FC<BookmarksProps> = ({ relayPool, onLogout }) => {
    <ThreePaneLayout
      isCollapsed={isCollapsed}
      isHighlightsCollapsed={isHighlightsCollapsed}
+      isSidebarOpen={isSidebarOpen}
      showSettings={showSettings}
      showExplore={showExplore}
+      showMe={showMe}
      bookmarks={bookmarks}
      bookmarksLoading={bookmarksLoading}
      viewMode={viewMode}
      isRefreshing={isRefreshing}
      lastFetchTime={lastFetchTime}
-      onToggleSidebar={() => setIsCollapsed(!isCollapsed)}
+      onToggleSidebar={isMobile ? toggleSidebar : () => setIsCollapsed(!isCollapsed)}
      onLogout={onLogout}
      onViewModeChange={setViewMode}
      onOpenSettings={() => {
        navigate('/settings')
-        setIsCollapsed(true)
+        if (isMobile) {
+          toggleSidebar()
+        } else {
+          setIsCollapsed(true)
+        }
        setIsHighlightsCollapsed(true)
      }}
      onRefresh={handleRefreshAll}
@@ -220,6 +247,8 @@ const Bookmarks: React.FC<BookmarksProps> = ({ relayPool, onLogout }) => {
      onClearSelection={handleClearSelection}
      currentUserPubkey={activeAccount?.pubkey}
      followedPubkeys={followedPubkeys}
+      activeAccount={activeAccount}
+      currentArticle={currentArticle}
      highlights={highlights}
      highlightsLoading={highlightsLoading}
      onToggleHighlightsPanel={() => setIsHighlightsCollapsed(!isHighlightsCollapsed)}
@@ -233,6 +262,9 @@ const Bookmarks: React.FC<BookmarksProps> = ({ relayPool, onLogout }) => {
      explore={showExplore ? (
        relayPool ? <Explore relayPool={relayPool} /> : null
      ) : undefined}
+      me={showMe ? (
+        relayPool ? <Me relayPool={relayPool} /> : null
+      ) : undefined}
      toastMessage={toastMessage ?? undefined}
      toastType={toastType}
      onClearToast={clearToast}
--- a/src/components/ConfirmDialog.tsx
+++ b/src/components/ConfirmDialog.tsx
@@ -0,0 +1,56 @@
+import React from 'react'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faExclamationTriangle } from '@fortawesome/free-solid-svg-icons'
+
+interface ConfirmDialogProps {
+  isOpen: boolean
+  title: string
+  message: string
+  confirmText?: string
+  cancelText?: string
+  onConfirm: () => void
+  onCancel: () => void
+  variant?: 'danger' | 'warning' | 'info'
+}
+
+const ConfirmDialog: React.FC<ConfirmDialogProps> = ({
+  isOpen,
+  title,
+  message,
+  confirmText = 'Confirm',
+  cancelText = 'Cancel',
+  onConfirm,
+  onCancel,
+  variant = 'warning'
+}) => {
+  if (!isOpen) return null
+
+  return (
+    <div className="confirm-dialog-overlay" onClick={onCancel}>
+      <div className="confirm-dialog" onClick={(e) => e.stopPropagation()}>
+        <div className={`confirm-dialog-icon ${variant}`}>
+          <FontAwesomeIcon icon={faExclamationTriangle} />
+        </div>
+        <h3 className="confirm-dialog-title">{title}</h3>
+        <p className="confirm-dialog-message">{message}</p>
+        <div className="confirm-dialog-actions">
+          <button
+            className="confirm-dialog-btn cancel"
+            onClick={onCancel}
+          >
+            {cancelText}
+          </button>
+          <button
+            className={`confirm-dialog-btn confirm ${variant}`}
+            onClick={onConfirm}
+          >
+            {confirmText}
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default ConfirmDialog
+
--- a/src/components/ContentPanel.tsx
+++ b/src/components/ContentPanel.tsx
@@ -1,8 +1,11 @@
-import React, { useMemo } from 'react'
+import React, { useMemo, useState } from 'react'
 import ReactMarkdown from 'react-markdown'
 import remarkGfm from 'remark-gfm'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faSpinner } from '@fortawesome/free-solid-svg-icons'
+import { faSpinner, faBook } from '@fortawesome/free-solid-svg-icons'
+import { RelayPool } from 'applesauce-relay'
+import { IAccount } from 'applesauce-accounts'
+import { NostrEvent } from 'nostr-tools'
 import { Highlight } from '../types/highlights'
 import { readingTime } from 'reading-time-estimator'
 import { hexToRgb } from '../utils/colorHelpers'
@@ -12,6 +15,8 @@ import { useMarkdownToHTML } from '../hooks/useMarkdownToHTML'
 import { useHighlightedContent } from '../hooks/useHighlightedContent'
 import { useHighlightInteractions } from '../hooks/useHighlightInteractions'
 import { UserSettings } from '../services/settingsService'
+import { createEventReaction, createWebsiteReaction } from '../services/reactionService'
+import AuthorCard from './AuthorCard'

 interface ContentPanelProps {
  loading: boolean
@@ -32,6 +37,9 @@ interface ContentPanelProps {
  currentUserPubkey?: string
  followedPubkeys?: Set<string>
  settings?: UserSettings
+  relayPool?: RelayPool | null
+  activeAccount?: IAccount | null
+  currentArticle?: NostrEvent | null
  // For highlight creation
  onTextSelection?: (text: string) => void
  onClearSelection?: () => void
@@ -51,6 +59,9 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
  highlightStyle = 'marker',
  highlightColor = '#ffff00',
  settings,
+  relayPool,
+  activeAccount,
+  currentArticle,
  onHighlightClick,
  selectedHighlightId,
  highlightVisibility = { nostrverse: true, friends: true, mine: true },
@@ -59,7 +70,8 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
  onTextSelection,
  onClearSelection
 }) => {
-  const { renderedHtml: renderedMarkdownHtml, previewRef: markdownPreviewRef } = useMarkdownToHTML(markdown)
+  const [isMarkingAsRead, setIsMarkingAsRead] = useState(false)
+  const { renderedHtml: renderedMarkdownHtml, previewRef: markdownPreviewRef, processedMarkdown } = useMarkdownToHTML(markdown, relayPool)
  
  const { finalHtml, relevantHighlights } = useHighlightedContent({
    html,
@@ -74,7 +86,7 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
    followedPubkeys
  })

-  const { contentRef, handleMouseUp } = useHighlightInteractions({
+  const { contentRef, handleSelectionEnd } = useHighlightInteractions({
    onHighlightClick,
    selectedHighlightId,
    onTextSelection,
@@ -90,6 +102,44 @@ const ContentPanel: React.FC<ContentPanelProps> = ({

  const hasHighlights = relevantHighlights.length > 0

+  // Determine if we're on a nostr-native article (/a/) or external URL (/r/)
+  const isNostrArticle = selectedUrl && selectedUrl.startsWith('nostr:')
+  
+  const handleMarkAsRead = async () => {
+    if (!activeAccount || !relayPool) {
+      console.warn('Cannot mark as read: no account or relay pool')
+      return
+    }
+
+    setIsMarkingAsRead(true)
+
+    try {
+      if (isNostrArticle && currentArticle) {
+        // Kind 7 reaction for nostr-native articles
+        await createEventReaction(
+          currentArticle.id,
+          currentArticle.pubkey,
+          currentArticle.kind,
+          activeAccount,
+          relayPool
+        )
+        console.log('✅ Marked nostr article as read')
+      } else if (selectedUrl) {
+        // Kind 17 reaction for external websites
+        await createWebsiteReaction(
+          selectedUrl,
+          activeAccount,
+          relayPool
+        )
+        console.log('✅ Marked website as read')
+      }
+    } catch (error) {
+      console.error('Failed to mark as read:', error)
+    } finally {
+      setIsMarkingAsRead(false)
+    }
+  }
+
  if (!selectedUrl) {
    return (
      <div className="reader empty">
@@ -116,7 +166,7 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
      {markdown && (
        <div ref={markdownPreviewRef} style={{ display: 'none' }}>
          <ReactMarkdown remarkPlugins={[remarkGfm]}>
-            {markdown}
+            {processedMarkdown || markdown}
          </ReactMarkdown>
        </div>
      )}
@@ -132,29 +182,55 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
        settings={settings}
      />
      {markdown || html ? (
-        markdown ? (
-          renderedMarkdownHtml && finalHtml ? (
+        <>
+          {markdown ? (
+            renderedMarkdownHtml && finalHtml ? (
+              <div 
+                ref={contentRef} 
+                className="reader-markdown" 
+                dangerouslySetInnerHTML={{ __html: finalHtml }}
+                onMouseUp={handleSelectionEnd}
+                onTouchEnd={handleSelectionEnd}
+              />
+            ) : (
+              <div className="reader-markdown">
+                <div className="loading-spinner">
+                  <FontAwesomeIcon icon={faSpinner} spin size="sm" />
+                </div>
+              </div>
+            )
+          ) : (
            <div 
              ref={contentRef} 
-              className="reader-markdown" 
-              dangerouslySetInnerHTML={{ __html: finalHtml }}
-              onMouseUp={handleMouseUp}
+              className="reader-html" 
+              dangerouslySetInnerHTML={{ __html: finalHtml || html || '' }}
+              onMouseUp={handleSelectionEnd}
+              onTouchEnd={handleSelectionEnd}
            />
-          ) : (
-            <div className="reader-markdown">
-              <div className="loading-spinner">
-                <FontAwesomeIcon icon={faSpinner} spin size="sm" />
-              </div>
+          )}
+          
+          {/* Mark as Read button */}
+          {activeAccount && (
+            <div className="mark-as-read-container">
+              <button
+                className="mark-as-read-btn"
+                onClick={handleMarkAsRead}
+                disabled={isMarkingAsRead}
+                title="Mark as Read"
+              >
+                <FontAwesomeIcon icon={isMarkingAsRead ? faSpinner : faBook} spin={isMarkingAsRead} />
+                <span>{isMarkingAsRead ? 'Marking...' : 'Mark as Read'}</span>
+              </button>
            </div>
-          )
-        ) : (
-          <div 
-            ref={contentRef} 
-            className="reader-html" 
-            dangerouslySetInnerHTML={{ __html: finalHtml || html || '' }}
-            onMouseUp={handleMouseUp}
-          />
-        )
+          )}
+          
+          {/* Author info card for nostr-native articles */}
+          {isNostrArticle && currentArticle && (
+            <div className="author-card-container">
+              <AuthorCard authorPubkey={currentArticle.pubkey} />
+            </div>
+          )}
+        </>
      ) : (
        <div className="reader empty">
          <p>No readable content found for this URL.</p>
--- a/src/components/HighlightItem.tsx
+++ b/src/components/HighlightItem.tsx
@@ -1,15 +1,18 @@
 import React, { useEffect, useRef, useState } from 'react'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faQuoteLeft, faExternalLinkAlt, faPlane, faSpinner, faServer } from '@fortawesome/free-solid-svg-icons'
+import { faQuoteLeft, faExternalLinkAlt, faPlane, faSpinner, faServer, faTrash } from '@fortawesome/free-solid-svg-icons'
 import { Highlight } from '../types/highlights'
 import { useEventModel } from 'applesauce-react/hooks'
 import { Models, IEventStore } from 'applesauce-core'
 import { RelayPool } from 'applesauce-relay'
+import { Hooks } from 'applesauce-react'
 import { onSyncStateChange, isEventSyncing } from '../services/offlineSyncService'
 import { RELAYS } from '../config/relays'
 import { areAllRelaysLocal } from '../utils/helpers'
 import { nip19 } from 'nostr-tools'
 import { formatDateCompact } from '../utils/bookmarkUtils'
+import { createDeletionRequest } from '../services/deletionService'
+import ConfirmDialog from './ConfirmDialog'

 interface HighlightWithLevel extends Highlight {
  level?: 'mine' | 'friends' | 'nostrverse'
@@ -23,6 +26,7 @@ interface HighlightItemProps {
  relayPool?: RelayPool | null
  eventStore?: IEventStore | null
  onHighlightUpdate?: (highlight: Highlight) => void
+  onHighlightDelete?: (highlightId: string) => void
 }

 export const HighlightItem: React.FC<HighlightItemProps> = ({ 
@@ -32,12 +36,17 @@ export const HighlightItem: React.FC<HighlightItemProps> = ({
  onHighlightClick,
  relayPool,
  eventStore,
-  onHighlightUpdate
+  onHighlightUpdate,
+  onHighlightDelete
 }) => {
  const itemRef = useRef<HTMLDivElement>(null)
  const [isSyncing, setIsSyncing] = useState(() => isEventSyncing(highlight.id))
  const [showOfflineIndicator, setShowOfflineIndicator] = useState(() => highlight.isOfflineCreated && !isSyncing)
  const [isRebroadcasting, setIsRebroadcasting] = useState(false)
+  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false)
+  const [isDeleting, setIsDeleting] = useState(false)
+  
+  const activeAccount = Hooks.useActiveAccount()
  
  // Resolve the profile of the user who made the highlight
  const profile = useEventModel(Models.ProfileModel, [highlight.pubkey])
@@ -243,7 +252,51 @@ export const HighlightItem: React.FC<HighlightItemProps> = ({
  
  const relayIndicator = getRelayIndicatorInfo()
  
+  // Check if current user can delete this highlight
+  const canDelete = activeAccount && highlight.pubkey === activeAccount.pubkey
+  
+  const handleDeleteClick = (e: React.MouseEvent) => {
+    e.stopPropagation()
+    setShowDeleteConfirm(true)
+  }
+  
+  const handleConfirmDelete = async () => {
+    if (!activeAccount || !relayPool) {
+      console.warn('Cannot delete: no account or relay pool')
+      return
+    }
+    
+    setIsDeleting(true)
+    setShowDeleteConfirm(false)
+    
+    try {
+      await createDeletionRequest(
+        highlight.id,
+        9802, // kind for highlights
+        'Deleted by user',
+        activeAccount,
+        relayPool
+      )
+      
+      console.log('✅ Highlight deletion request published')
+      
+      // Notify parent to remove this highlight from the list
+      if (onHighlightDelete) {
+        onHighlightDelete(highlight.id)
+      }
+    } catch (error) {
+      console.error('Failed to delete highlight:', error)
+    } finally {
+      setIsDeleting(false)
+    }
+  }
+  
+  const handleCancelDelete = () => {
+    setShowDeleteConfirm(false)
+  }
+  
  return (
+    <>
    <div 
      ref={itemRef} 
      className={`highlight-item ${isSelected ? 'selected' : ''} ${highlight.level ? `level-${highlight.level}` : ''}`} 
@@ -263,6 +316,15 @@ export const HighlightItem: React.FC<HighlightItemProps> = ({
            <FontAwesomeIcon icon={relayIndicator.icon} spin={relayIndicator.spin} />
          </div>
        )}
+        {canDelete && (
+          <div 
+            className="highlight-delete-btn" 
+            title="Delete highlight"
+            onClick={handleDeleteClick}
+          >
+            <FontAwesomeIcon icon={isDeleting ? faSpinner : faTrash} spin={isDeleting} />
+          </div>
+        )}
      </div>
      
      <div className="highlight-content">
@@ -301,6 +363,18 @@ export const HighlightItem: React.FC<HighlightItemProps> = ({
        </div>
      </div>
    </div>
+    
+    <ConfirmDialog
+      isOpen={showDeleteConfirm}
+      title="Delete Highlight?"
+      message="This will request deletion of your highlight. It may still be visible on some relays that don't honor deletion requests."
+      confirmText="Delete"
+      cancelText="Cancel"
+      variant="danger"
+      onConfirm={handleConfirmDelete}
+      onCancel={handleCancelDelete}
+    />
+    </>
  )
 }

--- a/src/components/HighlightsPanel.tsx
+++ b/src/components/HighlightsPanel.tsx
@@ -72,6 +72,11 @@ export const HighlightsPanel: React.FC<HighlightsPanelProps> = ({
    )
  }
  
+  const handleHighlightDelete = (highlightId: string) => {
+    // Remove highlight from local state
+    setLocalHighlights(prev => prev.filter(h => h.id !== highlightId))
+  }
+  
  const filteredHighlights = useFilteredHighlights({
    highlights: localHighlights,
    selectedUrl,
@@ -129,6 +134,7 @@ export const HighlightsPanel: React.FC<HighlightsPanelProps> = ({
              relayPool={relayPool}
              eventStore={eventStore}
              onHighlightUpdate={handleHighlightUpdate}
+              onHighlightDelete={handleHighlightDelete}
            />
          ))}
        </div>
--- a/src/components/IconButton.tsx
+++ b/src/components/IconButton.tsx
@@ -11,6 +11,7 @@ interface IconButtonProps {
  size?: number
  disabled?: boolean
  spin?: boolean
+  className?: string
 }

 const IconButton: React.FC<IconButtonProps> = ({
@@ -21,11 +22,12 @@ const IconButton: React.FC<IconButtonProps> = ({
  variant = 'ghost',
  size = 33,
  disabled = false,
-  spin = false
+  spin = false,
+  className = ''
 }) => {
  return (
    <button
-      className={`icon-button ${variant}`}
+      className={`icon-button ${variant} ${className}`.trim()}
      onClick={onClick}
      title={title}
      aria-label={ariaLabel || title}
--- a/src/components/Me.tsx
+++ b/src/components/Me.tsx
@@ -0,0 +1,119 @@
+import React, { useState, useEffect } from 'react'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faSpinner, faExclamationCircle, faUser, faHighlighter } from '@fortawesome/free-solid-svg-icons'
+import { Hooks } from 'applesauce-react'
+import { RelayPool } from 'applesauce-relay'
+import { useEventModel } from 'applesauce-react/hooks'
+import { Models } from 'applesauce-core'
+import { Highlight } from '../types/highlights'
+import { HighlightItem } from './HighlightItem'
+import { fetchHighlights } from '../services/highlightService'
+
+interface MeProps {
+  relayPool: RelayPool
+}
+
+const Me: React.FC<MeProps> = ({ relayPool }) => {
+  const activeAccount = Hooks.useActiveAccount()
+  const [highlights, setHighlights] = useState<Highlight[]>([])
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+
+  const profile = useEventModel(Models.ProfileModel, activeAccount ? [activeAccount.pubkey] : null)
+
+  const getUserDisplayName = () => {
+    if (!activeAccount) return 'Unknown User'
+    if (profile?.name) return profile.name
+    if (profile?.display_name) return profile.display_name
+    if (profile?.nip05) return profile.nip05
+    return `${activeAccount.pubkey.slice(0, 8)}...${activeAccount.pubkey.slice(-8)}`
+  }
+
+  useEffect(() => {
+    const loadHighlights = async () => {
+      if (!activeAccount) {
+        setError('Please log in to view your highlights')
+        setLoading(false)
+        return
+      }
+
+      try {
+        setLoading(true)
+        setError(null)
+
+        // Fetch highlights created by the user
+        const userHighlights = await fetchHighlights(
+          relayPool,
+          activeAccount.pubkey
+        )
+
+        if (userHighlights.length === 0) {
+          setError('No highlights yet. Start highlighting content to see them here!')
+        }
+
+        setHighlights(userHighlights)
+      } catch (err) {
+        console.error('Failed to load highlights:', err)
+        setError('Failed to load highlights. Please try again.')
+      } finally {
+        setLoading(false)
+      }
+    }
+
+    loadHighlights()
+  }, [relayPool, activeAccount])
+
+  const handleHighlightDelete = (highlightId: string) => {
+    // Remove highlight from local state
+    setHighlights(prev => prev.filter(h => h.id !== highlightId))
+  }
+
+  if (loading) {
+    return (
+      <div className="explore-container">
+        <div className="explore-loading">
+          <FontAwesomeIcon icon={faSpinner} spin size="2x" />
+          <p>Loading your highlights...</p>
+        </div>
+      </div>
+    )
+  }
+
+  if (error) {
+    return (
+      <div className="explore-container">
+        <div className="explore-error">
+          <FontAwesomeIcon icon={faExclamationCircle} size="2x" />
+          <p>{error}</p>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="explore-container">
+      <div className="explore-header">
+        <h1>
+          <FontAwesomeIcon icon={faUser} />
+          {getUserDisplayName()}
+        </h1>
+        <p className="explore-subtitle">
+          <FontAwesomeIcon icon={faHighlighter} /> {highlights.length} highlight{highlights.length !== 1 ? 's' : ''}
+        </p>
+      </div>
+      <div className="highlights-list me-highlights-list">
+        {highlights.map((highlight) => (
+          <HighlightItem
+            key={highlight.id}
+            highlight={{ ...highlight, level: 'mine' }}
+            relayPool={relayPool}
+            onHighlightDelete={handleHighlightDelete}
+          />
+        ))}
+      </div>
+    </div>
+  )
+}
+
+export default Me
+
--- a/src/components/ReaderHeader.tsx
+++ b/src/components/ReaderHeader.tsx
@@ -28,36 +28,45 @@ const ReaderHeader: React.FC<ReaderHeaderProps> = ({
 }) => {
  const cachedImage = useImageCache(image, settings)
  const formattedDate = published ? format(new Date(published * 1000), 'MMM d, yyyy') : null
+  const isLongSummary = summary && summary.length > 150
+  
  if (cachedImage) {
    return (
-      <div className="reader-hero-image">
-        <img src={cachedImage} alt={title || 'Article image'} />
-        {formattedDate && (
-          <div className="publish-date-topright">
-            {formattedDate}
-          </div>
-        )}
-        {title && (
-          <div className="reader-header-overlay">
-            <h2 className="reader-title">{title}</h2>
-            {summary && <p className="reader-summary">{summary}</p>}
-            <div className="reader-meta">
-              {readingTimeText && (
-                <div className="reading-time">
-                  <FontAwesomeIcon icon={faClock} />
-                  <span>{readingTimeText}</span>
-                </div>
-              )}
-              {hasHighlights && (
-                <div className="highlight-indicator">
-                  <FontAwesomeIcon icon={faHighlighter} />
-                  <span>{highlightCount} highlight{highlightCount !== 1 ? 's' : ''}</span>
-                </div>
-              )}
+      <>
+        <div className="reader-hero-image">
+          <img src={cachedImage} alt={title || 'Article image'} />
+          {formattedDate && (
+            <div className="publish-date-topright">
+              {formattedDate}
            </div>
+          )}
+          {title && (
+            <div className="reader-header-overlay">
+              <h2 className="reader-title">{title}</h2>
+              {summary && <p className={`reader-summary ${isLongSummary ? 'hide-on-mobile' : ''}`}>{summary}</p>}
+              <div className="reader-meta">
+                {readingTimeText && (
+                  <div className="reading-time">
+                    <FontAwesomeIcon icon={faClock} />
+                    <span>{readingTimeText}</span>
+                  </div>
+                )}
+                {hasHighlights && (
+                  <div className="highlight-indicator">
+                    <FontAwesomeIcon icon={faHighlighter} />
+                    <span>{highlightCount} highlight{highlightCount !== 1 ? 's' : ''}</span>
+                  </div>
+                )}
+              </div>
+            </div>
+          )}
+        </div>
+        {isLongSummary && (
+          <div className="reader-summary-below-image">
+            <p className="reader-summary">{summary}</p>
          </div>
        )}
-      </div>
+      </>
    )
  }

--- a/src/components/RelayStatusIndicator.tsx
+++ b/src/components/RelayStatusIndicator.tsx
@@ -4,6 +4,7 @@ import { faPlane, faGlobe, faCircle, faSpinner } from '@fortawesome/free-solid-s
 import { RelayPool } from 'applesauce-relay'
 import { useRelayStatus } from '../hooks/useRelayStatus'
 import { isLocalRelay } from '../utils/helpers'
+import { useIsMobile } from '../hooks/useMediaQuery'

 interface RelayStatusIndicatorProps {
  relayPool: RelayPool | null
@@ -13,6 +14,8 @@ export const RelayStatusIndicator: React.FC<RelayStatusIndicatorProps> = ({ rela
  // Poll frequently for responsive offline indicator (5s instead of default 20s)
  const relayStatuses = useRelayStatus({ relayPool, pollingInterval: 5000 })
  const [isConnecting, setIsConnecting] = useState(true)
+  const [isExpanded, setIsExpanded] = useState(false)
+  const isMobile = useIsMobile()
  
  if (!relayPool) return null
  
@@ -52,41 +55,60 @@ export const RelayStatusIndicator: React.FC<RelayStatusIndicatorProps> = ({ rela
      hasRemoteRelay,
      isConnecting
    })
-  }, [offlineMode, localOnlyMode, connectedUrls.length, relayStatuses.length, hasLocalRelay, hasRemoteRelay, isConnecting])
+  }, [offlineMode, localOnlyMode, connectedUrls, relayStatuses.length, hasLocalRelay, hasRemoteRelay, isConnecting])
  
  // Don't show indicator when fully connected (but show when connecting)
  if (!localOnlyMode && !offlineMode && !isConnecting) return null
  
+  const handleClick = () => {
+    if (isMobile) {
+      setIsExpanded(!isExpanded)
+    }
+  }
+
+  const showDetails = !isMobile || isExpanded
+  
  return (
-    <div className={`relay-status-indicator ${isConnecting ? 'connecting' : ''}`} title={
-      isConnecting
-        ? 'Connecting to relays...'
-        : offlineMode 
-          ? 'Offline - No relays connected'
-          : 'Local Relays Only - Highlights will be marked as local'
-    }>
+    <div 
+      className={`relay-status-indicator ${isConnecting ? 'connecting' : ''} ${isMobile ? 'mobile' : ''} ${isExpanded ? 'expanded' : ''}`}
+      title={
+        !isMobile ? (
+          isConnecting
+            ? 'Connecting to relays...'
+            : offlineMode 
+              ? 'Offline - No relays connected'
+              : 'Local Relays Only - Highlights will be marked as local'
+        ) : undefined
+      }
+      onClick={handleClick}
+      style={{ cursor: isMobile ? 'pointer' : 'default' }}
+    >
      <div className="relay-status-icon">
        <FontAwesomeIcon icon={isConnecting ? faSpinner : offlineMode ? faCircle : faPlane} spin={isConnecting} />
      </div>
-      <div className="relay-status-text">
-        {isConnecting ? (
-          <span className="relay-status-title">Connecting</span>
-        ) : offlineMode ? (
-          <>
-            <span className="relay-status-title">Offline</span>
-            <span className="relay-status-subtitle">No relays connected</span>
-          </>
-        ) : (
-          <>
-            <span className="relay-status-title">Flight Mode</span>
-            <span className="relay-status-subtitle">{connectedUrls.length} local relay{connectedUrls.length !== 1 ? 's' : ''}</span>
-          </>
-        )}
-      </div>
-      {!offlineMode && !isConnecting && (
-        <div className="relay-status-pulse">
-          <FontAwesomeIcon icon={faGlobe} className="pulse-icon" />
-        </div>
+      {showDetails && (
+        <>
+          <div className="relay-status-text">
+            {isConnecting ? (
+              <span className="relay-status-title">Connecting</span>
+            ) : offlineMode ? (
+              <>
+                <span className="relay-status-title">Offline</span>
+                <span className="relay-status-subtitle">No relays connected</span>
+              </>
+            ) : (
+              <>
+                <span className="relay-status-title">Flight Mode</span>
+                <span className="relay-status-subtitle">{connectedUrls.length} local relay{connectedUrls.length !== 1 ? 's' : ''}</span>
+              </>
+            )}
+          </div>
+          {!offlineMode && !isConnecting && (
+            <div className="relay-status-pulse">
+              <FontAwesomeIcon icon={faGlobe} className="pulse-icon" />
+            </div>
+          )}
+        </>
      )}
    </div>
  )
--- a/src/components/Settings.tsx
+++ b/src/components/Settings.tsx
@@ -10,6 +10,7 @@ import StartupPreferencesSettings from './Settings/StartupPreferencesSettings'
 import ZapSettings from './Settings/ZapSettings'
 import OfflineModeSettings from './Settings/OfflineModeSettings'
 import RelaySettings from './Settings/RelaySettings'
+import PWASettings from './Settings/PWASettings'
 import { useRelayStatus } from '../hooks/useRelayStatus'

 const DEFAULT_SETTINGS: UserSettings = {
@@ -164,6 +165,7 @@ const Settings: React.FC<SettingsProps> = ({ settings, onSave, onClose, relayPoo
        <ZapSettings settings={localSettings} onUpdate={handleUpdate} />
        <OfflineModeSettings settings={localSettings} onUpdate={handleUpdate} onClose={onClose} />
        <RelaySettings relayStatuses={relayStatuses} onClose={onClose} />
+        <PWASettings />
      </div>
    </div>
  )
--- a/src/components/Settings/PWASettings.tsx
+++ b/src/components/Settings/PWASettings.tsx
@@ -0,0 +1,84 @@
+import React from 'react'
+import { faDownload, faCheckCircle, faMobileAlt } from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { usePWAInstall } from '../../hooks/usePWAInstall'
+
+const PWASettings: React.FC = () => {
+  const { isInstallable, isInstalled, installApp } = usePWAInstall()
+
+  const handleInstall = async () => {
+    const success = await installApp()
+    if (success) {
+      console.log('App installed successfully')
+    }
+  }
+
+  if (isInstalled) {
+    return (
+      <div className="settings-section">
+        <h3>Progressive Web App</h3>
+        <div className="setting-item">
+          <div className="setting-info">
+            <FontAwesomeIcon icon={faCheckCircle} style={{ color: '#22c55e', marginRight: '8px' }} />
+            <span>Boris is installed as an app</span>
+          </div>
+          <p className="setting-description">
+            You can launch Boris from your home screen or app drawer.
+          </p>
+        </div>
+      </div>
+    )
+  }
+
+  if (!isInstallable) {
+    return null
+  }
+
+  return (
+    <div className="settings-section">
+      <h3>Progressive Web App</h3>
+      <div className="setting-item">
+        <div className="setting-info">
+          <FontAwesomeIcon icon={faMobileAlt} style={{ marginRight: '8px' }} />
+          <span>Install Boris as an app</span>
+        </div>
+        <p className="setting-description">
+          Install Boris on your device for a native app experience with offline support.
+        </p>
+        <button
+          onClick={handleInstall}
+          className="install-button"
+          style={{
+            marginTop: '12px',
+            padding: '8px 16px',
+            background: 'linear-gradient(135deg, #3b82f6 0%, #1e40af 100%)',
+            color: 'white',
+            border: 'none',
+            borderRadius: '8px',
+            cursor: 'pointer',
+            display: 'flex',
+            alignItems: 'center',
+            gap: '8px',
+            fontSize: '14px',
+            fontWeight: '500',
+            transition: 'transform 0.2s, box-shadow 0.2s',
+          }}
+          onMouseEnter={(e) => {
+            e.currentTarget.style.transform = 'translateY(-2px)'
+            e.currentTarget.style.boxShadow = '0 4px 12px rgba(59, 130, 246, 0.3)'
+          }}
+          onMouseLeave={(e) => {
+            e.currentTarget.style.transform = 'translateY(0)'
+            e.currentTarget.style.boxShadow = 'none'
+          }}
+        >
+          <FontAwesomeIcon icon={faDownload} />
+          Install App
+        </button>
+      </div>
+    </div>
+  )
+}
+
+export default PWASettings
+
--- a/src/components/Settings/StartupPreferencesSettings.tsx
+++ b/src/components/Settings/StartupPreferencesSettings.tsx
@@ -49,6 +49,19 @@ const StartupPreferencesSettings: React.FC<StartupPreferencesSettingsProps> = ({
          <span>Rebroadcast events while browsing</span>
        </label>
      </div>
+
+      <div className="setting-group">
+        <label htmlFor="autoCollapseSidebarOnMobile" className="checkbox-label">
+          <input
+            id="autoCollapseSidebarOnMobile"
+            type="checkbox"
+            checked={settings.autoCollapseSidebarOnMobile !== false}
+            onChange={(e) => onUpdate({ autoCollapseSidebarOnMobile: e.target.checked })}
+            className="setting-checkbox"
+          />
+          <span>Auto-collapse sidebar on small screens</span>
+        </label>
+      </div>
    </div>
  )
 }
--- a/src/components/SidebarHeader.tsx
+++ b/src/components/SidebarHeader.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react'
 import { useNavigate } from 'react-router-dom'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faChevronRight, faRightFromBracket, faRightToBracket, faUserCircle, faGear, faHome, faPlus, faNewspaper } from '@fortawesome/free-solid-svg-icons'
+import { faChevronRight, faRightFromBracket, faRightToBracket, faUserCircle, faGear, faHome, faPlus, faNewspaper, faTimes } from '@fortawesome/free-solid-svg-icons'
 import { Hooks } from 'applesauce-react'
 import { useEventModel } from 'applesauce-react/hooks'
 import { Models } from 'applesauce-core'
@@ -17,9 +17,10 @@ interface SidebarHeaderProps {
  onLogout: () => void
  onOpenSettings: () => void
  relayPool: RelayPool | null
+  isMobile?: boolean
 }

-const SidebarHeader: React.FC<SidebarHeaderProps> = ({ onToggleCollapse, onLogout, onOpenSettings, relayPool }) => {
+const SidebarHeader: React.FC<SidebarHeaderProps> = ({ onToggleCollapse, onLogout, onOpenSettings, relayPool, isMobile = false }) => {
  const [isConnecting, setIsConnecting] = useState(false)
  const [showAddModal, setShowAddModal] = useState(false)
  const navigate = useNavigate()
@@ -35,7 +36,7 @@ const SidebarHeader: React.FC<SidebarHeaderProps> = ({ onToggleCollapse, onLogou
      accountManager.setActive(account)
    } catch (error) {
      console.error('Login failed:', error)
-      alert('Login failed. Please install a nostr browser extension and try again.')
+      alert('Login failed. Please install a nostr browser extension and try again.\n\nIf you aren\'t on nostr yet, start here: https://nstart.me/')
    } finally {
      setIsConnecting(false)
    }
@@ -66,20 +67,35 @@ const SidebarHeader: React.FC<SidebarHeaderProps> = ({ onToggleCollapse, onLogou
  return (
    <>
      <div className="sidebar-header-bar">
-        <button 
-          onClick={onToggleCollapse}
-          className="toggle-sidebar-btn"
-          title="Collapse bookmarks sidebar"
-          aria-label="Collapse bookmarks sidebar"
-        >
-          <FontAwesomeIcon icon={faChevronRight} />
-        </button>
+        {isMobile ? (
+          <IconButton
+            icon={faTimes}
+            onClick={onToggleCollapse}
+            title="Close sidebar"
+            ariaLabel="Close sidebar"
+            variant="ghost"
+            className="mobile-close-btn"
+          />
+        ) : (
+          <button 
+            onClick={onToggleCollapse}
+            className="toggle-sidebar-btn"
+            title="Collapse bookmarks sidebar"
+            aria-label="Collapse bookmarks sidebar"
+          >
+            <FontAwesomeIcon icon={faChevronRight} />
+          </button>
+        )}
        <div className="sidebar-header-right">
        <div 
          className="profile-avatar" 
          title={activeAccount ? getUserDisplayName() : "Login"}
-          onClick={!activeAccount ? (isConnecting ? () => {} : handleLogin) : undefined}
-          style={{ cursor: !activeAccount ? 'pointer' : 'default' }}
+          onClick={
+            activeAccount 
+              ? () => navigate('/me')
+              : (isConnecting ? () => {} : handleLogin)
+          }
+          style={{ cursor: 'pointer' }}
        >
          {profileImage ? (
            <img src={profileImage} alt={getUserDisplayName()} />
--- a/src/components/ThreePaneLayout.tsx
+++ b/src/components/ThreePaneLayout.tsx
@@ -1,4 +1,6 @@
-import React from 'react'
+import React, { useEffect, useRef } from 'react'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faBookmark, faHighlighter } from '@fortawesome/free-solid-svg-icons'
 import { RelayPool } from 'applesauce-relay'
 import { IEventStore } from 'applesauce-core'
 import { BookmarkList } from './BookmarkList'
@@ -16,13 +18,19 @@ import { UserSettings } from '../services/settingsService'
 import { HighlightVisibility } from './HighlightsPanel'
 import { HighlightButtonRef } from './HighlightButton'
 import { BookmarkReference } from '../utils/contentLoader'
+import { useIsMobile } from '../hooks/useMediaQuery'
+import { useScrollDirection } from '../hooks/useScrollDirection'
+import { IAccount } from 'applesauce-accounts'
+import { NostrEvent } from 'nostr-tools'

 interface ThreePaneLayoutProps {
  // Layout state
  isCollapsed: boolean
  isHighlightsCollapsed: boolean
+  isSidebarOpen: boolean
  showSettings: boolean
  showExplore?: boolean
+  showMe?: boolean
  
  // Bookmarks pane
  bookmarks: Bookmark[]
@@ -54,6 +62,8 @@ interface ThreePaneLayoutProps {
  onClearSelection: () => void
  currentUserPubkey?: string
  followedPubkeys: Set<string>
+  activeAccount?: IAccount | null
+  currentArticle?: NostrEvent | null
  
  // Highlights pane
  highlights: Highlight[]
@@ -76,17 +86,185 @@ interface ThreePaneLayoutProps {
  
  // Optional Explore content
  explore?: React.ReactNode
+  
+  // Optional Me content
+  me?: React.ReactNode
 }

 const ThreePaneLayout: React.FC<ThreePaneLayoutProps> = (props) => {
+  const isMobile = useIsMobile()
+  const sidebarRef = useRef<HTMLDivElement>(null)
+  const highlightsRef = useRef<HTMLDivElement>(null)
+  const mainPaneRef = useRef<HTMLDivElement>(null)
+  
+  // Detect scroll direction to hide/show mobile buttons
+  // On mobile, scroll happens in the main pane, not on window
+  const scrollDirection = useScrollDirection({ 
+    threshold: 10, 
+    enabled: isMobile && !props.isSidebarOpen && props.isHighlightsCollapsed,
+    elementRef: mainPaneRef
+  })
+  const showMobileButtons = scrollDirection !== 'down'
+
+  // Lock body scroll when mobile sidebar or highlights is open
+  useEffect(() => {
+    if (isMobile && (props.isSidebarOpen || !props.isHighlightsCollapsed)) {
+      document.body.classList.add('mobile-sidebar-open')
+    } else {
+      document.body.classList.remove('mobile-sidebar-open')
+    }
+    
+    return () => {
+      document.body.classList.remove('mobile-sidebar-open')
+    }
+  }, [isMobile, props.isSidebarOpen, props.isHighlightsCollapsed])
+
+  // Handle ESC key to close sidebar or highlights
+  useEffect(() => {
+    const { isSidebarOpen, isHighlightsCollapsed, onToggleSidebar, onToggleHighlightsPanel } = props
+    
+    if (!isMobile) return
+    if (!isSidebarOpen && isHighlightsCollapsed) return
+
+    const handleEscape = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        if (isSidebarOpen) {
+          onToggleSidebar()
+        } else if (!isHighlightsCollapsed) {
+          onToggleHighlightsPanel()
+        }
+      }
+    }
+
+    document.addEventListener('keydown', handleEscape)
+    return () => document.removeEventListener('keydown', handleEscape)
+  }, [isMobile, props])
+
+  // Trap focus in sidebar when open on mobile
+  useEffect(() => {
+    if (!isMobile || !props.isSidebarOpen || !sidebarRef.current) return
+
+    const sidebar = sidebarRef.current
+    const focusableElements = sidebar.querySelectorAll<HTMLElement>(
+      'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+    )
+    const firstElement = focusableElements[0]
+    const lastElement = focusableElements[focusableElements.length - 1]
+
+    const handleTab = (e: KeyboardEvent) => {
+      if (e.key !== 'Tab') return
+
+      if (e.shiftKey) {
+        if (document.activeElement === firstElement) {
+          e.preventDefault()
+          lastElement?.focus()
+        }
+      } else {
+        if (document.activeElement === lastElement) {
+          e.preventDefault()
+          firstElement?.focus()
+        }
+      }
+    }
+
+    sidebar.addEventListener('keydown', handleTab)
+    firstElement?.focus()
+
+    return () => {
+      sidebar.removeEventListener('keydown', handleTab)
+    }
+  }, [isMobile, props.isSidebarOpen])
+
+  // Trap focus in highlights panel when open on mobile
+  useEffect(() => {
+    if (!isMobile || props.isHighlightsCollapsed || !highlightsRef.current) return
+
+    const highlights = highlightsRef.current
+    const focusableElements = highlights.querySelectorAll<HTMLElement>(
+      'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+    )
+    const firstElement = focusableElements[0]
+    const lastElement = focusableElements[focusableElements.length - 1]
+
+    const handleTab = (e: KeyboardEvent) => {
+      if (e.key !== 'Tab') return
+
+      if (e.shiftKey) {
+        if (document.activeElement === firstElement) {
+          e.preventDefault()
+          lastElement?.focus()
+        }
+      } else {
+        if (document.activeElement === lastElement) {
+          e.preventDefault()
+          firstElement?.focus()
+        }
+      }
+    }
+
+    highlights.addEventListener('keydown', handleTab)
+    firstElement?.focus()
+
+    return () => {
+      highlights.removeEventListener('keydown', handleTab)
+    }
+  }, [isMobile, props.isHighlightsCollapsed])
+
+  const handleBackdropClick = () => {
+    if (isMobile) {
+      if (props.isSidebarOpen) {
+        props.onToggleSidebar()
+      } else if (!props.isHighlightsCollapsed) {
+        props.onToggleHighlightsPanel()
+      }
+    }
+  }
+
  return (
    <>
+      {/* Mobile bookmark button - only show when viewing article */}
+      {isMobile && !props.isSidebarOpen && props.isHighlightsCollapsed && (
+        <button
+          className={`mobile-hamburger-btn ${showMobileButtons ? 'visible' : 'hidden'}`}
+          onClick={props.onToggleSidebar}
+          aria-label="Open bookmarks"
+          aria-expanded={props.isSidebarOpen}
+        >
+          <FontAwesomeIcon icon={faBookmark} />
+        </button>
+      )}
+
+      {/* 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}
+        >
+          <FontAwesomeIcon icon={faHighlighter} />
+        </button>
+      )}
+
+      {/* Mobile backdrop */}
+      {isMobile && (
+        <div
+          className={`mobile-sidebar-backdrop ${(props.isSidebarOpen || !props.isHighlightsCollapsed) ? 'visible' : ''}`}
+          onClick={handleBackdropClick}
+          aria-hidden="true"
+        />
+      )}
+
      <div className={`three-pane ${props.isCollapsed ? 'sidebar-collapsed' : ''} ${props.isHighlightsCollapsed ? 'highlights-collapsed' : ''}`}>
-        <div className="pane sidebar">
+        <div 
+          ref={sidebarRef}
+          className={`pane sidebar ${isMobile && props.isSidebarOpen ? 'mobile-open' : ''}`}
+          aria-hidden={isMobile && !props.isSidebarOpen}
+        >
          <BookmarkList 
            bookmarks={props.bookmarks}
            onSelectUrl={props.onSelectUrl}
-            isCollapsed={props.isCollapsed}
+            isCollapsed={isMobile ? false : props.isCollapsed}
            onToggleCollapse={props.onToggleSidebar}
            onLogout={props.onLogout}
            viewMode={props.viewMode}
@@ -99,9 +277,13 @@ const ThreePaneLayout: React.FC<ThreePaneLayoutProps> = (props) => {
            loading={props.bookmarksLoading}
            relayPool={props.relayPool}
            settings={props.settings}
+            isMobile={isMobile}
          />
        </div>
-        <div className="pane main">
+        <div 
+          ref={mainPaneRef}
+          className={`pane main ${isMobile && (props.isSidebarOpen || !props.isHighlightsCollapsed) ? 'mobile-hidden' : ''}`}
+        >
          {props.showSettings ? (
            <Settings 
              settings={props.settings}
@@ -114,6 +296,11 @@ const ThreePaneLayout: React.FC<ThreePaneLayoutProps> = (props) => {
            <>
              {props.explore}
            </>
+          ) : props.showMe && props.me ? (
+            // Render Me inside the main pane to keep side panels
+            <>
+              {props.me}
+            </>
          ) : (
            <ContentPanel 
              loading={props.readerLoading}
@@ -136,10 +323,17 @@ const ThreePaneLayout: React.FC<ThreePaneLayoutProps> = (props) => {
              currentUserPubkey={props.currentUserPubkey}
              followedPubkeys={props.followedPubkeys}
              settings={props.settings}
+              relayPool={props.relayPool}
+              activeAccount={props.activeAccount}
+              currentArticle={props.currentArticle}
            />
          )}
        </div>
-        <div className="pane highlights">
+        <div 
+          ref={highlightsRef}
+          className={`pane highlights ${isMobile && !props.isHighlightsCollapsed ? 'mobile-open' : ''}`}
+          aria-hidden={isMobile && props.isHighlightsCollapsed}
+        >
          <HighlightsPanel
            highlights={props.highlights}
            loading={props.highlightsLoading}
--- a/src/hooks/useBookmarksData.ts
+++ b/src/hooks/useBookmarksData.ts
@@ -110,7 +110,7 @@ export const useBookmarksData = ({
      handleFetchHighlights()
    }
    handleFetchContacts()
-  }, [relayPool, activeAccount?.pubkey, naddr, handleFetchBookmarks, handleFetchHighlights, handleFetchContacts])
+  }, [relayPool, activeAccount, naddr, handleFetchBookmarks, handleFetchHighlights, handleFetchContacts])

  return {
    bookmarks,
--- a/src/hooks/useBookmarksUI.ts
+++ b/src/hooks/useBookmarksUI.ts
@@ -3,12 +3,15 @@ import { NostrEvent } from 'nostr-tools'
 import { HighlightVisibility } from '../components/HighlightsPanel'
 import { UserSettings } from '../services/settingsService'
 import { ViewMode } from '../components/Bookmarks'
+import { useIsMobile } from './useMediaQuery'

 interface UseBookmarksUIParams {
  settings: UserSettings
 }

 export const useBookmarksUI = ({ settings }: UseBookmarksUIParams) => {
+  const isMobile = useIsMobile()
+  const [isSidebarOpen, setIsSidebarOpen] = useState(false)
  const [isCollapsed, setIsCollapsed] = useState(true)
  const [isHighlightsCollapsed, setIsHighlightsCollapsed] = useState(true)
  const [viewMode, setViewMode] = useState<ViewMode>('compact')
@@ -23,6 +26,16 @@ export const useBookmarksUI = ({ settings }: UseBookmarksUIParams) => {
    mine: true
  })

+  // Auto-collapse sidebar on mobile based on settings
+  useEffect(() => {
+    const autoCollapse = settings.autoCollapseSidebarOnMobile !== false
+    if (isMobile && autoCollapse) {
+      setIsSidebarOpen(false)
+    } else if (!isMobile) {
+      setIsSidebarOpen(true)
+    }
+  }, [isMobile, settings.autoCollapseSidebarOnMobile])
+
  // Apply UI settings
  useEffect(() => {
    if (settings.defaultViewMode) setViewMode(settings.defaultViewMode)
@@ -34,7 +47,15 @@ export const useBookmarksUI = ({ settings }: UseBookmarksUIParams) => {
    })
  }, [settings])

+  const toggleSidebar = () => {
+    setIsSidebarOpen(prev => !prev)
+  }
+
  return {
+    isMobile,
+    isSidebarOpen,
+    setIsSidebarOpen,
+    toggleSidebar,
    isCollapsed,
    setIsCollapsed,
    isHighlightsCollapsed,
--- a/src/hooks/useHighlightInteractions.ts
+++ b/src/hooks/useHighlightInteractions.ts
@@ -56,8 +56,8 @@ export const useHighlightInteractions = ({
    }
  }, [selectedHighlightId])

-  // Handle text selection
-  const handleMouseUp = useCallback(() => {
+  // Handle text selection (works for both mouse and touch)
+  const handleSelectionEnd = useCallback(() => {
    setTimeout(() => {
      const selection = window.getSelection()
      if (!selection || selection.rangeCount === 0) {
@@ -76,6 +76,6 @@ export const useHighlightInteractions = ({
    }, 10)
  }, [onTextSelection, onClearSelection])

-  return { contentRef, handleMouseUp }
+  return { contentRef, handleSelectionEnd }
 }

--- a/src/hooks/useMarkdownToHTML.ts
+++ b/src/hooks/useMarkdownToHTML.ts
@@ -1,34 +1,86 @@
 import React, { useState, useEffect, useRef } from 'react'
+import { RelayPool } from 'applesauce-relay'
+import { extractNaddrUris, replaceNostrUrisInMarkdown, replaceNostrUrisInMarkdownWithTitles } from '../utils/nostrUriResolver'
+import { fetchArticleTitles } from '../services/articleTitleResolver'

 /**
 * Hook to convert markdown to HTML using a hidden ReactMarkdown component
+ * Also processes nostr: URIs in the markdown and resolves article titles
 */
-export const useMarkdownToHTML = (markdown?: string): { renderedHtml: string, previewRef: React.RefObject<HTMLDivElement> } => {
+export const useMarkdownToHTML = (
+  markdown?: string,
+  relayPool?: RelayPool | null
+): { 
+  renderedHtml: string
+  previewRef: React.RefObject<HTMLDivElement>
+  processedMarkdown: string 
+} => {
  const previewRef = useRef<HTMLDivElement>(null)
  const [renderedHtml, setRenderedHtml] = useState<string>('')
+  const [processedMarkdown, setProcessedMarkdown] = useState<string>('')

  useEffect(() => {
    if (!markdown) {
      setRenderedHtml('')
+      setProcessedMarkdown('')
      return
    }

-    console.log('📝 Converting markdown to HTML...')
-    
-    const rafId = requestAnimationFrame(() => {
-      if (previewRef.current) {
-        const html = previewRef.current.innerHTML
-        console.log('✅ Markdown converted to HTML:', html.length, 'chars')
-        setRenderedHtml(html)
+    let isCancelled = false
+
+    const processMarkdown = async () => {
+      // Extract all naddr references
+      const naddrs = extractNaddrUris(markdown)
+      
+      let processed: string
+      
+      if (naddrs.length > 0 && relayPool) {
+        // Fetch article titles for all naddrs
+        try {
+          const articleTitles = await fetchArticleTitles(relayPool, naddrs)
+          
+          if (isCancelled) return
+          
+          // Replace nostr URIs with resolved titles
+          processed = replaceNostrUrisInMarkdownWithTitles(markdown, articleTitles)
+          console.log(`📚 Resolved ${articleTitles.size} article titles`)
+        } catch (error) {
+          console.warn('Failed to fetch article titles:', error)
+          // Fall back to basic replacement
+          processed = replaceNostrUrisInMarkdown(markdown)
+        }
      } else {
-        console.warn('⚠️ markdownPreviewRef.current is null')
+        // No articles to resolve, use basic replacement
+        processed = replaceNostrUrisInMarkdown(markdown)
      }
-    })
+      
+      if (isCancelled) return
+      
+      setProcessedMarkdown(processed)

-    return () => cancelAnimationFrame(rafId)
-  }, [markdown])
+      console.log('📝 Converting markdown to HTML...')
+      
+      const rafId = requestAnimationFrame(() => {
+        if (previewRef.current && !isCancelled) {
+          const html = previewRef.current.innerHTML
+          console.log('✅ Markdown converted to HTML:', html.length, 'chars')
+          setRenderedHtml(html)
+        } else if (!isCancelled) {
+          console.warn('⚠️ markdownPreviewRef.current is null')
+        }
+      })

-  return { renderedHtml, previewRef }
+      return () => cancelAnimationFrame(rafId)
+    }
+
+    processMarkdown()
+
+    return () => {
+      isCancelled = true
+    }
+  }, [markdown, relayPool])
+
+  return { renderedHtml, previewRef, processedMarkdown }
 }

 // Removed separate useMarkdownPreviewRef; use useMarkdownToHTML to obtain previewRef
--- a/src/hooks/useMediaQuery.ts
+++ b/src/hooks/useMediaQuery.ts
@@ -0,0 +1,62 @@
+import { useState, useEffect } from 'react'
+
+/**
+ * Hook to detect if a media query matches
+ * @param query The media query string (e.g., '(max-width: 768px)')
+ * @returns true if the media query matches, false otherwise
+ */
+export function useMediaQuery(query: string): boolean {
+  const [matches, setMatches] = useState(() => {
+    if (typeof window === 'undefined') return false
+    return window.matchMedia(query).matches
+  })
+
+  useEffect(() => {
+    if (typeof window === 'undefined') return
+
+    const mediaQuery = window.matchMedia(query)
+    
+    // Update state if the media query changes
+    const handleChange = (event: MediaQueryListEvent) => {
+      setMatches(event.matches)
+    }
+
+    // Modern browsers
+    if (mediaQuery.addEventListener) {
+      mediaQuery.addEventListener('change', handleChange)
+      return () => mediaQuery.removeEventListener('change', handleChange)
+    } 
+    // Legacy browsers
+    else {
+      mediaQuery.addListener(handleChange)
+      return () => mediaQuery.removeListener(handleChange)
+    }
+  }, [query])
+
+  return matches
+}
+
+/**
+ * Hook to detect if the user is on a coarse pointer device (touch)
+ * @returns true if the user is using a coarse pointer (touch), false otherwise
+ */
+export function useIsCoarsePointer(): boolean {
+  return useMediaQuery('(pointer: coarse)')
+}
+
+/**
+ * Hook to detect if the viewport is mobile-sized
+ * @returns true if viewport width is <= 768px, false otherwise
+ */
+export function useIsMobile(): boolean {
+  return useMediaQuery('(max-width: 768px)')
+}
+
+/**
+ * Hook to detect if the viewport is tablet-sized
+ * @returns true if viewport width is <= 1024px, false otherwise
+ */
+export function useIsTablet(): boolean {
+  return useMediaQuery('(max-width: 1024px)')
+}
+
--- a/src/hooks/useOnlineStatus.ts
+++ b/src/hooks/useOnlineStatus.ts
@@ -0,0 +1,28 @@
+import { useState, useEffect } from 'react'
+
+export function useOnlineStatus() {
+  const [isOnline, setIsOnline] = useState(navigator.onLine)
+
+  useEffect(() => {
+    const handleOnline = () => {
+      console.log('🌐 Back online')
+      setIsOnline(true)
+    }
+
+    const handleOffline = () => {
+      console.log('📴 Gone offline')
+      setIsOnline(false)
+    }
+
+    window.addEventListener('online', handleOnline)
+    window.addEventListener('offline', handleOffline)
+
+    return () => {
+      window.removeEventListener('online', handleOnline)
+      window.removeEventListener('offline', handleOffline)
+    }
+  }, [])
+
+  return isOnline
+}
+
--- a/src/hooks/usePWAInstall.ts
+++ b/src/hooks/usePWAInstall.ts
@@ -0,0 +1,74 @@
+import { useState, useEffect } from 'react'
+
+interface BeforeInstallPromptEvent extends Event {
+  prompt: () => Promise<void>
+  userChoice: Promise<{ outcome: 'accepted' | 'dismissed' }>
+}
+
+export function usePWAInstall() {
+  const [deferredPrompt, setDeferredPrompt] = useState<BeforeInstallPromptEvent | null>(null)
+  const [isInstallable, setIsInstallable] = useState(false)
+  const [isInstalled, setIsInstalled] = useState(false)
+
+  useEffect(() => {
+    // Check if app is already installed
+    if (window.matchMedia('(display-mode: standalone)').matches) {
+      setIsInstalled(true)
+      return
+    }
+
+    // Listen for the beforeinstallprompt event
+    const handleBeforeInstallPrompt = (e: Event) => {
+      e.preventDefault()
+      const installPromptEvent = e as BeforeInstallPromptEvent
+      setDeferredPrompt(installPromptEvent)
+      setIsInstallable(true)
+    }
+
+    // Listen for successful installation
+    const handleAppInstalled = () => {
+      setIsInstalled(true)
+      setIsInstallable(false)
+      setDeferredPrompt(null)
+    }
+
+    window.addEventListener('beforeinstallprompt', handleBeforeInstallPrompt)
+    window.addEventListener('appinstalled', handleAppInstalled)
+
+    return () => {
+      window.removeEventListener('beforeinstallprompt', handleBeforeInstallPrompt)
+      window.removeEventListener('appinstalled', handleAppInstalled)
+    }
+  }, [])
+
+  const installApp = async () => {
+    if (!deferredPrompt) {
+      return false
+    }
+
+    try {
+      await deferredPrompt.prompt()
+      const choiceResult = await deferredPrompt.userChoice
+      
+      if (choiceResult.outcome === 'accepted') {
+        console.log('✅ PWA installed')
+        setIsInstallable(false)
+        setDeferredPrompt(null)
+        return true
+      } else {
+        console.log('❌ PWA installation dismissed')
+        return false
+      }
+    } catch (error) {
+      console.error('Error installing PWA:', error)
+      return false
+    }
+  }
+
+  return {
+    isInstallable,
+    isInstalled,
+    installApp,
+  }
+}
+
--- a/src/hooks/useScrollDirection.ts
+++ b/src/hooks/useScrollDirection.ts
@@ -0,0 +1,70 @@
+import { useState, useEffect, RefObject } from 'react'
+
+export type ScrollDirection = 'up' | 'down' | 'none'
+
+interface UseScrollDirectionOptions {
+  threshold?: number
+  enabled?: boolean
+  elementRef?: RefObject<HTMLElement>
+}
+
+/**
+ * Hook to detect scroll direction on window or a specific element
+ * @param options Configuration options
+ * @param options.threshold Minimum scroll distance to trigger direction change (default: 10)
+ * @param options.enabled Whether scroll detection is enabled (default: true)
+ * @param options.elementRef Optional ref to a scrollable element (uses window if not provided)
+ * @returns Current scroll direction ('up', 'down', or 'none')
+ */
+export function useScrollDirection({ 
+  threshold = 10, 
+  enabled = true,
+  elementRef
+}: UseScrollDirectionOptions = {}): ScrollDirection {
+  const [scrollDirection, setScrollDirection] = useState<ScrollDirection>('none')
+
+  useEffect(() => {
+    if (!enabled) return
+
+    const scrollElement = elementRef?.current || window
+    const getScrollY = () => {
+      if (elementRef?.current) {
+        return elementRef.current.scrollTop
+      }
+      return window.scrollY
+    }
+
+    let lastScrollY = getScrollY()
+    let ticking = false
+
+    const updateScrollDirection = () => {
+      const scrollY = getScrollY()
+
+      // Only update if scroll distance exceeds threshold
+      if (Math.abs(scrollY - lastScrollY) < threshold) {
+        ticking = false
+        return
+      }
+
+      setScrollDirection(scrollY > lastScrollY ? 'down' : 'up')
+      lastScrollY = scrollY > 0 ? scrollY : 0
+      ticking = false
+    }
+
+    const onScroll = () => {
+      if (!ticking) {
+        window.requestAnimationFrame(updateScrollDirection)
+        ticking = true
+      }
+    }
+
+    scrollElement.addEventListener('scroll', onScroll)
+
+    return () => {
+      scrollElement.removeEventListener('scroll', onScroll)
+    }
+  }, [threshold, enabled, elementRef])
+
+  return scrollDirection
+}
+
--- a/src/index.css
+++ b/src/index.css
@@ -22,12 +22,40 @@
  --highlights-collapsed-width: 56px;
  --main-max-width: 900px;
  --main-horizontal-padding: 1rem;
+  
+  /* Mobile breakpoints */
+  --mobile-breakpoint: 768px;
+  --tablet-breakpoint: 1024px;
+  
+  /* Mobile touch target minimum */
+  --min-touch-target: 44px;
+  
+  /* Safe area insets for notched devices */
+  --safe-area-top: env(safe-area-inset-top, 0px);
+  --safe-area-bottom: env(safe-area-inset-bottom, 0px);
+  --safe-area-left: env(safe-area-inset-left, 0px);
+  --safe-area-right: env(safe-area-inset-right, 0px);
 }

 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 {
@@ -36,6 +64,12 @@ body {
  padding: 1rem;
 }

+@media (max-width: 768px) {
+  #root {
+    padding: 0;
+  }
+}
+
 .app {
  text-align: center;
  position: relative;
@@ -106,6 +140,58 @@ body {
  margin-left: auto;
 }

+.mobile-hamburger-btn {
+  display: none;
+  position: fixed;
+  top: 1rem;
+  left: 1rem;
+  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-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;
+  }
+}
+
 .view-mode-controls {
  display: flex;
  align-items: center;
@@ -301,6 +387,29 @@ body {

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

+/* Mobile touch target improvements */
+@media (max-width: 768px) {
+  .icon-button {
+    min-width: var(--min-touch-target);
+    min-height: var(--min-touch-target);
+  }
+}
+
+/* Disable hover effects on touch devices */
+@media (pointer: coarse) {
+  .icon-button:hover {
+    background: #2a2a2a;
+  }
+  
+  .icon-button.ghost:hover {
+    background: #2a2a2a;
+  }
+  
+  .icon-button:active {
+    background: #333;
+  }
+}
+
 .bookmark-events {
  margin: 1rem 0;
 }
@@ -370,6 +479,23 @@ body {
  text-decoration: underline;
 }

+.nostr-uri-link {
+  color: #007bff;
+  text-decoration: none;
+  font-family: monospace;
+  background: #f8f9fa;
+  padding: 0.2rem 0.4rem;
+  border-radius: 4px;
+  font-size: 0.9em;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+}
+
+.nostr-uri-link:hover {
+  background: #e9ecef;
+  text-decoration: underline;
+}
+
 .logout-button {
  background: #dc3545;
  color: white;
@@ -394,12 +520,24 @@ body {
  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;
 }

+.loading {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
 .bookmarks-list {
  display: flex;
  flex-direction: column;
@@ -428,6 +566,13 @@ body {
  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);
+  }
 }

 .three-pane.sidebar-collapsed {
@@ -442,6 +587,22 @@ body {
  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;
+  }
+  
+  .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%;
@@ -471,6 +632,144 @@ body {
  height: 100%;
 }

+/* Ensure panes are stacked in the correct order on desktop */
+@media (min-width: 769px) {
+  /* Desktop stacking to keep highlights above main without overlap */
+  .three-pane .pane.sidebar { z-index: 1; }
+  .three-pane .pane.main { z-index: 1; }
+  .three-pane .pane.highlights { z-index: 2; }
+}
+
+/* Mobile pane styles */
+@media (max-width: 768px) {
+  /* Both sidepanes slide in as overlays */
+  .pane.sidebar,
+  .pane.highlights {
+    position: fixed;
+    top: 0;
+    width: 85%;
+    max-width: 320px;
+    height: 100vh;
+    height: 100dvh;
+    background: #1a1a1a;
+    z-index: 1001; /* Above backdrop */
+    transition: transform 0.3s ease;
+    box-shadow: none;
+    display: flex;
+    flex-direction: column;
+  }
+  
+  /* Ensure content fills the mobile sidepanes */
+  .pane.sidebar > *,
+  .pane.highlights > * {
+    width: 100%;
+    height: 100%;
+  }
+  
+  /* Remove borders from containers in mobile overlays */
+  .pane.sidebar .bookmarks-container,
+  .pane.highlights .highlights-container {
+    border: none;
+    border-radius: 0;
+    flex: 1;
+    min-height: 0;
+  }
+  
+  /* Bookmarks sidebar from left */
+  .pane.sidebar {
+    left: 0;
+    transform: translateX(-100%);
+  }
+  
+  .pane.sidebar.mobile-open {
+    transform: translateX(0);
+    box-shadow: 4px 0 12px rgba(0, 0, 0, 0.5);
+  }
+  
+  /* 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;
+  }
+  
+  /* 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: 1rem;
+    right: 1rem;
+    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;
+  }
+  
+  .mobile-highlights-btn:active {
+    transform: scale(0.95);
+  }
+  
+  @media (max-width: 768px) {
+    .mobile-highlights-btn {
+      display: flex;
+    }
+  }
+}
+
 .reader {
  background: #1a1a1a;
  border: 1px solid #333;
@@ -662,6 +961,156 @@ body {
  padding: 0.1rem 0.3rem;
 }

+/* 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-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) {
+  .mark-as-read-container {
+    padding: 1.5rem 1rem;
+  }
+  
+  .mark-as-read-btn {
+    width: 100%;
+    max-width: 300px;
+  }
+}
+
+/* Author Card */
+.author-card-container {
+  display: flex;
+  justify-content: center;
+  padding: 2rem 1rem;
+}
+
+.author-card {
+  display: flex;
+  gap: 1rem;
+  padding: 1.5rem;
+  background: #1a1a1a;
+  border: 1px solid #333;
+  border-radius: 12px;
+  max-width: 600px;
+  width: 100%;
+}
+
+.author-card-avatar {
+  flex-shrink: 0;
+  width: 60px;
+  height: 60px;
+  border-radius: 50%;
+  overflow: hidden;
+  background: #2a2a2a;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #666;
+}
+
+.author-card-avatar img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.author-card-avatar svg {
+  font-size: 2.5rem;
+}
+
+.author-card-content {
+  flex: 1;
+  min-width: 0;
+}
+
+.author-card-name {
+  font-size: 1rem;
+  font-weight: 600;
+  color: #ddd;
+  margin-bottom: 0.5rem;
+}
+
+.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;
+}
+
+@media (max-width: 768px) {
+  .author-card-container {
+    padding: 1.5rem 1rem;
+  }
+  
+  .author-card {
+    padding: 1rem;
+  }
+  
+  .author-card-avatar {
+    width: 48px;
+    height: 48px;
+  }
+  
+  .author-card-avatar svg {
+    font-size: 2rem;
+  }
+  
+  .author-card-name {
+    font-size: 0.95rem;
+  }
+  
+  .author-card-bio {
+    font-size: 0.85rem;
+    -webkit-line-clamp: 2;
+  }
+}
+
 .bookmark-item {
  background: #1a1a1a;
  padding: 1.5rem;
@@ -742,6 +1191,20 @@ body {
  gap: 1.5rem;
 }

+@media (max-width: 768px) {
+  .bookmarks-grid {
+    gap: 0.75rem;
+  }
+  
+  .bookmarks-grid.bookmarks-compact {
+    gap: 0.25rem;
+  }
+  
+  .bookmarks-grid.bookmarks-large {
+    gap: 1rem;
+  }
+}
+
 .individual-bookmark {
  background: transparent;
  padding: 1rem;
@@ -1163,6 +1626,51 @@ body {
  border: 1px solid rgba(100, 108, 255, 0.4);
 }

+.reader-summary-below-image {
+  display: none;
+}
+
+@media (max-width: 768px) {
+  .reader-header-overlay .reader-summary.hide-on-mobile {
+    display: none;
+  }
+
+  .reader-summary-below-image {
+    display: block;
+    padding: 0 0 1.5rem 0;
+    margin-top: -1rem;
+  }
+
+  .reader-summary-below-image .reader-summary {
+    color: #aaa;
+    font-size: 1rem;
+    line-height: 1.6;
+    margin: 0;
+  }
+
+  .reader-hero-image {
+    min-height: 280px;
+    max-height: 400px;
+    height: 50vh;
+  }
+
+  .reader-hero-image img {
+    height: 100%;
+    width: 100%;
+    object-fit: cover;
+    object-position: center;
+  }
+
+  .reader-header-overlay {
+    padding: 1.5rem 1rem 1rem;
+  }
+
+  .reader-header-overlay .reader-title {
+    font-size: 1.5rem;
+    line-height: 1.3;
+  }
+}
+
 /* Private Bookmark Styles */
 .private-bookmark {
  background: #2a2a2a;
@@ -1576,13 +2084,19 @@ body {

 .highlight-relay-indicator {
  position: absolute;
-  bottom: -2px;
-  left: 0;
+  bottom: -4px;
+  left: -6px;
  font-size: 0.7rem;
  color: #888;
  opacity: 0.7;
  transition: all 0.2s ease;
  cursor: pointer;
+  padding: 4px;
+  min-width: 20px;
+  min-height: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }

 .highlight-relay-indicator:hover {
@@ -1595,6 +2109,58 @@ body {
  transform: scale(0.95);
 }

+.highlight-delete-btn {
+  position: absolute;
+  bottom: -4px;
+  right: -6px;
+  font-size: 0.7rem;
+  color: #888;
+  opacity: 0.7;
+  transition: all 0.2s ease;
+  cursor: pointer;
+  padding: 4px;
+  min-width: 20px;
+  min-height: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.highlight-delete-btn:hover {
+  opacity: 1;
+  color: #ff4444;
+  transform: scale(1.1);
+}
+
+.highlight-delete-btn:active {
+  transform: scale(0.95);
+}
+
+/* Mobile: Larger touch targets and better spacing */
+@media (max-width: 768px) {
+  .highlight-quote-icon {
+    min-width: 100px; /* Ensure enough space for both touch targets */
+  }
+  
+  .highlight-relay-indicator {
+    bottom: -8px;
+    left: -8px;
+    padding: 8px;
+    min-width: var(--min-touch-target);
+    min-height: var(--min-touch-target);
+    font-size: 0.85rem;
+  }
+  
+  .highlight-delete-btn {
+    bottom: -8px;
+    right: -8px;
+    padding: 8px;
+    min-width: var(--min-touch-target);
+    min-height: var(--min-touch-target);
+    font-size: 0.85rem;
+  }
+}
+
 /* Level-colored quote icon */
 .highlight-item.level-mine .highlight-quote-icon {
  color: var(--highlight-color-mine, #ffff00);
@@ -2303,6 +2869,27 @@ body {
  font-size: 0.95rem;
 }

+@media (max-width: 768px) {
+  .toast {
+    top: auto;
+    bottom: calc(1rem + var(--safe-area-bottom));
+    right: 1rem;
+    left: 1rem;
+    max-width: calc(100% - 2rem);
+  }
+  
+  @keyframes toast-slide-in {
+    from {
+      transform: translateY(100px);
+      opacity: 0;
+    }
+    to {
+      transform: translateY(0);
+      opacity: 1;
+    }
+  }
+}
+
 .toast-success {
  border-color: #28a745;
 }
@@ -2357,6 +2944,22 @@ body {
  box-sizing: border-box;
 }

+@media (max-width: 768px) {
+  .modal-overlay {
+    padding: 0;
+    align-items: flex-end;
+  }
+  
+  .modal-content {
+    max-width: 100%;
+    max-height: 95vh;
+    max-height: 95dvh;
+    border-radius: 16px 16px 0 0;
+    margin: 0;
+    padding-bottom: var(--safe-area-bottom);
+  }
+}
+
 .modal-header {
  display: flex;
  align-items: center;
@@ -2514,6 +3117,34 @@ body {
  cursor: default;
 }

+/* Mobile compact mode - just show icon */
+@media (max-width: 768px) {
+  .relay-status-indicator.mobile {
+    padding: 0.5rem;
+    width: var(--min-touch-target);
+    height: var(--min-touch-target);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    bottom: 1rem;
+    left: 1rem;
+  }
+
+  .relay-status-indicator.mobile.expanded {
+    width: auto;
+    padding: 0.75rem 1rem;
+    gap: 0.75rem;
+  }
+
+  .relay-status-indicator.mobile .relay-status-icon {
+    font-size: 1.1rem;
+  }
+
+  .relay-status-indicator.mobile:active {
+    transform: scale(0.95);
+  }
+}
+
 .relay-status-indicator.connecting {
  background: rgba(100, 108, 255, 0.15);
  border: 1px solid rgba(100, 108, 255, 0.25);
@@ -2751,4 +3382,170 @@ body {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
+
+  .blog-post-card-summary {
+    -webkit-line-clamp: 2;
+    font-size: 0.8rem;
+  }
+
+  .blog-post-card-content {
+    padding: 1rem;
+  }
+}
+
+/* Confirmation Dialog */
+.confirm-dialog-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.75);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 10000;
+  backdrop-filter: blur(4px);
+}
+
+.confirm-dialog {
+  background: #1a1a1a;
+  border: 1px solid #333;
+  border-radius: 12px;
+  padding: 2rem;
+  max-width: 400px;
+  width: 90%;
+  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1rem;
+}
+
+.confirm-dialog-icon {
+  width: 60px;
+  height: 60px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.75rem;
+}
+
+.confirm-dialog-icon.warning {
+  background: rgba(245, 158, 11, 0.15);
+  color: #f59e0b;
+  border: 2px solid rgba(245, 158, 11, 0.3);
+}
+
+.confirm-dialog-icon.danger {
+  background: rgba(239, 68, 68, 0.15);
+  color: #ef4444;
+  border: 2px solid rgba(239, 68, 68, 0.3);
+}
+
+.confirm-dialog-icon.info {
+  background: rgba(59, 130, 246, 0.15);
+  color: #3b82f6;
+  border: 2px solid rgba(59, 130, 246, 0.3);
+}
+
+.confirm-dialog-title {
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: #ddd;
+  margin: 0;
+  text-align: center;
+}
+
+.confirm-dialog-message {
+  font-size: 0.95rem;
+  color: #999;
+  margin: 0;
+  text-align: center;
+  line-height: 1.5;
+}
+
+.confirm-dialog-actions {
+  display: flex;
+  gap: 0.75rem;
+  width: 100%;
+  margin-top: 0.5rem;
+}
+
+.confirm-dialog-btn {
+  flex: 1;
+  padding: 0.75rem 1.5rem;
+  border-radius: 8px;
+  font-size: 0.95rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  border: none;
+}
+
+.confirm-dialog-btn.cancel {
+  background: #2a2a2a;
+  color: #ddd;
+  border: 1px solid #444;
+}
+
+.confirm-dialog-btn.cancel:hover {
+  background: #333;
+  border-color: #555;
+}
+
+.confirm-dialog-btn.confirm {
+  color: #1a1a1a;
+}
+
+.confirm-dialog-btn.confirm.warning {
+  background: #f59e0b;
+}
+
+.confirm-dialog-btn.confirm.warning:hover {
+  background: #d97706;
+}
+
+.confirm-dialog-btn.confirm.danger {
+  background: #ef4444;
+  color: white;
+}
+
+.confirm-dialog-btn.confirm.danger:hover {
+  background: #dc2626;
+}
+
+.confirm-dialog-btn.confirm.info {
+  background: #3b82f6;
+  color: white;
+}
+
+.confirm-dialog-btn.confirm.info:hover {
+  background: #2563eb;
+}
+
+.confirm-dialog-btn:active {
+  transform: scale(0.98);
+}
+
+@media (max-width: 768px) {
+  .confirm-dialog {
+    padding: 1.5rem;
+    max-width: 90%;
+  }
+  
+  .confirm-dialog-icon {
+    width: 50px;
+    height: 50px;
+    font-size: 1.5rem;
+  }
+  
+  .confirm-dialog-title {
+    font-size: 1.1rem;
+  }
+  
+  .confirm-dialog-message {
+    font-size: 0.9rem;
+  }
 }
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -3,21 +3,31 @@ import ReactDOM from 'react-dom/client'
 import App from './App.tsx'
 import './index.css'

-// Register Service Worker for offline image caching
+// Register Service Worker for PWA functionality
 if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker
-      .register('/sw.js')
+      .register('/sw.js', { type: 'module' })
      .then(registration => {
        console.log('✅ Service Worker registered:', registration.scope)
        
-        // Update service worker when a new version is available
+        // Check for updates periodically
+        setInterval(() => {
+          registration.update()
+        }, 60 * 60 * 1000) // Check every hour
+        
+        // Handle service worker updates
        registration.addEventListener('updatefound', () => {
          const newWorker = registration.installing
          if (newWorker) {
            newWorker.addEventListener('statechange', () => {
-              if (newWorker.state === 'activated') {
-                console.log('🔄 Service Worker updated, page may need reload')
+              if (newWorker.state === 'installed' && navigator.serviceWorker.controller) {
+                // New service worker available
+                console.log('🔄 New version available! Reload to update.')
+                
+                // Optionally show a toast notification
+                const updateAvailable = new CustomEvent('sw-update-available')
+                window.dispatchEvent(updateAvailable)
              }
            })
          }
--- a/src/services/articleTitleResolver.ts
+++ b/src/services/articleTitleResolver.ts
@@ -0,0 +1,87 @@
+import { RelayPool, completeOnEose } from 'applesauce-relay'
+import { lastValueFrom, takeUntil, timer, toArray } from 'rxjs'
+import { nip19 } from 'nostr-tools'
+import { AddressPointer } from 'nostr-tools/nip19'
+import { Helpers } from 'applesauce-core'
+import { RELAYS } from '../config/relays'
+
+const { getArticleTitle } = Helpers
+
+/**
+ * Fetch article title for a single naddr
+ * Returns the title or null if not found/error
+ */
+export async function fetchArticleTitle(
+  relayPool: RelayPool,
+  naddr: string
+): Promise<string | null> {
+  try {
+    const decoded = nip19.decode(naddr)
+    
+    if (decoded.type !== 'naddr') {
+      return null
+    }
+
+    const pointer = decoded.data as AddressPointer
+
+    // Define relays to query
+    const relays = pointer.relays && pointer.relays.length > 0 
+      ? pointer.relays 
+      : RELAYS
+
+    // Fetch the article event
+    const filter = {
+      kinds: [pointer.kind],
+      authors: [pointer.pubkey],
+      '#d': [pointer.identifier]
+    }
+
+    const events = await lastValueFrom(
+      relayPool
+        .req(relays, filter)
+        .pipe(completeOnEose(), takeUntil(timer(5000)), toArray())
+    )
+
+    if (events.length === 0) {
+      return null
+    }
+
+    // Sort by created_at and take the most recent
+    events.sort((a, b) => b.created_at - a.created_at)
+    const article = events[0]
+
+    return getArticleTitle(article) || null
+  } catch (err) {
+    console.warn('Failed to fetch article title for', naddr, err)
+    return null
+  }
+}
+
+/**
+ * Fetch titles for multiple naddrs in parallel
+ * Returns a map of naddr -> title
+ */
+export async function fetchArticleTitles(
+  relayPool: RelayPool,
+  naddrs: string[]
+): Promise<Map<string, string>> {
+  const titleMap = new Map<string, string>()
+  
+  // Fetch all titles in parallel
+  const results = await Promise.allSettled(
+    naddrs.map(async (naddr) => {
+      const title = await fetchArticleTitle(relayPool, naddr)
+      return { naddr, title }
+    })
+  )
+
+  // Process results
+  results.forEach((result) => {
+    if (result.status === 'fulfilled' && result.value.title) {
+      titleMap.set(result.value.naddr, result.value.title)
+    }
+  })
+
+  return titleMap
+}
+
--- a/src/services/deletionService.ts
+++ b/src/services/deletionService.ts
@@ -0,0 +1,48 @@
+import { EventFactory } from 'applesauce-factory'
+import { RelayPool } from 'applesauce-relay'
+import { IAccount } from 'applesauce-accounts'
+import { NostrEvent } from 'nostr-tools'
+import { RELAYS } from '../config/relays'
+
+/**
+ * Creates a kind:5 event deletion request (NIP-09)
+ * @param eventId The ID of the event to delete
+ * @param eventKind The kind of the event being deleted
+ * @param reason Optional reason for deletion
+ * @param account The user's account for signing
+ * @param relayPool The relay pool for publishing
+ * @returns The signed deletion request event
+ */
+export async function createDeletionRequest(
+  eventId: string,
+  eventKind: number,
+  reason: string | undefined,
+  account: IAccount,
+  relayPool: RelayPool
+): Promise<NostrEvent> {
+  const factory = new EventFactory({ signer: account })
+
+  const tags: string[][] = [
+    ['e', eventId],
+    ['k', eventKind.toString()]
+  ]
+
+  const draft = await factory.create(async () => ({
+    kind: 5, // Event Deletion Request
+    content: reason || '',
+    tags,
+    created_at: Math.floor(Date.now() / 1000)
+  }))
+
+  const signed = await factory.sign(draft)
+
+  console.log('🗑️ Created kind:5 deletion request for event:', eventId.slice(0, 8))
+
+  // Publish to relays
+  await relayPool.publish(RELAYS, signed)
+
+  console.log('✅ Deletion request published to', RELAYS.length, 'relay(s)')
+
+  return signed
+}
+
--- a/src/services/reactionService.ts
+++ b/src/services/reactionService.ts
@@ -0,0 +1,103 @@
+import { EventFactory } from 'applesauce-factory'
+import { RelayPool } from 'applesauce-relay'
+import { IAccount } from 'applesauce-accounts'
+import { NostrEvent } from 'nostr-tools'
+import { RELAYS } from '../config/relays'
+
+const MARK_AS_READ_EMOJI = '📚'
+
+/**
+ * Creates a kind:7 reaction to a nostr event (for nostr-native articles)
+ * @param eventId The ID of the event being reacted to
+ * @param eventAuthor The pubkey of the event author
+ * @param eventKind The kind of the event being reacted to
+ * @param account The user's account for signing
+ * @param relayPool The relay pool for publishing
+ * @returns The signed reaction event
+ */
+export async function createEventReaction(
+  eventId: string,
+  eventAuthor: string,
+  eventKind: number,
+  account: IAccount,
+  relayPool: RelayPool
+): Promise<NostrEvent> {
+  const factory = new EventFactory({ signer: account })
+
+  const tags: string[][] = [
+    ['e', eventId],
+    ['p', eventAuthor],
+    ['k', eventKind.toString()]
+  ]
+
+  const draft = await factory.create(async () => ({
+    kind: 7, // Reaction
+    content: MARK_AS_READ_EMOJI,
+    tags,
+    created_at: Math.floor(Date.now() / 1000)
+  }))
+
+  const signed = await factory.sign(draft)
+
+  console.log('📚 Created kind:7 reaction (mark as read) for event:', eventId.slice(0, 8))
+
+  // Publish to relays
+  await relayPool.publish(RELAYS, signed)
+
+  console.log('✅ Reaction published to', RELAYS.length, 'relay(s)')
+
+  return signed
+}
+
+/**
+ * Creates a kind:17 reaction to a website (for external URLs)
+ * @param url The URL being reacted to
+ * @param account The user's account for signing
+ * @param relayPool The relay pool for publishing
+ * @returns The signed reaction event
+ */
+export async function createWebsiteReaction(
+  url: string,
+  account: IAccount,
+  relayPool: RelayPool
+): Promise<NostrEvent> {
+  const factory = new EventFactory({ signer: account })
+
+  // Normalize URL (remove fragments, trailing slashes as per NIP-25)
+  let normalizedUrl = url
+  try {
+    const parsed = new URL(url)
+    // Remove fragment
+    parsed.hash = ''
+    normalizedUrl = parsed.toString()
+    // Remove trailing slash if present
+    if (normalizedUrl.endsWith('/')) {
+      normalizedUrl = normalizedUrl.slice(0, -1)
+    }
+  } catch (error) {
+    console.warn('Failed to normalize URL:', error)
+  }
+
+  const tags: string[][] = [
+    ['r', normalizedUrl]
+  ]
+
+  const draft = await factory.create(async () => ({
+    kind: 17, // Reaction to a website
+    content: MARK_AS_READ_EMOJI,
+    tags,
+    created_at: Math.floor(Date.now() / 1000)
+  }))
+
+  const signed = await factory.sign(draft)
+
+  console.log('📚 Created kind:17 reaction (mark as read) for URL:', normalizedUrl)
+
+  // Publish to relays
+  await relayPool.publish(RELAYS, signed)
+
+  console.log('✅ Website reaction published to', RELAYS.length, 'relay(s)')
+
+  return signed
+}
+
--- a/src/services/settingsService.ts
+++ b/src/services/settingsService.ts
@@ -45,6 +45,8 @@ export interface UserSettings {
  // Image cache settings
  enableImageCache?: boolean // Enable caching images in localStorage
  imageCacheSizeMB?: number // Maximum cache size in megabytes (default: 210MB)
+  // Mobile settings
+  autoCollapseSidebarOnMobile?: boolean // Auto-collapse sidebar on mobile (default: true)
 }

 export async function loadSettings(
--- a/src/sw.ts
+++ b/src/sw.ts
@@ -0,0 +1,111 @@
+/// <reference lib="webworker" />
+/* eslint-env worker */
+/* global ServiceWorkerGlobalScope, ExtendableMessageEvent, FetchEvent */
+import { clientsClaim } from 'workbox-core'
+import { precacheAndRoute, cleanupOutdatedCaches } from 'workbox-precaching'
+import { registerRoute, NavigationRoute } from 'workbox-routing'
+import { StaleWhileRevalidate } from 'workbox-strategies'
+import { ExpirationPlugin } from 'workbox-expiration'
+import { CacheableResponsePlugin } from 'workbox-cacheable-response'
+
+// Narrow the global service worker scope for proper typings
+const sw = self as unknown as ServiceWorkerGlobalScope
+
+// Precache all build assets (app shell)
+// @ts-ignore - __WB_MANIFEST is injected by vite-plugin-pwa
+precacheAndRoute(self.__WB_MANIFEST)
+
+// Clean up old caches
+cleanupOutdatedCaches()
+
+// Take control immediately
+sw.skipWaiting()
+clientsClaim()
+
+console.log('[SW] Boris service worker loaded')
+
+// Runtime cache: Cross-origin images
+// This preserves the existing image caching behavior
+registerRoute(
+  ({ request, url }) => {
+    const isImage = request.destination === 'image' || 
+                    /\.(jpg|jpeg|png|gif|webp|svg)$/i.test(url.pathname)
+    return isImage && url.origin !== sw.location.origin
+  },
+  new StaleWhileRevalidate({
+    cacheName: 'boris-images',
+    plugins: [
+      new ExpirationPlugin({
+        maxEntries: 300,
+        maxAgeSeconds: 60 * 60 * 24 * 30, // 30 days
+      }),
+      new CacheableResponsePlugin({
+        statuses: [0, 200],
+      }),
+    ],
+  })
+)
+
+// Runtime cache: Cross-origin article HTML
+// Cache fetched articles for offline reading
+registerRoute(
+  ({ request, url }) => {
+    const accept = request.headers.get('accept') || ''
+    const isHTML = accept.includes('text/html')
+    const isCrossOrigin = url.origin !== sw.location.origin
+    // Exclude relay connections and local URLs
+    const isNotRelay = !url.protocol.includes('ws')
+    return isHTML && isCrossOrigin && isNotRelay
+  },
+  new StaleWhileRevalidate({
+    cacheName: 'boris-articles',
+    plugins: [
+      new ExpirationPlugin({
+        maxEntries: 100,
+        maxAgeSeconds: 60 * 60 * 24 * 14, // 14 days
+      }),
+      new CacheableResponsePlugin({
+        statuses: [0, 200],
+      }),
+    ],
+  })
+)
+
+// SPA navigation fallback - serve app shell for navigation requests
+// This ensures the app loads offline
+const navigationRoute = new NavigationRoute(
+  async ({ request }) => {
+    try {
+      // Try to fetch from network first
+      const response = await fetch(request)
+      return response
+    } catch (error) {
+      // If offline, serve the cached app shell
+      const cache = await caches.match('/index.html')
+      if (cache) {
+        return cache
+      }
+      throw error
+    }
+  }
+)
+
+registerRoute(navigationRoute)
+
+// Listen for messages from the app
+sw.addEventListener('message', (event: ExtendableMessageEvent) => {
+  if (event.data && event.data.type === 'SKIP_WAITING') {
+    sw.skipWaiting()
+  }
+})
+
+// Log fetch errors for debugging (doesn't affect functionality)
+sw.addEventListener('fetch', (event: FetchEvent) => {
+  const url = new URL(event.request.url)
+  
+  // Don't interfere with WebSocket connections (relay traffic)
+  if (url.protocol === 'ws:' || url.protocol === 'wss:') {
+    return
+  }
+})
+
--- a/src/utils/nostrUriResolver.tsx
+++ b/src/utils/nostrUriResolver.tsx
@@ -0,0 +1,188 @@
+import { decode, npubEncode, noteEncode } from 'nostr-tools/nip19'
+
+/**
+ * Regular expression to match nostr: URIs and bare NIP-19 identifiers
+ * Matches: nostr:npub1..., nostr:note1..., nostr:nprofile1..., nostr:nevent1..., nostr:naddr1...
+ * Also matches bare identifiers without the nostr: prefix
+ */
+const NOSTR_URI_REGEX = /(?:nostr:)?((npub|note|nprofile|nevent|naddr)1[qpzry9x8gf2tvdw0s3jn54khce6mua7l]{58,})/gi
+
+/**
+ * Extract all nostr URIs from text
+ */
+export function extractNostrUris(text: string): string[] {
+  const matches = text.match(NOSTR_URI_REGEX)
+  if (!matches) return []
+  
+  // Extract just the NIP-19 identifier (without nostr: prefix)
+  return matches.map(match => {
+    const cleanMatch = match.replace(/^nostr:/, '')
+    return cleanMatch
+  })
+}
+
+/**
+ * Extract all naddr (article) identifiers from text
+ */
+export function extractNaddrUris(text: string): string[] {
+  const allUris = extractNostrUris(text)
+  return allUris.filter(uri => {
+    try {
+      const decoded = decode(uri)
+      return decoded.type === 'naddr'
+    } catch {
+      return false
+    }
+  })
+}
+
+/**
+ * Decode a NIP-19 identifier and return a human-readable link
+ * For articles (naddr), returns an internal app link
+ * For other types, returns an external njump.me link
+ */
+export function createNostrLink(encoded: string): string {
+  try {
+    const decoded = decode(encoded)
+    
+    switch (decoded.type) {
+      case 'naddr':
+        // For articles, link to our internal app route
+        return `/a/${encoded}`
+      case 'npub':
+      case 'nprofile':
+      case 'note':
+      case 'nevent':
+        return `https://njump.me/${encoded}`
+      default:
+        return `https://njump.me/${encoded}`
+    }
+  } catch (error) {
+    console.warn('Failed to decode nostr URI:', encoded, error)
+    return `https://njump.me/${encoded}`
+  }
+}
+
+/**
+ * Get a display label for a nostr URI
+ */
+export function getNostrUriLabel(encoded: string): string {
+  try {
+    const decoded = decode(encoded)
+    
+    switch (decoded.type) {
+      case 'npub':
+        return `@${encoded.slice(0, 12)}...`
+      case 'nprofile': {
+        const npub = npubEncode(decoded.data.pubkey)
+        return `@${npub.slice(0, 12)}...`
+      }
+      case 'note':
+        return `note:${encoded.slice(5, 12)}...`
+      case 'nevent': {
+        const note = noteEncode(decoded.data.id)
+        return `note:${note.slice(5, 12)}...`
+      }
+      case 'naddr': {
+        // For articles, show the identifier if available
+        const identifier = decoded.data.identifier
+        if (identifier && identifier.length > 0) {
+          // Truncate long identifiers but keep them readable
+          return identifier.length > 40 ? `${identifier.slice(0, 37)}...` : identifier
+        }
+        return 'nostr article'
+      }
+      default:
+        return encoded.slice(0, 16) + '...'
+    }
+  } catch (error) {
+    return encoded.slice(0, 16) + '...'
+  }
+}
+
+/**
+ * Replace nostr: URIs in markdown with proper markdown links
+ * This converts: nostr:npub1... to [label](link)
+ */
+export function replaceNostrUrisInMarkdown(markdown: string): string {
+  return markdown.replace(NOSTR_URI_REGEX, (match) => {
+    // Extract just the NIP-19 identifier (without nostr: prefix)
+    const encoded = match.replace(/^nostr:/, '')
+    const link = createNostrLink(encoded)
+    const label = getNostrUriLabel(encoded)
+    
+    return `[${label}](${link})`
+  })
+}
+
+/**
+ * Replace nostr: URIs in markdown with proper markdown links, using resolved titles for articles
+ * This converts: nostr:naddr1... to [Article Title](link)
+ * @param markdown The markdown content to process
+ * @param articleTitles Map of naddr -> title for resolved articles
+ */
+export function replaceNostrUrisInMarkdownWithTitles(
+  markdown: string, 
+  articleTitles: Map<string, string>
+): string {
+  return markdown.replace(NOSTR_URI_REGEX, (match) => {
+    // Extract just the NIP-19 identifier (without nostr: prefix)
+    const encoded = match.replace(/^nostr:/, '')
+    const link = createNostrLink(encoded)
+    
+    // For articles, use the resolved title if available
+    try {
+      const decoded = decode(encoded)
+      if (decoded.type === 'naddr' && articleTitles.has(encoded)) {
+        const title = articleTitles.get(encoded)!
+        return `[${title}](${link})`
+      }
+    } catch (error) {
+      // Ignore decode errors, fall through to default label
+    }
+    
+    // For other types or if title not resolved, use default label
+    const label = getNostrUriLabel(encoded)
+    return `[${label}](${link})`
+  })
+}
+
+/**
+ * Replace nostr: URIs in HTML with clickable links
+ * This is used when processing HTML content directly
+ */
+export function replaceNostrUrisInHTML(html: string): string {
+  return html.replace(NOSTR_URI_REGEX, (match) => {
+    // Extract just the NIP-19 identifier (without nostr: prefix)
+    const encoded = match.replace(/^nostr:/, '')
+    const link = createNostrLink(encoded)
+    const label = getNostrUriLabel(encoded)
+    
+    return `<a href="${link}" class="nostr-uri-link" target="_blank" rel="noopener noreferrer">${label}</a>`
+  })
+}
+
+/**
+ * Get decoded information from a nostr URI for detailed display
+ */
+export function getNostrUriInfo(encoded: string): {
+  type: string
+  decoded: ReturnType<typeof decode> | null
+  link: string
+  label: string
+} {
+  let decoded: ReturnType<typeof decode> | null = null
+  try {
+    decoded = decode(encoded)
+  } catch (error) {
+    // ignore decoding errors
+  }
+  
+  return {
+    type: decoded?.type || 'unknown',
+    decoded,
+    link: createNostrLink(encoded),
+    label: getNostrUriLabel(encoded)
+  }
+}
+
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,8 +1,43 @@
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
+import { VitePWA } from 'vite-plugin-pwa'

 export default defineConfig({
-  plugins: [react()],
+  plugins: [
+    react(),
+    VitePWA({
+      strategies: 'injectManifest',
+      srcDir: 'src',
+      filename: 'sw.ts',
+      injectRegister: null,
+      manifest: {
+        name: 'Boris - Nostr Bookmarks',
+        short_name: 'Boris',
+        description: 'Your reading list for the Nostr world. A minimal nostr client for bookmark management with highlights.',
+        start_url: '/',
+        scope: '/',
+        display: 'standalone',
+        theme_color: '#0f172a',
+        background_color: '#0b1220',
+        orientation: 'any',
+        categories: ['productivity', 'social', 'utilities'],
+        icons: [
+          { src: '/icon-192.png', sizes: '192x192', type: 'image/png' },
+          { src: '/icon-512.png', sizes: '512x512', type: 'image/png' },
+          { src: '/icon-maskable-192.png', sizes: '192x192', type: 'image/png', purpose: 'maskable' },
+          { src: '/icon-maskable-512.png', sizes: '512x512', type: 'image/png', purpose: 'maskable' }
+        ]
+      },
+      injectManifest: {
+        globPatterns: ['**/*.{js,css,html,ico,png,svg,webp}'],
+        globIgnores: ['**/_headers', '**/_redirects', '**/robots.txt']
+      },
+      devOptions: {
+        enabled: true,
+        type: 'module'
+      }
+    })
+  ],
  server: {
    port: 9802
  },
Author	SHA1	Message	Date
Gigi	fd374cd705	docs: remove temporary PWA launch checklist and implementation summary	2025-10-12 07:18:20 +01:00
Gigi	20b4658bef	docs(pwa): update implementation summary to reflect final icons and next steps	2025-10-12 07:18:02 +01:00
Gigi	0850ba250c	chore(lint): fix service worker typings and satisfy ESLint for worker globals	2025-10-12 07:15:52 +01:00
Gigi	b71d188fd8	chore: remove favicon zip file after extraction	2025-10-11 21:01:27 +01:00
Gigi	579f6b9a96	docs: update PWA docs to reflect branded icons are now in place	2025-10-11 20:58:56 +01:00
Gigi	d9403a73c6	feat(icons): replace placeholder icons with branded favicons - Replace placeholder PWA icons with proper Boris-branded icons - Add favicon.ico, favicon-16x16.png, favicon-32x32.png - Add apple-touch-icon.png for iOS devices - Update index.html with proper favicon links - All icons extracted from boris-favicon.zip - PWA icons now use android-chrome-192x192 and android-chrome-512x512	2025-10-11 20:58:26 +01:00
Gigi	747811fa94	docs: add PWA launch checklist	2025-10-11 20:43:13 +01:00
Gigi	489e480394	docs: add PWA implementation summary and guide	2025-10-11 20:42:29 +01:00
Gigi	418bcb0295	feat(pwa): upgrade to full PWA with vite-plugin-pwa - Add web app manifest with proper metadata and icon support - Configure vite-plugin-pwa with injectManifest strategy - Migrate service worker to Workbox with precaching and runtime caching - Add runtime caching for cross-origin images (preserves existing behavior) - Add runtime caching for cross-origin article HTML for offline reading - Create PWA install hook and UI component in settings - Add online/offline status monitoring and toast notifications - Add service worker update notifications - Add placeholder PWA icons (192x192, 512x512, maskable variants) - Update HTML with manifest link and theme-color meta tag - Preserve existing relay/airplane mode functionality (WebSockets not intercepted) The app now passes PWA installability criteria while maintaining all existing offline functionality. Icons should be replaced with proper branded designs.	2025-10-11 20:41:49 +01:00
Gigi	88f01554e7	fix: improve mobile touch targets for highlight icons - Increase touch target size to 44x44px on mobile (relay & delete icons) - Add proper padding to both icons for larger tap area - Increase spacing between relay and delete icons - Expand quote icon container width on mobile to accommodate both targets - Increase icon font size on mobile (0.85rem) for better visibility - Move icons slightly outward (-8px) to prevent overlap Icons are now much easier to tap on mobile devices without accidentally hitting the wrong button.	2025-10-11 09:06:17 +01:00
Gigi	c85092a644	fix: color /me highlights with 'my highlights' color setting - Set level: 'mine' on all highlights in /me page - Highlights now use the customizable --highlight-color-mine CSS variable - Quote icons and borders automatically match user's color preference - Consistent styling with highlights shown elsewhere in the app	2025-10-11 09:04:48 +01:00
Gigi	096478bcec	feat: add author info card for nostr-native articles - Create AuthorCard component showing profile picture and bio - Display author card after mark as read button - Only shown for nostr-native articles (not external URLs) - Fetch author profile data using applesauce ProfileModel - Card displays author name, avatar, and bio (truncated to 3 lines) - Responsive design with smaller avatar on mobile - Elegant card styling matching app design system Author information helps readers learn more about article authors directly within the reading experience.	2025-10-11 08:55:37 +01:00
Gigi	b8de4a85e0	docs: update CHANGELOG for v0.4.3 release	2025-10-11 08:40:05 +01:00
Gigi	a5b7cedfaa	chore: bump version to 0.4.3	2025-10-11 08:39:16 +01:00
Gigi	0adb8d6766	feat: add highlight deletion with confirmation dialog - Create deletionService for NIP-09 kind:5 event deletion requests - Add ConfirmDialog component for user confirmation before deletion - Add subtle delete button to highlight items (trash icon) - Only show delete button for user's own highlights - Position delete button symmetrically opposite to relay indicator - Add confirmation dialog to prevent accidental deletions - Remove highlights from UI immediately after deletion request - Style delete button with red hover color - Add comprehensive confirmation dialog styling (danger/warning/info variants) Implements NIP-09 Event Deletion Request. Users can now delete their own highlights after confirming the action.	2025-10-11 08:38:22 +01:00
Gigi	6a6b8c4fad	feat: add mark as read button for articles - Create reactionService for handling kind:7 and kind:17 reactions - Add mark as read button at the end of articles (📚 emoji) - Use kind:7 reaction for nostr-native articles (/a/ paths) - Use kind:17 reaction for external websites (/r/ paths) - Pass activeAccount and currentArticle props through component tree - Add responsive styling for mark as read button - Button shows loading state while creating reaction - Only visible when user is logged in Implements NIP-25 (kind:7 reactions) and NIP-25 (kind:17 website reactions). Users can now mark articles as read, creating a permanent record on nostr.	2025-10-11 08:34:36 +01:00
Gigi	4f952816ea	feat: compact relay status indicator on mobile - Show only icon on mobile (44x44px touch target) - Tap to expand for full details - Smooth transition between compact and expanded states - Maintains full display on desktop - Reduces screen clutter on mobile while keeping info accessible Flight mode notice now just shows airplane icon on mobile. Tap it to see full connection details.	2025-10-11 08:09:29 +01:00
Gigi	76835e2509	feat: add /me page to show user's recent highlights - Create Me component to display logged-in user's highlights - Add /me route to App routing - Update SidebarHeader to navigate to /me when clicking profile avatar - Integrate Me page in ThreePaneLayout (same as Settings/Explore) - Show user profile info and highlight count - List all highlights created by the user Clicking the profile picture now takes you to your personal highlights page.	2025-10-11 08:07:20 +01:00
Gigi	63af770c83	docs: update CHANGELOG for v0.4.2 release	2025-10-11 03:25:11 +01:00
Gigi	165c427e5f	chore: bump version to 0.4.2	2025-10-11 03:24:15 +01:00
Gigi	a0e30aa197	fix: resolve all linting and type errors - Remove unused React import from nostrUriResolver - Add block scoping to switch case statements - Add react-hooks plugin to eslint config - Fix exhaustive-deps warnings in components - Fix DecodeResult type to use ReturnType<typeof decode> - Update dependency arrays to include all used values - Add eslint-disable comment for intentional dependency omission All linting warnings resolved. TypeScript type checking passes.	2025-10-11 03:23:38 +01:00
Gigi	3a8203d26e	fix: mobile button scroll detection on main pane element - Update useScrollDirection to accept elementRef parameter - Detect scroll on main pane div instead of window - Create mainPaneRef and attach to scrollable content area - Fix issue where scroll events weren't detected on mobile On mobile, content scrolls within .pane.main (overflow-y: auto) not on window. Now buttons properly hide on scroll down and show on scroll up.	2025-10-11 01:48:45 +01:00
Gigi	ffe848883e	feat: resolve and display article titles for naddr references - Add articleTitleResolver service to fetch article titles from relays - Extract naddr identifiers from markdown content - Fetch article titles in parallel using relay pool - Replace naddr references with actual article titles - Fallback to identifier if title fetch fails - Update markdown processing to be async for title resolution - Pass relayPool through component tree to enable resolution Example: nostr:naddr1... now shows as "My Article Title" instead of "article:identifier" Improves readability by showing human-friendly article titles in cross-references	2025-10-11 01:47:11 +01:00
Gigi	078a13c45d	fix: link naddr articles internally instead of to njump - Articles (naddr) now link to /a/{naddr} route (internal) - Other nostr identifiers still link to njump.me (external) - Improved article labels to show identifier instead of generic text - Better UX: clicking article references opens them in-app	2025-10-11 01:43:54 +01:00
Gigi	8a69d5bc6b	feat: resolve NIP-19 identifiers in article content - Add nostrUriResolver utility to detect and replace nostr: URIs - Support npub, note, nprofile, nevent, and naddr identifiers - Convert nostr: URIs to clickable njump.me links - Process markdown before rendering to handle nostr mentions - Add CSS styling for nostr-uri-link class - Implements NIP-19 and NIP-27 (nostr: URI scheme) Nostr-native articles can now contain references like: - nostr:npub1... → @npub1abc... - nostr:note1... → note:note1abc... - nostr:naddr1... → article:identifier All identifiers become clickable links to njump.me	2025-10-11 01:42:03 +01:00
Gigi	6783ff23f9	feat: auto-hide mobile buttons on scroll down - Add useScrollDirection hook for scroll direction detection - Hide bookmark and highlight buttons when scrolling down - Show buttons again when scrolling up - Smooth opacity transitions for better UX - Only detect scroll when buttons are visible - Improves mobile reading experience by maximizing content area	2025-10-11 01:39:24 +01:00
Gigi	72a264a01e	feat: auto-close sidebar on mobile when navigating to content - Add effect to close sidebar when route changes on mobile - Handles clicking on blog posts in Explore view - Complements existing sidebar auto-close for bookmarks and highlights - Improves mobile UX by preventing sidebar from blocking content	2025-10-11 01:37:46 +01:00
Gigi	5a67be8096	docs: update CHANGELOG for v0.4.1 release	2025-10-10 21:46:30 +01:00
Gigi	9a929a6be4	chore: bump version to 0.4.1	2025-10-10 21:45:41 +01:00
Gigi	e0ca010026	feat: improve hero image rendering with zoom-to-fit on mobile	2025-10-10 21:44:51 +01:00
Gigi	8bd5d7aadf	fix: move long article summaries below image on mobile to prevent overlay issues	2025-10-10 21:43:55 +01:00
Gigi	9115c38cde	fix: improve article summary display on mobile devices	2025-10-10 21:40:15 +01:00
Gigi	0c7c1d54d9	feat: add nstart.me onboarding link for new users	2025-10-10 21:26:06 +01:00
Gigi	d529d83eb8	fix: add touch event support for highlight creation on mobile	2025-10-10 21:24:46 +01:00
Gigi	a3127c7836	docs: update CHANGELOG for v0.4.0 release	2025-10-10 18:07:57 +01:00
Gigi	4d5fe1f425	chore: bump version to 0.4.0	2025-10-10 18:07:06 +01:00
Gigi	c7a4de9786	Merge pull request #1 from dergigi/mobile Add mobile responsive design	2025-10-10 18:04:54 +01:00
Gigi	d873718e88	fix: replace any type with proper bookmark interface for linter compliance	2025-10-10 18:03:48 +01:00
Gigi	706276839a	fix: reduce mobile backdrop opacity and ensure sidepanes appear above it	2025-10-10 18:01:39 +01:00
Gigi	d281ca5f87	fix: force bookmarks pane expanded on mobile and ensure highlights pane sits above content on desktop	2025-10-10 17:54:32 +01:00
Gigi	6a9036bfef	fix: add flex properties to mobile bookmark containers for proper filling	2025-10-10 17:25:40 +01:00
Gigi	1b242f75c6	fix: restore desktop grid layout for highlights panel	2025-10-10 17:24:26 +01:00
Gigi	7ffd37289d	fix: improve empty state and loading visibility in mobile sidepanes	2025-10-10 17:23:12 +01:00
Gigi	cb859ae599	fix: restore flex layout to highlights pane for desktop view	2025-10-10 17:22:14 +01:00
Gigi	a17346c9c2	fix: ensure bookmarks container fills mobile sidepane properly	2025-10-10 17:21:06 +01:00
Gigi	c17a39588d	refactor: DRY mobile sidepane styles - unified overlay behavior	2025-10-10 17:19:14 +01:00
Gigi	33cee9c0c2	feat: hide main content when sidepanes open on mobile for single-pane view	2025-10-10 17:11:26 +01:00
Gigi	e6d2920c27	feat: add mobile highlights panel as overlay with toggle button	2025-10-10 17:10:48 +01:00
Gigi	d8195dbe2a	refactor: replace hamburger icon with bookmark icon on mobile	2025-10-10 17:08:36 +01:00
Gigi	4843f129c4	docs: update CHANGELOG with mobile implementation	2025-10-10 17:03:07 +01:00
Gigi	fcd1218dc4	docs: add comprehensive mobile implementation documentation	2025-10-10 17:02:46 +01:00
Gigi	eef0f971d7	fix: resolve TypeScript errors for mobile implementation	2025-10-10 17:01:57 +01:00
Gigi	ff09a8aba0	feat: add mobile auto-collapse setting	2025-10-10 17:00:52 +01:00
Gigi	0c4b523d05	feat: implement mobile overlay sidebar with focus trap and ESC handling	2025-10-10 17:00:03 +01:00
Gigi	de7a435a01	feat: add mobile-responsive CSS with breakpoints and safe areas	2025-10-10 16:57:56 +01:00
Gigi	124d399d1f	feat: add mobile sidebar state management to useBookmarksUI	2025-10-10 16:56:19 +01:00
Gigi	e22cf71b15	feat: add media query hooks for responsive design	2025-10-10 16:55:53 +01:00
Gigi	670997ed36	feat: update viewport meta for mobile support	2025-10-10 16:55:39 +01:00
Gigi	1ccb6388e3	docs: update CHANGELOG for v0.3.8	2025-10-10 16:30:57 +01:00