chore: bump version to 0.6.16

fix: remove unused handleCancelDelete function
Removed handleCancelDelete as it's no longer needed after switching from ConfirmDialog modal to inline confirmation
2026-02-16 12:34:41 +01:00 · 2025-10-15 18:30:36 +02:00 · 2025-10-15 18:30:15 +02:00 · 2025-10-15 18:21:44 +02:00 · 2025-10-15 18:15:55 +02:00 · 2025-10-15 17:59:29 +02:00
38 changed files with 1346 additions and 469 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -8,6 +8,7 @@ dist
 *.log
 .DS_Store

-# Applesauce Reference
+# Reference Projects
 applesauce
+primal-web-app

--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,189 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0

 ## [Unreleased]

+## [0.6.15] - 2025-10-15
+
+### Added
+
+- Paragraph alignment setting with left-aligned and justified text options
+  - Icon buttons in Reading & Display settings for switching alignment
+  - CSS variable system for applying alignment to reader content
+  - Real-time preview of alignment changes in settings
+  - Headings remain left-aligned for optimal readability
+
+### Changed
+
+- Default paragraph alignment changed to justified for improved reading experience
+  - Applies to paragraphs, list items, divs, and blockquotes
+  - Settings stored and synced via Nostr (NIP-78)
+
+## [0.6.14] - 2025-10-15
+
+### Added
+
+- Support for bookmark sets (NIP-51 kind:30003)
+  - Bookmark sets now display alongside regular bookmark lists
+  - Properly handles AddressPointer bookmarks for long-form articles
+- Content type icons for bookmarks
+  - Article, video, web, and image icons to indicate bookmark content type
+  - Camera icon for image bookmarks
+  - Sticky note icon for text-only bookmarks without URLs
+- Bookmark grouping and sections
+  - Grouped sections in sidebar and `/me` reading-list
+  - Web bookmarks, default bookmarks, and legacy bookmarks in separate sections
+  - Grouping and sorting helpers for organizing bookmark sections
+- Adaptive text color for publication date over hero images
+  - Automatically detects image brightness and adjusts text color
+  - Improved contrast for better readability
+
+### Changed
+
+- Renamed "Amethyst-style bookmarks" to "Old Bookmarks (Legacy)"
+- Hide cover images in compact view for cleaner layout
+- Support button improvements
+  - Moved to bottom-left of bookmarks bar
+  - Changed icon from lightning bolt to heart (orange color)
+  - Left-aligned support button, right-aligned view mode buttons
+- Section headings improved with better typography (removed counts)
+- Icon changed from book to file-lines for default bookmarks
+- Use regular (outlined) icon variants for lighter, more refined appearance
+- Add bookmark button moved to web bookmarks section
+- Empty state messages replaced with loading spinners
+- Section dividers made more subtle
+- Simplified bookmark filtering to only exclude empty content
+
+### Fixed
+
+- Removed borders from compact bookmark cards for cleaner look
+- Removed duplicate type indicator icons from bookmark cards
+- Reduced section heading bottom padding for better spacing
+- Aligned add bookmark button with section heading
+- Removed redundant loading spinner above tabs
+- Resolved linter and type errors
+- Include kind:30003 in default bookmark list detection
+- Removed text shadows from publication date for cleaner look
+- Improved shadow contrast without background overlay
+- Corrected async handling in adaptive color detection
+- Corrected FastAverageColor import to use named export
+- Section heading styles now properly override with `!important`
+- Removed unused articleImage prop from CompactView
+
+## [0.6.13] - 2025-10-15
+
+### Added
+
+- Support for `nprofile` identifiers on `/p/` profile pages (NIP-19)
+  - Profile pages now accept both `npub` and `nprofile` identifiers
+  - Extracts pubkey from nprofile data structure
+  - Users can share profiles with relay metadata included
+- Gradient placeholder images for articles without cover images
+  - Blog post cards show subtle diagonal gradient using theme colors
+  - Reader view displays gradient background with newspaper icon
+  - Placeholders adapt automatically to light/dark themes
+  - Large view bookmarks use matching gradient backgrounds
+
+### Changed
+
+- PWA install section styling in settings
+  - Heading now matches other section headings with proper styling
+  - Install button uses standard app button styling instead of custom gradient
+  - Consistent with app's design system and theme colors
+
+### Fixed
+
+- Mobile bookmark button visibility across all pages
+  - Now visible on `/p/` (profile), `/explore`, `/me`, and `/support` pages
+  - Only hidden on settings page or when scrolling down while reading
+  - Prevents users from getting stuck without navigation options
+- Mobile highlights button behavior at page top
+  - Hidden when scrolled to the very top of the page
+  - Appears when scrolling up from below
+  - Bookmark button remains visible at top (only hides on scroll down)
+  - Separate visibility logic for each button improves UX
+
+## [0.6.12] - 2025-10-15
+
+### Changed
+
+- Horizontal dividers (`<hr>`) in blog posts now display with more subtle styling
+  - Reduced visual weight with 69% opacity for better readability
+  - Added increased vertical padding (2.5rem) above and below dividers
+  - Improved visual separation without disrupting reading flow
+
+## [0.6.11] - 2025-10-15
+
+### Added
+
+- Colored borders to blog post and highlight cards based on relationship
+  - Mine: yellow border
+  - Friends: orange border
+  - Nostrverse: purple border
+  - Visual distinction helps identify content source at a glance
+- Mobile sidebar toggle buttons on explore page
+  - Bookmark and highlights buttons now visible on explore page
+  - Improves mobile navigation UX
+
+### Fixed
+
+- Mobile bookmarks sidebar opening and closing immediately
+  - Memoized `toggleSidebar` function to prevent unnecessary re-renders
+  - Updated route-change effect to only close sidebar on actual pathname changes
+  - Sidebar now stays open when opened on mobile PWA
+
+## [0.6.10] - 2025-10-15
+
+### Added
+
+- Support page (`/support`) displaying zappers with avatar grid
+  - Shows "Absolute Legends" (69420+ sats) and regular supporters (2100+ sats)
+  - Clickable supporter avatars link to profiles
+  - Bolt icon button in sidebar navigation
+  - Thank-you illustration and call-to-action
+  - Links to pricing page and Boris profile
+- Refresh button to explore page
+  - Positioned next to filter buttons
+  - Spinning animation during loading and pull-to-refresh
+- Unified event publishing and querying services
+  - `publishEvent` service for highlights and settings
+  - `queryEvents` helper with local-first fetching
+  - Centralized relay timeouts configuration
+- FEATURES.md documentation file
+- MIT License
+
+### Changed
+
+- Explore page improvements
+  - Filter defaults to friends only (instead of all)
+  - Tabs moved below filter buttons
+  - Filter buttons positioned on the right
+  - Writings tab now uses newspaper icon
+  - Subtitle removed for cleaner layout
+- Pull-to-refresh library
+  - Replaced custom implementation with `use-pull-to-refresh`
+  - Updated HighlightsPanel to use new library
+- Loading states now show progressive loading with skeletons instead of blocking error screens
+- All event fetching services migrated to unified `queryEvents` helper
+  - `nostrverseService`, `bookmarkService`, `libraryService`
+  - `exploreService`, `fetchHighlightsFromAuthors`
+- Contact streaming with extended timeout and partial results
+
+### Fixed
+
+- All ESLint and TypeScript linting errors
+  - Removed all `eslint-disable` statements
+  - Fixed `react-hooks/exhaustive-deps` warnings
+  - Resolved all type errors
+- Explore page refresh loop and false empty-follows error
+- Zap receipt scanning with applesauce helpers and more relays
+- Support page theme colors for proper readability
+
+### Refactored
+
+- Event publishing to use unified `publishEvent` service
+- Event fetching to use unified `queryEvents` helper
+- Image cache and bookmark components (removed unused settings parameter)
+- Support page spacing and visual hierarchy
+
 ## [0.6.9] - 2025-10-14

 ### Documentation
@@ -1299,7 +1482,13 @@ 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.6.9...HEAD
+[Unreleased]: https://github.com/dergigi/boris/compare/v0.6.15...HEAD
+[0.6.15]: https://github.com/dergigi/boris/compare/v0.6.14...v0.6.15
+[0.6.14]: https://github.com/dergigi/boris/compare/v0.6.13...v0.6.14
+[0.6.13]: https://github.com/dergigi/boris/compare/v0.6.12...v0.6.13
+[0.6.12]: https://github.com/dergigi/boris/compare/v0.6.11...v0.6.12
+[0.6.11]: https://github.com/dergigi/boris/compare/v0.6.10...v0.6.11
+[0.6.10]: https://github.com/dergigi/boris/compare/v0.6.9...v0.6.10
 [0.6.9]: https://github.com/dergigi/boris/compare/v0.6.8...v0.6.9
 [0.6.8]: https://github.com/dergigi/boris/compare/v0.6.7...v0.6.8
 [0.6.7]: https://github.com/dergigi/boris/compare/v0.6.6...v0.6.7
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
  "name": "boris",
-  "version": "0.6.9",
+  "version": "0.6.13",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "boris",
-      "version": "0.6.9",
+      "version": "0.6.13",
      "dependencies": {
        "@fortawesome/fontawesome-svg-core": "^7.1.0",
        "@fortawesome/free-regular-svg-icons": "^7.1.0",
@@ -22,6 +22,7 @@
        "applesauce-react": "^4.0.0",
        "applesauce-relay": "^4.0.0",
        "date-fns": "^4.1.0",
+        "fast-average-color": "^9.5.0",
        "nostr-tools": "^2.4.0",
        "prismjs": "^1.30.0",
        "react": "^18.2.0",
@@ -6086,6 +6087,15 @@
      "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==",
      "license": "MIT"
    },
+    "node_modules/fast-average-color": {
+      "version": "9.5.0",
+      "resolved": "https://registry.npmjs.org/fast-average-color/-/fast-average-color-9.5.0.tgz",
+      "integrity": "sha512-nC6x2YIlJ9xxgkMFMd1BNoM1ctMjNoRKfRliPmiEWW3S6rLTHiQcy9g3pt/xiKv/D0NAAkhb9VyV+WJFvTqMGg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 12"
+      }
+    },
    "node_modules/fast-deep-equal": {
      "version": "3.1.3",
      "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "boris",
-  "version": "0.6.10",
+  "version": "0.6.16",
  "description": "A minimal nostr client for bookmark management",
  "homepage": "https://read.withboris.com/",
  "type": "module",
@@ -25,6 +25,7 @@
    "applesauce-react": "^4.0.0",
    "applesauce-relay": "^4.0.0",
    "date-fns": "^4.1.0",
+    "fast-average-color": "^9.5.0",
    "nostr-tools": "^2.4.0",
    "prismjs": "^1.30.0",
    "react": "^18.2.0",
--- a/src/components/BlogPostCard.tsx
+++ b/src/components/BlogPostCard.tsx
@@ -10,9 +10,10 @@ import { Models } from 'applesauce-core'
 interface BlogPostCardProps {
  post: BlogPostPreview
  href: string
+  level?: 'mine' | 'friends' | 'nostrverse'
 }

-const BlogPostCard: React.FC<BlogPostCardProps> = ({ post, href }) => {
+const BlogPostCard: React.FC<BlogPostCardProps> = ({ post, href, level }) => {
  const profile = useEventModel(Models.ProfileModel, [post.author])
  const displayName = profile?.name || profile?.display_name || 
    `${post.author.slice(0, 8)}...${post.author.slice(-4)}`
@@ -25,7 +26,7 @@ const BlogPostCard: React.FC<BlogPostCardProps> = ({ post, href }) => {
  return (
    <Link 
      to={href}
-      className="blog-post-card"
+      className={`blog-post-card ${level ? `level-${level}` : ''}`}
      style={{ textDecoration: 'none', color: 'inherit' }}
    >
      <div className="blog-post-card-image">
--- a/src/components/BookmarkItem.tsx
+++ b/src/components/BookmarkItem.tsx
@@ -1,5 +1,7 @@
 import React, { useState } from 'react'
-import { faBookOpen, faPlay, faEye } from '@fortawesome/free-solid-svg-icons'
+import { faNewspaper, faStickyNote, faCirclePlay, faCamera, faFileLines } from '@fortawesome/free-regular-svg-icons'
+import { faGlobe } 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, neventEncode } from 'nostr-tools/nip19'
@@ -66,18 +68,40 @@ export const BookmarkItem: React.FC<BookmarkItemProps> = ({ bookmark, index, onS
    return short(bookmark.pubkey) // fallback to short pubkey
  }

-  // use helper from kindIcon.ts
+  // Get content type icon based on bookmark kind and URL classification
+  const getContentTypeIcon = (): IconDefinition => {
+    if (isArticle) return faNewspaper
+    
+    // For web bookmarks, classify the URL to determine icon
+    if (isWebBookmark && firstUrlClassification) {
+      switch (firstUrlClassification.type) {
+        case 'youtube':
+        case 'video':
+          return faCirclePlay
+        case 'image':
+          return faCamera
+        case 'article':
+          return faNewspaper
+        default:
+          return faGlobe
+      }
+    }
+    
+    if (!hasUrls) return faStickyNote // Just a text note
+    if (firstUrlClassification?.type === 'youtube' || firstUrlClassification?.type === 'video') return faCirclePlay
+    return faFileLines
+  }

  const getIconForUrlType = (url: string) => {
    const classification = classifyUrl(url)
    switch (classification.type) {
      case 'youtube':
      case 'video':
-        return faPlay
+        return faCirclePlay
      case 'image':
-        return faEye
+        return faCamera
      default:
-        return faBookOpen
+        return faFileLines
    }
  }

@@ -113,11 +137,14 @@ export const BookmarkItem: React.FC<BookmarkItemProps> = ({ bookmark, index, onS
    getAuthorDisplayName,
    handleReadNow,
    articleImage,
-    articleSummary
+    articleSummary,
+    contentTypeIcon: getContentTypeIcon()
  }

  if (viewMode === 'compact') {
-    return <CompactView {...sharedProps} />
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars, no-unused-vars
+    const { articleImage, ...compactProps } = sharedProps
+    return <CompactView {...compactProps} />
  }

  if (viewMode === 'large') {
@@ -125,5 +152,5 @@ export const BookmarkItem: React.FC<BookmarkItemProps> = ({ bookmark, index, onS
    return <LargeView {...sharedProps} getIconForUrlType={getIconForUrlType} previewImage={previewImage} />
  }

-  return <CardView {...sharedProps} getIconForUrlType={getIconForUrlType} articleImage={articleImage} />
+  return <CardView {...sharedProps} articleImage={articleImage} />
 }
--- a/src/components/BookmarkList.tsx
+++ b/src/components/BookmarkList.tsx
@@ -1,17 +1,24 @@
-import React, { useRef } from 'react'
+import React, { useRef, useState } from 'react'
+import { useNavigate } from 'react-router-dom'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faChevronLeft, faBookmark, faList, faThLarge, faImage, faRotate } from '@fortawesome/free-solid-svg-icons'
+import { faChevronLeft, faBookmark, faList, faThLarge, faImage, faRotate, faHeart, faPlus } from '@fortawesome/free-solid-svg-icons'
 import { formatDistanceToNow } from 'date-fns'
 import { RelayPool } from 'applesauce-relay'
 import { Bookmark, IndividualBookmark } from '../types/bookmarks'
 import { BookmarkItem } from './BookmarkItem'
 import SidebarHeader from './SidebarHeader'
 import IconButton from './IconButton'
+import CompactButton from './CompactButton'
 import { ViewMode } from './Bookmarks'
-import { extractUrlsFromContent } from '../services/bookmarkHelpers'
 import { usePullToRefresh } from 'use-pull-to-refresh'
 import RefreshIndicator from './RefreshIndicator'
 import { BookmarkSkeleton } from './Skeletons'
+import { groupIndividualBookmarks, hasContent, getBookmarkSets, getBookmarksWithoutSet } from '../utils/bookmarkUtils'
+import { UserSettings } from '../services/settingsService'
+import AddBookmarkModal from './AddBookmarkModal'
+import { createWebBookmark } from '../services/webBookmarkService'
+import { RELAYS } from '../config/relays'
+import { Hooks } from 'applesauce-react'

 interface BookmarkListProps {
  bookmarks: Bookmark[]
@@ -29,6 +36,7 @@ interface BookmarkListProps {
  loading?: boolean
  relayPool: RelayPool | null
  isMobile?: boolean
+  settings?: UserSettings
 }

 export const BookmarkList: React.FC<BookmarkListProps> = ({
@@ -46,9 +54,22 @@ export const BookmarkList: React.FC<BookmarkListProps> = ({
  lastFetchTime,
  loading = false,
  relayPool,
-  isMobile = false
+  isMobile = false,
+  settings
 }) => {
+  const navigate = useNavigate()
  const bookmarksListRef = useRef<HTMLDivElement>(null)
+  const friendsColor = settings?.highlightColorFriends || '#f97316'
+  const [showAddModal, setShowAddModal] = useState(false)
+  const activeAccount = Hooks.useActiveAccount()
+
+  const handleSaveBookmark = async (url: string, title?: string, description?: string, tags?: string[]) => {
+    if (!activeAccount || !relayPool) {
+      throw new Error('Please login to create bookmarks')
+    }
+
+    await createWebBookmark(url, title, description, tags, activeAccount, relayPool, RELAYS)
+  }

  // Pull-to-refresh for bookmarks
  const { isRefreshing: isPulling, pullPosition } = usePullToRefresh({
@@ -62,36 +83,31 @@ export const BookmarkList: React.FC<BookmarkListProps> = ({
    isDisabled: !onRefresh
  })

-  // Helper to check if a bookmark has either content or a URL
-  const hasContentOrUrl = (ib: IndividualBookmark) => {
-    // Check if has content (text)
-    const hasContent = ib.content && ib.content.trim().length > 0
-    
-    // Check if has URL
-    let hasUrl = false
-    
-    // For web bookmarks (kind:39701), URL is in the 'd' tag
-    if (ib.kind === 39701) {
-      const dTag = ib.tags?.find((t: string[]) => t[0] === 'd')?.[1]
-      hasUrl = !!dTag && dTag.trim().length > 0
-    } else {
-      // For other bookmarks, extract URLs from content
-      const urls = extractUrlsFromContent(ib.content || '')
-      hasUrl = urls.length > 0
-    }
-    
-    // Always show articles (kind:30023) as they have special handling
-    if (ib.kind === 30023) return true
-    
-    // Otherwise, must have either content or URL
-    return hasContent || hasUrl
-  }
-  
  // Merge and flatten all individual bookmarks from all lists
-  // Re-sort after flattening to ensure newest first across all lists
  const allIndividualBookmarks = bookmarks.flatMap(b => b.individualBookmarks || [])
-    .filter(hasContentOrUrl)
-    .sort((a, b) => ((b.added_at || 0) - (a.added_at || 0)) || ((b.created_at || 0) - (a.created_at || 0)))
+    .filter(hasContent)
+  
+  // Separate bookmarks with setName (kind 30003) from regular bookmarks
+  const bookmarksWithoutSet = getBookmarksWithoutSet(allIndividualBookmarks)
+  const bookmarkSets = getBookmarkSets(allIndividualBookmarks)
+  
+  // Group non-set bookmarks as before
+  const groups = groupIndividualBookmarks(bookmarksWithoutSet)
+  const sections: Array<{ key: string; title: string; items: IndividualBookmark[] }> = [
+    { key: 'private', title: 'Private bookmarks', items: groups.privateItems },
+    { key: 'public', title: 'Public bookmarks', items: groups.publicItems },
+    { key: 'web', title: 'Web bookmarks', items: groups.web },
+    { key: 'amethyst', title: 'Old Bookmarks (Legacy)', items: groups.amethyst }
+  ]
+  
+  // Add bookmark sets as additional sections
+  bookmarkSets.forEach(set => {
+    sections.push({
+      key: `set-${set.name}`,
+      title: set.title || set.name,
+      items: set.bookmarks
+    })
+  })
  
  if (isCollapsed) {
    // Check if the selected URL is in bookmarks
@@ -121,7 +137,6 @@ export const BookmarkList: React.FC<BookmarkListProps> = ({
        onToggleCollapse={onToggleCollapse} 
        onLogout={onLogout}
        onOpenSettings={onOpenSettings}
-        relayPool={relayPool}
        isMobile={isMobile}
      />
      
@@ -150,53 +165,87 @@ export const BookmarkList: React.FC<BookmarkListProps> = ({
            isRefreshing={isPulling || isRefreshing || false}
            pullPosition={pullPosition}
          />
-          <div className={`bookmarks-grid bookmarks-${viewMode}`}>
-            {allIndividualBookmarks.map((individualBookmark, index) => 
-              <BookmarkItem 
-                key={`${individualBookmark.id}-${index}`}
-                bookmark={individualBookmark} 
-                index={index} 
-                onSelectUrl={onSelectUrl}
-                viewMode={viewMode}
-              />
-            )}
-          </div>
+          {sections.filter(s => s.items.length > 0).map(section => (
+            <div key={section.key} className="bookmarks-section">
+              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+                <h3 className="bookmarks-section-title" style={{ margin: 0, padding: '1.5rem 0.5rem 0.375rem', flex: 1 }}>{section.title}</h3>
+                {section.key === 'web' && activeAccount && (
+                  <CompactButton
+                    icon={faPlus}
+                    onClick={() => setShowAddModal(true)}
+                    title="Add web bookmark"
+                    ariaLabel="Add web bookmark"
+                    className="bookmark-section-action"
+                  />
+                )}
+              </div>
+              <div className={`bookmarks-grid bookmarks-${viewMode}`}>
+                {section.items.map((individualBookmark, index) => (
+                  <BookmarkItem 
+                    key={`${section.key}-${individualBookmark.id}-${index}`}
+                    bookmark={individualBookmark} 
+                    index={index} 
+                    onSelectUrl={onSelectUrl}
+                    viewMode={viewMode}
+                  />
+                ))}
+              </div>
+            </div>
+          ))}
        </div>
      )}
      <div className="view-mode-controls">
-        {onRefresh && (
+        <div className="view-mode-left">
          <IconButton
-            icon={faRotate}
-            onClick={onRefresh}
-            title={lastFetchTime ? `Refresh bookmarks (updated ${formatDistanceToNow(lastFetchTime, { addSuffix: true })})` : 'Refresh bookmarks'}
-            ariaLabel="Refresh bookmarks"
+            icon={faHeart}
+            onClick={() => navigate('/support')}
+            title="Support Boris"
+            ariaLabel="Support"
            variant="ghost"
-            disabled={isRefreshing}
-            spin={isRefreshing}
+            style={{ color: friendsColor }}
          />
-        )}
-        <IconButton
-          icon={faList}
-          onClick={() => onViewModeChange('compact')}
-          title="Compact list view"
-          ariaLabel="Compact list view"
-          variant={viewMode === 'compact' ? 'primary' : 'ghost'}
-        />
-        <IconButton
-          icon={faThLarge}
-          onClick={() => onViewModeChange('cards')}
-          title="Cards view"
-          ariaLabel="Cards view"
-          variant={viewMode === 'cards' ? 'primary' : 'ghost'}
-        />
-        <IconButton
-          icon={faImage}
-          onClick={() => onViewModeChange('large')}
-          title="Large preview view"
-          ariaLabel="Large preview view"
-          variant={viewMode === 'large' ? 'primary' : 'ghost'}
-        />
+        </div>
+        <div className="view-mode-right">
+          {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}
+            />
+          )}
+          <IconButton
+            icon={faList}
+            onClick={() => onViewModeChange('compact')}
+            title="Compact list view"
+            ariaLabel="Compact list view"
+            variant={viewMode === 'compact' ? 'primary' : 'ghost'}
+          />
+          <IconButton
+            icon={faThLarge}
+            onClick={() => onViewModeChange('cards')}
+            title="Cards view"
+            ariaLabel="Cards view"
+            variant={viewMode === 'cards' ? 'primary' : 'ghost'}
+          />
+          <IconButton
+            icon={faImage}
+            onClick={() => onViewModeChange('large')}
+            title="Large preview view"
+            ariaLabel="Large preview view"
+            variant={viewMode === 'large' ? 'primary' : 'ghost'}
+          />
+        </div>
      </div>
+      {showAddModal && (
+        <AddBookmarkModal
+          onClose={() => setShowAddModal(false)}
+          onSave={handleSaveBookmark}
+        />
+      )}
    </div>
  )
 }
--- a/src/components/BookmarkViews/CardView.tsx
+++ b/src/components/BookmarkViews/CardView.tsx
@@ -1,13 +1,12 @@
 import React, { useState } from 'react'
 import { Link } from 'react-router-dom'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faBookmark, faUserLock, faChevronDown, faChevronUp, faGlobe } from '@fortawesome/free-solid-svg-icons'
+import { faUserLock, faChevronDown, faChevronUp } from '@fortawesome/free-solid-svg-icons'
+import { IconDefinition } from '@fortawesome/fontawesome-svg-core'
 import { IndividualBookmark } from '../../types/bookmarks'
 import { formatDate, renderParsedContent } from '../../utils/bookmarkUtils'
 import ContentWithResolvedProfiles from '../ContentWithResolvedProfiles'
-import IconButton from '../IconButton'
 import { classifyUrl } from '../../utils/helpers'
-import { IconGetter } from './shared'
 import { useImageCache } from '../../hooks/useImageCache'
 import { getPreviewImage, fetchOgImage } from '../../utils/imagePreview'
 import { getEventUrl } from '../../config/nostrGateways'
@@ -18,13 +17,13 @@ interface CardViewProps {
  hasUrls: boolean
  extractedUrls: string[]
  onSelectUrl?: (url: string, bookmark?: { id: string; kind: number; tags: string[][]; pubkey: string }) => void
-  getIconForUrlType: IconGetter
  authorNpub: string
  eventNevent?: string
  getAuthorDisplayName: () => string
  handleReadNow: (e: React.MouseEvent<HTMLButtonElement>) => void
  articleImage?: string
  articleSummary?: string
+  contentTypeIcon: IconDefinition
 }

 export const CardView: React.FC<CardViewProps> = ({
@@ -33,13 +32,13 @@ export const CardView: React.FC<CardViewProps> = ({
  hasUrls,
  extractedUrls,
  onSelectUrl,
-  getIconForUrlType,
  authorNpub,
  eventNevent,
  getAuthorDisplayName,
  handleReadNow,
  articleImage,
-  articleSummary
+  articleSummary,
+  contentTypeIcon
 }) => {
  const firstUrl = hasUrls ? extractedUrls[0] : null
  const firstUrlClassificationType = firstUrl ? classifyUrl(firstUrl)?.type : null
@@ -52,7 +51,6 @@ export const CardView: React.FC<CardViewProps> = ({
  const contentLength = (bookmark.content || '').length
  const shouldTruncate = !expanded && contentLength > 210
  const isArticle = bookmark.kind === 30023
-  const isWebBookmark = bookmark.kind === 39701
  
  // Determine which image to use (article image, instant preview, or OG image)
  const previewImage = articleImage || instantPreview || ogImage
@@ -92,18 +90,9 @@ export const CardView: React.FC<CardViewProps> = ({
      )}
      <div className="bookmark-header">
        <span className="bookmark-type">
-          {isWebBookmark ? (
-            <span className="fa-layers fa-fw">
-              <FontAwesomeIcon icon={faBookmark} className="bookmark-visibility public" />
-              <FontAwesomeIcon icon={faGlobe} className="bookmark-visibility public" transform="shrink-8 down-2" />
-            </span>
-          ) : bookmark.isPrivate ? (
-            <>
-              <FontAwesomeIcon icon={faBookmark} className="bookmark-visibility public" />
-              <FontAwesomeIcon icon={faUserLock} className="bookmark-visibility private" />
-            </>
-          ) : (
-            <FontAwesomeIcon icon={faBookmark} className="bookmark-visibility public" />
+          <FontAwesomeIcon icon={contentTypeIcon} className="content-type-icon" />
+          {bookmark.isPrivate && (
+            <FontAwesomeIcon icon={faUserLock} className="bookmark-visibility private" />
          )}
        </span>
        
@@ -127,23 +116,14 @@ export const CardView: React.FC<CardViewProps> = ({
        <div className="bookmark-urls">
          {(urlsExpanded ? extractedUrls : extractedUrls.slice(0, 1)).map((url, urlIndex) => {
            return (
-              <div key={urlIndex} className="url-row">
-                <button
-                  className="bookmark-url"
-                  onClick={(e) => { e.stopPropagation(); onSelectUrl?.(url) }}
-                  title="Open in reader"
-                >
-                  {url}
-                </button>
-                <IconButton
-                  icon={getIconForUrlType(url)}
-                  ariaLabel="Open"
-                  title="Open"
-                  variant="success"
-                  size={32}
-                  onClick={(e) => { e.preventDefault(); e.stopPropagation(); onSelectUrl?.(url) }}
-                />
-              </div>
+              <button
+                key={urlIndex}
+                className="bookmark-url"
+                onClick={(e) => { e.stopPropagation(); onSelectUrl?.(url) }}
+                title="Open in reader"
+              >
+                {url}
+              </button>
            )
          })}
          {extractedUrls.length > 1 && (
--- a/src/components/BookmarkViews/CompactView.tsx
+++ b/src/components/BookmarkViews/CompactView.tsx
@@ -1,10 +1,10 @@
 import React from 'react'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faBookmark, faUserLock, faGlobe } from '@fortawesome/free-solid-svg-icons'
+import { faUserLock } from '@fortawesome/free-solid-svg-icons'
+import { IconDefinition } from '@fortawesome/fontawesome-svg-core'
 import { IndividualBookmark } from '../../types/bookmarks'
 import { formatDateCompact } from '../../utils/bookmarkUtils'
 import ContentWithResolvedProfiles from '../ContentWithResolvedProfiles'
-import { useImageCache } from '../../hooks/useImageCache'

 interface CompactViewProps {
  bookmark: IndividualBookmark
@@ -12,8 +12,8 @@ interface CompactViewProps {
  hasUrls: boolean
  extractedUrls: string[]
  onSelectUrl?: (url: string, bookmark?: { id: string; kind: number; tags: string[][]; pubkey: string }) => void
-  articleImage?: string
  articleSummary?: string
+  contentTypeIcon: IconDefinition
 }

 export const CompactView: React.FC<CompactViewProps> = ({
@@ -22,16 +22,13 @@ export const CompactView: React.FC<CompactViewProps> = ({
  hasUrls,
  extractedUrls,
  onSelectUrl,
-  articleImage,
-  articleSummary
+  articleSummary,
+  contentTypeIcon
 }) => {
  const isArticle = bookmark.kind === 30023
  const isWebBookmark = bookmark.kind === 39701
  const isClickable = hasUrls || isArticle || isWebBookmark
  
-  // Get cached image for thumbnail
-  const cachedImage = useImageCache(articleImage || undefined)
-  
  const handleCompactClick = () => {
    if (!onSelectUrl) return
    
@@ -55,26 +52,10 @@ export const CompactView: React.FC<CompactViewProps> = ({
        role={isClickable ? 'button' : undefined}
        tabIndex={isClickable ? 0 : undefined}
      >
-        {/* Thumbnail image */}
-        {cachedImage && (
-          <div className="compact-thumbnail">
-            <img src={cachedImage} alt="" />
-          </div>
-        )}
-        
        <span className="bookmark-type-compact">
-          {isWebBookmark ? (
-            <span className="fa-layers fa-fw">
-              <FontAwesomeIcon icon={faBookmark} className="bookmark-visibility public" />
-              <FontAwesomeIcon icon={faGlobe} className="bookmark-visibility public" transform="shrink-8 down-2" />
-            </span>
-          ) : bookmark.isPrivate ? (
-            <>
-              <FontAwesomeIcon icon={faBookmark} className="bookmark-visibility public" />
-              <FontAwesomeIcon icon={faUserLock} className="bookmark-visibility private" />
-            </>
-          ) : (
-            <FontAwesomeIcon icon={faBookmark} className="bookmark-visibility public" />
+          <FontAwesomeIcon icon={contentTypeIcon} className="content-type-icon" />
+          {bookmark.isPrivate && (
+            <FontAwesomeIcon icon={faUserLock} className="bookmark-visibility private" />
          )}
        </span>
        {displayText && (
--- a/src/components/BookmarkViews/LargeView.tsx
+++ b/src/components/BookmarkViews/LargeView.tsx
@@ -1,6 +1,8 @@
 import React from 'react'
 import { Link } from 'react-router-dom'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faUserLock } from '@fortawesome/free-solid-svg-icons'
+import { IconDefinition } from '@fortawesome/fontawesome-svg-core'
 import { IndividualBookmark } from '../../types/bookmarks'
 import { formatDate } from '../../utils/bookmarkUtils'
 import ContentWithResolvedProfiles from '../ContentWithResolvedProfiles'
@@ -21,6 +23,7 @@ interface LargeViewProps {
  getAuthorDisplayName: () => string
  handleReadNow: (e: React.MouseEvent<HTMLButtonElement>) => void
  articleSummary?: string
+  contentTypeIcon: IconDefinition
 }

 export const LargeView: React.FC<LargeViewProps> = ({
@@ -35,7 +38,8 @@ export const LargeView: React.FC<LargeViewProps> = ({
  eventNevent,
  getAuthorDisplayName,
  handleReadNow,
-  articleSummary
+  articleSummary,
+  contentTypeIcon
 }) => {
  const cachedImage = useImageCache(previewImage || undefined)
  const isArticle = bookmark.kind === 30023
@@ -90,6 +94,12 @@ export const LargeView: React.FC<LargeViewProps> = ({
        )}
        
        <div className="large-footer">
+          <span className="bookmark-type-large">
+            <FontAwesomeIcon icon={contentTypeIcon} className="content-type-icon" />
+            {bookmark.isPrivate && (
+              <FontAwesomeIcon icon={faUserLock} className="bookmark-visibility private" />
+            )}
+          </span>
          <span className="large-author">
            <Link
              to={`/p/${authorNpub}`}
--- a/src/components/Bookmarks.tsx
+++ b/src/components/Bookmarks.tsx
@@ -58,16 +58,18 @@ const Bookmarks: React.FC<BookmarksProps> = ({ relayPool, onLogout }) => {
  // Extract tab from profile routes
  const profileTab = location.pathname.endsWith('/writings') ? 'writings' : 'highlights'
  
-  // Decode npub to pubkey for profile view
+  // Decode npub or nprofile to pubkey for profile view
  let profilePubkey: string | undefined
  if (npub && showProfile) {
    try {
      const decoded = nip19.decode(npub)
      if (decoded.type === 'npub') {
        profilePubkey = decoded.data
+      } else if (decoded.type === 'nprofile') {
+        profilePubkey = decoded.data.pubkey
      }
    } catch (err) {
-      console.error('Failed to decode npub:', err)
+      console.error('Failed to decode npub/nprofile:', err)
    }
  }
  
@@ -126,10 +128,13 @@ const Bookmarks: React.FC<BookmarksProps> = ({ relayPool, onLogout }) => {
  } = useBookmarksUI({ settings })

  // Close sidebar on mobile when route changes (e.g., clicking on blog posts in Explore)
+  const prevPathnameRef = useRef<string>(location.pathname)
  useEffect(() => {
-    if (isMobile && isSidebarOpen) {
+    // Only close if pathname actually changed, not on initial render or other state changes
+    if (isMobile && isSidebarOpen && prevPathnameRef.current !== location.pathname) {
      toggleSidebar()
    }
+    prevPathnameRef.current = location.pathname
  }, [location.pathname, isMobile, isSidebarOpen, toggleSidebar])

  // Handle highlight navigation from explore page
--- a/src/components/ContentPanel.tsx
+++ b/src/components/ContentPanel.tsx
@@ -6,10 +6,10 @@ import rehypeRaw from 'rehype-raw'
 import rehypePrism from 'rehype-prism-plus'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import 'prismjs/themes/prism-tomorrow.css'
-import { faSpinner, faCheckCircle, faEllipsisH, faExternalLinkAlt, faMobileAlt, faCopy, faShare } from '@fortawesome/free-solid-svg-icons'
+import { faSpinner, faCheckCircle, faEllipsisH, faExternalLinkAlt, faMobileAlt, faCopy, faShare, faSearch } from '@fortawesome/free-solid-svg-icons'
 import { ContentSkeleton } from './Skeletons'
 import { nip19 } from 'nostr-tools'
-import { getNostrUrl } from '../config/nostrGateways'
+import { getNostrUrl, getSearchUrl } from '../config/nostrGateways'
 import { RELAYS } from '../config/relays'
 import { RelayPool } from 'applesauce-relay'
 import { IAccount } from 'applesauce-accounts'
@@ -100,6 +100,9 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
  const [showArticleMenu, setShowArticleMenu] = useState(false)
  const [showVideoMenu, setShowVideoMenu] = useState(false)
  const [showExternalMenu, setShowExternalMenu] = useState(false)
+  const [articleMenuOpenUpward, setArticleMenuOpenUpward] = useState(false)
+  const [videoMenuOpenUpward, setVideoMenuOpenUpward] = useState(false)
+  const [externalMenuOpenUpward, setExternalMenuOpenUpward] = useState(false)
  const articleMenuRef = useRef<HTMLDivElement>(null)
  const videoMenuRef = useRef<HTMLDivElement>(null)
  const externalMenuRef = useRef<HTMLDivElement>(null)
@@ -161,6 +164,35 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
    }
  }, [showArticleMenu, showVideoMenu, showExternalMenu])

+  // Check available space and position menu upward if needed
+  useEffect(() => {
+    const checkMenuPosition = (menuRef: React.RefObject<HTMLDivElement>, setOpenUpward: (value: boolean) => void) => {
+      if (!menuRef.current) return
+
+      const menuWrapper = menuRef.current
+      const menuElement = menuWrapper.querySelector('.article-menu') as HTMLElement
+      if (!menuElement) return
+
+      const rect = menuWrapper.getBoundingClientRect()
+      const viewportHeight = window.innerHeight
+      const spaceBelow = viewportHeight - rect.bottom
+      const menuHeight = menuElement.offsetHeight || 300 // estimate if not rendered yet
+
+      // Open upward if there's not enough space below (with 20px buffer)
+      setOpenUpward(spaceBelow < menuHeight + 20 && rect.top > menuHeight)
+    }
+
+    if (showArticleMenu) {
+      checkMenuPosition(articleMenuRef, setArticleMenuOpenUpward)
+    }
+    if (showVideoMenu) {
+      checkMenuPosition(videoMenuRef, setVideoMenuOpenUpward)
+    }
+    if (showExternalMenu) {
+      checkMenuPosition(externalMenuRef, setExternalMenuOpenUpward)
+    }
+  }, [showArticleMenu, showVideoMenu, showExternalMenu])
+
  const readingStats = useMemo(() => {
    const content = markdown || html || ''
    if (!content) return null
@@ -218,9 +250,15 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
      relays: relayHints
    })

+    // Check for source URL in 'r' tags
+    const sourceUrl = currentArticle.tags.find(t => t[0] === 'r')?.[1]
+
    return {
      portal: getNostrUrl(naddr),
-      native: `nostr:${naddr}`
+      native: `nostr:${naddr}`,
+      naddr,
+      sourceUrl,
+      borisUrl: `${window.location.origin}/a/${naddr}`
    }
  }

@@ -245,6 +283,73 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
    }
    setShowArticleMenu(false)
  }
+
+  const handleShareBoris = async () => {
+    try {
+      if (!articleLinks) return
+      
+      if ((navigator as { share?: (d: { title?: string; url?: string }) => Promise<void> }).share) {
+        await (navigator as { share: (d: { title?: string; url?: string }) => Promise<void> }).share({ 
+          title: title || 'Article', 
+          url: articleLinks.borisUrl 
+        })
+      } else {
+        await navigator.clipboard.writeText(articleLinks.borisUrl)
+      }
+    } catch (e) {
+      console.warn('Share failed', e)
+    } finally {
+      setShowArticleMenu(false)
+    }
+  }
+
+  const handleShareOriginal = async () => {
+    try {
+      if (!articleLinks?.sourceUrl) return
+      
+      if ((navigator as { share?: (d: { title?: string; url?: string }) => Promise<void> }).share) {
+        await (navigator as { share: (d: { title?: string; url?: string }) => Promise<void> }).share({ 
+          title: title || 'Article', 
+          url: articleLinks.sourceUrl 
+        })
+      } else {
+        await navigator.clipboard.writeText(articleLinks.sourceUrl)
+      }
+    } catch (e) {
+      console.warn('Share failed', e)
+    } finally {
+      setShowArticleMenu(false)
+    }
+  }
+
+  const handleCopyBoris = async () => {
+    try {
+      if (!articleLinks) return
+      await navigator.clipboard.writeText(articleLinks.borisUrl)
+    } catch (e) {
+      console.warn('Copy failed', e)
+    } finally {
+      setShowArticleMenu(false)
+    }
+  }
+
+  const handleCopyOriginal = async () => {
+    try {
+      if (!articleLinks?.sourceUrl) return
+      await navigator.clipboard.writeText(articleLinks.sourceUrl)
+    } catch (e) {
+      console.warn('Copy failed', e)
+    } finally {
+      setShowArticleMenu(false)
+    }
+  }
+
+  const handleOpenSearch = () => {
+    if (articleLinks) {
+      window.open(getSearchUrl(articleLinks.naddr), '_blank', 'noopener,noreferrer')
+    }
+    setShowArticleMenu(false)
+  }
  
  // Video actions
  const handleOpenVideoExternal = () => {
@@ -307,10 +412,16 @@ const ContentPanel: React.FC<ContentPanelProps> = ({

  const handleShareExternalUrl = async () => {
    try {
-      if (selectedUrl && (navigator as { share?: (d: { title?: string; url?: string }) => Promise<void> }).share) {
-        await (navigator as { share: (d: { title?: string; url?: string }) => Promise<void> }).share({ title: title || 'Article', url: selectedUrl })
-      } else if (selectedUrl) {
-        await navigator.clipboard.writeText(selectedUrl)
+      if (!selectedUrl) return
+      const borisUrl = `${window.location.origin}/r/${encodeURIComponent(selectedUrl)}`
+      
+      if ((navigator as { share?: (d: { title?: string; url?: string }) => Promise<void> }).share) {
+        await (navigator as { share: (d: { title?: string; url?: string }) => Promise<void> }).share({ 
+          title: title || 'Article', 
+          url: borisUrl 
+        })
+      } else {
+        await navigator.clipboard.writeText(borisUrl)
      }
    } catch (e) {
      console.warn('Share failed', e)
@@ -318,6 +429,13 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
      setShowExternalMenu(false)
    }
  }
+
+  const handleSearchExternalUrl = () => {
+    if (selectedUrl) {
+      window.open(getSearchUrl(selectedUrl), '_blank', 'noopener,noreferrer')
+    }
+    setShowExternalMenu(false)
+  }
  
  // Check if article is already marked as read when URL/article changes
  useEffect(() => {
@@ -501,7 +619,7 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
                <FontAwesomeIcon icon={faEllipsisH} />
              </button>
              {showVideoMenu && (
-                <div className="article-menu">
+                <div className={`article-menu ${videoMenuOpenUpward ? 'open-upward' : ''}`}>
                  <button className="article-menu-item" onClick={handleOpenVideoExternal}>
                    <FontAwesomeIcon icon={faExternalLinkAlt} />
                    <span>Open Link</span>
@@ -582,13 +700,13 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
                </button>
                
                {showExternalMenu && (
-                  <div className="article-menu">
+                  <div className={`article-menu ${externalMenuOpenUpward ? 'open-upward' : ''}`}>
                    <button
                      className="article-menu-item"
-                      onClick={handleOpenExternalUrl}
+                      onClick={handleShareExternalUrl}
                    >
-                      <FontAwesomeIcon icon={faExternalLinkAlt} />
-                      <span>Open Original URL</span>
+                      <FontAwesomeIcon icon={faShare} />
+                      <span>Share</span>
                    </button>
                    <button
                      className="article-menu-item"
@@ -599,10 +717,17 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
                    </button>
                    <button
                      className="article-menu-item"
-                      onClick={handleShareExternalUrl}
+                      onClick={handleOpenExternalUrl}
                    >
-                      <FontAwesomeIcon icon={faShare} />
-                      <span>Share</span>
+                      <FontAwesomeIcon icon={faExternalLinkAlt} />
+                      <span>Open Original</span>
+                    </button>
+                    <button
+                      className="article-menu-item"
+                      onClick={handleSearchExternalUrl}
+                    >
+                      <FontAwesomeIcon icon={faSearch} />
+                      <span>Search</span>
                    </button>
                  </div>
                )}
@@ -623,13 +748,52 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
                </button>
                
                {showArticleMenu && (
-                  <div className="article-menu">
+                  <div className={`article-menu ${articleMenuOpenUpward ? 'open-upward' : ''}`}>
+                    <button
+                      className="article-menu-item"
+                      onClick={handleShareBoris}
+                    >
+                      <FontAwesomeIcon icon={faShare} />
+                      <span>Share</span>
+                    </button>
+                    {articleLinks.sourceUrl && (
+                      <button
+                        className="article-menu-item"
+                        onClick={handleShareOriginal}
+                      >
+                        <FontAwesomeIcon icon={faShare} />
+                        <span>Share Original</span>
+                      </button>
+                    )}
+                    <button
+                      className="article-menu-item"
+                      onClick={handleCopyBoris}
+                    >
+                      <FontAwesomeIcon icon={faCopy} />
+                      <span>Copy Link</span>
+                    </button>
+                    {articleLinks.sourceUrl && (
+                      <button
+                        className="article-menu-item"
+                        onClick={handleCopyOriginal}
+                      >
+                        <FontAwesomeIcon icon={faCopy} />
+                        <span>Copy Original</span>
+                      </button>
+                    )}
+                    <button
+                      className="article-menu-item"
+                      onClick={handleOpenSearch}
+                    >
+                      <FontAwesomeIcon icon={faSearch} />
+                      <span>Search</span>
+                    </button>
                    <button
                      className="article-menu-item"
                      onClick={handleOpenPortal}
                    >
                      <FontAwesomeIcon icon={faExternalLinkAlt} />
-                      <span>Open on Nostr</span>
+                      <span>Open with njump</span>
                    </button>
                    <button
                      className="article-menu-item"
--- a/src/components/Explore.tsx
+++ b/src/components/Explore.tsx
@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useMemo } from 'react'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faNewspaper, faHighlighter, faUser, faUserGroup, faNetworkWired, faArrowsRotate } from '@fortawesome/free-solid-svg-icons'
+import { faNewspaper, faHighlighter, faUser, faUserGroup, faNetworkWired, faArrowsRotate, faSpinner } from '@fortawesome/free-solid-svg-icons'
 import IconButton from './IconButton'
 import { BlogPostSkeleton, HighlightSkeleton } from './Skeletons'
 import { Hooks } from 'applesauce-react'
@@ -278,25 +278,33 @@ const Explore: React.FC<ExploreProps> = ({ relayPool, eventStore, settings, acti
    })
  }, [highlights, activeAccount?.pubkey, followedPubkeys, visibility])

-  // Filter blog posts by future dates and visibility
+  // Filter blog posts by future dates and visibility, and add level classification
  const filteredBlogPosts = useMemo(() => {
    const maxFutureTime = Date.now() / 1000 + (24 * 60 * 60) // 1 day from now
-    return blogPosts.filter(post => {
-      // Filter out future dates
-      const publishedTime = post.published || post.event.created_at
-      if (publishedTime > maxFutureTime) return false
-      
-      // Apply visibility filters
-      const isMine = activeAccount && post.author === activeAccount.pubkey
-      const isFriend = followedPubkeys.has(post.author)
-      const isNostrverse = !isMine && !isFriend
-      
-      if (isMine && !visibility.mine) return false
-      if (isFriend && !visibility.friends) return false
-      if (isNostrverse && !visibility.nostrverse) return false
-      
-      return true
-    })
+    return blogPosts
+      .filter(post => {
+        // Filter out future dates
+        const publishedTime = post.published || post.event.created_at
+        if (publishedTime > maxFutureTime) return false
+        
+        // Apply visibility filters
+        const isMine = activeAccount && post.author === activeAccount.pubkey
+        const isFriend = followedPubkeys.has(post.author)
+        const isNostrverse = !isMine && !isFriend
+        
+        if (isMine && !visibility.mine) return false
+        if (isFriend && !visibility.friends) return false
+        if (isNostrverse && !visibility.nostrverse) return false
+        
+        return true
+      })
+      .map(post => {
+        // Add level classification
+        const isMine = activeAccount && post.author === activeAccount.pubkey
+        const isFriend = followedPubkeys.has(post.author)
+        const level: 'mine' | 'friends' | 'nostrverse' = isMine ? 'mine' : isFriend ? 'friends' : 'nostrverse'
+        return { ...post, level }
+      })
  }, [blogPosts, activeAccount, followedPubkeys, visibility])

  const renderTabContent = () => {
@@ -312,8 +320,8 @@ const Explore: React.FC<ExploreProps> = ({ relayPool, eventStore, settings, acti
          )
        }
        return filteredBlogPosts.length === 0 ? (
-          <div className="explore-empty" style={{ gridColumn: '1/-1', textAlign: 'center', color: 'var(--text-secondary)', padding: '2rem' }}>
-            <p>No blog posts yet. Pull to refresh!</p>
+          <div className="explore-loading" style={{ gridColumn: '1/-1', display: 'flex', justifyContent: 'center', alignItems: 'center', padding: '4rem', color: 'var(--text-secondary)' }}>
+            <FontAwesomeIcon icon={faSpinner} spin size="2x" />
          </div>
        ) : (
          <div className="explore-grid">
@@ -322,6 +330,7 @@ const Explore: React.FC<ExploreProps> = ({ relayPool, eventStore, settings, acti
                key={`${post.author}:${post.event.tags.find(t => t[0] === 'd')?.[1]}`}
                post={post}
                href={getPostUrl(post)}
+                level={post.level}
              />
            ))}
          </div>
@@ -338,8 +347,8 @@ const Explore: React.FC<ExploreProps> = ({ relayPool, eventStore, settings, acti
          )
        }
        return classifiedHighlights.length === 0 ? (
-          <div className="explore-empty" style={{ gridColumn: '1/-1', textAlign: 'center', color: 'var(--text-secondary)', padding: '2rem' }}>
-            <p>No highlights yet. Pull to refresh!</p>
+          <div className="explore-loading" style={{ gridColumn: '1/-1', display: 'flex', justifyContent: 'center', alignItems: 'center', padding: '4rem', color: 'var(--text-secondary)' }}>
+            <FontAwesomeIcon icon={faSpinner} spin size="2x" />
          </div>
        ) : (
          <div className="explore-grid">
--- a/src/components/HighlightItem.tsx
+++ b/src/components/HighlightItem.tsx
@@ -13,7 +13,6 @@ import { areAllRelaysLocal } from '../utils/helpers'
 import { nip19 } from 'nostr-tools'
 import { formatDateCompact } from '../utils/bookmarkUtils'
 import { createDeletionRequest } from '../services/deletionService'
-import ConfirmDialog from './ConfirmDialog'
 import { getNostrUrl } from '../config/nostrGateways'
 import CompactButton from './CompactButton'
 import { HighlightCitation } from './HighlightCitation'
@@ -257,21 +256,22 @@ export const HighlightItem: React.FC<HighlightItemProps> = ({
    }
  }, [isSelected])
  
-  // Close menu when clicking outside
+  // Close menu and reset delete confirm when clicking outside
  useEffect(() => {
    const handleClickOutside = (event: MouseEvent) => {
      if (menuRef.current && !menuRef.current.contains(event.target as Node)) {
        setShowMenu(false)
+        setShowDeleteConfirm(false)
      }
    }
    
-    if (showMenu) {
+    if (showMenu || showDeleteConfirm) {
      document.addEventListener('mousedown', handleClickOutside)
      return () => {
        document.removeEventListener('mousedown', handleClickOutside)
      }
    }
-  }, [showMenu])
+  }, [showMenu, showDeleteConfirm])
  
  const handleItemClick = () => {
    if (onHighlightClick) {
@@ -434,12 +434,12 @@ export const HighlightItem: React.FC<HighlightItemProps> = ({
    }
  }
  
-  const handleCancelDelete = () => {
-    setShowDeleteConfirm(false)
-  }
-  
  const handleMenuToggle = (e: React.MouseEvent) => {
    e.stopPropagation()
+    // Reset delete confirm state when opening/closing menu
+    if (!showMenu) {
+      setShowDeleteConfirm(false)
+    }
    setShowMenu(!showMenu)
  }
  
@@ -461,6 +461,11 @@ export const HighlightItem: React.FC<HighlightItemProps> = ({
    setShowDeleteConfirm(true)
  }
  
+  const handleConfirmDeleteClick = (e: React.MouseEvent) => {
+    e.stopPropagation()
+    handleConfirmDelete()
+  }
+  
  return (
    <>
    <div 
@@ -533,6 +538,33 @@ export const HighlightItem: React.FC<HighlightItemProps> = ({
          </div>
          
          <div className="highlight-menu-wrapper" ref={menuRef}>
+            {showDeleteConfirm && canDelete && (
+              <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', marginRight: '0.5rem' }}>
+                <span style={{ fontSize: '0.875rem', color: 'rgb(220 38 38)', fontWeight: 500 }}>Confirm?</span>
+                <button
+                  onClick={handleConfirmDeleteClick}
+                  disabled={isDeleting}
+                  title="Confirm deletion"
+                  style={{ 
+                    color: 'rgb(220 38 38)',
+                    background: 'rgba(220, 38, 38, 0.1)',
+                    border: '1px solid rgb(220 38 38)',
+                    borderRadius: '4px',
+                    padding: '0.375rem',
+                    cursor: isDeleting ? 'not-allowed' : 'pointer',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    minWidth: '33px',
+                    minHeight: '33px',
+                    transition: 'all 0.2s'
+                  }}
+                >
+                  <FontAwesomeIcon icon={isDeleting ? faSpinner : faTrash} spin={isDeleting} />
+                </button>
+              </div>
+            )}
+            
            <CompactButton
              icon={faEllipsisH}
              onClick={handleMenuToggle}
@@ -546,7 +578,7 @@ export const HighlightItem: React.FC<HighlightItemProps> = ({
                  onClick={handleOpenPortal}
                >
                  <FontAwesomeIcon icon={faExternalLinkAlt} />
-                  <span>Open on Nostr</span>
+                  <span>Open with njump</span>
                </button>
                <button
                  className="highlight-menu-item"
@@ -571,17 +603,6 @@ export const HighlightItem: React.FC<HighlightItemProps> = ({
        </div>
      </div>
    </div>
-    
-    <ConfirmDialog
-      isOpen={showDeleteConfirm}
-      title="Delete Highlight?"
-      message="This will request deletion of your highlight. It may still be visible on some relays that don't honor deletion requests."
-      confirmText="Delete"
-      cancelText="Cancel"
-      variant="danger"
-      onConfirm={handleConfirmDelete}
-      onCancel={handleCancelDelete}
-    />
    </>
  )
 }
--- a/src/components/Me.tsx
+++ b/src/components/Me.tsx
@@ -19,11 +19,11 @@ import BlogPostCard from './BlogPostCard'
 import { BookmarkItem } from './BookmarkItem'
 import IconButton from './IconButton'
 import { ViewMode } from './Bookmarks'
-import { extractUrlsFromContent } from '../services/bookmarkHelpers'
 import { getCachedMeData, setCachedMeData, updateCachedHighlights } from '../services/meCache'
 import { faBooks } from '../icons/customIcons'
 import { usePullToRefresh } from 'use-pull-to-refresh'
 import RefreshIndicator from './RefreshIndicator'
+import { groupIndividualBookmarks, hasContent } from '../utils/bookmarkUtils'

 interface MeProps {
  relayPool: RelayPool
@@ -150,23 +150,6 @@ const Me: React.FC<MeProps> = ({ relayPool, activeTab: propActiveTab, pubkey: pr
    return `/a/${naddr}`
  }

-  // Helper to check if a bookmark has either content or a URL (same logic as BookmarkList)
-  const hasContentOrUrl = (ib: IndividualBookmark) => {
-    const hasContent = ib.content && ib.content.trim().length > 0
-    
-    let hasUrl = false
-    if (ib.kind === 39701) {
-      const dTag = ib.tags?.find((t: string[]) => t[0] === 'd')?.[1]
-      hasUrl = !!dTag && dTag.trim().length > 0
-    } else {
-      const urls = extractUrlsFromContent(ib.content || '')
-      hasUrl = urls.length > 0
-    }
-    
-    if (ib.kind === 30023) return true
-    return hasContent || hasUrl
-  }
-
  const handleSelectUrl = (url: string, bookmark?: { id: string; kind: number; tags: string[][]; pubkey: string }) => {
    if (bookmark && bookmark.kind === 30023) {
      // For kind:30023 articles, navigate to the article route
@@ -186,10 +169,16 @@ const Me: React.FC<MeProps> = ({ relayPool, activeTab: propActiveTab, pubkey: pr
    }
  }

-  // Merge and flatten all individual bookmarks (same logic as BookmarkList)
+  // Merge and flatten all individual bookmarks
  const allIndividualBookmarks = bookmarks.flatMap(b => b.individualBookmarks || [])
-    .filter(hasContentOrUrl)
-    .sort((a, b) => ((b.added_at || 0) - (a.added_at || 0)) || ((b.created_at || 0) - (a.created_at || 0)))
+    .filter(hasContent)
+  const groups = groupIndividualBookmarks(allIndividualBookmarks)
+  const sections: Array<{ key: string; title: string; items: IndividualBookmark[] }> = [
+    { key: 'private', title: 'Private bookmarks', items: groups.privateItems },
+    { key: 'public', title: 'Public bookmarks', items: groups.publicItems },
+    { key: 'web', title: 'Web bookmarks', items: groups.web },
+    { key: 'amethyst', title: 'Old Bookmarks (Legacy)', items: groups.amethyst }
+  ]

  // Show content progressively - no blocking error screens
  const hasData = highlights.length > 0 || bookmarks.length > 0 || readArticles.length > 0 || writings.length > 0
@@ -208,12 +197,8 @@ const Me: React.FC<MeProps> = ({ relayPool, activeTab: propActiveTab, pubkey: pr
          )
        }
        return highlights.length === 0 ? (
-          <div className="explore-empty" style={{ padding: '2rem', textAlign: 'center', color: 'var(--text-secondary)' }}>
-            <p>
-              {isOwnProfile 
-                ? 'No highlights yet. Pull to refresh!'
-                : 'No highlights yet. Pull to refresh!'}
-            </p>
+          <div className="explore-loading" style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', padding: '4rem', color: 'var(--text-secondary)' }}>
+            <FontAwesomeIcon icon={faSpinner} spin size="2x" />
          </div>
        ) : (
          <div className="highlights-list me-highlights-list">
@@ -241,22 +226,27 @@ const Me: React.FC<MeProps> = ({ relayPool, activeTab: propActiveTab, pubkey: pr
          )
        }
        return allIndividualBookmarks.length === 0 ? (
-          <div className="explore-empty" style={{ padding: '2rem', textAlign: 'center', color: 'var(--text-secondary)' }}>
-            <p>No bookmarks yet. Pull to refresh!</p>
+          <div className="explore-loading" style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', padding: '4rem', color: 'var(--text-secondary)' }}>
+            <FontAwesomeIcon icon={faSpinner} spin size="2x" />
          </div>
        ) : (
          <div className="bookmarks-list">
-            <div className={`bookmarks-grid bookmarks-${viewMode}`}>
-              {allIndividualBookmarks.map((individualBookmark, index) => (
-                <BookmarkItem
-                  key={`${individualBookmark.id}-${index}`}
-                  bookmark={individualBookmark}
-                  index={index}
-                  viewMode={viewMode}
-                  onSelectUrl={handleSelectUrl}
-                />
-              ))}
-            </div>
+            {sections.filter(s => s.items.length > 0).map(section => (
+              <div key={section.key} className="bookmarks-section">
+                <h3 className="bookmarks-section-title">{section.title}</h3>
+                <div className={`bookmarks-grid bookmarks-${viewMode}`}>
+                  {section.items.map((individualBookmark, index) => (
+                    <BookmarkItem
+                      key={`${section.key}-${individualBookmark.id}-${index}`}
+                      bookmark={individualBookmark}
+                      index={index}
+                      viewMode={viewMode}
+                      onSelectUrl={handleSelectUrl}
+                    />
+                  ))}
+                </div>
+              </div>
+            ))}
            <div className="view-mode-controls" style={{
              display: 'flex',
              justifyContent: 'center',
@@ -301,8 +291,8 @@ const Me: React.FC<MeProps> = ({ relayPool, activeTab: propActiveTab, pubkey: pr
          )
        }
        return readArticles.length === 0 ? (
-          <div className="explore-empty" style={{ padding: '2rem', textAlign: 'center', color: 'var(--text-secondary)' }}>
-            <p>No read articles yet. Pull to refresh!</p>
+          <div className="explore-loading" style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', padding: '4rem', color: 'var(--text-secondary)' }}>
+            <FontAwesomeIcon icon={faSpinner} spin size="2x" />
          </div>
        ) : (
          <div className="explore-grid">
@@ -327,12 +317,8 @@ const Me: React.FC<MeProps> = ({ relayPool, activeTab: propActiveTab, pubkey: pr
          )
        }
        return writings.length === 0 ? (
-          <div className="explore-empty" style={{ padding: '2rem', textAlign: 'center', color: 'var(--text-secondary)' }}>
-            <p>
-              {isOwnProfile 
-                ? 'No articles written yet. Pull to refresh!'
-                : 'No articles written yet. Pull to refresh!'}
-            </p>
+          <div className="explore-loading" style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', padding: '4rem', color: 'var(--text-secondary)' }}>
+            <FontAwesomeIcon icon={faSpinner} spin size="2x" />
          </div>
        ) : (
          <div className="explore-grid">
@@ -360,12 +346,6 @@ const Me: React.FC<MeProps> = ({ relayPool, activeTab: propActiveTab, pubkey: pr
      <div className="explore-header">
        {viewingPubkey && <AuthorCard authorPubkey={viewingPubkey} clickable={false} />}
        
-        {loading && hasData && (
-          <div className="explore-loading" style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', padding: '0.5rem 0' }}>
-            <FontAwesomeIcon icon={faSpinner} spin />
-          </div>
-        )}
-        
        <div className="me-tabs">
          <button
            className={`me-tab ${activeTab === 'highlights' ? 'active' : ''}`}
--- a/src/components/ReaderHeader.tsx
+++ b/src/components/ReaderHeader.tsx
@@ -1,8 +1,9 @@
 import React, { useMemo } from 'react'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faHighlighter, faClock } from '@fortawesome/free-solid-svg-icons'
+import { faHighlighter, faClock, faNewspaper } from '@fortawesome/free-solid-svg-icons'
 import { format } from 'date-fns'
 import { useImageCache } from '../hooks/useImageCache'
+import { useAdaptiveTextColor } from '../hooks/useAdaptiveTextColor'
 import { UserSettings } from '../services/settingsService'
 import { Highlight, HighlightLevel } from '../types/highlights'
 import { HighlightVisibility } from './HighlightsPanel'
@@ -34,6 +35,7 @@ const ReaderHeader: React.FC<ReaderHeaderProps> = ({
  highlightVisibility = { nostrverse: true, friends: true, mine: true }
 }) => {
  const cachedImage = useImageCache(image)
+  const { textColor } = useAdaptiveTextColor(cachedImage)
  const formattedDate = published ? format(new Date(published * 1000), 'MMM d, yyyy') : null
  const isLongSummary = summary && summary.length > 150
  
@@ -70,13 +72,25 @@ const ReaderHeader: React.FC<ReaderHeaderProps> = ({
    }
  }, [highlights, highlightVisibility, settings])
  
-  if (cachedImage) {
+  // Show hero section if we have an image OR a title
+  if (cachedImage || title) {
    return (
      <>
        <div className="reader-hero-image">
-          <img src={cachedImage} alt={title || 'Article image'} />
+          {cachedImage ? (
+            <img src={cachedImage} alt={title || 'Article image'} />
+          ) : (
+            <div className="reader-hero-placeholder">
+              <FontAwesomeIcon icon={faNewspaper} />
+            </div>
+          )}
          {formattedDate && (
-            <div className="publish-date-topright">
+            <div 
+              className="publish-date-topright"
+              style={{ 
+                color: textColor
+              }}
+            >
              {formattedDate}
            </div>
          )}
@@ -118,7 +132,12 @@ const ReaderHeader: React.FC<ReaderHeaderProps> = ({
      {title && (
        <div className="reader-header">
          {formattedDate && (
-            <div className="publish-date-topright">
+            <div 
+              className="publish-date-topright"
+              style={{ 
+                color: textColor
+              }}
+            >
              {formattedDate}
            </div>
          )}
--- a/src/components/Settings.tsx
+++ b/src/components/Settings.tsx
@@ -35,6 +35,7 @@ const DEFAULT_SETTINGS: UserSettings = {
  zapSplitAuthorWeight: 50,
  useLocalRelayAsCache: true,
  rebroadcastToAllRelays: false,
+  paragraphAlignment: 'justify',
 }

 interface SettingsProps {
--- a/src/components/Settings/PWASettings.tsx
+++ b/src/components/Settings/PWASettings.tsx
@@ -16,7 +16,7 @@ const PWASettings: React.FC = () => {
  if (isInstalled) {
    return (
      <div className="settings-section">
-        <h3>Progressive Web App</h3>
+        <h3 className="section-title">Progressive Web App</h3>
        <div className="setting-item">
          <div className="setting-info">
            <FontAwesomeIcon icon={faCheckCircle} style={{ color: '#22c55e', marginRight: '8px' }} />
@@ -36,41 +36,19 @@ const PWASettings: React.FC = () => {

  return (
    <div className="settings-section">
-      <h3>Progressive Web App</h3>
-      <div className="setting-item">
+      <h3 className="section-title">Progressive Web App</h3>
+      <div className="setting-group">
        <div className="setting-info">
          <FontAwesomeIcon icon={faMobileAlt} style={{ marginRight: '8px' }} />
          <span>Install Boris as an app</span>
        </div>
-        <p className="setting-description">
+        <p className="setting-description" style={{ marginTop: '0.5rem', marginBottom: '1rem', color: 'var(--color-text-secondary)', fontSize: '0.875rem' }}>
          Install Boris on your device for a native app experience with offline support.
        </p>
        <button
          onClick={handleInstall}
-          className="install-button"
-          style={{
-            marginTop: '12px',
-            padding: '8px 16px',
-            background: 'linear-gradient(135deg, #3b82f6 0%, #1e40af 100%)',
-            color: 'white',
-            border: 'none',
-            borderRadius: '8px',
-            cursor: 'pointer',
-            display: 'flex',
-            alignItems: 'center',
-            gap: '8px',
-            fontSize: '14px',
-            fontWeight: '500',
-            transition: 'transform 0.2s, box-shadow 0.2s',
-          }}
-          onMouseEnter={(e) => {
-            e.currentTarget.style.transform = 'translateY(-2px)'
-            e.currentTarget.style.boxShadow = '0 4px 12px rgba(59, 130, 246, 0.3)'
-          }}
-          onMouseLeave={(e) => {
-            e.currentTarget.style.transform = 'translateY(0)'
-            e.currentTarget.style.boxShadow = 'none'
-          }}
+          className="zap-preset-btn"
+          style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}
        >
          <FontAwesomeIcon icon={faDownload} />
          Install App
--- a/src/components/Settings/ReadingDisplaySettings.tsx
+++ b/src/components/Settings/ReadingDisplaySettings.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import { faHighlighter, faUnderline, faNetworkWired, faUserGroup, faUser } from '@fortawesome/free-solid-svg-icons'
+import { faHighlighter, faUnderline, faNetworkWired, faUserGroup, faUser, faAlignLeft, faAlignJustify } from '@fortawesome/free-solid-svg-icons'
 import { UserSettings } from '../../services/settingsService'
 import IconButton from '../IconButton'
 import ColorPicker from '../ColorPicker'
@@ -19,35 +19,6 @@ const ReadingDisplaySettings: React.FC<ReadingDisplaySettingsProps> = ({ setting
    <div className="settings-section">
      <h3 className="section-title">Reading & Display</h3>
      
-      <div style={{ display: 'flex', gap: '1rem', flexWrap: 'wrap' }}>
-        <div className="setting-group setting-inline" style={{ flex: '1 1 auto', minWidth: '200px' }}>
-          <label htmlFor="readingFont">Reading Font</label>
-          <div className="setting-control">
-            <FontSelector
-              value={settings.readingFont || 'source-serif-4'}
-              onChange={(font) => onUpdate({ readingFont: font })}
-            />
-          </div>
-        </div>
-
-        <div className="setting-group setting-inline" style={{ flex: '0 1 auto' }}>
-          <label>Font Size</label>
-          <div className="setting-buttons">
-            {[16, 18, 21, 24, 28, 32].map(size => (
-              <button
-                key={size}
-                onClick={() => onUpdate({ fontSize: size })}
-                className={`font-size-btn ${(settings.fontSize || 21) === size ? 'active' : ''}`}
-                title={`${size}px`}
-                style={{ fontSize: `${size - 2}px` }}
-              >
-                A
-              </button>
-            ))}
-          </div>
-        </div>
-      </div>
-
      <div className="setting-group setting-inline">
        <label>Highlight Style</label>
        <div className="setting-buttons">
@@ -69,31 +40,21 @@ const ReadingDisplaySettings: React.FC<ReadingDisplaySettingsProps> = ({ setting
      </div>

      <div className="setting-group setting-inline">
-        <label className="setting-label">My Highlights</label>
-        <div className="setting-control">
-          <ColorPicker
-            selectedColor={settings.highlightColorMine || '#fde047'}
-            onColorChange={(color) => onUpdate({ highlightColorMine: color })}
+        <label>Paragraph Alignment</label>
+        <div className="setting-buttons">
+          <IconButton 
+            icon={faAlignLeft} 
+            onClick={() => onUpdate({ paragraphAlignment: 'left' })} 
+            title="Left aligned" 
+            ariaLabel="Left aligned" 
+            variant={settings.paragraphAlignment === 'left' ? 'primary' : 'ghost'} 
          />
-        </div>
-      </div>
-
-      <div className="setting-group setting-inline">
-        <label className="setting-label">Friends Highlights</label>
-        <div className="setting-control">
-          <ColorPicker
-            selectedColor={settings.highlightColorFriends || '#f97316'}
-            onColorChange={(color) => onUpdate({ highlightColorFriends: color })}
-          />
-        </div>
-      </div>
-
-      <div className="setting-group setting-inline">
-        <label className="setting-label">Nostrverse Highlights</label>
-        <div className="setting-control">
-          <ColorPicker
-            selectedColor={settings.highlightColorNostrverse || '#9333ea'}
-            onColorChange={(color) => onUpdate({ highlightColorNostrverse: color })}
+          <IconButton 
+            icon={faAlignJustify} 
+            onClick={() => onUpdate({ paragraphAlignment: 'justify' })} 
+            title="Justified" 
+            ariaLabel="Justified" 
+            variant={(settings.paragraphAlignment || 'justify') === 'justify' ? 'primary' : 'ghost'} 
          />
        </div>
      </div>
@@ -137,6 +98,65 @@ const ReadingDisplaySettings: React.FC<ReadingDisplaySettingsProps> = ({ setting
        </div>
      </div>

+      <div style={{ display: 'flex', gap: '1rem', flexWrap: 'wrap' }}>
+        <div className="setting-group setting-inline" style={{ flex: '1 1 auto', minWidth: '200px' }}>
+          <label htmlFor="readingFont">Reading Font</label>
+          <div className="setting-control">
+            <FontSelector
+              value={settings.readingFont || 'source-serif-4'}
+              onChange={(font) => onUpdate({ readingFont: font })}
+            />
+          </div>
+        </div>
+
+        <div className="setting-group setting-inline" style={{ flex: '0 1 auto' }}>
+          <label>Font Size</label>
+          <div className="setting-buttons">
+            {[16, 18, 21, 24, 28, 32].map(size => (
+              <button
+                key={size}
+                onClick={() => onUpdate({ fontSize: size })}
+                className={`font-size-btn ${(settings.fontSize || 21) === size ? 'active' : ''}`}
+                title={`${size}px`}
+                style={{ fontSize: `${size - 2}px` }}
+              >
+                A
+              </button>
+            ))}
+          </div>
+        </div>
+      </div>
+
+      <div className="setting-group setting-inline">
+        <label className="setting-label">My Highlights</label>
+        <div className="setting-control">
+          <ColorPicker
+            selectedColor={settings.highlightColorMine || '#fde047'}
+            onColorChange={(color) => onUpdate({ highlightColorMine: color })}
+          />
+        </div>
+      </div>
+
+      <div className="setting-group setting-inline">
+        <label className="setting-label">Friends Highlights</label>
+        <div className="setting-control">
+          <ColorPicker
+            selectedColor={settings.highlightColorFriends || '#f97316'}
+            onColorChange={(color) => onUpdate({ highlightColorFriends: color })}
+          />
+        </div>
+      </div>
+
+      <div className="setting-group setting-inline">
+        <label className="setting-label">Nostrverse Highlights</label>
+        <div className="setting-control">
+          <ColorPicker
+            selectedColor={settings.highlightColorNostrverse || '#9333ea'}
+            onColorChange={(color) => onUpdate({ highlightColorNostrverse: color })}
+          />
+        </div>
+      </div>
+
      <div className="setting-group">
        <label htmlFor="showHighlights" className="checkbox-label">
          <input
@@ -157,7 +177,8 @@ const ReadingDisplaySettings: React.FC<ReadingDisplaySettingsProps> = ({ setting
          style={{ 
            fontFamily: previewFontFamily,
            fontSize: `${settings.fontSize || 21}px`,
-            '--highlight-rgb': hexToRgb(settings.highlightColor || '#ffff00')
+            '--highlight-rgb': hexToRgb(settings.highlightColor || '#ffff00'),
+            '--paragraph-alignment': settings.paragraphAlignment || 'justify'
          } as React.CSSProperties}
        >
          <h3>The Quick Brown Fox</h3>
--- a/src/components/SidebarHeader.tsx
+++ b/src/components/SidebarHeader.tsx
@@ -1,28 +1,22 @@
 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, faTimes, faBolt } from '@fortawesome/free-solid-svg-icons'
+import { faChevronRight, faRightFromBracket, faRightToBracket, faUserCircle, faGear, faHome, faNewspaper, faTimes } from '@fortawesome/free-solid-svg-icons'
 import { Hooks } from 'applesauce-react'
 import { useEventModel } from 'applesauce-react/hooks'
 import { Models } from 'applesauce-core'
 import { Accounts } from 'applesauce-accounts'
-import { RelayPool } from 'applesauce-relay'
 import IconButton from './IconButton'
-import AddBookmarkModal from './AddBookmarkModal'
-import { createWebBookmark } from '../services/webBookmarkService'
-import { RELAYS } from '../config/relays'

 interface SidebarHeaderProps {
  onToggleCollapse: () => void
  onLogout: () => void
  onOpenSettings: () => void
-  relayPool: RelayPool | null
  isMobile?: boolean
 }

-const SidebarHeader: React.FC<SidebarHeaderProps> = ({ onToggleCollapse, onLogout, onOpenSettings, relayPool, isMobile = false }) => {
+const SidebarHeader: React.FC<SidebarHeaderProps> = ({ onToggleCollapse, onLogout, onOpenSettings, isMobile = false }) => {
  const [isConnecting, setIsConnecting] = useState(false)
-  const [showAddModal, setShowAddModal] = useState(false)
  const navigate = useNavigate()
  const activeAccount = Hooks.useActiveAccount()
  const accountManager = Hooks.useAccountManager()
@@ -54,14 +48,6 @@ const SidebarHeader: React.FC<SidebarHeaderProps> = ({ onToggleCollapse, onLogou
    return `${activeAccount.pubkey.slice(0, 8)}...${activeAccount.pubkey.slice(-8)}`
  }

-  const handleSaveBookmark = async (url: string, title?: string, description?: string, tags?: string[]) => {
-    if (!activeAccount || !relayPool) {
-      throw new Error('Please login to create bookmarks')
-    }
-
-    await createWebBookmark(url, title, description, tags, activeAccount, relayPool, RELAYS)
-  }
-
  const profileImage = getProfileImage()

  return (
@@ -117,13 +103,6 @@ const SidebarHeader: React.FC<SidebarHeaderProps> = ({ onToggleCollapse, onLogou
          ariaLabel="Explore"
          variant="ghost"
        />
-        <IconButton
-          icon={faBolt}
-          onClick={() => navigate('/support')}
-          title="Support"
-          ariaLabel="Support"
-          variant="ghost"
-        />
        <IconButton
          icon={faGear}
          onClick={onOpenSettings}
@@ -131,15 +110,6 @@ const SidebarHeader: React.FC<SidebarHeaderProps> = ({ onToggleCollapse, onLogou
          ariaLabel="Settings"
          variant="ghost"
        />
-        {activeAccount && (
-          <IconButton
-            icon={faPlus}
-            onClick={() => setShowAddModal(true)}
-            title="Add bookmark"
-            ariaLabel="Add bookmark"
-            variant="ghost"
-          />
-        )}
        {activeAccount ? (
          <IconButton
            icon={faRightFromBracket}
@@ -159,12 +129,6 @@ const SidebarHeader: React.FC<SidebarHeaderProps> = ({ onToggleCollapse, onLogou
        )}
        </div>
      </div>
-      {showAddModal && (
-        <AddBookmarkModal
-          onClose={() => setShowAddModal(false)}
-          onSave={handleSaveBookmark}
-        />
-      )}
    </>
  )
 }
--- a/src/components/Support.tsx
+++ b/src/components/Support.tsx
@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react'
 import { RelayPool } from 'applesauce-relay'
 import { IEventStore } from 'applesauce-core'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faBolt, faSpinner, faUserCircle } from '@fortawesome/free-solid-svg-icons'
+import { faHeart, faSpinner, faUserCircle } from '@fortawesome/free-solid-svg-icons'
 import { fetchBorisZappers, ZapSender } from '../services/zapReceiptService'
 import { fetchProfiles } from '../services/profileService'
 import { UserSettings } from '../services/settingsService'
@@ -207,7 +207,7 @@ const SupporterCard: React.FC<SupporterCardProps> = ({ supporter, isWhale }) =>
            className="absolute -bottom-1 -right-1 w-8 h-8 bg-yellow-400 rounded-full flex items-center justify-center border-2"
            style={{ borderColor: 'var(--color-bg)' }}
          >
-            <FontAwesomeIcon icon={faBolt} className="text-zinc-900 text-sm" />
+            <FontAwesomeIcon icon={faHeart} className="text-zinc-900 text-sm" />
          </div>
        )}
      </div>
--- a/src/components/ThreePaneLayout.tsx
+++ b/src/components/ThreePaneLayout.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from 'react'
+import React, { useEffect, useRef, useState } from 'react'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faBookmark, faHighlighter } from '@fortawesome/free-solid-svg-icons'
 import { RelayPool } from 'applesauce-relay'
@@ -105,13 +105,33 @@ const ThreePaneLayout: React.FC<ThreePaneLayoutProps> = (props) => {
  const highlightsRef = useRef<HTMLDivElement>(null)
  const mainPaneRef = useRef<HTMLDivElement>(null)
  
-  // Detect scroll direction to hide/show mobile buttons
-  // Now using window scroll (document scroll) instead of pane scroll
+  // Detect scroll direction and position to hide/show mobile buttons
+  // Only hide on scroll down when viewing article content
+  const isViewingArticle = !!(props.selectedUrl)
  const scrollDirection = useScrollDirection({ 
    threshold: 10, 
-    enabled: isMobile && !props.isSidebarOpen && props.isHighlightsCollapsed
+    enabled: isMobile && !props.isSidebarOpen && props.isHighlightsCollapsed && isViewingArticle
  })
-  const showMobileButtons = scrollDirection !== 'down'
+  
+  // Track if we're at the top of the page
+  const [isAtTop, setIsAtTop] = useState(true)
+  useEffect(() => {
+    if (!isMobile || !isViewingArticle) return
+    
+    const handleScroll = () => {
+      setIsAtTop(window.scrollY <= 10)
+    }
+    
+    handleScroll() // Check initial position
+    window.addEventListener('scroll', handleScroll, { passive: true })
+    
+    return () => window.removeEventListener('scroll', handleScroll)
+  }, [isMobile, isViewingArticle])
+  
+  // Bookmark button: hide only when scrolling down
+  const showBookmarkButton = scrollDirection !== 'down'
+  // Highlights button: hide when scrolling down OR at the top
+  const showHighlightsButton = scrollDirection !== 'down' && !isAtTop

  // Lock body scroll when mobile sidebar or highlights is open
  useEffect(() => {
@@ -229,11 +249,11 @@ const ThreePaneLayout: React.FC<ThreePaneLayoutProps> = (props) => {

  return (
    <>
-      {/* Mobile bookmark button - only show when viewing article (not on settings/explore/me/profile/support) */}
-      {isMobile && !props.isSidebarOpen && props.isHighlightsCollapsed && !props.showSettings && !props.showExplore && !props.showMe && !props.showProfile && !props.showSupport && (
+      {/* Mobile bookmark button - always show except on settings page */}
+      {isMobile && !props.isSidebarOpen && props.isHighlightsCollapsed && !props.showSettings && (
        <button
          className={`fixed z-[900] bg-zinc-800/70 border border-zinc-600/40 rounded-lg text-zinc-200 flex items-center justify-center transition-all duration-300 active:scale-95 backdrop-blur-sm md:hidden ${
-            showMobileButtons ? 'opacity-90 visible' : 'opacity-0 invisible pointer-events-none'
+            showBookmarkButton ? 'opacity-90 visible' : 'opacity-0 invisible pointer-events-none'
          }`}
          style={{
            top: 'calc(1rem + env(safe-area-inset-top))',
@@ -249,11 +269,11 @@ const ThreePaneLayout: React.FC<ThreePaneLayoutProps> = (props) => {
        </button>
      )}

-      {/* Mobile highlights button - only show when viewing article (not on settings/explore/me/profile/support) */}
-      {isMobile && !props.isSidebarOpen && props.isHighlightsCollapsed && !props.showSettings && !props.showExplore && !props.showMe && !props.showProfile && !props.showSupport && (
+      {/* Mobile highlights button - only show when viewing article content */}
+      {isMobile && !props.isSidebarOpen && props.isHighlightsCollapsed && !props.showSettings && isViewingArticle && (
        <button
          className={`fixed z-[900] border border-zinc-600/40 rounded-lg flex items-center justify-center transition-all duration-300 active:scale-95 backdrop-blur-sm md:hidden ${
-            showMobileButtons ? 'opacity-90 visible' : 'opacity-0 invisible pointer-events-none'
+            showHighlightsButton ? 'opacity-90 visible' : 'opacity-0 invisible pointer-events-none'
          }`}
          style={{ 
            top: 'calc(1rem + env(safe-area-inset-top))',
@@ -304,6 +324,7 @@ const ThreePaneLayout: React.FC<ThreePaneLayoutProps> = (props) => {
            loading={props.bookmarksLoading}
            relayPool={props.relayPool}
            isMobile={isMobile}
+            settings={props.settings}
          />
        </div>
        <div 
@@ -402,7 +423,7 @@ const ThreePaneLayout: React.FC<ThreePaneLayoutProps> = (props) => {
      )}
      <RelayStatusIndicator 
        relayPool={props.relayPool}
-        showOnMobile={showMobileButtons}
+        showOnMobile={showBookmarkButton}
      />
      {props.toastMessage && (
        <Toast
--- a/src/config/nostrGateways.ts
+++ b/src/config/nostrGateways.ts
@@ -2,20 +2,21 @@
 * Nostr gateway URLs for viewing events and profiles on the web
 */

-export const NOSTR_GATEWAY = 'https://ants.sh' as const
+export const NOSTR_GATEWAY = 'https://nostr.at' as const
+export const SEARCH_PORTAL = 'https://ants.sh' as const

 /**
 * Get a profile URL on the gateway
 */
 export function getProfileUrl(npub: string): string {
-  return `${NOSTR_GATEWAY}/p/${npub}`
+  return `${NOSTR_GATEWAY}/${npub}`
 }

 /**
 * Get an event URL on the gateway
 */
 export function getEventUrl(nevent: string): string {
-  return `${NOSTR_GATEWAY}/e/${nevent}`
+  return `${NOSTR_GATEWAY}/${nevent}`
 }

 /**
@@ -23,12 +24,14 @@ export function getEventUrl(nevent: string): string {
 * 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}`
+  // nostr.at uses simple /{identifier} format for all types
+  return `${NOSTR_GATEWAY}/${identifier}`
+}
+
+/**
+ * Get a search portal URL with a query
+ */
+export function getSearchUrl(query: string): string {
+  return `${SEARCH_PORTAL}/?q=${encodeURIComponent(query)}`
 }

--- a/src/hooks/useAdaptiveTextColor.ts
+++ b/src/hooks/useAdaptiveTextColor.ts
@@ -0,0 +1,90 @@
+import { useEffect, useState } from 'react'
+import { FastAverageColor } from 'fast-average-color'
+
+interface AdaptiveTextColor {
+  textColor: string
+}
+
+/**
+ * Hook to determine optimal text color based on image background
+ * Samples the top-right corner of the image to ensure publication date is readable
+ * 
+ * @param imageUrl - The URL of the image to analyze
+ * @returns Object containing textColor for optimal contrast
+ */
+export function useAdaptiveTextColor(imageUrl: string | undefined): AdaptiveTextColor {
+  const [colors, setColors] = useState<AdaptiveTextColor>({
+    textColor: '#ffffff'
+  })
+
+  useEffect(() => {
+    if (!imageUrl) {
+      // No image, use default white text
+      setColors({
+        textColor: '#ffffff'
+      })
+      return
+    }
+
+    const fac = new FastAverageColor()
+    const img = new Image()
+    img.crossOrigin = 'anonymous'
+    
+    img.onload = () => {
+      try {
+        const width = img.naturalWidth
+        const height = img.naturalHeight
+        
+        // Sample top-right corner (last 25% width, first 25% height)
+        const color = fac.getColor(img, {
+          left: Math.floor(width * 0.75),
+          top: 0,
+          width: Math.floor(width * 0.25),
+          height: Math.floor(height * 0.25)
+        })
+        
+        console.log('Adaptive color detected:', {
+          hex: color.hex,
+          rgb: color.rgb,
+          isLight: color.isLight,
+          isDark: color.isDark
+        })
+        
+        // Use library's built-in isLight check for optimal contrast
+        if (color.isLight) {
+          console.log('Light background detected, using black text')
+          setColors({
+            textColor: '#000000'
+          })
+        } else {
+          console.log('Dark background detected, using white text')
+          setColors({
+            textColor: '#ffffff'
+          })
+        }
+      } catch (error) {
+        // Fallback to default on error
+        console.error('Error analyzing image color:', error)
+        setColors({
+          textColor: '#ffffff'
+        })
+      }
+    }
+    
+    img.onerror = () => {
+      // Fallback to default if image fails to load
+      setColors({
+        textColor: '#ffffff'
+      })
+    }
+    
+    img.src = imageUrl
+
+    return () => {
+      fac.destroy()
+    }
+  }, [imageUrl])
+
+  return colors
+}
+
--- a/src/hooks/useBookmarksUI.ts
+++ b/src/hooks/useBookmarksUI.ts
@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react'
+import { useState, useEffect, useCallback } from 'react'
 import { NostrEvent } from 'nostr-tools'
 import { HighlightVisibility } from '../components/HighlightsPanel'
 import { UserSettings } from '../services/settingsService'
@@ -47,9 +47,9 @@ export const useBookmarksUI = ({ settings }: UseBookmarksUIParams) => {
    })
  }, [settings])

-  const toggleSidebar = () => {
+  const toggleSidebar = useCallback(() => {
    setIsSidebarOpen(prev => !prev)
-  }
+  }, [])

  return {
    isMobile,
--- a/src/hooks/useSettings.ts
+++ b/src/hooks/useSettings.ts
@@ -73,6 +73,9 @@ export function useSettings({ relayPool, eventStore, pubkey, accountManager }: U
      root.setProperty('--highlight-color-friends', settings.highlightColorFriends || '#f97316')
      root.setProperty('--highlight-color-nostrverse', settings.highlightColorNostrverse || '#9333ea')
      
+      // Set paragraph alignment
+      root.setProperty('--paragraph-alignment', settings.paragraphAlignment || 'justify')
+      
      console.log('✅ All styles applied')
    }
    
--- a/src/services/bookmarkEvents.ts
+++ b/src/services/bookmarkEvents.ts
@@ -19,7 +19,7 @@ export function dedupeNip51Events(events: NostrEvent[]): NostrEvent[] {
  const webBookmarks = unique.filter(e => e.kind === 39701)

  const bookmarkLists = unique
-    .filter(e => e.kind === 10003 || e.kind === 30001)
+    .filter(e => e.kind === 10003 || e.kind === 30003 || e.kind === 30001)
    .sort((a, b) => (b.created_at || 0) - (a.created_at || 0))
  const latestBookmarkList = bookmarkLists.find(list => !list.tags?.some((t: string[]) => t[0] === 'd'))

--- a/src/services/bookmarkHelpers.ts
+++ b/src/services/bookmarkHelpers.ts
@@ -16,11 +16,24 @@ export interface BookmarkData {
  tags?: string[][]
 }

+export interface AddressPointer {
+  kind: number
+  pubkey: string
+  identifier: string
+  relays?: string[]
+}
+
+export interface EventPointer {
+  id: string
+  relays?: string[]
+  author?: string
+}
+
 export interface ApplesauceBookmarks {
-  notes?: BookmarkData[]
-  articles?: BookmarkData[]
-  hashtags?: BookmarkData[]
-  urls?: BookmarkData[]
+  notes?: EventPointer[]
+  articles?: AddressPointer[]
+  hashtags?: string[]
+  urls?: string[]
 }

 export interface AccountWithExtension {
@@ -55,25 +68,83 @@ export const processApplesauceBookmarks = (

  if (typeof bookmarks === 'object' && bookmarks !== null && !Array.isArray(bookmarks)) {
    const applesauceBookmarks = bookmarks as ApplesauceBookmarks
-    const allItems: BookmarkData[] = []
-    if (applesauceBookmarks.notes) allItems.push(...applesauceBookmarks.notes)
-    if (applesauceBookmarks.articles) allItems.push(...applesauceBookmarks.articles)
-    if (applesauceBookmarks.hashtags) allItems.push(...applesauceBookmarks.hashtags)
-    if (applesauceBookmarks.urls) allItems.push(...applesauceBookmarks.urls)
+    const allItems: IndividualBookmark[] = []
+    
+    // Process notes (EventPointer[])
+    if (applesauceBookmarks.notes) {
+      applesauceBookmarks.notes.forEach((note: EventPointer) => {
+        allItems.push({
+          id: note.id,
+          content: '',
+          created_at: Math.floor(Date.now() / 1000),
+          pubkey: note.author || activeAccount.pubkey,
+          kind: 1, // Short note kind
+          tags: [],
+          parsedContent: undefined,
+          type: 'event' as const,
+          isPrivate,
+          added_at: Math.floor(Date.now() / 1000)
+        })
+      })
+    }
+    
+    // Process articles (AddressPointer[])
+    if (applesauceBookmarks.articles) {
+      applesauceBookmarks.articles.forEach((article: AddressPointer) => {
+        // Convert AddressPointer to coordinate format: kind:pubkey:identifier
+        const coordinate = `${article.kind}:${article.pubkey}:${article.identifier || ''}`
+        allItems.push({
+          id: coordinate,
+          content: '',
+          created_at: Math.floor(Date.now() / 1000),
+          pubkey: article.pubkey,
+          kind: article.kind, // Usually 30023 for long-form articles
+          tags: [],
+          parsedContent: undefined,
+          type: 'event' as const,
+          isPrivate,
+          added_at: Math.floor(Date.now() / 1000)
+        })
+      })
+    }
+    
+    // Process hashtags (string[])
+    if (applesauceBookmarks.hashtags) {
+      applesauceBookmarks.hashtags.forEach((hashtag: string) => {
+        allItems.push({
+          id: `hashtag-${hashtag}`,
+          content: `#${hashtag}`,
+          created_at: Math.floor(Date.now() / 1000),
+          pubkey: activeAccount.pubkey,
+          kind: 1,
+          tags: [['t', hashtag]],
+          parsedContent: undefined,
+          type: 'event' as const,
+          isPrivate,
+          added_at: Math.floor(Date.now() / 1000)
+        })
+      })
+    }
+    
+    // Process URLs (string[])
+    if (applesauceBookmarks.urls) {
+      applesauceBookmarks.urls.forEach((url: string) => {
+        allItems.push({
+          id: `url-${url}`,
+          content: url,
+          created_at: Math.floor(Date.now() / 1000),
+          pubkey: activeAccount.pubkey,
+          kind: 1,
+          tags: [['r', url]],
+          parsedContent: undefined,
+          type: 'event' as const,
+          isPrivate,
+          added_at: Math.floor(Date.now() / 1000)
+        })
+      })
+    }
+    
    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]
--- a/src/services/bookmarkProcessing.ts
+++ b/src/services/bookmarkProcessing.ts
@@ -33,6 +33,12 @@ export async function collectBookmarksFromEvents(
    if (!latestContent && evt.content && !Helpers.hasHiddenContent(evt)) latestContent = evt.content
    if (Array.isArray(evt.tags)) allTags = allTags.concat(evt.tags)

+    // Extract the 'd' tag and metadata for bookmark sets (kind 30003)
+    const dTag = evt.kind === 30003 ? evt.tags?.find((t: string[]) => t[0] === 'd')?.[1] : undefined
+    const setTitle = evt.kind === 30003 ? evt.tags?.find((t: string[]) => t[0] === 'title')?.[1] : undefined
+    const setDescription = evt.kind === 30003 ? evt.tags?.find((t: string[]) => t[0] === 'description')?.[1] : undefined
+    const setImage = evt.kind === 30003 ? evt.tags?.find((t: string[]) => t[0] === 'image')?.[1] : undefined
+
    // Handle web bookmarks (kind:39701) as individual bookmarks
    if (evt.kind === 39701) {
      publicItemsAll.push({
@@ -45,13 +51,27 @@ export async function collectBookmarksFromEvents(
        parsedContent: undefined,
        type: 'web' as const,
        isPrivate: false,
-        added_at: evt.created_at || Math.floor(Date.now() / 1000)
+        added_at: evt.created_at || Math.floor(Date.now() / 1000),
+        sourceKind: 39701,
+        setName: dTag,
+        setTitle,
+        setDescription,
+        setImage
      })
      continue
    }

    const pub = Helpers.getPublicBookmarks(evt)
-    publicItemsAll.push(...processApplesauceBookmarks(pub, activeAccount, false))
+    publicItemsAll.push(
+      ...processApplesauceBookmarks(pub, activeAccount, false).map(i => ({
+        ...i,
+        sourceKind: evt.kind,
+        setName: dTag,
+        setTitle,
+        setDescription,
+        setImage
+      }))
+    )

    try {
      if (Helpers.hasHiddenTags(evt) && !Helpers.isHiddenTagsUnlocked(evt) && signerCandidate) {
@@ -94,7 +114,16 @@ export async function collectBookmarksFromEvents(
          try {
            const hiddenTags = JSON.parse(decryptedContent) as string[][]
            const manualPrivate = Helpers.parseBookmarkTags(hiddenTags)
-            privateItemsAll.push(...processApplesauceBookmarks(manualPrivate, activeAccount, true))
+            privateItemsAll.push(
+              ...processApplesauceBookmarks(manualPrivate, activeAccount, true).map(i => ({
+                ...i,
+                sourceKind: evt.kind,
+                setName: dTag,
+                setTitle,
+                setDescription,
+                setImage
+              }))
+            )
            Reflect.set(evt, BookmarkHiddenSymbol, manualPrivate)
            Reflect.set(evt, 'EncryptedContentSymbol', decryptedContent)
            // Don't set latestContent to decrypted JSON - it's not user-facing content
@@ -106,7 +135,16 @@ export async function collectBookmarksFromEvents(

      const priv = Helpers.getHiddenBookmarks(evt)
      if (priv) {
-        privateItemsAll.push(...processApplesauceBookmarks(priv, activeAccount, true))
+        privateItemsAll.push(
+          ...processApplesauceBookmarks(priv, activeAccount, true).map(i => ({
+            ...i,
+            sourceKind: evt.kind,
+            setName: dTag,
+            setTitle,
+            setDescription,
+            setImage
+          }))
+        )
      }
    } catch {
      // ignore individual event failures
--- a/src/services/bookmarkService.ts
+++ b/src/services/bookmarkService.ts
@@ -5,7 +5,6 @@ import {
  dedupeNip51Events,
  hydrateItems,
  isAccountWithExtension,
-  isHexId,
  hasNip04Decrypt,
  hasNip44Decrypt,
  dedupeBookmarksById,
@@ -57,11 +56,28 @@ export const fetchBookmarks = async (
    rawEvents.forEach((evt, i) => {
      const dTag = evt.tags?.find((t: string[]) => t[0] === 'd')?.[1] || 'none'
      const contentPreview = evt.content ? evt.content.slice(0, 50) + (evt.content.length > 50 ? '...' : '') : 'empty'
-      console.log(`  Event ${i}: kind=${evt.kind}, id=${evt.id?.slice(0, 8)}, dTag=${dTag}, contentLength=${evt.content?.length || 0}, contentPreview=${contentPreview}`)
+      const eTags = evt.tags?.filter((t: string[]) => t[0] === 'e').length || 0
+      const aTags = evt.tags?.filter((t: string[]) => t[0] === 'a').length || 0
+      console.log(`  Event ${i}: kind=${evt.kind}, id=${evt.id?.slice(0, 8)}, dTag=${dTag}, contentLength=${evt.content?.length || 0}, eTags=${eTags}, aTags=${aTags}, contentPreview=${contentPreview}`)
    })

    const bookmarkListEvents = dedupeNip51Events(rawEvents)
    console.log('📋 After deduplication:', bookmarkListEvents.length, 'bookmark events')
+    
+    // Log which events made it through deduplication
+    bookmarkListEvents.forEach((evt, i) => {
+      const dTag = evt.tags?.find((t: string[]) => t[0] === 'd')?.[1] || 'none'
+      console.log(`  Dedupe ${i}: kind=${evt.kind}, id=${evt.id?.slice(0, 8)}, dTag="${dTag}"`)
+    })
+    
+    // Check specifically for Primal's "reads" list
+    const primalReads = rawEvents.find(e => e.kind === 10003 && e.tags?.find((t: string[]) => t[0] === 'd' && t[1] === 'reads'))
+    if (primalReads) {
+      console.log('✅ Found Primal reads list:', primalReads.id.slice(0, 8))
+    } else {
+      console.log('❌ No Primal reads list found (kind:10003 with d="reads")')
+    }
+    
    if (bookmarkListEvents.length === 0) {
      // Keep existing bookmarks visible; do not clear list if nothing new found
      return
@@ -97,20 +113,88 @@ export const fetchBookmarks = async (
    )

    const allItems = [...publicItemsAll, ...privateItemsAll]
-    const noteIds = Array.from(new Set(allItems.map(i => i.id).filter(isHexId)))
-    let idToEvent: Map<string, NostrEvent> = new Map()
+    
+    // Separate hex IDs (regular events) from coordinates (addressable events)
+    const noteIds: string[] = []
+    const coordinates: string[] = []
+    
+    allItems.forEach(i => {
+      // Check if it's a hex ID (64 character hex string)
+      if (/^[0-9a-f]{64}$/i.test(i.id)) {
+        noteIds.push(i.id)
+      } else if (i.id.includes(':')) {
+        // Coordinate format: kind:pubkey:identifier
+        coordinates.push(i.id)
+      }
+    })
+    
+    const idToEvent: Map<string, NostrEvent> = new Map()
+    
+    // Fetch regular events by ID
    if (noteIds.length > 0) {
      try {
        const events = await queryEvents(
          relayPool,
-          { ids: noteIds },
+          { ids: Array.from(new Set(noteIds)) },
          { localTimeoutMs: 800, remoteTimeoutMs: 2500 }
        )
-        idToEvent = new Map(events.map((e: NostrEvent) => [e.id, e]))
+        events.forEach((e: NostrEvent) => {
+          idToEvent.set(e.id, e)
+          // Also store by coordinate if it's an addressable event
+          if (e.kind && e.kind >= 30000 && e.kind < 40000) {
+            const dTag = e.tags?.find((t: string[]) => t[0] === 'd')?.[1] || ''
+            const coordinate = `${e.kind}:${e.pubkey}:${dTag}`
+            idToEvent.set(coordinate, e)
+          }
+        })
      } catch (error) {
-        console.warn('Failed to fetch events for hydration:', error)
+        console.warn('Failed to fetch events by ID:', error)
      }
    }
+    
+    // Fetch addressable events by coordinates
+    if (coordinates.length > 0) {
+      try {
+        // Group by kind for more efficient querying
+        const byKind = new Map<number, Array<{ pubkey: string; identifier: string }>>()
+        
+        coordinates.forEach(coord => {
+          const parts = coord.split(':')
+          const kind = parseInt(parts[0])
+          const pubkey = parts[1]
+          const identifier = parts[2] || ''
+          
+          if (!byKind.has(kind)) {
+            byKind.set(kind, [])
+          }
+          byKind.get(kind)!.push({ pubkey, identifier })
+        })
+        
+        // Query each kind group
+        for (const [kind, items] of byKind.entries()) {
+          const authors = Array.from(new Set(items.map(i => i.pubkey)))
+          const identifiers = Array.from(new Set(items.map(i => i.identifier)))
+          
+          const events = await queryEvents(
+            relayPool,
+            { kinds: [kind], authors, '#d': identifiers },
+            { localTimeoutMs: 800, remoteTimeoutMs: 2500 }
+          )
+          
+          events.forEach((e: NostrEvent) => {
+            const dTag = e.tags?.find((t: string[]) => t[0] === 'd')?.[1] || ''
+            const coordinate = `${e.kind}:${e.pubkey}:${dTag}`
+            idToEvent.set(coordinate, e)
+            // Also store by event ID
+            idToEvent.set(e.id, e)
+          })
+        }
+      } catch (error) {
+        console.warn('Failed to fetch addressable events:', error)
+      }
+    }
+    
+    console.log(`📦 Hydration: fetched ${idToEvent.size} events for ${allItems.length} bookmarks (${noteIds.length} notes, ${coordinates.length} articles)`)
    const allBookmarks = dedupeBookmarksById([
      ...hydrateItems(publicItemsAll, idToEvent),
      ...hydrateItems(privateItemsAll, idToEvent)
--- a/src/services/settingsService.ts
+++ b/src/services/settingsService.ts
@@ -52,6 +52,8 @@ export interface UserSettings {
  theme?: 'dark' | 'light' | 'system' // default: system
  darkColorTheme?: 'black' | 'midnight' | 'charcoal' // default: midnight
  lightColorTheme?: 'paper-white' | 'sepia' | 'ivory' // default: sepia
+  // Reading settings
+  paragraphAlignment?: 'left' | 'justify' // default: justify
 }

 export async function loadSettings(
--- a/src/styles/components/cards.css
+++ b/src/styles/components/cards.css
@@ -7,6 +7,27 @@
 .bookmark-content { color: var(--color-text); margin: 0.5rem 0; line-height: 1.4; word-wrap: break-word; overflow-wrap: break-word; word-break: break-word; }
 .bookmark-meta { color: var(--color-text-secondary); font-size: 0.9rem; margin-top: 0.5rem; }

+.bookmarks-section-title { 
+  font-size: 0.75rem !important; 
+  font-weight: 700 !important; 
+  text-transform: uppercase !important; 
+  letter-spacing: 0.05em !important; 
+  color: var(--color-text-muted) !important; 
+  padding: 1.5rem 0.5rem 0.375rem !important; 
+  margin: 0 !important; 
+  border-top: 1px solid rgba(255, 255, 255, 0.05); 
+}
+.bookmarks-section:first-of-type .bookmarks-section-title { 
+  border-top: none; 
+  padding-top: 0.5rem !important; 
+}
+.bookmark-section-action {
+  padding: 1.5rem 0.5rem 0.375rem;
+}
+.bookmarks-section:first-of-type .bookmark-section-action {
+  padding-top: 0.5rem;
+}
+
 .individual-bookmarks { margin: 1rem 0; }
 .individual-bookmarks h4 { margin: 0 0 1rem 0; font-size: 1rem; color: var(--color-text); }

@@ -23,8 +44,8 @@
 .individual-bookmark:hover { border-color: var(--color-border); background: var(--color-bg-elevated); }

 /* Compact view */
-.individual-bookmark.compact { padding: 0.5rem 0.5rem; background: transparent; border: none; border-bottom: 1px solid var(--color-bg-elevated); border-radius: 0; box-shadow: none; width: 100%; max-width: 100%; overflow: hidden; }
-.individual-bookmark.compact:hover { background: var(--color-bg-elevated); border-bottom-color: var(--color-border); transform: none; box-shadow: none; }
+.individual-bookmark.compact { padding: 0.5rem 0.5rem; background: transparent; border: none !important; border-radius: 0; box-shadow: none; width: 100%; max-width: 100%; overflow: hidden; }
+.individual-bookmark.compact:hover { background: var(--color-bg-elevated); transform: none; box-shadow: none; border: none !important; }
 .compact-row { display: flex; align-items: center; gap: 0.5rem; height: 28px; width: 100%; min-width: 0; overflow: hidden; }
 .compact-thumbnail { width: 24px; height: 24px; flex-shrink: 0; border-radius: 4px; overflow: hidden; background: var(--color-bg-elevated); display: flex; align-items: center; justify-content: center; }
 .compact-thumbnail img { width: 100%; height: 100%; object-fit: cover; }
@@ -57,10 +78,10 @@

 /* Large preview view */
 .individual-bookmark.large { padding: 0; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--color-bg-elevated); }
-.large-preview-image { width: 100%; height: 180px; background: var(--color-bg); background-size: cover; background-position: center; background-repeat: no-repeat; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s ease; border-bottom: 1px solid var(--color-border); position: relative; }
+.large-preview-image { width: 100%; height: 180px; background: linear-gradient(135deg, var(--color-bg-elevated) 0%, var(--color-bg-subtle) 50%, var(--color-bg-elevated) 100%); background-size: cover; background-position: center; background-repeat: no-repeat; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s ease; border-bottom: 1px solid var(--color-border); position: relative; }
 .large-preview-image:hover { opacity: 0.9; }
 .large-preview-image::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 60%, rgba(0,0,0,0.3) 100%); pointer-events: none; }
-.preview-placeholder { font-size: 3rem; color: var(--color-border-subtle); }
+.preview-placeholder { font-size: 3rem; color: var(--color-border-subtle); opacity: 0.4; }
 .large-content { padding: 1.25rem; }
 .large-text { color: var(--color-text); font-size: 0.95rem; line-height: 1.6; margin-bottom: 1rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
 .large-footer { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; font-size: 0.8rem; color: var(--color-text-secondary); padding-top: 0.75rem; border-top: 1px solid var(--color-border); }
@@ -81,10 +102,13 @@
 .explore-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 2rem; margin-top: 2rem; }
 .blog-post-card { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: 12px; overflow: hidden; transition: all 0.3s ease; cursor: pointer; display: flex; flex-direction: column; height: 100%; }
 .blog-post-card:hover { border-color: var(--color-primary); transform: translateY(-4px); box-shadow: 0 8px 24px rgba(99, 102, 241, 0.15); }
-.blog-post-card-image { width: 100%; height: 200px; overflow: hidden; background: var(--color-bg-subtle); display: flex; align-items: center; justify-content: center; }
+.blog-post-card.level-mine { border-color: color-mix(in srgb, var(--highlight-color-mine, #fde047) 60%, #333); box-shadow: 0 0 0 1px color-mix(in srgb, var(--highlight-color-mine, #fde047) 25%, transparent); }
+.blog-post-card.level-friends { border-color: color-mix(in srgb, var(--highlight-color-friends, #f97316) 60%, #333); box-shadow: 0 0 0 1px color-mix(in srgb, var(--highlight-color-friends, #f97316) 25%, transparent); }
+.blog-post-card.level-nostrverse { border-color: color-mix(in srgb, var(--highlight-color-nostrverse, #9333ea) 60%, #333); box-shadow: 0 0 0 1px color-mix(in srgb, var(--highlight-color-nostrverse, #9333ea) 25%, transparent); }
+.blog-post-card-image { width: 100%; height: 200px; overflow: hidden; background: linear-gradient(135deg, var(--color-bg-elevated) 0%, var(--color-bg-subtle) 50%, var(--color-bg-elevated) 100%); display: flex; align-items: center; justify-content: center; position: relative; }
 .blog-post-card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; }
 .blog-post-card:hover .blog-post-card-image img { transform: scale(1.05); }
-.blog-post-image-placeholder { font-size: 3rem; color: var(--color-border-subtle); display: flex; align-items: center; justify-content: center; }
+.blog-post-image-placeholder { font-size: 3rem; color: var(--color-border-subtle); opacity: 0.4; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
 .blog-post-card-content { padding: 1.5rem; display: flex; flex-direction: column; gap: 1rem; flex: 1; }
 .blog-post-card-title { font-size: 1.25rem; font-weight: 600; margin: 0; color: var(--color-text); line-height: 1.4; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
 .blog-post-card-summary { font-size: 0.875rem; color: var(--color-text-secondary); margin: 0; line-height: 1.6; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; flex: 1; }
--- a/src/styles/components/forms.css
+++ b/src/styles/components/forms.css
@@ -3,7 +3,7 @@
 .setting-group.setting-inline { display: flex; align-items: center; gap: 1rem; }
 .setting-label { text-align: left; flex: 1; }
 .setting-control { display: flex; justify-content: flex-end; align-items: center; }
-.setting-group.setting-inline label { margin-bottom: 0; }
+.setting-group.setting-inline label { margin-bottom: 0; min-width: 220px; }
 .setting-group label { display: block; margin-bottom: 0.5rem; color: var(--color-text); font-weight: 500; text-align: left; }
 .setting-buttons { display: flex; align-items: center; gap: 0.5rem; }
 .color-picker { display: flex; align-items: center; gap: 0.5rem; }
@@ -41,6 +41,7 @@
 .preview-content p { 
  margin: 0.75rem 0;
  word-wrap: break-word;
+  text-align: var(--paragraph-alignment, justify);
 }
 .setting-select { width: 100%; padding: 0.5rem; background: var(--color-bg-elevated); border: 1px solid var(--color-border-subtle); border-radius: 4px; color: var(--color-text); font-size: 1rem; }
 .setting-inline .setting-select { width: auto; min-width: 200px; flex: 1; }
@@ -58,6 +59,10 @@
    gap: 0.75rem;
  }
  
+  .setting-group.setting-inline label {
+    min-width: unset;
+  }
+  
  .setting-inline .setting-select {
    width: 100%;
    min-width: unset;
--- a/src/styles/components/modals.css
+++ b/src/styles/components/modals.css
@@ -25,3 +25,23 @@
 .btn-primary:hover:not(:disabled) { background: var(--color-primary-hover); }
 .btn-primary:disabled { opacity: 0.6; cursor: not-allowed; }

+/* Confirm Dialog */
+.confirm-dialog-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; z-index: 10000; padding: 1rem; }
+.confirm-dialog { background: var(--color-bg-elevated); border: 1px solid var(--color-border); border-radius: 12px; max-width: 400px; width: 100%; padding: 1.5rem; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5); }
+.confirm-dialog-icon { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; margin: 0 auto 1rem; font-size: 1.5rem; }
+.confirm-dialog-icon.danger { background: rgba(220, 38, 38, 0.1); color: rgb(220 38 38); }
+.confirm-dialog-icon.warning { background: rgba(251, 191, 36, 0.1); color: rgb(251 191 36); }
+.confirm-dialog-icon.info { background: rgba(59, 130, 246, 0.1); color: rgb(59 130 246); }
+.confirm-dialog-title { margin: 0 0 0.5rem 0; font-size: 1.25rem; font-weight: 600; color: var(--color-text); text-align: center; }
+.confirm-dialog-message { margin: 0 0 1.5rem 0; font-size: 0.9rem; color: var(--color-text-secondary); text-align: center; line-height: 1.5; }
+.confirm-dialog-actions { display: flex; gap: 0.75rem; }
+.confirm-dialog-btn { flex: 1; padding: 0.75rem 1rem; border: none; border-radius: 8px; font-size: 0.9rem; font-weight: 500; cursor: pointer; transition: all 0.2s; }
+.confirm-dialog-btn.cancel { background: var(--color-bg); border: 1px solid var(--color-border); color: var(--color-text); }
+.confirm-dialog-btn.cancel:hover { background: var(--color-border); }
+.confirm-dialog-btn.confirm.danger { background: rgb(220 38 38); color: white; }
+.confirm-dialog-btn.confirm.danger:hover { background: rgb(185 28 28); }
+.confirm-dialog-btn.confirm.warning { background: rgb(251 191 36); color: rgb(17 24 39); }
+.confirm-dialog-btn.confirm.warning:hover { background: rgb(245 158 11); }
+.confirm-dialog-btn.confirm.info { background: rgb(59 130 246); color: white; }
+.confirm-dialog-btn.confirm.info:hover { background: rgb(37 99 235); }
+
--- a/src/styles/components/reader.css
+++ b/src/styles/components/reader.css
@@ -30,16 +30,29 @@
 .reader-meta { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
 .publish-date { display: flex; align-items: center; gap: 0.4rem; font-size: 0.813rem; color: var(--color-text-muted); opacity: 0.85; }
 .publish-date svg { font-size: 0.75rem; opacity: 0.6; }
-.publish-date-topright { position: absolute; top: 1rem; right: 1rem; font-size: 0.813rem; color: var(--color-text); padding: 0.4rem 0.75rem; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); z-index: 10; }
+.publish-date-topright { position: absolute; top: 1rem; right: 1rem; font-size: 0.813rem; color: var(--color-text); padding: 0.4rem 0.75rem; z-index: 10; }
 .reading-time { display: flex; align-items: center; gap: 0.5rem; padding: 0.375rem 0.75rem; background: var(--color-bg-elevated); border: 1px solid var(--color-border); border-radius: 6px; font-size: 0.875rem; color: var(--color-text-secondary); }
 .reading-time svg { font-size: 0.875rem; }
 .highlight-indicator { display: flex; align-items: center; gap: 0.5rem; padding: 0.375rem 0.75rem; background: rgba(99, 102, 241, 0.1); border: 1px solid rgba(99, 102, 241, 0.3); border-radius: 6px; font-size: 0.875rem; color: var(--color-text); }
 .highlight-indicator svg { font-size: 0.875rem; }
 .reader-html { color: var(--color-text); line-height: 1.6; word-wrap: break-word; overflow-wrap: break-word; word-break: break-word; font-family: var(--reading-font); font-size: var(--reading-font-size); }
 .reader-markdown { color: var(--color-text); line-height: 1.7; font-family: var(--reading-font); font-size: var(--reading-font-size); }
-/* Ensure content is left-aligned even if source markup uses center */
-.reader .reader-html *, .reader .reader-markdown * { text-align: left !important; font-family: inherit !important; }
-.reader center, .reader [align="center"] { text-align: left !important; }
+/* Ensure font inheritance */
+.reader .reader-html *, .reader .reader-markdown * { font-family: inherit !important; }
+/* Apply paragraph alignment from settings */
+.reader .reader-html p,
+.reader .reader-markdown p,
+.reader .reader-html div,
+.reader .reader-markdown div,
+.reader .reader-html li,
+.reader .reader-markdown li,
+.reader .reader-html blockquote,
+.reader .reader-markdown blockquote { text-align: var(--paragraph-alignment, justify); }
+/* Override centered content with user preference */
+.reader center, .reader [align="center"] { text-align: var(--paragraph-alignment, justify) !important; }
+/* Keep headings left-aligned */
+.reader .reader-html h1, .reader .reader-html h2, .reader .reader-html h3, .reader .reader-html h4, .reader .reader-html h5, .reader .reader-html h6,
+.reader .reader-markdown h1, .reader .reader-markdown h2, .reader .reader-markdown h3, .reader .reader-markdown h4, .reader .reader-markdown h5, .reader .reader-markdown h6 { text-align: left !important; }
 /* Tame images from external content */
 .reader .reader-html img, .reader .reader-markdown img { max-width: 100%; max-height: 70vh; height: auto; width: auto; display: block; margin: 0.75rem 0; border-radius: 6px; }
 /* Headlines with Tailwind typography */
@@ -128,6 +141,13 @@
 .reader-markdown blockquote p, .reader-html blockquote p { margin: 0.5rem 0; }
 .reader-markdown blockquote p:first-child, .reader-html blockquote p:first-child { margin-top: 0; }
 .reader-markdown blockquote p:last-child, .reader-html blockquote p:last-child { margin-bottom: 0; }
+/* Horizontal rule - subtle divider */
+.reader-markdown hr, .reader-html hr {
+  border: none;
+  border-top: 1px solid var(--color-border);
+  opacity: 0.69;
+  margin: 2.5rem 0;
+}
 .reader-markdown a { color: var(--color-primary); text-decoration: none; }
 .reader-markdown a:hover { text-decoration: underline; }
 .reader-markdown code { background: var(--color-bg-subtle); border: 1px solid var(--color-border); border-radius: 4px; padding: 0.15rem 0.4rem; font-size: 0.9em; font-family: 'Monaco', 'Menlo', 'Consolas', 'Courier New', monospace; }
@@ -185,6 +205,7 @@
 .article-menu-btn { background: none; border: none; color: var(--color-text-secondary); cursor: pointer; padding: 0.5rem 0.75rem; font-size: 0.875rem; display: flex; align-items: center; gap: 0.5rem; transition: all 0.2s ease; border-radius: 6px; }
 .article-menu-btn:hover { color: var(--color-primary); background: rgba(99, 102, 241, 0.1); }
 .article-menu { position: absolute; right: 0; top: calc(100% + 4px); background: var(--color-bg-elevated); border: 1px solid var(--color-border-subtle); border-radius: 6px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); z-index: 1000; min-width: 180px; overflow: hidden; }
+.article-menu.open-upward { top: auto; bottom: calc(100% + 4px); }
 .article-menu-item { width: 100%; background: none; border: none; color: var(--color-text); padding: 0.75rem 1rem; font-size: 0.875rem; display: flex; align-items: center; gap: 0.75rem; cursor: pointer; transition: all 0.15s ease; text-align: left; white-space: nowrap; }
 .article-menu-item:hover { background: rgba(99, 102, 241, 0.15); color: var(--color-text); }
 .article-menu-item svg { font-size: 0.875rem; flex-shrink: 0; }
@@ -214,8 +235,9 @@
 .article-hero-image { width: 100%; height: 200px; background-size: cover; background-position: center; background-repeat: no-repeat; cursor: pointer; transition: all 0.2s ease; border-radius: 8px 8px 0 0; position: relative; }
 .article-hero-image:hover { opacity: 0.9; }
 .article-hero-image::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 60%, rgba(0,0,0,0.4) 100%); pointer-events: none; border-radius: 8px 8px 0 0; }
-.reader-hero-image { width: calc(100% + 1.5rem); margin: -0.75rem -0.75rem 2rem -0.75rem; border-radius: 0; overflow: hidden; position: relative; min-height: 300px; }
+.reader-hero-image { width: calc(100% + 1.5rem); margin: -0.75rem -0.75rem 2rem -0.75rem; border-radius: 0; overflow: hidden; position: relative; min-height: 300px; background: linear-gradient(135deg, var(--color-bg-elevated) 0%, var(--color-bg-subtle) 25%, var(--color-bg-elevated) 50%, var(--color-bg-subtle) 75%, var(--color-bg-elevated) 100%); }
 .reader-hero-image img { width: 100%; height: auto; max-height: 500px; object-fit: cover; display: block; }
+.reader-hero-placeholder { width: 100%; height: 300px; display: flex; align-items: center; justify-content: center; font-size: 4rem; color: var(--color-border-subtle); opacity: 0.3; }
 .reader-header-overlay { position: absolute; bottom: 0; left: 0; right: 0; padding: 2rem 2rem 1.5rem; background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.6) 60%, rgba(0, 0, 0, 0) 100%); }
 .reader-header-overlay .reader-title { color: #fff; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5); margin-bottom: 0.75rem; font-size: 2.5rem; font-weight: 700; line-height: 1.2; }
 .reader-header-overlay .reader-summary { color: rgba(255, 255, 255, 0.9); font-size: 1.2rem; line-height: 1.6; margin: 0 0 1rem 0; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4); font-family: var(--reading-font); }
--- a/src/styles/layout/sidebar.css
+++ b/src/styles/layout/sidebar.css
@@ -81,7 +81,14 @@
 .view-mode-controls {
  display: flex;
  align-items: center;
-  justify-content: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+}
+
+.view-mode-left,
+.view-mode-right {
+  display: flex;
+  align-items: center;
  gap: 0.5rem;
 }

--- a/src/types/bookmarks.ts
+++ b/src/types/bookmarks.ts
@@ -42,6 +42,14 @@ export interface IndividualBookmark {
  encryptedContent?: string
  // When the item was added to the bookmark list (synthetic, for sorting)
  added_at?: number
+  // The kind of the source list/set that produced this bookmark (e.g., 10003, 30003, 30001, or 39701 for web)
+  sourceKind?: number
+  // The 'd' tag value from kind 30003 bookmark sets
+  setName?: string
+  // Metadata from the bookmark set event (kind 30003)
+  setTitle?: string
+  setDescription?: string
+  setImage?: string
 }

 export interface ActiveAccount {
--- a/src/utils/bookmarkUtils.tsx
+++ b/src/utils/bookmarkUtils.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import { formatDistanceToNow, differenceInSeconds, differenceInMinutes, differenceInHours, differenceInDays, differenceInMonths, differenceInYears } from 'date-fns'
-import { ParsedContent, ParsedNode } from '../types/bookmarks'
+import { ParsedContent, ParsedNode, IndividualBookmark } from '../types/bookmarks'
 import ResolvedMention from '../components/ResolvedMention'
 // Note: ContentWithResolvedProfiles is imported by components directly to keep this file component-only for fast refresh

@@ -82,3 +82,71 @@ export const renderParsedContent = (parsedContent: ParsedContent) => {
    </div>
  )
 }
+
+// Sorting and grouping for bookmarks
+export const sortIndividualBookmarks = (items: IndividualBookmark[]) => {
+  return items
+    .slice()
+    .sort((a, b) => ((b.added_at || 0) - (a.added_at || 0)) || ((b.created_at || 0) - (a.created_at || 0)))
+}
+
+export function groupIndividualBookmarks(items: IndividualBookmark[]) {
+  const sorted = sortIndividualBookmarks(items)
+  const amethyst = sorted.filter(i => i.sourceKind === 30001)
+  const web = sorted.filter(i => i.kind === 39701 || i.type === 'web')
+  const isIn = (list: IndividualBookmark[], x: IndividualBookmark) => list.some(i => i.id === x.id)
+  const privateItems = sorted.filter(i => i.isPrivate && !isIn(amethyst, i) && !isIn(web, i))
+  const publicItems = sorted.filter(i => !i.isPrivate && !isIn(amethyst, i) && !isIn(web, i))
+  return { privateItems, publicItems, web, amethyst }
+}
+
+// Simple filter: only exclude bookmarks with empty/whitespace-only content
+export function hasContent(bookmark: IndividualBookmark): boolean {
+  return !!(bookmark.content && bookmark.content.trim().length > 0)
+}
+
+// Bookmark sets helpers (kind 30003)
+export interface BookmarkSet {
+  name: string
+  title?: string
+  description?: string
+  image?: string
+  bookmarks: IndividualBookmark[]
+}
+
+export function getBookmarkSets(items: IndividualBookmark[]): BookmarkSet[] {
+  // Group bookmarks by setName
+  const setMap = new Map<string, IndividualBookmark[]>()
+  
+  items.forEach(bookmark => {
+    if (bookmark.setName) {
+      const existing = setMap.get(bookmark.setName) || []
+      existing.push(bookmark)
+      setMap.set(bookmark.setName, existing)
+    }
+  })
+  
+  // Convert to array and extract metadata from the bookmarks
+  const sets: BookmarkSet[] = []
+  setMap.forEach((bookmarks, name) => {
+    // Get metadata from the first bookmark (all bookmarks in a set share the same metadata)
+    const firstBookmark = bookmarks[0]
+    const title = firstBookmark?.setTitle
+    const description = firstBookmark?.setDescription
+    const image = firstBookmark?.setImage
+    
+    sets.push({
+      name,
+      title,
+      description,
+      image,
+      bookmarks: sortIndividualBookmarks(bookmarks)
+    })
+  })
+  
+  return sets.sort((a, b) => a.name.localeCompare(b.name))
+}
+
+export function getBookmarksWithoutSet(items: IndividualBookmark[]): IndividualBookmark[] {
+  return sortIndividualBookmarks(items.filter(b => !b.setName))
+}
Author	SHA1	Message	Date
Gigi	76f4588c85	chore: bump version to 0.6.16	2025-10-15 18:30:36 +02:00
Gigi	e163b92a7e	fix: remove unused handleCancelDelete function Removed handleCancelDelete as it's no longer needed after switching from ConfirmDialog modal to inline confirmation	2025-10-15 18:30:15 +02:00
Gigi	11925a42b0	style: make trash icon red in delete confirmation Change from CompactButton to regular button with explicit red color styling so the trash icon inherits the red color (rgb(220 38 38))	2025-10-15 18:21:44 +02:00
Gigi	acf45530ca	refactor: replace delete dialog with inline confirmation Replace popup modal with inline confirmation UI: - When delete is clicked, show red trash icon with 'Confirm?' text - Clicking red trash icon again confirms deletion - Confirmation appears to left of three-dot menu - Click outside or reopen menu cancels confirmation - Remove ConfirmDialog component dependency	2025-10-15 18:15:55 +02:00
Gigi	3792ad6abf	refactor: move Highlight Style, Paragraph Alignment, and Default Highlight Visibility to top Final order: 1. Highlight Style 2. Paragraph Alignment 3. Default Highlight Visibility 4. Reading Font + Font Size 5. My Highlights color 6. Friends Highlights color 7. Nostrverse Highlights color 8. Show highlights checkbox 9. Preview	2025-10-15 17:59:29 +02:00
Gigi	bf98b307e8	style: align setting buttons vertically with fixed label width Add min-width: 220px to inline setting labels to create consistent 'tab stops' so buttons align vertically regardless of label length. Remove constraint on mobile where settings stack vertically.	2025-10-15 17:57:33 +02:00
Gigi	d15392f41e	refactor: reorder settings with Highlight Style and Paragraph Alignment above Default Highlight Visibility Final order: 1. Reading Font + Font Size 2. My Highlights color 3. Friends Highlights color 4. Nostrverse Highlights color 5. Highlight Style 6. Paragraph Alignment 7. Default Highlight Visibility 8. Show highlights checkbox 9. Preview	2025-10-15 17:55:58 +02:00
Gigi	f26a024255	refactor: reorder Reading & Display settings - Highlight Style (first) - Paragraph Alignment (second) - Reading Font + Font Size (third) Better logical grouping with text styling before font selection	2025-10-15 17:54:08 +02:00
Gigi	bf9f894c0d	refactor: improve delete dialog UI and simplify message - Reduce verbose warning text to simple 'This will delete your highlight' - Add proper CSS styling for confirm dialog with backdrop blur - Center-aligned text and circular icon with color-coded background - Modern button styling with proper hover states - Full-width buttons in action row - Theme-aware colors using CSS variables	2025-10-15 17:53:26 +02:00
Gigi	53a7b7d1c5	docs: update CHANGELOG.md for v0.6.15	2025-10-15 17:51:38 +02:00
Gigi	a12a883cc6	chore: bump version to 0.6.15	2025-10-15 17:50:47 +02:00
Gigi	0cf076b010	chore: change default paragraph alignment to justify	2025-10-15 17:45:10 +02:00
Gigi	e2c712033f	feat: add paragraph alignment setting - Add paragraphAlignment setting (left/justify) to UserSettings interface - Add UI control with icon buttons in ReadingDisplaySettings - Apply alignment via CSS variable to reader content and preview - Default to left-aligned to maintain current behavior - Keep headings always left-aligned for better readability	2025-10-15 17:43:31 +02:00
Gigi	e38237ca8e	fix: resolve linter errors for unused variables	2025-10-15 17:39:22 +02:00
Gigi	1fff44fc6c	chore: update button label from 'Open on Nostr' to 'Open with njump'	2025-10-15 17:37:38 +02:00
Gigi	4e50073e07	feat: update gateway config to use nostr.at and define ants.sh as search portal	2025-10-15 17:31:39 +02:00
Gigi	0ce64fe83f	feat: open three-dot menus upward when insufficient space below	2025-10-15 17:28:44 +02:00
Gigi	ef848aa93e	feat: update external article menu with Share (Boris link) and Search options	2025-10-15 17:25:29 +02:00
Gigi	67b287d75d	feat: add Search option to article menu for ants.sh portal	2025-10-15 17:20:59 +02:00
Gigi	b795dfd2c6	feat: add Copy Link and Copy Original options to article menu	2025-10-15 17:19:20 +02:00
Gigi	c68d855983	feat: add Share and Share Original options to article menu	2025-10-15 17:18:36 +02:00
Gigi	fb1c19e64b	docs: update CHANGELOG.md for v0.6.14	2025-10-15 16:30:11 +02:00
Gigi	384c16e29d	chore: bump version to 0.6.14	2025-10-15 16:28:55 +02:00
Gigi	789982bd76	Merge pull request #11 from dergigi/bookmarks-reorg Reorganize bookmarks UI with sections and bookmark sets support	2025-10-15 16:28:25 +02:00
Gigi	8bccc9de48	fix: remove unused articleImage prop from CompactView	2025-10-15 16:27:05 +02:00
Gigi	ec8584b4d2	feat: hide cover images in compact view	2025-10-15 16:25:48 +02:00
Gigi	54bd59fa2d	refactor: rename Amethyst-style bookmarks to Old Bookmarks (Legacy)	2025-10-15 16:25:03 +02:00
Gigi	b19f5f55f7	fix: remove borders from compact bookmark cards	2025-10-15 16:21:26 +02:00
Gigi	0964f25f97	refactor: make section dividers more subtle Changed border color from var(--color-border) to rgba(255, 255, 255, 0.05) for a much more subtle dividing line between bookmark sections.	2025-10-15 16:20:35 +02:00
Gigi	5f3e6335c1	refactor: reduce section heading bottom padding by half Changed bottom padding from 0.75rem to 0.375rem for both the section title and action button to reduce spacing before bookmark items.	2025-10-15 16:20:06 +02:00
Gigi	f30c894c87	fix: align add bookmark button with section heading - Added matching padding to bookmark-section-action button - Button now has same vertical padding as section title (1.5rem top, 0.75rem bottom) - Also handles first section case with reduced padding (0.5rem top) - Removed unnecessary marginBottom from flex container	2025-10-15 16:19:34 +02:00
Gigi	bec769ac1b	refactor: move add bookmark button to web bookmarks section - Removed add bookmark button from sidebar header - Added small CompactButton style button next to 'Web bookmarks' heading - Button only shows when user is logged in and web bookmarks section exists - Moved bookmark creation logic from SidebarHeader to BookmarkList - Cleaned up unused imports in SidebarHeader	2025-10-15 16:17:58 +02:00
Gigi	cb3748e06f	refactor: remove redundant loading spinner above tabs Removed the loading spinner that appeared above the tab bar since we now show spinners in the empty states themselves, making this redundant.	2025-10-15 16:14:04 +02:00
Gigi	d5a24f0a46	refactor: replace empty state messages with spinners Replaced 'No X yet. Pull to refresh!' messages with spinning loaders for: - No highlights yet (Me & Explore) - No bookmarks yet (Me) - No read articles yet (Me) - No articles written yet (Me) - No blog posts yet (Explore) This provides better UX by showing an active loading state instead of static empty state messages.	2025-10-15 16:11:05 +02:00
Gigi	401a8241bd	fix: resolve lint and type errors - Changed idToEvent from let to const (prefer-const) - Fixed TypeScript type narrowing issue by using direct regex test instead of isHexId type guard - Removed unused isHexId import All lint and type checks now pass for src directory.	2025-10-15 16:09:46 +02:00
Gigi	2193a7a863	fix: properly handle AddressPointer bookmarks for long-form articles The issue was that Primal bookmarks long-form articles using 'a' tags (AddressPointer format: kind:pubkey:identifier) but our code was only expecting EventPointer objects with 'id' properties. Changes: - Updated ApplesauceBookmarks interface to match actual applesauce types - Added AddressPointer and EventPointer interfaces - Rewrote processApplesauceBookmarks to handle all bookmark types: * notes (EventPointer) - regular notes * articles (AddressPointer) - long-form content (kind:30023) * hashtags (string[]) * urls (string[]) - Updated bookmark hydration to query addressable events by coordinates - Added logging to show hydration stats This should fix the issue where Primal's Reads bookmarks weren't showing up.	2025-10-15 16:06:03 +02:00
Gigi	e6bc4d7fda	chore: update .gitignore	2025-10-15 16:02:30 +02:00
Gigi	aee9f73316	debug: add detailed logging for bookmark event tags Added logging to show: - e and a tag counts for all events - which events survived deduplication - specific check for Primal reads list (kind:10003 with d='reads')	2025-10-15 15:59:56 +02:00
Gigi	aef7b4cea4	fix: include kind:30003 in default bookmark list detection Previously, the dedupeNip51Events function was only looking for kind:10003 and kind:30001 when finding the default bookmark list. This excluded kind:30003 events without a 'd' tag, which is what Primal uses for bookmarks. Now kind:30003 is properly included in the filter.	2025-10-15 15:54:47 +02:00
Gigi	c9a8a3b91e	refactor: remove text shadows from publication date - Remove text-shadow from CSS for .publish-date-topright - Remove shadowColor from useAdaptiveTextColor hook - Only apply adaptive text color, no shadows or backgrounds - Cleaner appearance with color-based readability only	2025-10-15 15:52:54 +02:00
Gigi	0c7b11bdf8	fix: improve shadow contrast without background overlay - Increase shadow opacity from 0.5 to 0.8 for better readability - Revert semi-transparent background approach per user feedback - Keep debugging logs to diagnose color detection	2025-10-15 15:50:54 +02:00
Gigi	8c151a5855	fix: correct async handling in adaptive color detection - Remove incorrect await on synchronous getColor method - Add console logging to debug color detection - This should fix black-on-black readability issues	2025-10-15 15:49:45 +02:00
Gigi	9b54fa9c14	fix: correct FastAverageColor import to use named export - Change from default import to named import - Resolves TypeScript error TS2351	2025-10-15 15:48:02 +02:00
Gigi	99d7705404	feat: add adaptive text color for publication date over images - Install fast-average-color library for image color detection - Create useAdaptiveTextColor hook to analyze top-right image corner - Update ReaderHeader to dynamically adjust date text/shadow colors - Ensures publication date is readable on both light and dark backgrounds	2025-10-15 15:40:57 +02:00
Gigi	eaa590b8e2	feat: add support for bookmark sets (kind 30003) - Add setName, setTitle, setDescription, and setImage fields to IndividualBookmark type - Extract d tag and metadata from kind 30003 events in bookmark processing - Create helper functions to group bookmarks by set and extract set metadata - Display bookmark sets as separate sections in BookmarkList UI - Maintain existing content-type categorization alongside bookmark sets	2025-10-15 15:25:33 +02:00
Gigi	715fd8cf10	refactor: remove duplicate type indicator icon from bookmark cards	2025-10-15 15:11:00 +02:00
Gigi	99a9709605	style: left-align support button, right-align view mode buttons	2025-10-15 15:01:25 +02:00
Gigi	65d330d5ed	style: make support heart icon orange using friends color from settings	2025-10-15 14:59:51 +02:00
Gigi	1d1d389a03	feat: move support button to bottom-left of bookmarks bar	2025-10-15 14:58:43 +02:00
Gigi	0392389355	style: change support button icon from lightning bolt to heart	2025-10-15 14:57:24 +02:00
Gigi	cf2a500a07	style(bookmarks): remove border from compact view bookmarks	2025-10-15 14:39:43 +02:00
Gigi	7d3748202e	fix(bookmarks): ensure section heading styles override with important	2025-10-15 14:39:00 +02:00
Gigi	d7f90faea9	style(bookmarks): improve section headings with better typography and remove counts	2025-10-15 14:35:18 +02:00
Gigi	cb0066aac9	style(bookmarks): use file-lines icon instead of book for default bookmarks	2025-10-15 14:31:27 +02:00
Gigi	b48397b7a6	feat(bookmarks): use camera icon for image bookmarks	2025-10-15 14:29:35 +02:00
Gigi	82ab8419e3	fix(lint): remove unused variables and fix icon imports	2025-10-15 14:26:02 +02:00
Gigi	142a2414d3	style(bookmarks): use regular icon variants for all classification icons	2025-10-15 14:24:07 +02:00
Gigi	081bd95f60	feat(bookmarks): classify web bookmark URLs to show appropriate content icons	2025-10-15 14:22:13 +02:00
Gigi	300aed0589	style(bookmarks): use regular icon variants for lighter appearance	2025-10-15 14:21:09 +02:00
Gigi	b2b23c66cf	feat(bookmarks): add sticky note icon for text-only bookmarks without URLs	2025-10-15 14:20:28 +02:00
Gigi	838bb6aa3d	feat(bookmarks): add content type icons to indicate article/video/web	2025-10-15 14:15:01 +02:00
Gigi	f14ecc5acb	refactor(bookmarks): simplify filtering to only exclude empty content	2025-10-15 14:14:54 +02:00
Gigi	d533e23dc0	feat(bookmarks): render grouped sections in /me reading-list with global controls	2025-10-15 13:59:10 +02:00
Gigi	eefcf99364	feat(bookmarks): render grouped sections in sidebar with global view mode	2025-10-15 13:59:00 +02:00
Gigi	1c0790bfb6	feat(bookmarks): add grouping and sorting helpers for sections	2025-10-15 13:58:56 +02:00
Gigi	29e351ba78	feat(bookmarks): tag sourceKind in collection for web and list/set items	2025-10-15 13:58:48 +02:00
Gigi	7592c5c327	feat(bookmarks): add sourceKind to IndividualBookmark for grouping	2025-10-15 13:58:41 +02:00
Gigi	f5018204ab	docs: update CHANGELOG.md for v0.6.13 release	2025-10-15 12:21:21 +02:00
Gigi	7ae74268fd	chore: bump version to 0.6.13	2025-10-15 12:20:13 +02:00
Gigi	52e959a7f5	fix: keep bookmark button visible at top, only hide highlights button - Bookmark button now visible at top (only hides on scroll down) - Highlights button hides both at top AND on scroll down - Separated visibility logic into showBookmarkButton and showHighlightsButton - Relay status indicator follows bookmark button behavior	2025-10-15 12:19:33 +02:00
Gigi	4f03a2c276	fix: hide highlights button when scrolled to the top - Highlights button now hidden when at the very top of the page - Tracks scroll position and hides button when scrollY <= 10px - Bookmark button remains visible as always - Highlights button appears when scrolling up from below - Improves UX by reducing visual clutter at page top	2025-10-15 12:17:44 +02:00
Gigi	bc4c96ee35	feat: add gradient placeholder images for articles without covers - Blog post cards now show subtle gradient background when no image - Reader view displays gradient placeholder with newspaper icon - Large view bookmarks use gradient backgrounds - Gradients use theme colors (--color-bg-elevated, --color-bg-subtle) - Placeholder icons have reduced opacity for subtlety - Adapts automatically to light/dark themes	2025-10-15 12:15:20 +02:00
Gigi	a866040fc1	feat: support nprofile identifiers on /p/ profile pages - Profile pages now accept both npub and nprofile identifiers (NIP-19) - Extract pubkey from nprofile.data.pubkey when decoding - Maintains backward compatibility with existing npub links - Users can now share profiles with relay metadata included	2025-10-15 12:13:18 +02:00
Gigi	c90fad268a	style: improve PWA install section styling in settings - Add section-title class to heading to match other settings sections - Replace gradient button with standard zap-preset-btn styling - Remove inline styles and JavaScript hover effects - Consistent with app's design system and theme colors	2025-10-15 12:12:12 +02:00
Gigi	8ef1f775f9	fix: improve mobile bookmark button visibility across all pages - Bookmark button now visible on all pages except settings - Only hides when scrolling down while reading an article - Fixes issue where button was hidden on /p/ (profile) and other pages - Highlights button only shows when viewing article content - Prevents users from getting stuck without navigation options	2025-10-15 12:10:30 +02:00
Gigi	90af87339c	docs: update CHANGELOG.md for v0.6.12 release	2025-10-15 12:06:31 +02:00
Gigi	9007b1ca71	chore: bump version to 0.6.12	2025-10-15 12:05:34 +02:00
Gigi	0b7e6145de	style: set horizontal divider opacity to 69%	2025-10-15 11:44:34 +02:00
Gigi	bf1b608d96	style: increase horizontal divider opacity for better visibility	2025-10-15 11:44:04 +02:00
Gigi	7db0f2a05c	style: make horizontal dividers more subtle with increased padding	2025-10-15 11:43:33 +02:00
Gigi	165b4d4b9f	docs: update CHANGELOG.md for v0.6.11 release	2025-10-15 11:09:16 +02:00
Gigi	a7106138c4	chore: bump version to 0.6.11	2025-10-15 11:08:08 +02:00
Gigi	a498bfab38	feat(mobile): show sidebar buttons on explore page	2025-10-15 11:07:07 +02:00
Gigi	3dd2980283	fix(mobile): memoize toggleSidebar to prevent sidebar from closing immediately on mobile - Wrapped toggleSidebar in useCallback to prevent function recreation on every render - Updated route change effect to only close sidebar on actual pathname changes, not state changes - Fixes issue where bookmarks sidebar wouldn't stay open on mobile PWA	2025-10-15 11:05:17 +02:00
Gigi	2e2a1a2c9d	feat: add colored borders to blog post and highlight cards based on relationship - Add level-based colored borders to blog post cards (mine/friends/nostrverse) - Updated BlogPostCard to accept and apply level prop - Modified Explore.tsx to classify blog posts by relationship level - Added CSS styling using settings colors for visual distinction - Highlights already had this feature, now writings have it too	2025-10-15 10:32:16 +02:00
Gigi	b9666bf037	docs: update CHANGELOG.md for v0.6.10 release	2025-10-15 10:28:18 +02:00