frontend: safe fixes from the #109 punch-list
- CallSpineEntry.tsx: drop the dead `hasAudio` prop + the early `return null` that sat between hooks in InlinePlayer (React #310 risk). Parent already gates the mount on audio presence. - NodeCard.tsx + nodes/page.tsx: pending-node card no longer double-fires. NodeCard gains `linkToDetail` (default true); the pending branch passes false so the wrapping onClick (open config modal) isn't swallowed by the inner <Link> navigation. List view unchanged. - trips/page.tsx: TripCard badge now buckets on end_date >= today, matching the list's own upcoming/past split — an in-progress trip no longer shows a "Past" badge under "Upcoming". - trips/page.tsx, NodeConfigModal.tsx, nodes/[id]/page.tsx: tall modals get `p-4` on the overlay + `max-h-[90vh] overflow-y-auto` on the panel so they don't clip on short viewports (incidents' CreateModal pattern). - lib/types.ts: IncidentRecord.units / vehicles are optional now, matching Firestore (older docs omit them); incidents/[id] gains a `?? []` guard. Untypechecked (no node/npm locally). next build in deploy.yml gates it. Full list of remaining items in server-26 #109. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
co-authored by
Claude Sonnet 5
parent
c1c3e89e1d
commit
d67b2057e6
@@ -23,7 +23,7 @@ function fmtClock(s: number): string {
|
||||
return `${m}:${r.toString().padStart(2, "0")}`;
|
||||
}
|
||||
|
||||
function InlinePlayer({ callId, hasAudio }: { callId: string; hasAudio: boolean }) {
|
||||
function InlinePlayer({ callId }: { callId: string }) {
|
||||
const [url, setUrl] = useState<string | null>(null);
|
||||
const [error, setError] = useState(false);
|
||||
const [loading, setLoading] = useState(false);
|
||||
@@ -32,8 +32,6 @@ function InlinePlayer({ callId, hasAudio }: { callId: string; hasAudio: boolean
|
||||
const [duration, setDuration] = useState(0);
|
||||
const audioRef = useRef<HTMLAudioElement | null>(null);
|
||||
|
||||
if (!hasAudio) return null;
|
||||
|
||||
async function ensureUrl() {
|
||||
if (url || loading) return;
|
||||
setLoading(true);
|
||||
@@ -169,7 +167,7 @@ export function CallSpineEntry({
|
||||
|
||||
{hasAudio && (
|
||||
<div className="mt-1.5">
|
||||
<InlinePlayer callId={call.call_id} hasAudio={hasAudio} />
|
||||
<InlinePlayer callId={call.call_id} />
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
||||
@@ -5,15 +5,20 @@ import type { NodeRecord, SystemRecord } from "@/lib/types";
|
||||
interface Props {
|
||||
node: NodeRecord;
|
||||
system?: SystemRecord;
|
||||
/**
|
||||
* When false, the card renders without its `/nodes/[id]` Link wrapper so a
|
||||
* parent click handler can take the interaction (pending nodes open the
|
||||
* config modal instead of navigating). Defaults to true.
|
||||
*/
|
||||
linkToDetail?: boolean;
|
||||
}
|
||||
|
||||
export function NodeCard({ node, system }: Props) {
|
||||
export function NodeCard({ node, system, linkToDetail = true }: Props) {
|
||||
const lastSeen = node.last_seen
|
||||
? new Date(node.last_seen).toLocaleTimeString()
|
||||
: "never";
|
||||
|
||||
return (
|
||||
<Link href={`/nodes/${node.node_id}`}>
|
||||
const body = (
|
||||
<div className="bg-gray-900 border border-gray-800 rounded-lg p-4 hover:border-gray-600 transition-colors cursor-pointer">
|
||||
<div className="flex items-start justify-between mb-3">
|
||||
<div>
|
||||
@@ -58,6 +63,7 @@ export function NodeCard({ node, system }: Props) {
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</Link>
|
||||
);
|
||||
|
||||
return linkToDetail ? <Link href={`/nodes/${node.node_id}`}>{body}</Link> : body;
|
||||
}
|
||||
|
||||
@@ -50,8 +50,8 @@ export function NodeConfigModal({ node, systems, onClose }: Props) {
|
||||
const selectedPreset = PRESETS.find((p) => p.value === preset);
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 bg-black/70 flex items-center justify-center z-50">
|
||||
<div className="bg-gray-900 border border-gray-700 rounded-xl p-6 w-full max-w-md font-mono">
|
||||
<div className="fixed inset-0 bg-black/70 flex items-center justify-center z-50 p-4">
|
||||
<div className="bg-gray-900 border border-gray-700 rounded-xl p-6 w-full max-w-md font-mono max-h-[90vh] overflow-y-auto">
|
||||
<h2 className="text-white font-semibold mb-1">Configure Node</h2>
|
||||
<p className="text-gray-400 text-sm mb-5">
|
||||
<span className="text-indigo-400">{node.node_id}</span> connected for the first time.
|
||||
|
||||
Reference in New Issue
Block a user