feat(events): add competitor number (bib) support

Allow participants to set their bib/competitor number per event.
Display as badge next to username in participant lists.

- Add competitorNumber field to EventParticipant model
- Add PUT /events/:slug/competitor-number endpoint
- Include competitorNumber in heats/me and heats/all responses
- Add input field in HeatsBanner component
- Display badge in UserListItem component
- Add unit tests for competitor number feature

frontend/src/components/events/ParticipantsSidebar.jsx

@@ -8,6 +8,7 @@ import UserListItem from '../users/UserListItem';
  * @param {Array} users - Array of user objects to display (already filtered)
  * @param {Array} activeUsers - Array of currently online users (for count)
  * @param {Map} userHeats - Map of userId -> heats array
+ * @param {Map} userCompetitorNumbers - Map of userId -> competitor number (bib)
  * @param {Array} myHeats - Current user's heats (for filter checkbox visibility)
  * @param {boolean} hideMyHeats - Filter state
  * @param {function} onHideMyHeatsChange - Filter change handler
@@ -19,6 +20,7 @@ import UserListItem from '../users/UserListItem';
  *   users={filteredUsers}
  *   activeUsers={activeUsers}
  *   userHeats={userHeats}
+ *   userCompetitorNumbers={userCompetitorNumbers}
  *   myHeats={myHeats}
  *   hideMyHeats={hideMyHeats}
  *   onHideMyHeatsChange={setHideMyHeats}
@@ -29,6 +31,7 @@ const ParticipantsSidebar = ({
   users = [],
   activeUsers = [],
   userHeats = new Map(),
+  userCompetitorNumbers = new Map(),
   myHeats = [],
   hideMyHeats = false,
   onHideMyHeatsChange,
@@ -73,6 +76,7 @@ const ParticipantsSidebar = ({
       <div className="space-y-2">
         {users.map((displayUser) => {
           const thisUserHeats = userHeats.get(displayUser.userId) || [];
+          const competitorNumber = userCompetitorNumbers.get(displayUser.userId);
           const hasHeats = thisUserHeats.length > 0;
 
           return (
@@ -80,6 +84,7 @@ const ParticipantsSidebar = ({
               key={displayUser.userId}
               user={displayUser}
               heats={thisUserHeats}
+              competitorNumber={competitorNumber}
               showHeats={true}
               actionButton={
                 <button

frontend/src/components/heats/HeatsBanner.jsx

@@ -2,10 +2,11 @@ import { useState, useEffect } from 'react';
 import { X, Plus, Trash2, Loader2 } from 'lucide-react';
 import { divisionsAPI, competitionTypesAPI, heatsAPI } from '../../services/api';
 
-export default function HeatsBanner({ slug, onSave, onDismiss, existingHeats = null }) {
+export default function HeatsBanner({ slug, onSave, onDismiss, existingHeats = null, existingCompetitorNumber = null }) {
   const [divisions, setDivisions] = useState([]);
   const [competitionTypes, setCompetitionTypes] = useState([]);
   const [heats, setHeats] = useState([{ divisionId: '', competitionTypeId: '', heatNumber: '', role: '' }]);
+  const [competitorNumber, setCompetitorNumber] = useState(existingCompetitorNumber || '');
   const [loading, setLoading] = useState(true);
   const [saving, setSaving] = useState(false);
   const [error, setError] = useState('');
@@ -80,6 +81,11 @@ export default function HeatsBanner({ slug, onSave, onDismiss, existingHeats = n
 
       await heatsAPI.saveHeats(slug, heatsToSave);
 
+      // Save competitor number if provided
+      if (competitorNumber) {
+        await heatsAPI.setCompetitorNumber(slug, parseInt(competitorNumber));
+      }
+
       if (onSave) {
         onSave();
       }
@@ -132,6 +138,28 @@ export default function HeatsBanner({ slug, onSave, onDismiss, existingHeats = n
           </div>
         )}
 
+        <div className="bg-white rounded-lg p-4 shadow-sm border border-amber-200 mb-4">
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4 items-end">
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-1">
+                Competitor Number (Bib)
+              </label>
+              <p className="text-xs text-gray-500 mb-2">
+                Your bib number for this event (same across all divisions)
+              </p>
+              <input
+                type="number"
+                min="1"
+                max="9999"
+                value={competitorNumber}
+                onChange={(e) => setCompetitorNumber(e.target.value)}
+                placeholder="e.g., 123"
+                className="w-full max-w-[150px] px-3 py-2 border border-gray-300 rounded-md focus:ring-primary-500 focus:border-primary-500 text-sm"
+              />
+            </div>
+          </div>
+        </div>
+
         <div className="space-y-3">
           {heats.map((heat, index) => (
             <div key={index} className="bg-white rounded-lg p-4 shadow-sm border border-amber-200">

frontend/src/components/users/UserListItem.jsx

@@ -8,6 +8,7 @@ import HeatBadges from '../heats/HeatBadges';
  *
  * @param {object} user - User object with { userId, username, avatar, isOnline, firstName, lastName }
  * @param {Array} heats - Array of heat objects for this user
+ * @param {number} competitorNumber - User's bib/competitor number (optional)
  * @param {boolean} showHeats - Whether to display heat badges (default: true)
  * @param {React.ReactNode} actionButton - Optional action button/element to display on right
  * @param {function} onClick - Optional click handler for the entire item
@@ -18,6 +19,7 @@ import HeatBadges from '../heats/HeatBadges';
  * <UserListItem
  *   user={displayUser}
  *   heats={userHeats.get(userId)}
+ *   competitorNumber={123}
  *   actionButton={
  *     <button onClick={() => handleMatch(userId)}>
  *       <UserPlus />
@@ -28,6 +30,7 @@ import HeatBadges from '../heats/HeatBadges';
 const UserListItem = ({
   user,
   heats = [],
+  competitorNumber,
   showHeats = true,
   actionButton,
   onClick,
@@ -66,7 +69,14 @@ const UserListItem = ({
           title={user.username}
         />
         <div className="flex-1 min-w-0">
-          {usernameContent}
+          <div className="flex items-center gap-1.5">
+            {usernameContent}
+            {competitorNumber && (
+              <span className="inline-flex items-center px-1.5 py-0.5 text-xs font-medium bg-amber-100 text-amber-800 rounded">
+                #{competitorNumber}
+              </span>
+            )}
+          </div>
           {/* Full name (optional) */}
           {(user.firstName || user.lastName) && (
             <p className="text-xs text-gray-500 truncate">