From cd02cd20f446098c8075459bb5f1c329415356a4 Mon Sep 17 00:00:00 2001
From: cproudlock <cproudlock@localhost>
Date: Mon, 13 Jul 2026 08:48:50 -0400
Subject: [PATCH] Frontend naming + CSS-variable cleanups (review low)

Naming convention (LOCKED): rename the ManifestEditor simulate state sim ->
simulateInputs / simResult -> simulateResult (+ .sim-result CSS class) - 'sim'
was banned standalone shorthand. Rename AssetRelationships props assetId ->
assetid and machineNumber -> machinenumber so a prop holding a DB field value
mirrors it verbatim; updated the five detail-page call sites (:assetid=).

CSS variables: SearchResults per-domain badge palette moved into CSS variables
on the container; the duplicated prefers-color-scheme dark block collapses to a
single set of variable overrides instead of restating all ten selectors.

frontend build green; vitest 49 pass; naming green; search badges + detail
relationships verified rendering with no console errors.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../src/components/AssetRelationships.vue     |  18 +--
 frontend/src/views/SearchResults.vue          | 133 +++++-------------
 .../src/views/geenforce/ManifestEditor.vue    |  28 ++--
 frontend/src/views/machines/MachineDetail.vue |   2 +-
 .../measuringtools/MeasuringToolDetail.vue    |   2 +-
 .../src/views/network/NetworkDeviceDetail.vue |   2 +-
 frontend/src/views/pcs/PCDetail.vue           |   2 +-
 frontend/src/views/printers/PrinterDetail.vue |   2 +-
 8 files changed, 64 insertions(+), 125 deletions(-)

diff --git a/frontend/src/components/AssetRelationships.vue b/frontend/src/components/AssetRelationships.vue
index 181c7b6..268f2e3 100644
--- a/frontend/src/components/AssetRelationships.vue
+++ b/frontend/src/components/AssetRelationships.vue
@@ -196,12 +196,12 @@ import { apiError } from '../utils/apiError'
 const toast = useToast()
 
 const props = defineProps({
-  assetId: {
+  assetid: {
     type: Number,
     default: null
   },
   // Alternative: lookup by machine/asset number
-  machineNumber: {
+  machinenumber: {
     type: String,
     default: null
   }
@@ -315,14 +315,14 @@ onMounted(async () => {
   }
 })
 
-watch(() => props.assetId, async () => {
+watch(() => props.assetid, async () => {
   await resolveAssetId()
   if (resolvedAssetId.value) {
     await loadRelationships()
   }
 })
 
-watch(() => props.machineNumber, async () => {
+watch(() => props.machinenumber, async () => {
   await resolveAssetId()
   if (resolvedAssetId.value) {
     await loadRelationships()
@@ -330,17 +330,17 @@ watch(() => props.machineNumber, async () => {
 })
 
 async function resolveAssetId() {
-  // If assetId is provided directly, use it
-  if (props.assetId) {
-    resolvedAssetId.value = props.assetId
+  // If assetid is provided directly, use it
+  if (props.assetid) {
+    resolvedAssetId.value = props.assetid
     lookupFailed.value = false
     return
   }
 
   // Otherwise, try to look up by machine number
-  if (props.machineNumber) {
+  if (props.machinenumber) {
     try {
-      const response = await assetsApi.lookup(props.machineNumber)
+      const response = await assetsApi.lookup(props.machinenumber)
       resolvedAssetId.value = response.data.data?.assetid
       lookupFailed.value = !resolvedAssetId.value
     } catch (error) {
diff --git a/frontend/src/views/SearchResults.vue b/frontend/src/views/SearchResults.vue
index 6f7a12f..3e7c524 100644
--- a/frontend/src/views/SearchResults.vue
+++ b/frontend/src/views/SearchResults.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="search-results">
     <div class="page-header">
       <h2>Search Results</h2>
       <span v-if="results.length" class="results-count">
@@ -385,56 +385,33 @@ watch(results, () => {
   flex-shrink: 0;
 }
 
-.result-type.machine {
-  background: #e3f2fd;
-  color: #1565c0;
+/* Per-domain badge palette. Values live in CSS variables on the container so
+   the dark theme overrides them in one place (below) instead of restating
+   every selector. Each badge rule just references its pair. */
+.search-results {
+  --rt-machine-bg: #e3f2fd;        --rt-machine-fg: #1565c0;
+  --rt-computer-bg: #e8f5e9;       --rt-computer-fg: #2e7d32;
+  --rt-application-bg: #fff3e0;    --rt-application-fg: #e65100;
+  --rt-knowledgebase-bg: #f3e5f5;  --rt-knowledgebase-fg: #7b1fa2;
+  --rt-printer-bg: #fce4ec;        --rt-printer-fg: #c2185b;
+  --rt-network-bg: #fff8e1;        --rt-network-fg: #f57f17;
+  --rt-measuring-bg: #e0f7fa;      --rt-measuring-fg: #00838f;
+  --rt-employee-bg: #e0f2f1;       --rt-employee-fg: #00695c;
+  --rt-notification-bg: #e8eaf6;   --rt-notification-fg: #283593;
+  --rt-subnet-bg: #fbe9e7;         --rt-subnet-fg: #bf360c;
 }
 
+.result-type.machine { background: var(--rt-machine-bg); color: var(--rt-machine-fg); }
 .result-type.pc,
-.result-type.computer {
-  background: #e8f5e9;
-  color: #2e7d32;
-}
-
-.result-type.application {
-  background: #fff3e0;
-  color: #e65100;
-}
-
-.result-type.knowledgebase {
-  background: #f3e5f5;
-  color: #7b1fa2;
-}
-
-.result-type.printer {
-  background: #fce4ec;
-  color: #c2185b;
-}
-
-.result-type.network_device {
-  background: #fff8e1;
-  color: #f57f17;
-}
-
-.result-type.measuring_tool {
-  background: #e0f7fa;
-  color: #00838f;
-}
-
-.result-type.employee {
-  background: #e0f2f1;
-  color: #00695c;
-}
-
-.result-type.notification {
-  background: #e8eaf6;
-  color: #283593;
-}
-
-.result-type.subnet {
-  background: #fbe9e7;
-  color: #bf360c;
-}
+.result-type.computer { background: var(--rt-computer-bg); color: var(--rt-computer-fg); }
+.result-type.application { background: var(--rt-application-bg); color: var(--rt-application-fg); }
+.result-type.knowledgebase { background: var(--rt-knowledgebase-bg); color: var(--rt-knowledgebase-fg); }
+.result-type.printer { background: var(--rt-printer-bg); color: var(--rt-printer-fg); }
+.result-type.network_device { background: var(--rt-network-bg); color: var(--rt-network-fg); }
+.result-type.measuring_tool { background: var(--rt-measuring-bg); color: var(--rt-measuring-fg); }
+.result-type.employee { background: var(--rt-employee-bg); color: var(--rt-employee-fg); }
+.result-type.notification { background: var(--rt-notification-bg); color: var(--rt-notification-fg); }
+.result-type.subnet { background: var(--rt-subnet-bg); color: var(--rt-subnet-fg); }
 
 .result-content {
   flex: 1;
@@ -486,55 +463,17 @@ watch(results, () => {
 }
 
 @media (prefers-color-scheme: dark) {
-  .result-type.machine {
-    background: rgba(21, 101, 192, 0.2);
-    color: #64b5f6;
-  }
-
-  .result-type.pc,
-  .result-type.computer {
-    background: rgba(46, 125, 50, 0.2);
-    color: #81c784;
-  }
-
-  .result-type.application {
-    background: rgba(230, 81, 0, 0.2);
-    color: #ffb74d;
-  }
-
-  .result-type.knowledgebase {
-    background: rgba(123, 31, 162, 0.2);
-    color: #ce93d8;
-  }
-
-  .result-type.printer {
-    background: rgba(194, 24, 91, 0.2);
-    color: #f48fb1;
-  }
-
-  .result-type.network_device {
-    background: rgba(245, 127, 23, 0.2);
-    color: #ffd54f;
-  }
-
-  .result-type.measuring_tool {
-    background: rgba(0, 131, 143, 0.2);
-    color: #80deea;
-  }
-
-  .result-type.employee {
-    background: rgba(0, 105, 92, 0.2);
-    color: #80cbc4;
-  }
-
-  .result-type.notification {
-    background: rgba(40, 53, 147, 0.2);
-    color: #9fa8da;
-  }
-
-  .result-type.subnet {
-    background: rgba(191, 54, 12, 0.2);
-    color: #ffab91;
+  .search-results {
+    --rt-machine-bg: rgba(21, 101, 192, 0.2);       --rt-machine-fg: #64b5f6;
+    --rt-computer-bg: rgba(46, 125, 50, 0.2);        --rt-computer-fg: #81c784;
+    --rt-application-bg: rgba(230, 81, 0, 0.2);      --rt-application-fg: #ffb74d;
+    --rt-knowledgebase-bg: rgba(123, 31, 162, 0.2);  --rt-knowledgebase-fg: #ce93d8;
+    --rt-printer-bg: rgba(194, 24, 91, 0.2);         --rt-printer-fg: #f48fb1;
+    --rt-network-bg: rgba(245, 127, 23, 0.2);        --rt-network-fg: #ffd54f;
+    --rt-measuring-bg: rgba(0, 131, 143, 0.2);       --rt-measuring-fg: #80deea;
+    --rt-employee-bg: rgba(0, 105, 92, 0.2);         --rt-employee-fg: #80cbc4;
+    --rt-notification-bg: rgba(40, 53, 147, 0.2);    --rt-notification-fg: #9fa8da;
+    --rt-subnet-bg: rgba(191, 54, 12, 0.2);          --rt-subnet-fg: #ffab91;
   }
 }
 </style>
diff --git a/frontend/src/views/geenforce/ManifestEditor.vue b/frontend/src/views/geenforce/ManifestEditor.vue
index 0b4424d..7607bf8 100644
--- a/frontend/src/views/geenforce/ManifestEditor.vue
+++ b/frontend/src/views/geenforce/ManifestEditor.vue
@@ -192,27 +192,27 @@
           <h3 class="section-title">Simulate: what would a PC get?</h3>
           <div class="settings-grid">
             <div class="setting-row">
-              <label><span>Subtype</span><input v-model="sim.subtype" placeholder="subtype" /></label>
+              <label><span>Subtype</span><input v-model="simulateInputs.subtype" placeholder="subtype" /></label>
             </div>
             <div class="setting-row">
-              <label><span>Hostname</span><input v-model="sim.hostname" placeholder="hostname" /></label>
+              <label><span>Hostname</span><input v-model="simulateInputs.hostname" placeholder="hostname" /></label>
             </div>
             <div class="setting-row">
-              <label><span>Machine #</span><input v-model="sim.machinenumber" placeholder="machine #" /></label>
+              <label><span>Machine #</span><input v-model="simulateInputs.machinenumber" placeholder="machine #" /></label>
             </div>
             <div class="setting-row">
-              <label><span>CMM version</span><input v-model="sim.cmmversion" placeholder="CMM version" /></label>
+              <label><span>CMM version</span><input v-model="simulateInputs.cmmversion" placeholder="CMM version" /></label>
             </div>
           </div>
           <button class="btn btn-primary" @click="runSimulate">Run</button>
-          <div v-if="simResult" class="sim-result">
+          <div v-if="simulateResult" class="simulate-result">
             <div>
-              <strong>Applies ({{ simResult.applied.length }}):</strong>
-              {{ simResult.applied.join(', ') || 'none' }}
+              <strong>Applies ({{ simulateResult.applied.length }}):</strong>
+              {{ simulateResult.applied.join(', ') || 'none' }}
             </div>
             <div class="muted">
               <strong>Filtered:</strong>
-              <span v-for="filtered in simResult.filtered" :key="filtered.name">
+              <span v-for="filtered in simulateResult.filtered" :key="filtered.name">
                 {{ filtered.name }} ({{ filtered.filteredby.join(',') }});
               </span>
             </div>
@@ -618,8 +618,8 @@ const versions = ref([])
 const showPreview = ref(false)
 const previewText = ref('')
 
-const sim = ref({ subtype: '', hostname: '', machinenumber: '', cmmversion: '' })
-const simResult = ref(null)
+const simulateInputs = ref({ subtype: '', hostname: '', machinenumber: '', cmmversion: '' })
+const simulateResult = ref(null)
 
 const compliance = ref(null)
 const complianceRows = computed(() => compliance.value?.rows || [])
@@ -655,7 +655,7 @@ async function exportShare() {
 async function selectScope(id) {
   selectedId.value = id
   showVersions.value = false
-  simResult.value = null
+  simulateResult.value = null
   compliance.value = null
   try {
     detail.value = payload(await api.get(`/geenforce/scopes/${id}`))
@@ -821,8 +821,8 @@ async function rollback(versionnumber) {
 // -- simulate / preview --
 async function runSimulate() {
   try {
-    const params = { ...sim.value }
-    simResult.value = payload(await api.get(
+    const params = { ...simulateInputs.value }
+    simulateResult.value = payload(await api.get(
       `/geenforce/scopes/${detail.value.scopeid}/simulate`, { params }))
   } catch (e) { error.value = 'Simulate failed' }
 }
@@ -929,7 +929,7 @@ loadApplications()
 .muted { color: var(--text-light); }
 
 /* Simulator result */
-.sim-result {
+.simulate-result {
   margin-top: 1rem;
   font-size: 0.9rem;
   display: flex;
diff --git a/frontend/src/views/machines/MachineDetail.vue b/frontend/src/views/machines/MachineDetail.vue
index 0e31ae0..566197a 100644
--- a/frontend/src/views/machines/MachineDetail.vue
+++ b/frontend/src/views/machines/MachineDetail.vue
@@ -208,7 +208,7 @@
           <WarrantyPanel :assetid="machine.assetid" :items="warranties" />
 
           <!-- All relationships (dualpath, controls, ...) -->
-          <AssetRelationships v-if="machine.assetid" :assetId="machine.assetid" />
+          <AssetRelationships v-if="machine.assetid" :assetid="machine.assetid" />
 
           <!-- Notes -->
           <div class="section-card" v-if="machine.notes">
diff --git a/frontend/src/views/measuringtools/MeasuringToolDetail.vue b/frontend/src/views/measuringtools/MeasuringToolDetail.vue
index a396ba3..a227b95 100644
--- a/frontend/src/views/measuringtools/MeasuringToolDetail.vue
+++ b/frontend/src/views/measuringtools/MeasuringToolDetail.vue
@@ -140,7 +140,7 @@
           <WarrantyPanel :assetid="tool.assetid" :items="warranties" />
 
           <!-- All relationships (partof, connectedto, ...) -->
-          <AssetRelationships v-if="tool.assetid" :assetId="tool.assetid" />
+          <AssetRelationships v-if="tool.assetid" :assetid="tool.assetid" />
 
           <!-- Notes -->
           <div class="section-card" v-if="tool.notes">
diff --git a/frontend/src/views/network/NetworkDeviceDetail.vue b/frontend/src/views/network/NetworkDeviceDetail.vue
index c52af30..9a1ec71 100644
--- a/frontend/src/views/network/NetworkDeviceDetail.vue
+++ b/frontend/src/views/network/NetworkDeviceDetail.vue
@@ -154,7 +154,7 @@
         <!-- Relationships -->
         <AssetRelationships
           v-if="device.assetid"
-          :assetId="device.assetid"
+          :assetid="device.assetid"
         />
 
         <!-- Notes -->
diff --git a/frontend/src/views/pcs/PCDetail.vue b/frontend/src/views/pcs/PCDetail.vue
index bc6e637..b7c501a 100644
--- a/frontend/src/views/pcs/PCDetail.vue
+++ b/frontend/src/views/pcs/PCDetail.vue
@@ -213,7 +213,7 @@
           <WarrantyPanel :assetid="computer.assetid" :items="warranties" />
 
           <!-- All relationships (controls, defaultprinter, ...) -->
-          <AssetRelationships v-if="computer.assetid" :assetId="computer.assetid" />
+          <AssetRelationships v-if="computer.assetid" :assetid="computer.assetid" />
 
           <!-- Notes -->
           <div class="section-card" v-if="computer.notes">
diff --git a/frontend/src/views/printers/PrinterDetail.vue b/frontend/src/views/printers/PrinterDetail.vue
index 751b4c7..62f9a9b 100644
--- a/frontend/src/views/printers/PrinterDetail.vue
+++ b/frontend/src/views/printers/PrinterDetail.vue
@@ -179,7 +179,7 @@
           <WarrantyPanel :assetid="printer.assetid" :items="warranties" />
 
           <!-- All relationships (defaultprinter, connectedto, ...) -->
-          <AssetRelationships v-if="printer.assetid" :assetId="printer.assetid" />
+          <AssetRelationships v-if="printer.assetid" :assetid="printer.assetid" />
 
           <!-- Notes -->
           <div class="section-card" v-if="printer.notes">