lfg2025/archy
1
0
Fork 0
Code Issues 7 Pull Requests Actions Packages Projects Releases 33 Wiki Activity

fix: Federation layout — DID card, two-column nodes/peers grid

Browse Source 
- 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>
This commit is contained in:
Dorian
2026-03-19 20:00:59 +00:00
parent f1d9ecc392
commit 781cbf3263
1 changed files with 26 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
neode-ui/src/views/Federation.vue
View File

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