diff --git a/src/components/HighlightItem.tsx b/src/components/HighlightItem.tsx index e4bce626..44451d72 100644 --- a/src/components/HighlightItem.tsx +++ b/src/components/HighlightItem.tsx @@ -1,6 +1,6 @@ import React, { useEffect, useRef, useState } from 'react' import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' -import { faQuoteLeft, faExternalLinkAlt, faHouseSignal, faPlane, faSpinner } from '@fortawesome/free-solid-svg-icons' +import { faQuoteLeft, faExternalLinkAlt, faHouseSignal, faPlane, faSpinner, faServer } from '@fortawesome/free-solid-svg-icons' import { Highlight } from '../types/highlights' import { formatDistanceToNow } from 'date-fns' import { useEventModel } from 'applesauce-react/hooks' @@ -83,6 +83,17 @@ export const HighlightItem: React.FC = ({ highlight, onSelec const sourceLink = getSourceLink() + // Format relay list for tooltip + const getRelayTooltip = () => { + if (!highlight.publishedRelays || highlight.publishedRelays.length === 0) { + return 'No relay information available' + } + const relayNames = highlight.publishedRelays.map(url => + url.replace(/^wss?:\/\//, '').replace(/\/$/, '') + ) + return `Published to ${relayNames.length} relay(s):\n${relayNames.join('\n')}` + } + return (
= ({ highlight, onSelec >
+ {highlight.publishedRelays && highlight.publishedRelays.length > 0 && ( +
+ +
+ )}
diff --git a/src/index.css b/src/index.css index 7e8b00a8..5ca5d2b7 100644 --- a/src/index.css +++ b/src/index.css @@ -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 */