Refactor and enhance game management, user roles, and state handling

This commit introduces significant changes across the backend and frontend to improve game creation, joining, and member management. Key updates include adding a host role, structured handling of winners, and a New Game modal in the frontend. The refactor also simplifies join codes, improves persistence for user themes, and enhances overall user interaction with better UI feedback and logic.

frontend/src/components/TopBar.jsx

@@ -8,22 +8,27 @@ export default function TopBar({
   setUserMenuOpen,
   openPwModal,
   openDesignModal,
-  openJoinModal,
   doLogout,
-  newGame,
+  onOpenNewGame, // NEW
 }) {
   return (
     <div style={styles.topBar}>
-      {/* LINKS */}
       <div>
-        <div style={{ fontWeight: 900, color: stylesTokens.textGold }}>Notizbogen</div>
-        <div style={{ fontSize: 12, opacity: 0.8, color: stylesTokens.textDim }}>{me.email}</div>
+        <div style={{ fontWeight: 900, color: stylesTokens.textGold }}>
+          Notizbogen
+        </div>
+        <div style={{ fontSize: 12, opacity: 0.8, color: stylesTokens.textDim }}>
+          {me.email}
+        </div>
       </div>
 
-      {/* RECHTS */}
       <div style={{ display: "flex", gap: 8, alignItems: "center", flexWrap: "nowrap" }} data-user-menu>
         <div style={{ position: "relative" }}>
-          <button onClick={() => setUserMenuOpen((v) => !v)} style={styles.userBtn} title="User Menü">
+          <button
+            onClick={() => setUserMenuOpen((v) => !v)}
+            style={styles.userBtn}
+            title="User Menü"
+          >
             <span style={{ fontSize: 16 }}>👤</span>
             <span>User</span>
             <span style={{ opacity: 0.7 }}>▾</span>
@@ -31,14 +36,13 @@ export default function TopBar({
 
           {userMenuOpen && (
             <div style={styles.userDropdown}>
-              {/* Email Info */}
               <div
                 style={{
                   padding: "10px 12px",
                   fontSize: 13,
                   opacity: 0.85,
                   color: stylesTokens.textDim,
-                  borderBottom: `1px solid ${stylesTokens.goldLine}`,
+                  borderBottom: "1px solid rgba(233,216,166,0.12)",
                 }}
               >
                 {me.email}
@@ -48,26 +52,10 @@ export default function TopBar({
                 Passwort setzen
               </button>
 
-              <button
-                onClick={() => {
-                  setUserMenuOpen(false);
-                  openDesignModal();
-                }}
-                style={styles.userDropdownItem}
-              >
+              <button onClick={openDesignModal} style={styles.userDropdownItem}>
                 Design ändern
               </button>
 
-              <button
-                onClick={() => {
-                  setUserMenuOpen(false);
-                  openJoinModal();
-                }}
-                style={styles.userDropdownItem}
-              >
-                Spiel beitreten
-              </button>
-
               <div style={styles.userDropdownDivider} />
 
               <button
@@ -83,8 +71,8 @@ export default function TopBar({
           )}
         </div>
 
-        <button onClick={newGame} style={styles.primaryBtn}>
-          ✦ Neues Spiel
+        <button onClick={onOpenNewGame} style={styles.primaryBtn}>
+          ✦ New Game
         </button>
       </div>
     </div>