decision/frontend/app/pages/donnees.vue

<script setup lang="ts">
/**
 * /donnees — local-first assumé : tes données, ton fichier, ta machine.
 * Sections : collectifs locaux · import · jeux de démonstration · identité ·
 * mode atelier · niveaux de preuve. Note synchro en pied.
 */
import { useCollectiveStore } from '~/stores/collective'
import type { SeedName } from '~/stores/collective'
import { PROOF_LOCAL, SYNC_NOTE, WORKSHOP_MODE } from '~/lexicon'

const store = useCollectiveStore()

// ── Jeux de démonstration — désactivés si déjà présents ──────
const seedBusy = ref<SeedName | null>(null)
const seedIssues = ref<string[]>([])

const hasSeed = (slug: string) => store.index.some(entry => entry.slug === slug)

async function loadSeed(name: SeedName) {
  if (seedBusy.value) return
  seedBusy.value = name
  seedIssues.value = []
  const result = await store.loadSeed(name)
  seedIssues.value = result.issues.filter(i => i.level === 'error').map(i => i.message)
  seedBusy.value = null
}

// ── Mode atelier — flag local lu par les écrans de vote ──────
const workshop = ref(false)
onMounted(() => {
  workshop.value = localStorage.getItem('ld2-workshop') === '1'
})
function toggleWorkshop() {
  workshop.value = !workshop.value
  localStorage.setItem('ld2-workshop', workshop.value ? '1' : '0')
}
</script>

<template>
  <!-- ld-v2 -->
  <div class="donnees">
    <header class="donnees__head">
      <h1 class="donnees__title">Données locales</h1>
      <p class="donnees__sub">Tes données, ton fichier, ta machine.</p>
    </header>

    <DataCollectivesCard />

    <DataImportCard />

    <section class="ld-card data-card">
      <h2 class="data-card__title">
        <UIcon name="i-lucide-sprout" /> Jeux de démonstration
      </h2>
      <p class="data-card__text">
        Deux collectifs complets, importés par le même chemin qu'un fichier à toi.
      </p>
      <div class="seed-row">
        <button
          type="button"
          class="ld-btn ld-btn--ghost"
          :disabled="hasSeed('duniter-g1') || seedBusy !== null"
          @click="loadSeed('duniter-g1')"
        >
          <UIcon name="i-lucide-coins" />
          {{ hasSeed('duniter-g1') ? 'Duniter Ğ1 — déjà là' : 'Explorer Duniter Ğ1' }}
        </button>
        <button
          type="button"
          class="ld-btn ld-btn--ghost"
          :disabled="hasSeed('atelier-du-canal') || seedBusy !== null"
          @click="loadSeed('atelier-du-canal')"
        >
          <UIcon name="i-lucide-hammer" />
          {{ hasSeed('atelier-du-canal') ? "L'Atelier du Canal — déjà là" : "Explorer l'Atelier du Canal" }}
        </button>
      </div>
      <ul v-if="seedIssues.length" class="seed-issues">
        <li v-for="msg in seedIssues" :key="msg">
          <UIcon name="i-lucide-circle-alert" /> {{ msg }}
        </li>
      </ul>
    </section>

    <DataIdentityCard />

    <section class="ld-card data-card">
      <h2 class="data-card__title">
        <UIcon name="i-lucide-users-round" />
        <span class="cap-word">{{ WORKSHOP_MODE }}</span>
      </h2>
      <div class="workshop">
        <p class="data-card__text">
          En présence, une seule machine circule : chaque saisie garde qui a saisi,
          pour qui, et la date de l'atelier.
        </p>
        <button
          type="button"
          class="switch"
          :class="{ 'switch--on': workshop }"
          role="switch"
          :aria-checked="workshop"
          :aria-label="WORKSHOP_MODE"
          @click="toggleWorkshop"
        >
          <span class="switch__thumb" />
        </button>
      </div>
    </section>

    <section class="ld-card data-card">
      <h2 class="data-card__title">
        <UIcon name="i-lucide-shield-check" /> Niveaux de preuve
      </h2>
      <ul class="proof-list">
        <li class="proof-row">
          <UIcon name="i-lucide-fingerprint" class="proof-row__icon" />
          <span class="proof-row__main">
            <span class="proof-row__name cap-word">{{ PROOF_LOCAL }}</span>
            <span class="proof-row__desc">
              Chaque gravure calcule l'empreinte du texte décidé, vérifiable sur ta machine.
            </span>
          </span>
          <span class="status-pill status-adopted">disponible</span>
        </li>
        <li class="proof-row proof-row--off">
          <UIcon name="i-lucide-globe" class="proof-row__icon" />
          <span class="proof-row__main">
            <span class="proof-row__name">IPFS</span>
            <span class="proof-row__desc">Une copie de l'empreinte répliquée entre pairs.</span>
          </span>
          <span class="status-pill status-closed">à venir</span>
        </li>
        <li class="proof-row proof-row--off">
          <UIcon name="i-lucide-link" class="proof-row__icon" />
          <span class="proof-row__main">
            <span class="proof-row__name">Chaîne Duniter</span>
            <span class="proof-row__desc">L'empreinte ancrée dans la chaîne, pour de bon.</span>
          </span>
          <span class="status-pill status-closed">à venir</span>
        </li>
      </ul>
    </section>

    <p class="donnees__sync">{{ SYNC_NOTE }}</p>
  </div>
</template>

<style scoped>
.donnees {
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 3vw, 1.5rem);
  width: min(100%, 46rem);
  margin-inline: auto;
  padding: clamp(1rem, 3vw, 2rem) clamp(0.875rem, 3vw, 1.5rem) 4.5rem;
}

.donnees__head {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.donnees__title {
  margin: 0;
  font-size: clamp(1.4rem, 4vw, 1.8rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--mood-text);
}

.donnees__sub {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--mood-text-muted);
}

.data-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: clamp(1rem, 3vw, 1.5rem);
}

.data-card__title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 800;
  color: var(--mood-text);
}

.data-card__text {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--mood-text-muted);
}

.cap-word {
  display: inline-block;
}
.cap-word::first-letter {
  text-transform: uppercase;
}

.seed-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.seed-issues {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin: 0;
  padding: 0.75rem 1rem;
  list-style: none;
  border-radius: var(--r-input);
  background: color-mix(in srgb, var(--mood-error) 10%, transparent);
  color: var(--mood-error);
  font-size: 0.875rem;
  font-weight: 600;
}
.seed-issues li {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
}

.workshop {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.switch {
  position: relative;
  width: 3.25rem;
  height: 2.25rem;
  flex-shrink: 0;
  padding: 0;
  border-radius: var(--r-pill);
  cursor: pointer;
  background: var(--mood-input-border);
  transition: background 0.15s ease;
}
.switch--on {
  background: var(--mood-accent);
}

.switch__thumb {
  position: absolute;
  top: 50%;
  left: 0.3rem;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  background: var(--mood-surface);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  transform: translateY(-50%);
  transition: left 0.15s ease;
}
.switch--on .switch__thumb {
  left: calc(100% - 1.45rem);
}

.proof-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.proof-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 0.85rem;
  border-radius: var(--r-input);
  background: var(--mood-bg);
}
.proof-row--off {
  opacity: 0.55;
}

.proof-row__icon {
  font-size: 1.25rem;
  flex-shrink: 0;
  color: var(--mood-accent);
}
.proof-row--off .proof-row__icon {
  color: var(--mood-text-muted);
}

.proof-row__main {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
  flex: 1;
}

.proof-row__name {
  font-weight: 700;
  color: var(--mood-text);
}

.proof-row__desc {
  font-size: 0.8125rem;
  color: var(--mood-text-muted);
}

.donnees__sync {
  margin: 0;
  text-align: center;
  font-size: 0.8125rem;
  font-style: italic;
  color: var(--mood-text-muted);
}

@media (max-width: 480px) {
  .proof-row {
    flex-wrap: wrap;
  }
}
</style>