[fix](trx-frontend-http): hold the APRS symbol column open for frames without one

renderLocalAprsSymbol() returns nothing when a packet carries no symbol
table or code, so those rows lost the icon's 24px slot and every column
after it -- callsign, type badge, summary -- slid left against the rows
around them. Frames that do carry a symbol then read as indented.

Render an empty slot of the same size instead, so a list mixing position
reports with messages and telemetry still lines up.

Signed-off-by: Stan Grams <sjg@haxx.space>

src/trx-client/trx-frontend/trx-frontend-http/frontend/src/plugins/aprs-shared.ts

@@ -182,6 +182,13 @@ export function aprsSymbolSprite(
   };
 }
 
+/** An empty slot of the symbol's size, so a frame without one still lines up
+ *  with the frames around it in the list. */
+export function renderAprsSymbolSlot(packet: AprsPacket, escapeHtml: (value: string) => string): string {
+  return renderLocalAprsSymbol(packet, escapeHtml)
+    || '<span class="aprs-symbol aprs-symbol-empty" aria-hidden="true"></span>';
+}
+
 export function renderLocalAprsSymbol(packet: AprsPacket, escapeHtml: (value: string) => string): string {
   if (!packet.symbolTable || !packet.symbolCode) return "";
   const sprite = aprsSymbolSprite(packet.symbolTable, packet.symbolCode);
@@ -336,7 +343,7 @@ export function renderAprsPacketRow(packet: AprsPacket, options: AprsRowOptions
     `<summary class="decode-line">` +
       `<span class="aprs-time">${escapeAprsHtml(time)}</span>` +
       (options.badge ? `<span class="aprs-badge aprs-badge-band">${escapeAprsHtml(options.badge)}</span>` : "") +
-      renderLocalAprsSymbol(packet, escapeAprsHtml) +
+      renderAprsSymbolSlot(packet, escapeAprsHtml) +
       `<span class="aprs-call">${escapeAprsHtml(packet.srcCall ?? "")}</span>` +
       `<span class="aprs-badge aprs-badge-type aprs-badge-type-${category}">` +
         `${escapeAprsHtml(aprsCategoryLabel(category))}</span>` +

src/trx-client/trx-frontend/trx-frontend-http/frontend/tests/decode-flow.mjs

@@ -174,7 +174,11 @@ const APRS_FRAMES = [
   { packet_type: "position", info: "!5421.30N/01839.20E>Test beacon 73", lat: 54.35, lon: 18.65 },
 ].map((frame, index) => ({
   src_call: `SP2SJG-${index}`, dest_call: "APRS", path: "WIDE1-1", crc_ok: true,
-  symbol_table: "/", symbol_code: ">", rig_id: "rig-a", ts_ms: Date.now() - index * 1000,
+  // Only position reports carry a symbol here, which is the case the columns
+  // have to survive: a frame without one used to close the gap and shift
+  // everything after it left.
+  ...(frame.packet_type === "position" ? { symbol_table: "/", symbol_code: ">" } : {}),
+  rig_id: "rig-a", ts_ms: Date.now() - index * 1000,
   ...frame,
 }));
 
@@ -224,6 +228,20 @@ try {
   assert.match(summaryOf("Telemetry"), /^#005/, `telemetry summary: ${summaryOf("Telemetry")}`);
   assert.match(summaryOf("Position"), /54\.3500, 18\.6500/, `position summary: ${summaryOf("Position")}`);
 
+  // Frames with and without a symbol line up: the slot is held open either way.
+  const columns = await aprs.page.evaluate(() =>
+    [...document.querySelectorAll("#aprs-packets .aprs-packet")].map((row) => ({
+      call: Math.round(row.querySelector(".aprs-call").getBoundingClientRect().x),
+      summary: Math.round(row.querySelector(".decode-line-summary").getBoundingClientRect().x),
+      symbol: !!row.querySelector(".aprs-symbol:not(.aprs-symbol-empty)"),
+    })));
+  assert.ok(columns.some((column) => column.symbol) && columns.some((column) => !column.symbol),
+    "the sample has to mix frames with and without a symbol to test this");
+  assert.equal(new Set(columns.map((column) => column.call)).size, 1,
+    `callsigns start at ${JSON.stringify(columns.map((column) => column.call))}`);
+  assert.equal(new Set(columns.map((column) => column.summary)).size, 1,
+    `summaries start at ${JSON.stringify(columns.map((column) => column.summary))}`);
+
   // The frame as it arrived is still there, one click away.
   await aprs.page.locator("#aprs-packets .aprs-packet", { hasText: "25 °C" })
     .locator(".decode-line").first().click();