feat(highlights): add relay indicator icon to highlight items

Add a small server icon at the bottom-left of each highlight that shows which relays the highlight was published to. The icon appears when publishedRelays information is available (for user-created highlights) and displays a tooltip with the list of relay URLs on hover.

- Import faServer icon from FontAwesome
- Add relay indicator to HighlightItem component
- Display formatted relay list in tooltip
- Add CSS styling for the indicator with hover effects
- Support both dark and light modes
This commit is contained in:
Gigi
2025-10-09 16:04:24 +01:00
parent 6a142f5163
commit d9730bb5f8
2 changed files with 42 additions and 1 deletions

View File

@@ -1257,6 +1257,14 @@ body {
color: #646cff;
}
.highlight-relay-indicator {
color: #666;
}
.highlight-relay-indicator:hover {
color: #333;
}
.highlight-text {
color: #213547;
}
@@ -1557,6 +1565,23 @@ body {
font-size: 1.2rem;
flex-shrink: 0;
margin-top: 0.25rem;
position: relative;
}
.highlight-relay-indicator {
position: absolute;
bottom: -4px;
left: 0;
font-size: 0.7rem;
color: #888;
opacity: 0.7;
transition: opacity 0.2s ease;
cursor: help;
}
.highlight-relay-indicator:hover {
opacity: 1;
color: #aaa;
}
/* Level-colored quote icon */