From 3ee1c9bc10b6a9bd807a987044171b64a3f86069 Mon Sep 17 00:00:00 2001
From: Zhi <zhi@dev.hangman-lab.top>
Date: Thu, 12 Mar 2026 12:13:28 +0000
Subject: [PATCH] feat: add remove member button

---
 src/pages/ProjectDetailPage.tsx | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/pages/ProjectDetailPage.tsx b/src/pages/ProjectDetailPage.tsx
index 12aae2f..dcfef8d 100644
--- a/src/pages/ProjectDetailPage.tsx
+++ b/src/pages/ProjectDetailPage.tsx
@@ -58,6 +58,12 @@ export default function ProjectDetailPage() {
     api.get<ProjectMember[]>(`/projects/${id}/members`).then(({ data }) => setMembers(data))
   }
 
+  const removeMember = async (userId: number) => {
+    if (!confirm('Remove this member?')) return
+    await api.delete(`/projects/${id}/members/${userId}`)
+    api.get<ProjectMember[]>(`/projects/${id}/members`).then(({ data }) => setMembers(data))
+  }
+
   const addMilestone = async () => {
     if (!newMilestoneTitle.trim()) return
     await api.post(`/projects/${id}/milestones`, { title: newMilestoneTitle, status: 'open' })
@@ -120,7 +126,10 @@ export default function ProjectDetailPage() {
         {members.length > 0 ? (
           <div className="member-list">
             {members.map((m) => (
-              <span key={m.id} className="badge">{`User #${m.user_id} (${m.role})`}</span>
+              <span key={m.id} className="badge" style={{marginRight: 8}}>
+                {`User #${m.user_id} (${m.role})`}
+                <button onClick={(e) => { e.stopPropagation(); removeMember(m.user_id) }} style={{marginLeft: 8, background: 'none', border: 'none', color: 'red', cursor: 'pointer'}}>×</button>
+              </span>
             ))}
           </div>
         ) : (