From 973beb887ae024fabb4fb91a67eadb09c53f5212 Mon Sep 17 00:00:00 2001
From: Dorian <dorian@Dorians-MacBook-Air.local>
Date: Thu, 19 Mar 2026 19:44:54 +0000
Subject: [PATCH] =?UTF-8?q?fix:=20Federation=20UI=20=E2=80=94=20title,=20D?=
 =?UTF-8?q?ID=20in=20header,=20copy=20feedback,=20node=20count?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Title: "Federation & Peers"
- Your Node DID moved to top-right header row (desktop), below title (mobile)
- Copy button shows "Copied!" feedback for 2 seconds
- Removed "X federated nodes" from description, added count to section header
- Rotate button compact in header

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

diff --git a/neode-ui/src/views/Federation.vue b/neode-ui/src/views/Federation.vue
index ba363d89..1f4e5680 100644
--- a/neode-ui/src/views/Federation.vue
+++ b/neode-ui/src/views/Federation.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="pb-6">
-    <div class="mb-8">
+    <div class="mb-6">
       <button
         @click="router.push('/dashboard/web5')"
         class="flex items-center gap-2 text-white/50 hover:text-white/80 transition-colors text-sm mb-4"
@@ -10,23 +10,24 @@
         </svg>
         Back to Web5
       </button>
-      <h1 class="text-3xl font-bold text-white mb-2">Federation</h1>
-      <p class="text-white/70">Manage trusted node clusters and sync state across your network</p>
-      <p class="text-sm text-white/60 mt-2">{{ nodes.length }} federated node{{ nodes.length !== 1 ? 's' : '' }}</p>
-    </div>
-
-    <!-- My Node Identity -->
-    <div v-if="selfDid" class="glass-card p-4 mb-6">
-      <div class="flex items-center justify-between gap-4">
-        <div class="min-w-0 flex-1">
-          <p class="text-xs text-white/40 mb-1">Your Node DID</p>
-          <p class="text-sm text-white/70 font-mono truncate cursor-pointer" :title="selfDid" @click="copyDid">{{ selfDid }}</p>
+      <div class="flex items-start justify-between gap-4">
+        <div>
+          <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>
-        <div class="flex items-center gap-2 shrink-0">
-          <button @click="copyDid" class="glass-button px-3 py-1.5 rounded-lg text-xs">Copy</button>
-          <button @click="showRotateModal = true" class="glass-button px-3 py-1.5 rounded-lg text-xs text-orange-300">Rotate DID</button>
+        <!-- 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>
         </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>
     </div>
 
     <!-- Rotate DID Modal -->
@@ -173,7 +174,7 @@
 
     <!-- Federated Nodes List -->
     <div class="glass-card p-6 mb-6">
-      <h2 class="text-lg font-semibold text-white mb-4">Federated Nodes</h2>
+      <h2 class="text-lg font-semibold text-white mb-4">Federated Nodes <span v-if="nodes.length > 0" class="text-sm font-normal text-white/50">({{ nodes.length }})</span></h2>
 
       <div v-if="loading" class="flex items-center gap-3 py-8 justify-center">
         <div class="w-5 h-5 border-2 border-white/20 border-t-orange-400 rounded-full animate-spin"></div>
@@ -721,10 +722,13 @@ const rotatePassword = ref('')
 const rotatingDid = ref(false)
 const rotateError = ref('')
 const rotateSuccess = ref('')
+const didCopied = ref(false)
 
 function copyDid() {
   if (selfDid.value) {
     navigator.clipboard.writeText(selfDid.value).catch(() => {})
+    didCopied.value = true
+    setTimeout(() => { didCopied.value = false }, 2000)
   }
 }