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,76 +1,166 @@
 <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) {
-    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 {
-        error.value = e.payload.message ?? e.code
-      }
-    } else {
-      error.value = 'Erreur réseau'
-    }
+    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'
+  }
+}
+
+function submit() {
+  if (mode.value === 'existing') submitExisting()
+  else submitNew()
+}
 </script>
 
 <template>
@@ -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,63 +186,136 @@ 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">
-        <div>
-          <label class="block text-sm font-medium text-donut-text mb-1">Nom *</label>
-          <input
-            v-model="name"
-            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' : ''"
-          />
-          <p v-if="fieldErrors.display_name || fieldErrors.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>
-          <input
-            v-model="email"
-            type="email"
-            placeholder="camille@example.org"
-            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.contact_email ? 'border-red-400' : ''"
-          />
-          <p v-if="fieldErrors.contact_email" class="text-xs text-red-600 mt-1">Email invalide.</p>
-        </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 }}
-        </div>
-
-        <div class="flex items-center justify-end gap-2 pt-2">
+      <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="text-sm px-3 py-2 rounded-lg hover:bg-gray-50 text-donut-text"
-            @click="emit('close')"
-          >
-            Annuler
-          </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="submit"
-            :disabled="submitting"
-            class="text-sm px-4 py-2 rounded-lg bg-donut-text text-white hover:bg-black disabled:opacity-50"
-          >
-            {{ submitting ? 'Ajout…' : 'Rejoindre' }}
-          </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>
+
+        <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
+                v-model="name"
+                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 ? 'border-red-400' : ''"
+              />
+              <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>
+              <input
+                v-model="email"
+                type="email"
+                placeholder="camille@example.org"
+                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.contact_email ? 'border-red-400' : ''"
+              />
+              <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 }}
+          </div>
+
+          <div class="flex items-center justify-end gap-2 pt-2">
+            <button
+              type="button"
+              class="text-sm px-3 py-2 rounded-lg hover:bg-gray-50 text-donut-text"
+              @click="emit('close')"
+            >Annuler</button>
+            <button
+              type="submit"
+              :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…' : 'Ajouter à l’équipe' }}</button>
+          </div>
+        </form>
+      </template>
     </div>
   </div>
 </template>