Sprint 2 : moteur de documents + sanctuaire

Backend:
- CRUD complet documents/items/versions (update, delete, accept, reject, reorder)
- Service IPFS (upload/retrieve/pin via kubo HTTP API)
- Service sanctuaire : pipeline SHA-256 + IPFS + on-chain (system.remark)
- Verification integrite des entrees sanctuaire
- Recherche par reference (document -> entrees sanctuaire)
- Serialisation deterministe des documents pour archivage
- 14 tests unitaires supplementaires (document service)

Frontend:
- 9 composants : StatusBadge, MarkdownRenderer, DiffView, ItemCard,
  ItemVersionDiff, DocumentList, SanctuaryEntry, IPFSLink, ChainAnchor
- Page detail item avec historique des versions et diff
- Page detail sanctuaire avec verification integrite
- Modal de creation de document + proposition de version
- Archivage document vers sanctuaire depuis la page detail

Documentation:
- API reference mise a jour (9 nouveaux endpoints)
- Guides utilisateur documents et sanctuaire enrichis

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

frontend/app/pages/documents/index.vue

@@ -1,5 +1,8 @@
 <script setup lang="ts">
+import type { DocumentCreate } from '~/stores/documents'
+
 const documents = useDocumentsStore()
+const auth = useAuthStore()
 
 const filterType = ref<string | undefined>(undefined)
 const filterStatus = ref<string | undefined>(undefined)
@@ -19,13 +22,22 @@ const statusOptions = [
   { label: 'Archive', value: 'archived' },
 ]
 
-const columns = [
-  { key: 'title', label: 'Titre' },
-  { key: 'doc_type', label: 'Type' },
-  { key: 'version', label: 'Version' },
-  { key: 'status', label: 'Statut' },
-  { key: 'items_count', label: 'Items' },
-  { key: 'updated_at', label: 'Mis a jour' },
+// New document modal state
+const showNewDocModal = ref(false)
+const newDoc = ref<DocumentCreate>({
+  slug: '',
+  title: '',
+  doc_type: 'licence',
+  description: null,
+  version: '1.0.0',
+})
+const creating = ref(false)
+
+const newDocTypeOptions = [
+  { label: 'Licence', value: 'licence' },
+  { label: 'Engagement', value: 'engagement' },
+  { label: 'Reglement', value: 'reglement' },
+  { label: 'Constitution', value: 'constitution' },
 ]
 
 async function loadDocuments() {
@@ -43,40 +55,47 @@ watch([filterType, filterStatus], () => {
   loadDocuments()
 })
 
-const statusColor = (status: string) => {
-  switch (status) {
-    case 'active': return 'success'
-    case 'draft': return 'warning'
-    case 'archived': return 'neutral'
-    default: return 'neutral'
+function openNewDocModal() {
+  newDoc.value = {
+    slug: '',
+    title: '',
+    doc_type: 'licence',
+    description: null,
+    version: '1.0.0',
   }
+  showNewDocModal.value = true
 }
 
-const statusLabel = (status: string) => {
-  switch (status) {
-    case 'active': return 'Actif'
-    case 'draft': return 'Brouillon'
-    case 'archived': return 'Archive'
-    default: return status
-  }
+function generateSlug(title: string): string {
+  return title
+    .toLowerCase()
+    .normalize('NFD')
+    .replace(/[\u0300-\u036f]/g, '')
+    .replace(/[^a-z0-9\s-]/g, '')
+    .replace(/\s+/g, '-')
+    .replace(/-+/g, '-')
+    .slice(0, 64)
 }
 
-const typeLabel = (docType: string) => {
-  switch (docType) {
-    case 'licence': return 'Licence'
-    case 'engagement': return 'Engagement'
-    case 'reglement': return 'Reglement'
-    case 'constitution': return 'Constitution'
-    default: return docType
+watch(() => newDoc.value.title, (title) => {
+  if (title) {
+    newDoc.value.slug = generateSlug(title)
   }
-}
+})
 
-function formatDate(dateStr: string): string {
-  return new Date(dateStr).toLocaleDateString('fr-FR', {
-    day: 'numeric',
-    month: 'short',
-    year: 'numeric',
-  })
+async function createDocument() {
+  creating.value = true
+  try {
+    const doc = await documents.createDocument(newDoc.value)
+    showNewDocModal.value = false
+    if (doc) {
+      navigateTo(`/documents/${doc.slug}`)
+    }
+  } catch {
+    // Error handled in store
+  } finally {
+    creating.value = false
+  }
 }
 </script>
 
@@ -92,6 +111,15 @@ function formatDate(dateStr: string): string {
           Documents fondateurs de la communaute Duniter/G1 sous vote permanent
         </p>
       </div>
+
+      <!-- New document button for authenticated users -->
+      <UButton
+        v-if="auth.isAuthenticated"
+        label="Nouveau document"
+        icon="i-lucide-plus"
+        color="primary"
+        @click="openNewDocModal"
+      />
     </div>
 
     <!-- Filters -->
@@ -110,15 +138,8 @@ function formatDate(dateStr: string): string {
       />
     </div>
 
-    <!-- Loading state -->
-    <template v-if="documents.loading">
-      <div class="space-y-3">
-        <USkeleton v-for="i in 5" :key="i" class="h-12 w-full" />
-      </div>
-    </template>
-
     <!-- Error state -->
-    <template v-else-if="documents.error">
+    <template v-if="documents.error">
       <UCard>
         <div class="flex items-center gap-3 text-red-500">
           <UIcon name="i-lucide-alert-circle" class="text-xl" />
@@ -127,65 +148,96 @@ function formatDate(dateStr: string): string {
       </UCard>
     </template>
 
-    <!-- Empty state -->
-    <template v-else-if="documents.list.length === 0">
-      <UCard>
-        <div class="text-center py-8">
-          <UIcon name="i-lucide-book-open" class="text-4xl text-gray-400 mb-3" />
-          <p class="text-gray-500">Aucun document de reference pour le moment</p>
-        </div>
-      </UCard>
-    </template>
+    <!-- Document list component -->
+    <DocumentsDocumentList
+      :documents="documents.list"
+      :loading="documents.loading"
+    />
 
-    <!-- Documents table -->
-    <template v-else>
-      <UCard>
-        <div class="overflow-x-auto">
-          <table class="w-full text-sm">
-            <thead>
-              <tr class="border-b border-gray-200 dark:border-gray-700">
-                <th v-for="col in columns" :key="col.key" class="text-left px-4 py-3 font-medium text-gray-500 dark:text-gray-400">
-                  {{ col.label }}
-                </th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr
-                v-for="doc in documents.list"
-                :key="doc.id"
-                class="border-b border-gray-100 dark:border-gray-800 hover:bg-gray-50 dark:hover:bg-gray-800/50 cursor-pointer"
-                @click="navigateTo(`/documents/${doc.slug}`)"
-              >
-                <td class="px-4 py-3">
-                  <div class="flex items-center gap-2">
-                    <UIcon name="i-lucide-file-text" class="text-gray-400" />
-                    <span class="font-medium text-gray-900 dark:text-white">{{ doc.title }}</span>
-                  </div>
-                </td>
-                <td class="px-4 py-3">
-                  <UBadge variant="subtle" color="primary">
-                    {{ typeLabel(doc.doc_type) }}
-                  </UBadge>
-                </td>
-                <td class="px-4 py-3 text-gray-600 dark:text-gray-400 font-mono text-xs">
-                  v{{ doc.version }}
-                </td>
-                <td class="px-4 py-3">
-                  <UBadge :color="statusColor(doc.status)" variant="subtle">
-                    {{ statusLabel(doc.status) }}
-                  </UBadge>
-                </td>
-                <td class="px-4 py-3 text-gray-600 dark:text-gray-400">
-                  {{ doc.items_count }}
-                </td>
-                <td class="px-4 py-3 text-gray-500 text-xs">
-                  {{ formatDate(doc.updated_at) }}
-                </td>
-              </tr>
-            </tbody>
-          </table>
+    <!-- New document modal -->
+    <UModal v-model:open="showNewDocModal">
+      <template #content>
+        <div class="p-6 space-y-4">
+          <h3 class="text-lg font-semibold text-gray-900 dark:text-white">
+            Nouveau document de reference
+          </h3>
+
+          <div class="space-y-4">
+            <div class="space-y-2">
+              <label class="text-sm font-medium text-gray-700 dark:text-gray-300">
+                Titre
+              </label>
+              <UInput
+                v-model="newDoc.title"
+                placeholder="Ex: Licence G1"
+                class="w-full"
+              />
+            </div>
+
+            <div class="space-y-2">
+              <label class="text-sm font-medium text-gray-700 dark:text-gray-300">
+                Slug (identifiant URL)
+              </label>
+              <UInput
+                v-model="newDoc.slug"
+                placeholder="Ex: licence-g1"
+                class="w-full font-mono text-sm"
+              />
+            </div>
+
+            <div class="space-y-2">
+              <label class="text-sm font-medium text-gray-700 dark:text-gray-300">
+                Type de document
+              </label>
+              <USelect
+                v-model="newDoc.doc_type"
+                :items="newDocTypeOptions"
+                class="w-full"
+              />
+            </div>
+
+            <div class="space-y-2">
+              <label class="text-sm font-medium text-gray-700 dark:text-gray-300">
+                Version
+              </label>
+              <UInput
+                v-model="newDoc.version"
+                placeholder="1.0.0"
+                class="w-full font-mono text-sm"
+              />
+            </div>
+
+            <div class="space-y-2">
+              <label class="text-sm font-medium text-gray-700 dark:text-gray-300">
+                Description (optionnelle)
+              </label>
+              <UTextarea
+                v-model="newDoc.description"
+                :rows="3"
+                placeholder="Decrivez brievement ce document..."
+                class="w-full"
+              />
+            </div>
+          </div>
+
+          <div class="flex items-center justify-end gap-3 pt-2">
+            <UButton
+              label="Annuler"
+              variant="ghost"
+              color="neutral"
+              @click="showNewDocModal = false"
+            />
+            <UButton
+              label="Creer le document"
+              icon="i-lucide-plus"
+              color="primary"
+              :loading="creating"
+              :disabled="!newDoc.title.trim() || !newDoc.slug.trim()"
+              @click="createDocument"
+            />
+          </div>
         </div>
-      </UCard>
-    </template>
+      </template>
+    </UModal>
   </div>
 </template>