app shell: auth, realtime wiring, layout

web/src/App.jsx

@@ -0,0 +1,145 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { api, getToken, setToken } from './api.js';
+import { DispatchSocket } from './ws.js';
+import { PttPlayer, startCapture, sosBeep } from './audio.js';
+import MapView from './components/MapView.jsx';
+import SosPanel from './components/SosPanel.jsx';
+import MembersPanel from './components/MembersPanel.jsx';
+import PttPanel from './components/PttPanel.jsx';
+import Login from './components/Login.jsx';
+
+export default function App() {
+  const [user, setUser] = useState(null);
+  const [members, setMembers] = useState([]);
+  const [groups, setGroups] = useState([]);
+  const [sos, setSos] = useState([]);
+  const [floors, setFloors] = useState({});
+  const [connected, setConnected] = useState(false);
+  const [tab, setTab] = useState('members');
+  const [selectedGroup, setSelectedGroup] = useState(null);
+  const [talking, setTalking] = useState(false);
+  const [muted, setMuted] = useState(false);
+
+  const sockRef = useRef(null);
+  const playerRef = useRef(null);
+  const captureRef = useRef(null);
+  const mutedRef = useRef(false);
+  mutedRef.current = muted;
+
+  // restore session on reload
+  useEffect(() => {
+    if (!getToken()) return;
+    api.get('/me').then(setUser).catch(() => setToken(''));
+  }, []);
+
+  const startSocket = useCallback(() => {
+    sockRef.current?.close();
+    sockRef.current = new DispatchSocket({
+      onStatus: setConnected,
+      onWelcome: (d) => {
+        setGroups(d.groups);
+        setMembers(d.members);
+        setSos(d.sos);
+        setFloors(Object.fromEntries(d.floors.map((f) => [f.groupId, f])));
+      },
+      onMembers: setMembers,
+      onGroups: setGroups,
+      onSosNew: (alert) => {
+        setSos((prev) => [alert, ...prev.filter((a) => a.id !== alert.id)]);
+        if (!mutedRef.current) sosBeep(4);
+      },
+      onSosUpdate: (alert) => setSos((prev) => prev.map((a) => (a.id === alert.id ? alert : a))),
+      onFloor: (f) =>
+        setFloors((prev) => {
+          if (f.memberId == null) {
+            const { [f.groupId]: _drop, ...rest } = prev;
+            return rest;
+          }
+          return { ...prev, [f.groupId]: f };
+        }),
+      onAudio: ({ memberId, pcm }) => {
+        if (mutedRef.current || memberId === 0) return;
+        if (!playerRef.current) playerRef.current = new PttPlayer();
+        playerRef.current.play(pcm);
+      },
+    });
+  }, []);
+
+  useEffect(() => {
+    if (user && !sockRef.current) startSocket();
+  }, [user, startSocket]);
+
+  const handleLogin = async (username, password) => {
+    const { token, user: u } = await api.post('/login', { username, password });
+    setToken(token);
+    setUser(u);
+  };
+
+  const logout = () => {
+    sockRef.current?.close();
+    sockRef.current = null;
+    captureRef.current?.stop();
+    captureRef.current = null;
+    setToken('');
+    setUser(null);
+  };
+
+  const beginTalk = async () => {
+    if (!selectedGroup || talking) return;
+    try {
+      captureRef.current = await startCapture((pcm) => sockRef.current?.sendAudio(selectedGroup, 0, pcm));
+      sockRef.current?.send({ type: 'ptt_start', groupId: selectedGroup });
+      setTalking(true);
+    } catch (err) {
+      console.error('could not start microphone:', err);
+    }
+  };
+
+  const endTalk = () => {
+    sockRef.current?.send({ type: 'ptt_stop' });
+    captureRef.current?.stop();
+    captureRef.current = null;
+    setTalking(false);
+  };
+
+  const ackSos = (id) => api.post(`/sos/${id}/ack`).catch((e) => console.error(e));
+  const resolveSos = (id) => api.post(`/sos/${id}/resolve`).catch((e) => console.error(e));
+
+  if (!user) return <Login onLogin={handleLogin} />;
+
+  const openCount = sos.filter((a) => a.state === 'open').length;
+
+  return (
+    <div className="app">
+      <header>
+        <div className="brand">Dispatch Console</div>
+        <div className={`conn ${connected ? 'on' : 'off'}`}>{connected ? 'live' : 'offline'}</div>
+        <span className="muted">{user.username}</span>
+        <button className="secondary" onClick={logout}>Log out</button>
+      </header>
+      <aside>
+        <SosPanel sos={sos} openCount={openCount} onAck={ackSos} onResolve={resolveSos} />
+        <div className="tabs">
+          <button className={tab === 'members' ? 'active' : ''} onClick={() => setTab('members')}>Members</button>
+          <button className={tab === 'ptt' ? 'active' : ''} onClick={() => setTab('ptt')}>Intercom</button>
+        </div>
+        {tab === 'members' ? (
+          <MembersPanel members={members} groups={groups} />
+        ) : (
+          <PttPanel
+            groups={groups}
+            floors={floors}
+            selected={selectedGroup}
+            setSelected={setSelectedGroup}
+            onTalkStart={beginTalk}
+            onTalkStop={endTalk}
+            talking={talking}
+            muted={muted}
+            setMuted={setMuted}
+          />
+        )}
+      </aside>
+      <MapView members={members} groups={groups} sos={sos} />
+    </div>
+  );
+}