Aktueller Stand

frontend/src/App.tsx

@@ -372,27 +372,33 @@ export default function App() {
     return t("providerHintWebde");
   };
 
+  const cleanupDisabled = true;
+
   if (!isAuthenticated) {
     return (
       <div className="app auth">
         <header className="topbar">
           <div>
             <p className="badge">v0.1</p>
-            <h1>{t("appName")}</h1>
+            <h1>
+              <a className="brand-link" href="/">{t("appName")}</a>
+            </h1>
             <p className="tagline">{t("tagline")}</p>
           </div>
           <div className="lang-compact" aria-label={t("language")}>
             <div className="lang-buttons">
-              {languages.map((lang) => (
-                <button
-                  key={lang.code}
-                  type="button"
-                  className={activeLang === lang.code ? "active" : ""}
-                  onClick={() => switchLanguage(lang.code)}
-                >
-                  {lang.code.toUpperCase()}
-                </button>
-              ))}
+              <select
+                className="lang-select"
+                value={activeLang}
+                onChange={(event) => switchLanguage(event.target.value)}
+                aria-label={t("language")}
+              >
+                {languages.map((lang) => (
+                  <option key={lang.code} value={lang.code}>
+                    {lang.code.toUpperCase()}
+                  </option>
+                ))}
+              </select>
             </div>
           </div>
         </header>
@@ -440,23 +446,44 @@ export default function App() {
       <header className="topbar">
         <div>
           <p className="badge">v0.1</p>
-          <h1>{t("appName")}</h1>
-          <p className="tagline">{tenant?.name ?? t("tenantFallback")}</p>
+          <h1>
+            <a
+              className="brand-link"
+              href="/"
+              onClick={() => setShowAdmin(false)}
+            >
+              {t("appName")}
+            </a>
+          </h1>
+          {user?.role === "ADMIN" && (
+            <p className="tagline">{tenant?.name ?? t("tenantFallback")}</p>
+          )}
         </div>
         <div className="lang-compact">
           <span className="user-label">{user?.email ?? ""}</span>
           <div className="lang-buttons">
-            {languages.map((lang) => (
+            {user?.role === "ADMIN" && (
               <button
-                key={lang.code}
+                className="ghost admin-toggle"
                 type="button"
-                className={activeLang === lang.code ? "active" : ""}
-                onClick={() => switchLanguage(lang.code)}
+                onClick={() => setShowAdmin((prev) => !prev)}
               >
-                {lang.code.toUpperCase()}
+                {showAdmin ? t("userWorkspace") : t("adminConsole")}
               </button>
-            ))}
-            <button type="button" onClick={handleLogout}>{t("logout")}</button>
+            )}
+            <button className="ghost logout-button" type="button" onClick={handleLogout}>{t("logout")}</button>
+            <select
+              className="lang-select"
+              value={activeLang}
+              onChange={(event) => switchLanguage(event.target.value)}
+              aria-label={t("language")}
+            >
+              {languages.map((lang) => (
+                <option key={lang.code} value={lang.code}>
+                  {lang.code.toUpperCase()}
+                </option>
+              ))}
+            </select>
           </div>
         </div>
       </header>
@@ -467,7 +494,13 @@ export default function App() {
             <h2>{t("welcome")}</h2>
             <p className="description">{t("description")}</p>
             <div className="actions">
-              <button className="primary" type="button" onClick={handleStartCleanup}>
+              <button
+                className="primary"
+                type="button"
+                onClick={handleStartCleanup}
+                disabled={cleanupDisabled}
+                title={t("cleanupDisabled")}
+              >
                 {t("start")}
               </button>
             </div>
@@ -498,19 +531,6 @@ export default function App() {
           </div>
         </section>
 
-        {user?.role === "ADMIN" && (
-          <div className="admin-switch">
-            <button
-              className="ghost"
-              type="button"
-              onClick={() => setShowAdmin((prev) => !prev)}
-            >
-              {showAdmin ? t("userWorkspace") : t("adminConsole")}
-            </button>
-            <span className="status-badge">{t("admin")}</span>
-          </div>
-        )}
-
         {user?.role === "ADMIN" && showAdmin ? (
           <section className="admin-only">
             <div className="section-header">
@@ -604,7 +624,13 @@ export default function App() {
               </label>
             </div>
             <div className="card-actions">
-              <button className="primary" type="button" onClick={handleStartCleanup}>
+              <button
+                className="primary"
+                type="button"
+                onClick={handleStartCleanup}
+                disabled={cleanupDisabled}
+                title={t("cleanupDisabled")}
+              >
                 {t("start")}
               </button>
             </div>