chore: bump version to 0.5.3

- Change .profile-avatar svg font-size from 1rem to 1.25rem
- Matches size of other icon buttons in sidebar header

CHANGELOG.md

@@ -7,6 +7,77 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [0.5.2] - 2025-10-12
+
+### Added
+- Three-dot menu to highlight cards for more compact UI
+  - Combines "Open on Nostr" and "Delete" actions into dropdown menu
+  - Uses horizontal ellipsis icon (⋯)
+  - Click-outside functionality to close menu
+
+### Changed
+- Switch Nostr gateway from njump.me/search.dergigi.com to ants.sh
+  - Centralized gateway URLs in config file
+  - All profile and event links now use ants.sh
+  - Automatic detection of identifier type (profile vs event) for proper routing
+- Remove loading text from Explore and Me pages (spinner only)
+- "Open on Nostr" now links to the highlight event itself instead of the article
+
+### Fixed
+- Gateway URL routing for ants.sh requirements (/p/ for profiles, /e/ for events)
+- Linting errors in HighlightItem component
+
+## [0.5.1] - 2025-10-12
+
+### Added
+- Highlight color customization to UI elements
+  - Apply user's "my highlights" color to highlight creation buttons
+  - Apply highlight group colors to highlight count indicators
+  - Apply "my highlights" color to collapsed highlights panel button
+
+### Fixed
+- Highlight count indicator styling to match reading-time element
+- Brightness and border styling for highlight count indicator
+- User highlight color now applies to both marker and arrow icons
+- Highlight group color properly applied to count indicator background
+
+### Removed
+- MOBILE_IMPLEMENTATION.md documentation file
+
+## [0.5.0] - 2025-10-12
+
+### Added
+- Upgrade to full PWA with `vite-plugin-pwa`
+- Replace placeholder icons with branded favicons
+- Author info card for nostr-native articles
+
+### Changed
+- Explore: shrink refresh spinner footprint; inline-sized loading row
+- Explore: preserve posts across navigations; seed from cache; merge streamed and final results
+- Explore: keep posts visible during refresh; inline spinner; no list wipe
+- Bookmarks: keep list visible during refresh; show spinner only; no wipe
+- Bookmarks: avoid clearing list when no new events; decouple refetch from route changes
+- Highlights: split service into smaller modules to keep files under 210 lines
+- Lint/TypeScript: satisfy react-hooks dependencies; fix worker typings; clear ESLint/TS issues
+
+### Fixed
+- Highlights: merge remote results after local for article/url
+- Explore: always query remote relays after local; stream merge into UI
+- Improve mobile touch targets for highlight icons
+- Color `/me` highlights with "my highlights" color setting
+
+### Performance
+- Local-first then remote follow-up across services (titles, bookmarks, highlights)
+- Run local and remote fetches concurrently; stream and dedupe results
+- Stream contacts and early posts from local; merge remote later
+- Relay queries use local-first with short timeouts; fallback to remote when needed
+- Stream results to UI; display cached/local immediately (articles, highlights, explore)
+
+### Documentation
+- PWA implementation summary and launch checklist updates
+- Update docs to reflect branded icons and final steps
+- Remove temporary PWA launch checklist and implementation summary
+
 ## [0.4.3] - 2025-10-11
 
 ### Added
@@ -658,6 +729,10 @@ 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
 
+[Unreleased]: https://github.com/dergigi/boris/compare/v0.5.2...HEAD
+[0.5.2]: https://github.com/dergigi/boris/compare/v0.5.1...v0.5.2
+[0.5.1]: https://github.com/dergigi/boris/compare/v0.5.0...v0.5.1
+[0.5.0]: https://github.com/dergigi/boris/compare/v0.4.3...v0.5.0
 [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

MOBILE_IMPLEMENTATION.md

@@ -1,156 +0,0 @@
-# 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`
-

package.json

@@ -1,6 +1,6 @@
 {
   "name": "boris",
-  "version": "0.5.0",
+  "version": "0.5.3",
   "description": "A minimal nostr client for bookmark management",
   "homepage": "https://read.withboris.com/",
   "type": "module",

src/components/BookmarkViews/CardView.tsx

@@ -9,6 +9,7 @@ import { classifyUrl } from '../../utils/helpers'
 import { IconGetter } from './shared'
 import { useImageCache } from '../../hooks/useImageCache'
 import { UserSettings } from '../../services/settingsService'
+import { getProfileUrl, getEventUrl } from '../../config/nostrGateways'
 
 interface CardViewProps {
   bookmark: IndividualBookmark
@@ -79,7 +80,7 @@ export const CardView: React.FC<CardViewProps> = ({
         
         {eventNevent ? (
           <a
-            href={`https://search.dergigi.com/e/${eventNevent}`}
+            href={getEventUrl(eventNevent)}
             target="_blank"
             rel="noopener noreferrer"
             className="bookmark-date-link"
@@ -159,7 +160,7 @@ export const CardView: React.FC<CardViewProps> = ({
       <div className="bookmark-footer">
         <div className="bookmark-meta-minimal">
           <a
-            href={`https://search.dergigi.com/p/${authorNpub}`}
+            href={getProfileUrl(authorNpub)}
             target="_blank"
             rel="noopener noreferrer"
             className="author-link-minimal"

src/components/BookmarkViews/LargeView.tsx

@@ -6,6 +6,7 @@ import ContentWithResolvedProfiles from '../ContentWithResolvedProfiles'
 import { IconGetter } from './shared'
 import { useImageCache } from '../../hooks/useImageCache'
 import { UserSettings } from '../../services/settingsService'
+import { getProfileUrl, getEventUrl } from '../../config/nostrGateways'
 
 interface LargeViewProps {
   bookmark: IndividualBookmark
@@ -79,7 +80,7 @@ export const LargeView: React.FC<LargeViewProps> = ({
         <div className="large-footer">
           <span className="large-author">
             <a
-              href={`https://search.dergigi.com/p/${authorNpub}`}
+              href={getProfileUrl(authorNpub)}
               target="_blank"
               rel="noopener noreferrer"
               className="author-link-minimal"
@@ -90,7 +91,7 @@ export const LargeView: React.FC<LargeViewProps> = ({
           
           {eventNevent && (
             <a
-              href={`https://search.dergigi.com/e/${eventNevent}`}
+              href={getEventUrl(eventNevent)}
               target="_blank"
               rel="noopener noreferrer"
               className="bookmark-date-link"

src/components/ContentPanel.tsx

@@ -180,6 +180,8 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
         hasHighlights={hasHighlights}
         highlightCount={relevantHighlights.length}
         settings={settings}
+        highlights={relevantHighlights}
+        highlightVisibility={highlightVisibility}
       />
       {markdown || html ? (
         <>

src/components/Explore.tsx

@@ -157,7 +157,6 @@ const Explore: React.FC<ExploreProps> = ({ relayPool }) => {
       {loading && (
         <div className="explore-loading" style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', padding: '0.5rem 0' }}>
           <FontAwesomeIcon icon={faSpinner} spin />
-          <span>Refreshing posts…</span>
         </div>
       )}
       <div className="explore-grid">

src/components/HighlightItem.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useRef, useState } from 'react'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faQuoteLeft, faExternalLinkAlt, faPlane, faSpinner, faServer, faTrash } from '@fortawesome/free-solid-svg-icons'
+import { faQuoteLeft, faExternalLinkAlt, faPlane, faSpinner, faServer, faTrash, faEllipsisH } from '@fortawesome/free-solid-svg-icons'
 import { Highlight } from '../types/highlights'
 import { useEventModel } from 'applesauce-react/hooks'
 import { Models, IEventStore } from 'applesauce-core'
@@ -13,6 +13,7 @@ import { nip19 } from 'nostr-tools'
 import { formatDateCompact } from '../utils/bookmarkUtils'
 import { createDeletionRequest } from '../services/deletionService'
 import ConfirmDialog from './ConfirmDialog'
+import { getNostrUrl } from '../config/nostrGateways'
 
 interface HighlightWithLevel extends Highlight {
   level?: 'mine' | 'friends' | 'nostrverse'
@@ -31,7 +32,7 @@ interface HighlightItemProps {
 
 export const HighlightItem: React.FC<HighlightItemProps> = ({ 
   highlight, 
-  onSelectUrl, 
+  // onSelectUrl is not used but kept in props for API compatibility
   isSelected, 
   onHighlightClick,
   relayPool,
@@ -40,11 +41,13 @@ export const HighlightItem: React.FC<HighlightItemProps> = ({
   onHighlightDelete
 }) => {
   const itemRef = useRef<HTMLDivElement>(null)
+  const menuRef = 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 [showMenu, setShowMenu] = useState(false)
   
   const activeAccount = Hooks.useActiveAccount()
   
@@ -97,61 +100,45 @@ export const HighlightItem: React.FC<HighlightItemProps> = ({
     }
   }, [isSelected])
   
+  // Close menu when clicking outside
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (menuRef.current && !menuRef.current.contains(event.target as Node)) {
+        setShowMenu(false)
+      }
+    }
+    
+    if (showMenu) {
+      document.addEventListener('mousedown', handleClickOutside)
+      return () => {
+        document.removeEventListener('mousedown', handleClickOutside)
+      }
+    }
+  }, [showMenu])
+  
   const handleItemClick = () => {
     if (onHighlightClick) {
       onHighlightClick(highlight.id)
     }
   }
   
-  const handleLinkClick = (url: string, e: React.MouseEvent) => {
-    if (onSelectUrl) {
-      e.preventDefault()
-      onSelectUrl(url)
-    }
+  const getHighlightLink = () => {
+    // Encode the highlight event itself (kind 9802) as a nevent
+    // Get non-local relays for the hint
+    const relayHints = RELAYS.filter(r => 
+      !r.includes('localhost') && !r.includes('127.0.0.1')
+    ).slice(0, 3) // Include up to 3 relay hints
+    
+    const nevent = nip19.neventEncode({
+      id: highlight.id,
+      relays: relayHints,
+      author: highlight.pubkey,
+      kind: 9802
+    })
+    return getNostrUrl(nevent)
   }
   
-  const getSourceLink = () => {
-    if (highlight.eventReference) {
-      // Check if it's a coordinate string (kind:pubkey:identifier) or a simple event ID
-      if (highlight.eventReference.includes(':')) {
-        // It's an addressable event coordinate, encode as naddr
-        const parts = highlight.eventReference.split(':')
-        if (parts.length === 3) {
-          const [kindStr, pubkey, identifier] = parts
-          const kind = parseInt(kindStr, 10)
-          
-          // Get non-local relays for the hint
-          const relayHints = RELAYS.filter(r => 
-            !r.includes('localhost') && !r.includes('127.0.0.1')
-          ).slice(0, 3) // Include up to 3 relay hints
-          
-          const naddr = nip19.naddrEncode({
-            kind,
-            pubkey,
-            identifier,
-            relays: relayHints
-          })
-          return `https://njump.me/${naddr}`
-        }
-      } else {
-        // It's a simple event ID, encode as nevent
-        // Get non-local relays for the hint
-        const relayHints = RELAYS.filter(r => 
-          !r.includes('localhost') && !r.includes('127.0.0.1')
-        ).slice(0, 3) // Include up to 3 relay hints
-        
-        const nevent = nip19.neventEncode({
-          id: highlight.eventReference,
-          relays: relayHints,
-          author: highlight.author
-        })
-        return `https://njump.me/${nevent}`
-      }
-    }
-    return highlight.urlReference
-  }
-  
-  const sourceLink = getSourceLink()
+  const highlightLink = getHighlightLink()
   
   // Handle rebroadcast to all relays
   const handleRebroadcast = async (e: React.MouseEvent) => {
@@ -255,11 +242,6 @@ export const HighlightItem: React.FC<HighlightItemProps> = ({
   // 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')
@@ -295,6 +277,23 @@ export const HighlightItem: React.FC<HighlightItemProps> = ({
     setShowDeleteConfirm(false)
   }
   
+  const handleMenuToggle = (e: React.MouseEvent) => {
+    e.stopPropagation()
+    setShowMenu(!showMenu)
+  }
+  
+  const handleOpenExternal = (e: React.MouseEvent) => {
+    e.stopPropagation()
+    window.open(highlightLink, '_blank', 'noopener,noreferrer')
+    setShowMenu(false)
+  }
+  
+  const handleMenuDeleteClick = (e: React.MouseEvent) => {
+    e.stopPropagation()
+    setShowMenu(false)
+    setShowDeleteConfirm(true)
+  }
+  
   return (
     <>
     <div 
@@ -316,15 +315,6 @@ 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">
@@ -348,18 +338,37 @@ export const HighlightItem: React.FC<HighlightItemProps> = ({
             {formatDateCompact(highlight.created_at)}
           </span>
           
-          {sourceLink && (
-            <a
-              href={sourceLink}
-              target="_blank"
-              rel="noopener noreferrer"
-              onClick={(e) => highlight.urlReference && onSelectUrl ? handleLinkClick(highlight.urlReference, e) : undefined}
-              className="highlight-source"
-              title={highlight.eventReference ? 'Open on Nostr' : 'Open source'}
+          <div className="highlight-menu-wrapper" ref={menuRef}>
+            <button
+              className="highlight-menu-btn"
+              onClick={handleMenuToggle}
+              title="More options"
             >
-              <FontAwesomeIcon icon={faExternalLinkAlt} />
-            </a>
-          )}
+              <FontAwesomeIcon icon={faEllipsisH} />
+            </button>
+            
+            {showMenu && (
+              <div className="highlight-menu">
+                <button
+                  className="highlight-menu-item"
+                  onClick={handleOpenExternal}
+                >
+                  <FontAwesomeIcon icon={faExternalLinkAlt} />
+                  <span>Open on Nostr</span>
+                </button>
+                {canDelete && (
+                  <button
+                    className="highlight-menu-item highlight-menu-item-danger"
+                    onClick={handleMenuDeleteClick}
+                    disabled={isDeleting}
+                  >
+                    <FontAwesomeIcon icon={isDeleting ? faSpinner : faTrash} spin={isDeleting} />
+                    <span>Delete</span>
+                  </button>
+                )}
+              </div>
+            )}
+          </div>
         </div>
       </div>
     </div>

src/components/HighlightsPanel.tsx

@@ -8,6 +8,7 @@ import HighlightsPanelCollapsed from './HighlightsPanel/HighlightsPanelCollapsed
 import HighlightsPanelHeader from './HighlightsPanel/HighlightsPanelHeader'
 import { RelayPool } from 'applesauce-relay'
 import { IEventStore } from 'applesauce-core'
+import { UserSettings } from '../services/settingsService'
 
 export interface HighlightVisibility {
   nostrverse: boolean
@@ -32,6 +33,7 @@ interface HighlightsPanelProps {
   followedPubkeys?: Set<string>
   relayPool?: RelayPool | null
   eventStore?: IEventStore | null
+  settings?: UserSettings
 }
 
 export const HighlightsPanel: React.FC<HighlightsPanelProps> = ({
@@ -50,7 +52,8 @@ export const HighlightsPanel: React.FC<HighlightsPanelProps> = ({
   onHighlightVisibilityChange,
   followedPubkeys = new Set(),
   relayPool,
-  eventStore
+  eventStore,
+  settings
 }) => {
   const [showHighlights, setShowHighlights] = useState(true)
   const [localHighlights, setLocalHighlights] = useState(highlights)
@@ -90,6 +93,7 @@ export const HighlightsPanel: React.FC<HighlightsPanelProps> = ({
       <HighlightsPanelCollapsed 
         hasHighlights={filteredHighlights.length > 0} 
         onToggleCollapse={onToggleCollapse}
+        settings={settings}
       />
     )
   }

src/components/HighlightsPanel/HighlightsPanelCollapsed.tsx

@@ -1,16 +1,21 @@
 import React from 'react'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faHighlighter, faChevronRight } from '@fortawesome/free-solid-svg-icons'
+import { UserSettings } from '../../services/settingsService'
 
 interface HighlightsPanelCollapsedProps {
   hasHighlights: boolean
   onToggleCollapse: () => void
+  settings?: UserSettings
 }
 
 const HighlightsPanelCollapsed: React.FC<HighlightsPanelCollapsedProps> = ({
   hasHighlights,
-  onToggleCollapse
+  onToggleCollapse,
+  settings
 }) => {
+  const highlightColor = settings?.highlightColorMine || '#ffff00'
+  
   return (
     <div className="highlights-container collapsed">
       <button
@@ -19,8 +24,12 @@ const HighlightsPanelCollapsed: React.FC<HighlightsPanelCollapsedProps> = ({
         title="Expand highlights panel"
         aria-label="Expand highlights panel"
       >
-        <FontAwesomeIcon icon={faHighlighter} className={hasHighlights ? 'glow' : ''} />
-        <FontAwesomeIcon icon={faChevronRight} />
+        <FontAwesomeIcon 
+          icon={faHighlighter} 
+          className={hasHighlights ? 'glow' : ''} 
+          style={{ color: highlightColor }}
+        />
+        <FontAwesomeIcon icon={faChevronRight} style={{ color: highlightColor }} />
       </button>
     </div>
   )

src/components/Me.tsx

@@ -73,7 +73,6 @@ const Me: React.FC<MeProps> = ({ relayPool }) => {
       <div className="explore-container">
         <div className="explore-loading">
           <FontAwesomeIcon icon={faSpinner} spin size="2x" />
-          <p>Loading your highlights...</p>
         </div>
       </div>
     )

src/components/ReaderHeader.tsx

@@ -1,9 +1,12 @@
-import React from 'react'
+import React, { useMemo } from 'react'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faHighlighter, faClock } from '@fortawesome/free-solid-svg-icons'
 import { format } from 'date-fns'
 import { useImageCache } from '../hooks/useImageCache'
 import { UserSettings } from '../services/settingsService'
+import { Highlight, HighlightLevel } from '../types/highlights'
+import { HighlightVisibility } from './HighlightsPanel'
+import { hexToRgb } from '../utils/colorHelpers'
 
 interface ReaderHeaderProps {
   title?: string
@@ -14,6 +17,8 @@ interface ReaderHeaderProps {
   hasHighlights: boolean
   highlightCount: number
   settings?: UserSettings
+  highlights?: Highlight[]
+  highlightVisibility?: HighlightVisibility
 }
 
 const ReaderHeader: React.FC<ReaderHeaderProps> = ({
@@ -24,12 +29,46 @@ const ReaderHeader: React.FC<ReaderHeaderProps> = ({
   readingTimeText,
   hasHighlights,
   highlightCount,
-  settings
+  settings,
+  highlights = [],
+  highlightVisibility = { nostrverse: true, friends: true, mine: true }
 }) => {
   const cachedImage = useImageCache(image, settings)
   const formattedDate = published ? format(new Date(published * 1000), 'MMM d, yyyy') : null
   const isLongSummary = summary && summary.length > 150
   
+  // Determine the dominant highlight color based on visibility and priority
+  const highlightIndicatorStyles = useMemo(() => {
+    if (!highlights.length) return undefined
+    
+    // Count highlights by level that are visible
+    const visibleLevels = new Set<HighlightLevel>()
+    highlights.forEach(h => {
+      if (h.level && highlightVisibility[h.level]) {
+        visibleLevels.add(h.level)
+      }
+    })
+    
+    let hexColor: string | undefined
+    // Priority: nostrverse > friends > mine
+    if (visibleLevels.has('nostrverse') && highlightVisibility.nostrverse) {
+      hexColor = settings?.highlightColorNostrverse || '#9333ea'
+    } else if (visibleLevels.has('friends') && highlightVisibility.friends) {
+      hexColor = settings?.highlightColorFriends || '#f97316'
+    } else if (visibleLevels.has('mine') && highlightVisibility.mine) {
+      hexColor = settings?.highlightColorMine || '#ffff00'
+    }
+    
+    if (!hexColor) return undefined
+    
+    const rgb = hexToRgb(hexColor)
+    return {
+      backgroundColor: `rgba(${rgb}, 0.1)`,
+      borderColor: `rgba(${rgb}, 0.3)`,
+      color: '#fff'
+    }
+  }, [highlights, highlightVisibility, settings])
+  
   if (cachedImage) {
     return (
       <>
@@ -52,7 +91,10 @@ const ReaderHeader: React.FC<ReaderHeaderProps> = ({
                   </div>
                 )}
                 {hasHighlights && (
-                  <div className="highlight-indicator">
+                  <div 
+                    className="highlight-indicator"
+                    style={highlightIndicatorStyles}
+                  >
                     <FontAwesomeIcon icon={faHighlighter} />
                     <span>{highlightCount} highlight{highlightCount !== 1 ? 's' : ''}</span>
                   </div>
@@ -89,7 +131,10 @@ const ReaderHeader: React.FC<ReaderHeaderProps> = ({
               </div>
             )}
             {hasHighlights && (
-              <div className="highlight-indicator">
+              <div 
+                className="highlight-indicator"
+                style={highlightIndicatorStyles}
+              >
                 <FontAwesomeIcon icon={faHighlighter} />
                 <span>{highlightCount} highlight{highlightCount !== 1 ? 's' : ''}</span>
               </div>

src/components/RelayStatusIndicator.tsx

@@ -8,9 +8,13 @@ import { useIsMobile } from '../hooks/useMediaQuery'
 
 interface RelayStatusIndicatorProps {
   relayPool: RelayPool | null
+  showOnMobile?: boolean // Control visibility based on scroll
 }
 
-export const RelayStatusIndicator: React.FC<RelayStatusIndicatorProps> = ({ relayPool }) => {
+export const RelayStatusIndicator: React.FC<RelayStatusIndicatorProps> = ({ 
+  relayPool,
+  showOnMobile = true
+}) => {
   // Poll frequently for responsive offline indicator (5s instead of default 20s)
   const relayStatuses = useRelayStatus({ relayPool, pollingInterval: 5000 })
   const [isConnecting, setIsConnecting] = useState(true)
@@ -70,7 +74,7 @@ export const RelayStatusIndicator: React.FC<RelayStatusIndicatorProps> = ({ rela
   
   return (
     <div 
-      className={`relay-status-indicator ${isConnecting ? 'connecting' : ''} ${isMobile ? 'mobile' : ''} ${isExpanded ? 'expanded' : ''}`}
+      className={`relay-status-indicator ${isConnecting ? 'connecting' : ''} ${isMobile ? 'mobile' : ''} ${isExpanded ? 'expanded' : ''} ${isMobile && !showOnMobile ? 'hidden' : 'visible'}`}
       title={
         !isMobile ? (
           isConnecting

src/components/ResolvedMention.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 import { useEventModel } from 'applesauce-react/hooks'
 import { Models, Helpers } from 'applesauce-core'
 import { decode, npubEncode } from 'nostr-tools/nip19'
+import { getProfileUrl } from '../config/nostrGateways'
 
 const { getPubkeyFromDecodeResult } = Helpers
 
@@ -25,7 +26,7 @@ const ResolvedMention: React.FC<ResolvedMentionProps> = ({ encoded }) => {
   if (npub) {
     return (
       <a
-        href={`https://search.dergigi.com/p/${npub}`}
+        href={getProfileUrl(npub)}
         className="nostr-mention"
         target="_blank"
         rel="noopener noreferrer"

src/components/ThreePaneLayout.tsx

@@ -241,6 +241,10 @@ const ThreePaneLayout: React.FC<ThreePaneLayoutProps> = (props) => {
           onClick={props.onToggleHighlightsPanel}
           aria-label="Open highlights"
           aria-expanded={!props.isHighlightsCollapsed}
+          style={{ 
+            backgroundColor: props.settings.highlightColorMine || '#ffff00',
+            color: '#000'
+          }}
         >
           <FontAwesomeIcon icon={faHighlighter} />
         </button>
@@ -351,6 +355,7 @@ const ThreePaneLayout: React.FC<ThreePaneLayoutProps> = (props) => {
             followedPubkeys={props.followedPubkeys}
             relayPool={props.relayPool}
             eventStore={props.eventStore}
+            settings={props.settings}
           />
         </div>
       </div>
@@ -358,10 +363,13 @@ const ThreePaneLayout: React.FC<ThreePaneLayoutProps> = (props) => {
         <HighlightButton 
           ref={props.highlightButtonRef} 
           onHighlight={props.onCreateHighlight}
-          highlightColor={props.settings.highlightColor || '#ffff00'}
+          highlightColor={props.settings.highlightColorMine || '#ffff00'}
         />
       )}
-      <RelayStatusIndicator relayPool={props.relayPool} />
+      <RelayStatusIndicator 
+        relayPool={props.relayPool}
+        showOnMobile={showMobileButtons}
+      />
       {props.toastMessage && (
         <Toast
           message={props.toastMessage}

src/config/nostrGateways.ts

@@ -0,0 +1,34 @@
+/**
+ * Nostr gateway URLs for viewing events and profiles on the web
+ */
+
+export const NOSTR_GATEWAY = 'https://ants.sh' as const
+
+/**
+ * Get a profile URL on the gateway
+ */
+export function getProfileUrl(npub: string): string {
+  return `${NOSTR_GATEWAY}/p/${npub}`
+}
+
+/**
+ * Get an event URL on the gateway
+ */
+export function getEventUrl(nevent: string): string {
+  return `${NOSTR_GATEWAY}/e/${nevent}`
+}
+
+/**
+ * Get a general nostr link on the gateway
+ * Automatically detects if it's a profile (npub/nprofile) or event (note/nevent/naddr)
+ */
+export function getNostrUrl(identifier: string): string {
+  // Check the prefix to determine if it's a profile or event
+  if (identifier.startsWith('npub') || identifier.startsWith('nprofile')) {
+    return `${NOSTR_GATEWAY}/p/${identifier}`
+  }
+  
+  // Everything else (note, nevent, naddr) goes to /e/
+  return `${NOSTR_GATEWAY}/e/${identifier}`
+}
+

src/index.css

@@ -221,7 +221,7 @@ body.mobile-sidebar-open {
 }
 
 .profile-avatar svg {
-  font-size: 1rem;
+  font-size: 1.25rem;
 }
 
 .sidebar-header-bar .toggle-sidebar-btn {
@@ -1783,6 +1783,35 @@ body.mobile-sidebar-open {
   .highlight-text {
     color: #213547;
   }
+  
+  .highlight-menu-btn {
+    color: #666;
+  }
+  
+  .highlight-menu-btn:hover {
+    color: #646cff;
+    background: rgba(100, 108, 255, 0.08);
+  }
+  
+  .highlight-menu {
+    background: #fff;
+    border-color: #ddd;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  }
+  
+  .highlight-menu-item {
+    color: #213547;
+  }
+  
+  .highlight-menu-item:hover {
+    background: rgba(100, 108, 255, 0.08);
+    color: #000;
+  }
+  
+  .highlight-menu-item-danger:hover {
+    background: rgba(255, 68, 68, 0.08);
+    color: #cc0000;
+  }
 }
 
 /* Highlights Panel Styles */
@@ -1836,17 +1865,17 @@ body.mobile-sidebar-open {
 }
 
 .highlights-container.collapsed .toggle-highlights-btn .glow {
-  color: #ffff00;
-  filter: drop-shadow(0 0 4px rgba(255, 255, 0, 0.6));
   animation: pulse-glow 2s ease-in-out infinite;
 }
 
 @keyframes pulse-glow {
   0%, 100% {
-    filter: drop-shadow(0 0 4px rgba(255, 255, 0, 0.6));
+    opacity: 0.8;
+    transform: scale(1);
   }
   50% {
-    filter: drop-shadow(0 0 8px rgba(255, 255, 0, 0.9));
+    opacity: 1;
+    transform: scale(1.1);
   }
 }
 
@@ -2236,25 +2265,77 @@ body.mobile-sidebar-open {
   line-height: 1;
 }
 
-.highlight-source {
+.highlight-menu-wrapper {
+  position: relative;
+  margin-left: auto;
+  flex-shrink: 0;
+}
+
+.highlight-menu-btn {
+  background: none;
+  border: none;
+  color: #888;
+  cursor: pointer;
+  padding: 0.25rem 0.5rem;
+  font-size: 0.875rem;
   display: flex;
   align-items: center;
-  gap: 0.375rem;
-  color: #646cff;
-  text-decoration: none;
   transition: color 0.2s ease;
-  flex-shrink: 0;
-  margin-left: auto;
-  line-height: 1;
+  border-radius: 4px;
 }
 
-.highlight-source:hover {
-  color: #535bf2;
-  text-decoration: underline;
+.highlight-menu-btn:hover {
+  color: #646cff;
+  background: rgba(100, 108, 255, 0.1);
 }
 
-.highlight-source svg {
+.highlight-menu {
+  position: absolute;
+  right: 0;
+  top: calc(100% + 4px);
+  background: #2a2a2a;
+  border: 1px solid #444;
+  border-radius: 6px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+  z-index: 1000;
+  min-width: 160px;
+  overflow: hidden;
+}
+
+.highlight-menu-item {
+  width: 100%;
+  background: none;
+  border: none;
+  color: #ddd;
+  padding: 0.625rem 0.875rem;
   font-size: 0.875rem;
+  display: flex;
+  align-items: center;
+  gap: 0.625rem;
+  cursor: pointer;
+  transition: all 0.15s ease;
+  text-align: left;
+  white-space: nowrap;
+}
+
+.highlight-menu-item:hover {
+  background: rgba(100, 108, 255, 0.15);
+  color: #fff;
+}
+
+.highlight-menu-item:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.highlight-menu-item-danger:hover {
+  background: rgba(255, 68, 68, 0.15);
+  color: #ff4444;
+}
+
+.highlight-menu-item svg {
+  font-size: 0.875rem;
+  flex-shrink: 0;
 }
 
 /* Inline content highlights - fluorescent marker style */
@@ -3101,13 +3182,13 @@ body.mobile-sidebar-open {
 /* Relay Status Indicator */
 .relay-status-indicator {
   position: fixed;
-  bottom: 1.5rem;
-  left: 1.5rem;
+  bottom: 1rem;
+  left: 1rem;
   z-index: 999;
   display: flex;
   align-items: center;
-  gap: 0.75rem;
-  padding: 0.75rem 1rem;
+  gap: 0.5rem;
+  padding: 0.5rem 0.75rem;
   background: rgba(245, 158, 11, 0.95);
   border: 1px solid rgba(245, 158, 11, 0.4);
   border-radius: 8px;
@@ -3115,12 +3196,13 @@ body.mobile-sidebar-open {
   backdrop-filter: blur(10px);
   transition: all 0.3s ease;
   cursor: default;
+  font-size: 0.875rem;
 }
 
-/* Mobile compact mode - just show icon */
+/* Mobile compact mode - just show icon, match sidebar button size */
 @media (max-width: 768px) {
   .relay-status-indicator.mobile {
-    padding: 0.5rem;
+    padding: 0;
     width: var(--min-touch-target);
     height: var(--min-touch-target);
     display: flex;
@@ -3128,12 +3210,13 @@ body.mobile-sidebar-open {
     justify-content: center;
     bottom: 1rem;
     left: 1rem;
+    gap: 0;
   }
 
   .relay-status-indicator.mobile.expanded {
     width: auto;
-    padding: 0.75rem 1rem;
-    gap: 0.75rem;
+    padding: 0.5rem 0.75rem;
+    gap: 0.5rem;
   }
 
   .relay-status-indicator.mobile .relay-status-icon {
@@ -3143,6 +3226,18 @@ body.mobile-sidebar-open {
   .relay-status-indicator.mobile:active {
     transform: scale(0.95);
   }
+
+  /* Hide/show on scroll */
+  .relay-status-indicator.mobile.hidden {
+    opacity: 0;
+    visibility: hidden;
+    pointer-events: none;
+  }
+
+  .relay-status-indicator.mobile.visible {
+    opacity: 1;
+    visibility: visible;
+  }
 }
 
 .relay-status-indicator.connecting {
@@ -3169,7 +3264,7 @@ body.mobile-sidebar-open {
 }
 
 .relay-status-icon {
-  font-size: 1.25rem;
+  font-size: 1rem;
   color: #1a1a1a;
   display: flex;
   align-items: center;
@@ -3179,18 +3274,18 @@ body.mobile-sidebar-open {
 .relay-status-text {
   display: flex;
   flex-direction: column;
-  gap: 0.15rem;
+  gap: 0.1rem;
 }
 
 .relay-status-title {
-  font-size: 0.875rem;
+  font-size: 0.8125rem;
   font-weight: 600;
   color: #1a1a1a;
   line-height: 1.2;
 }
 
 .relay-status-subtitle {
-  font-size: 0.75rem;
+  font-size: 0.6875rem;
   color: rgba(26, 26, 26, 0.8);
   line-height: 1.2;
 }

src/services/bookmarkHelpers.ts

@@ -60,8 +60,27 @@ export const processApplesauceBookmarks = (
     if (applesauceBookmarks.articles) allItems.push(...applesauceBookmarks.articles)
     if (applesauceBookmarks.hashtags) allItems.push(...applesauceBookmarks.hashtags)
     if (applesauceBookmarks.urls) allItems.push(...applesauceBookmarks.urls)
-    return allItems.map((bookmark: BookmarkData) => ({
-      id: bookmark.id || `${isPrivate ? 'private' : 'public'}-${Date.now()}`,
+    return allItems
+      .filter((bookmark: BookmarkData) => bookmark.id) // Skip bookmarks without valid IDs
+      .map((bookmark: BookmarkData) => ({
+        id: bookmark.id!,
+        content: bookmark.content || '',
+        created_at: bookmark.created_at || Math.floor(Date.now() / 1000),
+        pubkey: activeAccount.pubkey,
+        kind: bookmark.kind || 30001,
+        tags: bookmark.tags || [],
+        parsedContent: bookmark.content ? (getParsedContent(bookmark.content) as ParsedContent) : undefined,
+        type: 'event' as const,
+        isPrivate,
+        added_at: bookmark.created_at || Math.floor(Date.now() / 1000)
+      }))
+  }
+
+  const bookmarkArray = Array.isArray(bookmarks) ? bookmarks : [bookmarks]
+  return bookmarkArray
+    .filter((bookmark: BookmarkData) => bookmark.id) // Skip bookmarks without valid IDs
+    .map((bookmark: BookmarkData) => ({
+      id: bookmark.id!,
       content: bookmark.content || '',
       created_at: bookmark.created_at || Math.floor(Date.now() / 1000),
       pubkey: activeAccount.pubkey,
@@ -70,23 +89,8 @@ export const processApplesauceBookmarks = (
       parsedContent: bookmark.content ? (getParsedContent(bookmark.content) as ParsedContent) : undefined,
       type: 'event' as const,
       isPrivate,
-      added_at: Math.floor(Date.now() / 1000)
+      added_at: bookmark.created_at || Math.floor(Date.now() / 1000)
     }))
-  }
-
-  const bookmarkArray = Array.isArray(bookmarks) ? bookmarks : [bookmarks]
-  return bookmarkArray.map((bookmark: BookmarkData) => ({
-    id: bookmark.id || `${isPrivate ? 'private' : 'public'}-${Date.now()}`,
-    content: bookmark.content || '',
-    created_at: bookmark.created_at || Math.floor(Date.now() / 1000),
-    pubkey: activeAccount.pubkey,
-    kind: bookmark.kind || 30001,
-    tags: bookmark.tags || [],
-    parsedContent: bookmark.content ? (getParsedContent(bookmark.content) as ParsedContent) : undefined,
-    type: 'event' as const,
-    isPrivate,
-    added_at: Math.floor(Date.now() / 1000)
-  }))
 }
 
 // Types and guards around signer/decryption APIs

src/utils/nostrUriResolver.tsx

@@ -1,4 +1,5 @@
 import { decode, npubEncode, noteEncode } from 'nostr-tools/nip19'
+import { getNostrUrl } from '../config/nostrGateways'
 
 /**
  * Regular expression to match nostr: URIs and bare NIP-19 identifiers
@@ -39,7 +40,7 @@ export function extractNaddrUris(text: string): string[] {
 /**
  * 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
+ * For other types, returns an external gateway link
  */
 export function createNostrLink(encoded: string): string {
   try {
@@ -53,13 +54,13 @@ export function createNostrLink(encoded: string): string {
       case 'nprofile':
       case 'note':
       case 'nevent':
-        return `https://njump.me/${encoded}`
+        return getNostrUrl(encoded)
       default:
-        return `https://njump.me/${encoded}`
+        return getNostrUrl(encoded)
     }
   } catch (error) {
     console.warn('Failed to decode nostr URI:', encoded, error)
-    return `https://njump.me/${encoded}`
+    return getNostrUrl(encoded)
   }
 }