mirror of
https://github.com/dergigi/boris.git
synced 2026-01-07 08:54:25 +01:00
feat: add plane icon indicator for local relays in settings
- Show plane icon badge next to local relays in relay list - Badge appears for both active and recently seen local relays - Uses amber styling to match local-only mode theme - Includes tooltip explaining the relay is local - Makes it easy to identify local relays at a glance in settings
This commit is contained in:
@@ -1,9 +1,10 @@
|
||||
import React from 'react'
|
||||
import { useNavigate } from 'react-router-dom'
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
||||
import { faCheckCircle, faCircle, faClock } from '@fortawesome/free-solid-svg-icons'
|
||||
import { faCheckCircle, faCircle, faClock, faPlane } from '@fortawesome/free-solid-svg-icons'
|
||||
import { RelayStatus } from '../../services/relayStatusService'
|
||||
import { formatDistanceToNow } from 'date-fns'
|
||||
import { isLocalRelay } from '../../utils/helpers'
|
||||
|
||||
interface RelaySettingsProps {
|
||||
relayStatuses: RelayStatus[]
|
||||
@@ -66,9 +67,29 @@ const RelaySettings: React.FC<RelaySettingsProps> = ({ relayStatuses, onClose })
|
||||
fontFamily: 'var(--font-mono, monospace)',
|
||||
whiteSpace: 'nowrap',
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis'
|
||||
textOverflow: 'ellipsis',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '0.5rem'
|
||||
}}>
|
||||
{formatRelayUrl(relay.url)}
|
||||
{isLocalRelay(relay.url) && (
|
||||
<span
|
||||
title="Local relay"
|
||||
style={{
|
||||
display: 'inline-flex',
|
||||
alignItems: 'center',
|
||||
padding: '0.15rem 0.4rem',
|
||||
background: 'rgba(245, 158, 11, 0.15)',
|
||||
borderRadius: '4px',
|
||||
color: '#f59e0b',
|
||||
fontSize: '0.75rem',
|
||||
flexShrink: 0
|
||||
}}
|
||||
>
|
||||
<FontAwesomeIcon icon={faPlane} />
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -118,9 +139,29 @@ const RelaySettings: React.FC<RelaySettingsProps> = ({ relayStatuses, onClose })
|
||||
fontFamily: 'var(--font-mono, monospace)',
|
||||
whiteSpace: 'nowrap',
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis'
|
||||
textOverflow: 'ellipsis',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '0.5rem'
|
||||
}}>
|
||||
{formatRelayUrl(relay.url)}
|
||||
{isLocalRelay(relay.url) && (
|
||||
<span
|
||||
title="Local relay"
|
||||
style={{
|
||||
display: 'inline-flex',
|
||||
alignItems: 'center',
|
||||
padding: '0.15rem 0.4rem',
|
||||
background: 'rgba(245, 158, 11, 0.15)',
|
||||
borderRadius: '4px',
|
||||
color: '#f59e0b',
|
||||
fontSize: '0.75rem',
|
||||
flexShrink: 0
|
||||
}}
|
||||
>
|
||||
<FontAwesomeIcon icon={faPlane} />
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div style={{
|
||||
|
||||
Reference in New Issue
Block a user