feat: add info icon tooltip for airport names in routes table

Replaces the non-functional title attribute with a small Info icon
next to the IATA code badge. Hovering shows a dark tooltip with the
full airport name and city. Only rendered when useful name data exists.
Clicking the icon stops propagation so it doesn't expand the flights row.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-02-27 20:59:37 +01:00
parent ce1cf667d2
commit 0a2fed7465

View File

@@ -15,6 +15,7 @@ import {
Loader2,
RotateCcw,
Trash2,
Info,
} from 'lucide-react';
import { scanApi } from '../api';
import type { Scan, Route, Flight } from '../api';
@@ -419,6 +420,19 @@ export default function ScanDetails() {
<span className="text-sm text-on-surface-variant truncate max-w-[180px]">
{route.destination_name || route.destination_city || ''}
</span>
{/* Info icon + tooltip — only when useful name data exists */}
{(route.destination_name && route.destination_name !== route.destination) || route.destination_city ? (
<span
className="relative group/tip inline-flex shrink-0"
onClick={e => e.stopPropagation()}
>
<Info size={12} className="text-on-surface-variant/40 hover:text-on-surface-variant/70 cursor-help transition-colors" />
<span className="pointer-events-none absolute bottom-full left-1/2 -translate-x-1/2 mb-2 z-50 invisible group-hover/tip:visible bg-gray-900 text-white text-xs rounded px-2 py-1 whitespace-nowrap shadow-lg">
{[route.destination_name, route.destination_city].filter(s => s && s !== route.destination).join(', ')}
<span className="absolute top-full left-1/2 -translate-x-1/2 border-4 border-transparent border-t-gray-900" />
</span>
</span>
) : null}
</div>
</td>
{/* Flights */}