From 85805531c2089b273ea5e37f37a336d2502c2f4f Mon Sep 17 00:00:00 2001
From: nessi <sascha@nesterovic.cc>
Date: Fri, 6 Feb 2026 14:46:36 +0100
Subject: [PATCH] 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                     | 56 +++++++++++++-----------
 frontend/src/components/NewGameModal.jsx | 42 ++++++++++++++++++
 2 files changed, 72 insertions(+), 26 deletions(-)

diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index 19afbdf..3b54669 100644
--- a/frontend/src/App.jsx
+++ b/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,32 +601,34 @@ export default function App() {
       />
 
       {/* Bottom snack for joins */}
-      {snack && (
-        <div
-          style={{
-            position: "fixed",
-            left: "50%",
-            bottom: 14,
-            transform: "translateX(-50%)",
-            maxWidth: "92vw",
-            padding: "10px 12px",
-            borderRadius: 14,
-            border: `1px solid ${stylesTokens.panelBorder}`,
-            background: stylesTokens.panelBg,
-            color: stylesTokens.textMain,
-            boxShadow: "0 12px 30px rgba(0,0,0,0.35)",
-            backdropFilter: "blur(6px)",
-            fontWeight: 900,
-            fontSize: 13,
-            textAlign: "center",
-            zIndex: 2147483647,
-            pointerEvents: "none",
-            animation: "fadeIn 120ms ease-out",
-          }}
-        >
-          {snack}
-        </div>
-      )}
+      {snack &&
+        createPortal(
+          <div
+            style={{
+              position: "fixed",
+              left: "50%",
+              bottom: 14,
+              transform: "translateX(-50%)",
+              maxWidth: "92vw",
+              padding: "10px 12px",
+              borderRadius: 14,
+              border: `1px solid ${stylesTokens.panelBorder}`,
+              background: stylesTokens.panelBg,
+              color: stylesTokens.textMain,
+              boxShadow: "0 12px 30px rgba(0,0,0,0.35)",
+              backdropFilter: "blur(6px)",
+              fontWeight: 900,
+              fontSize: 13,
+              textAlign: "center",
+              zIndex: 2147483647,
+              pointerEvents: "none",
+            }}
+          >
+            {snack}
+          </div>,
+          document.body
+        )
+      }
     </div>
   );
 }
diff --git a/frontend/src/components/NewGameModal.jsx b/frontend/src/components/NewGameModal.jsx
index d77048e..4b01079 100644
--- a/frontend/src/components/NewGameModal.jsx
+++ b/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" && (
             <>