Feature: Nostr Relay Health Indicators & Global Status Color System

Author: YuurinBee

src/index.html

@@ -722,7 +722,7 @@ <h4>Recent Activity</h4>
               <span class="icon icon-disable"></span>
               Disable
           </button>
-          <button class="btn primary-btn" id="relay-info-done">Close</button>
+          <button class="btn cancel-btn" id="relay-info-done">Close</button>
       </div>
     </div>
   </div>

src/main.js

@@ -3727,7 +3727,17 @@ async function refreshRelayInfoDialog() {
     // Refresh metrics
     try {
         const metrics = await invoke('get_relay_metrics', { url });
-        document.getElementById('relay-info-ping').textContent = metrics.ping_ms ? `${metrics.ping_ms}ms` : '--';
+        const pingEl = document.getElementById('relay-info-ping');
+        if (metrics.ping_ms) {
+            pingEl.textContent = `${metrics.ping_ms}ms`;
+            pingEl.style.color = metrics.ping_ms < 200 ? 'var(--status-excellent)'
+                : metrics.ping_ms < 500 ? 'var(--status-good)'
+                : metrics.ping_ms < 1000 ? 'var(--status-fair)'
+                : 'var(--status-poor)';
+        } else {
+            pingEl.textContent = '--';
+            pingEl.style.color = '';
+        }
         if (metrics.last_check) {
             const lastCheck = new Date(metrics.last_check * 1000);
             const now = new Date();

src/styles.css

@@ -309,6 +309,10 @@
   --danger-red: #FC595C;
   --danger-color: #FC595C;  /* default: red for all themes */
   --danger-color-hover: color-mix(in srgb, var(--danger-color) 10%, transparent);
+  --status-excellent: #59fcb3;
+  --status-good: #FCE459;
+  --status-fair: #FCA559;
+  --status-poor: var(--danger-color);
   font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
   font-size: 16px;
   line-height: 24px;
@@ -9316,7 +9320,7 @@ select:disabled:hover {
 
 #relay-info-url {
     text-align: left;
-    color: var(--primary-color);
+    color: #fff;
     font-size: 16px;
     margin: 0 0 16px 0;
 }
@@ -9331,6 +9335,10 @@ select:disabled:hover {
     margin: 0;
 }
 
+#relay-info-done {
+  border: 2px solid #474747;
+}
+
 .relay-dialog-content {
   padding: 20px;
   display: flex;

src/themes/vector/dark.css

@@ -586,6 +586,10 @@ select:disabled {
     color: var(--accent-color);
 }
 
+.relay-dialog .relay-form-select {
+    border: 1px solid #262626;
+}
+
 .aggro-glitch-img {
   content: url('../../icons/aggro-glitch.gif');
   width: 64px;