aljaz/boris
1
1
Fork 0
mirror of https://github.com/dergigi/boris.git synced 2026-01-21 07:44:56 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat: add inline highlight annotations in content panel

Browse Source 
- Create highlightMatching utility to find and apply highlights to text/HTML
- Update ContentPanel to accept highlights and match them to current URL
- Add visual highlighting with yellow background and blue underline
- Show highlight count indicator when content has highlights
- Add hover effects and tooltips showing highlight date
- Support both HTML and markdown content highlighting

Highlighted text now appears underlined in the main content panel when
viewing URLs that have associated NIP-84 highlights.
This commit is contained in:
Gigi
2025-10-04 19:58:10 +01:00
parent 7390104414
commit 296600bb0d
4 changed files with 260 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
src/index.css
View File

@@ -476,8 +476,34 @@ body {
font-size: 1.2rem;
}
.reader-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 1rem;
gap: 1rem;
flex-wrap: wrap;
}
.reader-title {
margin: 0 0 1rem 0;
margin: 0;
flex: 1;
}
.highlight-indicator {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.375rem 0.75rem;
background: rgba(100, 108, 255, 0.1);
border: 1px solid rgba(100, 108, 255, 0.3);
border-radius: 6px;
font-size: 0.875rem;
color: #646cff;
}
.highlight-indicator svg {
font-size: 0.875rem;
}
.reader-html {
@@ -1233,3 +1259,40 @@ body {
.highlight-source svg {
font-size: 0.875rem;
}
/* Inline content highlights */
.content-highlight {
background: rgba(255, 235, 59, 0.3);
border-bottom: 2px solid #646cff;
padding: 0.125rem 0;
cursor: help;
transition: all 0.2s ease;
position: relative;
}
.content-highlight:hover {
background: rgba(255, 235, 59, 0.5);
border-bottom-color: #535bf2;
}
.reader-html .content-highlight,
.reader-markdown .content-highlight {
color: inherit;
text-decoration: none;
}
/* Ensure highlights work in both light and dark mode */
@media (prefers-color-scheme: light) {
.content-highlight {
background: rgba(255, 235, 59, 0.4);
}
.content-highlight:hover {
background: rgba(255, 235, 59, 0.6);
}
.highlight-indicator {
background: rgba(100, 108, 255, 0.15);
border-color: rgba(100, 108, 255, 0.4);
}
}