Refactor app by modularizing components and extracting utilities.

The changes split large features into smaller, reusable components like `AdminPanel`, `LoginPage`, `TopBar`, `PasswordModal`, and `ChipModal`. Utility functions such as `cycleTag` and `chipStorage` were extracted for better organization. This improves the code's readability, maintainability, and scalability.
This commit is contained in:
2026-02-04 08:49:34 +01:00
parent 62eb7e6e58
commit 1afb060bbc
13 changed files with 1056 additions and 1215 deletions

View File

@@ -0,0 +1,59 @@
import React from "react";
import { styles } from "../styles/styles";
import { stylesTokens } from "../styles/theme";
export default function TopBar({
me,
userMenuOpen,
setUserMenuOpen,
openPwModal,
doLogout,
newGame,
}) {
return (
<div style={styles.topBar}>
<div>
<div style={{ fontWeight: 900, color: stylesTokens.textGold }}>{me.email}</div>
<div style={{ fontSize: 12, opacity: 0.8, color: stylesTokens.textDim }}>{me.role}</div>
</div>
<div style={{ display: "flex", gap: 8, alignItems: "center" }} data-user-menu>
<div style={{ position: "relative" }}>
<button
onClick={() => setUserMenuOpen((v) => !v)}
style={styles.userBtn}
title="User Menü"
>
<span style={{ fontSize: 16, lineHeight: 1 }}>👤</span>
<span>Account</span>
<span style={{ opacity: 0.8 }}></span>
</button>
{userMenuOpen && (
<div style={styles.userDropdown}>
<button onClick={openPwModal} style={styles.userDropdownItem}>
Passwort setzen
</button>
<div style={styles.userDropdownDivider} />
<button
onClick={() => {
setUserMenuOpen(false);
doLogout();
}}
style={{ ...styles.userDropdownItem, color: "#ffb3b3" }}
>
Logout
</button>
</div>
)}
</div>
<button onClick={newGame} style={styles.primaryBtn}>
+ Neues Spiel
</button>
</div>
</div>
);
}