feat(ui): render the status chips and their split-flap labels from a store

ShellFeedback publishes the loading status and the road network chip, and
CctvControls the camera grid chip, to the gev-status store; the scene
chrome renders them. SplitFlapText plays the departure-board cascade that
splitFlap.js plans, writing only the label's one text node, and rests when
its owner is destroyed. setSplitFlapText and disposeSplitFlap are gone.

scripts/qa-ui-disposal.mjs

@@ -118,10 +118,18 @@ try {
       if (type === 'resize' && callback === resizeHandler) counts.resize++;
       return removeEventListener.call(this, type, callback, options);
     };
-    const { setSplitFlapText } = await import('/src/splitFlap.js');
+    // Through the owner, so its copy of the label and the store agree.
     const feedbackLabel = document.getElementById('global-loading-label');
-    setSplitFlapText(feedbackLabel, 'CHECKING LIVE DATA');
-    setSplitFlapText(feedbackLabel, 'LOAD COMPLETE');
+    for (const label of ['CHECKING LIVE DATA', 'LOAD COMPLETE']) {
+      ui._feedback._publishLoading({
+        hidden: false,
+        state: 'loading',
+        label,
+        detail: '',
+      });
+      // Vue renders on a microtask; a task later the label shows it.
+      await new Promise((resolve) => setTimeout(resolve));
+    }
     const permanentText =
       feedbackLabel.querySelector('.gev-flap-text')?.firstChild;
     let stateNotifications = 0;
@@ -202,6 +210,7 @@ try {
           feedbackLabel.querySelector('.gev-flap-text')?.firstChild ===
             permanentText &&
           permanentText.data === 'LOAD COMPLETE' &&
+          document.getElementById('global-loading-status').hidden &&
           !feedbackLabel.classList.contains('gev-flap-active') &&
           feedbackLabel.querySelector('.gev-flap-cells')?.childNodes.length ===
             0,