feat: add Satellite of the Day spotlight card

frontend/src/components/EarthTwin.tsx

@@ -1,4 +1,5 @@
-import React, { useEffect, useRef, useState, useCallback } from 'react';
+import React, { useEffect, useRef, useState, useCallback, useImperativeHandle, forwardRef } from 'react';
+import { prefersReducedMotion } from './SatelliteSpotlight/GlowEffect';
 import { useUIStore } from '@/store/uiStore';
 import { MaterialIcon } from './MaterialIcon';
 import { SpotlightManager } from './SatelliteSpotlight/SpotlightManager';
@@ -110,7 +111,12 @@ const LegendCardSkeleton = () => (
   <div className="min-w-[200px] glass-panel p-4 animate-pulse bg-surface-container/40 h-48" />
 );
 
-export const EarthTwin: React.FC = () => {
+export interface EarthTwinHandle {
+  /** Flies the camera to the given NORAD catalog number and opens its info panel. */
+  flyToSatellite: (catalogNumber: string) => void;
+}
+
+export const EarthTwin = forwardRef<EarthTwinHandle>((_props, ref) => {
   const containerRef = useRef<HTMLDivElement>(null);
   const viewerRef = useRef<Cesium.Viewer | null>(null);
   const entitiesRef = useRef<Map<string, Cesium.Entity>>(new Map());
@@ -119,6 +125,12 @@ export const EarthTwin: React.FC = () => {
   const tooltipRef = useRef<HTMLDivElement>(null);
   const { activeSector, setSelectedSatelliteId } = useUIStore();
   const [useFallback, setUseFallback] = useState(true);
+  // Set by flyToSatellite(), consumed by SpotlightManager to lock its
+  // selection/info-card onto a satellite chosen from outside the globe
+  // (e.g. the Satellite of the Day card's "View on Globe" button). The
+  // nonce forces the effect to re-fire even if the same satellite is
+  // requested twice in a row.
+  const [focusRequest, setFocusRequest] = useState<{ catalogNumber: string; nonce: number } | null>(null);
   const [hoveredObject, setHoveredObject] = useState<CatalogObject | null>(null);
   const [tooltipPos, setTooltipPos] = useState({ x: 0, y: 0 });
   const [viewerInstance, setViewerInstance] = useState<Cesium.Viewer | null>(null);
@@ -333,6 +345,27 @@ export const EarthTwin: React.FC = () => {
     }
   }, []); 
 
+  // Mirrors the double-click fly-to in useSatelliteSelection.ts, but
+  // triggerable from outside the globe (e.g. a dashboard card) instead of
+  // from a Cesium pick event.
+  const flyToSatellite = useCallback((catalogNumber: string) => {
+    const viewer = viewerRef.current;
+    const obj = catalogMapRef.current.get(catalogNumber);
+    if (!viewer || viewer.isDestroyed() || !obj) return;
+
+    const pos = keplerToLatLonAlt(obj);
+    if (pos) {
+      const destination = Cesium.Cartesian3.fromDegrees(pos.lon, pos.lat, pos.alt * 1000 + 2000000);
+      viewer.camera.flyTo({ destination, duration: prefersReducedMotion() ? 0 : 1.5 });
+    }
+
+    // SpotlightManager owns actual selection state; this just tells it
+    // which satellite to lock onto and open the info panel for.
+    setFocusRequest({ catalogNumber, nonce: Date.now() });
+  }, []);
+
+  useImperativeHandle(ref, () => ({ flyToSatellite }), [flyToSatellite]);
+
   return (
     <div className="relative w-full h-full overflow-hidden bg-bg-deep-space border-b border-border-panel">
       {/* 3D Cesium Container */}
@@ -372,6 +405,7 @@ export const EarthTwin: React.FC = () => {
         collisionSetRef={collisionSetRef}
         datasetVersion={datasetVersion}
         toLatLonAlt={keplerToLatLonAlt}
+        focusRequest={focusRequest}
         onHoverChange={(obj, pos) => {
           setHoveredObject(obj);
           setTooltipPos(pos);
@@ -576,5 +610,7 @@ export const EarthTwin: React.FC = () => {
       `}</style>
     </div>
   );
-};
-export default EarthTwin;
+});
+
+EarthTwin.displayName = 'EarthTwin';
+export default EarthTwin;

frontend/src/components/SatelliteOfTheDay/SpotlightCard.tsx

@@ -0,0 +1,179 @@
+import React from 'react';
+import { useQuery } from '@tanstack/react-query';
+import { MagicCard } from '@/components/ui/magic-card';
+import { MaterialIcon } from '@/components/MaterialIcon';
+import { api, type SpaceObject } from '@/services/api';
+import { useSatelliteOfTheDay } from '@/hooks/useSatelliteOfTheDay';
+import type { SatelliteStatus } from '@/constants/spotlightSatellites';
+
+const EARTH_RADIUS_KM = 6371;
+
+interface OrbitSummary {
+  orbitType: 'LEO' | 'MEO' | 'GEO' | 'HEO';
+  altitudeKm: number;
+  inclinationDeg: number;
+  periodMin: number;
+}
+
+/** Classifies orbit regime from semimajor axis, mirroring common LEO/MEO/GEO/HEO bands. */
+function summarizeOrbit(obj: SpaceObject): OrbitSummary | null {
+  if (obj.semimajor_axis == null || obj.inclination == null || obj.period == null) return null;
+  const altitudeKm = obj.semimajor_axis - EARTH_RADIUS_KM;
+
+  let orbitType: OrbitSummary['orbitType'] = 'LEO';
+  if (altitudeKm > 2000 && altitudeKm < 35000) orbitType = 'MEO';
+  else if (altitudeKm >= 35000 && altitudeKm <= 36500) orbitType = 'GEO';
+  else if (altitudeKm > 36500) orbitType = 'HEO';
+
+  return {
+    orbitType,
+    altitudeKm: Math.round(altitudeKm),
+    inclinationDeg: Math.round(obj.inclination * 10) / 10,
+    periodMin: Math.round(obj.period),
+  };
+}
+
+const statusColor: Record<SatelliteStatus, string> = {
+  Active: 'text-status-success border-status-success',
+  Inactive: 'text-status-warning border-status-warning',
+  Retired: 'text-on-surface-variant border-border-panel',
+};
+
+const CardSkeleton = () => (
+  <div className="p-4 space-y-3 animate-pulse">
+    <div className="h-5 bg-surface-container-high rounded w-2/3" />
+    <div className="h-3 bg-surface-container-high rounded w-full" />
+    <div className="h-3 bg-surface-container-high rounded w-5/6" />
+    <div className="grid grid-cols-2 gap-2 pt-2">
+      {[0, 1, 2, 3].map(i => (
+        <div key={i} className="h-10 bg-surface-container-high rounded" />
+      ))}
+    </div>
+  </div>
+);
+
+interface SpotlightCardProps {
+  /** Called with the real NORAD catalog number when "View on Globe" is clicked. */
+  onViewOnGlobe: (catalogNumber: string) => void;
+}
+
+export const SpotlightCard: React.FC<SpotlightCardProps> = ({ onViewOnGlobe }) => {
+  const { satellite, isManualPick, showAnother, resetToToday } = useSatelliteOfTheDay();
+
+  const liveQuery = useQuery({
+    queryKey: ['catalog', 'byNorad', satellite.catalog_number],
+    queryFn: () => api.getCatalogObjectByNorad(satellite.catalog_number),
+    retry: false,
+  });
+
+  const liveObject = liveQuery.data?.data;
+  const orbit = liveObject ? summarizeOrbit(liveObject) : null;
+  const canViewOnGlobe = liveQuery.isSuccess && orbit !== null;
+
+  return (
+    <MagicCard
+      className="border border-border-panel rounded-xl overflow-hidden"
+      fillClassName="bg-surface-container/60"
+      gradientFrom="#00e5ff"
+      gradientTo="#0088ff"
+    >
+      <div className="p-4 md:p-5">
+        <div className="flex items-center justify-between mb-3">
+          <span className="flex items-center gap-1.5 font-label-caps text-[10px] text-primary-container">
+            <MaterialIcon name="stars" className="text-sm" />
+            SATELLITE OF THE DAY
+          </span>
+          <button
+            onClick={isManualPick ? resetToToday : showAnother}
+            className="px-3 py-1 border border-border-panel font-label-caps text-[10px] hover:bg-surface-container-high/50 cursor-pointer rounded"
+          >
+            {isManualPick ? "TODAY'S PICK" : 'SHOW ANOTHER'}
+          </button>
+        </div>
+
+        {liveQuery.isLoading ? (
+          <CardSkeleton />
+        ) : (
+          <>
+            <div className="flex flex-col md:flex-row gap-4">
+              <div className="w-full md:w-28 h-28 flex-shrink-0 rounded-lg overflow-hidden bg-surface-container-high flex items-center justify-center">
+                {satellite.image ? (
+                  <img
+                    src={satellite.image}
+                    alt={satellite.name}
+                    className="w-full h-full object-cover"
+                    onError={e => { (e.currentTarget as HTMLImageElement).style.display = 'none'; }}
+                  />
+                ) : (
+                  <MaterialIcon name="satellite_alt" className="text-4xl text-primary-container/40" />
+                )}
+              </div>
+
+              <div className="flex-1 min-w-0">
+                <div className="flex flex-wrap items-center gap-2 mb-1">
+                  <h3 className="font-display-lg text-lg text-on-surface truncate">{satellite.name}</h3>
+                  <span className={`px-2 py-0.5 border rounded font-label-caps text-[9px] ${statusColor[satellite.status]}`}>
+                    {satellite.status.toUpperCase()}
+                  </span>
+                </div>
+                <p className="text-[11px] text-on-surface-variant mb-2">
+                  {satellite.operator} &middot; launched {new Date(satellite.launch_date).toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' })}
+                </p>
+                <p className="text-[12px] text-on-surface-variant leading-relaxed">
+                  {satellite.mission_summary}
+                </p>
+              </div>
+            </div>
+
+            <div className="grid grid-cols-2 md:grid-cols-4 gap-2 mt-4">
+              <div className="glass-panel p-2 rounded-md">
+                <div className="font-label-caps text-[9px] text-on-surface-variant">ORBIT</div>
+                <div className="font-technical-data text-[13px] text-primary-container">{orbit?.orbitType ?? '\u2014'}</div>
+              </div>
+              <div className="glass-panel p-2 rounded-md">
+                <div className="font-label-caps text-[9px] text-on-surface-variant">ALTITUDE</div>
+                <div className="font-technical-data text-[13px] text-primary-container">{orbit ? `${orbit.altitudeKm.toLocaleString()} km` : '\u2014'}</div>
+              </div>
+              <div className="glass-panel p-2 rounded-md">
+                <div className="font-label-caps text-[9px] text-on-surface-variant">INCLINATION</div>
+                <div className="font-technical-data text-[13px] text-primary-container">{orbit ? `${orbit.inclinationDeg}\u00b0` : '\u2014'}</div>
+              </div>
+              <div className="glass-panel p-2 rounded-md">
+                <div className="font-label-caps text-[9px] text-on-surface-variant">PERIOD</div>
+                <div className="font-technical-data text-[13px] text-primary-container">{orbit ? `${orbit.periodMin} min` : '\u2014'}</div>
+              </div>
+            </div>
+
+            {!canViewOnGlobe && !liveQuery.isLoading && (
+              <p className="text-[10px] text-status-warning mt-2">
+                Live orbital data isn't currently available for this object, it may have re-entered or dropped out of the tracked catalog.
+              </p>
+            )}
+
+            {satellite.facts.length > 0 && (
+              <ul className="mt-3 space-y-1">
+                {satellite.facts.map((fact, i) => (
+                  <li key={i} className="flex gap-1.5 text-[11px] text-on-surface-variant">
+                    <MaterialIcon name="auto_awesome" className="text-[12px] text-primary-container/60 mt-0.5" />
+                    <span>{fact}</span>
+                  </li>
+                ))}
+              </ul>
+            )}
+
+            <button
+              onClick={() => canViewOnGlobe && onViewOnGlobe(satellite.catalog_number)}
+              disabled={!canViewOnGlobe}
+              className="mt-4 w-full px-3 py-2 border border-primary-container/40 text-primary-container font-label-caps text-[11px] rounded-md hover:bg-primary-container/10 disabled:opacity-40 disabled:cursor-not-allowed cursor-pointer flex items-center justify-center gap-1.5"
+            >
+              <MaterialIcon name="public" className="text-sm" />
+              VIEW ON GLOBE
+            </button>
+          </>
+        )}
+      </div>
+    </MagicCard>
+  );
+};
+
+export default SpotlightCard;

frontend/src/components/SatelliteSpotlight/SpotlightManager.tsx

@@ -16,6 +16,8 @@ interface SpotlightManagerProps {
   toLatLonAlt: (obj: CatalogObject) => { lat: number; lon: number; alt: number } | null;
   onHoverChange?: (obj: CatalogObject | null, pos: { x: number; y: number }) => void;
   onSelectionChange?: (id: string | null) => void;
+  /** Set to lock selection onto a satellite from outside the globe (e.g. a dashboard card). */
+  focusRequest?: { catalogNumber: string; nonce: number } | null;
 }
 
 /**
@@ -36,6 +38,7 @@ export const SpotlightManager: React.FC<SpotlightManagerProps> = ({
   toLatLonAlt,
   onHoverChange,
   onSelectionChange,
+  focusRequest,
 }) => {
   const handlerRef = useRef<Cesium.ScreenSpaceEventHandler | null>(null);
   const [handler, setHandler] = useState<Cesium.ScreenSpaceEventHandler | null>(null);
@@ -71,6 +74,16 @@ export const SpotlightManager: React.FC<SpotlightManagerProps> = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [hoveredObject, tooltipPos]);
 
+  // External fly-to request (e.g. Satellite of the Day's "View on Globe")
+  // — lock selection the same way a click would, keyed off `nonce` so the
+  // same satellite can be re-requested.
+  useEffect(() => {
+    if (!focusRequest) return;
+    const obj = catalogMapRef.current?.get(focusRequest.catalogNumber) ?? null;
+    if (obj) selectSatellite(obj);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [focusRequest]);
+
   // Keyboard focus takes priority over mouse hover for spotlight targeting,
   // since it reflects deliberate keyboard navigation.
   const effectiveHoverId = keyboardFocusId ?? hoveredId;
@@ -149,4 +162,4 @@ export const SpotlightManager: React.FC<SpotlightManagerProps> = ({
   );
 };
 
-export default SpotlightManager;
+export default SpotlightManager;