decision/maquette/frontend/app/components/chemin/CheminPathCard.vue

<script setup lang="ts">
// « Le chemin » — the live card. Big route icon, first-person route name,
// the ONE French explanation sentence (never a rule code), the perimeter /
// duration / threshold strip, the pre-checked follow-ups, ONE main button.
import type { DecisionRoute, Person, Verdict } from '~/types/domain'
import { PATH_CARD_TITLE, ROUTE_ICONS, ROUTE_LABELS, URGENT_BADGE } from '~/lexicon'

const props = defineProps<{
  path: Verdict
  routeShown: DecisionRoute
  overridden: boolean
  overrideLabel?: string
  stack: { person: Person; origin?: 'computed' | 'declared'; reason?: string }[]
  selfOnly: boolean
  durationLabel: string
  thresholdLabel: string
  mainLabel: string
  reviewChecked: boolean
  engraveChecked: boolean
  reviewLocked: boolean
  disabled: boolean
  blockReason: string
}>()

const emit = defineEmits<{
  (e: 'validate'): void
  (e: 'update:reviewChecked' | 'update:engraveChecked', value: boolean): void
}>()

const tint = computed(() => `var(--route-${props.routeShown})`)
const showUrgentBadge = computed(
  () => props.path.conservatoryChain === true,
)
</script>

<template>
  <!-- ld-v2 -->
  <section class="ld-card pc" :style="{ '--pc-tint': tint }">
    <h2 class="pc__caption">{{ PATH_CARD_TITLE }}</h2>

    <div class="pc__head">
      <span class="pc__icon"><UIcon :name="ROUTE_ICONS[routeShown]" /></span>
      <div class="pc__names">
        <span class="pc__route">{{ ROUTE_LABELS[routeShown] }}</span>
        <span v-if="overridden" class="pc__override">
          Tu choisis autrement{{ overrideLabel ? ` — ${overrideLabel}` : '' }}
        </span>
      </div>
    </div>

    <p class="pc__explanation">{{ path.explanation }}</p>
    <span v-if="showUrgentBadge" class="status-pill status-advice pc__urgent">
      <UIcon name="i-lucide-siren" /> {{ URGENT_BADGE }}
    </span>

    <div class="pc__strip">
      <div class="pc__cell">
        <span class="pc__cell-label">Périmètre</span>
        <span v-if="selfOnly" class="pc__cell-value">moi seul</span>
        <LdAvatarStack v-else-if="stack.length > 0" :people="stack" :max="5" :size="24" />
        <span v-else class="pc__cell-value">à préciser</span>
      </div>
      <div class="pc__cell">
        <span class="pc__cell-label">Durée</span>
        <span class="pc__cell-value">{{ durationLabel || 'aucune attente' }}</span>
      </div>
      <div v-if="thresholdLabel" class="pc__cell">
        <span class="pc__cell-label">Seuil</span>
        <span class="pc__cell-value">{{ thresholdLabel }}</span>
      </div>
    </div>

    <div v-if="path.reviewRequired || path.engravingSuggested" class="pc__checks">
      <label v-if="path.reviewRequired" class="pc__check">
        <input
          type="checkbox"
          :checked="reviewChecked"
          :disabled="reviewLocked"
          @change="emit('update:reviewChecked', ($event.target as HTMLInputElement).checked)"
        >
        <span>Revoyure — l'épreuve du réel sera posée</span>
      </label>
      <label v-if="path.engravingSuggested" class="pc__check">
        <input
          type="checkbox"
          :checked="engraveChecked"
          @change="emit('update:engraveChecked', ($event.target as HTMLInputElement).checked)"
        >
        <span>Gravure — empreinte locale à l'adoption</span>
      </label>
    </div>

    <p v-if="blockReason" class="pc__block">{{ blockReason }}</p>

    <button class="ld-btn pc__main" type="button" :disabled="disabled" @click="emit('validate')">
      {{ mainLabel }}
    </button>
  </section>
</template>

<style scoped>
.pc {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  padding: 1.25rem;
}
.pc__caption {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--mood-text-muted);
}
.pc__head { display: flex; align-items: center; gap: 0.875rem; }
.pc__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: var(--r-icon);
  font-size: 1.625rem;
  color: var(--pc-tint);
  background: color-mix(in srgb, var(--pc-tint) 14%, transparent);
  flex-shrink: 0;
}
.pc__names { display: flex; flex-direction: column; gap: 0.125rem; min-width: 0; }
.pc__route { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.01em; }
.pc__override { font-size: 0.8125rem; font-weight: 600; color: var(--mood-accent); }
.pc__explanation { margin: 0; font-size: 1rem; line-height: 1.5; }
.pc__urgent { align-self: flex-start; }
.pc__strip {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  padding: 0.75rem 0.875rem;
  border-radius: var(--r-input);
  background: color-mix(in srgb, var(--pc-tint) 6%, transparent);
}
.pc__cell { display: flex; flex-direction: column; gap: 0.25rem; }
.pc__cell-label {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--mood-text-muted);
}
.pc__cell-value { font-size: 0.875rem; font-weight: 600; }
.pc__checks { display: flex; flex-direction: column; gap: 0.4rem; }
.pc__check {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
}
.pc__check input { accent-color: var(--mood-accent); width: 1rem; height: 1rem; }
.pc__block { margin: 0; font-size: 0.8125rem; font-weight: 600; color: var(--mood-error); }
.pc__main { align-self: stretch; font-size: 1.0625rem; min-height: 2.75rem; }
@media (min-width: 480px) {
  .pc__main { align-self: flex-start; padding: 0.5rem 2rem; }
}
</style>