Add live bidding UI and backend support; integrate react-bootstrap

- Added 'react-bootstrap' to frontend dependencies for improved UI components.
- Updated bid placement mechanics: backend now stores bids as a list of {user, amount}; frontend displays live bid leaderboard, including highest bid.
- Implemented bid placement form and UI in participant draft screen.
- Used React-Bootstrap Collapse for nominee menu accordion behavior.
- Expanded DraftStateManager and websocket consumers to broadcast bid updates in the new format.
- Added missing 'bids' syncing to all relevant state handling code.
- Improved styling for bidding, panel headers, and pick lists in SCSS; leveraged Bootstrap variables/utilities more extensively.
- Other minor JS, Python, and style tweaks for better stability and robustness.

frontend/src/apps/draft/participant/DraftParticipant.jsx

@@ -1,5 +1,5 @@
 // DraftAdmin.jsx
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState, useRef } from "react";
 
 import { useWebSocket } from "../common/WebSocketContext.jsx";
 import { WebSocketStatus } from "../common/WebSocketStatus.jsx";
@@ -9,11 +9,13 @@ import { DraftMoviePool } from "../common/DraftMoviePool.jsx";
 import { ParticipantList } from "../common/ParticipantList.jsx";
 import { DraftCountdownClock } from "../common/DraftCountdownClock.jsx"
 import { handleDraftStatusMessages } from '../common/utils.js'
+// import { Collapse } from 'bootstrap/dist/js/bootstrap.bundle.min.js';
+import { Collapse, ListGroup } from "react-bootstrap";
 
-const NominateMenu = ({ socket, draftState, draftDetails, currentUser }) => {
+
+const NominateMenu = ({ socket, draftState, draftDetails, currentUser, }) => {
   if (!socket || isEmptyObject(draftDetails) || isEmptyObject(draftState)) return;
-  const currentDrafter = draftState.draft_order[draftState.draft_index]
-  if (currentUser != currentDrafter) return;
+  const [open, setOpen] = useState(false);
   const { movies } = draftDetails
 
   const requestNomination = (event) => {
@@ -28,21 +30,35 @@ const NominateMenu = ({ socket, draftState, draftDetails, currentUser }) => {
     }))
   }
 
+  useEffect(() => {
+    if (isEmptyObject(draftState) || isEmptyObject(draftState.current_pick)) return;
+
+    if (currentUser == draftState.current_pick.participant) {
+      setOpen(true)
+    } else {
+      setOpen(false)
+    }
+
+    // collapse.toggle()
+  }, [draftState])
+
   return (
-    <div>
-      <label>Nominate</label>
-      <div className="d-flex">
-        <form onSubmit={requestNomination}>
-          <select className="form-control" name="movie">
-            {movies.map(m => (
-              <option key={m.id} value={m.id}>{m.title}</option>
-            ))}
-          </select>
-          <button className="btn btn-primary">Nominate</button>
-        </form>
+    <Collapse in={open} className="nominate-menu">
+      <div> {/* Everything must be wrapped in one parent */}
+        <label>Nominate</label>
+        <div className="d-flex">
+          <form onSubmit={requestNomination}>
+            <select className="form-control" name="movie">
+              {movies.map(m => (
+                <option key={m.id} value={m.id}>{m.title}</option>
+              ))}
+            </select>
+            <button className="btn btn-primary">Nominate</button>
+          </form>
+        </div>
       </div>
-    </div>
-  )
+    </Collapse>
+  );
 }
 
 export const DraftParticipant = ({ draftSessionId }) => {
@@ -84,81 +100,137 @@ export const DraftParticipant = ({ draftSessionId }) => {
     };
   }, [socket]);
 
+  function submitBidRequest(event) {
+    event.preventDefault()
+    const form = event.target
+    const formData = new FormData(form)
+    console.log('submitting bid...')
+    socket.send(JSON.stringify({
+      type: DraftMessage.BID_PLACE_REQUEST,
+      payload: {
+        bid_amount: formData.get('bidAmount'),
+        user: currentUser
+      }
+    }))
+  }
+
   return (
     <div className="wrapper">
-      <section class="panel draft-live">
-        <header class="panel-header d-flex justify-content-between align-items-center">
-          <h2 class="panel-title">Draft Live</h2>
-          <div class="d-flex gap-1">
-            <div class="phase-indicator badge bg-primary">{DraftPhaseLabel[draftState.phase]}</div>
+      <section className="panel draft-live">
+        <header className="panel-header">
+          <h2 className="panel-title">Draft Live</h2>
+          <div className="d-flex gap-1">
+            <div className="phase-indicator badge bg-primary">{DraftPhaseLabel[draftState.phase]}</div>
             <WebSocketStatus socket={socket} />
           </div>
         </header>
-        <div class="panel-body">
-          <div class="draft-live-state-container">
+        <div className="panel-body">
+          <div className="draft-live-state-container">
             <DraftCountdownClock endTime={draftState.bidding_timer_end}></DraftCountdownClock>
-            <div class="pick-description">
-                {console.log("draft_state", draftState)}
-                <div>Round {draftState.current_pick?.round}</div>
-                <div>Pick {draftState.current_pick?.pick_in_round}</div>
-                <div>{draftState.current_pick?.overall+1} Overall</div>
+            <div className="pick-description">
+              {console.log("draft_state", draftState)}
+              <div>Round {draftState.current_pick?.round}</div>
+              <div>Pick {draftState.current_pick?.pick_in_round}</div>
+              <div>{draftState.current_pick?.overall + 1} Overall</div>
             </div>
           </div>
-          <div class="current-movie card"></div>
-          <div class="bid-controls btn-group"></div>
-          <ParticipantList
-            currentUser={draftState.current_pick?.participant}
-            draftState={draftState}
-            draftDetails={draftDetails}
-          />
+          <div className="bid-status">
+            <div className="d-flex">
+              <div className="flex-grow-1 text-center">
+                {draftState.bids?.length > 0 ? Math.max(draftState.bids?.map(i=>i.bid_amount)) : ""}
+              </div>
+              <div className="flex-grow-1 text-center">
+                highest bid
+              </div>
+            </div>
+            <div>
+            <ol className="bid-list">
+                {draftState.bids?.map((bid, idx) => (
+                  <li key={idx}>{bid.user}: {bid.amount}</li>
+                ))}
+            </ol>
+            </div>
+
+          </div>
+          <div className="bid-controls btn-group d-flex flex-column">
+            <form id="bid" onSubmit={submitBidRequest}>
+              <div className="d-flex">
+                <div className="flex-grow-1 text-center">
+                  <input type="number" id="bidAmount" name="bidAmount"></input>
+                </div>
+                <div className="flex-grow-1 text-center">
+                  <button className="flex-grow-1">Submit</button>
+                </div>
+              </div>
+              <div className="d-flex">
+              </div>
+            </form>
+          </div>
+          <div>
+            <ul className="pick-list">
+              <li>
+                <div>Current Pick: {draftState.current_pick?.participant}</div>
+              </li>
+              <li
+              >
+                <div>Next Pick: {draftState.next_picks ? draftState.next_picks[0]?.participant : ""}</div>
+              </li>
+            </ul>
+          </div>
+
         </div>
       </section>
 
-      <section class="panel draft-board">
-        <header class="panel-header">
-          <h2 class="panel-title">Draft Board</h2>
+      <section className="panel draft-catalog">
+        <header className="panel-header">
+          <h2 className="panel-title">Draft Catalog</h2>
         </header>
-        <div class="panel-body">
-          <div class="current-movie-detail card"></div>
-          <div class="movie-filters"></div>
+        <div className="panel-body">
+          <div className="current-movie card">
+            <span>Current Nomination: {movies.find(i => draftState.current_movie == i.id)?.title}</span>
+          </div>
+          <NominateMenu socket={socket} currentUser={currentUser} draftState={draftState} draftDetails={draftDetails}></NominateMenu>
+          <div className="movie-filters"></div>
+
           <DraftMoviePool isParticipant={true} draftDetails={draftDetails} draftState={draftState}></DraftMoviePool>
         </div>
       </section>
 
 
-      <section class="panel my-team">
-        <header class="panel-header">
-          <h2 class="panel-title">My Team</h2>
+      <section className="panel my-team">
+        <header className="panel-header">
+          <h2 className="panel-title">My Team</h2>
         </header>
-        <div class="panel-body">
-          <ul class="team-movie-list list-group">
-            <li class="team-movie-item list-group-item"></li>
+        <div className="panel-body">
+          <ul className="team-movie-list list-group">
+            <li className="team-movie-item list-group-item"></li>
           </ul>
-          <div class="budget-status"></div>
+          <div className="budget-status"></div>
         </div>
       </section>
 
 
-      <section class="panel teams">
-        <header class="panel-header">
-          <h2 class="panel-title">Teams</h2>
+      <section className="panel teams">
+        <header className="panel-header">
+          <h2 className="panel-title">Teams</h2>
         </header>
-        <div class="panel-body">
-          <ul class="team-list list-group">
-            <li class="team-item list-group-item">
-              <div class="team-name fw-bold"></div>
-              <ul class="team-movie-list list-group list-group-flush">
-                <li class="team-movie-item list-group-item"></li>
+        <div className="panel-body">
+          <ParticipantList
+            currentUser={currentUser}
+            draftState={draftState}
+            draftDetails={draftDetails}
+          />
+          <ul className="team-list list-group">
+            <li className="team-item list-group-item">
+              <div className="team-name fw-bold"></div>
+              <ul className="team-movie-list list-group list-group-flush">
+                <li className="team-movie-item list-group-item"></li>
               </ul>
             </li>
           </ul>
         </div>
       </section>
 
-
-
-      <NominateMenu socket={socket} currentUser={currentUser} draftState={draftState} draftDetails={draftDetails}></NominateMenu>
-
     </div>
   );
 };