frontend/src/components/CitationPanel.vue

<script setup lang="ts">
import { ref } from 'vue'
import type { Citation } from '../types'
import type { Lang } from '../i18n'
import { t } from '../i18n'

defineProps<{
  citations: Citation[]
  lang: Lang
}>()

const isOpen = ref(false)

function scoreColor(score: number): string {
  if (score >= 0.8) return '#44aa44'
  if (score >= 0.6) return '#aaaa44'
  return '#aa7744'
}

function scoreBar(score: number): string {
  return `${Math.round(score * 100)}%`
}
</script>

<template>
  <div>
    <button class="citations-toggle" @click="isOpen = !isOpen">
      📜 {{ t('citations.sources', lang) }} ({{ citations.length }})
      {{ isOpen ? '▲' : '▼' }}
    </button>

    <div v-if="isOpen" class="citations-panel">
      <div
        v-for="c in citations"
        :key="c.rank"
        class="citation-item"
      >
        <div class="citation-header">
          <span>#{{ c.rank }}</span>
          <span style="margin-left: 0.75rem;">
            📄 {{ c.source }} — {{ t('citations.page', lang) }} {{ c.page_num }}
          </span>
          <span style="margin-left: auto; display: inline-flex; align-items: center; gap: 0.3rem;">
            <span
              style="display: inline-block; height: 8px; border-radius: 2px;"
              :style="{ width: scoreBar(c.score), background: scoreColor(c.score), minWidth: '20px' }"
            ></span>
            <span style="font-size: 0.75rem; color: var(--wc3-text-dim);">
              {{ (c.score * 100).toFixed(0) }}%
            </span>
          </span>
        </div>
        <div class="citation-text">{{ c.text }}</div>
      </div>
    </div>
  </div>
</template>