Function Tracker

web/src/tracker/Tracker.tsx:14–54

()

import { VideoPane } from "./components/VideoPane.js";

export function Tracker() {
  const { stream, conn } = useTracker();
  const { state, config } = stream;

  if (!state || !config) {
    return (
      <div className="loading">
        <div className={`dot ${stream.connected ? "ok" : "bad"}`} />
        {stream.connected ? "waiting for tracker state…" : "connecting to tracker…"}
      </div>
    );
  }

  const pick = (hex: string | null) => conn.send({ type: "manualTarget", hex });

  return (
    <div className="tracker">
      <StatusBar state={state} connected={stream.connected} conn={conn} />

      <main className="layout">
        <section className="left">
          <VideoPane state={state} config={config} connected={stream.connected} />
          <RecordPanel state={state} connected={stream.connected} />
          <div className="bottom-row">
            <JogPad conn={conn} />
            {state.mode === "calibrate" ? (
              <CalibrationWizard state={state} conn={conn} />
            ) : (
              <ConfigPanel config={config} conn={conn} />
            )}
          </div>
        </section>

        <aside className="right">
          <SkyPolar state={state} config={config} onPick={(hex) => pick(hex)} />
          <TargetTable state={state} onPick={pick} />
        </aside>
      </main>
    </div>
  );
}