Groupes d'identités : modèle DB, router, store, UI cercles + Protocoles

- Group + GroupMember : modèle SQLAlchemy + migration + router CRUD
- /api/v1/groups : liste, création, suppression, membres (add/remove)
- groups.ts : store Pinia (fetchAll, getGroup, create, remove, addMember, removeMember)
- decisions/new.vue : cercles 1 & 2 en mode texte libre OU groupe prédéfini
  (affected_count calculé depuis le member_count du groupe)
- protocols/index.vue : section Groupes avec expand/collapse, ajout/suppression membres
- lang="fr" + spellcheck sur tous les textareas ; placeholder cercle 2 corrigé
- n8n channels : prévu sprint futur (texte libre → webhook appel à contribution)

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

frontend/app/pages/protocols/index.vue

@@ -24,6 +24,7 @@ onMounted(async () => {
   await Promise.all([
     protocols.fetchProtocols(),
     protocols.fetchFormulas(),
+    groupsStore.fetchAll(),
   ])
 })
 
@@ -174,6 +175,73 @@ const operationalProtocols: OperationalProtocol[] = [
   },
 ]
 
+// ── Groups ─────────────────────────────────────────────────────────────────
+const groupsStore = useGroupsStore()
+const showGroupModal = ref(false)
+const newGroupName = ref('')
+const newGroupDesc = ref('')
+const creatingGroup = ref(false)
+const expandedGroupId = ref<string | null>(null)
+const expandedGroupDetail = ref<import('~/stores/groups').Group | null>(null)
+const loadingGroupDetail = ref(false)
+const newMemberName = ref('')
+const addingMember = ref(false)
+
+async function openGroupModal() {
+  newGroupName.value = ''
+  newGroupDesc.value = ''
+  showGroupModal.value = true
+}
+
+async function createGroup() {
+  if (!newGroupName.value.trim()) return
+  creatingGroup.value = true
+  try {
+    await groupsStore.create({ name: newGroupName.value.trim(), description: newGroupDesc.value.trim() || null })
+    showGroupModal.value = false
+  } finally {
+    creatingGroup.value = false
+  }
+}
+
+async function toggleGroupDetail(groupId: string) {
+  if (expandedGroupId.value === groupId) {
+    expandedGroupId.value = null
+    expandedGroupDetail.value = null
+    return
+  }
+  expandedGroupId.value = groupId
+  loadingGroupDetail.value = true
+  expandedGroupDetail.value = await groupsStore.getGroup(groupId)
+  loadingGroupDetail.value = false
+}
+
+async function addMember(groupId: string) {
+  if (!newMemberName.value.trim()) return
+  addingMember.value = true
+  const member = await groupsStore.addMember(groupId, { display_name: newMemberName.value.trim() })
+  if (member && expandedGroupDetail.value) {
+    expandedGroupDetail.value.members.push(member)
+    newMemberName.value = ''
+  }
+  addingMember.value = false
+}
+
+async function removeMember(groupId: string, memberId: string) {
+  const ok = await groupsStore.removeMember(groupId, memberId)
+  if (ok && expandedGroupDetail.value) {
+    expandedGroupDetail.value.members = expandedGroupDetail.value.members.filter(m => m.id !== memberId)
+  }
+}
+
+async function deleteGroup(groupId: string) {
+  await groupsStore.remove(groupId)
+  if (expandedGroupId.value === groupId) {
+    expandedGroupId.value = null
+    expandedGroupDetail.value = null
+  }
+}
+
 /** n8n workflow demo items. */
 const n8nWorkflows = [
   {
@@ -330,6 +398,79 @@ const n8nWorkflows = [
       </div>
     </template>
 
+    <!-- Groups ─────────────────────────────────────────────────────────── -->
+    <div class="proto-groups">
+      <h3 class="proto-groups__title">
+        <UIcon name="i-lucide-users-round" class="text-sm" />
+        Groupes d'identités
+        <span class="proto-groups__count">{{ groupsStore.list.length }}</span>
+        <button v-if="auth.isAuthenticated" class="proto-groups__add-btn" @click="openGroupModal">
+          <UIcon name="i-lucide-plus" class="text-sm" />
+          Nouveau groupe
+        </button>
+      </h3>
+
+      <div v-if="groupsStore.list.length === 0" class="proto-groups__empty">
+        <UIcon name="i-lucide-users" class="text-lg" />
+        <span>Aucun groupe défini. Les groupes permettent de pré-sélectionner des cercles dans les décisions.</span>
+      </div>
+
+      <div v-else class="proto-groups__list">
+        <div v-for="g in groupsStore.list" :key="g.id" class="proto-groups__item">
+          <div class="proto-groups__item-head" @click="toggleGroupDetail(g.id)">
+            <div class="proto-groups__item-info">
+              <UIcon name="i-lucide-users" class="text-sm" />
+              <span class="proto-groups__item-name">{{ g.name }}</span>
+              <span class="proto-groups__item-count">{{ g.member_count }} membre{{ g.member_count > 1 ? 's' : '' }}</span>
+            </div>
+            <div class="proto-groups__item-actions">
+              <button v-if="auth.isAuthenticated" class="proto-groups__delete-btn" @click.stop="deleteGroup(g.id)">
+                <UIcon name="i-lucide-trash-2" class="text-xs" />
+              </button>
+              <UIcon :name="expandedGroupId === g.id ? 'i-lucide-chevron-up' : 'i-lucide-chevron-down'" class="text-sm" />
+            </div>
+          </div>
+
+          <Transition name="slide-down">
+            <div v-if="expandedGroupId === g.id" class="proto-groups__detail">
+              <p v-if="g.description" class="proto-groups__detail-desc">{{ g.description }}</p>
+              <div v-if="loadingGroupDetail" class="proto-groups__members-loading">
+                <UIcon name="i-lucide-loader-2" class="animate-spin text-sm" />
+              </div>
+              <ul v-else-if="expandedGroupDetail" class="proto-groups__members">
+                <li v-for="m in expandedGroupDetail.members" :key="m.id" class="proto-groups__member">
+                  <UIcon name="i-lucide-user" class="text-xs" />
+                  <span>{{ m.display_name }}</span>
+                  <button v-if="auth.isAuthenticated" class="proto-groups__member-remove" @click="removeMember(g.id, m.id)">
+                    <UIcon name="i-lucide-x" class="text-xs" />
+                  </button>
+                </li>
+                <li v-if="expandedGroupDetail.members.length === 0" class="proto-groups__member proto-groups__member--empty">
+                  Aucun membre
+                </li>
+              </ul>
+              <div v-if="auth.isAuthenticated" class="proto-groups__add-member">
+                <input
+                  v-model="newMemberName"
+                  type="text"
+                  lang="fr"
+                  spellcheck="true"
+                  class="proto-groups__member-input"
+                  placeholder="Nom ou adresse Duniter"
+                  @keydown.enter="addMember(g.id)"
+                />
+                <button class="proto-groups__member-btn" :disabled="addingMember || !newMemberName.trim()" @click="addMember(g.id)">
+                  <UIcon v-if="addingMember" name="i-lucide-loader-2" class="animate-spin text-xs" />
+                  <UIcon v-else name="i-lucide-user-plus" class="text-xs" />
+                  Ajouter
+                </button>
+              </div>
+            </div>
+          </Transition>
+        </div>
+      </div>
+    </div>
+
     <!-- Operational protocols (always visible, frontend-only data) -->
     <div class="proto-ops">
       <h3 class="proto-ops__title">
@@ -506,6 +647,51 @@ const n8nWorkflows = [
       </div>
     </template>
   </UModal>
+
+  <!-- Create group modal -->
+  <UModal v-model:open="showGroupModal">
+    <template #content>
+      <div class="proto-modal">
+        <h3 class="proto-modal__title">Nouveau groupe d'identités</h3>
+        <div class="proto-modal__fields">
+          <div class="proto-modal__field">
+            <label class="proto-modal__label">Nom du groupe</label>
+            <input
+              v-model="newGroupName"
+              type="text"
+              lang="fr"
+              spellcheck="true"
+              class="proto-modal__input"
+              placeholder="Ex: Comité technique, Forgerons actifs…"
+            />
+          </div>
+          <div class="proto-modal__field">
+            <label class="proto-modal__label">Description <span class="proto-modal__optional">(optionnel)</span></label>
+            <textarea
+              v-model="newGroupDesc"
+              class="proto-modal__textarea"
+              lang="fr"
+              spellcheck="true"
+              placeholder="Rôle ou périmètre de ce groupe…"
+              rows="2"
+            />
+          </div>
+        </div>
+        <div class="proto-modal__actions">
+          <button class="proto-modal__cancel" @click="showGroupModal = false">Annuler</button>
+          <button
+            class="proto-modal__submit"
+            :disabled="!newGroupName.trim() || creatingGroup"
+            @click="createGroup"
+          >
+            <UIcon v-if="creatingGroup" name="i-lucide-loader-2" class="animate-spin" />
+            <UIcon v-else name="i-lucide-users-round" />
+            Créer le groupe
+          </button>
+        </div>
+      </div>
+    </template>
+  </UModal>
 </template>
 
 <style scoped>
@@ -1185,4 +1371,175 @@ const n8nWorkflows = [
   box-shadow: 0 4px 12px var(--mood-shadow);
 }
 .proto-modal__submit:disabled { opacity: 0.4; cursor: not-allowed; }
+.proto-modal__optional { font-size: 0.8125rem; opacity: 0.55; font-weight: 400; }
+
+/* --- Groups --- */
+.proto-groups {
+  margin-top: 2rem;
+}
+.proto-groups__title {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.9375rem;
+  font-weight: 700;
+  color: var(--mood-text);
+  margin-bottom: 1rem;
+}
+.proto-groups__count {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 1.375rem;
+  height: 1.375rem;
+  padding: 0 0.375rem;
+  font-size: 0.75rem;
+  font-weight: 700;
+  background: var(--mood-accent-soft);
+  color: var(--mood-accent);
+  border-radius: 20px;
+}
+.proto-groups__add-btn {
+  margin-left: auto;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  font-size: 0.8125rem;
+  font-weight: 600;
+  color: var(--mood-accent);
+  background: var(--mood-accent-soft);
+  border-radius: 16px;
+  padding: 0.25rem 0.75rem;
+  cursor: pointer;
+  transition: transform 0.1s ease;
+}
+.proto-groups__add-btn:hover { transform: translateY(-1px); }
+.proto-groups__empty {
+  display: flex;
+  align-items: center;
+  gap: 0.625rem;
+  padding: 1rem 1.25rem;
+  color: var(--mood-muted);
+  background: var(--mood-surface);
+  border-radius: 14px;
+  font-size: 0.875rem;
+}
+.proto-groups__list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+.proto-groups__item {
+  background: var(--mood-surface);
+  border-radius: 14px;
+  overflow: hidden;
+}
+.proto-groups__item-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.75rem 1rem;
+  cursor: pointer;
+  transition: background 0.12s ease;
+}
+.proto-groups__item-head:hover { background: var(--mood-hover); }
+.proto-groups__item-info {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  color: var(--mood-text);
+}
+.proto-groups__item-name { font-weight: 600; font-size: 0.9375rem; }
+.proto-groups__item-count {
+  font-size: 0.75rem;
+  color: var(--mood-muted);
+  background: var(--mood-accent-soft);
+  border-radius: 12px;
+  padding: 0.125rem 0.5rem;
+}
+.proto-groups__item-actions {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  color: var(--mood-muted);
+}
+.proto-groups__delete-btn {
+  color: var(--mood-danger, #e53e3e);
+  opacity: 0.5;
+  cursor: pointer;
+  transition: opacity 0.1s;
+}
+.proto-groups__delete-btn:hover { opacity: 1; }
+.proto-groups__detail {
+  padding: 0.75rem 1rem 1rem;
+  border-top: 1px solid var(--mood-border, rgba(0,0,0,0.06));
+}
+.proto-groups__detail-desc {
+  font-size: 0.875rem;
+  color: var(--mood-muted);
+  margin-bottom: 0.75rem;
+}
+.proto-groups__members-loading {
+  display: flex;
+  justify-content: center;
+  padding: 0.5rem;
+  color: var(--mood-muted);
+}
+.proto-groups__members {
+  list-style: none;
+  margin: 0 0 0.75rem;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+.proto-groups__member {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.875rem;
+  color: var(--mood-text);
+  padding: 0.375rem 0.5rem;
+  background: var(--mood-bg);
+  border-radius: 8px;
+}
+.proto-groups__member--empty { color: var(--mood-muted); font-style: italic; }
+.proto-groups__member-remove {
+  margin-left: auto;
+  color: var(--mood-danger, #e53e3e);
+  opacity: 0.4;
+  cursor: pointer;
+  transition: opacity 0.1s;
+}
+.proto-groups__member-remove:hover { opacity: 1; }
+.proto-groups__add-member {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+}
+.proto-groups__member-input {
+  flex: 1;
+  padding: 0.4375rem 0.75rem;
+  font-size: 0.875rem;
+  color: var(--mood-text);
+  background: var(--mood-bg);
+  border-radius: 10px;
+  outline: none;
+}
+.proto-groups__member-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.4375rem 0.875rem;
+  font-size: 0.8125rem;
+  font-weight: 600;
+  color: var(--mood-accent-text);
+  background: var(--mood-accent);
+  border-radius: 14px;
+  cursor: pointer;
+  transition: transform 0.1s ease;
+  white-space: nowrap;
+}
+.proto-groups__member-btn:hover:not(:disabled) { transform: translateY(-1px); }
+.proto-groups__member-btn:disabled { opacity: 0.4; cursor: not-allowed; }
 </style>