fix: Tor Status label (was Connectivity), remove Discover install banner

- Server.vue: "Connectivity" → "Tor Status" with tor.list-services check
- Discover.vue: removed full-width install progress banner (progress shown inline on cards)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Dorian 2026-03-19 16:44:46 +00:00
parent 83dfed17c0
commit 57b5fc7ea5
2 changed files with 22 additions and 64 deletions

View File

@ -78,56 +78,7 @@
</div> </div>
</div> </div>
<!-- Installation Progress Banners --> <!-- Install progress shown on cards inline, no separate banner -->
<div v-if="installingApps.size > 0" aria-live="polite" class="mb-6 space-y-3">
<div
v-for="[appId, progress] in installingApps"
:key="appId"
class="glass-card p-4 border-l-4"
:class="{
'border-blue-500': progress.status === 'downloading' || progress.status === 'installing',
'border-orange-500': progress.status === 'starting',
'border-green-500': progress.status === 'complete',
'border-red-500': progress.status === 'error'
}"
>
<div class="flex items-center justify-between mb-3">
<div class="flex items-center gap-3">
<svg
v-if="progress.status !== 'complete' && progress.status !== 'error'"
class="animate-spin h-5 w-5 text-blue-400" aria-hidden="true"
xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
>
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
</svg>
<svg v-else-if="progress.status === 'complete'" class="h-5 w-5 text-green-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
<svg v-else class="h-5 w-5 text-red-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
<div>
<p class="text-white font-medium">{{ progress.title }}</p>
<p class="text-white/70 text-sm">{{ progress.message }}</p>
</div>
</div>
<div class="text-white/60 text-sm">{{ progress.progress }}%</div>
</div>
<div class="w-full bg-white/10 rounded-full h-2 overflow-hidden">
<div
class="h-full rounded-full transition-all duration-500"
:class="{
'bg-gradient-to-r from-blue-500 to-blue-400': progress.status === 'downloading' || progress.status === 'installing',
'bg-gradient-to-r from-orange-500 to-orange-400': progress.status === 'starting',
'bg-gradient-to-r from-green-500 to-green-400': progress.status === 'complete',
'bg-gradient-to-r from-red-500 to-red-400': progress.status === 'error'
}"
:style="{ width: `${progress.progress}%` }"
></div>
</div>
</div>
</div>
<!-- Featured Apps Section (only when no search) --> <!-- Featured Apps Section (only when no search) -->
<div v-if="!searchQuery" class="mb-10"> <div v-if="!searchQuery" class="mb-10">

View File

@ -167,9 +167,9 @@
<svg class="w-5 h-5 text-white/60" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="w-5 h-5 text-white/60" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9" /> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9" />
</svg> </svg>
<span class="text-white/80 text-sm">Connectivity</span> <span class="text-white/80 text-sm">Tor</span>
</div> </div>
<span class="text-sm" :class="networkData.torConnected ? 'text-green-400' : 'text-white/60'">{{ networkData.torConnected ? 'Tor Connected' : 'N/A' }}</span> <span class="text-sm" :class="networkData.torConnected ? 'text-green-400' : 'text-white/60'">{{ networkData.torConnected ? 'Connected' : 'N/A' }}</span>
</div> </div>
<div class="flex items-center justify-between p-3 bg-white/5 rounded-lg"> <div class="flex items-center justify-between p-3 bg-white/5 rounded-lg">
@ -520,9 +520,14 @@ const connectedNodes = ref(0)
const servicesRunning = ref(true) const servicesRunning = ref(true)
const restarting = ref(false) const restarting = ref(false)
// Connectivity status: 'connected' | 'disconnected' | 'checking' // Tor status
const connectivityStatus = ref<'connected' | 'disconnected' | 'checking'>('connected') const torStatusLabel = ref<'running' | 'stopped' | 'checking'>('checking')
const checkingConnectivity = ref(false) const checkingTor = ref(false)
const torStatusColor = computed(() => {
if (torStatusLabel.value === 'running') return 'bg-green-400'
if (torStatusLabel.value === 'checking') return 'bg-yellow-400'
return 'bg-red-400'
})
// Auto-sync toggle // Auto-sync toggle
const autoSyncEnabled = ref(true) const autoSyncEnabled = ref(true)
@ -854,7 +859,7 @@ async function cleanupRotatedServices() {
} }
onMounted(() => { onMounted(() => {
checkConnectivity() checkTorStatus()
loadNetworkData() loadNetworkData()
loadPeerCount() loadPeerCount()
loadInterfaces() loadInterfaces()
@ -901,21 +906,23 @@ async function restartServices() {
} }
restarting.value = false restarting.value = false
servicesRunning.value = false servicesRunning.value = false
connectivityStatus.value = 'disconnected' torStatusLabel.value = 'stopped'
} }
pollHealth(15) pollHealth(15)
} }
async function checkConnectivity() { async function checkTorStatus() {
checkingConnectivity.value = true checkingTor.value = true
connectivityStatus.value = 'checking' torStatusLabel.value = 'checking'
try { try {
await rpcClient.call({ method: 'server.health', params: {} }) const res = await rpcClient.call<{ services: TorServiceInfo[] }>({ method: 'tor.list-services' })
connectivityStatus.value = 'connected' const services = res.services || []
torServices.value = services
torStatusLabel.value = services.some(s => s.onion_address) ? 'running' : 'stopped'
} catch { } catch {
connectivityStatus.value = 'disconnected' torStatusLabel.value = 'stopped'
} finally { } finally {
checkingConnectivity.value = false checkingTor.value = false
} }
} }