chore: bump version to 0.5.5

feat(me): two-pane layout, tabs, refined highlight cards, and mark-as-read

CHANGELOG.md

@@ -7,6 +7,19 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [0.5.4] - 2025-10-13
+
+### Changed
+- Refactor CSS into modular structure
+  - Split 3600+ line monolithic `index.css` into organized modules
+  - Created `src/styles/` directory with base, layout, components, and utils subdirectories
+  - Each file kept under 210 lines for maintainability
+  - Preserved cascade order and selector specificity via ordered `@import` statements
+  - No functional changes to styling
+
+### Fixed
+- Mobile button positioning now uses safe area insets for symmetrical layout on notched devices
+
 ## [0.5.3] - 2025-10-13
 
 ### Changed

package.json

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

src/components/CompactButton.tsx

@@ -0,0 +1,41 @@
+import React from 'react'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import type { IconDefinition } from '@fortawesome/fontawesome-svg-core'
+
+interface CompactButtonProps {
+  icon?: IconDefinition
+  onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void
+  title?: string
+  ariaLabel?: string
+  disabled?: boolean
+  spin?: boolean
+  className?: string
+  children?: React.ReactNode
+}
+
+const CompactButton: React.FC<CompactButtonProps> = ({
+  icon,
+  onClick,
+  title,
+  ariaLabel,
+  disabled = false,
+  spin = false,
+  className = '',
+  children
+}) => {
+  return (
+    <button
+      className={`compact-button ${className}`.trim()}
+      onClick={onClick}
+      title={title}
+      aria-label={ariaLabel || title}
+      disabled={disabled}
+    >
+      {icon && <FontAwesomeIcon icon={icon} spin={spin} />}
+      {children}
+    </button>
+  )
+}
+
+export default CompactButton
+

src/components/ContentPanel.tsx

@@ -1,8 +1,8 @@
-import React, { useMemo, useState } from 'react'
+import React, { useMemo, useState, useEffect } from 'react'
 import ReactMarkdown from 'react-markdown'
 import remarkGfm from 'remark-gfm'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faSpinner, faBook } from '@fortawesome/free-solid-svg-icons'
+import { faSpinner, faCheck } from '@fortawesome/free-solid-svg-icons'
 import { RelayPool } from 'applesauce-relay'
 import { IAccount } from 'applesauce-accounts'
 import { NostrEvent } from 'nostr-tools'
@@ -15,8 +15,14 @@ import { useMarkdownToHTML } from '../hooks/useMarkdownToHTML'
 import { useHighlightedContent } from '../hooks/useHighlightedContent'
 import { useHighlightInteractions } from '../hooks/useHighlightInteractions'
 import { UserSettings } from '../services/settingsService'
-import { createEventReaction, createWebsiteReaction } from '../services/reactionService'
+import { 
+  createEventReaction, 
+  createWebsiteReaction,
+  hasMarkedEventAsRead,
+  hasMarkedWebsiteAsRead
+} from '../services/reactionService'
 import AuthorCard from './AuthorCard'
+import { faBooks } from '../icons/customIcons'
 
 interface ContentPanelProps {
   loading: boolean
@@ -70,7 +76,9 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
   onTextSelection,
   onClearSelection
 }) => {
-  const [isMarkingAsRead, setIsMarkingAsRead] = useState(false)
+  const [isMarkedAsRead, setIsMarkedAsRead] = useState(false)
+  const [isCheckingReadStatus, setIsCheckingReadStatus] = useState(false)
+  const [showCheckAnimation, setShowCheckAnimation] = useState(false)
   const { renderedHtml: renderedMarkdownHtml, previewRef: markdownPreviewRef, processedMarkdown } = useMarkdownToHTML(markdown, relayPool)
   
   const { finalHtml, relevantHighlights } = useHighlightedContent({
@@ -105,39 +113,82 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
   // Determine if we're on a nostr-native article (/a/) or external URL (/r/)
   const isNostrArticle = selectedUrl && selectedUrl.startsWith('nostr:')
   
-  const handleMarkAsRead = async () => {
-    if (!activeAccount || !relayPool) {
-      console.warn('Cannot mark as read: no account or relay pool')
+  // Check if article is already marked as read when URL/article changes
+  useEffect(() => {
+    const checkReadStatus = async () => {
+      if (!activeAccount || !relayPool || !selectedUrl) {
+        setIsMarkedAsRead(false)
+        return
+      }
+
+      setIsCheckingReadStatus(true)
+
+      try {
+        let hasRead = false
+        if (isNostrArticle && currentArticle) {
+          hasRead = await hasMarkedEventAsRead(
+            currentArticle.id,
+            activeAccount.pubkey,
+            relayPool
+          )
+        } else {
+          hasRead = await hasMarkedWebsiteAsRead(
+            selectedUrl,
+            activeAccount.pubkey,
+            relayPool
+          )
+        }
+        setIsMarkedAsRead(hasRead)
+      } catch (error) {
+        console.error('Failed to check read status:', error)
+      } finally {
+        setIsCheckingReadStatus(false)
+      }
+    }
+
+    checkReadStatus()
+  }, [selectedUrl, currentArticle, activeAccount, relayPool, isNostrArticle])
+  
+  const handleMarkAsRead = () => {
+    if (!activeAccount || !relayPool || isMarkedAsRead) {
       return
     }
 
-    setIsMarkingAsRead(true)
+    // Instantly update UI with checkmark animation
+    setIsMarkedAsRead(true)
+    setShowCheckAnimation(true)
 
-    try {
-      if (isNostrArticle && currentArticle) {
-        // Kind 7 reaction for nostr-native articles
-        await createEventReaction(
-          currentArticle.id,
-          currentArticle.pubkey,
-          currentArticle.kind,
-          activeAccount,
-          relayPool
-        )
-        console.log('✅ Marked nostr article as read')
-      } else if (selectedUrl) {
-        // Kind 17 reaction for external websites
-        await createWebsiteReaction(
-          selectedUrl,
-          activeAccount,
-          relayPool
-        )
-        console.log('✅ Marked website as read')
+    // Reset animation after it completes
+    setTimeout(() => {
+      setShowCheckAnimation(false)
+    }, 600)
+
+    // Fire-and-forget: publish in background without blocking UI
+    ;(async () => {
+      try {
+        if (isNostrArticle && currentArticle) {
+          await createEventReaction(
+            currentArticle.id,
+            currentArticle.pubkey,
+            currentArticle.kind,
+            activeAccount,
+            relayPool
+          )
+          console.log('✅ Marked nostr article as read')
+        } else if (selectedUrl) {
+          await createWebsiteReaction(
+            selectedUrl,
+            activeAccount,
+            relayPool
+          )
+          console.log('✅ Marked website as read')
+        }
+      } catch (error) {
+        console.error('Failed to mark as read:', error)
+        // Revert UI state on error
+        setIsMarkedAsRead(false)
       }
-    } catch (error) {
-      console.error('Failed to mark as read:', error)
-    } finally {
-      setIsMarkingAsRead(false)
-    }
+    })()
   }
 
   if (!selectedUrl) {
@@ -215,13 +266,18 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
           {activeAccount && (
             <div className="mark-as-read-container">
               <button
-                className="mark-as-read-btn"
+                className={`mark-as-read-btn ${isMarkedAsRead ? 'marked' : ''} ${showCheckAnimation ? 'animating' : ''}`}
                 onClick={handleMarkAsRead}
-                disabled={isMarkingAsRead}
-                title="Mark as Read"
+                disabled={isMarkedAsRead || isCheckingReadStatus}
+                title={isMarkedAsRead ? 'Already Marked as Read' : 'Mark as Read'}
               >
-                <FontAwesomeIcon icon={isMarkingAsRead ? faSpinner : faBook} spin={isMarkingAsRead} />
-                <span>{isMarkingAsRead ? 'Marking...' : 'Mark as Read'}</span>
+                <FontAwesomeIcon 
+                  icon={isCheckingReadStatus ? faSpinner : isMarkedAsRead ? faCheck : faBooks} 
+                  spin={isCheckingReadStatus} 
+                />
+                <span>
+                  {isCheckingReadStatus ? 'Checking...' : isMarkedAsRead ? 'Marked as Read' : 'Mark as Read'}
+                </span>
               </button>
             </div>
           )}

src/components/HighlightItem.tsx

@@ -14,6 +14,7 @@ import { formatDateCompact } from '../utils/bookmarkUtils'
 import { createDeletionRequest } from '../services/deletionService'
 import ConfirmDialog from './ConfirmDialog'
 import { getNostrUrl } from '../config/nostrGateways'
+import CompactButton from './CompactButton'
 
 interface HighlightWithLevel extends Highlight {
   level?: 'mine' | 'friends' | 'nostrverse'
@@ -303,20 +304,25 @@ export const HighlightItem: React.FC<HighlightItemProps> = ({
       onClick={handleItemClick}
       style={{ cursor: onHighlightClick ? 'pointer' : 'default' }}
     >
-      <div className="highlight-quote-icon">
-        <FontAwesomeIcon icon={faQuoteLeft} />
-        {relayIndicator && (
-          <div 
-            className="highlight-relay-indicator" 
-            title={relayIndicator.tooltip}
-            onClick={handleRebroadcast}
-            style={{ cursor: relayPool && eventStore ? 'pointer' : 'default' }}
-          >
-            <FontAwesomeIcon icon={relayIndicator.icon} spin={relayIndicator.spin} />
-          </div>
-        )}
+      <div className="highlight-header">
+        <CompactButton
+          className="highlight-timestamp"
+          title={new Date(highlight.created_at * 1000).toLocaleString()}
+          onClick={(e) => e.stopPropagation()}
+        >
+          {formatDateCompact(highlight.created_at)}
+        </CompactButton>
       </div>
       
+      <CompactButton
+        className="highlight-quote-button"
+        icon={faQuoteLeft}
+        title="Quote"
+        onClick={(e) => e.stopPropagation()}
+      />
+      
+      {/* relay indicator lives in footer for consistent padding/alignment */}
+      
       <div className="highlight-content">
         <blockquote className="highlight-text">
           {highlight.content}
@@ -329,23 +335,30 @@ export const HighlightItem: React.FC<HighlightItemProps> = ({
         )}
         
         
-        <div className="highlight-meta">
-          <span className="highlight-author">
-            {getUserDisplayName()}
-          </span>
-          <span className="highlight-meta-separator">•</span>
-          <span className="highlight-time">
-            {formatDateCompact(highlight.created_at)}
-          </span>
+        <div className="highlight-footer">
+          <div className="highlight-footer-left">
+            {relayIndicator && (
+              <CompactButton
+                className="highlight-relay-indicator"
+                icon={relayIndicator.icon}
+                spin={relayIndicator.spin}
+                title={relayIndicator.tooltip}
+                onClick={handleRebroadcast}
+                disabled={!relayPool || !eventStore}
+              />
+            )}
+            
+            <span className="highlight-author">
+              {getUserDisplayName()}
+            </span>
+          </div>
           
           <div className="highlight-menu-wrapper" ref={menuRef}>
-            <button
-              className="highlight-menu-btn"
+            <CompactButton
+              icon={faEllipsisH}
               onClick={handleMenuToggle}
               title="More options"
-            >
-              <FontAwesomeIcon icon={faEllipsisH} />
-            </button>
+            />
             
             {showMenu && (
               <div className="highlight-menu">

src/components/Me.tsx

@@ -1,38 +1,39 @@
 import React, { useState, useEffect } from 'react'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faSpinner, faExclamationCircle, faUser, faHighlighter } from '@fortawesome/free-solid-svg-icons'
+import { faSpinner, faExclamationCircle, faHighlighter, faBookmark } from '@fortawesome/free-solid-svg-icons'
 import { Hooks } from 'applesauce-react'
 import { RelayPool } from 'applesauce-relay'
-import { useEventModel } from 'applesauce-react/hooks'
-import { Models } from 'applesauce-core'
+import { nip19 } from 'nostr-tools'
 import { Highlight } from '../types/highlights'
 import { HighlightItem } from './HighlightItem'
 import { fetchHighlights } from '../services/highlightService'
+import { fetchBookmarks } from '../services/bookmarkService'
+import { fetchReadArticlesWithData } from '../services/libraryService'
+import { BlogPostPreview } from '../services/exploreService'
+import { Bookmark } from '../types/bookmarks'
+import AuthorCard from './AuthorCard'
+import BlogPostCard from './BlogPostCard'
+import { faBooks } from '../icons/customIcons'
 
 interface MeProps {
   relayPool: RelayPool
 }
 
+type TabType = 'highlights' | 'reading-list' | 'archive'
+
 const Me: React.FC<MeProps> = ({ relayPool }) => {
   const activeAccount = Hooks.useActiveAccount()
+  const [activeTab, setActiveTab] = useState<TabType>('highlights')
   const [highlights, setHighlights] = useState<Highlight[]>([])
+  const [bookmarks, setBookmarks] = useState<Bookmark[]>([])
+  const [readArticles, setReadArticles] = useState<BlogPostPreview[]>([])
   const [loading, setLoading] = useState(true)
   const [error, setError] = useState<string | null>(null)
 
-  const profile = useEventModel(Models.ProfileModel, activeAccount ? [activeAccount.pubkey] : null)
-
-  const getUserDisplayName = () => {
-    if (!activeAccount) return 'Unknown User'
-    if (profile?.name) return profile.name
-    if (profile?.display_name) return profile.display_name
-    if (profile?.nip05) return profile.nip05
-    return `${activeAccount.pubkey.slice(0, 8)}...${activeAccount.pubkey.slice(-8)}`
-  }
-
   useEffect(() => {
-    const loadHighlights = async () => {
+    const loadData = async () => {
       if (!activeAccount) {
-        setError('Please log in to view your highlights')
+        setError('Please log in to view your data')
         setLoading(false)
         return
       }
@@ -41,33 +42,47 @@ const Me: React.FC<MeProps> = ({ relayPool }) => {
         setLoading(true)
         setError(null)
 
-        // Fetch highlights created by the user
-        const userHighlights = await fetchHighlights(
-          relayPool,
-          activeAccount.pubkey
-        )
-
-        if (userHighlights.length === 0) {
-          setError('No highlights yet. Start highlighting content to see them here!')
-        }
+        // Fetch highlights and read articles
+        const [userHighlights, userReadArticles] = await Promise.all([
+          fetchHighlights(relayPool, activeAccount.pubkey),
+          fetchReadArticlesWithData(relayPool, activeAccount.pubkey)
+        ])
 
         setHighlights(userHighlights)
+        setReadArticles(userReadArticles)
+
+        // Fetch bookmarks using callback pattern
+        try {
+          await fetchBookmarks(relayPool, activeAccount, setBookmarks)
+        } catch (err) {
+          console.warn('Failed to load bookmarks:', err)
+          setBookmarks([])
+        }
       } catch (err) {
-        console.error('Failed to load highlights:', err)
-        setError('Failed to load highlights. Please try again.')
+        console.error('Failed to load data:', err)
+        setError('Failed to load data. Please try again.')
       } finally {
         setLoading(false)
       }
     }
 
-    loadHighlights()
+    loadData()
   }, [relayPool, activeAccount])
 
   const handleHighlightDelete = (highlightId: string) => {
-    // Remove highlight from local state
     setHighlights(prev => prev.filter(h => h.id !== highlightId))
   }
 
+  const getPostUrl = (post: BlogPostPreview) => {
+    const dTag = post.event.tags.find(t => t[0] === 'd')?.[1] || ''
+    const naddr = nip19.naddrEncode({
+      kind: 30023,
+      pubkey: post.author,
+      identifier: dTag
+    })
+    return `/a/${naddr}`
+  }
+
   if (loading) {
     return (
       <div className="explore-container">
@@ -89,26 +104,101 @@ const Me: React.FC<MeProps> = ({ relayPool }) => {
     )
   }
 
+  const renderTabContent = () => {
+    switch (activeTab) {
+      case 'highlights':
+        return highlights.length === 0 ? (
+          <div className="explore-error">
+            <p>No highlights yet. Start highlighting content to see them here!</p>
+          </div>
+        ) : (
+          <div className="highlights-list me-highlights-list">
+            {highlights.map((highlight) => (
+              <HighlightItem
+                key={highlight.id}
+                highlight={{ ...highlight, level: 'mine' }}
+                relayPool={relayPool}
+                onHighlightDelete={handleHighlightDelete}
+              />
+            ))}
+          </div>
+        )
+
+      case 'reading-list':
+        return bookmarks.length === 0 ? (
+          <div className="explore-error">
+            <p>No bookmarks yet. Bookmark articles to see them here!</p>
+          </div>
+        ) : (
+          <div className="bookmarks-list">
+            {bookmarks.map((bookmark) => (
+              <div key={bookmark.id} className="bookmark-item">
+                <a href={bookmark.url} target="_blank" rel="noopener noreferrer">
+                  <h3>{bookmark.title || 'Untitled'}</h3>
+                  {bookmark.content && <p>{bookmark.content.slice(0, 150)}...</p>}
+                </a>
+              </div>
+            ))}
+          </div>
+        )
+
+      case 'archive':
+        return readArticles.length === 0 ? (
+          <div className="explore-error">
+            <p>No read articles yet. Mark articles as read to see them here!</p>
+          </div>
+        ) : (
+          <div className="explore-grid">
+            {readArticles.map((post) => (
+              <BlogPostCard
+                key={post.event.id}
+                post={post}
+                href={getPostUrl(post)}
+              />
+            ))}
+          </div>
+        )
+
+      default:
+        return null
+    }
+  }
+
   return (
     <div className="explore-container">
       <div className="explore-header">
-        <h1>
-          <FontAwesomeIcon icon={faUser} />
-          {getUserDisplayName()}
-        </h1>
-        <p className="explore-subtitle">
-          <FontAwesomeIcon icon={faHighlighter} /> {highlights.length} highlight{highlights.length !== 1 ? 's' : ''}
-        </p>
+        {activeAccount && <AuthorCard authorPubkey={activeAccount.pubkey} />}
+        
+        <div className="me-tabs">
+          <button
+            className={`me-tab ${activeTab === 'highlights' ? 'active' : ''}`}
+            data-tab="highlights"
+            onClick={() => setActiveTab('highlights')}
+          >
+            <FontAwesomeIcon icon={faHighlighter} />
+            Highlights ({highlights.length})
+          </button>
+          <button
+            className={`me-tab ${activeTab === 'reading-list' ? 'active' : ''}`}
+            data-tab="reading-list"
+            onClick={() => setActiveTab('reading-list')}
+          >
+            <FontAwesomeIcon icon={faBookmark} />
+            Reading List ({bookmarks.length})
+          </button>
+          <button
+            className={`me-tab ${activeTab === 'archive' ? 'active' : ''}`}
+            data-tab="archive"
+            onClick={() => setActiveTab('archive')}
+          >
+            <FontAwesomeIcon icon={faBooks} />
+            Archive ({readArticles.length})
+          </button>
+        </div>
       </div>
-      <div className="highlights-list me-highlights-list">
-        {highlights.map((highlight) => (
-          <HighlightItem
-            key={highlight.id}
-            highlight={{ ...highlight, level: 'mine' }}
-            relayPool={relayPool}
-            onHighlightDelete={handleHighlightDelete}
-          />
-        ))}
+
+      <div className="me-tab-content">
+        {renderTabContent()}
       </div>
     </div>
   )

src/icons/books.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!-- Font Awesome Pro 6.0.0-alpha2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M510.354 435.363L402.686 35.422C396.939 14.078 377.547 0 356.354 0C352.242 0 348.059 0.531 343.896 1.641L282.078 18.125C276.193 19.695 270.939 22.383 266.295 25.758C258.254 10.508 242.436 0 224 0H160C151.213 0 143.084 2.531 136 6.656C128.916 2.531 120.787 0 112 0H48C21.49 0 0 21.492 0 48V464C0 490.508 21.49 512 48 512H112C120.787 512 128.916 509.469 136 505.344C143.084 509.469 151.213 512 160 512H224C250.51 512 272 490.508 272 464V165.281L355.805 476.578C361.553 497.926 380.945 512 402.139 512C406.25 512 410.432 511.469 414.594 510.359L476.412 493.875C502.018 487.043 517.215 460.848 510.354 435.363ZM224 48V96H160V48H224ZM160 144H224V368H160V144ZM112 368H48V144H112V368ZM112 48V96H48V48H112ZM48 464V416H112V464H48ZM160 464V416H224V464H160ZM294.445 64.504L356.271 48.02L356.361 48L368.742 93.93L306.828 110.445L294.445 64.504ZM319.266 156.586L381.18 140.074L439.223 355.41L377.309 371.922L319.266 156.586ZM402.154 464.102L389.746 418.066L451.66 401.555L464.045 447.496L402.154 464.102Z"/></svg>

src/icons/customIcons.ts

@@ -0,0 +1,52 @@
+import { IconDefinition, IconPrefix, IconName } from '@fortawesome/fontawesome-svg-core'
+import booksSvg from './books.svg?raw'
+
+/**
+ * Custom icon definitions for FontAwesome Pro icons
+ * or any custom SVG icons that aren't in the free tier
+ */
+
+function parseSvgToIconDefinition(svg: string, options: { prefix: IconPrefix, iconName: IconName, unicode?: string }): IconDefinition {
+  const { prefix, iconName, unicode = 'e002' } = options
+
+  // Extract viewBox first; fallback to width/height
+  const viewBoxMatch = svg.match(/viewBox\s*=\s*"([^"]+)"/i)
+  let width = 512
+  let height = 512
+  if (viewBoxMatch) {
+    const parts = viewBoxMatch[1].trim().split(/\s+/)
+    if (parts.length === 4) {
+      const w = Number(parts[2])
+      const h = Number(parts[3])
+      if (!Number.isNaN(w)) width = Math.round(w)
+      if (!Number.isNaN(h)) height = Math.round(h)
+    }
+  } else {
+    const widthMatch = svg.match(/\bwidth\s*=\s*"(\d+(?:\.\d+)?)"/i)
+    const heightMatch = svg.match(/\bheight\s*=\s*"(\d+(?:\.\d+)?)"/i)
+    if (widthMatch) width = Math.round(Number(widthMatch[1]))
+    if (heightMatch) height = Math.round(Number(heightMatch[1]))
+  }
+
+  // Collect all path d attributes
+  const pathDs: string[] = []
+  const pathRegex = /<path[^>]*\sd=\s*"([^"]+)"[^>]*>/gi
+  let m: RegExpExecArray | null
+  while ((m = pathRegex.exec(svg)) !== null) {
+    pathDs.push(m[1])
+  }
+
+  const pathData = pathDs.length <= 1 ? (pathDs[0] || '') : pathDs
+
+  return {
+    prefix,
+    iconName,
+    icon: [width, height, [], unicode, pathData]
+  }
+}
+
+export const faBooks: IconDefinition = parseSvgToIconDefinition(booksSvg, {
+  prefix: 'far',
+  iconName: 'books'
+})
+

src/index.css

@@ -11,6 +11,7 @@
 @import './styles/components/forms.css';
 @import './styles/components/reader.css';
 @import './styles/components/settings.css';
+@import './styles/components/me.css';
 @import './styles/utils/animations.css';
 @import './styles/utils/utilities.css';
 
@@ -676,6 +677,39 @@
 
 .mark-as-read-btn svg {
   font-size: 1.1rem;
+  transition: transform 0.3s ease;
+}
+
+/* Marked as read state */
+.mark-as-read-btn.marked {
+  background: #1a4d1a;
+  border-color: #2d662d;
+  color: #90ee90;
+}
+
+.mark-as-read-btn.marked:disabled {
+  opacity: 1;
+  cursor: default;
+}
+
+/* Checkmark animation */
+.mark-as-read-btn.animating svg {
+  animation: checkmarkPop 0.6s ease;
+}
+
+@keyframes checkmarkPop {
+  0% {
+    transform: scale(0.8);
+    opacity: 0.8;
+  }
+  50% {
+    transform: scale(1.3);
+    opacity: 1;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
 }
 
 @media (max-width: 768px) {

src/services/libraryService.ts

@@ -0,0 +1,222 @@
+import { RelayPool, completeOnEose, onlyEvents } from 'applesauce-relay'
+import { lastValueFrom, merge, Observable, takeUntil, timer, toArray } from 'rxjs'
+import { NostrEvent } from 'nostr-tools'
+import { Helpers } from 'applesauce-core'
+import { RELAYS } from '../config/relays'
+import { prioritizeLocalRelays, partitionRelays } from '../utils/helpers'
+import { MARK_AS_READ_EMOJI } from './reactionService'
+import { BlogPostPreview } from './exploreService'
+
+const { getArticleTitle, getArticleImage, getArticlePublished, getArticleSummary } = Helpers
+
+export interface ReadArticle {
+  id: string
+  url?: string
+  eventId?: string
+  eventAuthor?: string
+  eventKind?: number
+  markedAt: number
+  reactionId: string
+}
+
+/**
+ * Fetches all articles that the user has marked as read
+ * Returns both nostr-native articles (kind:7) and external URLs (kind:17)
+ */
+export async function fetchReadArticles(
+  relayPool: RelayPool,
+  userPubkey: string
+): Promise<ReadArticle[]> {
+  try {
+    const orderedRelays = prioritizeLocalRelays(RELAYS)
+    const { local: localRelays, remote: remoteRelays } = partitionRelays(orderedRelays)
+
+    // Fetch kind:7 reactions (nostr-native articles)
+    const kind7Local$ = localRelays.length > 0
+      ? relayPool
+          .req(localRelays, { kinds: [7], authors: [userPubkey] })
+          .pipe(
+            onlyEvents(),
+            completeOnEose(),
+            takeUntil(timer(1200))
+          )
+      : new Observable<NostrEvent>((sub) => sub.complete())
+
+    const kind7Remote$ = remoteRelays.length > 0
+      ? relayPool
+          .req(remoteRelays, { kinds: [7], authors: [userPubkey] })
+          .pipe(
+            onlyEvents(),
+            completeOnEose(),
+            takeUntil(timer(6000))
+          )
+      : new Observable<NostrEvent>((sub) => sub.complete())
+
+    const kind7Events: NostrEvent[] = await lastValueFrom(
+      merge(kind7Local$, kind7Remote$).pipe(toArray())
+    )
+
+    // Fetch kind:17 reactions (external URLs)
+    const kind17Local$ = localRelays.length > 0
+      ? relayPool
+          .req(localRelays, { kinds: [17], authors: [userPubkey] })
+          .pipe(
+            onlyEvents(),
+            completeOnEose(),
+            takeUntil(timer(1200))
+          )
+      : new Observable<NostrEvent>((sub) => sub.complete())
+
+    const kind17Remote$ = remoteRelays.length > 0
+      ? relayPool
+          .req(remoteRelays, { kinds: [17], authors: [userPubkey] })
+          .pipe(
+            onlyEvents(),
+            completeOnEose(),
+            takeUntil(timer(6000))
+          )
+      : new Observable<NostrEvent>((sub) => sub.complete())
+
+    const kind17Events: NostrEvent[] = await lastValueFrom(
+      merge(kind17Local$, kind17Remote$).pipe(toArray())
+    )
+
+    const readArticles: ReadArticle[] = []
+
+    // Process kind:7 reactions (nostr-native articles)
+    for (const event of kind7Events) {
+      if (event.content === MARK_AS_READ_EMOJI) {
+        const eTag = event.tags.find((t) => t[0] === 'e')
+        const pTag = event.tags.find((t) => t[0] === 'p')
+        const kTag = event.tags.find((t) => t[0] === 'k')
+
+        if (eTag && eTag[1]) {
+          readArticles.push({
+            id: eTag[1],
+            eventId: eTag[1],
+            eventAuthor: pTag?.[1],
+            eventKind: kTag?.[1] ? parseInt(kTag[1]) : undefined,
+            markedAt: event.created_at,
+            reactionId: event.id
+          })
+        }
+      }
+    }
+
+    // Process kind:17 reactions (external URLs)
+    for (const event of kind17Events) {
+      if (event.content === MARK_AS_READ_EMOJI) {
+        const rTag = event.tags.find((t) => t[0] === 'r')
+
+        if (rTag && rTag[1]) {
+          readArticles.push({
+            id: rTag[1],
+            url: rTag[1],
+            markedAt: event.created_at,
+            reactionId: event.id
+          })
+        }
+      }
+    }
+
+    // Sort by markedAt (most recent first) and dedupe
+    const deduped = new Map<string, ReadArticle>()
+    readArticles
+      .sort((a, b) => b.markedAt - a.markedAt)
+      .forEach((article) => {
+        if (!deduped.has(article.id)) {
+          deduped.set(article.id, article)
+        }
+      })
+
+    return Array.from(deduped.values())
+  } catch (error) {
+    console.error('Failed to fetch read articles:', error)
+    return []
+  }
+}
+
+/**
+ * Fetches full article data for read nostr-native articles
+ * and converts them to BlogPostPreview format for rendering
+ */
+export async function fetchReadArticlesWithData(
+  relayPool: RelayPool,
+  userPubkey: string
+): Promise<BlogPostPreview[]> {
+  try {
+    // First get all read articles
+    const readArticles = await fetchReadArticles(relayPool, userPubkey)
+    
+    // Filter to only nostr-native articles (kind 30023)
+    const nostrArticles = readArticles.filter(
+      article => article.eventKind === 30023 && article.eventId
+    )
+
+    if (nostrArticles.length === 0) {
+      return []
+    }
+
+    const orderedRelays = prioritizeLocalRelays(RELAYS)
+    const { local: localRelays, remote: remoteRelays } = partitionRelays(orderedRelays)
+
+    // Fetch the actual article events
+    const eventIds = nostrArticles.map(a => a.eventId!).filter(Boolean)
+    
+    const local$ = localRelays.length > 0
+      ? relayPool
+          .req(localRelays, { kinds: [30023], ids: eventIds })
+          .pipe(
+            onlyEvents(),
+            completeOnEose(),
+            takeUntil(timer(1200))
+          )
+      : new Observable<NostrEvent>((sub) => sub.complete())
+
+    const remote$ = remoteRelays.length > 0
+      ? relayPool
+          .req(remoteRelays, { kinds: [30023], ids: eventIds })
+          .pipe(
+            onlyEvents(),
+            completeOnEose(),
+            takeUntil(timer(6000))
+          )
+      : new Observable<NostrEvent>((sub) => sub.complete())
+
+    const articleEvents: NostrEvent[] = await lastValueFrom(
+      merge(local$, remote$).pipe(toArray())
+    )
+
+    // Deduplicate article events by ID
+    const uniqueArticleEvents = new Map<string, NostrEvent>()
+    articleEvents.forEach(event => {
+      if (!uniqueArticleEvents.has(event.id)) {
+        uniqueArticleEvents.set(event.id, event)
+      }
+    })
+
+    // Convert to BlogPostPreview format
+    const blogPosts: BlogPostPreview[] = Array.from(uniqueArticleEvents.values()).map(event => ({
+      event,
+      title: getArticleTitle(event) || 'Untitled Article',
+      summary: getArticleSummary(event),
+      image: getArticleImage(event),
+      published: getArticlePublished(event),
+      author: event.pubkey
+    }))
+
+    // Sort by when they were marked as read (most recent first)
+    const articlesMap = new Map(nostrArticles.map(a => [a.eventId, a]))
+    blogPosts.sort((a, b) => {
+      const markedAtA = articlesMap.get(a.event.id)?.markedAt || 0
+      const markedAtB = articlesMap.get(b.event.id)?.markedAt || 0
+      return markedAtB - markedAtA
+    })
+
+    return blogPosts
+  } catch (error) {
+    console.error('Failed to fetch read articles with data:', error)
+    return []
+  }
+}
+

src/services/reactionService.ts

@@ -1,11 +1,14 @@
 import { EventFactory } from 'applesauce-factory'
-import { RelayPool } from 'applesauce-relay'
+import { RelayPool, completeOnEose, onlyEvents } from 'applesauce-relay'
 import { IAccount } from 'applesauce-accounts'
 import { NostrEvent } from 'nostr-tools'
+import { lastValueFrom, takeUntil, timer, toArray } from 'rxjs'
 import { RELAYS } from '../config/relays'
 
 const MARK_AS_READ_EMOJI = '📚'
 
+export { MARK_AS_READ_EMOJI }
+
 /**
  * Creates a kind:7 reaction to a nostr event (for nostr-native articles)
  * @param eventId The ID of the event being reacted to
@@ -101,3 +104,96 @@ export async function createWebsiteReaction(
   return signed
 }
 
+/**
+ * Checks if the user has already marked a nostr event as read
+ * @param eventId The ID of the event to check
+ * @param userPubkey The user's pubkey
+ * @param relayPool The relay pool for querying
+ * @returns True if the user has already reacted with the mark-as-read emoji
+ */
+export async function hasMarkedEventAsRead(
+  eventId: string,
+  userPubkey: string,
+  relayPool: RelayPool
+): Promise<boolean> {
+  try {
+    const filter = {
+      kinds: [7],
+      authors: [userPubkey],
+      '#e': [eventId]
+    }
+
+    const events$ = relayPool
+      .req(RELAYS, filter)
+      .pipe(
+        onlyEvents(),
+        completeOnEose(),
+        takeUntil(timer(2000)),
+        toArray()
+      )
+
+    const events: NostrEvent[] = await lastValueFrom(events$)
+    
+    // Check if any reaction has our mark-as-read emoji
+    const hasReadReaction = events.some((event: NostrEvent) => event.content === MARK_AS_READ_EMOJI)
+    
+    return hasReadReaction
+  } catch (error) {
+    console.error('Error checking read status:', error)
+    return false
+  }
+}
+
+/**
+ * Checks if the user has already marked a website as read
+ * @param url The URL to check
+ * @param userPubkey The user's pubkey
+ * @param relayPool The relay pool for querying
+ * @returns True if the user has already reacted with the mark-as-read emoji
+ */
+export async function hasMarkedWebsiteAsRead(
+  url: string,
+  userPubkey: string,
+  relayPool: RelayPool
+): Promise<boolean> {
+  try {
+    // Normalize URL the same way as when creating reactions
+    let normalizedUrl = url
+    try {
+      const parsed = new URL(url)
+      parsed.hash = ''
+      normalizedUrl = parsed.toString()
+      if (normalizedUrl.endsWith('/')) {
+        normalizedUrl = normalizedUrl.slice(0, -1)
+      }
+    } catch (error) {
+      console.warn('Failed to normalize URL:', error)
+    }
+
+    const filter = {
+      kinds: [17],
+      authors: [userPubkey],
+      '#r': [normalizedUrl]
+    }
+
+    const events$ = relayPool
+      .req(RELAYS, filter)
+      .pipe(
+        onlyEvents(),
+        completeOnEose(),
+        takeUntil(timer(2000)),
+        toArray()
+      )
+
+    const events: NostrEvent[] = await lastValueFrom(events$)
+    
+    // Check if any reaction has our mark-as-read emoji
+    const hasReadReaction = events.some((event: NostrEvent) => event.content === MARK_AS_READ_EMOJI)
+    
+    return hasReadReaction
+  } catch (error) {
+    console.error('Error checking read status:', error)
+    return false
+  }
+}
+

src/styles/components/me.css

@@ -0,0 +1,126 @@
+/* Me page tabs */
+.me-tabs {
+  display: flex;
+  gap: 0.5rem;
+  margin-top: 1rem;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  overflow-x: auto;
+  max-width: 600px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.me-tab {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.75rem 1.25rem;
+  background: none;
+  border: none;
+  border-bottom: 2px solid transparent;
+  color: var(--text-secondary, #999);
+  font-size: 0.95rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  white-space: nowrap;
+  margin-bottom: -1px;
+}
+
+.me-tab:hover {
+  color: var(--text-primary, #ddd);
+  background: rgba(255, 255, 255, 0.05);
+}
+
+.me-tab.active {
+  color: var(--primary-color, #8b5cf6);
+  border-bottom-color: var(--primary-color, #8b5cf6);
+}
+
+/* Highlights tab uses the user's custom "my highlights" color */
+.me-tab[data-tab="highlights"].active {
+  color: var(--highlight-color-mine, #ffff00);
+  border-bottom-color: var(--highlight-color-mine, #ffff00);
+}
+
+.me-tab svg {
+  font-size: 1rem;
+}
+
+.me-tab-content {
+  padding: 1.5rem 0;
+  max-width: 600px;
+  margin: 0 auto;
+  width: 100%;
+}
+
+/* Align highlight list width with profile card width on /me */
+.me-highlights-list { padding-left: 0; padding-right: 0; }
+.explore-header .author-card { max-width: 600px; margin: 0 auto; width: 100%; }
+
+/* Bookmarks list */
+.bookmarks-list {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.bookmark-item {
+  padding: 1rem;
+  background: var(--card-bg, #fff);
+  border: 1px solid var(--border-color, #e0e0e0);
+  border-radius: 8px;
+  transition: all 0.2s ease;
+}
+
+.bookmark-item:hover {
+  border-color: var(--primary-color, #8b5cf6);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.bookmark-item a {
+  text-decoration: none;
+  color: inherit;
+}
+
+.bookmark-item h3 {
+  margin: 0 0 0.5rem 0;
+  font-size: 1.1rem;
+  color: var(--text-primary, #000);
+}
+
+.bookmark-item p {
+  margin: 0;
+  font-size: 0.9rem;
+  color: var(--text-secondary, #666);
+  line-height: 1.5;
+}
+
+/* Mobile responsiveness */
+@media (max-width: 768px) {
+  /* Add top breathing room so floating sidebar buttons don't overlap header */
+  .explore-container .explore-header { 
+    margin-top: 2.25rem; 
+  }
+
+  .me-tabs {
+    gap: 0.25rem;
+    padding: 0 0.5rem;
+    margin-top: 0.5rem;
+  }
+  
+  .me-tab {
+    padding: 0.5rem 0.7rem;
+    font-size: 0.82rem;
+  }
+  
+  .me-tab svg {
+    font-size: 0.9rem;
+    margin-right: 0.25rem;
+  }
+
+  .me-tab-content {
+    padding: 1.25rem 0.75rem;
+  }
+}
+

src/styles/components/profile.css

@@ -4,9 +4,9 @@
 .author-card-avatar { flex-shrink: 0; width: 60px; height: 60px; border-radius: 50%; overflow: hidden; background: #2a2a2a; display: flex; align-items: center; justify-content: center; color: #666; }
 .author-card-avatar img { width: 100%; height: 100%; object-fit: cover; }
 .author-card-avatar svg { font-size: 2.5rem; }
-.author-card-content { flex: 1; min-width: 0; }
-.author-card-name { font-size: 1rem; font-weight: 600; color: #ddd; margin-bottom: 0.5rem; }
-.author-card-bio { font-size: 0.9rem; color: #999; line-height: 1.5; margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; }
+.author-card-content { flex: 1; min-width: 0; text-align: left; }
+.author-card-name { font-size: 1rem; font-weight: 600; color: #ddd; margin-bottom: 0.5rem; text-align: left; }
+.author-card-bio { font-size: 0.9rem; color: #999; line-height: 1.5; margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; text-align: left; }
 
 @media (max-width: 768px) {
   .author-card-container { padding: 1.5rem 1rem; }

src/styles/layout/highlights.css

@@ -99,29 +99,48 @@
 .highlights-empty svg { color: #555; margin-bottom: 0.5rem; }
 .empty-hint { font-size: 0.875rem; color: #666; margin-top: 0.5rem; }
 
-.highlights-list { overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: 1rem; }
-.highlight-item { background: #1e1e1e; border: 1px solid #333; border-radius: 8px; padding: 1rem; display: flex; gap: 0.75rem; transition: border-color 0.2s ease; }
+.highlights-list { overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: 0.75rem; }
+.highlight-item { background: #1e1e1e; border-left: 1px solid #333; border-right: 1px solid #333; padding: 0; display: flex; transition: border-color 0.2s ease; position: relative; }
 .highlight-item:hover { border-color: #646cff; }
+.highlight-item:hover .highlight-header,
+.highlight-item:hover .highlight-footer { border-color: #646cff; }
 .highlight-item.selected { border-color: #646cff; background: #252525; box-shadow: 0 0 0 2px rgba(100, 108, 255, 0.3); }
+.highlight-item.selected .highlight-header,
+.highlight-item.selected .highlight-footer { border-color: #646cff; }
+
+/* Compact button for highlight cards */
+.compact-button { background: none; border: none; color: #888; cursor: pointer; padding: 0.25rem; font-size: 0.75rem; display: flex; align-items: center; justify-content: center; gap: 0.25rem; transition: all 0.2s ease; border-radius: 4px; min-width: 20px; min-height: 20px; }
+.compact-button:hover { color: #aaa; background: rgba(255, 255, 255, 0.05); }
+.compact-button:active { transform: scale(0.95); }
+.compact-button:disabled { opacity: 0.5; cursor: not-allowed; }
+.compact-button:disabled:hover { background: none; color: #888; transform: none; }
+
+.highlight-header { position: absolute; top: 0; left: 0; right: 0; padding: 0.25rem 0.5rem; display: flex; align-items: center; justify-content: flex-end; pointer-events: none; border-top: 1px solid #333; border-top-left-radius: 8px; border-top-right-radius: 8px; transition: border-color 0.2s ease; }
+.highlight-header .compact-button { pointer-events: auto; }
+.highlight-timestamp { font-size: 0.75rem; font-weight: 500; white-space: nowrap; }
 
 /* Level colors in sidebar items */
 .highlight-item.level-mine { border-color: color-mix(in srgb, var(--highlight-color-mine, #ffff00) 60%, #333); box-shadow: 0 0 0 1px color-mix(in srgb, var(--highlight-color-mine, #ffff00) 25%, transparent); }
+.highlight-item.level-mine .highlight-header,
+.highlight-item.level-mine .highlight-footer { border-color: color-mix(in srgb, var(--highlight-color-mine, #ffff00) 60%, #333); }
 .highlight-item.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); }
+.highlight-item.level-friends .highlight-header,
+.highlight-item.level-friends .highlight-footer { border-color: color-mix(in srgb, var(--highlight-color-friends, #f97316) 60%, #333); }
 .highlight-item.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); }
+.highlight-item.level-nostrverse .highlight-header,
+.highlight-item.level-nostrverse .highlight-footer { border-color: color-mix(in srgb, var(--highlight-color-nostrverse, #9333ea) 60%, #333); }
 
-.highlight-quote-icon { color: #646cff; font-size: 1.2rem; flex-shrink: 0; margin-top: 0.25rem; position: relative; }
-.highlight-relay-indicator { position: absolute; bottom: -4px; left: -6px; font-size: 0.7rem; color: #888; opacity: 0.7; transition: all 0.2s ease; cursor: pointer; padding: 4px; min-width: 20px; min-height: 20px; display: flex; align-items: center; justify-content: center; }
-.highlight-relay-indicator:hover { opacity: 1; color: #aaa; transform: scale(1.1); }
-.highlight-relay-indicator:active { transform: scale(0.95); }
-.highlight-delete-btn { position: absolute; bottom: -4px; right: -6px; font-size: 0.7rem; color: #888; opacity: 0.7; transition: all 0.2s ease; cursor: pointer; padding: 4px; min-width: 20px; min-height: 20px; display: flex; align-items: center; justify-content: center; }
-.highlight-delete-btn:hover { opacity: 1; color: #ff4444; transform: scale(1.1); }
-.highlight-delete-btn:active { transform: scale(0.95); }
+.highlight-quote-button { position: absolute; top: 0.25rem; left: 0.5rem; z-index: 10; }
+.highlight-item.level-mine .highlight-quote-button { color: var(--highlight-color-mine, #ffff00); }
+.highlight-item.level-friends .highlight-quote-button { color: var(--highlight-color-friends, #f97316); }
+.highlight-item.level-nostrverse .highlight-quote-button { color: var(--highlight-color-nostrverse, #9333ea); }
+.highlight-relay-indicator { flex-shrink: 0; }
+.highlight-relay-indicator:hover { opacity: 1; }
 
 /* Mobile: Larger touch targets and better spacing */
 @media (max-width: 768px) {
-  .highlight-quote-icon { min-width: 100px; }
-  .highlight-relay-indicator { bottom: -8px; left: -8px; padding: 8px; min-width: var(--min-touch-target); min-height: var(--min-touch-target); font-size: 0.85rem; }
-  .highlight-delete-btn { bottom: -8px; right: -8px; padding: 8px; min-width: var(--min-touch-target); min-height: var(--min-touch-target); font-size: 0.85rem; }
+  .highlight-relay-indicator { padding: 8px; min-width: var(--min-touch-target); min-height: var(--min-touch-target); }
+  .compact-button { padding: 0.5rem; min-width: var(--min-touch-target); min-height: var(--min-touch-target); }
 }
 
 /* Level-colored quote icon */
@@ -129,17 +148,23 @@
 .highlight-item.level-friends .highlight-quote-icon { color: var(--highlight-color-friends, #f97316); }
 .highlight-item.level-nostrverse .highlight-quote-icon { color: var(--highlight-color-nostrverse, #9333ea); }
 
-.highlight-content { flex: 1; display: flex; flex-direction: column; gap: 0.75rem; }
+.highlight-content { flex: 1; display: flex; flex-direction: column; gap: 0.5rem; padding: 1.75rem 0.75rem; }
 .highlight-text { margin: 0; padding: 0; font-style: italic; color: #ddd; line-height: 1.6; border-left: none; font-size: 0.95rem; }
 .highlight-comment { margin-top: 0.5rem; padding: 0.75rem; background: rgba(100, 108, 255, 0.1); border-left: 3px solid #646cff; border-radius: 4px; font-size: 0.875rem; color: #ddd; line-height: 1.5; }
 
-.highlight-meta { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8rem; color: #888; flex-wrap: nowrap; min-height: 20px; }
-.highlight-author { color: #aaa; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; line-height: 1; }
-.highlight-meta-separator { color: #666; flex-shrink: 0; line-height: 1; }
-.highlight-time { color: #888; white-space: nowrap; flex-shrink: 0; line-height: 1; }
-.highlight-menu-wrapper { position: relative; margin-left: auto; flex-shrink: 0; }
-.highlight-menu-btn { background: none; border: none; color: #888; cursor: pointer; padding: 0.25rem 0.5rem; font-size: 0.875rem; display: flex; align-items: center; transition: color 0.2s ease; border-radius: 4px; }
-.highlight-menu-btn:hover { color: #646cff; background: rgba(100, 108, 255, 0.1); }
+.highlight-footer { position: absolute; bottom: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; padding: 0.25rem 0.5rem; font-size: 0.8rem; color: #888; border-bottom: 1px solid #333; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; transition: border-color 0.2s ease; }
+.highlight-footer-left { display: flex; align-items: center; gap: 0.4rem; min-width: 0; }
+.highlight-author { color: #aaa; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; display: inline-flex; align-items: center; min-height: 28px; }
+
+/* Ensure relay indicator in footer uses normal flow and matches CompactButton spacing */
+.highlight-item .highlight-footer .highlight-relay-indicator {
+  position: static; /* override any absolute rules from global styles */
+  bottom: auto;
+  left: auto;
+  margin: 0; /* rely on footer gap */
+  padding: 0.25rem; /* CompactButton base */
+}
+.highlight-menu-wrapper { position: relative; flex-shrink: 0; display: flex; align-items: center; }
 .highlight-menu { position: absolute; right: 0; top: calc(100% + 4px); background: #2a2a2a; border: 1px solid #444; border-radius: 6px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); z-index: 1000; min-width: 160px; overflow: hidden; }
 .highlight-menu-item { width: 100%; background: none; border: none; color: #ddd; padding: 0.625rem 0.875rem; font-size: 0.875rem; display: flex; align-items: center; gap: 0.625rem; cursor: pointer; transition: all 0.15s ease; text-align: left; white-space: nowrap; }
 .highlight-menu-item:hover { background: rgba(100, 108, 255, 0.15); color: #fff; }

src/vite-env.d.ts

@@ -3,3 +3,8 @@
 interface ImportMetaEnv {
   readonly VITE_DEFAULT_ARTICLE_NADDR: string
 }
+
+declare module '*.svg?raw' {
+  const content: string
+  export default content
+}