chore: bump version to 0.6.15

chore: change default paragraph alignment to justify
feat: add paragraph alignment setting
2026-02-16 04:24:25 +01:00 · 2025-10-15 17:50:47 +02:00 · 2025-10-15 17:45:10 +02:00 · 2025-10-15 17:43:31 +02:00 · 2025-10-15 17:39:22 +02:00 · 2025-10-15 17:37:38 +02:00
37 changed files with 1211 additions and 396 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,173 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0

 ## [Unreleased]

+## [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 +1466,12 @@ 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.14...HEAD
+[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.15",
  "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
@@ -546,7 +546,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"
--- 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'
@@ -48,6 +48,26 @@ const ReadingDisplaySettings: React.FC<ReadingDisplaySettingsProps> = ({ setting
        </div>
      </div>

+      <div className="setting-group setting-inline">
+        <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'} 
+          />
+          <IconButton 
+            icon={faAlignJustify} 
+            onClick={() => onUpdate({ paragraphAlignment: 'justify' })} 
+            title="Justified" 
+            ariaLabel="Justified" 
+            variant={(settings.paragraphAlignment || 'justify') === 'justify' ? 'primary' : 'ghost'} 
+          />
+        </div>
+      </div>
+
      <div className="setting-group setting-inline">
        <label>Highlight Style</label>
        <div className="setting-buttons">
@@ -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
@@ -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; }
--- 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	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