Integrate join codes, player management, and themes

This update introduces "join codes" for games to simplify game joining. Enhancements include player role and winner management for better organization. Additionally, theme preferences are now user-configurable and persisted server-side.

frontend/src/components/TopBar.jsx

@@ -8,16 +8,19 @@ export default function TopBar({
   setUserMenuOpen,
   openPwModal,
   openDesignModal,
+  openJoinModal,
   doLogout,
   newGame,
 }) {
   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>
 
+      {/* 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ü">
@@ -28,13 +31,14 @@ 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 rgba(233,216,166,0.12)",
+                  borderBottom: `1px solid ${stylesTokens.goldLine}`,
                 }}
               >
                 {me.email}
@@ -44,10 +48,26 @@ export default function TopBar({
                 Passwort setzen
               </button>
 
-              <button onClick={openDesignModal} style={styles.userDropdownItem}>
+              <button
+                onClick={() => {
+                  setUserMenuOpen(false);
+                  openDesignModal();
+                }}
+                style={styles.userDropdownItem}
+              >
                 Design ändern
               </button>
 
+              <button
+                onClick={() => {
+                  setUserMenuOpen(false);
+                  openJoinModal();
+                }}
+                style={styles.userDropdownItem}
+              >
+                Spiel beitreten
+              </button>
+
               <div style={styles.userDropdownDivider} />
 
               <button
@@ -64,7 +84,7 @@ export default function TopBar({
         </div>
 
         <button onClick={newGame} style={styles.primaryBtn}>
-          ✦ New Game
+          ✦ Neues Spiel
         </button>
       </div>
     </div>