decision/frontend/app/components/texts/ClauseDetail.vue

<script setup lang="ts">
// <!-- ld-v2 --> Détail dépliable d'une clause : version courante (markdown
// simple), versions proposées avec diff (contenu d'abord, auteur replié),
// décision fondatrice et amendements chaînés, valeur en clair des clauses de
// réglage du Pacte (« effet immédiat à l'adoption »), geste « Proposer une version ».
import type { Clause, ClauseVersion } from '~/types/domain'
import { STATUS_LABELS } from '~/lexicon'
import type { ChainEntry, ClauseSessionGauge, ProposedEntry } from './textsModel'
import { formatDateFr } from './textsModel'

const props = withDefaults(defineProps<{
  clause: Clause
  currentVersion?: ClauseVersion
  proposed?: ProposedEntry[]
  founding?: ChainEntry
  amendments?: ChainEntry[]
  /** Valeur en clair (clauses de réglage du Pacte). */
  settingText?: string | null
  gauge?: ClauseSessionGauge | null
  /** Atelier pré-réglé sur le protocole d'amendement de cette clause. */
  atelierLink?: string | null
}>(), { proposed: () => [], amendments: () => [], settingText: null, gauge: null, atelierLink: null })

const hasChain = computed(() => props.founding !== undefined || props.amendments.length > 0)
</script>

<template>
  <!-- ld-v2 -->
  <div class="clause-detail">
    <!-- Valeur en clair — Pacte -->
    <div v-if="settingText" class="clause-detail__setting">
      <UIcon name="i-lucide-settings-2" class="clause-detail__setting-icon" />
      <div>
        <p class="clause-detail__setting-value">{{ settingText }}</p>
        <p class="clause-detail__setting-note">Effet immédiat à l'adoption — le Pacte est le réglage.</p>
      </div>
    </div>

    <!-- Session en cours -->
    <SessionMiniGauge v-if="gauge" :gauge="gauge" with-title class="clause-detail__gauge" />

    <!-- Version courante -->
    <div v-if="currentVersion" class="clause-detail__current">
      <p class="clause-detail__heading">
        Version en vigueur
        <span class="clause-detail__version-label">{{ currentVersion.versionLabel }}</span>
        <span v-if="currentVersion.adoptedAt" class="clause-detail__date">
          adoptée le {{ formatDateFr(currentVersion.adoptedAt) }}
        </span>
      </p>
      <MarkdownRenderer :content="currentVersion.content" class="clause-detail__content" />
    </div>
    <p v-else class="clause-detail__empty">Cette clause n'a pas encore de version en vigueur.</p>

    <!-- Versions proposées : le contenu d'abord, l'auteur replié -->
    <div v-if="proposed.length" class="clause-detail__proposals">
      <p class="clause-detail__heading">
        {{ proposed.length > 1 ? `${proposed.length} versions proposées` : 'Une version est proposée' }}
      </p>
      <article
        v-for="entry in proposed"
        :key="entry.version.id"
        class="clause-detail__proposal"
      >
        <ClauseVersionDiff
          :current="currentVersion?.content ?? ''"
          :proposed="entry.version.content"
        />
        <details class="clause-detail__author">
          <summary class="clause-detail__author-summary">
            <UIcon name="i-lucide-user" />
            Qui propose ? <span class="clause-detail__version-label">{{ entry.version.versionLabel }}</span>
          </summary>
          <p class="clause-detail__author-body">
            Proposée par <strong>{{ entry.authorName }}</strong>
            <template v-if="entry.decisionId">
              — dans le cadre de
              <NuxtLink :to="`/decisions/${entry.decisionId}`" class="clause-detail__link">
                {{ entry.decisionTitle ?? 'la décision liée' }}
              </NuxtLink>
            </template>
          </p>
        </details>
      </article>
    </div>

    <!-- Décision fondatrice + amendements chaînés -->
    <div v-if="hasChain" class="clause-detail__chain">
      <p class="clause-detail__heading">D'où vient cette clause</p>
      <ol class="clause-detail__chain-list">
        <li v-if="founding" class="clause-detail__chain-item">
          <UIcon name="i-lucide-sprout" class="clause-detail__chain-icon" />
          <NuxtLink :to="`/decisions/${founding.id}`" class="clause-detail__link">
            {{ founding.title }}
          </NuxtLink>
          <span v-if="founding.decidedAt" class="clause-detail__date">
            {{ formatDateFr(founding.decidedAt) }}
          </span>
        </li>
        <li
          v-for="amendment in amendments"
          :key="amendment.id"
          class="clause-detail__chain-item"
        >
          <UIcon name="i-lucide-git-commit-vertical" class="clause-detail__chain-icon" />
          <NuxtLink :to="`/decisions/${amendment.id}`" class="clause-detail__link">
            {{ amendment.title }}
          </NuxtLink>
          <span class="status-pill" :class="`status-${amendment.status}`">
            {{ STATUS_LABELS[amendment.status] }}
          </span>
        </li>
      </ol>
    </div>

    <!-- Le geste -->
    <div class="clause-detail__actions">
      <NuxtLink :to="`/decider?clause=${clause.id}`" class="ld-btn clause-detail__propose">
        <UIcon name="i-lucide-pen-line" />
        Proposer une version
      </NuxtLink>
      <NuxtLink v-if="atelierLink" :to="atelierLink" class="ld-btn ld-btn--quiet clause-detail__propose">
        <UIcon name="i-lucide-flask-conical" />
        Comprendre ce seuil
      </NuxtLink>
      <p class="clause-detail__actions-note">
        Amender, c'est décider — le chemin s'ouvre avec l'inertie de cette clause.
      </p>
    </div>
  </div>
</template>

<style scoped>
.clause-detail {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 0.9rem 1rem 1.1rem;
  border-radius: var(--r-input);
  background: color-mix(in srgb, var(--mood-text) 2.5%, var(--mood-surface));
}

.clause-detail__setting {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  padding: 0.7rem 0.9rem;
  border-radius: var(--r-input);
  background: var(--mood-accent-soft);
}
.clause-detail__setting-icon { color: var(--mood-accent); font-size: 1.1rem; margin-top: 2px; }
.clause-detail__setting-value { font-size: 0.9375rem; font-weight: 800; color: var(--mood-text); }
.clause-detail__setting-note { font-size: 0.75rem; color: var(--mood-text-muted); margin-top: 2px; }

.clause-detail__gauge { align-self: flex-start; }

.clause-detail__heading {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
  font-size: 0.6875rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--mood-text-muted);
  margin-bottom: 0.4rem;
}
.clause-detail__version-label {
  font-family: monospace;
  font-size: 0.6875rem;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--mood-text) 7%, transparent);
  color: var(--mood-text);
  text-transform: none;
  letter-spacing: 0;
}
.clause-detail__date {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--mood-text-muted);
  text-transform: none;
  letter-spacing: 0;
}
.clause-detail__content { font-size: 0.875rem; }
.clause-detail__empty { font-size: 0.8125rem; color: var(--mood-text-muted); font-style: italic; }

.clause-detail__proposal { display: flex; flex-direction: column; gap: 0.4rem; }
.clause-detail__proposal + .clause-detail__proposal { margin-top: 0.75rem; }

.clause-detail__author-summary {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--mood-text-muted);
  cursor: pointer;
  user-select: none;
}
.clause-detail__author-body { font-size: 0.8125rem; color: var(--mood-text); margin-top: 0.35rem; }

.clause-detail__chain-list { display: flex; flex-direction: column; gap: 0.35rem; }
.clause-detail__chain-item {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
  font-size: 0.8125rem;
}
.clause-detail__chain-icon { color: var(--mood-accent); font-size: 0.95rem; flex-shrink: 0; }
.clause-detail__chain-item .status-pill { font-size: 0.6875rem; padding: 2px 9px; }

.clause-detail__link { color: var(--mood-accent); text-decoration: none; font-weight: 600; }
.clause-detail__link:hover { text-decoration: underline; }

.clause-detail__actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 0.25rem;
}
.clause-detail__propose { text-decoration: none; font-size: 0.875rem; }
.clause-detail__actions-note { font-size: 0.75rem; color: var(--mood-text-muted); }
</style>