Add compact mapping health indicator

public/app.js

@@ -22,6 +22,7 @@ const suggestedTitle = document.querySelector("#suggestedTitle");
 const suggestedList = document.querySelector("#suggestedList");
 const suggestedCloseButton = document.querySelector("#suggestedCloseButton");
 const mappingState = document.querySelector("#mappingState");
+const mappingStatusText = document.querySelector("#mappingStatusText");
 const mappingList = document.querySelector("#mappingList");
 const mappingDetails = document.querySelector("#mappingDetails");
 const findSourcesButton = document.querySelector("#findSourcesButton");
@@ -386,8 +387,7 @@ async function loadMappingSources() {
         renderMappingSources({ mapped: false, items: [], message: "Select manufacturer." });
         return;
     }
-    mappingState.textContent = "Loading mapping...";
-    mappingState.className = "mapping-state";
+    setMappingStatus("Loading mapping...", "is-loading");
     mappingList.replaceChildren();
     try {
         const params = new URLSearchParams({ manufacturerId, check: "1" });
@@ -409,8 +409,7 @@ async function loadMappingSources() {
 function renderMappingSources(data) {
     const items = data.items || [];
     if (!data.mapped || !items.length) {
-        mappingState.textContent = data.message || "Mapping missing";
-        mappingState.className = "mapping-state is-missing";
+        setMappingStatus(data.message || "Mapping missing", "is-missing");
         mappingList.replaceChildren();
         mappingDetails.open = true;
         return;
@@ -419,10 +418,10 @@ function renderMappingSources(data) {
     const failedCount = items.filter((item) => item.enabled && item.health && item.health !== "ok").length;
     const testedCount = items.filter((item) => item.enabled && item.health === "ok").length;
     const ready = enabledCount > 0 && failedCount === 0;
-    mappingState.textContent = ready
+    const statusText = ready
         ? `Sources OK ✓ (${testedCount}/${enabledCount})`
         : data.message || `Sources problem (${testedCount}/${enabledCount})`;
-    mappingState.className = ready ? "mapping-state is-ready" : "mapping-state is-missing";
+    setMappingStatus(statusText, ready ? "is-ready" : testedCount > 0 ? "is-warning" : "is-missing");
     mappingDetails.open = !ready || failedCount > 0;
     mappingList.replaceChildren(...items.map((item) => {
         const row = document.createElement("div");
@@ -437,6 +436,12 @@ function renderMappingSources(data) {
         return row;
     }));
 }
+function setMappingStatus(text, stateClass) {
+    mappingState.textContent = "";
+    mappingState.className = `mapping-state-dot ${stateClass}`;
+    mappingState.setAttribute("aria-label", text);
+    mappingStatusText.textContent = text;
+}
 function getMappingHealthText(item) {
     if (!item.enabled)
         return "off";