diff --git a/src/components/Bookmarks.tsx b/src/components/Bookmarks.tsx index 63e0d2e6..efaba060 100644 --- a/src/components/Bookmarks.tsx +++ b/src/components/Bookmarks.tsx @@ -29,6 +29,7 @@ const Bookmarks: React.FC = ({ relayPool, onLogout }) => { const [isHighlightsCollapsed, setIsHighlightsCollapsed] = useState(false) const [viewMode, setViewMode] = useState('cards') const [showUnderlines, setShowUnderlines] = useState(true) + const [selectedHighlightId, setSelectedHighlightId] = useState(undefined) const activeAccount = Hooks.useActiveAccount() const accountManager = Hooks.useAccountManager() @@ -125,6 +126,7 @@ const Bookmarks: React.FC = ({ relayPool, onLogout }) => { selectedUrl={selectedUrl} highlights={highlights} showUnderlines={showUnderlines} + onHighlightClick={setSelectedHighlightId} />
@@ -136,6 +138,7 @@ const Bookmarks: React.FC = ({ relayPool, onLogout }) => { onSelectUrl={handleSelectUrl} selectedUrl={selectedUrl} onToggleUnderlines={setShowUnderlines} + selectedHighlightId={selectedHighlightId} />
diff --git a/src/components/ContentPanel.tsx b/src/components/ContentPanel.tsx index b2cf566f..93fca576 100644 --- a/src/components/ContentPanel.tsx +++ b/src/components/ContentPanel.tsx @@ -14,6 +14,7 @@ interface ContentPanelProps { selectedUrl?: string highlights?: Highlight[] showUnderlines?: boolean + onHighlightClick?: (highlightId: string) => void } const ContentPanel: React.FC = ({ @@ -23,7 +24,8 @@ const ContentPanel: React.FC = ({ markdown, selectedUrl, highlights = [], - showUnderlines = true + showUnderlines = true, + onHighlightClick }) => { const contentRef = useRef(null) @@ -136,13 +138,27 @@ const ContentPanel: React.FC = ({ if (originalHTML !== highlightedHTML) { console.log('✅ Applied highlights to DOM') contentRef.current.innerHTML = highlightedHTML + + // Add click handlers to all highlight marks + if (onHighlightClick) { + const marks = contentRef.current.querySelectorAll('mark.content-highlight') + marks.forEach(mark => { + const highlightId = mark.getAttribute('data-highlight-id') + if (highlightId) { + mark.addEventListener('click', () => { + onHighlightClick(highlightId) + }) + ;(mark as HTMLElement).style.cursor = 'pointer' + } + }) + } } else { console.log('⚠️ No changes made to DOM') } }) return () => cancelAnimationFrame(rafId) - }, [relevantHighlights, html, markdown, showUnderlines]) + }, [relevantHighlights, html, markdown, showUnderlines, onHighlightClick]) const highlightedMarkdown = useMemo(() => { if (!markdown || relevantHighlights.length === 0) return markdown diff --git a/src/components/HighlightItem.tsx b/src/components/HighlightItem.tsx index faffc2b5..5fe3bee9 100644 --- a/src/components/HighlightItem.tsx +++ b/src/components/HighlightItem.tsx @@ -1,4 +1,4 @@ -import React from 'react' +import React, { useEffect, useRef } from 'react' import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' import { faQuoteLeft, faLink, faExternalLinkAlt } from '@fortawesome/free-solid-svg-icons' import { Highlight } from '../types/highlights' @@ -7,9 +7,17 @@ import { formatDistanceToNow } from 'date-fns' interface HighlightItemProps { highlight: Highlight onSelectUrl?: (url: string) => void + isSelected?: boolean } -export const HighlightItem: React.FC = ({ highlight, onSelectUrl }) => { +export const HighlightItem: React.FC = ({ highlight, onSelectUrl, isSelected }) => { + const itemRef = useRef(null) + + useEffect(() => { + if (isSelected && itemRef.current) { + itemRef.current.scrollIntoView({ behavior: 'smooth', block: 'center' }) + } + }, [isSelected]) const handleLinkClick = (url: string, e: React.MouseEvent) => { if (onSelectUrl) { e.preventDefault() @@ -27,7 +35,7 @@ export const HighlightItem: React.FC = ({ highlight, onSelec const sourceLink = getSourceLink() return ( -
+
diff --git a/src/components/HighlightsPanel.tsx b/src/components/HighlightsPanel.tsx index 4b445271..a4a91d17 100644 --- a/src/components/HighlightsPanel.tsx +++ b/src/components/HighlightsPanel.tsx @@ -12,6 +12,7 @@ interface HighlightsPanelProps { onSelectUrl?: (url: string) => void selectedUrl?: string onToggleUnderlines?: (show: boolean) => void + selectedHighlightId?: string } export const HighlightsPanel: React.FC = ({ @@ -21,7 +22,8 @@ export const HighlightsPanel: React.FC = ({ onToggleCollapse, onSelectUrl, selectedUrl, - onToggleUnderlines + onToggleUnderlines, + selectedHighlightId }) => { const [showUnderlines, setShowUnderlines] = useState(true) @@ -121,6 +123,7 @@ export const HighlightsPanel: React.FC = ({ key={highlight.id} highlight={highlight} onSelectUrl={onSelectUrl} + isSelected={highlight.id === selectedHighlightId} /> ))}
diff --git a/src/index.css b/src/index.css index 68a9fb31..abc9f155 100644 --- a/src/index.css +++ b/src/index.css @@ -1214,6 +1214,12 @@ body { border-color: #646cff; } +.highlight-item.selected { + border-color: #646cff; + background: #252525; + box-shadow: 0 0 0 2px rgba(100, 108, 255, 0.3); +} + .highlight-quote-icon { color: #646cff; font-size: 1.2rem;