From c7cd068e1a91050e3434aee12901d63ab59fdea4 Mon Sep 17 00:00:00 2001
From: archipelago <archipelago@localhost>
Date: Tue, 16 Jun 2026 10:41:00 -0400
Subject: [PATCH] =?UTF-8?q?feat(connected-nodes):=20cap=20tabs=20at=20~4?=
 =?UTF-8?q?=20w/=20scroll;=20node=E2=86=92Federation,=20message=E2=86=92ch?=
 =?UTF-8?q?at=20(#37)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- All four tabs (trusted/observers/messages/requests) capped at max-h-72 with
  internal scroll, so the screen stays short instead of growing very long.
- Clicking a node row navigates to that node in the Federation screen
  (?node=did); the Message button (stop-propagation) deep-links to that peer\047s
  mesh chat (?peer=), using the Mesh.vue ?peer handler.

type-check clean.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 neode-ui/src/views/web5/Web5ConnectedNodes.vue | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/neode-ui/src/views/web5/Web5ConnectedNodes.vue b/neode-ui/src/views/web5/Web5ConnectedNodes.vue
index fde47b7a..aaaf526a 100644
--- a/neode-ui/src/views/web5/Web5ConnectedNodes.vue
+++ b/neode-ui/src/views/web5/Web5ConnectedNodes.vue
@@ -78,7 +78,7 @@
     </div>
 
     <!-- Trusted tab -->
-    <div v-show="nodesContainerTab === 'trusted'" class="space-y-2 flex-1 overflow-y-auto">
+    <div v-show="nodesContainerTab === 'trusted'" class="space-y-2 max-h-72 overflow-y-auto">
       <div v-if="loadingPeers && peers.length === 0" class="p-4 text-center text-white/60 text-sm">
         {{ t('common.loading') }}
       </div>
@@ -91,7 +91,8 @@
       <div
         v-for="p in peers"
         :key="p.pubkey"
-        class="flex items-center justify-between p-3 bg-white/5 rounded-lg"
+        @click="router.push({ path: '/dashboard/server/federation', query: { node: p.did || p.pubkey || p.onion } })"
+        class="flex items-center justify-between p-3 bg-white/5 rounded-lg cursor-pointer hover:bg-white/10 transition-colors"
       >
         <div class="flex items-center gap-3 min-w-0">
           <div class="w-2 h-2 rounded-full shrink-0" :class="peerReachable[p.onion] ? 'bg-green-400' : 'bg-amber-400'"></div>
@@ -101,7 +102,7 @@
           </div>
         </div>
         <button
-          @click="router.push('/dashboard/mesh')"
+          @click.stop="router.push({ path: '/dashboard/mesh', query: { peer: p.pubkey || p.did || p.onion } })"
           class="px-2 py-1 text-xs rounded bg-orange-500/20 text-orange-400 hover:bg-orange-500/30 transition-colors shrink-0"
         >
           {{ t('web5.message') }}
@@ -110,7 +111,7 @@
     </div>
 
     <!-- Observers tab -->
-    <div v-show="nodesContainerTab === 'observers'" class="space-y-2 flex-1 overflow-y-auto">
+    <div v-show="nodesContainerTab === 'observers'" class="space-y-2 max-h-72 overflow-y-auto">
       <div v-if="loadingPeers && observers.length === 0" class="p-4 text-center text-white/60 text-sm">
         {{ t('common.loading') }}
       </div>
@@ -123,7 +124,8 @@
       <div
         v-for="p in observers"
         :key="p.pubkey"
-        class="flex items-center justify-between p-3 bg-white/5 rounded-lg"
+        @click="router.push({ path: '/dashboard/server/federation', query: { node: p.did || p.pubkey || p.onion } })"
+        class="flex items-center justify-between p-3 bg-white/5 rounded-lg cursor-pointer hover:bg-white/10 transition-colors"
       >
         <div class="flex items-center gap-3 min-w-0">
           <div class="w-2 h-2 rounded-full shrink-0" :class="peerReachable[p.onion] ? 'bg-green-400' : 'bg-amber-400'"></div>
@@ -139,7 +141,7 @@
     </div>
 
     <!-- Messages tab -->
-    <div v-show="nodesContainerTab === 'messages'" class="space-y-2 flex-1 overflow-y-auto">
+    <div v-show="nodesContainerTab === 'messages'" class="space-y-2 max-h-72 overflow-y-auto">
       <div v-if="loadingMessages && receivedMessages.length === 0" class="p-4 text-center text-white/60 text-sm">
         {{ t('common.loading') }}
       </div>
@@ -163,7 +165,7 @@
     </div>
 
     <!-- Requests tab -->
-    <div v-show="nodesContainerTab === 'requests'" class="space-y-2 flex-1 overflow-y-auto">
+    <div v-show="nodesContainerTab === 'requests'" class="space-y-2 max-h-72 overflow-y-auto">
       <div v-if="loadingRequests && connectionRequests.length === 0" class="p-4 text-center text-white/60 text-sm">
         {{ t('common.loading') }}
       </div>