Rollen Chunk 4: Benutzerkonto, Abmelde-Icon und fremde Einstellungen

src/components/SettingsTabs.tsx

@@ -2,53 +2,103 @@
 
 import { useState } from "react";
 import type { Settings } from "@/lib/api-client";
+import { AccountSection } from "@/components/AccountSection";
 import { BackupSection } from "@/components/BackupSection";
 import { WorkTimeSettingsForm } from "@/components/WorkTimeSettingsForm";
 import { VacationSettingsForm } from "@/components/VacationSettingsForm";
 
+function LogoutIcon() {
+  return (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+    >
+      <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" />
+      <path d="M16 17l5-5-5-5" />
+      <path d="M21 12H9" />
+    </svg>
+  );
+}
+
 export function SettingsTabs({
   initial,
   year,
   onSaved,
+  account,
+  onLogout,
+  onEmailChanged,
 }: {
   initial: Settings | null;
   year: number;
   onSaved?: () => void;
+  account?: { email: string } | null;
+  onLogout?: () => void;
+  onEmailChanged?: (email: string) => void;
 }) {
-  const [view, setView] = useState<"arbeitszeit" | "urlaub" | "sicherung">(
-    "arbeitszeit",
-  );
+  const [view, setView] = useState<
+    "arbeitszeit" | "urlaub" | "sicherung" | "konto"
+  >("arbeitszeit");
   return (
     <>
-      <div
-        role="tablist"
-        aria-label="Einstellungen-Bereiche"
-        className="app-tabs sub-tabs"
-      >
-        <button
-          type="button"
-          role="tab"
-          aria-selected={view === "arbeitszeit"}
-          onClick={() => setView("arbeitszeit")}
+      <div className="settings-bar">
+        <div
+          role="tablist"
+          aria-label="Einstellungen-Bereiche"
+          className="app-tabs sub-tabs"
         >
-          Arbeitszeit
-        </button>
-        <button
-          type="button"
-          role="tab"
-          aria-selected={view === "urlaub"}
-          onClick={() => setView("urlaub")}
-        >
-          Urlaub &amp; Bundesland
-        </button>
-        <button
-          type="button"
-          role="tab"
-          aria-selected={view === "sicherung"}
-          onClick={() => setView("sicherung")}
-        >
-          Sicherung
-        </button>
+          <button
+            type="button"
+            role="tab"
+            aria-selected={view === "arbeitszeit"}
+            onClick={() => setView("arbeitszeit")}
+          >
+            Arbeitszeit
+          </button>
+          <button
+            type="button"
+            role="tab"
+            aria-selected={view === "urlaub"}
+            onClick={() => setView("urlaub")}
+          >
+            Urlaub &amp; Bundesland
+          </button>
+          <button
+            type="button"
+            role="tab"
+            aria-selected={view === "sicherung"}
+            onClick={() => setView("sicherung")}
+          >
+            Sicherung
+          </button>
+          {account && (
+            <button
+              type="button"
+              role="tab"
+              aria-selected={view === "konto"}
+              onClick={() => setView("konto")}
+            >
+              Konto
+            </button>
+          )}
+        </div>
+        {account && onLogout && (
+          <button
+            type="button"
+            className="icon-button"
+            aria-label="Abmelden"
+            title="Abmelden"
+            onClick={onLogout}
+          >
+            <LogoutIcon />
+          </button>
+        )}
       </div>
       <div hidden={view !== "arbeitszeit"}>
         <WorkTimeSettingsForm initial={initial} year={year} onSaved={onSaved} />
@@ -59,6 +109,11 @@ export function SettingsTabs({
       <div hidden={view !== "sicherung"}>
         <BackupSection />
       </div>
+      {account && (
+        <div hidden={view !== "konto"}>
+          <AccountSection email={account.email} onEmailChanged={onEmailChanged} />
+        </div>
+      )}
     </>
   );
 }