Release: v0.1.0

apps/web/src/components/AppHeader.tsx

@@ -197,7 +197,7 @@ export function AppHeader() {
           <img
             src="/img/logo-horizontal.svg"
             alt="Code for Philly"
-            className="h-8 w-auto"
+            className="h-12 w-auto"
           />
         </Link>
 

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',

apps/web/src/screens/PersonDetail.tsx

@@ -5,12 +5,14 @@ import { MarkdownView } from '@/components/MarkdownView';
 import { StageBadge } from '@/components/StageBadge';
 import { TagChip } from '@/components/TagChip';
 import { PersonAvatar } from '@/components/PersonAvatar';
+import { useAuth } from '@/hooks/useAuth';
 import { api, ApiError } from '@/lib/api';
 import { formatMonthYear, formatRelativeTime } from '@/lib/time';
 
 export function PersonDetail() {
   const params = useParams();
   const slug = params['slug']!;
+  const { person: viewer } = useAuth();
 
   const personQ = useQuery({
     queryKey: ['person', slug],
@@ -37,6 +39,7 @@ export function PersonDetail() {
   }
 
   const person = personQ.data!.data;
+  const isSelf = viewer !== null && viewer.slug === person.slug;
   const allTags = [...person.tags.tech, ...person.tags.topic];
 
   // Memberships sorted: maintainer desc, joinedAt desc
@@ -193,6 +196,13 @@ export function PersonDetail() {
           </h3>
           <p>{formatMonthYear(person.createdAt)}</p>
         </section>
+        {isSelf && (
+          <section>
+            <Link to="/account" className="text-primary underline hover:no-underline">
+              Manage account
+            </Link>
+          </section>
+        )}
       </aside>
     </div>
   );

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">

apps/web/tests/PersonDetail.test.tsx

@@ -99,4 +99,54 @@ describe('PersonDetail Contact sidebar', () => {
       expect(mailto).toHaveAttribute('href', 'mailto:jane@example.com');
     });
   });
+
+  // #113 — "Manage account" link, self only
+  it('shows a "Manage account" link to /account when viewing your own profile', async () => {
+    vi.spyOn(globalThis, 'fetch').mockImplementation(((input: string) => {
+      if (input.startsWith('/api/auth/me')) {
+        return Promise.resolve(
+          new Response(
+            JSON.stringify(
+              mockOk({
+                person: { id: BASE_PERSON.id, slug: 'jane-doe', fullName: 'Jane Doe', accountLevel: 'user', avatarUrl: null },
+                accountLevel: 'user',
+              }),
+            ),
+            { status: 200, headers: { 'content-type': 'application/json' } },
+          ),
+        );
+      }
+      if (input.startsWith('/api/people/jane-doe')) {
+        return Promise.resolve(new Response(JSON.stringify(mockOk(BASE_PERSON)), { status: 200, headers: { 'content-type': 'application/json' } }));
+      }
+      return Promise.resolve(new Response(null, { status: 404 }));
+    }) as typeof fetch);
+    renderScreen(
+      <AuthProvider>
+        <Routes>
+          <Route path="/members/:slug" element={<PersonDetail />} />
+        </Routes>
+      </AuthProvider>,
+      { initialEntries: ['/members/jane-doe'] },
+    );
+    await waitFor(() => {
+      expect(screen.getByRole('link', { name: /manage account/i })).toHaveAttribute('href', '/account');
+    });
+  });
+
+  it('does not show "Manage account" for anonymous viewers', async () => {
+    vi.spyOn(globalThis, 'fetch').mockImplementation(makeFetchMock(BASE_PERSON));
+    renderScreen(
+      <AuthProvider>
+        <Routes>
+          <Route path="/members/:slug" element={<PersonDetail />} />
+        </Routes>
+      </AuthProvider>,
+      { initialEntries: ['/members/jane-doe'] },
+    );
+    await waitFor(() => {
+      expect(screen.getByRole('heading', { name: 'Jane Doe', level: 1 })).toBeInTheDocument();
+    });
+    expect(screen.queryByRole('link', { name: /manage account/i })).not.toBeInTheDocument();
+  });
 });

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();
+  });
 });