Review

On-air host context for community radio board console

KRCL board ops still prop-drill the on-air host through the underwriting queue, request line, and cart log. Lift host + setter into OnAirHostContext so any console panel can read who is live. Shell already drives a requestAnimationFrame VU meter for the peak LEDs; wrap children in the new provider without changing panel APIs.

ReactTier 2reactcontextre-renders

Click a line to flag it, pick one or more labels, then submit. If the change looks correct, approve it.

components/board/BoardConsoleShell.tsx+20-4

1	1		import { createContext, useContext, useEffect, useState, type ReactNode } from "react";
2	2		import { readMeterPeak } from "@/audio/vuBridge";
3	3		import { VuMeter } from "./VuMeter";
4	4
5	5		type Host = { id: string; callSign: string; shiftEndsAt: string };
6	6
	7	+	type OnAirHostValue = {
	8	+	host: Host \| null;
	9	+	setHost: (h: Host \| null) => void;
	10	+	};
	11	+
	12	+	const OnAirHostContext = createContext<OnAirHostValue \| null>(null);
	13	+
	14	+	export function useOnAirHost() {
	15	+	const ctx = useContext(OnAirHostContext);
	16	+	if (!ctx) throw new Error("useOnAirHost requires BoardConsoleShell");
	17	+	return ctx;
	18	+	}
	19	+
7	20		export function BoardConsoleShell({ children }: { children: ReactNode }) {
	21	+	const [host, setHost] = useState<Host \| null>(null);
8	22		const [vuPeak, setVuPeak] = useState(0);
9	23
10	24		useEffect(() => {
11	25		let frame = 0;
12	26		const tick = () => {
13	27		setVuPeak(readMeterPeak());
14	28		frame = requestAnimationFrame(tick);
15	29		};
16	30		frame = requestAnimationFrame(tick);
17	31		return () => cancelAnimationFrame(frame);
18	32		}, []);
19	33
20	34		return (
21		-	<div className="board-shell">
22		-	<VuMeter peak={vuPeak} />
23		-	{children}
24		-	</div>
	35	+	<OnAirHostContext.Provider value={{ host, setHost }}>
	36	+	<div className="board-shell">
	37	+	<VuMeter peak={vuPeak} />
	38	+	{children}
	39	+	</div>
	40	+	</OnAirHostContext.Provider>
25	41		);
26	42		}