feat(ui): add shift management UI with list, detail, and sign-up

Implements Task 20: Shift Sign-Up UI - List + Detail + Create Pages

New components:
- useShifts hook: TanStack Query hooks (useShifts, useShift, useCreateShift, useSignUpShift, useCancelSignUp)
- Shift list page: Card-based UI (NOT table) with capacity bars and Past badges
- Shift detail page: Full info with sign-up/cancel buttons, member list
- New shift form: Create shifts with title, description, location, times, capacity
- ShiftCard component: Reusable card with capacity Progress bar

Key features:
- Card-based UI pattern (shadcn Card, NOT Table - more visual for schedules)
- Capacity calculation: (currentSignups / capacity) * 100 for Progress bar
- Past shift detection: new Date(startTime) < new Date() → shows 'Past' badge
- Sign-up button visibility: !isPast && !isFull && !isSignedUp
- Cancel button visibility: !isPast && isSignedUp
- Role-based 'New Shift' button: Manager/Admin only
- TanStack Query with automatic cache invalidation on mutations
- Navigation includes Shifts link in sidebar

New shadcn components:
- Progress: Radix UI progress bar with transform-based fill
- Textarea: Styled textarea for shift descriptions

TDD:
- 3 shift card tests (capacity display, full capacity, past shifts)
- 3 shift detail tests (sign-up button, cancel button, mutation calls)

All tests pass (37/37: 31 existing + 6 new). Build succeeds.

frontend/src/components/__tests__/shift-card.test.tsx

@@ -0,0 +1,55 @@
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { ShiftCard } from '../shifts/shift-card';
+
+describe('ShiftCard', () => {
+  it('shows capacity correctly (2/3 spots filled)', () => {
+    render(
+      <ShiftCard
+        shift={{
+          id: '1',
+          title: 'Test Shift',
+          startTime: new Date(Date.now() + 100000).toISOString(),
+          endTime: new Date(Date.now() + 200000).toISOString(),
+          capacity: 3,
+          currentSignups: 2,
+        }}
+      />
+    );
+    expect(screen.getByText('2/3 spots filled')).toBeInTheDocument();
+  });
+
+  it('disables sign-up button when full', () => {
+    render(
+      <ShiftCard
+        shift={{
+          id: '1',
+          title: 'Full Shift',
+          startTime: new Date(Date.now() + 100000).toISOString(),
+          endTime: new Date(Date.now() + 200000).toISOString(),
+          capacity: 3,
+          currentSignups: 3,
+        }}
+      />
+    );
+    expect(screen.getByText('3/3 spots filled')).toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: 'Sign Up' })).not.toBeInTheDocument();
+  });
+
+  it('shows "Past" badge and no sign-up button for past shifts', () => {
+    render(
+      <ShiftCard
+        shift={{
+          id: '1',
+          title: 'Past Shift',
+          startTime: new Date(Date.now() - 200000).toISOString(),
+          endTime: new Date(Date.now() - 100000).toISOString(),
+          capacity: 3,
+          currentSignups: 1,
+        }}
+      />
+    );
+    expect(screen.getByText('Past')).toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: 'Sign Up' })).not.toBeInTheDocument();
+  });
+});