feat(team): édition inline du rôle + retrait + sélection de membre existant

Backend
  - ProjectMembersController::update : nouveau PATCH /api/projects/:slug/members/:member_slug
    pour changer le rôle (admin/contributor/observer). 404 si pivot absent,
    no-op idempotent si déjà même rôle, 422 si rôle invalide. Route câblée
    dans public/index.php.

Frontend
  - JoinProjectModal : 2 onglets (Membre existant / Nouveau membre)
      * "existant" : <select> de l'annuaire filtré sur excludeSlugs (membres
        déjà sur le projet), preview avatar+bio du membre sélectionné
      * "nouveau" : flow d'origine (créer le membre puis l'attacher)
      * sélecteur de rôle visible dans les 2 modes
      * onJoined remonte un Member complet (au lieu de {id,slug,name})
        -> ProjectDetailPage peut pousser un ProjectMemberEntry avec ses
           vraies initials/avatar/kind dans la liste optimiste

  - ProjectDetailPage panneau Équipe (mode admin uniquement) :
      * Rôle inline éditable via <select> stylé minimal -> PATCH optimiste
        avec rollback en cas d'échec
      * Bouton retirer-membre par ligne (DELETE) avec confirm
      * Le badge "Vous" / "Admin connecté" ne change pas

Code-review (high effort, --fix appliqué) :
  - loadDirectory affiche maintenant une vraie erreur réseau au lieu de
    silencieusement présenter "tous les membres déjà sur ce projet"
  - loadDirectory est lazy : on ne fetche l'annuaire que si l'onglet
    "existant" est actif (économise 1 requête si admin saute direct à "nouveau")
  - Aperçu du membre sélectionné : computed `selectedMember` au lieu de
    <template v-for><template v-if>
  - Bouton retirer-membre : opacity-60 sur mobile (sm: et plus garde le
    behavior hover-to-reveal) -> reste atteignable sur touch
  - + label `aria-label` pour l'accessibilité

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

frontend/src/components/JoinProjectModal.vue

@@ -1,75 +1,165 @@
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref, computed, onMounted } from 'vue'
 import { RouterLink } from 'vue-router'
 import { api, ApiError } from '@/api/client'
 import { useAuth } from '@/composables/useAuth'
-import type { Member } from '@/types/api'
+import type { Member, MemberRole, Paginated } from '@/types/api'
+import Avatar from './Avatar.vue'
 
 /**
- * Modal "Rejoindre le projet".
+ * Modal "Rejoindre le projet" — 2 modes :
+ *   - Membre existant : on choisit dans l'annuaire (exclut ceux déjà sur l'équipe)
+ *     + rôle. POST direct sur project_members.
+ *   - Nouveau membre  : on saisit nom + email, on crée le membre dans l'annuaire
+ *     puis on l'attache au projet. POST members + POST project_members.
  *
- * Stratégie V1 (sans auth user) :
- *  - Si admin connecté : POST /api/members (créé un membre "person") puis
- *    POST /api/projects/:slug/members pour l'attacher.
- *  - Sinon : affiche un avertissement + lien vers /admin/login. On ne fait
- *    pas de fake-auth ni de bypass du token.
- *
- * V2 prévue : auth OIDC Nextcloud -> l'utilisateur se rejoint lui-même
- * via un endpoint public dédié.
+ * V1 = token admin requis pour les 2 modes (cf. spec API).
  */
 
-const props = defineProps<{ projectSlug: string }>()
+const props = defineProps<{
+  projectSlug: string
+  /** Slugs des membres déjà sur l'équipe — pour les masquer de la liste "existant". */
+  excludeSlugs: string[]
+}>()
 const emit = defineEmits<{
   (e: 'close'): void
-  (e: 'joined', payload: { member: Member; role: string }): void
+  (e: 'joined', payload: { member: Member; role: MemberRole }): void
 }>()
 
 const { isAuthenticated } = useAuth()
+
+type Mode = 'existing' | 'new'
+const mode = ref<Mode>('existing')
+const role = ref<MemberRole>('contributor')
+
+// --- Mode "existing" ---
+const directory = ref<Member[]>([])
+const directoryLoading = ref(false)
+const directoryError = ref<string | null>(null)
+const directoryLoaded = ref(false)
+const selectedSlug = ref('')
+
+async function loadDirectory() {
+  if (directoryLoaded.value || directoryLoading.value) return
+  directoryLoading.value = true
+  directoryError.value = null
+  try {
+    const r = await api.get<Paginated<Member>>('/api/members', { query: { per_page: 100 } })
+    directory.value = r.data
+    directoryLoaded.value = true
+  } catch (e) {
+    // Surfacer l'erreur : sans ça, l'utilisateur voit "tous les membres déjà
+    // sur ce projet" alors que c'est en réalité l'API qui a échoué.
+    directoryError.value = e instanceof ApiError
+      ? (e.payload.message ?? e.code)
+      : "Impossible de charger l'annuaire."
+  } finally {
+    directoryLoading.value = false
+  }
+}
+
+// Lazy : on charge l'annuaire la première fois qu'on passe en mode "existing"
+// (qui est aussi le mode par défaut). Évite un GET /api/members?per_page=100
+// gratuit si l'admin clique direct sur "Nouveau membre".
+function switchMode(next: Mode) {
+  mode.value = next
+  resetErrors()
+  if (next === 'existing') loadDirectory()
+}
+onMounted(() => {
+  if (isAuthenticated.value && mode.value === 'existing') loadDirectory()
+})
+
+const availableMembers = computed(() =>
+  directory.value
+    .filter(m => !props.excludeSlugs.includes(m.slug))
+    .sort((a, b) => a.display_name.localeCompare(b.display_name, 'fr')),
+)
+
+const selectedMember = computed(() =>
+  availableMembers.value.find(m => m.slug === selectedSlug.value) ?? null,
+)
+
+// --- Mode "new" ---
 const name = ref('')
 const email = ref('')
+
 const submitting = ref(false)
 const error = ref<string | null>(null)
 const fieldErrors = ref<Record<string, string>>({})
 
-async function submit() {
+function resetErrors() {
   error.value = null
   fieldErrors.value = {}
-  if (!isAuthenticated.value) return
-  if (!name.value.trim()) {
-    fieldErrors.value.name = 'required'
+}
+
+async function submitExisting() {
+  resetErrors()
+  if (!selectedSlug.value) {
+    fieldErrors.value.member_slug = 'required'
+    return
+  }
+  submitting.value = true
+  try {
+    await api.post(`/api/projects/${encodeURIComponent(props.projectSlug)}/members`, {
+      member_slug: selectedSlug.value,
+      role: role.value,
+    })
+    const member = directory.value.find(m => m.slug === selectedSlug.value)
+    if (member) emit('joined', { member, role: role.value })
+    emit('close')
+  } catch (e) {
+    handleError(e)
+  } finally {
+    submitting.value = false
+  }
+}
+
+async function submitNew() {
+  resetErrors()
+  if (!name.value.trim()) {
+    fieldErrors.value.display_name = 'required'
     return
   }
-
   submitting.value = true
   try {
-    // 1) Crée le membre (idempotent côté slug : si collision, suffixe -2 etc.).
     const member = await api.post<Member>('/api/members', {
       display_name: name.value.trim(),
       kind: 'person',
       contact_email: email.value.trim() || undefined,
     })
-    // 2) L'attache au projet en rôle contributor.
-    await api.post<{ project_id: number; role: string }>(
-      `/api/projects/${encodeURIComponent(props.projectSlug)}/members`,
-      { member_slug: member.slug, role: 'contributor' },
-    )
-    emit('joined', { member, role: 'contributor' })
+    await api.post(`/api/projects/${encodeURIComponent(props.projectSlug)}/members`, {
+      member_slug: member.slug,
+      role: role.value,
+    })
+    emit('joined', { member, role: role.value })
     emit('close')
   } catch (e) {
+    handleError(e)
+  } finally {
+    submitting.value = false
+  }
+}
+
+function handleError(e: unknown) {
   if (e instanceof ApiError) {
     if (e.status === 422) {
       fieldErrors.value = e.fields
     } else if (e.status === 409) {
       error.value = e.payload.message ?? 'Ce membre fait déjà partie du projet.'
+    } else if (e.status === 401) {
+      error.value = 'Session admin expirée. Reconnecte-toi.'
     } else {
       error.value = e.payload.message ?? e.code
     }
   } else {
     error.value = 'Erreur réseau'
   }
-  } finally {
-    submitting.value = false
-  }
+}
+
+function submit() {
+  if (mode.value === 'existing') submitExisting()
+  else submitNew()
 }
 </script>
 
@@ -81,8 +171,8 @@ async function submit() {
     <div class="bg-donut-surface rounded-2xl shadow-xl w-full max-w-md p-6">
       <div class="flex items-start justify-between gap-4 mb-4">
         <div>
-          <h2 class="text-xl font-semibold text-donut-text">Rejoindre le projet</h2>
-          <p class="text-sm text-donut-muted mt-1">Indique ton nom — tu seras ajouté en tant que contributeur.</p>
+          <h2 class="text-xl font-semibold text-donut-text">Ajouter à l'équipe</h2>
+          <p class="text-sm text-donut-muted mt-1">Choisis un membre existant ou crées-en un nouveau.</p>
         </div>
         <button
           type="button"
@@ -96,17 +186,81 @@ async function submit() {
         </button>
       </div>
 
-      <!-- Pas de token : avertissement + lien login. -->
+      <!-- Pas de token : avertissement -->
       <div v-if="!isAuthenticated" class="rounded-lg border border-amber-200 bg-amber-50 text-amber-800 px-4 py-3 text-sm">
         L'ajout de membres est réservé à l'admin en V1.
         <RouterLink :to="{ name: 'admin-login' }" class="underline font-medium ml-1">
           Se connecter
         </RouterLink>
-        — la V2 ouvrira l'auto-rejoint via Nextcloud.
       </div>
 
-      <!-- Form admin -->
-      <form v-else @submit.prevent="submit" class="space-y-3">
+      <template v-else>
+        <!-- Tabs mode -->
+        <div class="flex items-center bg-gray-100 rounded-lg p-1 mb-4 text-sm">
+          <button
+            type="button"
+            :class="[
+              'flex-1 px-3 py-1.5 rounded-md transition-colors',
+              mode === 'existing'
+                ? 'bg-white shadow-sm font-medium text-donut-text'
+                : 'text-donut-muted hover:text-donut-text',
+            ]"
+            @click="switchMode('existing')"
+          >Membre existant</button>
+          <button
+            type="button"
+            :class="[
+              'flex-1 px-3 py-1.5 rounded-md transition-colors',
+              mode === 'new'
+                ? 'bg-white shadow-sm font-medium text-donut-text'
+                : 'text-donut-muted hover:text-donut-text',
+            ]"
+            @click="switchMode('new')"
+          >Nouveau membre</button>
+        </div>
+
+        <form @submit.prevent="submit" class="space-y-3">
+          <!-- Mode existant : sélection dans annuaire -->
+          <template v-if="mode === 'existing'">
+            <div>
+              <label class="block text-sm font-medium text-donut-text mb-1">Membre</label>
+              <div v-if="directoryLoading" class="text-sm text-donut-muted">Chargement de l'annuaire…</div>
+              <div
+                v-else-if="directoryError"
+                class="rounded-lg border border-red-200 bg-red-50 text-red-700 px-3 py-2 text-sm flex items-center justify-between gap-2"
+              >
+                <span>{{ directoryError }}</span>
+                <button type="button" class="underline font-medium" @click="directoryLoaded = false; loadDirectory()">Réessayer</button>
+              </div>
+              <div v-else-if="availableMembers.length === 0" class="text-sm text-donut-muted">
+                Tous les membres de l'annuaire sont déjà sur ce projet.
+              </div>
+              <select
+                v-else
+                v-model="selectedSlug"
+                class="w-full bg-white border border-donut-border rounded-lg px-3 py-2 text-sm outline-none focus:border-donut-text"
+                :class="fieldErrors.member_slug ? 'border-red-400' : ''"
+              >
+                <option value="" disabled>Choisir un membre…</option>
+                <option v-for="m in availableMembers" :key="m.id" :value="m.slug">
+                  {{ m.display_name }} <template v-if="m.kind !== 'person'">— {{ m.kind === 'org' ? 'org' : 'collectif' }}</template>
+                </option>
+              </select>
+              <!-- Aperçu visuel du membre sélectionné -->
+              <div v-if="selectedMember" class="mt-2 flex items-center gap-2 text-sm text-donut-muted">
+                <Avatar
+                  :name="selectedMember.display_name"
+                  :initials="selectedMember.initials"
+                  :avatar-url="selectedMember.avatar_url"
+                  :size="28"
+                />
+                <span class="truncate">{{ selectedMember.bio ?? 'Aucune bio renseignée.' }}</span>
+              </div>
+            </div>
+          </template>
+
+          <!-- Mode nouveau : création -->
+          <template v-else>
             <div>
               <label class="block text-sm font-medium text-donut-text mb-1">Nom *</label>
               <input
@@ -114,11 +268,9 @@ async function submit() {
                 type="text"
                 placeholder="ex: Camille D."
                 class="w-full bg-white border border-donut-border rounded-lg px-3 py-2 text-sm outline-none focus:border-donut-text"
-            :class="fieldErrors.display_name || fieldErrors.name ? 'border-red-400' : ''"
+                :class="fieldErrors.display_name ? 'border-red-400' : ''"
               />
-          <p v-if="fieldErrors.display_name || fieldErrors.name" class="text-xs text-red-600 mt-1">
-            Le nom est requis.
-          </p>
+              <p v-if="fieldErrors.display_name" class="text-xs text-red-600 mt-1">Le nom est requis.</p>
             </div>
             <div>
               <label class="block text-sm font-medium text-donut-text mb-1">Email (optionnel)</label>
@@ -131,6 +283,20 @@ async function submit() {
               />
               <p v-if="fieldErrors.contact_email" class="text-xs text-red-600 mt-1">Email invalide.</p>
             </div>
+          </template>
+
+          <!-- Rôle (toujours visible) -->
+          <div>
+            <label class="block text-sm font-medium text-donut-text mb-1">Rôle dans le projet</label>
+            <select
+              v-model="role"
+              class="w-full bg-white border border-donut-border rounded-lg px-3 py-2 text-sm outline-none focus:border-donut-text"
+            >
+              <option value="admin">Admin — peut tout modifier</option>
+              <option value="contributor">Contributor — participe activement</option>
+              <option value="observer">Observer — accès lecture / suivi</option>
+            </select>
+          </div>
 
           <div v-if="error" class="rounded-lg border border-red-200 bg-red-50 text-red-700 px-3 py-2 text-sm">
             {{ error }}
@@ -141,18 +307,15 @@ async function submit() {
               type="button"
               class="text-sm px-3 py-2 rounded-lg hover:bg-gray-50 text-donut-text"
               @click="emit('close')"
-          >
-            Annuler
-          </button>
+            >Annuler</button>
             <button
               type="submit"
-            :disabled="submitting"
+              :disabled="submitting || (mode === 'existing' && availableMembers.length === 0)"
               class="text-sm px-4 py-2 rounded-lg bg-donut-text text-white hover:bg-black disabled:opacity-50"
-          >
-            {{ submitting ? 'Ajout…' : 'Rejoindre' }}
-          </button>
+            >{{ submitting ? 'Ajout…' : 'Ajouter à l’équipe' }}</button>
           </div>
         </form>
+      </template>
     </div>
   </div>
 </template>

frontend/src/pages/ProjectDetailPage.vue

@@ -3,7 +3,7 @@ import { ref, computed, onMounted, watch } from 'vue'
 import { RouterLink, useRouter } from 'vue-router'
 import { api, ApiError } from '@/api/client'
 import { useAuth } from '@/composables/useAuth'
-import type { Discussion, ProjectDetail, Resource, RoadmapStep, Wrapped } from '@/types/api'
+import type { Discussion, Member, MemberRole, ProjectDetail, ProjectMemberEntry, Resource, RoadmapStep, Wrapped } from '@/types/api'
 
 import StatusBadge from '@/components/StatusBadge.vue'
 import CategoryBadge from '@/components/CategoryBadge.vue'
@@ -181,22 +181,53 @@ async function deleteProject() {
   }
 }
 
-function onJoined(payload: { member: { id: number; slug: string; display_name: string }; role: string }) {
-  // Optimiste : push dans la liste des membres locale.
+function onJoined(payload: { member: Member; role: MemberRole }) {
+  // Optimiste : push dans la liste des membres locale avec les vraies infos.
   if (!project.value) return
   project.value.members.push({
     id:           payload.member.id,
     slug:         payload.member.slug,
     display_name: payload.member.display_name,
-    initials: null,
-    kind: 'person',
-    avatar_url: null,
-    role: payload.role as 'contributor',
+    initials:     payload.member.initials,
+    kind:         payload.member.kind,
+    avatar_url:   payload.member.avatar_url,
+    role:         payload.role,
     joined_at:    new Date().toISOString(),
   })
   project.value.counts.members = project.value.members.length
 }
 
+async function changeMemberRole(m: ProjectMemberEntry, newRole: MemberRole) {
+  if (!isAuthenticated.value || !project.value || newRole === m.role) return
+  const oldRole = m.role
+  m.role = newRole  // optimiste
+  try {
+    await api.patch(
+      `/api/projects/${encodeURIComponent(props.slug)}/members/${encodeURIComponent(m.slug)}`,
+      { role: newRole },
+    )
+  } catch (e) {
+    m.role = oldRole
+    if (e instanceof ApiError) alert(`Erreur : ${e.payload.message ?? e.code}`)
+    else alert('Erreur réseau')
+  }
+}
+
+async function removeMember(m: ProjectMemberEntry) {
+  if (!isAuthenticated.value || !project.value) return
+  if (!confirm(`Retirer « ${m.display_name} » de l'équipe ?\nLe membre reste dans l'annuaire.`)) return
+  try {
+    await api.delete(
+      `/api/projects/${encodeURIComponent(props.slug)}/members/${encodeURIComponent(m.slug)}`,
+    )
+    project.value.members = project.value.members.filter(x => x.id !== m.id)
+    project.value.counts.members = project.value.members.length
+  } catch (e) {
+    if (e instanceof ApiError) alert(`Erreur : ${e.payload.message ?? e.code}`)
+    else alert('Erreur réseau')
+  }
+}
+
 // Présentations dérivées
 const categoryColor = computed(() => project.value?.category?.color_hex ?? '#111827')
 const externalDomain = computed(() => {
@@ -603,13 +634,39 @@ const ROLE_LABEL = { admin: 'Admin', contributor: 'Contributor', observer: 'Obse
             <li
               v-for="m in project.members"
               :key="m.id"
-              class="flex items-center gap-3"
+              class="flex items-center gap-3 group"
             >
               <Avatar :name="m.display_name" :initials="m.initials" :avatar-url="m.avatar_url" :size="34" />
               <div class="flex-1 min-w-0">
                 <div class="text-sm font-medium text-donut-text truncate">{{ m.display_name }}</div>
-                <div class="text-xs text-donut-muted">{{ ROLE_LABEL[m.role] }}</div>
+                <!-- Lecture seule pour les visiteurs / édition inline pour les admins -->
+                <div v-if="!isAuthenticated" class="text-xs text-donut-muted">{{ ROLE_LABEL[m.role] }}</div>
+                <select
+                  v-else
+                  :value="m.role"
+                  class="text-xs text-donut-muted bg-transparent border-0 -ml-1 pl-1 pr-4 py-0.5 rounded hover:bg-gray-100 focus:bg-gray-100 focus:text-donut-text outline-none"
+                  @change="changeMemberRole(m, ($event.target as HTMLSelectElement).value as MemberRole)"
+                >
+                  <option value="admin">Admin</option>
+                  <option value="contributor">Contributor</option>
+                  <option value="observer">Observer</option>
+                </select>
               </div>
+              <!-- Sur desktop (group:hover supporté) : icône cachée par défaut, apparaît au survol.
+                   Sur touch : le bouton reste visible (opacity-60) pour rester atteignable.
+                   sm:opacity-0 ne s'applique qu'au-delà du breakpoint sm où le hover est fiable. -->
+              <button
+                v-if="isAuthenticated"
+                type="button"
+                class="opacity-60 sm:opacity-0 sm:group-hover:opacity-100 focus:opacity-100 transition-opacity text-donut-muted hover:text-red-500"
+                title="Retirer du projet"
+                aria-label="Retirer ce membre du projet"
+                @click="removeMember(m)"
+              >
+                <svg viewBox="0 0 24 24" class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
+                  <path d="M18 6 6 18M6 6l12 12"/>
+                </svg>
+              </button>
             </li>
           </ul>
         </div>
@@ -620,6 +677,7 @@ const ROLE_LABEL = { admin: 'Admin', contributor: 'Contributor', observer: 'Obse
     <JoinProjectModal
       v-if="showJoinModal && project"
       :project-slug="project.slug"
+      :exclude-slugs="project.members.map(m => m.slug)"
       @close="showJoinModal = false"
       @joined="onJoined"
     />

public/index.php

@@ -74,6 +74,7 @@ $router->patch ('/api/projects/:slug',                        [ProjectsControlle
 $router->delete('/api/projects/:slug',                        [ProjectsController::class,       'destroy']);
 
 $router->post  ('/api/projects/:slug/members',                [ProjectMembersController::class, 'store']);
+$router->patch ('/api/projects/:slug/members/:member_slug',   [ProjectMembersController::class, 'update']);
 $router->delete('/api/projects/:slug/members/:member_slug',   [ProjectMembersController::class, 'destroy']);
 
 $router->post  ('/api/projects/:slug/roadmap',                [RoadmapController::class,        'store']);

src/Controllers/ProjectMembersController.php

@@ -98,6 +98,51 @@ final class ProjectMembersController
         ], 201);
     }
 
+    public function update(Request $req, array $params): void
+    {
+        $p = ProjectsController::findOr404($params['slug']);
+        $member = Database::fetchOne(
+            'SELECT id, slug, display_name FROM members WHERE slug = :s',
+            [':s' => $params['member_slug']],
+        );
+        if ($member === null) {
+            throw new \ApiException(404, ['error' => 'not_found']);
+        }
+
+        $body = $req->json();
+        $v = new Validator($body);
+        $v->required('role')->in('role', ['admin', 'contributor', 'observer']);
+        $v->check();
+
+        $updated = Database::update(
+            'project_members',
+            ['role' => (string) $body['role']],
+            'project_id = :pid AND member_id = :mid',
+            [':pid' => (int) $p['id'], ':mid' => (int) $member['id']],
+        );
+        if ($updated === 0) {
+            // Soit la ligne pivot n'existe pas, soit le rôle est déjà le même.
+            // Vérifie pour distinguer 404 vs no-op.
+            $exists = Database::fetchValue(
+                'SELECT 1 FROM project_members WHERE project_id = :pid AND member_id = :mid',
+                [':pid' => (int) $p['id'], ':mid' => (int) $member['id']],
+            );
+            if ($exists === null) {
+                throw new \ApiException(404, ['error' => 'not_found']);
+            }
+        }
+
+        Response::json([
+            'project_id' => (int) $p['id'],
+            'member'     => [
+                'id'           => (int) $member['id'],
+                'slug'         => $member['slug'],
+                'display_name' => $member['display_name'],
+            ],
+            'role' => (string) $body['role'],
+        ]);
+    }
+
     public function destroy(Request $req, array $params): void
     {
         $p = ProjectsController::findOr404($params['slug']);