archy/neode-ui/src/views/marketplace/MarketplaceAppCard.vue

<template>
  <div
    data-controller-container
    :data-controller-install="!(installed || installing) && (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">&middot; {{ 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 — simple button-style indicator -->
      <button
        v-else-if="!installed && installing"
        disabled
        class="flex-1 px-4 py-2 glass-button glass-button-sm rounded-lg text-sm font-medium opacity-80 cursor-wait"
      >
        <span class="flex items-center justify-center gap-2">
          <svg class="animate-spin h-3.5 w-3.5" 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>
          Installing
        </span>
      </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 { 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
}>()

defineEmits<{
  view: [app: MarketplaceApp]
  install: [app: MarketplaceApp]
  launch: [app: MarketplaceApp]
}>()

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>