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:
@@ -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 [
|
||||
|
||||
Reference in New Issue
Block a user