decision/frontend/app/components/documents/DocumentTuto.vue

<script setup lang="ts">
/**
 * DocumentTuto — Quick tutorial overlay explaining how the document works.
 * Shows how permanent voting, inertia, counter-proposals, and thresholds work.
 */
const open = ref(false)

const steps = [
  {
    icon: 'i-lucide-infinity',
    title: 'Vote permanent',
    text: 'Chaque engagement est sous vote permanent. À tout moment, vous pouvez proposer une alternative ou voter pour/contre le texte en vigueur.',
  },
  {
    icon: 'i-lucide-sliders-horizontal',
    title: 'Inertie variable',
    text: 'Les engagements fondamentaux ont une inertie standard (difficulté de remplacement modérée). Les annexes sont plus faciles à modifier. La formule et ses réglages sont très protégés.',
  },
  {
    icon: 'i-lucide-scale',
    title: 'Seuil adaptatif',
    text: 'La formule WoT adapte le seuil à la participation : peu de votants = quasi-unanimité requise ; beaucoup de votants = majorité simple suffit.',
  },
  {
    icon: 'i-lucide-pen-line',
    title: 'Contre-propositions',
    text: 'Cliquez sur « Proposer une alternative » pour soumettre un texte de remplacement. Il sera soumis au vote et devra atteindre le seuil d\'adoption pour remplacer le texte en vigueur.',
  },
  {
    icon: 'i-lucide-git-branch',
    title: 'Dépôt automatique',
    text: 'Quand une alternative est adoptée, le document officiel est mis à jour, ancré sur IPFS et on-chain, puis déployé dans les applications (Cesium, Gecko).',
  },
]
</script>

<template>
  <div>
    <UButton
      icon="i-lucide-circle-help"
      variant="ghost"
      color="neutral"
      size="sm"
      @click="open = true"
    />

    <UModal v-model:open="open" :ui="{ content: 'max-w-lg' }">
      <template #content>
        <div class="p-6">
          <div class="flex items-center justify-between mb-5">
            <h2 class="text-lg font-bold" style="color: var(--mood-text)">
              Comment ça marche ?
            </h2>
            <UButton
              icon="i-lucide-x"
              variant="ghost"
              color="neutral"
              size="xs"
              @click="open = false"
            />
          </div>

          <div class="flex flex-col gap-4">
            <div
              v-for="(step, idx) in steps"
              :key="idx"
              class="tuto-step"
            >
              <div class="tuto-step__icon">
                <UIcon :name="step.icon" class="text-base" />
              </div>
              <div class="tuto-step__content">
                <h4 class="text-sm font-bold" style="color: var(--mood-text)">
                  {{ step.title }}
                </h4>
                <p class="text-xs leading-relaxed" style="color: var(--mood-text-muted)">
                  {{ step.text }}
                </p>
              </div>
            </div>
          </div>

          <div class="mt-5 pt-4 border-t" style="border-color: color-mix(in srgb, var(--mood-text) 8%, transparent)">
            <p class="text-xs text-center" style="color: var(--mood-text-muted)">
              Référence : formule g1vote —
              <a
                href="https://g1vote-view-237903.pages.duniter.org/"
                target="_blank"
                rel="noopener"
                style="color: var(--mood-accent)"
              >
                g1vote-view
              </a>
            </p>
          </div>
        </div>
      </template>
    </UModal>
  </div>
</template>

<style scoped>
.tuto-step {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
}

.tuto-step__icon {
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: color-mix(in srgb, var(--mood-accent) 10%, transparent);
  color: var(--mood-accent);
  flex-shrink: 0;
}

.tuto-step__content {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}
</style>