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>
2026-08-11 13:47:20 +02:00
parent d886302b59
commit e164b5f6c1
96 changed files with 14097 additions and 11777 deletions
@@ -0,0 +1,248 @@
+<script setup lang="ts">
+// <!-- ld-v2 --> « Exercice du mandat » (Δ7) — des FAITS COMPTÉS, jamais
+// synthétisés : décisions tracées, objections listées, rapports rendus/dus.
+// Le titulaire rend son rapport ici quand il est dû — contenu dépliable.
+import type { Mandate } from '~/types/domain'
+import { useCollectiveStore } from '~/stores/collective'
+import { MANDATE_EXERCISE, STATUS_LABELS } from '~/lexicon'
+import {
+  OBJECTION_STATUS_LABELS,
+  formatDay,
+  mandateFacts,
+  reportIntervalMs,
+} from './mandateUi'
+
+const props = defineProps<{ mandate: Mandate }>()
+
+const col = useCollectiveStore()
+
+const facts = computed(() => mandateFacts(props.mandate, col.decisions, col.objections))
+
+const objectionRows = computed(() =>
+  facts.value.objections.map(o => ({
+    id: o.id,
+    decisionId: o.decisionId,
+    decisionTitle: col.decisions.find(d => d.id === o.decisionId)?.title ?? '—',
+    argument: o.argument,
+    statusLabel: OBJECTION_STATUS_LABELS[o.status],
+    open: o.status === 'open',
+  })),
+)
+
+const sortedReports = computed(() =>
+  [...props.mandate.reports].sort((a, b) => (a.dueAt < b.dueAt ? -1 : 1)),
+)
+
+/** Le rapport dû maintenant, à rendre par le titulaire (moi). */
+const dueReport = computed(() => {
+  if (col.me?.id !== props.mandate.holderId) return undefined
+  if (props.mandate.status !== 'active') return undefined
+  return sortedReports.value.find(r => r.deliveredAt === undefined && r.dueAt <= col.now())
+})
+
+const reportText = ref('')
+
+function deliverReport(): void {
+  const target = dueReport.value
+  if (!target || reportText.value.trim().length === 0) return
+  target.deliveredAt = col.now()
+  target.content = reportText.value.trim()
+  // Cadence : le prochain rapport garde l'espacement existant, borné à l'échéance.
+  const interval = reportIntervalMs(props.mandate)
+  if (interval !== undefined) {
+    const nextDue = new Date(new Date(target.dueAt).getTime() + interval).toISOString()
+    if (nextDue < props.mandate.endsAt) props.mandate.reports.push({ dueAt: nextDue })
+  }
+  col.stamp(props.mandate)
+  col.persist()
+  reportText.value = ''
+}
+</script>
+
+<template>
+  <!-- ld-v2 -->
+  <section class="mex ld-card">
+    <h2 class="mex__title">
+      <UIcon name="i-lucide-list-checks" />
+      {{ MANDATE_EXERCISE }}
+    </h2>
+    <p class="mex__facts">{{ facts.line }}</p>
+
+    <!-- Décisions tracées -->
+    <div v-if="facts.traced.length" class="mex__block">
+      <h3 class="mex__block-title">Décisions tracées</h3>
+      <ul class="mex__list">
+        <li v-for="d in facts.traced" :key="d.id">
+          <NuxtLink :to="`/decisions/${d.id}`" class="mex__row">
+            <span class="mex__row-title">{{ d.title }}</span>
+            <span class="status-pill" :class="`status-${d.status}`">
+              {{ STATUS_LABELS[d.status] }}
+            </span>
+          </NuxtLink>
+        </li>
+      </ul>
+    </div>
+
+    <!-- Objections — liste cliquable -->
+    <div v-if="objectionRows.length" class="mex__block">
+      <h3 class="mex__block-title">Objections</h3>
+      <ul class="mex__list">
+        <li v-for="o in objectionRows" :key="o.id">
+          <NuxtLink :to="`/decisions/${o.decisionId}`" class="mex__row">
+            <span class="mex__row-title">{{ o.argument }}</span>
+            <span class="mex__obj-status" :class="{ 'mex__obj-status--open': o.open }">
+              {{ o.statusLabel }}
+            </span>
+          </NuxtLink>
+        </li>
+      </ul>
+    </div>
+
+    <!-- Rapports — rendus dépliables, saisie quand dû -->
+    <div v-if="sortedReports.length || dueReport" class="mex__block">
+      <h3 class="mex__block-title">
+        Rapports — {{ facts.reportsDelivered }}/{{ facts.reportsTotal }} rendus
+      </h3>
+      <ul class="mex__list">
+        <li v-for="r in sortedReports" :key="r.dueAt">
+          <details v-if="r.deliveredAt" class="mex__report">
+            <summary class="mex__report-summary">
+              <UIcon name="i-lucide-file-check-2" />
+              <span>Rapport rendu le {{ formatDay(r.deliveredAt) }}</span>
+              <span class="mex__report-due">dû le {{ formatDay(r.dueAt) }}</span>
+            </summary>
+            <p class="mex__report-content">{{ r.content }}</p>
+          </details>
+          <div v-else class="mex__report mex__report--pending">
+            <UIcon name="i-lucide-file-clock" />
+            <span>Rapport dû le {{ formatDay(r.dueAt) }}</span>
+          </div>
+        </li>
+      </ul>
+
+      <form v-if="dueReport" class="mex__deliver" @submit.prevent="deliverReport">
+        <label class="mex__deliver-label" for="mex-report">
+          Ton rapport est dû — quelques phrases suffisent.
+        </label>
+        <textarea
+          id="mex-report"
+          v-model="reportText"
+          rows="4"
+          lang="fr"
+          spellcheck="true"
+          placeholder="Ce qui a été fait, ce qui engage la suite…"
+        />
+        <button type="submit" class="ld-btn" :disabled="reportText.trim().length === 0">
+          <UIcon name="i-lucide-send" />
+          Rendre le rapport
+        </button>
+      </form>
+    </div>
+  </section>
+</template>
+
+<style scoped>
+.mex { padding: 1.375rem 1.5rem; display: flex; flex-direction: column; gap: 1rem; }
+.mex__title {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin: 0;
+  font-size: 1.0625rem;
+  font-weight: 800;
+}
+.mex__facts {
+  margin: 0;
+  font-size: 0.9375rem;
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+}
+.mex__block { display: flex; flex-direction: column; gap: 0.5rem; }
+.mex__block-title {
+  margin: 0;
+  font-size: 0.75rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--mood-text-muted);
+}
+.mex__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.375rem; }
+.mex__row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  padding: 0.5rem 0.75rem;
+  border-radius: var(--r-input);
+  background: var(--mood-accent-soft);
+  text-decoration: none;
+  color: var(--mood-text);
+  transition: transform 0.1s ease;
+}
+.mex__row:hover { transform: translateY(-1px); }
+.mex__row-title {
+  font-size: 0.875rem;
+  font-weight: 600;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.mex__obj-status {
+  flex-shrink: 0;
+  font-size: 0.75rem;
+  font-weight: 700;
+  color: var(--mood-text-muted);
+}
+.mex__obj-status--open { color: var(--mood-status-fenetre); }
+.mex__report {
+  border-radius: var(--r-input);
+  background: var(--mood-accent-soft);
+  padding: 0.5rem 0.75rem;
+}
+.mex__report-summary {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.875rem;
+  font-weight: 600;
+  cursor: pointer;
+  list-style: none;
+}
+.mex__report-summary::-webkit-details-marker { display: none; }
+.mex__report-due { margin-left: auto; font-size: 0.75rem; color: var(--mood-text-muted); }
+.mex__report-content {
+  margin: 0.625rem 0 0.25rem;
+  font-size: 0.875rem;
+  line-height: 1.55;
+  color: var(--mood-text);
+  white-space: pre-line;
+}
+.mex__report--pending {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--mood-status-fenetre);
+  background: var(--mood-status-fenetre-bg);
+}
+.mex__deliver { display: flex; flex-direction: column; gap: 0.625rem; margin-top: 0.375rem; }
+.mex__deliver-label { font-size: 0.875rem; font-weight: 600; }
+.mex__deliver textarea {
+  width: 100%;
+  padding: 0.625rem 0.875rem;
+  font: inherit;
+  font-size: 0.9375rem;
+  color: var(--mood-text);
+  background: var(--mood-input-bg);
+  border: none;
+  border-radius: var(--r-input);
+  box-shadow: inset 0 0 0 1px var(--mood-input-border);
+  resize: vertical;
+}
+.mex__deliver textarea:focus {
+  outline: none;
+  box-shadow: inset 0 0 0 2px var(--mood-input-focus);
+}
+.mex__deliver .ld-btn { align-self: flex-start; }
+</style>