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

feat(highlights): color sidebar highlight items by level (mine/friends/nostrverse)

Browse Source
This commit is contained in:
Gigi
2025-10-05 21:54:02 +01:00
parent 336f2b62ab
commit f2422e9601
2 changed files with 22 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/HighlightItem.tsx
View File

@@ -4,8 +4,12 @@ import { faQuoteLeft, faLink, faExternalLinkAlt } from '@fortawesome/free-solid-
import { Highlight } from '../types/highlights'
import { formatDistanceToNow } from 'date-fns'
interface HighlightWithLevel extends Highlight {
level?: 'mine' | 'friends' | 'nostrverse'
}
interface HighlightItemProps {
highlight: Highlight
highlight: HighlightWithLevel
onSelectUrl?: (url: string) => void
isSelected?: boolean
onHighlightClick?: (highlightId: string) => void
@@ -45,7 +49,7 @@ export const HighlightItem: React.FC<HighlightItemProps> = ({ highlight, onSelec
return (
<div
ref={itemRef}
className={`highlight-item ${isSelected ? 'selected' : ''}`}
className={`highlight-item ${isSelected ? 'selected' : ''} ${highlight.level ? `level-${highlight.level}` : ''}`}
data-highlight-id={highlight.id}
onClick={handleItemClick}
style={{ cursor: onHighlightClick ? 'pointer' : 'default' }}

16
src/index.css
View File

@@ -1435,6 +1435,22 @@ body {
box-shadow: 0 0 0 2px rgba(100, 108, 255, 0.3);
}
/* Level colors in sidebar items */
.highlight-item.level-mine {
border-color: color-mix(in srgb, var(--highlight-color-mine, #eab308) 60%, #333);
box-shadow: 0 0 0 1px color-mix(in srgb, var(--highlight-color-mine, #eab308) 25%, transparent);
}
.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-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-quote-icon {
color: #646cff;
font-size: 1.2rem;