215 lines
8.5 KiB
Vue
215 lines
8.5 KiB
Vue
<template>
|
|
<div
|
|
data-controller-container
|
|
:data-controller-install="!(installed || installing || installBlockedReason) && (app.source === 'local' || !!app.dockerImage) ? '1' : undefined"
|
|
tabindex="0"
|
|
role="link"
|
|
class="glass-card p-6 hover:bg-orange-500/5 hover:border-orange-500/15 transition-all cursor-pointer flex flex-col"
|
|
:class="{ 'card-stagger': stagger }"
|
|
:style="{ '--stagger-index': index }"
|
|
@click="$emit('view', app)"
|
|
@keydown.enter="$emit('view', app)"
|
|
>
|
|
<div class="flex items-start gap-4 mb-4">
|
|
<img
|
|
v-if="app.icon"
|
|
:src="app.icon"
|
|
:alt="app.title"
|
|
class="w-16 h-16 rounded-lg object-cover"
|
|
@error="handleImageError"
|
|
/>
|
|
<div v-else class="w-16 h-16 rounded-lg bg-white/10 flex items-center justify-center">
|
|
<svg class="w-8 h-8 text-white/40" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
|
|
</svg>
|
|
</div>
|
|
<div class="flex-1">
|
|
<h3 class="text-xl font-semibold text-white mb-1">
|
|
{{ app.title }}
|
|
<span
|
|
v-if="tierLabel !== 'optional'"
|
|
class="tier-badge"
|
|
:class="tierLabel === 'core' ? 'tier-badge-core' : 'tier-badge-recommended'"
|
|
>{{ tierLabel }}</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>
|
|
</div>
|
|
|
|
<!-- Trust badge for Nostr community apps -->
|
|
<div v-if="app.trustTier" class="flex items-center gap-2 mb-3">
|
|
<span
|
|
class="text-xs px-2 py-0.5 rounded-full font-medium"
|
|
:class="{
|
|
'bg-green-400/20 text-green-400': app.trustTier === 'verified',
|
|
'bg-yellow-400/20 text-yellow-400': app.trustTier === 'community',
|
|
'bg-orange-400/20 text-orange-400': app.trustTier === 'unverified',
|
|
'bg-red-400/20 text-red-400': app.trustTier === 'untrusted',
|
|
}"
|
|
>{{ app.trustTier }}</span>
|
|
<span class="text-xs text-white/40">Score: {{ app.trustScore }}/100</span>
|
|
<span v-if="app.relayCount" class="text-xs text-white/40">· {{ app.relayCount }} relay{{ app.relayCount !== 1 ? 's' : '' }}</span>
|
|
</div>
|
|
|
|
<p class="text-white/80 text-sm mb-4 line-clamp-3 flex-1">
|
|
{{ typeof app.description === 'object' ? app.description.short : (app.description || 'No description available') }}
|
|
</p>
|
|
|
|
<div class="flex gap-2 mt-auto">
|
|
<!-- Installed & starting up (transitional state) -->
|
|
<span
|
|
v-if="installed && startingUp"
|
|
class="flex-1 px-4 py-2 bg-yellow-500/15 border border-yellow-500/30 rounded-lg text-yellow-200 text-sm font-medium text-center cursor-default 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>
|
|
{{ installedState === 'installing' ? 'Installing...' : 'Starting...' }}
|
|
</span>
|
|
<!-- Installed & ready -->
|
|
<span
|
|
v-else-if="installed"
|
|
class="flex-1 px-4 py-2 bg-white/20 rounded-lg text-white/60 text-sm font-medium text-center cursor-default"
|
|
>
|
|
{{ t('marketplace.alreadyInstalled') }}
|
|
</span>
|
|
<button
|
|
v-if="installed && !startingUp"
|
|
@click.stop="$emit('launch', app)"
|
|
class="px-4 py-2 glass-button glass-button-sm rounded-lg text-sm font-medium"
|
|
>
|
|
{{ t('common.launch') }}
|
|
</button>
|
|
<!-- Not yet scanned — show loading indicator instead of install -->
|
|
<span
|
|
v-else-if="!containersScanned && (app.source === 'local' || app.dockerImage)"
|
|
class="flex-1 px-4 py-2 rounded-lg text-white/50 text-sm font-medium text-center cursor-default relative overflow-hidden"
|
|
>
|
|
<span class="marketplace-shimmer-bg"></span>
|
|
<span class="relative flex items-center justify-center gap-2">
|
|
<svg class="animate-spin h-3.5 w-3.5 opacity-60" 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>
|
|
Checking...
|
|
</span>
|
|
</span>
|
|
<!-- Installing — live progress with bar + message matching the
|
|
update download bar's accuracy. Falls back to a simple
|
|
spinner if no install_progress data is available yet. -->
|
|
<div
|
|
v-else-if="!installed && installing"
|
|
class="flex-1 flex flex-col gap-1.5"
|
|
>
|
|
<div
|
|
class="px-4 py-2 glass-button glass-button-sm rounded-lg text-sm font-medium opacity-90 cursor-wait flex items-center justify-center gap-2 text-center"
|
|
>
|
|
<svg class="animate-spin h-3.5 w-3.5 shrink-0" 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="truncate">{{ installProgressMessage }}</span>
|
|
</div>
|
|
<div
|
|
v-if="(installProgress?.progress ?? 0) > 0"
|
|
class="w-full h-1 bg-white/10 rounded-full overflow-hidden"
|
|
>
|
|
<div
|
|
class="h-full bg-orange-400 transition-all duration-300"
|
|
:style="{ width: (installProgress?.progress ?? 0) + '%' }"
|
|
></div>
|
|
</div>
|
|
</div>
|
|
<button
|
|
v-else-if="!installed && installBlockedReason"
|
|
class="flex-1 px-4 py-2 bg-yellow-500/15 border border-yellow-500/30 rounded-lg text-yellow-100 text-sm font-medium"
|
|
:title="installBlockedReason"
|
|
@click.stop="$emit('install', app)"
|
|
>
|
|
Bitcoin Pruned
|
|
</button>
|
|
<button
|
|
v-else-if="!installed && (app.source === 'local' || app.dockerImage)"
|
|
data-controller-install-btn
|
|
@click.stop="$emit('install', app)"
|
|
class="flex-1 px-4 py-2 glass-button glass-button-sm rounded-lg text-sm font-medium"
|
|
>
|
|
{{ t('common.install') }}
|
|
</button>
|
|
<button
|
|
v-else-if="!installed"
|
|
disabled
|
|
class="flex-1 px-4 py-2 bg-white/10 rounded-lg text-white/40 text-sm font-medium cursor-not-allowed"
|
|
>
|
|
{{ t('common.notAvailable') }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed } from 'vue'
|
|
import { useI18n } from 'vue-i18n'
|
|
import type { MarketplaceApp, InstallProgress } from './marketplaceData'
|
|
|
|
const { t } = useI18n()
|
|
|
|
const props = defineProps<{
|
|
app: MarketplaceApp
|
|
index: number
|
|
stagger: boolean
|
|
installed: boolean
|
|
installing: boolean
|
|
installProgress: InstallProgress | undefined
|
|
installedState: string | null
|
|
startingUp: boolean
|
|
containersScanned: boolean
|
|
tierLabel: string
|
|
installBlockedReason?: string
|
|
}>()
|
|
|
|
defineEmits<{
|
|
view: [app: MarketplaceApp]
|
|
install: [app: MarketplaceApp]
|
|
launch: [app: MarketplaceApp]
|
|
}>()
|
|
|
|
const installProgressMessage = computed(() => {
|
|
const p = props.installProgress
|
|
if (!p) return 'Installing'
|
|
// The store already formats messages like "Downloading: 50.5 / 200.0 MB (25%)"
|
|
// so we just surface them directly.
|
|
return p.message || 'Installing'
|
|
})
|
|
|
|
function handleImageError(event: Event) {
|
|
const img = event.target as HTMLImageElement
|
|
img.src = '/assets/img/logo-archipelago.svg'
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.marketplace-shimmer-bg {
|
|
position: absolute;
|
|
inset: 0;
|
|
background: linear-gradient(90deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.03) 100%);
|
|
background-size: 200% 100%;
|
|
animation: shimmer 2s ease-in-out infinite;
|
|
border-radius: inherit;
|
|
}
|
|
|
|
@keyframes shimmer {
|
|
0% { background-position: 200% 0; }
|
|
100% { background-position: -200% 0; }
|
|
}
|
|
|
|
.line-clamp-3 {
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 3;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
}
|
|
</style>
|