From f269f5be4f8d53fdde9ba318d15f6a10a25fa62a Mon Sep 17 00:00:00 2001
From: Sameh Khamis <sameh@halfpixel.ai>
Date: Sun, 1 Nov 2026 13:13:55 -0800
Subject: [PATCH] refactor(cockpit): share one header frame between the Cockpit
 cards

The Contact and briefing cards' headers repeated the same frame: the title
grid over a hairline, the accent kicker and the square action buttons. It
lives in cockpit-card-header, cockpit-card-kicker and cockpit-card-actions
now, beside each card's own classes, which keep only their spacing and
sizes; the cyber theme targets the shared classes. The computed styles of
every header element are unchanged in the default and cyber themes,
expanded and collapsed.
---
 src/cockpitMarkup.test.mjs              |  2 +-
 src/ui/styles/cockpit.css               | 82 ++++++++++---------------
 src/ui/styles/cyber.css                 |  6 +-
 src/ui/views/panels/CockpitBriefing.vue |  6 +-
 src/ui/views/panels/CockpitContext.vue  |  6 +-
 5 files changed, 42 insertions(+), 60 deletions(-)

diff --git a/src/cockpitMarkup.test.mjs b/src/cockpitMarkup.test.mjs
index c6623549b..a404ab381 100644
--- a/src/cockpitMarkup.test.mjs
+++ b/src/cockpitMarkup.test.mjs
@@ -1188,7 +1188,7 @@ test('cockpit summary presents the focused item as Contact', () => {
   const match = html.match(/<aside id="cockpit-context"[\s\S]*?<\/aside>/);
   assert.ok(match, 'cockpit Contact summary is missing');
   assert.match(match[0], /aria-label="Contact cockpit summary"/);
-  assert.match(match[0], /class="cockpit-context-kicker">CONTACT</);
+  assert.match(match[0], /class="cockpit-card-kicker cockpit-context-kicker">CONTACT</);
   assert.match(match[0], /aria-label="Contact navigation"/);
   assert.match(
     match[0],
diff --git a/src/ui/styles/cockpit.css b/src/ui/styles/cockpit.css
index 8116380b3..bce614b9f 100644
--- a/src/ui/styles/cockpit.css
+++ b/src/ui/styles/cockpit.css
@@ -969,23 +969,50 @@ body.cockpit-mode #view-switcher button {
 .cockpit-context-window[data-state='lost'] {
   border-top-color: rgba(213, 168, 99, 0.72);
 }
-.cockpit-context-header {
+/* The Cockpit cards' headers (Contact, the briefing) share their frame: a
+   title column over a hairline, a kicker in the accent, and a row of square
+   actions. Each card sets only its spacing and sizes. */
+.cockpit-card-header {
   display: grid;
   grid-template-columns: minmax(0, 1fr) auto;
   align-items: center;
-  gap: 5px 10px;
-  padding: 0 5px 7px;
   border-bottom: 1px solid
     color-mix(in srgb, var(--cockpit-accent) 22%, transparent);
 }
-.cockpit-context-header > div {
+.cockpit-card-header > div {
   display: grid;
   gap: 2px;
 }
-.cockpit-context-kicker {
+.cockpit-card-kicker {
   color: var(--cockpit-accent);
-  font-size: 8px;
   font-weight: 700;
+}
+.cockpit-card-actions {
+  display: flex;
+}
+.cockpit-card-actions button {
+  display: grid;
+  height: 24px;
+  place-items: center;
+  padding: 0;
+  border: 1px solid color-mix(in srgb, var(--cockpit-accent) 30%, transparent);
+  border-radius: 5px;
+  background: rgba(0, 7, 12, 0.72);
+  color: color-mix(in srgb, var(--cockpit-accent) 82%, white);
+  cursor: pointer;
+}
+.cockpit-card-actions button:hover,
+.cockpit-card-actions button:focus-visible {
+  border-color: var(--cockpit-accent);
+  color: #fff;
+  outline: none;
+}
+.cockpit-context-header {
+  gap: 5px 10px;
+  padding: 0 5px 7px;
+}
+.cockpit-context-kicker {
+  font-size: 8px;
   letter-spacing: 0.2em;
 }
 #cockpit-context-subject {
@@ -1041,26 +1068,10 @@ body.cockpit-mode #view-switcher button {
   outline: none;
 }
 .cockpit-context-actions {
-  display: flex;
   gap: 4px;
 }
 .cockpit-context-actions button {
-  display: grid;
   width: 28px;
-  height: 24px;
-  place-items: center;
-  padding: 0;
-  border: 1px solid color-mix(in srgb, var(--cockpit-accent) 30%, transparent);
-  border-radius: 5px;
-  background: rgba(0, 7, 12, 0.72);
-  color: color-mix(in srgb, var(--cockpit-accent) 82%, white);
-  cursor: pointer;
-}
-.cockpit-context-actions button:hover,
-.cockpit-context-actions button:focus-visible {
-  border-color: var(--cockpit-accent);
-  color: #fff;
-  outline: none;
 }
 .cockpit-context-actions button:disabled {
   border-color: rgba(244, 251, 255, 0.1);
@@ -1500,17 +1511,8 @@ body.cockpit-mode #view-switcher button {
   width: 100%;
 }
 .cockpit-signal-header {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) auto;
-  align-items: center;
   gap: 10px;
   padding: 0 4px 7px 8px;
-  border-bottom: 1px solid
-    color-mix(in srgb, var(--cockpit-accent) 22%, transparent);
-}
-.cockpit-signal-header > div {
-  display: grid;
-  gap: 2px;
 }
 html:not([lang='en']) .cockpit-signal-header > div {
   min-width: 0;
@@ -1526,9 +1528,7 @@ html:not([lang='en']) .cockpit-signal-kicker {
   letter-spacing: 0.1em;
 }
 .cockpit-signal-kicker {
-  color: var(--cockpit-accent);
   font-size: 8px;
-  font-weight: 700;
   letter-spacing: 0.18em;
 }
 .cockpit-signal-kicker i {
@@ -1542,7 +1542,6 @@ html:not([lang='en']) .cockpit-signal-kicker {
   animation: cockpit-live 1.6s ease-in-out infinite;
 }
 .cockpit-brief-actions {
-  display: flex;
   align-items: center;
   gap: 3px;
 }
@@ -1552,22 +1551,7 @@ html:not([lang='en']) .cockpit-brief-actions > * {
   flex-shrink: 0;
 }
 .cockpit-brief-actions button {
-  display: grid;
   width: 23px;
-  height: 24px;
-  place-items: center;
-  padding: 0;
-  border: 1px solid color-mix(in srgb, var(--cockpit-accent) 30%, transparent);
-  border-radius: 5px;
-  background: rgba(0, 7, 12, 0.72);
-  color: color-mix(in srgb, var(--cockpit-accent) 82%, white);
-  cursor: pointer;
-}
-.cockpit-brief-actions button:hover,
-.cockpit-brief-actions button:focus-visible {
-  border-color: var(--cockpit-accent);
-  color: #fff;
-  outline: none;
 }
 .cockpit-brief-actions .material-symbols-outlined {
   font-size: 14px;
diff --git a/src/ui/styles/cyber.css b/src/ui/styles/cyber.css
index 4f049c47a..122357e97 100644
--- a/src/ui/styles/cyber.css
+++ b/src/ui/styles/cyber.css
@@ -2510,15 +2510,13 @@
   );
 }
 
-:root[data-ui-theme='cyber']
-  body.cockpit-mode
-  :is(.cockpit-context-header, .cockpit-signal-header) {
+:root[data-ui-theme='cyber'] body.cockpit-mode .cockpit-card-header {
   border-bottom-color: rgba(105, 203, 209, 0.25);
 }
 
 :root[data-ui-theme='cyber']
   body.cockpit-mode
-  :is(.cockpit-context-kicker, .cockpit-signal-kicker, .cockpit-route-kicker) {
+  :is(.cockpit-card-kicker, .cockpit-route-kicker) {
   color: var(--cockpit-caution);
 }
 
diff --git a/src/ui/views/panels/CockpitBriefing.vue b/src/ui/views/panels/CockpitBriefing.vue
index d5937a904..e8eea375d 100644
--- a/src/ui/views/panels/CockpitBriefing.vue
+++ b/src/ui/views/panels/CockpitBriefing.vue
@@ -39,12 +39,12 @@ function leaveSignals() {
 <template>
   <aside id="cockpit-signal-stream" class="cockpit-signal-window" aria-label="Cockpit briefing carousel" :hidden="!presence?.active" data-i18n-aria-label v-bind="streamState" ref="stream">
     <CockpitRoute />
-    <header class="cockpit-signal-header">
+    <header class="cockpit-card-header cockpit-signal-header">
       <div class="cockpit-brief-heading">
-        <span id="cockpit-brief-kicker" class="cockpit-signal-kicker"><i aria-hidden="true"></i> {{ b.kicker }}</span>
+        <span id="cockpit-brief-kicker" class="cockpit-card-kicker cockpit-signal-kicker"><i aria-hidden="true"></i> {{ b.kicker }}</span>
         <strong id="cockpit-brief-subtitle">{{ b.subtitle }}</strong>
       </div>
-      <nav class="cockpit-brief-actions" aria-label="Cockpit briefing controls" data-i18n-aria-label>
+      <nav class="cockpit-card-actions cockpit-brief-actions" aria-label="Cockpit briefing controls" data-i18n-aria-label>
         <button id="cockpit-brief-previous" type="button" aria-label="Previous briefing page" title="Previous briefing page" data-i18n-aria-label data-i18n-title>
           <span class="material-symbols-outlined" aria-hidden="true">chevron_left</span>
         </button>
diff --git a/src/ui/views/panels/CockpitContext.vue b/src/ui/views/panels/CockpitContext.vue
index 0977ed075..d64e15a20 100644
--- a/src/ui/views/panels/CockpitContext.vue
+++ b/src/ui/views/panels/CockpitContext.vue
@@ -30,12 +30,12 @@ const weatherLabel = computed(() =>
 
 <template>
   <aside id="cockpit-context" class="cockpit-context-window" aria-label="Contact cockpit summary" :hidden="!presence?.context" data-i18n-aria-label :data-state="c.state ?? undefined" :data-collapsed="presence ? String(collapsed) : undefined">
-    <header class="cockpit-context-header">
+    <header class="cockpit-card-header cockpit-context-header">
       <div>
-        <span data-i18n class="cockpit-context-kicker">CONTACT</span>
+        <span data-i18n class="cockpit-card-kicker cockpit-context-kicker">CONTACT</span>
         <strong id="cockpit-context-subject">{{ c.subject }}</strong>
       </div>
-      <nav class="cockpit-context-actions" aria-label="Contact navigation" data-i18n-aria-label>
+      <nav class="cockpit-card-actions cockpit-context-actions" aria-label="Contact navigation" data-i18n-aria-label>
         <button id="cockpit-context-previous" type="button" :disabled="!c.canPrevious" aria-label="Previous — prior visited contact in the 250 km window" title="Previous — prior visited contact in the 250 km window" data-i18n-aria-label data-i18n-title>
           <span class="material-symbols-outlined" aria-hidden="true">skip_previous</span>
         </button>