Refine overview panel and compact overlay header

src/app.js

@@ -65,6 +65,11 @@ const TRANSLATIONS = {
     "dashboard.recent_sessions": "Senaste sessioner",
     "dashboard.free_practice": "Fri träning",
     "dashboard.open_practice": "Open Practice",
+    "dashboard.live_board": "Live Board",
+    "dashboard.decoder_feed": "Decoder-feed",
+    "dashboard.backend_link": "Backend-länk",
+    "dashboard.audio_profile": "Ljudprofil",
+    "dashboard.live_note": "Snabb driftpanel för anslutning, overlay och ljud. Djupare konfig ligger kvar under Inställningar.",
     "session.none_yet": "Inga sessioner ännu.",
     "classes.create": "Skapa klass",
     "classes.placeholder": "Klassnamn (t.ex. 2WD Buggy)",
@@ -542,6 +547,11 @@ const TRANSLATIONS = {
     "dashboard.recent_sessions": "Recent Sessions",
     "dashboard.free_practice": "Free Practice",
     "dashboard.open_practice": "Open Practice",
+    "dashboard.live_board": "Live Board",
+    "dashboard.decoder_feed": "Decoder feed",
+    "dashboard.backend_link": "Backend link",
+    "dashboard.audio_profile": "Audio profile",
+    "dashboard.live_note": "Quick operations panel for connection, overlay and audio. Deeper configuration remains under Settings.",
     "session.none_yet": "No sessions yet.",
     "classes.create": "Create Class",
     "classes.placeholder": "Class name (e.g. 2WD Buggy)",
@@ -1961,6 +1971,14 @@ function renderDashboard() {
     (sum, x) => sum + (x.passings?.length || 0),
     0
   );
+  const backendUrl = getBackendUrl();
+  const decoderUrl = state.settings.wsUrl || "-";
+  const audioProfile =
+    state.settings.passingSoundMode === "name"
+      ? t("settings.passing_sound_name")
+      : state.settings.passingSoundMode === "beep"
+      ? t("settings.passing_sound_beep")
+      : t("settings.passing_sound_off");
 
   dom.view.innerHTML = `
     <div class="grid cols-4">
@@ -1989,12 +2007,35 @@ function renderDashboard() {
 
       <section class="panel">
         <div class="panel-header">
-          <h3>${t("dashboard.quick_actions")}</h3>
+          <h3>${t("dashboard.live_board")}</h3>
         </div>
-        <div class="panel-body actions">
+        <div class="panel-body dashboard-live-stack">
-          <button id="goEvents" class="btn btn-primary">${t("dashboard.create_event")}</button>
+          <p class="hint">${t("dashboard.live_note")}</p>
-          <button id="goTiming" class="btn">${t("dashboard.open_timing")}</button>
+          <div class="dashboard-live-grid">
-          <button id="connectNow" class="btn">${t("dashboard.connect_decoder")}</button>
+            <article class="dashboard-live-card">
+              <span>${t("dashboard.decoder_feed")}</span>
+              <strong>${state.decoder.connected ? t("timing.connected") : t("timing.disconnected")}</strong>
+              <small>${escapeHtml(decoderUrl)}</small>
+            </article>
+            <article class="dashboard-live-card">
+              <span>${t("dashboard.backend_link")}</span>
+              <strong>${backend.available ? t("settings.online") : t("settings.offline")}</strong>
+              <small>${escapeHtml(backendUrl)}</small>
+            </article>
+            <article class="dashboard-live-card">
+              <span>${t("dashboard.audio_profile")}</span>
+              <strong>${state.settings.audioEnabled ? audioProfile : t("settings.passing_sound_off")}</strong>
+              <small>${state.settings.finishVoiceEnabled ? t("settings.finish_voice") : "-"}</small>
+            </article>
+          </div>
+          <div class="actions">
+            <button id="goEvents" class="btn btn-primary">${t("dashboard.create_event")}</button>
+            <button id="goTiming" class="btn">${t("dashboard.open_timing")}</button>
+            <button id="openDashboardOverlay" class="btn">${t("timing.open_overlay")}</button>
+            <button id="connectNow" class="btn">${t("dashboard.connect_decoder")}</button>
+            <button id="disconnectNow" class="btn">${t("timing.disconnect")}</button>
+            <button id="dashboardTestAudio" class="btn">${t("settings.test_audio")}</button>
+          </div>
         </div>
       </section>
     </div>
@@ -2022,6 +2063,15 @@ function renderDashboard() {
   });
 
   document.getElementById("connectNow")?.addEventListener("click", connectDecoder);
+  document.getElementById("disconnectNow")?.addEventListener("click", disconnectDecoder);
+  document.getElementById("openDashboardOverlay")?.addEventListener("click", openOverlayWindow);
+  document.getElementById("dashboardTestAudio")?.addEventListener("click", () => {
+    ensureAudioContext();
+    playPassingBeep();
+    if (state.settings.finishVoiceEnabled) {
+      setTimeout(playFinishSiren, 220);
+    }
+  });
 }
 
 function statCard(label, value, note) {
@@ -3984,11 +4034,18 @@ function renderOverlay() {
         active
           ? `
             <header class="overlay-header">
-              <div>
+              <div class="overlay-header-main">
                 ${branding.logoDataUrl ? `<img class="overlay-logo" src="${escapeHtml(branding.logoDataUrl)}" alt="logo" />` : ""}
-                <p class="overlay-kicker">${escapeHtml(getEventName(active.eventId))}</p>
+                <div class="overlay-header-copy">
-                <h1>${escapeHtml(active.name)} • ${escapeHtml(getSessionTypeLabel(active.type))}</h1>
+                  <div class="overlay-kicker-row">
-                <p>${escapeHtml(branding.brandName)} • ${escapeHtml(getStartModeLabel(active.startMode))} • ${escapeHtml(modeLabel)}</p>
+                    <p class="overlay-kicker">${escapeHtml(getEventName(active.eventId))}</p>
+                    <span class="pill">${escapeHtml(getSessionTypeLabel(active.type))}</span>
+                    <span class="pill">${escapeHtml(getStartModeLabel(active.startMode))}</span>
+                    <span class="pill">${escapeHtml(modeLabel)}</span>
+                  </div>
+                  <h1>${escapeHtml(active.name)}</h1>
+                  <p class="overlay-header-sub">${escapeHtml(branding.brandName || "JMK RB Live Event")}</p>
+                </div>
               </div>
               <div class="overlay-meta">
                 <button id="overlayFullscreen" class="btn overlay-fullscreen-btn" type="button">${t("overlay.fullscreen")}</button>
@@ -4414,7 +4471,7 @@ function renderSettings() {
   dom.view.innerHTML = `
     <section class="panel">
       <div class="panel-header"><h3>${t("settings.decoder")}</h3></div>
-      <form id="settingsForm" class="panel-body form-grid cols-5">
+      <form id="settingsForm" class="panel-body form-grid cols-3">
         <input name="wsUrl" value="${escapeHtml(state.settings.wsUrl)}" placeholder="ws://127.0.0.1:9000" />
         <input name="backendUrl" value="${escapeHtml(
           state.settings.backendUrl || getDefaultBackendUrl()
@@ -4423,50 +4480,59 @@ function renderSettings() {
           <input type="checkbox" name="autoReconnect" ${state.settings.autoReconnect ? "checked" : ""} />
           <span>${t("settings.auto_reconnect")}</span>
         </label>
-        <label class="toggle">
-          <input type="checkbox" name="audioEnabled" ${state.settings.audioEnabled ? "checked" : ""} />
-          <span>${t("settings.audio_enabled")}</span>
-        </label>
-        <select name="passingSoundMode">
-          <option value="off" ${state.settings.passingSoundMode === "off" ? "selected" : ""}>${t("settings.passing_sound_off")}</option>
-          <option value="beep" ${state.settings.passingSoundMode === "beep" ? "selected" : ""}>${t("settings.passing_sound_beep")}</option>
-          <option value="name" ${state.settings.passingSoundMode === "name" ? "selected" : ""}>${t("settings.passing_sound_name")}</option>
-        </select>
-        <label class="toggle">
-          <input type="checkbox" name="finishVoiceEnabled" ${state.settings.finishVoiceEnabled ? "checked" : ""} />
-          <span>${t("settings.finish_voice")}</span>
-        </label>
-        <label class="toggle">
-          <input type="checkbox" name="speakerPassingCueEnabled" ${state.settings.speakerPassingCueEnabled ? "checked" : ""} />
-          <span>${t("settings.speaker_passing_cue")}</span>
-        </label>
-        <label class="toggle">
-          <input type="checkbox" name="speakerLeaderCueEnabled" ${state.settings.speakerLeaderCueEnabled ? "checked" : ""} />
-          <span>${t("settings.speaker_leader_cue")}</span>
-        </label>
-        <label class="toggle">
-          <input type="checkbox" name="speakerFinishCueEnabled" ${state.settings.speakerFinishCueEnabled ? "checked" : ""} />
-          <span>${t("settings.speaker_finish_cue")}</span>
-        </label>
-        <label class="toggle">
-          <input type="checkbox" name="speakerBestLapCueEnabled" ${state.settings.speakerBestLapCueEnabled ? "checked" : ""} />
-          <span>${t("settings.speaker_bestlap_cue")}</span>
-        </label>
-        <label class="toggle">
-          <input type="checkbox" name="speakerTop3CueEnabled" ${state.settings.speakerTop3CueEnabled ? "checked" : ""} />
-          <span>${t("settings.speaker_top3_cue")}</span>
-        </label>
-        <label class="toggle">
-          <input type="checkbox" name="speakerSessionStartCueEnabled" ${state.settings.speakerSessionStartCueEnabled ? "checked" : ""} />
-          <span>${t("settings.speaker_start_cue")}</span>
-        </label>
         <button class="btn btn-primary" type="submit">${t("settings.save")}</button>
         <button id="settingsConnect" class="btn" type="button">${t("settings.connect_now")}</button>
       </form>
       <div class="panel-body">
         <p>${t("settings.expected_json")}: <code>{"msg":"PASSING", "transponder":232323, "rtc_time":"..."}</code></p>
-        <p>${t("settings.audio_note")}</p>
+        <p class="hint">${t("dashboard.live_note")}</p>
+      </div>
+    </section>
+
+    <section class="panel mt-16">
+      <div class="panel-header"><h3>${t("settings.audio")}</h3></div>
+      <div class="panel-body form-grid cols-4">
+        <label class="toggle">
+          <input type="checkbox" name="audioEnabled" form="settingsForm" ${state.settings.audioEnabled ? "checked" : ""} />
+          <span>${t("settings.audio_enabled")}</span>
+        </label>
+        <select name="passingSoundMode" form="settingsForm">
+          <option value="off" ${state.settings.passingSoundMode === "off" ? "selected" : ""}>${t("settings.passing_sound_off")}</option>
+          <option value="beep" ${state.settings.passingSoundMode === "beep" ? "selected" : ""}>${t("settings.passing_sound_beep")}</option>
+          <option value="name" ${state.settings.passingSoundMode === "name" ? "selected" : ""}>${t("settings.passing_sound_name")}</option>
+        </select>
+        <label class="toggle">
+          <input type="checkbox" name="finishVoiceEnabled" form="settingsForm" ${state.settings.finishVoiceEnabled ? "checked" : ""} />
+          <span>${t("settings.finish_voice")}</span>
+        </label>
         <button id="settingsTestAudio" class="btn" type="button">${t("settings.test_audio")}</button>
+        <label class="toggle">
+          <input type="checkbox" name="speakerPassingCueEnabled" form="settingsForm" ${state.settings.speakerPassingCueEnabled ? "checked" : ""} />
+          <span>${t("settings.speaker_passing_cue")}</span>
+        </label>
+        <label class="toggle">
+          <input type="checkbox" name="speakerLeaderCueEnabled" form="settingsForm" ${state.settings.speakerLeaderCueEnabled ? "checked" : ""} />
+          <span>${t("settings.speaker_leader_cue")}</span>
+        </label>
+        <label class="toggle">
+          <input type="checkbox" name="speakerFinishCueEnabled" form="settingsForm" ${state.settings.speakerFinishCueEnabled ? "checked" : ""} />
+          <span>${t("settings.speaker_finish_cue")}</span>
+        </label>
+        <label class="toggle">
+          <input type="checkbox" name="speakerBestLapCueEnabled" form="settingsForm" ${state.settings.speakerBestLapCueEnabled ? "checked" : ""} />
+          <span>${t("settings.speaker_bestlap_cue")}</span>
+        </label>
+        <label class="toggle">
+          <input type="checkbox" name="speakerTop3CueEnabled" form="settingsForm" ${state.settings.speakerTop3CueEnabled ? "checked" : ""} />
+          <span>${t("settings.speaker_top3_cue")}</span>
+        </label>
+        <label class="toggle">
+          <input type="checkbox" name="speakerSessionStartCueEnabled" form="settingsForm" ${state.settings.speakerSessionStartCueEnabled ? "checked" : ""} />
+          <span>${t("settings.speaker_start_cue")}</span>
+        </label>
+      </div>
+      <div class="panel-body">
+        <p>${t("settings.audio_note")}</p>
       </div>
     </section>
 

src/styles.css

@@ -450,6 +450,37 @@ select:focus {
   justify-content: flex-end;
 }
 
+.dashboard-live-stack {
+  display: grid;
+  gap: 14px;
+}
+
+.dashboard-live-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+  gap: 12px;
+}
+
+.dashboard-live-card {
+  border: 1px solid var(--line);
+  border-radius: 14px;
+  padding: 14px 16px;
+  background: rgba(255, 255, 255, 0.03);
+}
+
+.dashboard-live-card span,
+.dashboard-live-card small {
+  display: block;
+  color: var(--muted);
+}
+
+.dashboard-live-card strong {
+  display: block;
+  margin: 8px 0 4px;
+  font-family: Orbitron, sans-serif;
+  font-size: 1.1rem;
+}
+
 .quick-add-spacer {
   display: flex;
   align-items: center;
@@ -628,14 +659,34 @@ select:focus {
   display: flex;
   justify-content: space-between;
   gap: 16px;
-  align-items: flex-end;
+  align-items: center;
-  margin-bottom: 18px;
+  margin-bottom: 14px;
+}
+
+.overlay-header-main {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  min-width: 0;
+}
+
+.overlay-header-copy {
+  min-width: 0;
+}
+
+.overlay-kicker-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+  margin-bottom: 4px;
 }
 
 .overlay-header h1 {
-  margin: 4px 0;
+  margin: 0;
   font-family: Orbitron, sans-serif;
-  font-size: clamp(2rem, 4vw, 3.8rem);
+  font-size: clamp(1.35rem, 2.4vw, 2.3rem);
+  line-height: 1.05;
 }
 
 .overlay-kicker {
@@ -643,18 +694,25 @@ select:focus {
   color: var(--muted);
   text-transform: uppercase;
   letter-spacing: 0.1em;
+  font-size: 0.72rem;
+}
+
+.overlay-header-sub {
+  margin: 6px 0 0;
+  color: var(--muted);
+  font-size: 0.9rem;
 }
 
 .overlay-meta {
   text-align: right;
   display: grid;
   justify-items: end;
-  gap: 10px;
+  gap: 6px;
 }
 
 .overlay-clock {
   font-family: Orbitron, sans-serif;
-  font-size: clamp(2.6rem, 5vw, 4.8rem);
+  font-size: clamp(1.8rem, 3vw, 3rem);
   font-weight: 800;
 }
 
@@ -666,6 +724,7 @@ select:focus {
   color: var(--muted);
   text-transform: uppercase;
   letter-spacing: 0.08em;
+  font-size: 0.74rem;
 }
 
 .overlay-board {
@@ -1091,6 +1150,10 @@ select:focus {
     flex-direction: column;
   }
 
+  .overlay-header-main {
+    align-items: flex-start;
+  }
+
   .modal-overlay {
     padding: 12px;
   }