chore: bump version to 0.4.2

- 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.

.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.)

CHANGELOG.md

@@ -5,6 +5,63 @@ 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.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
+- Logout button functionality - now properly clears active account using clearActive() method
+
 ## [0.3.6] - 2025-10-10
 
 ### Added
@@ -533,6 +590,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

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`
+

index.html

@@ -3,7 +3,7 @@
   <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" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
     <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/" />

package.json

@@ -1,6 +1,6 @@
 {
   "name": "boris",
-  "version": "0.3.7",
+  "version": "0.4.2",
   "description": "A minimal nostr client for bookmark management",
   "homepage": "https://read.withboris.com/",
   "type": "module",
@@ -59,7 +59,8 @@
     "parser": "@typescript-eslint/parser",
     "plugins": [
       "@typescript-eslint",
-      "react-refresh"
+      "react-refresh",
+      "react-hooks"
     ],
     "rules": {
       "react-refresh/only-export-components": [
@@ -68,6 +69,7 @@
           "allowConstantExport": true
         }
       ],
+      "react-hooks/exhaustive-deps": "warn",
       "@typescript-eslint/no-unused-vars": [
         "error",
         {

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()

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">

src/components/Bookmarks.tsx

@@ -67,6 +67,9 @@ const Bookmarks: React.FC<BookmarksProps> = ({ relayPool, onLogout }) => {
   })
 
   const {
+    isMobile,
+    isSidebarOpen,
+    toggleSidebar,
     isCollapsed,
     setIsCollapsed,
     isHighlightsCollapsed,
@@ -87,6 +90,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 +127,7 @@ const Bookmarks: React.FC<BookmarksProps> = ({ relayPool, onLogout }) => {
     setReaderLoading,
     readerContent,
     setReaderContent,
-    handleSelectUrl
+    handleSelectUrl: baseHandleSelectUrl
   } = useContentSelection({
     relayPool,
     settings,
@@ -125,6 +136,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,6 +199,7 @@ const Bookmarks: React.FC<BookmarksProps> = ({ relayPool, onLogout }) => {
     <ThreePaneLayout
       isCollapsed={isCollapsed}
       isHighlightsCollapsed={isHighlightsCollapsed}
+      isSidebarOpen={isSidebarOpen}
       showSettings={showSettings}
       showExplore={showExplore}
       bookmarks={bookmarks}
@@ -187,12 +207,16 @@ const Bookmarks: React.FC<BookmarksProps> = ({ relayPool, onLogout }) => {
       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}

src/components/ContentPanel.tsx

@@ -3,6 +3,7 @@ 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 { RelayPool } from 'applesauce-relay'
 import { Highlight } from '../types/highlights'
 import { readingTime } from 'reading-time-estimator'
 import { hexToRgb } from '../utils/colorHelpers'
@@ -32,6 +33,7 @@ interface ContentPanelProps {
   currentUserPubkey?: string
   followedPubkeys?: Set<string>
   settings?: UserSettings
+  relayPool?: RelayPool | null
   // For highlight creation
   onTextSelection?: (text: string) => void
   onClearSelection?: () => void
@@ -51,6 +53,7 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
   highlightStyle = 'marker',
   highlightColor = '#ffff00',
   settings,
+  relayPool,
   onHighlightClick,
   selectedHighlightId,
   highlightVisibility = { nostrverse: true, friends: true, mine: true },
@@ -59,7 +62,7 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
   onTextSelection,
   onClearSelection
 }) => {
-  const { renderedHtml: renderedMarkdownHtml, previewRef: markdownPreviewRef } = useMarkdownToHTML(markdown)
+  const { renderedHtml: renderedMarkdownHtml, previewRef: markdownPreviewRef, processedMarkdown } = useMarkdownToHTML(markdown, relayPool)
   
   const { finalHtml, relevantHighlights } = useHighlightedContent({
     html,
@@ -74,7 +77,7 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
     followedPubkeys
   })
 
-  const { contentRef, handleMouseUp } = useHighlightInteractions({
+  const { contentRef, handleSelectionEnd } = useHighlightInteractions({
     onHighlightClick,
     selectedHighlightId,
     onTextSelection,
@@ -116,7 +119,7 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
       {markdown && (
         <div ref={markdownPreviewRef} style={{ display: 'none' }}>
           <ReactMarkdown remarkPlugins={[remarkGfm]}>
-            {markdown}
+            {processedMarkdown || markdown}
           </ReactMarkdown>
         </div>
       )}
@@ -138,7 +141,8 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
               ref={contentRef} 
               className="reader-markdown" 
               dangerouslySetInnerHTML={{ __html: finalHtml }}
-              onMouseUp={handleMouseUp}
+              onMouseUp={handleSelectionEnd}
+              onTouchEnd={handleSelectionEnd}
             />
           ) : (
             <div className="reader-markdown">
@@ -152,7 +156,8 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
             ref={contentRef} 
             className="reader-html" 
             dangerouslySetInnerHTML={{ __html: finalHtml || html || '' }}
-            onMouseUp={handleMouseUp}
+            onMouseUp={handleSelectionEnd}
+            onTouchEnd={handleSelectionEnd}
           />
         )
       ) : (

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}

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>
+      </>
     )
   }
 

src/components/RelayStatusIndicator.tsx

@@ -52,7 +52,7 @@ 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

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>
   )
 }

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,14 +67,25 @@ 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" 

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,11 +18,14 @@ 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'
 
 interface ThreePaneLayoutProps {
   // Layout state
   isCollapsed: boolean
   isHighlightsCollapsed: boolean
+  isSidebarOpen: boolean
   showSettings: boolean
   showExplore?: boolean
   
@@ -79,14 +84,179 @@ interface ThreePaneLayoutProps {
 }
 
 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 +269,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}
@@ -136,10 +310,15 @@ const ThreePaneLayout: React.FC<ThreePaneLayoutProps> = (props) => {
               currentUserPubkey={props.currentUserPubkey}
               followedPubkeys={props.followedPubkeys}
               settings={props.settings}
+              relayPool={props.relayPool}
             />
           )}
         </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}

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,

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,

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 }
 }
 

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

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)')
+}
+

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
+}
+

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;
@@ -742,6 +1041,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 +1476,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;
@@ -2303,6 +2661,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 +2736,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;
@@ -2751,4 +3146,13 @@ 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;
+  }
 }

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
+}
+

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(

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)
+  }
+}
+

vercel.json

@@ -0,0 +1,9 @@
+{
+  "rewrites": [
+    {
+      "source": "/(.*)",
+      "destination": "/index.html"
+    }
+  ]
+}
+