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

fix: Federation UI — title, DID in header, copy feedback, node count

Browse Source 
- 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>
This commit is contained in:
Dorian 2026-03-19 19:44:54 +00:00
parent f0e33b91ac
commit 923d6804a7
1 changed files with 20 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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)
}
}