fix: redesign earth hud interactions and legend behavior

frontend/public/earth/js/ui.js

@@ -1,6 +1,8 @@
 // ui.js - UI update functions
 
 let statusTimeoutId = null;
+let statusHideTimeoutId = null;
+let statusReplayTimeoutId = null;
 
 // Show status message
 export function showStatusMessage(message, type = "info") {
@@ -12,15 +14,44 @@ export function showStatusMessage(message, type = "info") {
     statusTimeoutId = null;
   }
 
-  statusEl.textContent = message;
-  statusEl.className = `status-message ${type}`;
-  statusEl.style.display = "block";
+  if (statusHideTimeoutId) {
+    clearTimeout(statusHideTimeoutId);
+    statusHideTimeoutId = null;
+  }
 
-  statusTimeoutId = setTimeout(() => {
-    statusEl.style.display = "none";
-    statusEl.textContent = "";
-    statusTimeoutId = null;
-  }, 3000);
+  if (statusReplayTimeoutId) {
+    clearTimeout(statusReplayTimeoutId);
+    statusReplayTimeoutId = null;
+  }
+
+  const startShow = () => {
+    statusEl.textContent = message;
+    statusEl.className = `status-message ${type}`;
+    statusEl.style.display = "block";
+    statusEl.offsetHeight;
+    statusEl.classList.add("visible");
+
+    statusTimeoutId = setTimeout(() => {
+      statusEl.classList.remove("visible");
+      statusHideTimeoutId = setTimeout(() => {
+        statusEl.style.display = "none";
+        statusEl.textContent = "";
+        statusHideTimeoutId = null;
+      }, 280);
+      statusTimeoutId = null;
+    }, 3000);
+  };
+
+  if (statusEl.classList.contains("visible")) {
+    statusEl.classList.remove("visible");
+    statusReplayTimeoutId = setTimeout(() => {
+      startShow();
+      statusReplayTimeoutId = null;
+    }, 180);
+    return;
+  }
+
+  startShow();
 }
 
 // Update coordinates display