feat(events): show spots left under who's going for capacity-limited events

frontend/src/screens/events/EventMemberSection.test.tsx

@@ -307,6 +307,20 @@ describe('EventMemberSection — rsvp-disabled gates (#666, #667)', () => {
   });
 });
 
+describe('EventMemberSection — capacity note', () => {
+  it('shows spots left under "who\'s going" when the event has a capacity', () => {
+    useAuthStore.setState({ status: 'authed', user: STRANGER, accessToken: 'tok' });
+    renderSection({ ...BASE_EVENT, rsvpEnabled: true, maxAttendees: 20, attendingCount: 8 });
+    expect(screen.getByText('12/20 spots left')).toBeInTheDocument();
+  });
+
+  it('hides the capacity note when the event has no capacity limit', () => {
+    useAuthStore.setState({ status: 'authed', user: STRANGER, accessToken: 'tok' });
+    renderSection({ ...BASE_EVENT, rsvpEnabled: true, maxAttendees: null, attendingCount: 8 });
+    expect(screen.queryByText(/spots left/i)).not.toBeInTheDocument();
+  });
+});
+
 describe('EventMemberSection — invite gating on member rsvp (#688)', () => {
   const ALL_MEMBERS_EVENT: Event = {
     ...BASE_EVENT,

frontend/src/screens/events/EventMemberSection.tsx

@@ -4,6 +4,7 @@ import { Link } from 'react-router-dom';
 import { useAuthStore } from '@/auth/store';
 import { Button } from '@/components/ui/Button';
 import type { Event } from '@/models/event';
+import { spotsLeft } from '@/models/event';
 import { buildEventLinks } from '@/utils/eventLinks';
 import { ensureHttps } from '@/utils/url';
 
@@ -52,6 +53,7 @@ export function EventMemberSection({ event, token }: Props) {
       <CostSection event={event} />
       {showRsvp ? (
         <Card label="who's going">
+          <CapacityNote event={event} />
           <RsvpGuestList event={event} canSeeInvited={canSeeInvited} />
           {canInvite || isCoHost ? (
             <div className="mt-4 flex flex-col items-stretch gap-2">
@@ -78,6 +80,17 @@ export function EventMemberSection({ event, token }: Props) {
   );
 }
 
+function CapacityNote({ event }: { event: Event }) {
+  const { maxAttendees } = event;
+  const left = spotsLeft(event);
+  if (left === null || maxAttendees === null) return null;
+  return (
+    <p className="text-muted -mt-2 mb-3 text-xs">
+      {left}/{maxAttendees} spots left
+    </p>
+  );
+}
+
 function ReportEventButton({ eventId }: { eventId: string }) {
   const [open, setOpen] = useState(false);
   return (