chore: bump version to 0.10.20

Add top-level headings and proper spacing around lists in
markdown documentation files to satisfy markdown linting rules

.cursor/rules/fetching-data-with-controllers.mdc

@@ -3,8 +3,11 @@ description: fetching data from relays
 alwaysApply: false
 ---
 
+# Fetching Data with Controllers
+
 We fetch data from relays using controllers:
-- Start controllers immediatly; don’t await.
+
+- Start controllers immediatly; don't await.
 - Stream via onEvent; dedupe replaceables; emit immediately.
 - Parallel local/remote queries; complete on EOSE.
 - Finalize and persist since after completion.

.cursor/rules/mobile-first-ui-ux.mdc

@@ -3,6 +3,8 @@ description: anything related to UI/UX
 alwaysApply: false
 ---
 
+# Mobile-First UI/UX
+
 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.)
 
 Let's not show too many error messages, and more importantly: let's not make them red. Nothing is ever this tragic.

CHANGELOG.md

@@ -7,6 +7,86 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [0.10.19] - 2025-10-23
+
+### Added
+
+- Profile dropdown menu in sidebar header
+  - Click profile picture to access quick navigation menu
+  - Menu items: My Highlights, My Bookmarks, My Reads, My Links, My Writings
+  - Logout option included with separator
+  - Click outside to close
+  - Smooth slide-in animation
+
+### Changed
+
+- Profile picture interaction updated
+  - Now triggers dropdown menu instead of navigating to profile page
+  - More efficient access to all profile sections
+- Collapse buttons repositioned for symmetry
+  - Highlights collapse button moved to left side of header
+  - Both bookmarks and highlights collapse buttons now left-aligned
+  - Consistent visual hierarchy across panels
+- Grouping toggle button repositioned
+  - Moved from right/center to left side
+  - Now next to support button (orange heart)
+  - Better logical grouping of controls
+- Collapse button styling standardized
+  - Highlights collapse button now matches bookmarks style
+  - Consistent 33x33px size, border radius, and hover states
+  - Uses native button element for better consistency
+
+### Removed
+
+- Redundant logout button from sidebar header
+  - Previously next to Explore button
+  - Now only accessible via profile dropdown menu
+- Refresh buttons from sidebars
+  - Removed from bookmarks sidebar
+  - Removed from highlights sidebar
+  - Pull-to-refresh functionality remains available
+
+### Fixed
+
+- Cleaned up unused component props and parameters
+  - Removed `lastFetchTime` from BookmarkList
+  - Removed `loading` and `onRefresh` from HighlightsPanelHeader
+  - All linting errors resolved
+  - Type checking passing
+
+## [0.10.18] - 2025-10-23
+
+### Changed
+
+- User profile routes renamed from `/me` to `/my`
+  - `/my/highlights` - User's highlights
+  - `/my/bookmarks` - User's bookmarks
+  - `/my/reads` - Nostr-native articles with reading progress
+  - `/my/links` - External URLs with reading progress
+  - `/my/writings` - User's published articles
+  - All navigation, tabs, and internal links updated
+  - Documentation updated to reflect new paths
+
+### Fixed
+
+- `/my/writings` now displays all user writings
+  - Removed incremental loading with `since` filters from writingsController
+  - Controller now fetches ALL writings without limits
+  - Ensures complete results on profile and my pages
+- `/my/highlights` now displays all user highlights
+  - Removed incremental loading with `since` filters from highlightsController
+  - Controller now fetches ALL highlights without limits
+  - Consistent behavior across all profile views
+
+### Refactored
+
+- Centralized data fetching in controllers
+  - Removed duplicate background fetch logic from Me.tsx and Profile.tsx
+  - All writings fetching now handled by writingsController
+  - All highlights fetching now handled by highlightsController
+  - Single source of truth following controller pattern: stream, dedupe, store, emit
+  - Cleaner, more maintainable code (DRY principle)
+
 ## [0.10.17] - 2025-10-23
 
 ### Added

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "boris",
-  "version": "0.10.9",
+  "version": "0.10.19",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "boris",
-      "version": "0.10.9",
+      "version": "0.10.19",
       "dependencies": {
         "@fortawesome/fontawesome-svg-core": "^7.1.0",
         "@fortawesome/free-regular-svg-icons": "^7.1.0",

package.json

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

src/components/BookmarkItem.tsx

@@ -1,10 +1,11 @@
 import React, { useState } from 'react'
+import { useNavigate } from 'react-router-dom'
 import { faNewspaper, faStickyNote, faCirclePlay, faCamera, faFileLines } from '@fortawesome/free-regular-svg-icons'
 import { faGlobe, faLink } from '@fortawesome/free-solid-svg-icons'
 import { IconDefinition } from '@fortawesome/fontawesome-svg-core'
 import { useEventModel } from 'applesauce-react/hooks'
 import { Models } from 'applesauce-core'
-import { npubEncode } from 'nostr-tools/nip19'
+import { npubEncode, naddrEncode } from 'nostr-tools/nip19'
 import { IndividualBookmark } from '../types/bookmarks'
 import { extractUrlsFromContent } from '../services/bookmarkHelpers'
 import { classifyUrl } from '../utils/helpers'
@@ -23,6 +24,7 @@ interface BookmarkItemProps {
 }
 
 export const BookmarkItem: React.FC<BookmarkItemProps> = ({ bookmark, index, onSelectUrl, viewMode = 'cards', readingProgress }) => {
+  const navigate = useNavigate()
   const [ogImage, setOgImage] = useState<string | null>(null)
 
   const short = (v: string) => `${v.slice(0, 8)}...${v.slice(-8)}`
@@ -108,10 +110,16 @@ export const BookmarkItem: React.FC<BookmarkItemProps> = ({ bookmark, index, onS
   const handleReadNow = (event: React.MouseEvent<HTMLButtonElement>) => {
     event.preventDefault()
     
-    // For kind:30023 articles, pass the bookmark data instead of URL
+    // For kind:30023 articles, navigate to /a/:naddr route
     if (bookmark.kind === 30023) {
-      if (onSelectUrl) {
-        onSelectUrl('', { id: bookmark.id, kind: bookmark.kind, tags: bookmark.tags, pubkey: bookmark.pubkey })
+      const dTag = bookmark.tags.find(t => t[0] === 'd')?.[1]
+      if (dTag) {
+        const naddr = naddrEncode({
+          kind: bookmark.kind,
+          pubkey: bookmark.pubkey,
+          identifier: dTag
+        })
+        navigate(`/a/${naddr}`)
       }
       return
     }

src/components/BookmarkList.tsx

@@ -1,9 +1,8 @@
 import React, { useRef, useState, useMemo } from 'react'
 import { useNavigate } from 'react-router-dom'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faChevronLeft, faBookmark, faList, faThLarge, faImage, faRotate, faHeart, faPlus, faLayerGroup } from '@fortawesome/free-solid-svg-icons'
+import { faChevronLeft, faBookmark, faList, faThLarge, faImage, faHeart, faPlus, faLayerGroup } from '@fortawesome/free-solid-svg-icons'
 import { faClock } from '@fortawesome/free-regular-svg-icons'
-import { formatDistanceToNow } from 'date-fns'
 import { RelayPool } from 'applesauce-relay'
 import { Bookmark, IndividualBookmark } from '../types/bookmarks'
 import { BookmarkItem } from './BookmarkItem'
@@ -59,7 +58,6 @@ export const BookmarkList: React.FC<BookmarkListProps> = ({
   onOpenSettings,
   onRefresh,
   isRefreshing,
-  lastFetchTime,
   loading = false,
   relayPool,
   isMobile = false,
@@ -172,11 +170,11 @@ export const BookmarkList: React.FC<BookmarkListProps> = ({
       groupingMode === 'flat'
         ? [{ key: 'all', title: getFilterTitle(selectedFilter), items: sortIndividualBookmarks(filteredBookmarks) }]
         : [
+            { key: 'web', title: 'Web Bookmarks', items: groups.standaloneWeb },
             { key: 'nip51-private', title: 'Private Bookmarks', items: groups.nip51Private },
             { key: 'nip51-public', title: 'My Bookmarks', items: groups.nip51Public },
             { key: 'amethyst-private', title: 'Private Lists', items: groups.amethystPrivate },
-            { key: 'amethyst-public', title: 'My Lists', items: groups.amethystPublic },
-            { key: 'web', title: 'Web Bookmarks', items: groups.standaloneWeb }
+            { key: 'amethyst-public', title: 'My Lists', items: groups.amethystPublic }
           ]
     
     // Add bookmark sets as additional sections (only in grouped mode)
@@ -314,9 +312,7 @@ export const BookmarkList: React.FC<BookmarkListProps> = ({
             variant="ghost"
             style={{ color: friendsColor }}
           />
-        </div>
-        {activeAccount && (
-          <div className="view-mode-right">
+          {activeAccount && (
             <IconButton
               icon={groupingMode === 'grouped' ? faLayerGroup : faClock}
               onClick={toggleGroupingMode}
@@ -324,17 +320,10 @@ export const BookmarkList: React.FC<BookmarkListProps> = ({
               ariaLabel={groupingMode === 'grouped' ? 'Switch to flat view' : 'Switch to grouped view'}
               variant="ghost"
             />
-            {onRefresh && (
-              <IconButton
-                icon={faRotate}
-                onClick={onRefresh}
-                title={lastFetchTime ? `Refresh bookmarks (updated ${formatDistanceToNow(lastFetchTime, { addSuffix: true })})` : 'Refresh bookmarks'}
-                ariaLabel="Refresh bookmarks"
-                variant="ghost"
-                disabled={isRefreshing}
-                spin={isRefreshing}
-              />
-            )}
+          )}
+        </div>
+        {activeAccount && (
+          <div className="view-mode-right">
             <IconButton
               icon={faList}
               onClick={() => onViewModeChange('compact')}

src/components/BookmarkViews/CompactView.tsx

@@ -5,6 +5,7 @@ import { IconDefinition } from '@fortawesome/fontawesome-svg-core'
 import { IndividualBookmark } from '../../types/bookmarks'
 import { formatDateCompact } from '../../utils/bookmarkUtils'
 import RichContent from '../RichContent'
+import { naddrEncode } from 'nostr-tools/nip19'
 
 interface CompactViewProps {
   bookmark: IndividualBookmark
@@ -45,7 +46,15 @@ export const CompactView: React.FC<CompactViewProps> = ({
 
   const handleCompactClick = () => {
     if (isArticle) {
-      onSelectUrl?.('', { id: bookmark.id, kind: bookmark.kind, tags: bookmark.tags, pubkey: bookmark.pubkey })
+      const dTag = bookmark.tags.find(t => t[0] === 'd')?.[1]
+      if (dTag) {
+        const naddr = naddrEncode({
+          kind: bookmark.kind,
+          pubkey: bookmark.pubkey,
+          identifier: dTag
+        })
+        navigate(`/a/${naddr}`)
+      }
     } else if (hasUrls) {
       onSelectUrl?.(extractedUrls[0])
     } else if (isNote) {

src/components/HighlightsPanel.tsx

@@ -118,13 +118,11 @@ export const HighlightsPanel: React.FC<HighlightsPanelProps> = ({
   return (
     <div className="highlights-container">
       <HighlightsPanelHeader
-        loading={loading}
         hasHighlights={filteredHighlights.length > 0}
         showHighlights={showHighlights}
         highlightVisibility={highlightVisibility}
         currentUserPubkey={currentUserPubkey}
         onToggleHighlights={handleToggleHighlights}
-        onRefresh={onRefresh}
         onToggleCollapse={onToggleCollapse}
         onHighlightVisibilityChange={onHighlightVisibilityChange}
         isMobile={isMobile}

src/components/HighlightsPanel/HighlightsPanelHeader.tsx

@@ -1,29 +1,26 @@
 import React from 'react'
-import { faChevronRight, faEye, faEyeSlash, faRotate, faUser, faUserGroup, faNetworkWired } from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faChevronRight, faEye, faEyeSlash, faUser, faUserGroup, faNetworkWired } from '@fortawesome/free-solid-svg-icons'
 import { HighlightVisibility } from '../HighlightsPanel'
 import IconButton from '../IconButton'
 
 interface HighlightsPanelHeaderProps {
-  loading: boolean
   hasHighlights: boolean
   showHighlights: boolean
   highlightVisibility: HighlightVisibility
   currentUserPubkey?: string
   onToggleHighlights: () => void
-  onRefresh?: () => void
   onToggleCollapse: () => void
   onHighlightVisibilityChange?: (visibility: HighlightVisibility) => void
   isMobile?: boolean
 }
 
 const HighlightsPanelHeader: React.FC<HighlightsPanelHeaderProps> = ({
-  loading,
   hasHighlights,
   showHighlights,
   highlightVisibility,
   currentUserPubkey,
   onToggleHighlights,
-  onRefresh,
   onToggleCollapse,
   onHighlightVisibilityChange,
   isMobile = false
@@ -32,6 +29,16 @@ const HighlightsPanelHeader: React.FC<HighlightsPanelHeaderProps> = ({
     <div className="highlights-header">
       <div className="highlights-actions">
         <div className="highlights-actions-left">
+          {!isMobile && (
+            <button 
+              onClick={onToggleCollapse}
+              className="toggle-highlights-btn"
+              title="Collapse highlights panel"
+              aria-label="Collapse highlights panel"
+            >
+              <FontAwesomeIcon icon={faChevronRight} style={{ transform: 'rotate(180deg)' }} />
+            </button>
+          )}
           {onHighlightVisibilityChange && (
             <div className="highlight-level-toggles">
               <IconButton
@@ -82,17 +89,8 @@ const HighlightsPanelHeader: React.FC<HighlightsPanelHeaderProps> = ({
               )}
             </div>
           )}
-          {onRefresh && (
-            <IconButton
-              icon={faRotate}
-              onClick={onRefresh}
-              title="Refresh highlights"
-              ariaLabel="Refresh highlights"
-              variant="ghost"
-              disabled={loading}
-              spin={loading}
-            />
-          )}
+        </div>
+        <div className="highlights-actions-right">
           {hasHighlights && (
             <IconButton
               icon={showHighlights ? faEye : faEyeSlash}
@@ -103,16 +101,6 @@ const HighlightsPanelHeader: React.FC<HighlightsPanelHeaderProps> = ({
             />
           )}
         </div>
-        {!isMobile && (
-          <IconButton
-            icon={faChevronRight}
-            onClick={onToggleCollapse}
-            title="Collapse highlights panel"
-            ariaLabel="Collapse highlights panel"
-            variant="ghost"
-            style={{ transform: 'rotate(180deg)' }}
-          />
-        )}
       </div>
     </div>
   )

src/components/Me.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useCallback } from 'react'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faHighlighter, faBookmark, faPenToSquare, faLink, faLayerGroup } from '@fortawesome/free-solid-svg-icons'
+import { faHighlighter, faBookmark, faPenToSquare, faLink, faLayerGroup, faHeart } from '@fortawesome/free-solid-svg-icons'
 import { faClock } from '@fortawesome/free-regular-svg-icons'
 import { Hooks } from 'applesauce-react'
 import { IEventStore } from 'applesauce-core'
@@ -668,21 +668,26 @@ const Me: React.FC<MeProps> = ({
                 </div>
               </div>
             )))}
-            <div className="view-mode-controls" style={{
-              display: 'flex',
-              justifyContent: 'center',
-              gap: '0.5rem',
-              padding: '1rem',
-              marginTop: '1rem',
-              borderTop: '1px solid var(--border-color)'
-            }}>
-              <IconButton
-                icon={groupingMode === 'grouped' ? faLayerGroup : faClock}
-                onClick={toggleGroupingMode}
-                title={groupingMode === 'grouped' ? 'Show flat chronological list' : 'Show grouped by source'}
-                ariaLabel={groupingMode === 'grouped' ? 'Switch to flat view' : 'Switch to grouped view'}
-                variant="ghost"
-              />
+            <div className="view-mode-controls">
+              <div className="view-mode-left">
+                <IconButton
+                  icon={faHeart}
+                  onClick={() => navigate('/support')}
+                  title="Support Boris"
+                  ariaLabel="Support"
+                  variant="ghost"
+                  style={{ color: 'rgb(251 146 60)' }}
+                />
+                <IconButton
+                  icon={groupingMode === 'grouped' ? faLayerGroup : faClock}
+                  onClick={toggleGroupingMode}
+                  title={groupingMode === 'grouped' ? 'Show flat chronological list' : 'Show grouped by source'}
+                  ariaLabel={groupingMode === 'grouped' ? 'Switch to flat view' : 'Switch to grouped view'}
+                  variant="ghost"
+                />
+              </div>
+              <div className="view-mode-right">
+              </div>
             </div>
           </div>
         )

src/components/SidebarHeader.tsx

@@ -1,11 +1,12 @@
-import React from 'react'
+import React, { useState, useRef, useEffect } from 'react'
 import { useNavigate } from 'react-router-dom'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faChevronRight, faRightFromBracket, faUserCircle, faGear, faHome, faPersonHiking } from '@fortawesome/free-solid-svg-icons'
+import { faChevronRight, faRightFromBracket, faUserCircle, faGear, faHome, faPersonHiking, faHighlighter, faBookmark, faPenToSquare, faLink } from '@fortawesome/free-solid-svg-icons'
 import { Hooks } from 'applesauce-react'
 import { useEventModel } from 'applesauce-react/hooks'
 import { Models } from 'applesauce-core'
 import IconButton from './IconButton'
+import { faBooks } from '../icons/customIcons'
 
 interface SidebarHeaderProps {
   onToggleCollapse: () => void
@@ -18,6 +19,8 @@ const SidebarHeader: React.FC<SidebarHeaderProps> = ({ onToggleCollapse, onLogou
   const navigate = useNavigate()
   const activeAccount = Hooks.useActiveAccount()
   const profile = useEventModel(Models.ProfileModel, activeAccount ? [activeAccount.pubkey] : null)
+  const [showProfileMenu, setShowProfileMenu] = useState(false)
+  const menuRef = useRef<HTMLDivElement>(null)
 
   const getProfileImage = () => {
     return profile?.picture || null
@@ -33,22 +36,93 @@ const SidebarHeader: React.FC<SidebarHeaderProps> = ({ onToggleCollapse, onLogou
 
   const profileImage = getProfileImage()
 
+  // Close menu when clicking outside
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (menuRef.current && !menuRef.current.contains(event.target as Node)) {
+        setShowProfileMenu(false)
+      }
+    }
+
+    if (showProfileMenu) {
+      document.addEventListener('mousedown', handleClickOutside)
+    }
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside)
+    }
+  }, [showProfileMenu])
+
+  const handleMenuItemClick = (action: () => void) => {
+    setShowProfileMenu(false)
+    action()
+  }
+
   return (
     <>
       <div className="sidebar-header-bar">
         {activeAccount && (
-          <button
-            className="profile-avatar-button" 
-            title={getUserDisplayName()}
-            onClick={() => navigate('/my')}
-            aria-label={`Profile: ${getUserDisplayName()}`}
-          >
-            {profileImage ? (
-              <img src={profileImage} alt={getUserDisplayName()} />
-            ) : (
-              <FontAwesomeIcon icon={faUserCircle} />
+          <div className="profile-menu-wrapper" ref={menuRef}>
+            <button
+              className="profile-avatar-button" 
+              title={getUserDisplayName()}
+              onClick={() => setShowProfileMenu(!showProfileMenu)}
+              aria-label={`Profile: ${getUserDisplayName()}`}
+            >
+              {profileImage ? (
+                <img src={profileImage} alt={getUserDisplayName()} />
+              ) : (
+                <FontAwesomeIcon icon={faUserCircle} />
+              )}
+            </button>
+            {showProfileMenu && (
+              <div className="profile-dropdown-menu">
+                <button
+                  className="profile-menu-item"
+                  onClick={() => handleMenuItemClick(() => navigate('/my/highlights'))}
+                >
+                  <FontAwesomeIcon icon={faHighlighter} />
+                  <span>My Highlights</span>
+                </button>
+                <button
+                  className="profile-menu-item"
+                  onClick={() => handleMenuItemClick(() => navigate('/my/bookmarks'))}
+                >
+                  <FontAwesomeIcon icon={faBookmark} />
+                  <span>My Bookmarks</span>
+                </button>
+                <button
+                  className="profile-menu-item"
+                  onClick={() => handleMenuItemClick(() => navigate('/my/reads'))}
+                >
+                  <FontAwesomeIcon icon={faBooks} />
+                  <span>My Reads</span>
+                </button>
+                <button
+                  className="profile-menu-item"
+                  onClick={() => handleMenuItemClick(() => navigate('/my/links'))}
+                >
+                  <FontAwesomeIcon icon={faLink} />
+                  <span>My Links</span>
+                </button>
+                <button
+                  className="profile-menu-item"
+                  onClick={() => handleMenuItemClick(() => navigate('/my/writings'))}
+                >
+                  <FontAwesomeIcon icon={faPenToSquare} />
+                  <span>My Writings</span>
+                </button>
+                <div className="profile-menu-separator"></div>
+                <button
+                  className="profile-menu-item"
+                  onClick={() => handleMenuItemClick(onLogout)}
+                >
+                  <FontAwesomeIcon icon={faRightFromBracket} />
+                  <span>Logout</span>
+                </button>
+              </div>
             )}
-          </button>
+          </div>
         )}
         <div className="sidebar-header-right">
           <IconButton
@@ -72,15 +146,6 @@ const SidebarHeader: React.FC<SidebarHeaderProps> = ({ onToggleCollapse, onLogou
             ariaLabel="Explore"
             variant="ghost"
           />
-          {activeAccount && (
-            <IconButton
-              icon={faRightFromBracket}
-              onClick={onLogout}
-              title="Logout"
-              ariaLabel="Logout"
-              variant="ghost"
-            />
-          )}
           {!isMobile && (
             <button 
               onClick={onToggleCollapse}

src/components/ThreePaneLayout.tsx

@@ -134,15 +134,30 @@ const ThreePaneLayout: React.FC<ThreePaneLayoutProps> = (props) => {
   const showHighlightsButton = scrollDirection !== 'down' && !isAtTop
 
   // Lock body scroll when mobile sidebar or highlights is open
+  const savedScrollPosition = useRef<number>(0)
+  
   useEffect(() => {
     if (isMobile && (props.isSidebarOpen || !props.isHighlightsCollapsed)) {
+      // Save current scroll position
+      savedScrollPosition.current = window.scrollY
+      document.body.style.top = `-${savedScrollPosition.current}px`
       document.body.classList.add('mobile-sidebar-open')
     } else {
+      // Restore scroll position
       document.body.classList.remove('mobile-sidebar-open')
+      document.body.style.top = ''
+      if (savedScrollPosition.current > 0) {
+        // Use requestAnimationFrame to ensure DOM has updated
+        requestAnimationFrame(() => {
+          window.scrollTo(0, savedScrollPosition.current)
+          savedScrollPosition.current = 0
+        })
+      }
     }
     
     return () => {
       document.body.classList.remove('mobile-sidebar-open')
+      document.body.style.top = ''
     }
   }, [isMobile, props.isSidebarOpen, props.isHighlightsCollapsed])
 

src/hooks/useBookmarksData.ts

@@ -158,7 +158,10 @@ export const useBookmarksData = ({
 
   // Fetch article-specific highlights when viewing an article
   useEffect(() => {
-    if (!relayPool || !activeAccount) return
+    if (!relayPool || !activeAccount) {
+      setHighlightsLoading(false)
+      return
+    }
     // Fetch article-specific highlights when viewing an article
     // External URLs have their highlights fetched by useExternalUrlLoader
     if (effectiveArticleCoordinate && !externalUrl) {
@@ -167,6 +170,9 @@ export const useBookmarksData = ({
       // Clear article highlights when not viewing an article
       setArticleHighlights([])
       setHighlightsLoading(false)
+    } else {
+      // For external URLs or other cases, loading is not needed
+      setHighlightsLoading(false)
     }
   }, [relayPool, activeAccount, effectiveArticleCoordinate, naddr, externalUrl, handleFetchHighlights])
 

src/hooks/useReadingPosition.ts

@@ -28,6 +28,17 @@ export const useReadingPosition = ({
   const suppressUntilRef = useRef<number>(0)
   const pendingPositionRef = useRef<number>(0) // Track latest position for throttled save
   const lastSaved100Ref = useRef(false) // Track if we've saved 100% to avoid duplicate saves
+  
+  // Store callbacks in refs to avoid them being dependencies
+  const onPositionChangeRef = useRef(onPositionChange)
+  const onReadingCompleteRef = useRef(onReadingComplete)
+  const onSaveRef = useRef(onSave)
+  
+  useEffect(() => {
+    onPositionChangeRef.current = onPositionChange
+    onReadingCompleteRef.current = onReadingComplete
+    onSaveRef.current = onSave
+  }, [onPositionChange, onReadingComplete, onSave])
 
   // Suppress auto-saves for a given duration (used after programmatic restore)
   const suppressSavesFor = useCallback((ms: number) => {
@@ -37,7 +48,7 @@ export const useReadingPosition = ({
 
   // Throttled save function - saves at 1s intervals during scrolling
   const scheduleSave = useCallback((currentPosition: number) => {
-    if (!syncEnabled || !onSave) {
+    if (!syncEnabled || !onSaveRef.current) {
       return
     }
 
@@ -48,7 +59,7 @@ export const useReadingPosition = ({
         saveTimerRef.current = null
       }
       lastSaved100Ref.current = true
-      onSave(1)
+      onSaveRef.current(1)
       return
     }
 
@@ -65,10 +76,10 @@ export const useReadingPosition = ({
     saveTimerRef.current = setTimeout(() => {
       // Save the latest position, not the one from when timer was scheduled
       const positionToSave = pendingPositionRef.current
-      onSave(positionToSave)
+      onSaveRef.current?.(positionToSave)
       saveTimerRef.current = null
     }, THROTTLE_MS)
-  }, [syncEnabled, onSave])
+  }, [syncEnabled])
 
   useEffect(() => {
     if (!enabled) return
@@ -96,7 +107,7 @@ export const useReadingPosition = ({
       
       setPosition(clampedProgress)
       positionRef.current = clampedProgress
-      onPositionChange?.(clampedProgress)
+      onPositionChangeRef.current?.(clampedProgress)
 
       // Schedule auto-save if sync is enabled (unless suppressed)
       if (Date.now() >= suppressUntilRef.current) {
@@ -113,7 +124,7 @@ export const useReadingPosition = ({
               if (!hasTriggeredComplete.current && positionRef.current === 1) {
                 setIsReadingComplete(true)
                 hasTriggeredComplete.current = true
-                onReadingComplete?.()
+                onReadingCompleteRef.current?.()
               }
               completionTimerRef.current = null
             }, completionHoldMs)
@@ -127,7 +138,7 @@ export const useReadingPosition = ({
             if (clampedProgress >= readingCompleteThreshold) {
               setIsReadingComplete(true)
               hasTriggeredComplete.current = true
-              onReadingComplete?.()
+              onReadingCompleteRef.current?.()
             }
           }
         }
@@ -151,7 +162,7 @@ export const useReadingPosition = ({
         clearTimeout(completionTimerRef.current)
       }
     }
-  }, [enabled, onPositionChange, onReadingComplete, readingCompleteThreshold, scheduleSave, completionHoldMs])
+  }, [enabled, readingCompleteThreshold, scheduleSave, completionHoldMs])
 
   // Reset reading complete state when enabled changes
   useEffect(() => {

src/styles/components/reader.css

@@ -192,7 +192,8 @@
   }
   
   .reader-markdown img, .reader-html img {
-    max-width: 100%;
+    max-width: 100% !important;
+    width: auto !important;
     height: auto;
   }
 }

src/styles/layout/highlights.css

@@ -62,6 +62,28 @@
 
 .highlights-actions { display: flex; align-items: center; justify-content: space-between; width: 100%; }
 .highlights-actions-left { display: flex; align-items: center; gap: 0.5rem; }
+.highlights-actions-right { display: flex; align-items: center; gap: 0.5rem; }
+
+/* Collapse button in highlights header */
+.highlights-header .toggle-highlights-btn {
+  background: transparent;
+  color: var(--color-text);
+  border: 1px solid var(--color-border-subtle);
+  padding: 0;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 33px;
+  height: 33px;
+  flex-shrink: 0;
+  box-sizing: border-box;
+}
+
+.highlights-header .toggle-highlights-btn:hover { background: var(--color-bg-elevated); color: var(--color-text); }
+.highlights-header .toggle-highlights-btn:active { transform: translateY(1px); }
 
 .highlights-title { display: flex; align-items: center; gap: 0.5rem; }
 .highlights-title h3 { margin: 0; font-size: 1rem; font-weight: 600; }

src/styles/layout/sidebar.css

@@ -132,6 +132,70 @@
 .profile-avatar-button img { width: 100%; height: 100%; object-fit: cover; }
 .profile-avatar-button svg { font-size: 1rem; }
 
+/* Profile menu wrapper */
+.profile-menu-wrapper {
+  position: relative;
+}
+
+/* Dropdown menu */
+.profile-dropdown-menu {
+  position: absolute;
+  top: calc(100% + 0.5rem);
+  left: 0;
+  background: var(--color-bg-elevated);
+  border: 1px solid var(--color-border);
+  border-radius: 8px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  min-width: 180px;
+  padding: 0.25rem;
+  z-index: 1000;
+  animation: profileMenuSlideIn 0.15s ease-out;
+}
+
+@keyframes profileMenuSlideIn {
+  from {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.profile-menu-item {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  width: 100%;
+  padding: 0.625rem 0.875rem;
+  background: transparent;
+  border: none;
+  border-radius: 4px;
+  color: var(--color-text);
+  cursor: pointer;
+  transition: all 0.15s ease;
+  font-size: 0.875rem;
+  text-align: left;
+  white-space: nowrap;
+}
+
+.profile-menu-item:hover {
+  background: var(--color-bg-hover);
+}
+
+.profile-menu-item svg {
+  width: 1em;
+  font-size: 1rem;
+  color: var(--color-text-secondary);
+}
+
+.profile-menu-separator {
+  height: 1px;
+  background: var(--color-border);
+  margin: 0.25rem 0;
+}
+
 .sidebar-header-bar .toggle-sidebar-btn {
   background: transparent;
   color: var(--color-text);