feat: add tier badges to marketplace UI

- Show 'core' (orange) and 'recommended' (blue) badges next to app titles
- getAppTier() classifies apps matching backend get_app_tier()
- Global .tier-badge, .tier-badge-core, .tier-badge-recommended CSS classes

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Dorian
2026-03-14 03:35:09 +00:00
parent 81a8c256d5
commit 19d2143f55
2 changed files with 48 additions and 9 deletions

View File

@@ -150,7 +150,14 @@
</svg>
</div>
<div class="flex-1">
<h3 class="text-xl font-semibold text-white mb-1">{{ app.title }}</h3>
<h3 class="text-xl font-semibold text-white mb-1">
{{ app.title }}
<span
v-if="getAppTier(app.id) !== 'optional'"
class="tier-badge"
:class="getAppTier(app.id) === 'core' ? 'tier-badge-core' : 'tier-badge-recommended'"
>{{ getAppTier(app.id) }}</span>
</h3>
<p class="text-sm text-white/60">{{ app.version ? `v${app.version}` : 'latest' }}</p>
<p v-if="app.author" class="text-xs text-white/50 mt-1">by {{ app.author }}</p>
</div>
@@ -730,6 +737,15 @@ async function loadCommunityMarketplace() {
loadingCommunity.value = false
}
// Get app tier classification (matches backend get_app_tier)
function getAppTier(appId: string): string {
const core = ['bitcoin-knots', 'bitcoin', 'lnd', 'mempool', 'electrs', 'btcpay-server', 'dwn', 'filebrowser']
const recommended = ['fedimint', 'vaultwarden', 'uptime-kuma', 'grafana', 'searxng', 'tailscale', 'portainer']
if (core.includes(appId)) return 'core'
if (recommended.includes(appId)) return 'recommended'
return 'optional'
}
// Curated list of apps with Docker Hub images
function getCuratedAppList() {
return [