KSP-MissionControl/apps/live-map/src/panels/VesselList.tsx

/**
 * VesselList — sidebar of currently-known vessels.
 *
 * Click a vessel to track it (the camera follows + the orbit is
 * highlighted). Click again to untrack.
 */
import type { Vessel } from '@kerbal-rt/shared-types';
import { vesselColor } from '../scene/color.js';

export interface VesselListProps {
  vessels: Vessel[];
  selectedId: string | null;
  onSelect: (id: string | null) => void;
}

const PANEL_STYLE: React.CSSProperties = {
  position: 'absolute',
  top: 110,
  left: 12,
  width: 280,
  maxHeight: 'calc(100vh - 200px)',
  overflow: 'auto',
  padding: '0.5rem',
  background: 'rgba(0,0,0,0.7)',
  color: 'white',
  borderRadius: 6,
  fontSize: 12,
  fontFamily: 'monospace',
  backdropFilter: 'blur(4px)',
  border: '1px solid rgba(255,255,255,0.1)',
};

const ROW_STYLE: React.CSSProperties = {
  padding: '0.4rem 0.5rem',
  marginBottom: 2,
  borderRadius: 3,
  cursor: 'pointer',
  background: 'rgba(255,255,255,0.04)',
  border: '1px solid transparent',
  display: 'flex',
  alignItems: 'center',
  gap: 6,
};

const ROW_ACTIVE: React.CSSProperties = {
  ...ROW_STYLE,
  background: 'rgba(255,255,255,0.12)',
  border: '1px solid rgba(255,255,255,0.3)',
};

const DOT_STYLE: (color: number) => React.CSSProperties = (color) => ({
  width: 8,
  height: 8,
  borderRadius: '50%',
  background: `#${color.toString(16).padStart(6, '0')}`,
  flexShrink: 0,
});

export function VesselList({ vessels, selectedId, onSelect }: VesselListProps) {
  const sorted = [...vessels].sort((a, b) => a.name.localeCompare(b.name));
  return (
    <div style={PANEL_STYLE}>
      <div
        style={{
          fontSize: 10,
          opacity: 0.6,
          textTransform: 'uppercase',
          letterSpacing: '0.05em',
          marginBottom: 4,
        }}
      >
        Vessels ({vessels.length})
      </div>
      {sorted.length === 0 ? (
        <div style={{ opacity: 0.4, padding: 4 }}>No vessels yet.</div>
      ) : (
        sorted.map((v) => {
          const color = vesselColor(v.owner);
          const isActive = selectedId === v.id;
          return (
            <div
              key={v.id}
              style={isActive ? ROW_ACTIVE : ROW_STYLE}
              onClick={() => onSelect(isActive ? null : v.id)}
              title={v.id}
            >
              <span style={DOT_STYLE(color)} />
              <div style={{ flex: 1, minWidth: 0 }}>
                <div
                  style={{
                    whiteSpace: 'nowrap',
                    overflow: 'hidden',
                    textOverflow: 'ellipsis',
                    fontWeight: isActive ? 700 : 400,
                  }}
                >
                  {v.name}
                </div>
                <div style={{ opacity: 0.6, fontSize: 10 }}>
                  {v.owner ?? '—'} · {v.situation.toLowerCase()} · {v.referenceBodyId}
                </div>
              </div>
            </div>
          );
        })
      )}
    </div>
  );
}