From 781cbf3263cfeef07293688eea76250412ea1cb4 Mon Sep 17 00:00:00 2001
From: Dorian <dorian@Dorians-MacBook-Air.local>
Date: Thu, 19 Mar 2026 20:00:59 +0000
Subject: [PATCH] =?UTF-8?q?fix:=20Federation=20layout=20=E2=80=94=20DID=20?=
 =?UTF-8?q?card,=20two-column=20nodes/peers=20grid?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- DID in glass-card top-right (desktop) / below title (mobile)
- Your Nodes + Peers in two-column grid (lg breakpoint)
- "Remove Dead Nodes" button for unreachable peers

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 neode-ui/src/views/Federation.vue | 40 ++++++++++++++++++++-----------
 1 file changed, 26 insertions(+), 14 deletions(-)

diff --git a/neode-ui/src/views/Federation.vue b/neode-ui/src/views/Federation.vue
index 4717193f..2f274803 100644
--- a/neode-ui/src/views/Federation.vue
+++ b/neode-ui/src/views/Federation.vue
@@ -15,18 +15,26 @@
           <h1 class="text-3xl font-bold text-white mb-2">Federation & Peers</h1>
           <p class="text-white/70">Connect, sync, and share with trusted nodes</p>
         </div>
-        <!-- Your Node DID — top right -->
-        <div v-if="selfDid" class="hidden md:flex items-center gap-2 shrink-0 mt-1">
-          <p class="text-xs text-white/40 font-mono truncate max-w-[200px] cursor-pointer" :title="selfDid" @click="copyDid">{{ didCopied ? 'Copied!' : shortDid(selfDid) }}</p>
-          <button @click="copyDid" class="glass-button px-2 py-1 rounded text-[10px]">{{ didCopied ? 'Copied!' : 'Copy DID' }}</button>
-          <button @click="showRotateModal = true" class="glass-button px-2 py-1 rounded text-[10px] text-orange-300">Rotate</button>
+        <!-- Your Node DID — top right card -->
+        <div v-if="selfDid" class="hidden md:block shrink-0">
+          <div class="glass-card px-4 py-3 flex items-center gap-3">
+            <div class="min-w-0">
+              <p class="text-[10px] text-white/40 mb-0.5">Your Node</p>
+              <p class="text-xs text-white/80 font-mono cursor-pointer" :title="selfDid" @click="copyDid">{{ didCopied ? 'Copied!' : shortDid(selfDid) }}</p>
+            </div>
+            <button @click="copyDid" class="glass-button px-2.5 py-1 rounded text-[10px]">{{ didCopied ? 'Copied!' : 'Copy' }}</button>
+            <button @click="showRotateModal = true" class="glass-button px-2.5 py-1 rounded text-[10px] text-orange-300">Rotate</button>
+          </div>
         </div>
       </div>
       <!-- Mobile: DID below title -->
-      <div v-if="selfDid" class="md:hidden flex items-center gap-2 mt-3">
-        <p class="text-xs text-white/40 font-mono truncate flex-1" :title="selfDid" @click="copyDid">{{ didCopied ? 'Copied!' : shortDid(selfDid) }}</p>
-        <button @click="copyDid" class="glass-button px-2 py-1 rounded text-[10px]">{{ didCopied ? 'Copied!' : 'Copy' }}</button>
-        <button @click="showRotateModal = true" class="glass-button px-2 py-1 rounded text-[10px] text-orange-300">Rotate</button>
+      <div v-if="selfDid" class="md:hidden glass-card px-4 py-3 mt-3 flex items-center gap-3">
+        <div class="min-w-0 flex-1">
+          <p class="text-[10px] text-white/40 mb-0.5">Your Node</p>
+          <p class="text-xs text-white/80 font-mono truncate cursor-pointer" :title="selfDid" @click="copyDid">{{ didCopied ? 'Copied!' : shortDid(selfDid) }}</p>
+        </div>
+        <button @click="copyDid" class="glass-button px-2.5 py-1 rounded text-[10px]">{{ didCopied ? 'Copied!' : 'Copy' }}</button>
+        <button @click="showRotateModal = true" class="glass-button px-2.5 py-1 rounded text-[10px] text-orange-300">Rotate</button>
       </div>
     </div>
 
@@ -192,9 +200,11 @@
       <p class="text-sm text-red-400">{{ error }}</p>
     </div>
 
-    <!-- Federated Nodes List -->
-    <div class="glass-card p-6 mb-6">
-      <!-- Your Nodes (Trusted) -->
+    <!-- Two-column: Your Nodes + Peers -->
+    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
+
+    <!-- Your Nodes (Trusted) -->
+    <div class="glass-card p-6">
       <h2 class="text-lg font-semibold text-white mb-4">Your Nodes <span v-if="trustedNodes.length > 0" class="text-sm font-normal text-white/50">({{ trustedNodes.length }})</span></h2>
 
       <div v-if="loading" class="flex items-center gap-3 py-8 justify-center">
@@ -255,8 +265,8 @@
       </div>
     </div>
 
-    <!-- Peers Section (Observer level) -->
-    <div class="glass-card p-6 mb-6 mt-6">
+    <!-- Peers (Observer level) -->
+    <div class="glass-card p-6">
       <div class="flex items-center justify-between mb-4">
         <h2 class="text-lg font-semibold text-white">Peers <span v-if="peerNodes.length > 0" class="text-sm font-normal text-white/50">({{ peerNodes.length }})</span></h2>
         <button
@@ -293,6 +303,8 @@
       </div>
     </div>
 
+    </div><!-- /grid -->
+
     </template>
 
     <!-- Node Detail Modal -->