From f93c37748329bf06eabd2f474259984d3a5bd279 Mon Sep 17 00:00:00 2001
From: you <you@example.com>
Date: Thu, 19 Mar 2026 06:22:42 +0000
Subject: [PATCH] Fix node claiming: grid not updating after first claim

myNodesGrid element was only rendered when hasNodes was true on
initial page load. Claiming first node called loadMyNodes() but
the grid container didn't exist. Now always render the grid div.
Also dynamically update hero text and hide onboarding prompt.
---
 public/home.js | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/public/home.js b/public/home.js
index 1429f63a..8add3533 100644
--- a/public/home.js
+++ b/public/home.js
@@ -72,7 +72,7 @@
         </div>
       </section>
 
-      ${hasNodes ? '<div class="my-nodes-grid" id="myNodesGrid"><div class="my-nodes-loading">Loading your nodes…</div></div>' : ''}
+      ${hasNodes ? '<div class="my-nodes-grid" id="myNodesGrid"><div class="my-nodes-loading">Loading your nodes…</div></div>' : '<div class="my-nodes-grid" id="myNodesGrid"></div>'}
 
       ${!hasNodes ? `
         <div class="onboarding-prompt">
@@ -209,6 +209,18 @@
     const grid = document.getElementById('myNodesGrid');
     if (!grid) return;
     const myNodes = getMyNodes();
+
+    // Update hero text dynamically
+    const h1 = document.querySelector('.home-hero h1');
+    const heroP = document.querySelector('.home-hero p');
+    if (myNodes.length) {
+      if (h1) h1.textContent = 'My Mesh';
+      if (heroP) heroP.textContent = 'Your nodes at a glance. Add more by searching below.';
+      // Hide onboarding prompt
+      const onboard = document.querySelector('.onboarding-prompt');
+      if (onboard) onboard.style.display = 'none';
+    }
+
     if (!myNodes.length) {
       grid.innerHTML = '';
       return;