Add movie detail API and enhance draft admin/participant UI

- Introduced `/api/movie/<id>/detail` endpoint returning TMDB data for a movie.
- Moved draft detail fetching logic into `common/utils.js` for reuse.
- Updated Draft Admin panel:
  - Added phase navigation buttons with bootstrap icons.
  - Improved layout with refresh and status controls.
- Updated Draft Participant panel:
  - Added movie pool display with links to movie details.
- Added bootstrap-icons stylesheet and corresponding SCSS styles for new UI.

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

@@ -4,13 +4,40 @@ import React, { useEffect, useState } from "react";
 import { useWebSocket } from "../WebSocketContext.jsx";
 import { WebSocketStatus } from "../common/WebSocketStatus.jsx";
 import { DraftMessage, DraftPhases } from '../constants.js';
+import { fetchDraftDetails } from "../common/utils.js"
+
+const DraftMoviePool = ({ movies }) => {
+  return (
+    <div className="movie-pool-container">
+      <ul>
+        {movies.map(m => (
+          <li id={m?.id}>
+            <a href={`/api/movie/${m.id}/detail`}>
+              {m.title}
+            </a>
+          </li>
+        ))}
+      </ul>
+    </div>
+  )
+}
 
 export const DraftParticipant = ({ draftSessionId }) => {
   const socket = useWebSocket();
-  const [connectedParticipants, setConnectedParticipants] = useState([]);
+  const [participants, setParticipants] = useState([]);
   const [draftPhase, setDraftPhase] = useState();
+  const [movies, setMovies] = useState([]);
   console.log(socket)
 
+  useEffect(() => {
+    fetchDraftDetails(draftSessionId)
+      .then((data) => {
+        console.log("Fetched draft data", data)
+        setMovies(data.movies)
+      })
+  }, [])
+
+
   useEffect(() => {
     if (!socket) return;
     else {
@@ -60,27 +87,12 @@ export const DraftParticipant = ({ draftSessionId }) => {
 
   return (
     <div className="container draft-panel">
-      <h3>Draft Admin Panel</h3>
-      <WebSocketStatus socket={socket} />
-      {/* <MessageLogger socket={socketRef.current} /> */}
-      <label>Connected Particpants</label>
-      <input
-        type="text"
-        readOnly disabled
-        value={connectedParticipants ? JSON.stringify(connectedParticipants) : ""}
-      />
-      <label>Draft Phase</label>
-      <input
-        type="text"
-        readOnly disabled
-        value={draftPhase ? draftPhase : ""}
-      />
-      <button onClick={() => handlePhaseChange(DraftPhases.DETERMINE_ORDER)} className="btn btn-primary mt-2 me-2">
-        Determine Draft Order
-      </button>
-      <button onClick={handleRequestDraftSummary} className="btn btn-primary mt-2">
-        Request status
-      </button>
+      <div className="d-flex justify-content-between border-bottom mb-2 p-1">
+        <h3>Draft Panel</h3>
+        <WebSocketStatus socket={socket} />
+      </div>
+      
+      <DraftMoviePool movies={movies}></DraftMoviePool>
     </div>
   );
 };