Add current members list display in NewGameModal

Introduced a UI element in NewGameModal to display the list of current members when available. Also used React Portal to render the bottom snack for joins directly in the document body. These updates enhance UI clarity and user feedback during game interactions.

frontend/src/App.jsx

@@ -1,4 +1,5 @@
 import React, { useEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
 
 import { api } from "./api/client";
 import { cycleTag } from "./utils/cycleTag";
@@ -581,6 +582,7 @@ export default function App() {
         currentCode={gameMeta?.code || ""}
         gameFinished={!!gameMeta?.winner_user_id}
         hasGame={!!gameId}
+        currentMembers={members}
       />
 
       <ChipModal
@@ -599,7 +601,8 @@ export default function App() {
       />
 
       {/* Bottom snack for joins */}
-      {snack && (
+      {snack &&
+        createPortal(
           <div
             style={{
               position: "fixed",
@@ -619,12 +622,13 @@ export default function App() {
               textAlign: "center",
               zIndex: 2147483647,
               pointerEvents: "none",
-            animation: "fadeIn 120ms ease-out",
             }}
           >
             {snack}
-        </div>
-      )}
+          </div>,
+          document.body
+        )
+      }
     </div>
   );
 }

frontend/src/components/NewGameModal.jsx

@@ -12,6 +12,7 @@ export default function NewGameModal({
   currentCode = "",
   gameFinished = false,
   hasGame = false,
+  currentMembers = [],
 }) {
   // modes: running | choice | create | join
   const [mode, setMode] = useState("choice");
@@ -168,6 +169,47 @@ export default function NewGameModal({
             </>
           )}
 
+          {currentMembers?.length > 0 && (
+            <div
+              style={{
+                marginTop: 10,
+                padding: 10,
+                borderRadius: 14,
+                border: `1px solid ${stylesTokens.panelBorder}`,
+                background: stylesTokens.panelBg,
+                display: "grid",
+                gap: 8,
+              }}
+            >
+              <div style={{ fontSize: 12, opacity: 0.8, color: stylesTokens.textDim }}>
+                Aktuelle Spieler ({currentMembers.length})
+              </div>
+
+              <div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
+                {currentMembers.map((m) => {
+                  const name = ((m.display_name || "").trim() || (m.email || "").trim() || "—");
+                  return (
+                    <div
+                      key={m.id}
+                      style={{
+                        padding: "6px 10px",
+                        borderRadius: 999,
+                        border: `1px solid rgba(233,216,166,0.18)`,
+                        background: "rgba(10,10,12,0.35)",
+                        color: stylesTokens.textMain,
+                        fontSize: 13,
+                        fontWeight: 900,
+                      }}
+                    >
+                      {name}
+                    </div>
+                  );
+                })}
+              </div>
+            </div>
+          )}
+
+
           {/* ✅ CHOICE: nur wenn Spiel beendet oder kein Spiel selected */}
           {mode === "choice" && (
             <>