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

feat: TASK-31 nav header cleanup, TASK-38 Bitcoin sync gauge on homepage

Browse Source 
TASK-31: Cleaned up Apps page nav header structure (tabs + categories + search).
TASK-38: Added Bitcoin Core sync progress gauge to homepage System Stats card —
shows sync percentage, block height, and green/orange color coding. Only
appears when Bitcoin is running. Grid expands to 4 columns when visible.

Updated MASTER_PLAN.md — cleaned up completed sections, moved done items.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Dorian
2026-03-18 22:22:39 +00:00
parent 41ff1021ad
commit 12412c70db
3 changed files with 72 additions and 141 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
neode-ui/src/views/Home.vue
View File

@@ -391,7 +391,7 @@
</svg>
</RouterLink>
</div>
<div class="home-card-stats grid grid-cols-1 sm:grid-cols-3 gap-4 flex-1 min-h-0">
<div class="home-card-stats grid grid-cols-1 gap-4 flex-1 min-h-0" :class="systemStats.bitcoinAvailable ? 'sm:grid-cols-4' : 'sm:grid-cols-3'">
<template v-if="!systemStatsLoaded">
<div v-for="i in 3" :key="i" class="p-4 bg-white/5 rounded-lg animate-pulse">
<div class="flex items-center justify-between mb-2">
@@ -429,6 +429,18 @@
<div class="h-full rounded-full transition-all duration-500" :class="gaugeBarColor(systemStats.diskPercent)" :style="{ width: systemStats.diskPercent + '%' }"></div>
</div>
</div>
<div v-if="systemStats.bitcoinAvailable" class="p-4 bg-white/5 rounded-lg">
<div class="flex items-center justify-between mb-2">
<p class="text-xs text-orange-400/80">Bitcoin</p>
<p class="text-sm font-medium" :class="systemStats.bitcoinSyncPercent >= 99.9 ? 'text-green-400' : 'text-orange-400'">
{{ systemStats.bitcoinSyncPercent >= 99.9 ? 'Synced' : systemStats.bitcoinSyncPercent.toFixed(1) + '%' }}
</p>
</div>
<div class="w-full h-2 bg-white/10 rounded-full overflow-hidden">
<div class="h-full rounded-full transition-all duration-500" :class="systemStats.bitcoinSyncPercent >= 99.9 ? 'bg-green-400' : 'bg-orange-400'" :style="{ width: Math.min(systemStats.bitcoinSyncPercent, 100) + '%' }"></div>
</div>
<p class="text-xs text-white/40 mt-1">Block {{ systemStats.bitcoinBlockHeight.toLocaleString() }}</p>
</div>
</template>
</div>
</div>
@@ -832,6 +844,9 @@ const systemStats = reactive({
diskTotal: 0,
diskPercent: 0,
uptimeSecs: 0,
bitcoinSyncPercent: 0,
bitcoinBlockHeight: 0,
bitcoinAvailable: false,
})
const systemUptimeDisplay = computed(() => {
@@ -880,6 +895,18 @@ async function loadSystemStats() {
if (import.meta.env.DEV) console.warn('RPC unavailable — keeping defaults', e)
systemStatsLoaded.value = true
}
// Fetch Bitcoin sync info (best-effort, only if Bitcoin is running)
try {
const btc = await rpcClient.call<{
block_height: number
sync_progress: number
}>({ method: 'bitcoin.getinfo', timeout: 5000 })
systemStats.bitcoinSyncPercent = (btc.sync_progress ?? 0) * 100
systemStats.bitcoinBlockHeight = btc.block_height ?? 0
systemStats.bitcoinAvailable = true
} catch {
systemStats.bitcoinAvailable = false
}
}
function uploadFiles() {