decision/frontend/app/components/sanctuary/SanctuaryEntry.vue

<script setup lang="ts">
export interface SanctuaryEntryOut {
  id: string
  entry_type: string
  reference_id: string
  title: string | null
  content_hash: string
  ipfs_cid: string | null
  chain_tx_hash: string | null
  chain_block: number | null
  metadata_json: string | null
  created_at: string
}

const props = defineProps<{
  entry: SanctuaryEntryOut
}>()

const emit = defineEmits<{
  verify: [id: string]
}>()

const typeLabel = (entryType: string): string => {
  switch (entryType) {
    case 'document': return 'Document'
    case 'decision': return 'Decision'
    case 'vote_result': return 'Resultat de vote'
    default: return entryType
  }
}

const typeColor = (entryType: string): string => {
  switch (entryType) {
    case 'document': return 'primary'
    case 'decision': return 'success'
    case 'vote_result': return 'info'
    default: return 'neutral'
  }
}

function formatDate(dateStr: string): string {
  return new Date(dateStr).toLocaleDateString('fr-FR', {
    day: 'numeric',
    month: 'long',
    year: 'numeric',
    hour: '2-digit',
    minute: '2-digit',
  })
}

function truncateHash(hash: string | null, length: number = 16): string {
  if (!hash) return '-'
  if (hash.length <= length * 2) return hash
  return hash.slice(0, length) + '...' + hash.slice(-8)
}

const copied = ref(false)

async function copyHash() {
  try {
    await navigator.clipboard.writeText(props.entry.content_hash)
    copied.value = true
    setTimeout(() => { copied.value = false }, 2000)
  } catch {
    // Clipboard API not available
  }
}
</script>

<template>
  <UCard
    class="cursor-pointer hover:ring-2 hover:ring-primary/50 transition-all"
    @click="navigateTo(`/sanctuary/${entry.id}`)"
  >
    <div class="space-y-4">
      <!-- Entry header -->
      <div class="flex items-start justify-between">
        <div class="flex items-center gap-3">
          <UIcon name="i-lucide-shield-check" class="text-xl text-primary" />
          <div>
            <h3 class="font-semibold text-gray-900 dark:text-white">
              {{ entry.title || 'Entree sans titre' }}
            </h3>
            <p class="text-xs text-gray-500">
              {{ formatDate(entry.created_at) }}
            </p>
          </div>
        </div>
        <UBadge :color="(typeColor(entry.entry_type) as any)" variant="subtle" size="xs">
          {{ typeLabel(entry.entry_type) }}
        </UBadge>
      </div>

      <!-- Hashes and anchors -->
      <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
        <!-- Content hash -->
        <div class="p-3 bg-gray-50 dark:bg-gray-800/50 rounded-lg">
          <div class="flex items-center justify-between mb-1">
            <div class="flex items-center gap-2">
              <UIcon name="i-lucide-hash" class="text-gray-400 text-sm" />
              <span class="text-xs font-semibold text-gray-500 uppercase">SHA-256</span>
            </div>
            <UButton
              :icon="copied ? 'i-lucide-check' : 'i-lucide-copy'"
              variant="ghost"
              color="neutral"
              size="xs"
              class="p-0"
              @click.stop="copyHash"
            />
          </div>
          <p class="font-mono text-xs text-gray-700 dark:text-gray-300 break-all">
            {{ truncateHash(entry.content_hash) }}
          </p>
        </div>

        <!-- IPFS CID -->
        <div class="p-3 bg-gray-50 dark:bg-gray-800/50 rounded-lg">
          <div class="flex items-center gap-2 mb-1">
            <UIcon name="i-lucide-hard-drive" class="text-gray-400 text-sm" />
            <span class="text-xs font-semibold text-gray-500 uppercase">IPFS CID</span>
          </div>
          <div @click.stop>
            <IPFSLink :cid="entry.ipfs_cid" />
          </div>
        </div>

        <!-- Chain anchor -->
        <div class="p-3 bg-gray-50 dark:bg-gray-800/50 rounded-lg">
          <div class="flex items-center gap-2 mb-1">
            <UIcon name="i-lucide-link" class="text-gray-400 text-sm" />
            <span class="text-xs font-semibold text-gray-500 uppercase">On-chain</span>
          </div>
          <ChainAnchor :tx-hash="entry.chain_tx_hash" :block="entry.chain_block" />
        </div>
      </div>

      <!-- Verification status indicators -->
      <div class="flex items-center justify-between">
        <div class="flex items-center gap-4 text-xs">
          <div class="flex items-center gap-1">
            <UIcon
              :name="entry.ipfs_cid ? 'i-lucide-check-circle' : 'i-lucide-clock'"
              :class="entry.ipfs_cid ? 'text-green-500' : 'text-gray-400'"
            />
            <span :class="entry.ipfs_cid ? 'text-green-600' : 'text-gray-400'">
              IPFS {{ entry.ipfs_cid ? 'epingle' : 'en attente' }}
            </span>
          </div>
          <div class="flex items-center gap-1">
            <UIcon
              :name="entry.chain_tx_hash ? 'i-lucide-check-circle' : 'i-lucide-clock'"
              :class="entry.chain_tx_hash ? 'text-green-500' : 'text-gray-400'"
            />
            <span :class="entry.chain_tx_hash ? 'text-green-600' : 'text-gray-400'">
              Chain {{ entry.chain_tx_hash ? 'ancre' : 'en attente' }}
            </span>
          </div>
        </div>
        <UButton
          label="Verifier"
          icon="i-lucide-shield-check"
          variant="soft"
          color="primary"
          size="xs"
          @click.stop="emit('verify', entry.id)"
        />
      </div>
    </div>
  </UCard>
</template>