forked from yvv/decision
v2 : les 14 écrans — le tour complet de la démocratie d'exercice
- Aujourd'hui (Fil 13 sections + capture sticky) + Le chemin (tunnel 2 gestes, Q0 inline, 3 chips, dérogation asymétrique, alternatives réglage/consignation) - Registre + fiche décision (timeline, périmètre premier/second lieu auditable, affluence non-ignorable, S'instruire condensé, éléments + cartographie de clôture, épreuve du réel, Remettre en question, PV A4, gravure) - Salle de vote 5 modalités (consentement, nuancé+histogramme, binaire hérité avec jauge inertielle, Réglage collectif complet — faisceau, médiane basse, Pour moi, Explorer, cristallisation-geste —, élection à départage humain) - Textes (Pacte en clair, document vivant, diff, vue projetée, Atelier des formules porté du v1 sur le moteur unique) + Mandats (faits comptés, feux de la rampe, wizard 3 étapes) + Observatoire (consigner→observer→protocoliser) - Onboarding 7 gabarits + Données locales (export/import, attributs, atelier) - voting→framing gardé (Reformuler d'un réglage figé non cristallisé) - Pages v1 supprimées (login, documents, mandates, protocols, sanctuary, tools, decisions/new) — 342 tests verts, build zéro erreur Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
Yvv
@@ -0,0 +1,333 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user