feat(map): enhance globe projection handling and improve altitude color representation (#14)
* feat(map): enhance globe projection handling and improve altitude color representation - Implemented elevation-aware pixel projection for globe mode in `projectLngLatElevationPixelDelta`. - Refactored north-up animation in `CameraController` to use `setBearing` for smoother transitions. - Added native GeoJSON support for globe zoom in `FlightLayers`, including dynamic opacity adjustments based on zoom levels. - Introduced globe-specific pitch and projection settings in `Map` component, ensuring consistent rendering. - Enhanced UI control panel with a visual separator for better organization. - Minor formatting adjustments in `altitudeToColor` function for improved readability. * feat(map): refactor elevation-aware projection handling for improved accuracy * feat(map): add dark terrain profile support and enhance map styling * feat: implement trail stitching for merging historical and live flight data - Added a new module `trail-stitching.ts` to handle the merging of sparse historical track data with high-frequency live trail data. - Introduced constants for thresholds and parameters to improve code readability and maintainability. - Implemented a main function `stitchHistoricalTrail` that processes flight tracks, applies smoothing, and merges live tail data. - Included utility functions for spherical interpolation and cubic easing for altitude transitions. - Ensured the final path is cleaned of spikes and sharp corners for a smoother representation. * feat: add centripetal Catmull-Rom spline interpolation for 3D flight trails - Implemented `catmullRomSpline3D` function to interpolate waypoints into a smooth 3D path. - Added helper functions for segment density calculation, safe linear interpolation, and endpoint reflection. - Included support for variable tension based on heading changes to enhance smoothness. - Introduced utility functions for linear interpolation between elevated points. * feat(map): enhance layer visibility handling for flight and selection layers * feat: enhance control panel with new tabs and settings - Added "Changelog" and "About" tabs to the control panel. - Introduced new icons for the added tabs using lucide-react. - Updated the styling of the control panel buttons and dialog. - Improved accessibility with aria-labels for buttons. feat: integrate hero banner in flight card - Added a HeroBanner component to display aircraft photos in the FlightCard. - Implemented loading and error states for the photo display. - Enhanced the layout and styling of the FlightCard for better user experience. fix: update keyboard shortcuts for search functionality - Added shortcut "⌘K" to open search from anywhere in the application. - Adjusted keyboard shortcut handling to prevent conflicts with input fields. fix: optimize flight tracking cache management - Introduced a maximum cache size for flight tracking to prevent memory growth. - Implemented a cache eviction strategy for stale entries. feat: add great-circle utilities for geographical calculations - Implemented functions for calculating haversine distance, great-circle interpolation, and densifying paths. - Added functionality to handle antimeridian crossings in geographical paths. refactor: streamline map styles and terrain handling - Consolidated terrain DEM source for both terrain mesh and hillshade. - Adjusted hillshade layer properties for better performance and visual fidelity. fix: improve bounding box calculations for flight queries - Enhanced longitude calculations to account for converging meridians at higher latitudes. - Ensured bounding box calculations are accurate across different latitudes. * feat(map): refine globe mode functionality and update trail settings
This commit is contained in:
kew
406
src/components/ui/aircraft-photos.tsx
Normal file
406
src/components/ui/aircraft-photos.tsx
Normal file
@ -0,0 +1,406 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useCallback, useEffect, useRef, memo } from "react";
|
||||
import { createPortal } from "react-dom";
|
||||
import { motion, AnimatePresence } from "motion/react";
|
||||
import {
|
||||
Camera,
|
||||
ChevronLeft,
|
||||
ChevronRight,
|
||||
X,
|
||||
Plane,
|
||||
ImageOff,
|
||||
} from "lucide-react";
|
||||
import type {
|
||||
NormalizedPhoto,
|
||||
AircraftDetails,
|
||||
} from "@/hooks/use-aircraft-photos";
|
||||
|
||||
const Thumbnail = memo(function Thumbnail({
|
||||
photo,
|
||||
index,
|
||||
onClick,
|
||||
}: {
|
||||
photo: NormalizedPhoto;
|
||||
index: number;
|
||||
onClick: (index: number) => void;
|
||||
}) {
|
||||
const ref = useRef<HTMLButtonElement>(null);
|
||||
const [loaded, setLoaded] = useState(false);
|
||||
const [failed, setFailed] = useState(false);
|
||||
const [visible, setVisible] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const el = ref.current;
|
||||
if (!el) return;
|
||||
const observer = new IntersectionObserver(
|
||||
([entry]) => {
|
||||
if (entry?.isIntersecting) {
|
||||
setVisible(true);
|
||||
observer.disconnect();
|
||||
}
|
||||
},
|
||||
{ rootMargin: "100px" },
|
||||
);
|
||||
observer.observe(el);
|
||||
return () => observer.disconnect();
|
||||
}, []);
|
||||
|
||||
if (failed) return null;
|
||||
|
||||
return (
|
||||
<button
|
||||
ref={ref}
|
||||
type="button"
|
||||
onClick={() => onClick(index)}
|
||||
className="group relative h-16 w-24 shrink-0 cursor-pointer overflow-hidden rounded-lg border border-white/8 bg-white/5 transition-all hover:border-white/20 hover:brightness-110 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-white/30"
|
||||
aria-label={`View photo ${index + 1}${photo.photographer ? ` by ${photo.photographer}` : ""}`}
|
||||
>
|
||||
{!loaded && (
|
||||
<span
|
||||
aria-hidden
|
||||
className="absolute inset-0 animate-pulse bg-linear-to-br from-white/5 via-white/8 to-white/5"
|
||||
/>
|
||||
)}
|
||||
{visible && (
|
||||
<img
|
||||
src={photo.thumbnail}
|
||||
alt={`Aircraft photo ${index + 1}`}
|
||||
loading="lazy"
|
||||
decoding="async"
|
||||
onLoad={() => setLoaded(true)}
|
||||
onError={() => setFailed(true)}
|
||||
className={`h-full w-full object-cover transition-opacity duration-300 ${loaded ? "opacity-100" : "opacity-0"}`}
|
||||
/>
|
||||
)}
|
||||
<span className="pointer-events-none absolute inset-0 rounded-lg ring-1 ring-inset ring-white/5 group-hover:ring-white/15" />
|
||||
</button>
|
||||
);
|
||||
});
|
||||
|
||||
export function Lightbox({
|
||||
photos,
|
||||
index,
|
||||
onClose,
|
||||
onNavigate,
|
||||
}: {
|
||||
photos: NormalizedPhoto[];
|
||||
index: number;
|
||||
onClose: () => void;
|
||||
onNavigate: (index: number) => void;
|
||||
}) {
|
||||
const photo = photos[index];
|
||||
const [loaded, setLoaded] = useState(false);
|
||||
const [imgError, setImgError] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
setLoaded(false);
|
||||
setImgError(false);
|
||||
}, [index]);
|
||||
|
||||
const goPrev = useCallback(() => {
|
||||
onNavigate(index > 0 ? index - 1 : photos.length - 1);
|
||||
}, [index, photos.length, onNavigate]);
|
||||
|
||||
const goNext = useCallback(() => {
|
||||
onNavigate(index < photos.length - 1 ? index + 1 : 0);
|
||||
}, [index, photos.length, onNavigate]);
|
||||
|
||||
useEffect(() => {
|
||||
function handleKey(e: globalThis.KeyboardEvent) {
|
||||
if (e.key === "Escape") onClose();
|
||||
else if (e.key === "ArrowLeft") goPrev();
|
||||
else if (e.key === "ArrowRight") goNext();
|
||||
}
|
||||
window.addEventListener("keydown", handleKey);
|
||||
return () => window.removeEventListener("keydown", handleKey);
|
||||
}, [goPrev, goNext, onClose]);
|
||||
|
||||
if (!photo) return null;
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
transition={{ duration: 0.3, ease: "easeOut" }}
|
||||
className="fixed inset-0 z-9999 flex items-center justify-center bg-black/92 backdrop-blur-2xl"
|
||||
onClick={onClose}
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-label="Aircraft photo viewer"
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClose}
|
||||
className="absolute right-3 top-3 z-10 flex h-11 w-11 items-center justify-center rounded-full bg-white/10 text-white/80 backdrop-blur-sm transition-all duration-200 hover:bg-white/20 hover:text-white sm:right-6 sm:top-6 sm:h-12 sm:w-12"
|
||||
aria-label="Close photo viewer"
|
||||
>
|
||||
<X className="h-5 w-5 sm:h-6 sm:w-6" />
|
||||
</button>
|
||||
|
||||
<span className="absolute left-3 top-3 z-10 rounded-full bg-white/10 px-4 py-2 text-sm font-semibold tabular-nums text-white/80 backdrop-blur-sm sm:left-6 sm:top-6 sm:px-5 sm:text-base">
|
||||
{index + 1} / {photos.length}
|
||||
</span>
|
||||
|
||||
<motion.div
|
||||
key={index}
|
||||
initial={{ opacity: 0, scale: 0.97 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
transition={{ duration: 0.25, ease: "easeOut" }}
|
||||
className="relative flex max-h-[85vh] max-w-[94vw] items-center justify-center sm:max-w-[90vw]"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
{!loaded && !imgError && (
|
||||
<div className="flex h-48 w-72 items-center justify-center sm:h-64 sm:w-96">
|
||||
<div className="h-9 w-9 animate-spin rounded-full border-2 border-white/20 border-t-white/60" />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{imgError ? (
|
||||
<div className="flex h-48 w-72 flex-col items-center justify-center gap-3 rounded-2xl border border-white/10 bg-white/5 sm:h-64 sm:w-96">
|
||||
<Camera className="h-8 w-8 text-white/20" />
|
||||
<p className="text-sm text-white/40">Failed to load image</p>
|
||||
</div>
|
||||
) : (
|
||||
<img
|
||||
src={photo.url}
|
||||
alt={`Aircraft photo ${index + 1}${photo.photographer ? ` by ${photo.photographer}` : ""}`}
|
||||
onLoad={() => setLoaded(true)}
|
||||
onError={() => setImgError(true)}
|
||||
className={`max-h-[85vh] max-w-[94vw] rounded-xl object-contain shadow-2xl transition-opacity duration-300 sm:max-w-[90vw] ${loaded ? "opacity-100" : "opacity-0"}`}
|
||||
draggable={false}
|
||||
/>
|
||||
)}
|
||||
</motion.div>
|
||||
|
||||
{photos.length > 1 && (
|
||||
<>
|
||||
<button
|
||||
type="button"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
goPrev();
|
||||
}}
|
||||
className="absolute left-2 top-1/2 z-10 flex h-12 w-12 -translate-y-1/2 items-center justify-center rounded-full bg-white/10 text-white/80 backdrop-blur-sm transition-all duration-200 hover:bg-white/25 hover:text-white sm:left-6 sm:h-14 sm:w-14"
|
||||
aria-label="Previous photo"
|
||||
>
|
||||
<ChevronLeft className="h-6 w-6 sm:h-7 sm:w-7" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
goNext();
|
||||
}}
|
||||
className="absolute right-2 top-1/2 z-10 flex h-12 w-12 -translate-y-1/2 items-center justify-center rounded-full bg-white/10 text-white/80 backdrop-blur-sm transition-all duration-200 hover:bg-white/25 hover:text-white sm:right-6 sm:h-14 sm:w-14"
|
||||
aria-label="Next photo"
|
||||
>
|
||||
<ChevronRight className="h-6 w-6 sm:h-7 sm:w-7" />
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
|
||||
{(photo.photographer || photo.location || photo.dateTaken) && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 8 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.3, delay: 0.15 }}
|
||||
className="absolute bottom-3 left-1/2 z-10 w-[92vw] max-w-lg -translate-x-1/2 sm:bottom-8"
|
||||
>
|
||||
<span className="flex flex-wrap items-center justify-center gap-x-3 gap-y-1 rounded-xl bg-black/60 px-5 py-3 text-sm text-white/70 backdrop-blur-sm sm:text-base">
|
||||
{photo.photographer && (
|
||||
<span className="font-medium text-white/85">
|
||||
{photo.photographer}
|
||||
</span>
|
||||
)}
|
||||
{photo.photographer && photo.location && (
|
||||
<span className="text-white/25">|</span>
|
||||
)}
|
||||
{photo.location && (
|
||||
<span className="text-white/55">{photo.location}</span>
|
||||
)}
|
||||
{(photo.photographer || photo.location) && photo.dateTaken && (
|
||||
<span className="text-white/25">|</span>
|
||||
)}
|
||||
{photo.dateTaken && (
|
||||
<span className="text-white/45">{photo.dateTaken}</span>
|
||||
)}
|
||||
</span>
|
||||
</motion.div>
|
||||
)}
|
||||
</motion.div>
|
||||
);
|
||||
}
|
||||
|
||||
type AircraftPhotosProps = {
|
||||
photos: NormalizedPhoto[];
|
||||
loading: boolean;
|
||||
aircraft: AircraftDetails | null;
|
||||
error: boolean;
|
||||
onPhotoClick?: (index: number) => void;
|
||||
defaultExpanded?: boolean;
|
||||
hideEmptyState?: boolean;
|
||||
};
|
||||
|
||||
export function AircraftPhotos({
|
||||
photos,
|
||||
loading,
|
||||
aircraft,
|
||||
error,
|
||||
onPhotoClick,
|
||||
defaultExpanded = false,
|
||||
hideEmptyState = false,
|
||||
}: AircraftPhotosProps) {
|
||||
const [expanded, setExpanded] = useState(defaultExpanded);
|
||||
const [lightboxIndex, setLightboxIndex] = useState<number | null>(null);
|
||||
const scrollRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
const handlePhotoClick = useCallback(
|
||||
(index: number) => {
|
||||
if (onPhotoClick) {
|
||||
onPhotoClick(index);
|
||||
} else {
|
||||
setLightboxIndex(index);
|
||||
}
|
||||
},
|
||||
[onPhotoClick],
|
||||
);
|
||||
|
||||
const closeLightbox = useCallback(() => {
|
||||
setLightboxIndex(null);
|
||||
}, []);
|
||||
|
||||
const hasPhotos = photos.length > 0;
|
||||
const hasAircraft = aircraft !== null;
|
||||
const showSection = hideEmptyState
|
||||
? loading || hasPhotos
|
||||
: loading || hasPhotos || hasAircraft;
|
||||
|
||||
if (!showSection) return null;
|
||||
|
||||
const detailParts: string[] = [];
|
||||
if (aircraft?.manufacturer) detailParts.push(aircraft.manufacturer);
|
||||
if (aircraft?.type) detailParts.push(aircraft.type);
|
||||
if (aircraft?.airline && !detailParts.includes(aircraft.airline)) {
|
||||
detailParts.push(aircraft.airline);
|
||||
}
|
||||
const detailLine = detailParts.join(" · ");
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="mt-3">
|
||||
<div className="h-px bg-linear-to-r from-transparent via-white/6 to-transparent" />
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setExpanded((v) => !v)}
|
||||
className="mt-2.5 flex w-full items-center gap-1.5 text-left"
|
||||
aria-expanded={expanded}
|
||||
aria-controls="aircraft-photo-strip"
|
||||
>
|
||||
<Camera className="h-3 w-3 text-white/25" />
|
||||
<span className="text-[10px] font-medium tracking-wider text-white/30 uppercase">
|
||||
{loading ? "Loading…" : hasPhotos ? "Photos" : "Aircraft"}
|
||||
</span>
|
||||
{hasPhotos && (
|
||||
<span className="text-[10px] tabular-nums text-white/20">
|
||||
({photos.length})
|
||||
</span>
|
||||
)}
|
||||
{aircraft?.registration && (
|
||||
<span className="ml-auto text-[10px] font-mono tracking-wider text-white/20">
|
||||
{aircraft.registration}
|
||||
</span>
|
||||
)}
|
||||
<ChevronRight
|
||||
className={`h-2.5 w-2.5 text-white/20 transition-transform duration-200 ${expanded ? "rotate-90" : ""}`}
|
||||
/>
|
||||
</button>
|
||||
|
||||
<AnimatePresence initial={false}>
|
||||
{expanded && (
|
||||
<motion.div
|
||||
id="aircraft-photo-strip"
|
||||
initial={{ height: 0, opacity: 0 }}
|
||||
animate={{ height: "auto", opacity: 1 }}
|
||||
exit={{ height: 0, opacity: 0 }}
|
||||
transition={{ duration: 0.2, ease: "easeInOut" }}
|
||||
className="overflow-hidden"
|
||||
>
|
||||
{loading && (
|
||||
<div className="mt-2 flex gap-2 overflow-hidden">
|
||||
{[0, 1, 2].map((i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="h-16 w-24 shrink-0 animate-pulse rounded-lg bg-white/5"
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!loading && hasPhotos && (
|
||||
<div
|
||||
ref={scrollRef}
|
||||
className="mt-2 flex gap-2 overflow-x-auto pb-1 scrollbar-none"
|
||||
style={{ scrollbarWidth: "none" }}
|
||||
>
|
||||
{photos.map((photo, i) => (
|
||||
<Thumbnail
|
||||
key={photo.id}
|
||||
photo={photo}
|
||||
index={i}
|
||||
onClick={handlePhotoClick}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!loading && !hasPhotos && hasAircraft && (
|
||||
<div className="mt-2 flex items-center gap-2 rounded-lg border border-white/6 bg-white/2 px-3 py-2.5">
|
||||
<Plane className="h-3.5 w-3.5 shrink-0 text-white/20" />
|
||||
<div className="min-w-0 flex-1">
|
||||
{detailLine && (
|
||||
<p className="truncate text-[11px] font-medium text-white/45">
|
||||
{detailLine}
|
||||
</p>
|
||||
)}
|
||||
<p className="mt-0.5 flex items-center gap-1 text-[10px] text-white/25">
|
||||
<ImageOff className="h-2.5 w-2.5" />
|
||||
No photos available
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!loading && !hasPhotos && !hasAircraft && error && (
|
||||
<div className="mt-2 flex items-center gap-2 px-1 py-1.5">
|
||||
<ImageOff className="h-3 w-3 text-white/15" />
|
||||
<p className="text-[10px] text-white/25">
|
||||
Could not load aircraft data
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
|
||||
{!onPhotoClick &&
|
||||
typeof document !== "undefined" &&
|
||||
createPortal(
|
||||
<AnimatePresence>
|
||||
{lightboxIndex !== null && (
|
||||
<Lightbox
|
||||
photos={photos}
|
||||
index={lightboxIndex}
|
||||
onClose={closeLightbox}
|
||||
onNavigate={setLightboxIndex}
|
||||
/>
|
||||
)}
|
||||
</AnimatePresence>,
|
||||
document.body,
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
768
src/components/ui/control-panel-search.tsx
Normal file
768
src/components/ui/control-panel-search.tsx
Normal file
@ -0,0 +1,768 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useMemo, useCallback, useRef, useEffect } from "react";
|
||||
import { Command } from "cmdk";
|
||||
import {
|
||||
Search,
|
||||
X,
|
||||
MapPin,
|
||||
Plane,
|
||||
Eye,
|
||||
Loader2,
|
||||
Clock,
|
||||
Trash2,
|
||||
Gauge,
|
||||
ArrowUpRight,
|
||||
Globe2,
|
||||
} from "lucide-react";
|
||||
import { CITIES, type City } from "@/lib/cities";
|
||||
import { searchAirports, airportToCity } from "@/lib/airports";
|
||||
import type { FlightState } from "@/lib/opensky";
|
||||
import {
|
||||
formatCallsign,
|
||||
altitudeToColor,
|
||||
metersToFeet,
|
||||
msToKnots,
|
||||
headingToCardinal,
|
||||
} from "@/lib/flight-utils";
|
||||
|
||||
// ── Recent searches (localStorage) ─────────────────────────────────────
|
||||
|
||||
const RECENT_KEY = "aeris:recent-searches";
|
||||
const RECENT_MAX = 4;
|
||||
const RECENT_EXPIRY_MS = 7 * 24 * 60 * 60 * 1000; // 7 days
|
||||
|
||||
type RecentEntry = { q: string; ts: number };
|
||||
|
||||
function getRecents(): string[] {
|
||||
try {
|
||||
const raw = localStorage.getItem(RECENT_KEY);
|
||||
if (!raw) return [];
|
||||
const parsed: unknown = JSON.parse(raw);
|
||||
if (!Array.isArray(parsed)) return [];
|
||||
const now = Date.now();
|
||||
const valid = parsed
|
||||
.filter(
|
||||
(e): e is RecentEntry =>
|
||||
typeof e === "object" &&
|
||||
e !== null &&
|
||||
typeof e.q === "string" &&
|
||||
typeof e.ts === "number" &&
|
||||
now - e.ts < RECENT_EXPIRY_MS,
|
||||
)
|
||||
.slice(0, RECENT_MAX);
|
||||
if (valid.length !== parsed.length) {
|
||||
localStorage.setItem(RECENT_KEY, JSON.stringify(valid));
|
||||
}
|
||||
return valid.map((e) => e.q);
|
||||
} catch {
|
||||
return [];
|
||||
}
|
||||
}
|
||||
|
||||
function addRecent(query: string) {
|
||||
const q = query.trim();
|
||||
if (!q || q.length > 100) return;
|
||||
try {
|
||||
const raw = localStorage.getItem(RECENT_KEY);
|
||||
const prev: RecentEntry[] = raw ? (JSON.parse(raw) ?? []) : [];
|
||||
const filtered = (Array.isArray(prev) ? prev : []).filter(
|
||||
(e): e is RecentEntry =>
|
||||
typeof e === "object" &&
|
||||
e !== null &&
|
||||
typeof e.q === "string" &&
|
||||
e.q.toLowerCase() !== q.toLowerCase(),
|
||||
);
|
||||
const next = [{ q, ts: Date.now() }, ...filtered].slice(0, RECENT_MAX);
|
||||
localStorage.setItem(RECENT_KEY, JSON.stringify(next));
|
||||
} catch {
|
||||
/* quota exceeded — ignore */
|
||||
}
|
||||
}
|
||||
|
||||
function removeRecent(query: string) {
|
||||
try {
|
||||
const raw = localStorage.getItem(RECENT_KEY);
|
||||
const prev: RecentEntry[] = raw ? (JSON.parse(raw) ?? []) : [];
|
||||
const next = (Array.isArray(prev) ? prev : []).filter(
|
||||
(e): e is RecentEntry =>
|
||||
typeof e === "object" &&
|
||||
e !== null &&
|
||||
typeof e.q === "string" &&
|
||||
e.q.toLowerCase() !== query.toLowerCase(),
|
||||
);
|
||||
localStorage.setItem(RECENT_KEY, JSON.stringify(next));
|
||||
} catch {
|
||||
/* ignore */
|
||||
}
|
||||
}
|
||||
|
||||
function clearRecents() {
|
||||
try {
|
||||
localStorage.removeItem(RECENT_KEY);
|
||||
} catch {
|
||||
/* ignore */
|
||||
}
|
||||
}
|
||||
|
||||
// ── Highlight matched text safely ──────────────────────────────────────
|
||||
|
||||
function HighlightMatch({ text, query }: { text: string; query: string }) {
|
||||
if (!query) return <>{text}</>;
|
||||
const q = query.trim().toLowerCase();
|
||||
if (!q) return <>{text}</>;
|
||||
|
||||
const idx = text.toLowerCase().indexOf(q);
|
||||
if (idx === -1) return <>{text}</>;
|
||||
|
||||
return (
|
||||
<>
|
||||
{text.slice(0, idx)}
|
||||
<span className="text-white/95 font-semibold">
|
||||
{text.slice(idx, idx + q.length)}
|
||||
</span>
|
||||
{text.slice(idx + q.length)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
// ── Altitude color dot ─────────────────────────────────────────────────
|
||||
|
||||
function AltitudeDot({ altitude }: { altitude: number | null }) {
|
||||
const [r, g, b] = altitudeToColor(altitude);
|
||||
return (
|
||||
<span
|
||||
className="inline-block h-2 w-2 rounded-full shrink-0"
|
||||
style={{ backgroundColor: `rgb(${r},${g},${b})` }}
|
||||
aria-label={
|
||||
altitude != null
|
||||
? `Altitude: ${Math.round(altitude)}m`
|
||||
: "Unknown altitude"
|
||||
}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
// ── Country code to flag emoji ─────────────────────────────────────────
|
||||
|
||||
function countryFlag(countryName: string): string {
|
||||
const COUNTRY_ISO: Record<string, string> = {
|
||||
"united states": "US",
|
||||
usa: "US",
|
||||
us: "US",
|
||||
"united kingdom": "GB",
|
||||
uk: "GB",
|
||||
gb: "GB",
|
||||
germany: "DE",
|
||||
france: "FR",
|
||||
spain: "ES",
|
||||
italy: "IT",
|
||||
canada: "CA",
|
||||
australia: "AU",
|
||||
japan: "JP",
|
||||
china: "CN",
|
||||
india: "IN",
|
||||
brazil: "BR",
|
||||
russia: "RU",
|
||||
mexico: "MX",
|
||||
"south korea": "KR",
|
||||
netherlands: "NL",
|
||||
switzerland: "CH",
|
||||
sweden: "SE",
|
||||
norway: "NO",
|
||||
denmark: "DK",
|
||||
ireland: "IE",
|
||||
portugal: "PT",
|
||||
austria: "AT",
|
||||
belgium: "BE",
|
||||
turkey: "TR",
|
||||
thailand: "TH",
|
||||
singapore: "SG",
|
||||
malaysia: "MY",
|
||||
indonesia: "ID",
|
||||
philippines: "PH",
|
||||
"united arab emirates": "AE",
|
||||
"saudi arabia": "SA",
|
||||
qatar: "QA",
|
||||
israel: "IL",
|
||||
"south africa": "ZA",
|
||||
egypt: "EG",
|
||||
"new zealand": "NZ",
|
||||
argentina: "AR",
|
||||
chile: "CL",
|
||||
colombia: "CO",
|
||||
peru: "PE",
|
||||
poland: "PL",
|
||||
czechia: "CZ",
|
||||
"czech republic": "CZ",
|
||||
romania: "RO",
|
||||
greece: "GR",
|
||||
finland: "FI",
|
||||
vietnam: "VN",
|
||||
taiwan: "TW",
|
||||
"hong kong": "HK",
|
||||
pakistan: "PK",
|
||||
bangladesh: "BD",
|
||||
ukraine: "UA",
|
||||
hungary: "HU",
|
||||
morocco: "MA",
|
||||
nigeria: "NG",
|
||||
kenya: "KE",
|
||||
iceland: "IS",
|
||||
luxembourg: "LU",
|
||||
croatia: "HR",
|
||||
serbia: "RS",
|
||||
bulgaria: "BG",
|
||||
slovakia: "SK",
|
||||
slovenia: "SI",
|
||||
estonia: "EE",
|
||||
latvia: "LV",
|
||||
lithuania: "LT",
|
||||
malta: "MT",
|
||||
cyprus: "CY",
|
||||
};
|
||||
|
||||
const key = countryName.trim().toLowerCase();
|
||||
const iso = COUNTRY_ISO[key];
|
||||
if (!iso) return "";
|
||||
|
||||
// Convert ISO code to flag emoji using regional indicator symbols
|
||||
return String.fromCodePoint(
|
||||
...iso.split("").map((c) => 0x1f1e6 + c.charCodeAt(0) - 65),
|
||||
);
|
||||
}
|
||||
|
||||
// ── Main SearchContent ─────────────────────────────────────────────────
|
||||
|
||||
export function SearchContent({
|
||||
activeCity,
|
||||
onSelect,
|
||||
flights,
|
||||
activeFlightIcao24,
|
||||
onLookupFlight,
|
||||
}: {
|
||||
activeCity: City;
|
||||
onSelect: (city: City) => void;
|
||||
flights: FlightState[];
|
||||
activeFlightIcao24: string | null;
|
||||
onLookupFlight: (query: string, enterFpv?: boolean) => Promise<boolean>;
|
||||
}) {
|
||||
const [query, setQuery] = useState("");
|
||||
const [lookupBusy, setLookupBusy] = useState(false);
|
||||
const [lookupError, setLookupError] = useState<string | null>(null);
|
||||
const [recents, setRecents] = useState<string[]>([]);
|
||||
const inputRef = useRef<HTMLInputElement>(null);
|
||||
const listRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
// Load recents on mount
|
||||
useEffect(() => {
|
||||
setRecents(getRecents());
|
||||
}, []);
|
||||
|
||||
// Auto-focus with a frame delay for dialog mounting
|
||||
useEffect(() => {
|
||||
requestAnimationFrame(() => inputRef.current?.focus());
|
||||
}, []);
|
||||
|
||||
// Live search results
|
||||
const { featured, airports } = useMemo(() => {
|
||||
const q = query.trim().toLowerCase();
|
||||
if (!q)
|
||||
return {
|
||||
featured: CITIES,
|
||||
airports: [] as ReturnType<typeof searchAirports>,
|
||||
};
|
||||
|
||||
const featured = CITIES.filter(
|
||||
(c) =>
|
||||
c.name.toLowerCase().includes(q) ||
|
||||
c.iata.toLowerCase().includes(q) ||
|
||||
c.country.toLowerCase().includes(q),
|
||||
);
|
||||
|
||||
const featuredIatas = new Set(CITIES.map((c) => c.iata));
|
||||
const airports = searchAirports(q).filter(
|
||||
(a) => !featuredIatas.has(a.iata),
|
||||
);
|
||||
return { featured, airports };
|
||||
}, [query]);
|
||||
|
||||
const compactQuery = query.trim().toLowerCase().replace(/\s+/g, "");
|
||||
const isIcao24Query = /^[0-9a-f]{6}$/.test(compactQuery);
|
||||
|
||||
const flightMatches = useMemo(() => {
|
||||
if (!compactQuery) return [] as FlightState[];
|
||||
return flights
|
||||
.filter((flight) => {
|
||||
const icao = flight.icao24.toLowerCase();
|
||||
const callsign = (flight.callsign ?? "")
|
||||
.trim()
|
||||
.toLowerCase()
|
||||
.replace(/\s+/g, "");
|
||||
return icao.includes(compactQuery) || callsign.includes(compactQuery);
|
||||
})
|
||||
.slice(0, 15);
|
||||
}, [flights, compactQuery]);
|
||||
|
||||
const hasResults =
|
||||
featured.length > 0 || airports.length > 0 || flightMatches.length > 0;
|
||||
const showRecents = !query && recents.length > 0;
|
||||
|
||||
// Total result count for screen reader
|
||||
const totalResults = flightMatches.length + featured.length + airports.length;
|
||||
|
||||
// ── Actions ────────────────────────────────────────────────────────
|
||||
|
||||
const runLookup = useCallback(
|
||||
async (enterFpv = false) => {
|
||||
if (!query.trim() || lookupBusy) return;
|
||||
setLookupBusy(true);
|
||||
setLookupError(null);
|
||||
addRecent(query.trim());
|
||||
setRecents(getRecents());
|
||||
try {
|
||||
const found = await onLookupFlight(query, enterFpv);
|
||||
if (!found) {
|
||||
setLookupError(
|
||||
isIcao24Query
|
||||
? "Flight not found for this ICAO24 right now"
|
||||
: 'No live flight match found — try a callsign like "UAL123" or ICAO24 hex',
|
||||
);
|
||||
}
|
||||
} finally {
|
||||
setLookupBusy(false);
|
||||
}
|
||||
},
|
||||
[query, lookupBusy, onLookupFlight, isIcao24Query],
|
||||
);
|
||||
|
||||
const openFlight = useCallback(
|
||||
async (icao24: string, enterFpv = false) => {
|
||||
if (lookupBusy) return;
|
||||
setLookupBusy(true);
|
||||
setLookupError(null);
|
||||
addRecent(icao24.toUpperCase());
|
||||
setRecents(getRecents());
|
||||
try {
|
||||
const found = await onLookupFlight(icao24, enterFpv);
|
||||
if (!found) setLookupError("Unable to open the selected flight");
|
||||
} finally {
|
||||
setLookupBusy(false);
|
||||
}
|
||||
},
|
||||
[lookupBusy, onLookupFlight],
|
||||
);
|
||||
|
||||
const handleRemoveRecent = useCallback((q: string) => {
|
||||
removeRecent(q);
|
||||
setRecents(getRecents());
|
||||
}, []);
|
||||
|
||||
const handleClearRecents = useCallback(() => {
|
||||
clearRecents();
|
||||
setRecents([]);
|
||||
}, []);
|
||||
|
||||
// ── Custom cmdk filter ─────────────────────────────────────────────
|
||||
|
||||
const cmdkFilter = useCallback(
|
||||
(value: string, search: string, keywords?: string[]) => {
|
||||
if (!search) return 1;
|
||||
const s = search.toLowerCase().replace(/\s+/g, "");
|
||||
const v = value.toLowerCase();
|
||||
const kw = keywords ? keywords.join(" ").toLowerCase() : "";
|
||||
const combined = `${v} ${kw}`;
|
||||
|
||||
if (v === s) return 1;
|
||||
if (v.startsWith(s)) return 0.95;
|
||||
if (kw && kw.startsWith(s)) return 0.9;
|
||||
const words = combined.split(/[\s·,]+/);
|
||||
for (const w of words) {
|
||||
if (w.startsWith(s)) return 0.8;
|
||||
}
|
||||
if (combined.includes(s)) return 0.6;
|
||||
return 0;
|
||||
},
|
||||
[],
|
||||
);
|
||||
|
||||
return (
|
||||
<Command
|
||||
className="flex h-full flex-col aeris-cmdk"
|
||||
filter={cmdkFilter}
|
||||
loop
|
||||
label="Search airports, flights, and cities"
|
||||
>
|
||||
{/* ── Search input ──────────────────────────────────────────── */}
|
||||
<div className="flex items-center gap-2.5 border-b border-white/6 mx-3 sm:mx-5 pb-3">
|
||||
<Search className="h-3.5 w-3.5 shrink-0 text-white/25" />
|
||||
<Command.Input
|
||||
ref={inputRef}
|
||||
value={query}
|
||||
onValueChange={(v) => {
|
||||
setQuery(v);
|
||||
setLookupError(null);
|
||||
}}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter" && (e.ctrlKey || e.metaKey)) {
|
||||
e.preventDefault();
|
||||
void runLookup(true);
|
||||
}
|
||||
}}
|
||||
placeholder="Search airports, flights, ICAO24…"
|
||||
aria-label="Search airports, flights, and cities"
|
||||
className="flex-1 bg-transparent text-[14px] font-medium text-white/90 placeholder:text-white/20 outline-none"
|
||||
/>
|
||||
{query && (
|
||||
<button
|
||||
onClick={() => setQuery("")}
|
||||
className="shrink-0 text-white/20 hover:text-white/40 transition-colors"
|
||||
aria-label="Clear search"
|
||||
>
|
||||
<X className="h-3.5 w-3.5" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* ── Error banner ──────────────────────────────────────────── */}
|
||||
{lookupError && (
|
||||
<div className="mx-3 sm:mx-5 mt-2 flex items-start gap-2 rounded-lg border border-amber-500/15 bg-amber-500/5 px-3 py-2">
|
||||
<span className="mt-px text-[11px] font-medium text-amber-300/85 leading-snug">
|
||||
{lookupError}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* ── Result list ───────────────────────────────────────────── */}
|
||||
<Command.List
|
||||
ref={listRef}
|
||||
className="flex-1 overflow-y-auto overflow-x-hidden scrollbar-none p-2"
|
||||
>
|
||||
<Command.Empty className="flex flex-col items-center justify-center py-10 gap-3">
|
||||
<div className="flex h-10 w-10 items-center justify-center rounded-2xl bg-white/4">
|
||||
<Globe2 className="h-5 w-5 text-white/15" />
|
||||
</div>
|
||||
<div className="text-center space-y-1">
|
||||
<p className="text-[13px] font-medium text-white/30">
|
||||
No results found
|
||||
</p>
|
||||
<p className="text-[11px] text-white/15 max-w-55 leading-relaxed">
|
||||
Try an airport code like "JFK", a city name, or a flight
|
||||
callsign like "UAL123"
|
||||
</p>
|
||||
</div>
|
||||
</Command.Empty>
|
||||
|
||||
{/* ── Recent searches ───────────────────────────────────── */}
|
||||
{showRecents && (
|
||||
<Command.Group
|
||||
heading={
|
||||
<div className="flex items-center justify-between">
|
||||
<span>Recent</span>
|
||||
<button
|
||||
onClick={handleClearRecents}
|
||||
className="text-[9px] font-medium text-white/20 hover:text-white/40 transition-colors normal-case tracking-normal"
|
||||
>
|
||||
Clear all
|
||||
</button>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
{recents.map((r) => (
|
||||
<Command.Item
|
||||
key={`recent-${r}`}
|
||||
value={`recent:${r}`}
|
||||
keywords={[r]}
|
||||
onSelect={() => {
|
||||
setQuery(r);
|
||||
inputRef.current?.focus();
|
||||
}}
|
||||
className="search-item"
|
||||
>
|
||||
<div className="flex h-7 w-7 shrink-0 items-center justify-center rounded-lg bg-white/3">
|
||||
<Clock className="h-3 w-3 text-white/25" />
|
||||
</div>
|
||||
<span className="flex-1 truncate text-[13px] font-medium text-white/50">
|
||||
{r}
|
||||
</span>
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
handleRemoveRecent(r);
|
||||
}}
|
||||
className="shrink-0 opacity-0 group-data-[selected=true]/item:opacity-100 text-white/20 hover:text-white/40 transition-all"
|
||||
aria-label={`Remove ${r} from recent searches`}
|
||||
>
|
||||
<Trash2 className="h-3 w-3" />
|
||||
</button>
|
||||
</Command.Item>
|
||||
))}
|
||||
</Command.Group>
|
||||
)}
|
||||
|
||||
{/* ── Worldwide lookup action ───────────────────────────── */}
|
||||
{compactQuery && (
|
||||
<Command.Group heading="Actions">
|
||||
<Command.Item
|
||||
value={`lookup:${query}`}
|
||||
keywords={[query]}
|
||||
onSelect={() => void runLookup(false)}
|
||||
disabled={lookupBusy}
|
||||
className="search-item"
|
||||
>
|
||||
<div className="flex h-7 w-7 shrink-0 items-center justify-center rounded-lg bg-white/4">
|
||||
{lookupBusy ? (
|
||||
<Loader2 className="h-3.5 w-3.5 animate-spin text-white/40" />
|
||||
) : (
|
||||
<Search className="h-3.5 w-3.5 text-white/40" />
|
||||
)}
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="truncate text-[13px] font-medium text-white/70">
|
||||
Search worldwide for "{query.trim()}"
|
||||
</p>
|
||||
<p className="text-[10px] text-white/25">
|
||||
{isIcao24Query
|
||||
? "ICAO24 hex lookup"
|
||||
: "Callsign / flight number lookup"}
|
||||
</p>
|
||||
</div>
|
||||
<kbd className="hidden sm:inline-flex h-5 items-center rounded border border-white/8 bg-white/4 px-1.5 text-[9px] font-semibold text-white/25">
|
||||
↵
|
||||
</kbd>
|
||||
</Command.Item>
|
||||
<Command.Item
|
||||
value={`fpv:${query}`}
|
||||
keywords={[query, "fpv", "first person"]}
|
||||
onSelect={() => void runLookup(true)}
|
||||
disabled={lookupBusy}
|
||||
className="search-item"
|
||||
>
|
||||
<div className="flex h-7 w-7 shrink-0 items-center justify-center rounded-lg bg-sky-500/10 border border-sky-400/15">
|
||||
{lookupBusy ? (
|
||||
<Loader2 className="h-3.5 w-3.5 animate-spin text-sky-300/60" />
|
||||
) : (
|
||||
<Eye className="h-3.5 w-3.5 text-sky-300/70" />
|
||||
)}
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="truncate text-[13px] font-medium text-sky-200/70">
|
||||
Open in FPV mode
|
||||
</p>
|
||||
<p className="text-[10px] text-sky-300/25">
|
||||
Follow camera view
|
||||
</p>
|
||||
</div>
|
||||
<kbd className="hidden sm:inline-flex h-5 items-center gap-0.5 rounded border border-white/8 bg-white/4 px-1.5 text-[9px] font-semibold text-white/25">
|
||||
<span className="text-[8px]">⌘</span>↵
|
||||
</kbd>
|
||||
</Command.Item>
|
||||
</Command.Group>
|
||||
)}
|
||||
|
||||
{/* ── Live flights ──────────────────────────────────────── */}
|
||||
{flightMatches.length > 0 && (
|
||||
<Command.Group heading="Live Flights">
|
||||
{flightMatches.map((flight) => {
|
||||
const cs = formatCallsign(flight.callsign);
|
||||
const flag = countryFlag(flight.originCountry);
|
||||
return (
|
||||
<Command.Item
|
||||
key={flight.icao24}
|
||||
value={`flight:${flight.icao24}:${cs}`}
|
||||
keywords={[flight.icao24, cs, flight.originCountry]}
|
||||
onSelect={() => void openFlight(flight.icao24, false)}
|
||||
className="search-item"
|
||||
>
|
||||
<div className="flex h-7 w-7 shrink-0 items-center justify-center rounded-lg bg-white/4">
|
||||
<Plane className="h-3.5 w-3.5 text-white/40" />
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-1.5">
|
||||
<p className="truncate text-[13px] font-semibold text-white/80">
|
||||
<HighlightMatch text={cs} query={query} />
|
||||
</p>
|
||||
{activeFlightIcao24 === flight.icao24 && (
|
||||
<span className="shrink-0 rounded-full bg-emerald-500/15 border border-emerald-400/20 px-1.5 py-px text-[8px] font-bold uppercase tracking-wider text-emerald-300/80">
|
||||
Active
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex items-center gap-1.5 text-[10px] text-white/25">
|
||||
<span className="font-mono">
|
||||
<HighlightMatch
|
||||
text={flight.icao24.toUpperCase()}
|
||||
query={query}
|
||||
/>
|
||||
</span>
|
||||
<span className="text-white/10">·</span>
|
||||
{flag && <span className="text-[10px]">{flag}</span>}
|
||||
<span>{flight.originCountry}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Flight info chips */}
|
||||
<div className="flex items-center gap-1.5 shrink-0">
|
||||
{flight.baroAltitude != null && (
|
||||
<span className="inline-flex items-center gap-1 rounded-md bg-white/3 px-1.5 py-0.5 text-[9px] font-medium text-white/30">
|
||||
<AltitudeDot altitude={flight.baroAltitude} />
|
||||
{metersToFeet(flight.baroAltitude)}
|
||||
</span>
|
||||
)}
|
||||
{flight.velocity != null && (
|
||||
<span className="inline-flex items-center gap-1 rounded-md bg-white/3 px-1.5 py-0.5 text-[9px] font-medium text-white/30">
|
||||
<Gauge className="h-2.5 w-2.5 text-white/20" />
|
||||
{msToKnots(flight.velocity)}
|
||||
</span>
|
||||
)}
|
||||
{flight.trueTrack != null && (
|
||||
<span className="inline-flex items-center gap-1 rounded-md bg-white/3 px-1.5 py-0.5 text-[9px] font-medium text-white/30">
|
||||
<ArrowUpRight
|
||||
className="h-2.5 w-2.5 text-white/20"
|
||||
style={{
|
||||
transform: `rotate(${flight.trueTrack - 45}deg)`,
|
||||
}}
|
||||
/>
|
||||
{headingToCardinal(flight.trueTrack)}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* FPV button — visible on hover/keyboard-select */}
|
||||
{!flight.onGround && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
void openFlight(flight.icao24, true);
|
||||
}}
|
||||
className="shrink-0 opacity-0 group-data-[selected=true]/item:opacity-100 inline-flex h-6 items-center gap-1 rounded-md border border-sky-400/20 bg-sky-500/10 px-1.5 text-[9px] font-semibold uppercase tracking-wide text-sky-300/80 transition-all hover:bg-sky-500/20"
|
||||
aria-label={`Open ${cs} in FPV`}
|
||||
>
|
||||
<Eye className="h-2.5 w-2.5" />
|
||||
FPV
|
||||
</button>
|
||||
)}
|
||||
</Command.Item>
|
||||
);
|
||||
})}
|
||||
</Command.Group>
|
||||
)}
|
||||
|
||||
{/* ── Featured cities ───────────────────────────────────── */}
|
||||
{featured.length > 0 && (
|
||||
<Command.Group
|
||||
heading={query ? "Featured Cities" : "Popular Airports"}
|
||||
>
|
||||
{featured.map((city) => (
|
||||
<Command.Item
|
||||
key={city.id}
|
||||
value={`city:${city.id}:${city.name}`}
|
||||
keywords={[city.name, city.iata, city.country]}
|
||||
onSelect={() => onSelect(city)}
|
||||
className="search-item"
|
||||
>
|
||||
<div
|
||||
className={`flex h-7 w-7 shrink-0 items-center justify-center rounded-lg ${
|
||||
activeCity?.id === city.id ? "bg-white/8" : "bg-white/4"
|
||||
}`}
|
||||
>
|
||||
<MapPin
|
||||
className={`h-3.5 w-3.5 ${
|
||||
activeCity?.id === city.id
|
||||
? "text-white/60"
|
||||
: "text-white/35"
|
||||
}`}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="truncate text-[13px] font-medium text-white/80">
|
||||
<HighlightMatch text={city.name} query={query} />
|
||||
</p>
|
||||
<p className="text-[10px] font-medium text-white/25">
|
||||
<HighlightMatch text={city.iata} query={query} />
|
||||
<span className="text-white/10"> · </span>
|
||||
{city.country}
|
||||
</p>
|
||||
</div>
|
||||
{activeCity?.id === city.id && (
|
||||
<span className="shrink-0 rounded-full bg-white/6 px-1.5 py-px text-[8px] font-bold uppercase tracking-wider text-white/30">
|
||||
Current
|
||||
</span>
|
||||
)}
|
||||
</Command.Item>
|
||||
))}
|
||||
</Command.Group>
|
||||
)}
|
||||
|
||||
{/* ── Airport results ───────────────────────────────────── */}
|
||||
{airports.length > 0 && (
|
||||
<Command.Group heading="Airports">
|
||||
{airports.map((airport) => (
|
||||
<Command.Item
|
||||
key={airport.iata}
|
||||
value={`airport:${airport.iata}:${airport.name}`}
|
||||
keywords={[
|
||||
airport.iata,
|
||||
airport.city,
|
||||
airport.country,
|
||||
airport.name,
|
||||
]}
|
||||
onSelect={() => onSelect(airportToCity(airport))}
|
||||
className="search-item"
|
||||
>
|
||||
<div
|
||||
className={`flex h-7 w-7 shrink-0 items-center justify-center rounded-lg ${
|
||||
activeCity?.iata === airport.iata
|
||||
? "bg-white/8"
|
||||
: "bg-white/4"
|
||||
}`}
|
||||
>
|
||||
<MapPin
|
||||
className={`h-3.5 w-3.5 ${
|
||||
activeCity?.iata === airport.iata
|
||||
? "text-white/60"
|
||||
: "text-white/35"
|
||||
}`}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="truncate text-[13px] font-medium text-white/80">
|
||||
<HighlightMatch text={airport.name} query={query} />
|
||||
</p>
|
||||
<p className="text-[10px] font-medium text-white/25">
|
||||
<HighlightMatch text={airport.iata} query={query} />
|
||||
<span className="text-white/10"> · </span>
|
||||
<HighlightMatch text={airport.city} query={query} />,{" "}
|
||||
{airport.country}
|
||||
</p>
|
||||
</div>
|
||||
{activeCity?.iata === airport.iata && (
|
||||
<span className="shrink-0 rounded-full bg-white/6 px-1.5 py-px text-[8px] font-bold uppercase tracking-wider text-white/30">
|
||||
Current
|
||||
</span>
|
||||
)}
|
||||
</Command.Item>
|
||||
))}
|
||||
</Command.Group>
|
||||
)}
|
||||
|
||||
{/* ── SR-only result count ──────────────────────────────── */}
|
||||
<div className="sr-only" aria-live="polite" role="status">
|
||||
{query
|
||||
? `${totalResults} result${totalResults !== 1 ? "s" : ""} found`
|
||||
: `${CITIES.length} featured airports`}
|
||||
</div>
|
||||
|
||||
{/* ── Footer hint ───────────────────────────────────────── */}
|
||||
{!query && !showRecents && (
|
||||
<div className="flex items-center justify-center gap-2 py-4">
|
||||
<p className="text-[10px] text-white/12 font-medium">
|
||||
Search 9,000+ airports worldwide
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</Command.List>
|
||||
</Command>
|
||||
);
|
||||
}
|
||||
538
src/components/ui/control-panel-settings.tsx
Normal file
538
src/components/ui/control-panel-settings.tsx
Normal file
@ -0,0 +1,538 @@
|
||||
"use client";
|
||||
|
||||
import type { ReactNode } from "react";
|
||||
import { motion } from "motion/react";
|
||||
import {
|
||||
RotateCw,
|
||||
Route,
|
||||
Layers,
|
||||
Palette,
|
||||
Globe,
|
||||
ArrowLeftRight,
|
||||
} from "lucide-react";
|
||||
import { useSettings, type OrbitDirection } from "@/hooks/use-settings";
|
||||
import { ScrollArea } from "@/components/ui/scroll-area";
|
||||
import { Slider } from "@/components/ui/slider";
|
||||
import { SHORTCUTS } from "@/components/ui/keyboard-shortcuts-help";
|
||||
|
||||
const ORBIT_SPEED_PRESETS = [
|
||||
{ label: "Slow", value: 0.06 },
|
||||
{ label: "Normal", value: 0.15 },
|
||||
{ label: "Fast", value: 0.35 },
|
||||
];
|
||||
|
||||
const ORBIT_SPEED_MIN = 0.02;
|
||||
const ORBIT_SPEED_MAX = 0.5;
|
||||
const ORBIT_SNAP_THRESHOLD = 0.025;
|
||||
const TRAIL_THICKNESS_MIN = 0.5;
|
||||
const TRAIL_THICKNESS_MAX = 8;
|
||||
const TRAIL_DISTANCE_MIN = 12;
|
||||
const TRAIL_DISTANCE_MAX = 100;
|
||||
|
||||
const ORBIT_DIRECTIONS: { label: string; value: OrbitDirection }[] = [
|
||||
{ label: "Clockwise", value: "clockwise" },
|
||||
{ label: "Counter", value: "counter-clockwise" },
|
||||
];
|
||||
|
||||
export function SettingsContent() {
|
||||
const { settings, update, reset } = useSettings();
|
||||
|
||||
return (
|
||||
<ScrollArea className="h-full">
|
||||
<div className="space-y-0.5 p-3 pt-1">
|
||||
<SettingRow
|
||||
icon={<RotateCw className="h-4 w-4" />}
|
||||
title="Auto-orbit"
|
||||
description="Camera slowly rotates around the airport"
|
||||
checked={settings.autoOrbit}
|
||||
onChange={(v) => update("autoOrbit", v)}
|
||||
/>
|
||||
|
||||
{settings.autoOrbit && (
|
||||
<>
|
||||
<OrbitSpeedSlider
|
||||
value={settings.orbitSpeed}
|
||||
onChange={(v) => update("orbitSpeed", v)}
|
||||
/>
|
||||
<SegmentRow
|
||||
icon={<ArrowLeftRight className="h-4 w-4" />}
|
||||
title="Direction"
|
||||
options={ORBIT_DIRECTIONS}
|
||||
value={settings.orbitDirection}
|
||||
onChange={(v) => update("orbitDirection", v)}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
|
||||
<div className="mx-3 my-2 h-px bg-white/4" />
|
||||
|
||||
<SettingRow
|
||||
icon={<Route className="h-4 w-4" />}
|
||||
title="Flight trails"
|
||||
description="Altitude-colored trails behind aircraft"
|
||||
checked={settings.showTrails}
|
||||
onChange={(v) => update("showTrails", v)}
|
||||
/>
|
||||
{settings.showTrails && (
|
||||
<>
|
||||
<TrailThicknessSlider
|
||||
value={settings.trailThickness}
|
||||
onChange={(v) => update("trailThickness", v)}
|
||||
/>
|
||||
<TrailDistanceSlider
|
||||
value={settings.trailDistance}
|
||||
onChange={(v) => update("trailDistance", v)}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
<SettingRow
|
||||
icon={<Layers className="h-4 w-4" />}
|
||||
title="Ground shadows"
|
||||
description="Shadow projections on the map surface"
|
||||
checked={settings.showShadows}
|
||||
onChange={(v) => update("showShadows", v)}
|
||||
/>
|
||||
<SettingRow
|
||||
icon={<Palette className="h-4 w-4" />}
|
||||
title="Altitude colors"
|
||||
description="Color aircraft and trails by altitude"
|
||||
checked={settings.showAltitudeColors}
|
||||
onChange={(v) => update("showAltitudeColors", v)}
|
||||
/>
|
||||
|
||||
<div className="mx-3 my-2 h-px bg-white/4" />
|
||||
|
||||
<SettingRow
|
||||
icon={<Globe className="h-4 w-4" />}
|
||||
title="Globe mode"
|
||||
description="Display earth as a 3D sphere when zoomed out"
|
||||
checked={settings.globeMode}
|
||||
onChange={(v) => update("globeMode", v)}
|
||||
badge="BETA"
|
||||
/>
|
||||
|
||||
<div className="mx-3 my-2 h-px bg-white/4" />
|
||||
|
||||
<div className="px-3 pt-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={reset}
|
||||
className="inline-flex h-8 items-center justify-center rounded-lg px-3 text-[12px] font-medium text-white/65 ring-1 ring-white/10 transition-colors hover:bg-white/5 hover:text-white/85"
|
||||
>
|
||||
Reset to defaults
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="mx-3 my-2 h-px bg-white/4" />
|
||||
</div>
|
||||
</ScrollArea>
|
||||
);
|
||||
}
|
||||
|
||||
export function ShortcutsContent() {
|
||||
return (
|
||||
<ScrollArea className="h-full">
|
||||
<div className="p-3 pt-1">
|
||||
<div className="space-y-1">
|
||||
{SHORTCUTS.map(({ key, description }) => (
|
||||
<div
|
||||
key={key}
|
||||
className="flex items-center justify-between gap-3 rounded-xl px-3 py-2.5 transition-colors hover:bg-white/4"
|
||||
>
|
||||
<span className="text-[13px] font-medium text-white/68">
|
||||
{description}
|
||||
</span>
|
||||
<kbd className="flex h-7 min-w-7 items-center justify-center rounded-md bg-white/6 px-2 font-mono text-[11px] font-semibold text-white/74 ring-1 ring-white/8">
|
||||
{key}
|
||||
</kbd>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</ScrollArea>
|
||||
);
|
||||
}
|
||||
|
||||
function OrbitSpeedSlider({
|
||||
value,
|
||||
onChange,
|
||||
}: {
|
||||
value: number;
|
||||
onChange: (v: number) => void;
|
||||
}) {
|
||||
const activeLabel =
|
||||
ORBIT_SPEED_PRESETS.find(
|
||||
(p) => Math.abs(p.value - value) < ORBIT_SNAP_THRESHOLD,
|
||||
)?.label ?? `${value.toFixed(2)}×`;
|
||||
|
||||
function handleChange(vals: number[]) {
|
||||
let raw = vals[0];
|
||||
for (const preset of ORBIT_SPEED_PRESETS) {
|
||||
if (Math.abs(raw - preset.value) < ORBIT_SNAP_THRESHOLD) {
|
||||
raw = preset.value;
|
||||
break;
|
||||
}
|
||||
}
|
||||
onChange(raw);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex w-full items-center gap-3.5 rounded-xl px-3 py-2.5 text-left">
|
||||
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-white/5 text-white/35 ring-1 ring-white/6">
|
||||
<RotateCw className="h-4 w-4" />
|
||||
</div>
|
||||
<div className="flex flex-1 min-w-0 flex-col gap-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<p className="text-[13px] font-medium text-white/80">Orbit speed</p>
|
||||
<span className="text-[11px] font-semibold text-white/40 tabular-nums">
|
||||
{activeLabel}
|
||||
</span>
|
||||
</div>
|
||||
<div className="relative">
|
||||
<Slider
|
||||
min={ORBIT_SPEED_MIN}
|
||||
max={ORBIT_SPEED_MAX}
|
||||
step={0.01}
|
||||
value={[value]}
|
||||
onValueChange={handleChange}
|
||||
aria-label="Orbit speed"
|
||||
/>
|
||||
<div className="pointer-events-none absolute inset-x-0 top-1/2 -translate-y-1/2 flex justify-between px-0.5">
|
||||
{ORBIT_SPEED_PRESETS.map((preset) => {
|
||||
const pct =
|
||||
((preset.value - ORBIT_SPEED_MIN) /
|
||||
(ORBIT_SPEED_MAX - ORBIT_SPEED_MIN)) *
|
||||
100;
|
||||
const isActive =
|
||||
Math.abs(preset.value - value) < ORBIT_SNAP_THRESHOLD;
|
||||
return (
|
||||
<span
|
||||
key={preset.label}
|
||||
className={`absolute h-1.5 w-1.5 rounded-full -translate-x-1/2 -translate-y-1/2 transition-colors ${
|
||||
isActive ? "bg-white/50" : "bg-white/15"
|
||||
}`}
|
||||
style={{ left: `${pct}%` }}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function TrailThicknessSlider({
|
||||
value,
|
||||
onChange,
|
||||
}: {
|
||||
value: number;
|
||||
onChange: (v: number) => void;
|
||||
}) {
|
||||
return (
|
||||
<div className="flex w-full items-center gap-3.5 rounded-xl px-3 py-2.5 text-left">
|
||||
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-white/5 text-white/35 ring-1 ring-white/6">
|
||||
<Layers className="h-4 w-4" />
|
||||
</div>
|
||||
<div className="flex flex-1 min-w-0 flex-col gap-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<p className="text-[13px] font-medium text-white/80">
|
||||
Trail thickness
|
||||
</p>
|
||||
<span className="text-[11px] font-semibold text-white/40 tabular-nums">
|
||||
{value.toFixed(1)} px
|
||||
</span>
|
||||
</div>
|
||||
<Slider
|
||||
min={TRAIL_THICKNESS_MIN}
|
||||
max={TRAIL_THICKNESS_MAX}
|
||||
step={0.1}
|
||||
value={[value]}
|
||||
onValueChange={(vals) => onChange(vals[0])}
|
||||
aria-label="Trail thickness"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function TrailDistanceSlider({
|
||||
value,
|
||||
onChange,
|
||||
}: {
|
||||
value: number;
|
||||
onChange: (v: number) => void;
|
||||
}) {
|
||||
return (
|
||||
<div className="flex w-full items-center gap-3.5 rounded-xl px-3 py-2.5 text-left">
|
||||
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-white/5 text-white/35 ring-1 ring-white/6">
|
||||
<Route className="h-4 w-4" />
|
||||
</div>
|
||||
<div className="flex flex-1 min-w-0 flex-col gap-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<p className="text-[13px] font-medium text-white/80">
|
||||
Trail distance
|
||||
</p>
|
||||
<span className="text-[11px] font-semibold text-white/40 tabular-nums">
|
||||
{value} pts
|
||||
</span>
|
||||
</div>
|
||||
<Slider
|
||||
min={TRAIL_DISTANCE_MIN}
|
||||
max={TRAIL_DISTANCE_MAX}
|
||||
step={1}
|
||||
value={[value]}
|
||||
onValueChange={(vals) => onChange(vals[0])}
|
||||
aria-label="Trail distance"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function SettingRow({
|
||||
icon,
|
||||
title,
|
||||
description,
|
||||
checked,
|
||||
onChange,
|
||||
badge,
|
||||
}: {
|
||||
icon: ReactNode;
|
||||
title: string;
|
||||
description: string;
|
||||
checked: boolean;
|
||||
onChange: (v: boolean) => void;
|
||||
badge?: string;
|
||||
}) {
|
||||
return (
|
||||
<button
|
||||
role="switch"
|
||||
aria-checked={checked}
|
||||
onClick={() => onChange(!checked)}
|
||||
className="flex w-full items-center gap-3.5 rounded-xl px-3 py-3 text-left transition-colors hover:bg-white/4 active:bg-white/6"
|
||||
>
|
||||
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-white/5 text-white/35 ring-1 ring-white/6">
|
||||
{icon}
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-1.5">
|
||||
<p className="text-[13px] font-medium text-white/80">{title}</p>
|
||||
{badge && (
|
||||
<span className="inline-flex items-center rounded-md bg-indigo-500/15 px-1.5 py-0.5 text-[9px] font-bold tracking-wider text-indigo-300 ring-1 ring-indigo-400/20">
|
||||
{badge}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<p className="mt-0.5 text-[11px] font-medium leading-relaxed text-white/22">
|
||||
{description}
|
||||
</p>
|
||||
</div>
|
||||
<Toggle checked={checked} />
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
function SegmentRow<T extends string | number>({
|
||||
icon,
|
||||
title,
|
||||
options,
|
||||
value,
|
||||
onChange,
|
||||
}: {
|
||||
icon: ReactNode;
|
||||
title: string;
|
||||
options: { label: string; value: T }[];
|
||||
value: T;
|
||||
onChange: (v: T) => void;
|
||||
}) {
|
||||
return (
|
||||
<div className="flex w-full items-center gap-3.5 rounded-xl px-3 py-2.5 text-left">
|
||||
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-white/5 text-white/35 ring-1 ring-white/6">
|
||||
{icon}
|
||||
</div>
|
||||
<p className="flex-1 min-w-0 text-[13px] font-medium text-white/80">
|
||||
{title}
|
||||
</p>
|
||||
<div
|
||||
role="radiogroup"
|
||||
aria-label={title}
|
||||
className="flex shrink-0 rounded-md bg-white/4 p-0.5 ring-1 ring-white/6"
|
||||
>
|
||||
{options.map((opt) => {
|
||||
const isActive = opt.value === value;
|
||||
return (
|
||||
<button
|
||||
key={String(opt.value)}
|
||||
role="radio"
|
||||
aria-checked={isActive}
|
||||
onClick={() => onChange(opt.value)}
|
||||
className={`relative rounded-md px-2 py-1 text-[11px] font-semibold transition-colors ${
|
||||
isActive ? "text-white/90" : "text-white/30 hover:text-white/50"
|
||||
}`}
|
||||
>
|
||||
{isActive && (
|
||||
<motion.div
|
||||
layoutId={`seg-${title}`}
|
||||
className="absolute inset-0 rounded-md bg-white/10"
|
||||
transition={{
|
||||
type: "spring",
|
||||
stiffness: 500,
|
||||
damping: 35,
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
<span className="relative">{opt.label}</span>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function Toggle({ checked }: { checked: boolean }) {
|
||||
return (
|
||||
<div
|
||||
className={`relative h-5 w-9 shrink-0 rounded-full transition-colors duration-200 ${
|
||||
checked ? "bg-white/20" : "bg-white/6"
|
||||
}`}
|
||||
>
|
||||
<motion.div
|
||||
animate={{ x: checked ? 17 : 2 }}
|
||||
transition={{ type: "spring", stiffness: 500, damping: 30 }}
|
||||
className={`absolute top-0.75 h-3.5 w-3.5 rounded-full shadow-sm transition-colors duration-200 ${
|
||||
checked ? "bg-white" : "bg-white/25"
|
||||
}`}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const CHANGELOG = [
|
||||
{
|
||||
date: "Mar 11",
|
||||
title: "Globe mode & aircraft photos",
|
||||
description:
|
||||
"Zoom out to see the entire earth as a 3D sphere with altitude-colored dots for every flight. Trails are now interpolated with centripetal Catmull\u2013Rom splines — a C\u00B9-continuous piecewise cubic that passes through every waypoint without overshooting, using \u03B1\u2009=\u20090.5 parameterization for natural curvature. Dark terrain, aircraft photo banners in flight cards, and a hard dot-to-flight cutover with zero overlap. Globe mode is in beta — find it in Settings.",
|
||||
},
|
||||
{
|
||||
date: "Feb 22",
|
||||
title: "Flight history tracking",
|
||||
description:
|
||||
"Full trail rendering for every tracked flight. Airline logo caching so they actually load.",
|
||||
},
|
||||
{
|
||||
date: "Feb 21",
|
||||
title: "First person view",
|
||||
description:
|
||||
"FPV mode — pick any plane and ride along with a HUD. Also added flight search by callsign.",
|
||||
},
|
||||
{
|
||||
date: "Feb 17",
|
||||
title: "Airline logos & attribution",
|
||||
description:
|
||||
"Proper logos for airlines, and attribution for OSM, OpenSky, CARTO, Esri, and everyone whose data makes this work.",
|
||||
},
|
||||
{
|
||||
date: "Feb 15",
|
||||
title: "9,000+ airports",
|
||||
description:
|
||||
"Went from a handful of cities to every airport we could find. Copilot helped build the dataset. Added keyboard shortcuts and click-to-select.",
|
||||
},
|
||||
{
|
||||
date: "Feb 14",
|
||||
title: "Day one",
|
||||
description:
|
||||
"Basic map, flight cards, trail rendering, orbit camera. Spent most of the day fighting Vercel timeouts and OpenSky IP blocks before realizing the API just supports CORS.",
|
||||
},
|
||||
];
|
||||
|
||||
export function AboutContent() {
|
||||
return (
|
||||
<ScrollArea className="h-full">
|
||||
<div className="flex flex-col gap-5 p-5 pt-3">
|
||||
<h3 className="text-[20px] font-bold tracking-tight text-white/90">
|
||||
Aeris
|
||||
</h3>
|
||||
|
||||
<div className="space-y-3 text-[13px] leading-relaxed text-white/40">
|
||||
<p>
|
||||
Live flight tracking in 3D. The planes you see are real — position
|
||||
data comes from the OpenSky Network, updated every few seconds via
|
||||
ADS-B receivers people run on their roofs worldwide.
|
||||
</p>
|
||||
<p>
|
||||
You can search through 9,000+ airports, jump into first-person view
|
||||
to ride along with any plane, or just leave it on a screen and watch
|
||||
things move. Trails change color with altitude so you can tell
|
||||
who's cruising at 35,000ft and who's on approach.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="h-px w-full bg-white/6" />
|
||||
|
||||
<p className="text-[12px] leading-relaxed text-white/30">
|
||||
Built by{" "}
|
||||
<a
|
||||
href="https://github.com/kewonit"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-white/55 underline decoration-white/15 underline-offset-2 hover:text-white/70 transition-colors"
|
||||
>
|
||||
kewonit
|
||||
</a>
|
||||
. Open to internships —{" "}
|
||||
<a
|
||||
href="mailto:kew@edbn.me"
|
||||
className="text-white/55 underline decoration-white/15 underline-offset-2 hover:text-white/70 transition-colors"
|
||||
>
|
||||
kew@edbn.me
|
||||
</a>
|
||||
</p>
|
||||
<p className="text-[12px] leading-relaxed text-white/30">
|
||||
Source is on{" "}
|
||||
<a
|
||||
href="https://github.com/kewonit/aeris"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-white/55 underline decoration-white/15 underline-offset-2 hover:text-white/70 transition-colors"
|
||||
>
|
||||
GitHub
|
||||
</a>
|
||||
. Got a question or just wanna say hi?{" "}
|
||||
<a
|
||||
href="mailto:aeris@edbn.me"
|
||||
className="text-white/55 underline decoration-white/15 underline-offset-2 hover:text-white/70 transition-colors"
|
||||
>
|
||||
aeris@edbn.me
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</ScrollArea>
|
||||
);
|
||||
}
|
||||
|
||||
export function ChangelogContent() {
|
||||
return (
|
||||
<ScrollArea className="h-full">
|
||||
<div className="flex flex-col gap-4 p-5 pt-3">
|
||||
{CHANGELOG.map((entry) => (
|
||||
<div key={entry.date} className="flex gap-3">
|
||||
<span className="shrink-0 pt-0.5 text-[11px] tabular-nums text-white/20 w-11">
|
||||
{entry.date}
|
||||
</span>
|
||||
<div className="min-w-0">
|
||||
<p className="text-[13px] font-medium text-white/55">
|
||||
{entry.title}
|
||||
</p>
|
||||
<p className="mt-0.5 text-[12px] leading-relaxed text-white/30">
|
||||
{entry.description}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</ScrollArea>
|
||||
);
|
||||
}
|
||||
123
src/components/ui/control-panel-styles.tsx
Normal file
123
src/components/ui/control-panel-styles.tsx
Normal file
@ -0,0 +1,123 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import Image from "next/image";
|
||||
import { motion, AnimatePresence } from "motion/react";
|
||||
import { Check } from "lucide-react";
|
||||
import { MAP_STYLES, type MapStyle } from "@/lib/map-styles";
|
||||
import { ScrollArea } from "@/components/ui/scroll-area";
|
||||
|
||||
export function StyleContent({
|
||||
activeStyle,
|
||||
onSelect,
|
||||
}: {
|
||||
activeStyle: MapStyle;
|
||||
onSelect: (style: MapStyle) => void;
|
||||
}) {
|
||||
return (
|
||||
<ScrollArea className="h-full">
|
||||
<div className="grid grid-cols-2 sm:grid-cols-2 gap-2.5 sm:gap-3 p-4 sm:p-5 pt-2">
|
||||
{MAP_STYLES.map((style, i) => (
|
||||
<StyleTile
|
||||
key={style.id}
|
||||
style={style}
|
||||
isActive={style.id === activeStyle.id}
|
||||
index={i}
|
||||
onSelect={() => onSelect(style)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
<div className="border-t border-white/4 px-5 py-3">
|
||||
<p className="text-[11px] font-medium text-white/12">
|
||||
Satellite © Esri · Terrain © OpenTopoMap / Terrain Tiles · Base maps ©
|
||||
CARTO
|
||||
</p>
|
||||
</div>
|
||||
</ScrollArea>
|
||||
);
|
||||
}
|
||||
|
||||
function StyleTile({
|
||||
style,
|
||||
isActive,
|
||||
index,
|
||||
onSelect,
|
||||
}: {
|
||||
style: MapStyle;
|
||||
isActive: boolean;
|
||||
index: number;
|
||||
onSelect: () => void;
|
||||
}) {
|
||||
const [imgLoaded, setImgLoaded] = useState(false);
|
||||
|
||||
return (
|
||||
<motion.button
|
||||
initial={{ opacity: 0, y: 10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.04 * index, duration: 0.25, ease: "easeOut" }}
|
||||
onClick={onSelect}
|
||||
aria-pressed={isActive}
|
||||
aria-label={`${style.name} map style`}
|
||||
className="group relative flex flex-col gap-2 text-left"
|
||||
>
|
||||
<div
|
||||
className={`relative aspect-16/10 w-full overflow-hidden rounded-xl transition-all duration-200 ${
|
||||
isActive
|
||||
? "ring-2 ring-white/50 ring-offset-2 ring-offset-black/80 shadow-[0_0_20px_rgba(255,255,255,0.06)]"
|
||||
: "ring-1 ring-white/8 group-hover:ring-white/18"
|
||||
}`}
|
||||
>
|
||||
<div
|
||||
className="absolute inset-0"
|
||||
style={{ background: style.preview }}
|
||||
/>
|
||||
<Image
|
||||
src={style.previewUrl}
|
||||
alt={`${style.name} preview`}
|
||||
fill
|
||||
unoptimized
|
||||
onLoad={() => setImgLoaded(true)}
|
||||
onError={() => setImgLoaded(true)}
|
||||
className={`object-cover transition-all duration-500 group-hover:scale-105 ${
|
||||
imgLoaded ? "opacity-100" : "opacity-0"
|
||||
}`}
|
||||
draggable={false}
|
||||
/>
|
||||
<div className="absolute inset-0 rounded-xl shadow-[inset_0_1px_0_rgba(255,255,255,0.06),inset_0_-16px_28px_-10px_rgba(0,0,0,0.4)]" />
|
||||
|
||||
<AnimatePresence>
|
||||
{isActive && (
|
||||
<motion.div
|
||||
initial={{ scale: 0, opacity: 0 }}
|
||||
animate={{ scale: 1, opacity: 1 }}
|
||||
exit={{ scale: 0, opacity: 0 }}
|
||||
transition={{
|
||||
type: "spring",
|
||||
stiffness: 500,
|
||||
damping: 28,
|
||||
}}
|
||||
className="absolute right-1.5 top-1.5 flex h-5 w-5 items-center justify-center rounded-full bg-white shadow-md shadow-black/30"
|
||||
>
|
||||
<Check className="h-3 w-3 text-black" strokeWidth={3} />
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-1.5 px-0.5">
|
||||
<span
|
||||
className={`text-[12px] font-semibold tracking-tight transition-colors ${
|
||||
isActive
|
||||
? "text-white/90"
|
||||
: "text-white/40 group-hover:text-white/60"
|
||||
}`}
|
||||
>
|
||||
{style.name}
|
||||
</span>
|
||||
{style.dark && (
|
||||
<span className="h-0.5 w-0.5 rounded-full bg-white/20" />
|
||||
)}
|
||||
</div>
|
||||
</motion.button>
|
||||
);
|
||||
}
|
||||
@ -1,36 +1,36 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useMemo, useRef, useEffect, type ReactNode } from "react";
|
||||
import Image from "next/image";
|
||||
import { useState, useEffect, useRef, type ReactNode } from "react";
|
||||
import { motion, AnimatePresence } from "motion/react";
|
||||
import {
|
||||
Search,
|
||||
Map as MapIcon,
|
||||
Settings,
|
||||
Keyboard,
|
||||
X,
|
||||
Check,
|
||||
MapPin,
|
||||
ChevronRight,
|
||||
RotateCw,
|
||||
Route,
|
||||
Layers,
|
||||
Palette,
|
||||
ArrowLeftRight,
|
||||
Github,
|
||||
Plane,
|
||||
Eye,
|
||||
Loader2,
|
||||
Info,
|
||||
Clock,
|
||||
} from "lucide-react";
|
||||
import { CITIES, type City } from "@/lib/cities";
|
||||
import { searchAirports, airportToCity } from "@/lib/airports";
|
||||
import { MAP_STYLES, type MapStyle } from "@/lib/map-styles";
|
||||
import { useSettings, type OrbitDirection } from "@/hooks/use-settings";
|
||||
import { ScrollArea } from "@/components/ui/scroll-area";
|
||||
import { Slider } from "@/components/ui/slider";
|
||||
import type { City } from "@/lib/cities";
|
||||
import type { MapStyle } from "@/lib/map-styles";
|
||||
import type { FlightState } from "@/lib/opensky";
|
||||
import { formatCallsign } from "@/lib/flight-utils";
|
||||
import { SearchContent } from "@/components/ui/control-panel-search";
|
||||
import { StyleContent } from "@/components/ui/control-panel-styles";
|
||||
import {
|
||||
SettingsContent,
|
||||
ShortcutsContent,
|
||||
AboutContent,
|
||||
ChangelogContent,
|
||||
} from "@/components/ui/control-panel-settings";
|
||||
|
||||
type TabId = "search" | "style" | "settings";
|
||||
type TabId =
|
||||
| "search"
|
||||
| "style"
|
||||
| "settings"
|
||||
| "shortcuts"
|
||||
| "changelog"
|
||||
| "about";
|
||||
|
||||
const MAIN_TABS: {
|
||||
id: TabId;
|
||||
@ -39,10 +39,15 @@ const MAIN_TABS: {
|
||||
}[] = [
|
||||
{ id: "search", icon: Search, label: "Search" },
|
||||
{ id: "style", icon: MapIcon, label: "Map Style" },
|
||||
{ id: "settings", icon: Settings, label: "Settings" },
|
||||
];
|
||||
|
||||
const PANEL_TABS = MAIN_TABS;
|
||||
const PANEL_TABS = [
|
||||
...MAIN_TABS,
|
||||
{ id: "settings" as TabId, icon: Settings, label: "Settings" },
|
||||
{ id: "shortcuts" as TabId, icon: Keyboard, label: "Shortcuts" },
|
||||
{ id: "changelog" as TabId, icon: Clock, label: "Changelog" },
|
||||
{ id: "about" as TabId, icon: Info, label: "About" },
|
||||
];
|
||||
|
||||
type ControlPanelProps = {
|
||||
activeCity: City;
|
||||
@ -69,9 +74,15 @@ export function ControlPanel({
|
||||
function handleOpenSearch() {
|
||||
setOpenTab("search");
|
||||
}
|
||||
function handleOpenShortcuts() {
|
||||
setOpenTab("shortcuts");
|
||||
}
|
||||
window.addEventListener("aeris:open-search", handleOpenSearch);
|
||||
return () =>
|
||||
window.addEventListener("aeris:open-shortcuts", handleOpenShortcuts);
|
||||
return () => {
|
||||
window.removeEventListener("aeris:open-search", handleOpenSearch);
|
||||
window.removeEventListener("aeris:open-shortcuts", handleOpenShortcuts);
|
||||
};
|
||||
}, []);
|
||||
|
||||
const open = (tab: TabId) => setOpenTab(tab);
|
||||
@ -98,6 +109,22 @@ export function ControlPanel({
|
||||
</motion.button>
|
||||
))}
|
||||
|
||||
<motion.button
|
||||
onClick={() => open("settings")}
|
||||
className="flex h-9 w-9 items-center justify-center rounded-xl backdrop-blur-2xl transition-colors"
|
||||
style={{
|
||||
borderWidth: 1,
|
||||
borderColor: "rgb(var(--ui-fg) / 0.06)",
|
||||
backgroundColor: "rgb(var(--ui-fg) / 0.03)",
|
||||
color: "rgb(var(--ui-fg) / 0.5)",
|
||||
}}
|
||||
whileHover={{ scale: 1.05 }}
|
||||
whileTap={{ scale: 0.95 }}
|
||||
aria-label="Settings"
|
||||
>
|
||||
<Settings className="h-4 w-4" />
|
||||
</motion.button>
|
||||
|
||||
<AnimatePresence>
|
||||
{openTab && (
|
||||
<PanelDialog
|
||||
@ -197,7 +224,7 @@ function PanelDialog({
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
transition={{ duration: 0.2 }}
|
||||
className="fixed inset-0 z-80 bg-black/60 backdrop-blur-xl"
|
||||
className="fixed inset-0 z-80 bg-black/70"
|
||||
onClick={onClose}
|
||||
/>
|
||||
|
||||
@ -217,7 +244,7 @@ function PanelDialog({
|
||||
aria-modal="true"
|
||||
aria-labelledby="panel-dialog-title"
|
||||
>
|
||||
<div className="flex flex-col sm:flex-row overflow-hidden rounded-2xl sm:rounded-3xl border border-white/8 bg-[#0c0c0e]/92 shadow-[0_40px_100px_rgba(0,0,0,0.8),0_0_0_1px_rgba(255,255,255,0.04)_inset] backdrop-blur-3xl backdrop-saturate-[1.8] h-[75vh] sm:h-auto sm:max-h-[85vh]">
|
||||
<div className="flex flex-col sm:flex-row overflow-hidden rounded-2xl sm:rounded-3xl border border-white/8 bg-[#0c0c0e] shadow-[0_40px_100px_rgba(0,0,0,0.8),0_0_0_1px_rgba(255,255,255,0.04)_inset] h-[75vh] sm:h-auto sm:max-h-[85vh]">
|
||||
{/* Desktop sidebar (hidden on mobile) */}
|
||||
<div className="hidden sm:flex w-52 shrink-0 flex-col border-r border-white/6 py-5 px-3">
|
||||
<p className="mb-3 px-2 text-[11px] font-semibold uppercase tracking-widest text-white/20">
|
||||
@ -272,7 +299,7 @@ function PanelDialog({
|
||||
</a>
|
||||
<div className="border-t border-white/3 pt-2 px-2.5">
|
||||
<p className="text-[10px] font-medium text-white/10 tracking-wide">
|
||||
v0.1 · OpenSky Network
|
||||
Powered by OpenSky Network
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@ -337,24 +364,40 @@ function PanelDialog({
|
||||
<SettingsContent />
|
||||
</TabContent>
|
||||
)}
|
||||
{activeTab === "shortcuts" && (
|
||||
<TabContent key="shortcuts">
|
||||
<ShortcutsContent />
|
||||
</TabContent>
|
||||
)}
|
||||
{activeTab === "changelog" && (
|
||||
<TabContent key="changelog">
|
||||
<ChangelogContent />
|
||||
</TabContent>
|
||||
)}
|
||||
{activeTab === "about" && (
|
||||
<TabContent key="about">
|
||||
<AboutContent />
|
||||
</TabContent>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Mobile tab bar */}
|
||||
<div className="flex sm:hidden items-center gap-1 border-t border-white/6 px-3 pt-2 pb-3">
|
||||
<nav className="flex flex-1 gap-1">
|
||||
<div className="flex sm:hidden items-center gap-0.5 border-t border-white/6 px-2 pt-2 pb-3">
|
||||
<nav className="flex flex-1 gap-0.5">
|
||||
{PANEL_TABS.map(({ id, icon: Icon, label }) => {
|
||||
const active = id === activeTab;
|
||||
return (
|
||||
<button
|
||||
key={id}
|
||||
onClick={() => onTabChange(id)}
|
||||
className={`relative flex flex-1 items-center justify-center gap-1.5 rounded-lg px-2 py-2 text-center transition-colors ${
|
||||
className={`relative flex flex-1 items-center justify-center rounded-lg py-2.5 transition-colors ${
|
||||
active
|
||||
? "text-white/90"
|
||||
: "text-white/35 active:bg-white/6"
|
||||
}`}
|
||||
aria-label={label}
|
||||
>
|
||||
{active && (
|
||||
<motion.div
|
||||
@ -367,17 +410,14 @@ function PanelDialog({
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
<Icon className="relative h-3.5 w-3.5 shrink-0" />
|
||||
<span className="relative text-[12px] font-semibold">
|
||||
{label}
|
||||
</span>
|
||||
<Icon className="relative h-4 w-4 shrink-0" />
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</nav>
|
||||
<motion.button
|
||||
onClick={onClose}
|
||||
className="ml-1 flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-white/6 transition-colors active:bg-white/12"
|
||||
className="ml-1 flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-white/6 transition-colors active:bg-white/12"
|
||||
whileTap={{ scale: 0.9 }}
|
||||
aria-label="Close"
|
||||
>
|
||||
@ -403,785 +443,3 @@ function TabContent({ children }: { children: ReactNode }) {
|
||||
</motion.div>
|
||||
);
|
||||
}
|
||||
|
||||
function SearchContent({
|
||||
activeCity,
|
||||
onSelect,
|
||||
flights,
|
||||
activeFlightIcao24,
|
||||
onLookupFlight,
|
||||
}: {
|
||||
activeCity: City;
|
||||
onSelect: (city: City) => void;
|
||||
flights: FlightState[];
|
||||
activeFlightIcao24: string | null;
|
||||
onLookupFlight: (query: string, enterFpv?: boolean) => Promise<boolean>;
|
||||
}) {
|
||||
const [query, setQuery] = useState("");
|
||||
const [lookupBusy, setLookupBusy] = useState(false);
|
||||
const [lookupError, setLookupError] = useState<string | null>(null);
|
||||
const inputRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
requestAnimationFrame(() => inputRef.current?.focus());
|
||||
}, []);
|
||||
|
||||
const { featured, airports } = useMemo(() => {
|
||||
const q = query.trim().toLowerCase();
|
||||
|
||||
if (!q)
|
||||
return {
|
||||
featured: CITIES,
|
||||
airports: [] as ReturnType<typeof searchAirports>,
|
||||
};
|
||||
|
||||
const featured = CITIES.filter(
|
||||
(c) =>
|
||||
c.name.toLowerCase().includes(q) ||
|
||||
c.iata.toLowerCase().includes(q) ||
|
||||
c.country.toLowerCase().includes(q),
|
||||
);
|
||||
|
||||
const featuredIatas = new Set(CITIES.map((c) => c.iata));
|
||||
const airports = searchAirports(q).filter(
|
||||
(a) => !featuredIatas.has(a.iata),
|
||||
);
|
||||
|
||||
return { featured, airports };
|
||||
}, [query]);
|
||||
|
||||
const normalizedQuery = query.trim().toLowerCase();
|
||||
const compactQuery = normalizedQuery.replace(/\s+/g, "");
|
||||
const isIcao24Query = /^[0-9a-f]{6}$/.test(compactQuery);
|
||||
|
||||
const flightMatches = useMemo(() => {
|
||||
if (!compactQuery) return [] as FlightState[];
|
||||
return flights
|
||||
.filter((flight) => {
|
||||
const icao = flight.icao24.toLowerCase();
|
||||
const callsign = (flight.callsign ?? "")
|
||||
.trim()
|
||||
.toLowerCase()
|
||||
.replace(/\s+/g, "");
|
||||
return icao.includes(compactQuery) || callsign.includes(compactQuery);
|
||||
})
|
||||
.slice(0, 12);
|
||||
}, [flights, compactQuery]);
|
||||
|
||||
const hasResults =
|
||||
featured.length > 0 || airports.length > 0 || flightMatches.length > 0;
|
||||
|
||||
async function runLookup(enterFpv = false) {
|
||||
if (!query.trim() || lookupBusy) return;
|
||||
setLookupBusy(true);
|
||||
setLookupError(null);
|
||||
try {
|
||||
const found = await onLookupFlight(query, enterFpv);
|
||||
if (!found) {
|
||||
setLookupError(
|
||||
isIcao24Query
|
||||
? "Flight not found for this ICAO24 right now"
|
||||
: "No live worldwide flight match found (or rate-limited)",
|
||||
);
|
||||
}
|
||||
} finally {
|
||||
setLookupBusy(false);
|
||||
}
|
||||
}
|
||||
|
||||
async function openFlight(icao24: string, enterFpv = false) {
|
||||
if (lookupBusy) return;
|
||||
setLookupBusy(true);
|
||||
setLookupError(null);
|
||||
try {
|
||||
const found = await onLookupFlight(icao24, enterFpv);
|
||||
if (!found) {
|
||||
setLookupError("Unable to open the selected flight");
|
||||
}
|
||||
} finally {
|
||||
setLookupBusy(false);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex h-full flex-col">
|
||||
<div className="flex items-center gap-2.5 border-b border-white/6 mx-5 pb-3">
|
||||
<Search className="h-3.5 w-3.5 shrink-0 text-white/25" />
|
||||
<input
|
||||
ref={inputRef}
|
||||
value={query}
|
||||
onChange={(e) => {
|
||||
setQuery(e.target.value);
|
||||
setLookupError(null);
|
||||
}}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter") {
|
||||
e.preventDefault();
|
||||
void runLookup(false);
|
||||
}
|
||||
}}
|
||||
placeholder="Search airports or flight number (callsign/ICAO24)..."
|
||||
aria-label="Search airports by name, IATA code, city, country, or flight callsign/ICAO24"
|
||||
className="flex-1 bg-transparent text-[14px] font-medium text-white/90 placeholder:text-white/20 outline-none"
|
||||
/>
|
||||
{query && (
|
||||
<button
|
||||
onClick={() => setQuery("")}
|
||||
className="shrink-0 text-white/20 hover:text-white/40 transition-colors"
|
||||
aria-label="Clear search"
|
||||
>
|
||||
<X className="h-3.5 w-3.5" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<ScrollArea className="flex-1">
|
||||
<div className="p-2">
|
||||
{compactQuery && (
|
||||
<div className="px-3 pb-2 space-y-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => void runLookup(false)}
|
||||
disabled={lookupBusy}
|
||||
className="flex w-full items-center justify-center gap-2 rounded-lg border border-white/10 bg-white/4 px-3 py-2 text-[12px] font-medium text-white/75 transition-colors hover:bg-white/7 disabled:cursor-not-allowed disabled:opacity-60"
|
||||
>
|
||||
{lookupBusy ? (
|
||||
<Loader2 className="h-3.5 w-3.5 animate-spin" />
|
||||
) : (
|
||||
<Search className="h-3.5 w-3.5" />
|
||||
)}
|
||||
<span>Open Flight Details</span>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => void runLookup(true)}
|
||||
disabled={lookupBusy}
|
||||
className="flex w-full items-center justify-center gap-2 rounded-lg border border-sky-400/25 bg-sky-500/10 px-3 py-2 text-[12px] font-medium text-sky-300/90 transition-colors hover:bg-sky-500/15 disabled:cursor-not-allowed disabled:opacity-60"
|
||||
>
|
||||
{lookupBusy ? (
|
||||
<Loader2 className="h-3.5 w-3.5 animate-spin" />
|
||||
) : (
|
||||
<Eye className="h-3.5 w-3.5" />
|
||||
)}
|
||||
<span>Open in FPV</span>
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{lookupError && (
|
||||
<p className="px-3 pb-2 text-[11px] font-medium text-amber-300/85">
|
||||
{lookupError}
|
||||
</p>
|
||||
)}
|
||||
|
||||
{flightMatches.length > 0 && (
|
||||
<>
|
||||
<p className="px-3 pt-1 pb-1.5 text-[10px] font-semibold uppercase tracking-widest text-white/15">
|
||||
Flights
|
||||
</p>
|
||||
{flightMatches.map((flight) => (
|
||||
<FlightRow
|
||||
key={flight.icao24}
|
||||
callsign={formatCallsign(flight.callsign)}
|
||||
detail={`${flight.icao24.toUpperCase()} · ${flight.originCountry}`}
|
||||
isActive={activeFlightIcao24 === flight.icao24}
|
||||
onOpen={() => void openFlight(flight.icao24, false)}
|
||||
onFpv={() => void openFlight(flight.icao24, true)}
|
||||
/>
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
|
||||
{!hasResults && (
|
||||
<p className="py-8 text-center text-[12px] text-white/25">
|
||||
No airports or flights found
|
||||
</p>
|
||||
)}
|
||||
|
||||
{featured.length > 0 && (
|
||||
<>
|
||||
{query && (
|
||||
<p className="px-3 pt-2 pb-1.5 text-[10px] font-semibold uppercase tracking-widest text-white/15">
|
||||
Featured
|
||||
</p>
|
||||
)}
|
||||
{featured.map((city) => (
|
||||
<LocationRow
|
||||
key={city.id}
|
||||
name={city.name}
|
||||
detail={`${city.iata} · ${city.country}`}
|
||||
isActive={activeCity?.id === city.id}
|
||||
onClick={() => onSelect(city)}
|
||||
/>
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
|
||||
{airports.length > 0 && (
|
||||
<>
|
||||
<p
|
||||
className={`px-3 pb-1.5 text-[10px] font-semibold uppercase tracking-widest text-white/15 ${
|
||||
featured.length > 0 ? "pt-3" : "pt-2"
|
||||
}`}
|
||||
>
|
||||
Airports
|
||||
</p>
|
||||
{airports.map((airport) => (
|
||||
<LocationRow
|
||||
key={airport.iata}
|
||||
name={airport.name}
|
||||
detail={`${airport.iata} · ${airport.city}, ${airport.country}`}
|
||||
isActive={activeCity?.iata === airport.iata}
|
||||
onClick={() => onSelect(airportToCity(airport))}
|
||||
/>
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
|
||||
{!query && (
|
||||
<p className="px-3 pt-3 pb-1 text-center text-[10px] font-medium text-white/10">
|
||||
Search 9,000+ airports worldwide
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</ScrollArea>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function LocationRow({
|
||||
name,
|
||||
detail,
|
||||
isActive,
|
||||
onClick,
|
||||
}: {
|
||||
name: string;
|
||||
detail: string;
|
||||
isActive: boolean;
|
||||
onClick: () => void;
|
||||
}) {
|
||||
return (
|
||||
<button
|
||||
onClick={onClick}
|
||||
aria-current={isActive ? "true" : undefined}
|
||||
className={`group flex w-full items-center gap-2.5 rounded-xl px-3 py-2.5 text-left transition-colors hover:bg-white/4 ${
|
||||
isActive ? "bg-white/6" : ""
|
||||
}`}
|
||||
>
|
||||
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-white/4">
|
||||
<MapPin className="h-3.5 w-3.5 text-white/40" />
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="truncate text-[14px] font-medium text-white/80">{name}</p>
|
||||
<p className="text-[11px] font-medium text-white/25">{detail}</p>
|
||||
</div>
|
||||
<ChevronRight className="h-3.5 w-3.5 shrink-0 text-white/12 transition-colors group-hover:text-white/25" />
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
function FlightRow({
|
||||
callsign,
|
||||
detail,
|
||||
isActive,
|
||||
onOpen,
|
||||
onFpv,
|
||||
}: {
|
||||
callsign: string;
|
||||
detail: string;
|
||||
isActive: boolean;
|
||||
onOpen: () => void;
|
||||
onFpv: () => void;
|
||||
}) {
|
||||
return (
|
||||
<div
|
||||
className={`group flex items-center gap-2.5 rounded-xl px-3 py-2.5 transition-colors hover:bg-white/4 ${
|
||||
isActive ? "bg-white/6" : ""
|
||||
}`}
|
||||
>
|
||||
<button
|
||||
onClick={onOpen}
|
||||
className="flex min-w-0 flex-1 items-center gap-2.5 text-left"
|
||||
>
|
||||
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-white/4">
|
||||
<Plane className="h-3.5 w-3.5 text-white/40" />
|
||||
</div>
|
||||
<div className="min-w-0 flex-1">
|
||||
<p className="truncate text-[14px] font-medium text-white/80">
|
||||
{callsign}
|
||||
</p>
|
||||
<p className="text-[11px] font-medium text-white/25">{detail}</p>
|
||||
</div>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={onFpv}
|
||||
className="inline-flex h-7 items-center gap-1.5 rounded-lg border border-sky-400/20 bg-sky-500/10 px-2 text-[10px] font-semibold uppercase tracking-wide text-sky-300/90 transition-colors hover:bg-sky-500/20"
|
||||
aria-label="Open flight in FPV"
|
||||
>
|
||||
<Eye className="h-3 w-3" />
|
||||
FPV
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function StyleContent({
|
||||
activeStyle,
|
||||
onSelect,
|
||||
}: {
|
||||
activeStyle: MapStyle;
|
||||
onSelect: (style: MapStyle) => void;
|
||||
}) {
|
||||
return (
|
||||
<ScrollArea className="h-full">
|
||||
<div className="grid grid-cols-2 sm:grid-cols-2 gap-2.5 sm:gap-3 p-4 sm:p-5 pt-2">
|
||||
{MAP_STYLES.map((style, i) => (
|
||||
<StyleTile
|
||||
key={style.id}
|
||||
style={style}
|
||||
isActive={style.id === activeStyle.id}
|
||||
index={i}
|
||||
onSelect={() => onSelect(style)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
<div className="border-t border-white/4 px-5 py-3">
|
||||
<p className="text-[11px] font-medium text-white/12">
|
||||
Satellite © Esri · Terrain © OpenTopoMap · Base maps © CARTO
|
||||
</p>
|
||||
</div>
|
||||
</ScrollArea>
|
||||
);
|
||||
}
|
||||
|
||||
function StyleTile({
|
||||
style,
|
||||
isActive,
|
||||
index,
|
||||
onSelect,
|
||||
}: {
|
||||
style: MapStyle;
|
||||
isActive: boolean;
|
||||
index: number;
|
||||
onSelect: () => void;
|
||||
}) {
|
||||
const [imgLoaded, setImgLoaded] = useState(false);
|
||||
|
||||
return (
|
||||
<motion.button
|
||||
initial={{ opacity: 0, y: 10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.04 * index, duration: 0.25, ease: "easeOut" }}
|
||||
onClick={onSelect}
|
||||
aria-pressed={isActive}
|
||||
aria-label={`${style.name} map style`}
|
||||
className="group relative flex flex-col gap-2 text-left"
|
||||
>
|
||||
<div
|
||||
className={`relative aspect-16/10 w-full overflow-hidden rounded-xl transition-all duration-200 ${
|
||||
isActive
|
||||
? "ring-2 ring-white/50 ring-offset-2 ring-offset-black/80 shadow-[0_0_20px_rgba(255,255,255,0.06)]"
|
||||
: "ring-1 ring-white/8 group-hover:ring-white/18"
|
||||
}`}
|
||||
>
|
||||
<div
|
||||
className="absolute inset-0"
|
||||
style={{ background: style.preview }}
|
||||
/>
|
||||
<Image
|
||||
src={style.previewUrl}
|
||||
alt={`${style.name} preview`}
|
||||
fill
|
||||
unoptimized
|
||||
onLoad={() => setImgLoaded(true)}
|
||||
onError={() => setImgLoaded(true)}
|
||||
className={`object-cover transition-all duration-500 group-hover:scale-105 ${
|
||||
imgLoaded ? "opacity-100" : "opacity-0"
|
||||
}`}
|
||||
draggable={false}
|
||||
/>
|
||||
<div className="absolute inset-0 rounded-xl shadow-[inset_0_1px_0_rgba(255,255,255,0.06),inset_0_-16px_28px_-10px_rgba(0,0,0,0.4)]" />
|
||||
|
||||
<AnimatePresence>
|
||||
{isActive && (
|
||||
<motion.div
|
||||
initial={{ scale: 0, opacity: 0 }}
|
||||
animate={{ scale: 1, opacity: 1 }}
|
||||
exit={{ scale: 0, opacity: 0 }}
|
||||
transition={{
|
||||
type: "spring",
|
||||
stiffness: 500,
|
||||
damping: 28,
|
||||
}}
|
||||
className="absolute right-1.5 top-1.5 flex h-5 w-5 items-center justify-center rounded-full bg-white shadow-md shadow-black/30"
|
||||
>
|
||||
<Check className="h-3 w-3 text-black" strokeWidth={3} />
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-1.5 px-0.5">
|
||||
<span
|
||||
className={`text-[12px] font-semibold tracking-tight transition-colors ${
|
||||
isActive
|
||||
? "text-white/90"
|
||||
: "text-white/40 group-hover:text-white/60"
|
||||
}`}
|
||||
>
|
||||
{style.name}
|
||||
</span>
|
||||
{style.dark && (
|
||||
<span className="h-0.5 w-0.5 rounded-full bg-white/20" />
|
||||
)}
|
||||
</div>
|
||||
</motion.button>
|
||||
);
|
||||
}
|
||||
|
||||
const ORBIT_SPEED_PRESETS = [
|
||||
{ label: "Slow", value: 0.06 },
|
||||
{ label: "Normal", value: 0.15 },
|
||||
{ label: "Fast", value: 0.35 },
|
||||
];
|
||||
|
||||
const ORBIT_SPEED_MIN = 0.02;
|
||||
const ORBIT_SPEED_MAX = 0.5;
|
||||
const ORBIT_SNAP_THRESHOLD = 0.025;
|
||||
const TRAIL_THICKNESS_MIN = 1;
|
||||
const TRAIL_THICKNESS_MAX = 8;
|
||||
const TRAIL_DISTANCE_MIN = 12;
|
||||
const TRAIL_DISTANCE_MAX = 100;
|
||||
|
||||
const ORBIT_DIRECTIONS: { label: string; value: OrbitDirection }[] = [
|
||||
{ label: "Clockwise", value: "clockwise" },
|
||||
{ label: "Counter", value: "counter-clockwise" },
|
||||
];
|
||||
|
||||
function SettingsContent() {
|
||||
const { settings, update, reset } = useSettings();
|
||||
|
||||
return (
|
||||
<ScrollArea className="h-full">
|
||||
<div className="space-y-0.5 p-3 pt-1">
|
||||
<SettingRow
|
||||
icon={<RotateCw className="h-4 w-4" />}
|
||||
title="Auto-orbit"
|
||||
description="Camera slowly rotates around the airport"
|
||||
checked={settings.autoOrbit}
|
||||
onChange={(v) => update("autoOrbit", v)}
|
||||
/>
|
||||
|
||||
{settings.autoOrbit && (
|
||||
<>
|
||||
<OrbitSpeedSlider
|
||||
value={settings.orbitSpeed}
|
||||
onChange={(v) => update("orbitSpeed", v)}
|
||||
/>
|
||||
<SegmentRow
|
||||
icon={<ArrowLeftRight className="h-4 w-4" />}
|
||||
title="Direction"
|
||||
options={ORBIT_DIRECTIONS}
|
||||
value={settings.orbitDirection}
|
||||
onChange={(v) => update("orbitDirection", v)}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
|
||||
<div className="mx-3 my-2 h-px bg-white/4" />
|
||||
|
||||
<SettingRow
|
||||
icon={<Route className="h-4 w-4" />}
|
||||
title="Flight trails"
|
||||
description="Altitude-colored trails behind aircraft"
|
||||
checked={settings.showTrails}
|
||||
onChange={(v) => update("showTrails", v)}
|
||||
/>
|
||||
{settings.showTrails && (
|
||||
<>
|
||||
<TrailThicknessSlider
|
||||
value={settings.trailThickness}
|
||||
onChange={(v) => update("trailThickness", v)}
|
||||
/>
|
||||
<TrailDistanceSlider
|
||||
value={settings.trailDistance}
|
||||
onChange={(v) => update("trailDistance", v)}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
<SettingRow
|
||||
icon={<Layers className="h-4 w-4" />}
|
||||
title="Ground shadows"
|
||||
description="Shadow projections on the map surface"
|
||||
checked={settings.showShadows}
|
||||
onChange={(v) => update("showShadows", v)}
|
||||
/>
|
||||
<SettingRow
|
||||
icon={<Palette className="h-4 w-4" />}
|
||||
title="Altitude colors"
|
||||
description="Color aircraft and trails by altitude"
|
||||
checked={settings.showAltitudeColors}
|
||||
onChange={(v) => update("showAltitudeColors", v)}
|
||||
/>
|
||||
|
||||
<div className="px-3 pt-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={reset}
|
||||
className="inline-flex h-8 items-center justify-center rounded-lg px-3 text-[12px] font-medium text-white/65 ring-1 ring-white/10 transition-colors hover:bg-white/5 hover:text-white/85"
|
||||
>
|
||||
Reset to defaults
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</ScrollArea>
|
||||
);
|
||||
}
|
||||
|
||||
function OrbitSpeedSlider({
|
||||
value,
|
||||
onChange,
|
||||
}: {
|
||||
value: number;
|
||||
onChange: (v: number) => void;
|
||||
}) {
|
||||
const activeLabel =
|
||||
ORBIT_SPEED_PRESETS.find(
|
||||
(p) => Math.abs(p.value - value) < ORBIT_SNAP_THRESHOLD,
|
||||
)?.label ?? `${value.toFixed(2)}×`;
|
||||
|
||||
function handleChange(vals: number[]) {
|
||||
let raw = vals[0];
|
||||
for (const preset of ORBIT_SPEED_PRESETS) {
|
||||
if (Math.abs(raw - preset.value) < ORBIT_SNAP_THRESHOLD) {
|
||||
raw = preset.value;
|
||||
break;
|
||||
}
|
||||
}
|
||||
onChange(raw);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex w-full items-center gap-3.5 rounded-xl px-3 py-2.5 text-left">
|
||||
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-white/5 text-white/35 ring-1 ring-white/6">
|
||||
<RotateCw className="h-4 w-4" />
|
||||
</div>
|
||||
<div className="flex flex-1 min-w-0 flex-col gap-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<p className="text-[13px] font-medium text-white/80">Orbit speed</p>
|
||||
<span className="text-[11px] font-semibold text-white/40 tabular-nums">
|
||||
{activeLabel}
|
||||
</span>
|
||||
</div>
|
||||
<div className="relative">
|
||||
<Slider
|
||||
min={ORBIT_SPEED_MIN}
|
||||
max={ORBIT_SPEED_MAX}
|
||||
step={0.01}
|
||||
value={[value]}
|
||||
onValueChange={handleChange}
|
||||
aria-label="Orbit speed"
|
||||
/>
|
||||
<div className="pointer-events-none absolute inset-x-0 top-1/2 -translate-y-1/2 flex justify-between px-0.5">
|
||||
{ORBIT_SPEED_PRESETS.map((preset) => {
|
||||
const pct =
|
||||
((preset.value - ORBIT_SPEED_MIN) /
|
||||
(ORBIT_SPEED_MAX - ORBIT_SPEED_MIN)) *
|
||||
100;
|
||||
const isActive =
|
||||
Math.abs(preset.value - value) < ORBIT_SNAP_THRESHOLD;
|
||||
return (
|
||||
<span
|
||||
key={preset.label}
|
||||
className={`absolute h-1.5 w-1.5 rounded-full -translate-x-1/2 -translate-y-1/2 transition-colors ${
|
||||
isActive ? "bg-white/50" : "bg-white/15"
|
||||
}`}
|
||||
style={{ left: `${pct}%` }}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function TrailThicknessSlider({
|
||||
value,
|
||||
onChange,
|
||||
}: {
|
||||
value: number;
|
||||
onChange: (v: number) => void;
|
||||
}) {
|
||||
return (
|
||||
<div className="flex w-full items-center gap-3.5 rounded-xl px-3 py-2.5 text-left">
|
||||
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-white/5 text-white/35 ring-1 ring-white/6">
|
||||
<Layers className="h-4 w-4" />
|
||||
</div>
|
||||
<div className="flex flex-1 min-w-0 flex-col gap-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<p className="text-[13px] font-medium text-white/80">
|
||||
Trail thickness
|
||||
</p>
|
||||
<span className="text-[11px] font-semibold text-white/40 tabular-nums">
|
||||
{value.toFixed(1)} px
|
||||
</span>
|
||||
</div>
|
||||
<Slider
|
||||
min={TRAIL_THICKNESS_MIN}
|
||||
max={TRAIL_THICKNESS_MAX}
|
||||
step={0.1}
|
||||
value={[value]}
|
||||
onValueChange={(vals) => onChange(vals[0])}
|
||||
aria-label="Trail thickness"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function TrailDistanceSlider({
|
||||
value,
|
||||
onChange,
|
||||
}: {
|
||||
value: number;
|
||||
onChange: (v: number) => void;
|
||||
}) {
|
||||
return (
|
||||
<div className="flex w-full items-center gap-3.5 rounded-xl px-3 py-2.5 text-left">
|
||||
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-white/5 text-white/35 ring-1 ring-white/6">
|
||||
<Route className="h-4 w-4" />
|
||||
</div>
|
||||
<div className="flex flex-1 min-w-0 flex-col gap-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<p className="text-[13px] font-medium text-white/80">
|
||||
Trail distance
|
||||
</p>
|
||||
<span className="text-[11px] font-semibold text-white/40 tabular-nums">
|
||||
{value} pts
|
||||
</span>
|
||||
</div>
|
||||
<Slider
|
||||
min={TRAIL_DISTANCE_MIN}
|
||||
max={TRAIL_DISTANCE_MAX}
|
||||
step={1}
|
||||
value={[value]}
|
||||
onValueChange={(vals) => onChange(vals[0])}
|
||||
aria-label="Trail distance"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function SettingRow({
|
||||
icon,
|
||||
title,
|
||||
description,
|
||||
checked,
|
||||
onChange,
|
||||
}: {
|
||||
icon: ReactNode;
|
||||
title: string;
|
||||
description: string;
|
||||
checked: boolean;
|
||||
onChange: (v: boolean) => void;
|
||||
}) {
|
||||
return (
|
||||
<button
|
||||
role="switch"
|
||||
aria-checked={checked}
|
||||
onClick={() => onChange(!checked)}
|
||||
className="flex w-full items-center gap-3.5 rounded-xl px-3 py-3 text-left transition-colors hover:bg-white/4 active:bg-white/6"
|
||||
>
|
||||
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-white/5 text-white/35 ring-1 ring-white/6">
|
||||
{icon}
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-[13px] font-medium text-white/80">{title}</p>
|
||||
<p className="mt-0.5 text-[11px] font-medium leading-relaxed text-white/22">
|
||||
{description}
|
||||
</p>
|
||||
</div>
|
||||
<Toggle checked={checked} />
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
function SegmentRow<T extends string | number>({
|
||||
icon,
|
||||
title,
|
||||
options,
|
||||
value,
|
||||
onChange,
|
||||
}: {
|
||||
icon: ReactNode;
|
||||
title: string;
|
||||
options: { label: string; value: T }[];
|
||||
value: T;
|
||||
onChange: (v: T) => void;
|
||||
}) {
|
||||
return (
|
||||
<div className="flex w-full items-center gap-3.5 rounded-xl px-3 py-2.5 text-left">
|
||||
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-white/5 text-white/35 ring-1 ring-white/6">
|
||||
{icon}
|
||||
</div>
|
||||
<p className="flex-1 min-w-0 text-[13px] font-medium text-white/80">
|
||||
{title}
|
||||
</p>
|
||||
<div
|
||||
role="radiogroup"
|
||||
aria-label={title}
|
||||
className="flex shrink-0 rounded-md bg-white/4 p-0.5 ring-1 ring-white/6"
|
||||
>
|
||||
{options.map((opt) => {
|
||||
const isActive = opt.value === value;
|
||||
return (
|
||||
<button
|
||||
key={String(opt.value)}
|
||||
role="radio"
|
||||
aria-checked={isActive}
|
||||
onClick={() => onChange(opt.value)}
|
||||
className={`relative rounded-md px-2 py-1 text-[11px] font-semibold transition-colors ${
|
||||
isActive ? "text-white/90" : "text-white/30 hover:text-white/50"
|
||||
}`}
|
||||
>
|
||||
{isActive && (
|
||||
<motion.div
|
||||
layoutId={`seg-${title}`}
|
||||
className="absolute inset-0 rounded-md bg-white/10"
|
||||
transition={{
|
||||
type: "spring",
|
||||
stiffness: 500,
|
||||
damping: 35,
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
<span className="relative">{opt.label}</span>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function Toggle({ checked }: { checked: boolean }) {
|
||||
return (
|
||||
<div
|
||||
className={`relative h-5 w-9 shrink-0 rounded-full transition-colors duration-200 ${
|
||||
checked ? "bg-white/20" : "bg-white/6"
|
||||
}`}
|
||||
>
|
||||
<motion.div
|
||||
animate={{ x: checked ? 17 : 2 }}
|
||||
transition={{ type: "spring", stiffness: 500, damping: 30 }}
|
||||
className={`absolute top-0.75 h-3.5 w-3.5 rounded-full shadow-sm transition-colors duration-200 ${
|
||||
checked ? "bg-white" : "bg-white/25"
|
||||
}`}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -13,7 +13,11 @@ import {
|
||||
Navigation,
|
||||
Building2,
|
||||
Eye,
|
||||
ChevronRight,
|
||||
} from "lucide-react";
|
||||
import { useAircraftPhotos } from "@/hooks/use-aircraft-photos";
|
||||
import { AircraftPhotos } from "@/components/ui/aircraft-photos";
|
||||
import { HeroBanner } from "@/components/ui/hero-banner";
|
||||
import type { FlightState } from "@/lib/opensky";
|
||||
import {
|
||||
metersToFeet,
|
||||
@ -84,6 +88,14 @@ export function FlightCard({
|
||||
const showLogo = Boolean(logoUrl);
|
||||
const genericLogoUrl = "/airline-logos/envoy-air.png";
|
||||
|
||||
const {
|
||||
photos,
|
||||
aircraft: photoAircraft,
|
||||
loading: photosLoading,
|
||||
error: photosError,
|
||||
} = useAircraftPhotos(flight?.icao24 ?? null);
|
||||
const heroPhoto = photos[0] ?? null;
|
||||
|
||||
return (
|
||||
<AnimatePresence mode="wait">
|
||||
{flight && (
|
||||
@ -103,8 +115,10 @@ export function FlightCard({
|
||||
aria-label="Selected flight details"
|
||||
aria-live="polite"
|
||||
>
|
||||
<div className="rounded-2xl border border-white/8 bg-black/60 p-4 shadow-2xl shadow-black/40 backdrop-blur-2xl">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="overflow-hidden rounded-2xl border border-white/8 bg-black/60 shadow-2xl shadow-black/40 backdrop-blur-2xl">
|
||||
<HeroBanner photo={heroPhoto} loading={photosLoading} />
|
||||
|
||||
<div className="p-4">
|
||||
<div className="flex items-center gap-3.5">
|
||||
<div className="relative flex h-20 w-20 items-center justify-center rounded-2xl border border-white/14 bg-white/10 shadow-lg shadow-black/25">
|
||||
{showLogo ? (
|
||||
@ -133,7 +147,6 @@ export function FlightCard({
|
||||
}}
|
||||
onError={() => {
|
||||
if (logoUrl) markAirlineLogoFailed(logoUrl);
|
||||
|
||||
if (resolvedLogoIndex + 1 < logoCandidates.length) {
|
||||
setLogoIndexByAirline((current) => ({
|
||||
...current,
|
||||
@ -169,35 +182,144 @@ export function FlightCard({
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm font-semibold tracking-wide text-white">
|
||||
<p className="text-base font-bold leading-tight text-white">
|
||||
{formatCallsign(flight.callsign)}
|
||||
</p>
|
||||
<p className="text-[11px] font-medium tracking-wider text-white/40 uppercase">
|
||||
<p className="mt-0.5 text-[11px] font-medium tracking-widest text-white/35 uppercase">
|
||||
{flight.icao24}
|
||||
{flightNum ? ` · #${flightNum}` : ""}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-1.5">
|
||||
{onToggleFpv && (
|
||||
<motion.button
|
||||
|
||||
{company && (
|
||||
<div className="mt-2.5 flex items-center gap-1.5">
|
||||
<Building2 className="h-3 w-3 text-white/25" />
|
||||
<p className="text-xs font-medium text-white/50">
|
||||
{company}
|
||||
{model ? (
|
||||
<span className="text-white/30"> · {model}</span>
|
||||
) : null}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="mt-3 h-px bg-linear-to-r from-transparent via-white/6 to-transparent" />
|
||||
|
||||
<div className="mt-3 grid grid-cols-2 gap-3">
|
||||
<Metric
|
||||
icon={<ArrowUp className="h-3 w-3" />}
|
||||
label="Altitude"
|
||||
value={metersToFeet(flight.baroAltitude)}
|
||||
/>
|
||||
<Metric
|
||||
icon={<Gauge className="h-3 w-3" />}
|
||||
label="Speed"
|
||||
value={msToKnots(flight.velocity)}
|
||||
/>
|
||||
<Metric
|
||||
icon={<Compass className="h-3 w-3" />}
|
||||
label="Heading"
|
||||
value={
|
||||
heading !== null && Number.isFinite(heading)
|
||||
? `${Math.round(heading)}° ${cardinal}`
|
||||
: "—"
|
||||
}
|
||||
/>
|
||||
<Metric
|
||||
icon={<ArrowDown className="h-3 w-3" />}
|
||||
label="V/S"
|
||||
value={
|
||||
flight.verticalRate !== null &&
|
||||
Number.isFinite(flight.verticalRate)
|
||||
? `${flight.verticalRate > 0 ? "+" : ""}${Math.round(flight.verticalRate)} m/s`
|
||||
: "—"
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="mt-3 h-px bg-linear-to-r from-transparent via-white/6 to-transparent" />
|
||||
|
||||
<div className="mt-2.5 flex flex-col gap-1.5">
|
||||
<div className="flex items-center gap-1.5">
|
||||
<Globe className="h-3 w-3 text-white/25" />
|
||||
<p className="text-[11px] text-white/40">
|
||||
{flight.originCountry}
|
||||
</p>
|
||||
</div>
|
||||
{cardinal && (
|
||||
<div className="flex items-center gap-1.5">
|
||||
<Navigation
|
||||
className="h-3 w-3 text-white/25"
|
||||
style={{
|
||||
transform:
|
||||
heading !== null && Number.isFinite(heading)
|
||||
? `rotate(${heading}deg)`
|
||||
: undefined,
|
||||
}}
|
||||
/>
|
||||
<p className="text-[11px] text-white/40">
|
||||
Heading {cardinal}
|
||||
{flight.latitude !== null &&
|
||||
flight.longitude !== null &&
|
||||
Number.isFinite(flight.latitude) &&
|
||||
Number.isFinite(flight.longitude) && (
|
||||
<span className="text-white/20">
|
||||
{" "}
|
||||
· {Math.abs(flight.latitude).toFixed(2)}°
|
||||
{flight.latitude >= 0 ? "N" : "S"},{" "}
|
||||
{Math.abs(flight.longitude).toFixed(2)}°
|
||||
{flight.longitude >= 0 ? "E" : "W"}
|
||||
</span>
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
{flight.squawk && (
|
||||
<div className="flex items-center gap-1.5">
|
||||
<span
|
||||
className={`h-3 w-3 text-center text-[8px] font-bold leading-3 ${
|
||||
isEmergencySquawk(flight.squawk)
|
||||
? "text-red-400"
|
||||
: "text-white/25"
|
||||
}`}
|
||||
>
|
||||
SQ
|
||||
</span>
|
||||
<p
|
||||
className={`font-mono text-[11px] tabular-nums ${
|
||||
isEmergencySquawk(flight.squawk)
|
||||
? "text-red-400"
|
||||
: "text-white/40"
|
||||
}`}
|
||||
>
|
||||
{flight.squawk}
|
||||
{isEmergencySquawk(flight.squawk) && (
|
||||
<span className="ml-1.5 rounded bg-red-500/15 px-1.5 py-0.5 text-[9px] font-semibold tracking-wider text-red-400 uppercase">
|
||||
{squawkLabel(flight.squawk)}
|
||||
</span>
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{onToggleFpv && (
|
||||
<div className="mt-3">
|
||||
<div className="h-px bg-linear-to-r from-transparent via-white/6 to-transparent" />
|
||||
<button
|
||||
type="button"
|
||||
onClick={() =>
|
||||
(isFpvActive || canEnterFpv) &&
|
||||
flight &&
|
||||
onToggleFpv(flight.icao24)
|
||||
}
|
||||
disabled={!isFpvActive && !canEnterFpv}
|
||||
className={`flex h-6 w-6 items-center justify-center rounded-full transition-colors ${
|
||||
isFpvActive
|
||||
? "bg-emerald-500/20 text-emerald-400"
|
||||
: !canEnterFpv
|
||||
? "bg-white/4 text-white/15 cursor-not-allowed"
|
||||
: "bg-white/6 text-white/40 hover:bg-white/12"
|
||||
className={`mt-2 flex w-full items-center gap-1.5 text-left transition-colors ${
|
||||
!isFpvActive && !canEnterFpv
|
||||
? "opacity-35 cursor-not-allowed"
|
||||
: ""
|
||||
}`}
|
||||
whileHover={
|
||||
isFpvActive || canEnterFpv ? { scale: 1.1 } : {}
|
||||
}
|
||||
whileTap={isFpvActive || canEnterFpv ? { scale: 0.9 } : {}}
|
||||
aria-label={
|
||||
isFpvActive
|
||||
? "Exit first person view"
|
||||
@ -215,131 +337,44 @@ export function FlightCard({
|
||||
: "FPV unavailable (no position data)"
|
||||
}
|
||||
>
|
||||
<Eye className="h-3 w-3" />
|
||||
</motion.button>
|
||||
)}
|
||||
<motion.button
|
||||
<Eye
|
||||
className={`h-3 w-3 ${isFpvActive ? "text-emerald-400" : "text-white/25"}`}
|
||||
/>
|
||||
<span
|
||||
className={`text-[11px] font-medium tracking-wide uppercase ${isFpvActive ? "text-emerald-400/70" : "text-white/30"}`}
|
||||
>
|
||||
{isFpvActive
|
||||
? "Exit First Person View"
|
||||
: "First Person View"}
|
||||
</span>
|
||||
<ChevronRight
|
||||
className={`ml-auto h-2.5 w-2.5 ${isFpvActive ? "text-emerald-400/40" : "text-white/20"}`}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<AircraftPhotos
|
||||
photos={photos}
|
||||
loading={photosLoading}
|
||||
aircraft={photoAircraft}
|
||||
error={photosError}
|
||||
/>
|
||||
|
||||
<div className="mt-3">
|
||||
<div className="h-px bg-linear-to-r from-transparent via-white/6 to-transparent" />
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClose}
|
||||
className="flex h-6 w-6 items-center justify-center rounded-full bg-white/6 transition-colors hover:bg-white/12"
|
||||
whileHover={{ scale: 1.1 }}
|
||||
whileTap={{ scale: 0.9 }}
|
||||
className="mt-2 flex w-full items-center gap-1.5 text-left transition-colors hover:opacity-70"
|
||||
aria-label="Deselect flight"
|
||||
>
|
||||
<X className="h-3 w-3 text-white/40" />
|
||||
</motion.button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{company && (
|
||||
<div className="mt-2.5 flex items-center gap-1.5">
|
||||
<Building2 className="h-3 w-3 text-white/25" />
|
||||
<p className="text-[11px] font-semibold tracking-wide text-white/55">
|
||||
{company}
|
||||
{model ? (
|
||||
<span className="text-white/30"> · {model}</span>
|
||||
) : null}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="mt-3 h-px bg-linear-to-r from-transparent via-white/6 to-transparent" />
|
||||
|
||||
<div className="mt-3 grid grid-cols-2 gap-3">
|
||||
<Metric
|
||||
icon={<ArrowUp className="h-3 w-3" />}
|
||||
label="Altitude"
|
||||
value={metersToFeet(flight.baroAltitude)}
|
||||
/>
|
||||
<Metric
|
||||
icon={<Gauge className="h-3 w-3" />}
|
||||
label="Speed"
|
||||
value={msToKnots(flight.velocity)}
|
||||
/>
|
||||
<Metric
|
||||
icon={<Compass className="h-3 w-3" />}
|
||||
label="Heading"
|
||||
value={
|
||||
heading !== null && Number.isFinite(heading)
|
||||
? `${Math.round(heading)}° ${cardinal}`
|
||||
: "—"
|
||||
}
|
||||
/>
|
||||
<Metric
|
||||
icon={<ArrowDown className="h-3 w-3" />}
|
||||
label="V/S"
|
||||
value={
|
||||
flight.verticalRate !== null &&
|
||||
Number.isFinite(flight.verticalRate)
|
||||
? `${flight.verticalRate > 0 ? "+" : ""}${Math.round(flight.verticalRate)} m/s`
|
||||
: "—"
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="mt-3 h-px bg-linear-to-r from-transparent via-white/6 to-transparent" />
|
||||
|
||||
<div className="mt-2.5 flex flex-col gap-1.5">
|
||||
<div className="flex items-center gap-1.5">
|
||||
<Globe className="h-3 w-3 text-white/25" />
|
||||
<p className="text-[11px] font-medium tracking-wide text-white/40">
|
||||
{flight.originCountry}
|
||||
</p>
|
||||
</div>
|
||||
{cardinal && (
|
||||
<div className="flex items-center gap-1.5">
|
||||
<Navigation
|
||||
className="h-3 w-3 text-white/25"
|
||||
style={{
|
||||
transform:
|
||||
heading !== null && Number.isFinite(heading)
|
||||
? `rotate(${heading}deg)`
|
||||
: undefined,
|
||||
}}
|
||||
/>
|
||||
<p className="text-[11px] font-medium tracking-wide text-white/40">
|
||||
Heading {cardinal}
|
||||
{flight.latitude !== null &&
|
||||
flight.longitude !== null &&
|
||||
Number.isFinite(flight.latitude) &&
|
||||
Number.isFinite(flight.longitude) && (
|
||||
<span className="text-white/20">
|
||||
{" "}
|
||||
· {Math.abs(flight.latitude).toFixed(2)}°
|
||||
{flight.latitude >= 0 ? "N" : "S"},{" "}
|
||||
{Math.abs(flight.longitude).toFixed(2)}°
|
||||
{flight.longitude >= 0 ? "E" : "W"}
|
||||
</span>
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
{flight.squawk && (
|
||||
<div className="flex items-center gap-1.5">
|
||||
<span
|
||||
className={`h-3 w-3 text-center text-[8px] font-bold leading-3 ${
|
||||
isEmergencySquawk(flight.squawk)
|
||||
? "text-red-400"
|
||||
: "text-white/25"
|
||||
}`}
|
||||
>
|
||||
SQ
|
||||
<X className="h-3 w-3 text-white/25" />
|
||||
<span className="text-[11px] font-medium tracking-wide text-white/30 uppercase">
|
||||
Close
|
||||
</span>
|
||||
<p
|
||||
className={`font-mono text-[11px] font-medium tracking-wide ${
|
||||
isEmergencySquawk(flight.squawk)
|
||||
? "text-red-400"
|
||||
: "text-white/40"
|
||||
}`}
|
||||
>
|
||||
{flight.squawk}
|
||||
{isEmergencySquawk(flight.squawk) && (
|
||||
<span className="ml-1.5 rounded bg-red-500/15 px-1.5 py-0.5 text-[9px] font-semibold tracking-wider text-red-400 uppercase">
|
||||
{squawkLabel(flight.squawk)}
|
||||
</span>
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
@ -379,13 +414,13 @@ function Metric({
|
||||
}) {
|
||||
return (
|
||||
<div className="flex flex-col gap-1">
|
||||
<div className="flex items-center gap-1.5 text-white/30">
|
||||
<div className="flex items-center gap-1.5 text-white/25">
|
||||
{icon}
|
||||
<span className="text-[10px] font-medium tracking-wider uppercase">
|
||||
<span className="text-[10px] font-medium tracking-widest uppercase">
|
||||
{label}
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-[13px] font-semibold tracking-tight text-white/90">
|
||||
<p className="text-sm font-semibold tabular-nums text-white/90">
|
||||
{value}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
69
src/components/ui/hero-banner.tsx
Normal file
69
src/components/ui/hero-banner.tsx
Normal file
@ -0,0 +1,69 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect } from "react";
|
||||
import { Camera, ImageOff } from "lucide-react";
|
||||
import type { NormalizedPhoto } from "@/hooks/use-aircraft-photos";
|
||||
|
||||
type HeroBannerProps = {
|
||||
photo: NormalizedPhoto | null;
|
||||
loading: boolean;
|
||||
};
|
||||
|
||||
export function HeroBanner({ photo, loading }: HeroBannerProps) {
|
||||
const [loaded, setLoaded] = useState(false);
|
||||
const [failed, setFailed] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
setLoaded(false);
|
||||
setFailed(false);
|
||||
}, [photo?.id]);
|
||||
|
||||
const hasPhoto = photo != null && !failed;
|
||||
|
||||
return (
|
||||
<div className="relative h-36 w-full overflow-hidden bg-white/5">
|
||||
{/* Skeleton while loading */}
|
||||
{loading && !hasPhoto && (
|
||||
<span
|
||||
aria-hidden
|
||||
className="absolute inset-0 animate-pulse bg-linear-to-br from-white/5 via-white/8 to-white/5"
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* No image placeholder */}
|
||||
{!loading && !hasPhoto && (
|
||||
<div className="flex h-full w-full flex-col items-center justify-center gap-1.5 text-white/20">
|
||||
<ImageOff className="h-6 w-6" />
|
||||
<span className="text-[10px] font-medium">No photo available</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Actual image */}
|
||||
{photo && !failed && (
|
||||
<>
|
||||
{!loaded && (
|
||||
<span
|
||||
aria-hidden
|
||||
className="absolute inset-0 animate-pulse bg-linear-to-br from-white/5 via-white/8 to-white/5"
|
||||
/>
|
||||
)}
|
||||
<img
|
||||
src={photo.thumbnail}
|
||||
alt="Aircraft"
|
||||
onLoad={() => setLoaded(true)}
|
||||
onError={() => setFailed(true)}
|
||||
className={`h-full w-full object-cover transition-opacity duration-300 ${loaded ? "opacity-100" : "opacity-0"}`}
|
||||
draggable={false}
|
||||
/>
|
||||
<span className="pointer-events-none absolute inset-0 bg-linear-to-t from-black/40 via-black/5 to-transparent" />
|
||||
{photo.photographer && loaded && (
|
||||
<span className="absolute bottom-2 right-2.5 flex items-center gap-1 rounded-full bg-black/40 px-2 py-0.5 text-[9px] font-medium text-white/60 backdrop-blur-sm">
|
||||
<Camera className="h-2.5 w-2.5" />
|
||||
{photo.photographer}
|
||||
</span>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -4,11 +4,12 @@ import { useEffect, useRef } from "react";
|
||||
import { motion, AnimatePresence } from "motion/react";
|
||||
import { X, Keyboard } from "lucide-react";
|
||||
|
||||
const SHORTCUTS = [
|
||||
export const SHORTCUTS = [
|
||||
{ key: "N", description: "North up" },
|
||||
{ key: "R", description: "Reset view" },
|
||||
{ key: "O", description: "Toggle orbit" },
|
||||
{ key: "/", description: "Open search" },
|
||||
{ key: "⌘K", description: "Open search (anywhere)" },
|
||||
{ key: "F", description: "First person view" },
|
||||
{ key: "?", description: "Shortcuts help" },
|
||||
{ key: "Esc", description: "Close / Deselect" },
|
||||
|
||||
Reference in New Issue
Block a user