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

feat: wire Home Network card to real app store data

Browse Source 
Replace hardcoded "All Running", "Connected", "12" in the Network
overview card with computed values from useAppStore. Services status
reflects actual running/total app counts, connectivity uses WebSocket
connection state, and running apps count is live.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Dorian 2026-03-05 07:43:40 +00:00
parent 62aa3be63d
commit 1c797da908
2 changed files with 25 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.claude/plans/reflective-meandering-castle.md
View File

@ -69,7 +69,7 @@ After getting Claude Max OAuth working on the live server, hardening the deploy
- **Change**: Add tab bar with "Dashboard" and "Setup" tabs below welcome header. Dashboard tab: current overview cards. Setup tab: EasyHome goal cards (already imported). After completing all setup wizards, default to Dashboard. Use `.mode-switcher` pattern for tab styling.
- **Verify**: Both tabs visible, Dashboard shows live data, Setup shows goal wizards
### Task 12: Wire up Home.vue Network card with real data
### Task 12: Wire up Home.vue Network card with real data [DONE]
- **Files**: `neode-ui/src/views/Home.vue`, `neode-ui/src/views/Server.vue`
- **Change**: Replace hardcoded "All Running", "Connected", "12" with computed values from `useAppStore`. Check `runningCount === appCount` for services status. Use `store.isConnected` for connectivity.
- **Verify**: Network card reflects actual service states

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

@ -141,24 +141,24 @@
<div class="home-card-stats space-y-3 mb-4 flex-1 min-h-0">
<div class="flex items-center justify-between p-3 bg-white/5 rounded-lg">
<div class="flex items-center gap-3">
<div class="w-2 h-2 rounded-full bg-green-400"></div>
<div class="w-2 h-2 rounded-full" :class="servicesDotColor"></div>
<span class="text-sm text-white/80">Services Status</span>
</div>
<span class="text-sm text-green-400 font-medium">All Running</span>
<span class="text-sm font-medium" :class="servicesStatusColor">{{ servicesStatusText }}</span>
</div>
<div class="flex items-center justify-between p-3 bg-white/5 rounded-lg">
<div class="flex items-center gap-3">
<div class="w-2 h-2 rounded-full bg-green-400"></div>
<div class="w-2 h-2 rounded-full" :class="connectivityDotColor"></div>
<span class="text-sm text-white/80">Connectivity</span>
</div>
<span class="text-sm text-green-400 font-medium">Connected</span>
<span class="text-sm font-medium" :class="connectivityColor">{{ connectivityText }}</span>
</div>
<div class="flex items-center justify-between p-3 bg-white/5 rounded-lg">
<div class="flex items-center gap-3">
<div class="w-2 h-2 rounded-full bg-blue-400"></div>
<span class="text-sm text-white/80">Connected Nodes</span>
<span class="text-sm text-white/80">Running Apps</span>
</div>
<span class="text-sm text-white/80 font-medium">12</span>
<span class="text-sm text-white/80 font-medium">{{ runningCount }}</span>
</div>
</div>
<div class="home-card-buttons flex gap-2 mt-auto pt-4 shrink-0">
@ -377,6 +377,24 @@ const runningCount = computed(() =>
Object.values(packages.value).filter(pkg => pkg.state === PackageState.Running).length
)
// Network card computed values
const servicesAllRunning = computed(() =>
appCount.value > 0 && runningCount.value === appCount.value
)
const servicesStatusText = computed(() => {
if (appCount.value === 0) return 'No Apps'
return servicesAllRunning.value ? 'All Running' : `${runningCount.value}/${appCount.value} Running`
})
const servicesStatusColor = computed(() =>
appCount.value === 0 ? 'text-white/60' : servicesAllRunning.value ? 'text-green-400' : 'text-yellow-400'
)
const servicesDotColor = computed(() =>
appCount.value === 0 ? 'bg-white/40' : servicesAllRunning.value ? 'bg-green-400' : 'bg-yellow-400'
)
const connectivityText = computed(() => store.isConnected ? 'Connected' : 'Disconnected')
const connectivityColor = computed(() => store.isConnected ? 'text-green-400' : 'text-red-400')
const connectivityDotColor = computed(() => store.isConnected ? 'bg-green-400' : 'bg-red-400')
// Quick Start Goals dismiss logic
const quickStartDismissed = ref(false)