From 65ec669e48f848fe230a15425f55402930b06ecc Mon Sep 17 00:00:00 2001
From: Louis King <jinglemansweep@gmail.com>
Date: Sun, 19 Jul 2026 19:56:34 +0100
Subject: [PATCH] fix: n is not defined in observer filter badges

Commit 37f8d7a re-introduced emoji extraction in observerFilterBadges
after d1a3605 had refactored the iteration variable from `n` (node
object) to `area` (plain string). Three references to n._displayName
and n.public_key were left behind, throwing ReferenceError the moment
any observer had an area tag.

Adverts and Messages pages surface this as a warning badge with the
error message; the early return hides the bug on deployments with no
area-tagged observers.

Replace n.X with area (the iteration variable). Emoji extraction and
label fallback now operate on the area string directly.
---
 src/meshcore_hub/web/static/js/spa/components.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/meshcore_hub/web/static/js/spa/components.js b/src/meshcore_hub/web/static/js/spa/components.js
index 1232bd9..1b82690 100644
--- a/src/meshcore_hub/web/static/js/spa/components.js
+++ b/src/meshcore_hub/web/static/js/spa/components.js
@@ -659,12 +659,12 @@ export function observerFilterBadges({ areas, disabled, onToggle, extraClass = '
             const title = enabled
                 ? t('common.filter_observer_disable')
                 : t('common.filter_observer_enable');
-            const emoji = extractFirstEmoji(n._displayName);
-            const label = emoji ? (n._displayName.replace(emoji, '').trim() || n._displayName) : n._displayName;
+            const emoji = extractFirstEmoji(area);
+            const label = emoji ? (area.replace(emoji, '').trim() || area) : area;
             return html`<button type="button"
                 class="${cls} cursor-pointer"
                 title=${title}
-                @click=${() => onToggle(n.public_key)}>${emoji ? html`<span class="mr-1">${emoji}</span>` : nothing}${label}</button>`;
+                @click=${() => onToggle(area)}>${emoji ? html`<span class="mr-1">${emoji}</span>` : nothing}${label}</button>`;
         })}
     </div>`;
 }