From 8321e21f52112d40095809cd4e820b12c9b33ef4 Mon Sep 17 00:00:00 2001
From: Chris Alfano <chris@jarv.us>
Date: Fri, 26 Jun 2026 13:21:49 -0400
Subject: [PATCH] feat(web): add Join/Leave project buttons (#113)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

ProjectDetail declared "Join Project" / "Leave project" actions in the spec
(project-detail.md) and the API endpoints existed, but the SPA never rendered
the buttons. Add them to the sidebar:

- Join Project — signed-in users who aren't members (POST .../members/join)
- Leave project — members, except a sole maintainer who must transfer the
  role first (POST .../members/leave); shows an explanatory hint instead.

Membership is computed client-side from the members list + the signed-in user
(the project response carries no per-viewer flag). Added api client join/leave
methods and ProjectDetail tests for both states.

First slice of the #113 UI-gaps umbrella. The soft-delete banner (the other
half of the ProjectDetail pairing) is deferred — it needs the project response
to expose `deletedAt`, a small API/serializer change tracked under #113.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 apps/web/src/lib/api.ts                |  4 ++
 apps/web/src/screens/ProjectDetail.tsx | 63 ++++++++++++++++++++++++
 apps/web/tests/ProjectDetail.test.tsx  | 66 ++++++++++++++++++++++++++
 3 files changed, 133 insertions(+)

diff --git a/apps/web/src/lib/api.ts b/apps/web/src/lib/api.ts
index 3a7bcb9..aad8868 100644
--- a/apps/web/src/lib/api.ts
+++ b/apps/web/src/lib/api.ts
@@ -591,6 +591,10 @@ export const api = {
       request(`/api/projects/${encodeURIComponent(slug)}`, { method: 'DELETE' }),
     restore: (slug: string): Promise<SuccessEnvelope<ProjectDetail>> =>
       request(`/api/projects/${encodeURIComponent(slug)}/restore`, { method: 'POST' }),
+    join: (slug: string): Promise<void> =>
+      request(`/api/projects/${encodeURIComponent(slug)}/members/join`, { method: 'POST' }),
+    leave: (slug: string): Promise<void> =>
+      request(`/api/projects/${encodeURIComponent(slug)}/members/leave`, { method: 'POST' }),
     changeMaintainer: (slug: string, personSlug: string): Promise<SuccessEnvelope<ProjectDetail>> =>
       request(`/api/projects/${encodeURIComponent(slug)}/change-maintainer`, {
         method: 'POST',
diff --git a/apps/web/src/screens/ProjectDetail.tsx b/apps/web/src/screens/ProjectDetail.tsx
index 7a27e7f..2441aa6 100644
--- a/apps/web/src/screens/ProjectDetail.tsx
+++ b/apps/web/src/screens/ProjectDetail.tsx
@@ -51,6 +51,8 @@ export function ProjectDetail({ anchor }: ProjectDetailProps = {}) {
   const [interestRole, setInterestRole] = useState<HelpWantedRoleResponse | null>(null);
   const [fillRole, setFillRole] = useState<HelpWantedRoleResponse | null>(null);
   const [stageInfoOpen, setStageInfoOpen] = useState(false);
+  const [memberBusy, setMemberBusy] = useState(false);
+  const [memberError, setMemberError] = useState<string | null>(null);
 
   // Allow ?openModal=help-wanted (from /help-wanted "Post a role" picker).
   // Use the state-sync pattern so we don't trigger a cascading re-render.
@@ -122,6 +124,32 @@ export function ProjectDetail({ anchor }: ProjectDetailProps = {}) {
   const helpWantedRoles = helpWantedQ.data?.data ?? [];
   const perms = project.permissions;
 
+  // #113 — Join / Leave the project. The endpoints exist; the UI was missing.
+  // The project response carries no per-viewer membership flag, so membership is
+  // derived from the members list + the signed-in user.
+  const myMembership = person
+    ? project.memberships.find((m) => m.person.slug === person.slug)
+    : undefined;
+  const isMember = myMembership !== undefined;
+  const maintainerCount = project.memberships.filter((m) => m.isMaintainer).length;
+  // A sole maintainer must transfer the role before leaving (project-detail.md authz).
+  const isSoleMaintainer = (myMembership?.isMaintainer ?? false) && maintainerCount === 1;
+  const canJoin = isSignedIn && !isMember;
+  const canLeave = isMember && !isSoleMaintainer;
+
+  const runMembership = async (fn: () => Promise<void>): Promise<void> => {
+    setMemberBusy(true);
+    setMemberError(null);
+    try {
+      await fn();
+      await projectQ.refetch();
+    } catch (err) {
+      setMemberError(err instanceof ApiError ? err.message : 'Something went wrong. Please try again.');
+    } finally {
+      setMemberBusy(false);
+    }
+  };
+
   const allTags = [...project.tags.tech, ...project.tags.topic, ...project.tags.event];
 
   return (
@@ -297,6 +325,41 @@ export function ProjectDetail({ anchor }: ProjectDetailProps = {}) {
 
         {/* Sidebar */}
         <aside className="space-y-6">
+          {/* Membership — #113 Join / Leave */}
+          {(canJoin || isMember) && (
+            <section className="space-y-2">
+              {canJoin && (
+                <Button
+                  className="w-full"
+                  disabled={memberBusy}
+                  onClick={() => void runMembership(() => api.projects.join(slug))}
+                >
+                  {memberBusy ? 'Joining…' : 'Join Project'}
+                </Button>
+              )}
+              {canLeave && (
+                <Button
+                  variant="outline"
+                  className="w-full"
+                  disabled={memberBusy}
+                  onClick={() => void runMembership(() => api.projects.leave(slug))}
+                >
+                  {memberBusy ? 'Leaving…' : 'Leave project'}
+                </Button>
+              )}
+              {isMember && isSoleMaintainer && (
+                <p className="text-xs text-muted-foreground">
+                  You're the sole maintainer. Transfer the maintainer role before you can leave.
+                </p>
+              )}
+              {memberError && (
+                <p className="text-sm text-destructive" role="alert">
+                  {memberError}
+                </p>
+              )}
+            </section>
+          )}
+
           {/* Project info */}
           <section>
             <h3 className="text-sm font-semibold mb-3 text-muted-foreground uppercase tracking-wide">
diff --git a/apps/web/tests/ProjectDetail.test.tsx b/apps/web/tests/ProjectDetail.test.tsx
index d0e4027..5c2e654 100644
--- a/apps/web/tests/ProjectDetail.test.tsx
+++ b/apps/web/tests/ProjectDetail.test.tsx
@@ -191,4 +191,70 @@ describe('ProjectDetail', () => {
       'https://github.com/codeforphilly/sample-project',
     );
   });
+
+  // #113 — Join / Leave membership UI
+  function mockSignedIn(project: typeof PROJECT, accountLevel = 'user'): void {
+    vi.spyOn(globalThis, 'fetch').mockImplementation(((input: string) => {
+      if (input.startsWith('/api/auth/me')) {
+        return Promise.resolve(
+          new Response(
+            JSON.stringify(
+              mockOk({
+                person: { id: 'u1', slug: 'me', fullName: 'Me Person', accountLevel, avatarUrl: null },
+                accountLevel,
+              }),
+            ),
+            { status: 200, headers: { 'content-type': 'application/json' } },
+          ),
+        );
+      }
+      if (
+        input.includes('/api/projects/sample-project/updates') ||
+        input.includes('/api/projects/sample-project/buzz') ||
+        input.includes('/api/projects/sample-project/help-wanted')
+      ) {
+        return Promise.resolve(new Response(JSON.stringify(mockPaginated([])), { status: 200, headers: { 'content-type': 'application/json' } }));
+      }
+      if (input.startsWith('/api/projects/sample-project')) {
+        return Promise.resolve(new Response(JSON.stringify(mockOk(project)), { status: 200, headers: { 'content-type': 'application/json' } }));
+      }
+      return Promise.resolve(new Response(null, { status: 404 }));
+    }) as typeof fetch);
+  }
+
+  function renderDetail(): void {
+    renderScreen(
+      <AuthProvider>
+        <Routes>
+          <Route path="/projects/:slug" element={<ProjectDetail />} />
+        </Routes>
+      </AuthProvider>,
+      { initialEntries: ['/projects/sample-project'] },
+    );
+  }
+
+  it('shows "Join Project" for a signed-in non-member', async () => {
+    mockSignedIn(PROJECT); // memberships: []
+    renderDetail();
+    await waitFor(() => {
+      expect(screen.getByRole('button', { name: /join project/i })).toBeInTheDocument();
+    });
+    expect(screen.queryByRole('button', { name: /leave project/i })).not.toBeInTheDocument();
+  });
+
+  it('shows "Leave project" for a member (not sole maintainer)', async () => {
+    const asMember = {
+      ...PROJECT,
+      memberships: [
+        { id: 'm1', role: 'contributor', isMaintainer: false, joinedAt: '2026-02-01T00:00:00Z', person: { slug: 'me', fullName: 'Me Person', avatarUrl: null } },
+      ],
+      counts: { ...PROJECT.counts, members: 1 },
+    } as unknown as typeof PROJECT;
+    mockSignedIn(asMember);
+    renderDetail();
+    await waitFor(() => {
+      expect(screen.getByRole('button', { name: /leave project/i })).toBeInTheDocument();
+    });
+    expect(screen.queryByRole('button', { name: /join project/i })).not.toBeInTheDocument();
+  });
 });