lfg2025/archy
1
0
Fork 0
Code Issues 27 Pull Requests 5 Actions Packages Projects Releases 4 Wiki Activity

feat: Tor status + cleanup, Tailscale admin, marketplace install UX

Browse Source 
- Task 0: Tor status dot (green/red) + "Cleanup Old" rotated services button
- Task 2: BTCPay already handled (opens new tab)
- Task 3: Tailscale launches https://login.tailscale.com/admin/machines in new tab
- Task 8: Marketplace install shows inline progress on card (removed banner)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Dorian
2026-03-19 16:38:11 +00:00
co-authored by Claude Opus 4.6
parent f20f0650cf
commit ca65a8172c
4 changed files with 71 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files
neode-ui/src/views/Marketplace.vue
+22 -82
View File
@@ -2,78 +2,6 @@
<div class="marketplace-container">
<!-- Header Section -->
<div>
<!-- Installation Progress Banner - Multiple Apps -->
<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>
<!-- Progress Bar -->
<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>
<!-- Desktop: tabs + categories + search -->
<div class="hidden md:flex mb-4 items-center gap-4">
<div class="mode-switcher flex-shrink-0">
@@ -228,21 +156,33 @@
Checking...
</span>
</span>
<!-- Installing — inline progress on card -->
<div
v-else-if="!isInstalled(app.id) && installingApps.has(app.id)"
class="flex-1"
>
<div class="flex items-center gap-2 mb-1.5">
<svg class="animate-spin h-4 w-4 text-blue-400 shrink-0" 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>
<span class="text-sm text-white/80 truncate">{{ installingApps.get(app.id)?.message || t('common.installing') }}</span>
<span class="text-xs text-white/50 shrink-0">{{ installingApps.get(app.id)?.progress || 0 }}%</span>
</div>
<div class="w-full bg-white/10 rounded-full h-1.5 overflow-hidden">
<div
class="h-full rounded-full transition-all duration-500 bg-blue-500"
:style="{ width: `${installingApps.get(app.id)?.progress || 0}%` }"
></div>
</div>
</div>
<button
v-else-if="!isInstalled(app.id) && (app.source === 'local' || app.dockerImage)"
data-controller-install-btn
@click.stop="app.source === 'local' ? installApp(app) : installCommunityApp(app)"
:disabled="installingApps.has(app.id)"
class="flex-1 px-4 py-2 glass-button glass-button-sm rounded-lg text-sm font-medium disabled:opacity-50 disabled:cursor-not-allowed"
class="flex-1 px-4 py-2 glass-button glass-button-sm rounded-lg text-sm font-medium"
>
<span v-if="installingApps.has(app.id)" class="flex items-center justify-center gap-2">
<svg class="animate-spin h-4 w-4" 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>
{{ installingApps.get(app.id)?.message || t('common.installing') }}
</span>
<span v-else>{{ t('common.install') }}</span>
{{ t('common.install') }}
</button>
<button
v-else-if="!isInstalled(app.id)"