From ec897e21e87333407aab648900518a1f61af36fd Mon Sep 17 00:00:00 2001
From: Louis King <jinglemansweep@gmail.com>
Date: Fri, 15 May 2026 21:05:08 +0100
Subject: [PATCH] fix: improve advert type badge and observer count UX

- Move route type badge left of observer count on mobile cards
- Hide route type badge when unknown instead of showing 'Unknown'
- Change observer count badge to badge-primary for visibility
- Remove satellite dish icon from observer count badge
---
 src/meshcore_hub/web/static/js/spa/components.js           | 2 +-
 src/meshcore_hub/web/static/js/spa/pages/advertisements.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/meshcore_hub/web/static/js/spa/components.js b/src/meshcore_hub/web/static/js/spa/components.js
index ad04b2e..e985fbb 100644
--- a/src/meshcore_hub/web/static/js/spa/components.js
+++ b/src/meshcore_hub/web/static/js/spa/components.js
@@ -542,7 +542,7 @@ export function observerIcons(observers) {
     if (!observers || observers.length === 0) return nothing;
     const names = observers.map(o => o.tag_name || o.name || truncateKey(o.public_key, 8));
     const tooltip = names.join(', ');
-    return html`<span class="observer-badge-group">\u{1F4E1}<span class="badge badge-sm badge-ghost cursor-help observer-badge" title=${tooltip}>${observers.length}</span></span>`;
+    return html`<span class="badge badge-sm badge-primary cursor-help observer-badge" title=${tooltip}>${observers.length}</span>`;
 }
 
 /**
diff --git a/src/meshcore_hub/web/static/js/spa/pages/advertisements.js b/src/meshcore_hub/web/static/js/spa/pages/advertisements.js
index a6bb124..f7b2f76 100644
--- a/src/meshcore_hub/web/static/js/spa/pages/advertisements.js
+++ b/src/meshcore_hub/web/static/js/spa/pages/advertisements.js
@@ -140,8 +140,8 @@ ${displayContent}`, container);
                     <div class="text-right flex-shrink-0">
                         <div class="text-xs opacity-60">${formatDateTimeShort(ad.received_at)}</div>
                         <div class="flex items-center justify-end gap-1">
-                            ${receiversBlock}
                             ${routeTypeBadge(ad.route_type)}
+                            ${receiversBlock}
                         </div>
                     </div>
                 </div>