diff --git a/src/components/Bookmarks.tsx b/src/components/Bookmarks.tsx index 76275bb1..d1644635 100644 --- a/src/components/Bookmarks.tsx +++ b/src/components/Bookmarks.tsx @@ -37,7 +37,7 @@ const Bookmarks: React.FC = ({ relayPool, onLogout }) => { const [isCollapsed, setIsCollapsed] = useState(true) // Start collapsed const [isHighlightsCollapsed, setIsHighlightsCollapsed] = useState(true) // Start collapsed const [viewMode, setViewMode] = useState('compact') - const [showUnderlines, setShowUnderlines] = useState(true) + const [showHighlights, setShowHighlights] = useState(true) const [selectedHighlightId, setSelectedHighlightId] = useState(undefined) const [showSettings, setShowSettings] = useState(false) const [currentArticleCoordinate, setCurrentArticleCoordinate] = useState(undefined) @@ -95,7 +95,7 @@ const Bookmarks: React.FC = ({ relayPool, onLogout }) => { // Apply UI settings useEffect(() => { if (settings.defaultViewMode) setViewMode(settings.defaultViewMode) - if (settings.showUnderlines !== undefined) setShowUnderlines(settings.showUnderlines) + if (settings.showHighlights !== undefined) setShowHighlights(settings.showHighlights) // Always start with both panels collapsed on initial load // Don't apply saved collapse settings on initial load - let user control them }, [settings]) @@ -229,7 +229,7 @@ const Bookmarks: React.FC = ({ relayPool, onLogout }) => { image={readerContent?.image} selectedUrl={selectedUrl} highlights={classifiedHighlights} - showUnderlines={showUnderlines} + showHighlights={showHighlights} highlightStyle={settings.highlightStyle || 'marker'} highlightColor={settings.highlightColor || '#ffff00'} onHighlightClick={(id) => { @@ -251,7 +251,7 @@ const Bookmarks: React.FC = ({ relayPool, onLogout }) => { onToggleCollapse={() => setIsHighlightsCollapsed(!isHighlightsCollapsed)} onSelectUrl={handleSelectUrl} selectedUrl={selectedUrl} - onToggleUnderlines={setShowUnderlines} + onToggleHighlights={setShowHighlights} selectedHighlightId={selectedHighlightId} onRefresh={handleFetchHighlights} onHighlightClick={setSelectedHighlightId} diff --git a/src/components/ContentPanel.tsx b/src/components/ContentPanel.tsx index ac0a2062..e95b5f84 100644 --- a/src/components/ContentPanel.tsx +++ b/src/components/ContentPanel.tsx @@ -19,7 +19,7 @@ interface ContentPanelProps { selectedUrl?: string image?: string highlights?: Highlight[] - showUnderlines?: boolean + showHighlights?: boolean highlightStyle?: 'marker' | 'underline' highlightColor?: string onHighlightClick?: (highlightId: string) => void @@ -37,7 +37,7 @@ const ContentPanel: React.FC = ({ selectedUrl, image, highlights = [], - showUnderlines = true, + showHighlights = true, highlightStyle = 'marker', highlightColor = '#ffff00', onHighlightClick, @@ -96,13 +96,13 @@ const ContentPanel: React.FC = ({ const sourceHtml = markdown ? renderedHtml : html if (!sourceHtml) return '' - // Apply highlights if we have them and underlines are shown - if (showUnderlines && relevantHighlights.length > 0) { + // Apply highlights if we have them and highlights are enabled + if (showHighlights && relevantHighlights.length > 0) { return applyHighlightsToHTML(sourceHtml, relevantHighlights, highlightStyle) } return sourceHtml - }, [html, renderedHtml, markdown, relevantHighlights, showUnderlines, highlightStyle]) + }, [html, renderedHtml, markdown, relevantHighlights, showHighlights, highlightStyle]) // Attach click handlers to highlight marks diff --git a/src/components/HighlightsPanel.tsx b/src/components/HighlightsPanel.tsx index 789fc507..b0a941ff 100644 --- a/src/components/HighlightsPanel.tsx +++ b/src/components/HighlightsPanel.tsx @@ -17,7 +17,7 @@ interface HighlightsPanelProps { onToggleCollapse: () => void onSelectUrl?: (url: string) => void selectedUrl?: string - onToggleUnderlines?: (show: boolean) => void + onToggleHighlights?: (show: boolean) => void selectedHighlightId?: string onRefresh?: () => void onHighlightClick?: (highlightId: string) => void @@ -34,7 +34,7 @@ export const HighlightsPanel: React.FC = ({ onToggleCollapse, onSelectUrl, selectedUrl, - onToggleUnderlines, + onToggleHighlights, selectedHighlightId, onRefresh, onHighlightClick, @@ -43,12 +43,12 @@ export const HighlightsPanel: React.FC = ({ onHighlightVisibilityChange, followedPubkeys = new Set() }) => { - const [showUnderlines, setShowUnderlines] = useState(true) + const [showHighlights, setShowHighlights] = useState(true) - const handleToggleUnderlines = () => { - const newValue = !showUnderlines - setShowUnderlines(newValue) - onToggleUnderlines?.(newValue) + const handleToggleHighlights = () => { + const newValue = !showHighlights + setShowHighlights(newValue) + onToggleHighlights?.(newValue) } // Filter highlights based on visibility levels and URL @@ -179,12 +179,12 @@ export const HighlightsPanel: React.FC = ({ )} {filteredHighlights.length > 0 && ( )} diff --git a/src/components/Settings.tsx b/src/components/Settings.tsx index 554304a9..f78696dd 100644 --- a/src/components/Settings.tsx +++ b/src/components/Settings.tsx @@ -88,12 +88,12 @@ const Settings: React.FC = ({ settings, onSave, onClose }) => {
-
diff --git a/src/index.css b/src/index.css index fd00eae0..58a4dbbe 100644 --- a/src/index.css +++ b/src/index.css @@ -1408,7 +1408,7 @@ body { } .refresh-highlights-btn, -.toggle-underlines-btn, +.toggle-highlight-display-btn, .toggle-highlights-btn { background: transparent; color: #ddd; @@ -1425,14 +1425,14 @@ body { } .refresh-highlights-btn:hover, -.toggle-underlines-btn:hover, +.toggle-highlight-display-btn:hover, .toggle-highlights-btn:hover { background: #2a2a2a; color: #fff; } .refresh-highlights-btn:active, -.toggle-underlines-btn:active, +.toggle-highlight-display-btn:active, .toggle-highlights-btn:active { transform: translateY(1px); } diff --git a/src/services/settingsService.ts b/src/services/settingsService.ts index d0b3f778..8983d90e 100644 --- a/src/services/settingsService.ts +++ b/src/services/settingsService.ts @@ -11,7 +11,7 @@ const SETTINGS_IDENTIFIER = 'com.dergigi.boris.user-settings' export interface UserSettings { collapseOnArticleOpen?: boolean defaultViewMode?: 'compact' | 'cards' | 'large' - showUnderlines?: boolean + showHighlights?: boolean sidebarCollapsed?: boolean highlightsCollapsed?: boolean readingFont?: string