Ribbon-Tabs in die TopBar-Zeile verlegt: eine Leiste (Chrome + Tabs), Inhalt darunter

src/App.tsx

@@ -71,6 +71,7 @@ import type { ResourceManagerHandlers } from "./ui/ResourceManager";
 import { HatchSwatch } from "./ui/hatchPreview";
 import { TopBar, ViewRibbonTab } from "./ui/TopBar";
 import { RibbonBar } from "./ui/ribbon/RibbonBar";
+import type { RibbonTabId } from "./ui/ribbon/ribbonItems";
 import { Dropdown } from "./ui/Dropdown";
 import type { DropdownItem } from "./ui/Dropdown";
 import { TextEditorDialog } from "./ui/TextEditorDialog";
@@ -355,6 +356,10 @@ export default function App() {
   // Einstellungen sowie der laufende Werkzeug-Zustand (Ref, kein Re-Render je
   // Mausbewegung) und die Live-Vorschau (Draft → Overlay in PlanView).
   const [activeTool, setActiveTool] = useState<ToolId>("select");
+  // Aktiver Ribbon-Tab (2D/3D/BIM/Ansichten). Liegt hier (nicht in der RibbonBar),
+  // weil die Tab-Reiter in der TopBar-Zeile sitzen und der Ribbon-Inhalt darunter
+  // — beide teilen sich denselben aktiven Tab.
+  const [ribbonTab, setRibbonTab] = useState<RibbonTabId>("2d");
   const [activeWallTypeId, setActiveWallTypeId] = useState<string>(
     project.wallTypes[0].id,
   );
@@ -3196,6 +3201,8 @@ export default function App() {
           in den „Ansichten"-Ribbon-Tab gewandert (ViewRibbonTab, unten). */}
       <TopBar
         project={project}
+        ribbonTab={ribbonTab}
+        onRibbonTab={setRibbonTab}
         zoomEnabled={planActive}
         onExportPdf={() => setExportOpen(true)}
         onExportDxf={() => setExportDxfOpen(true)}
@@ -3219,6 +3226,7 @@ export default function App() {
           die aus der TopBar gemergte Ansichts-/Zoom-/Darstellungs-Steuerung
           (ViewRibbonTab); die Werkzeug-Sidebar bleibt vorerst erhalten. */}
       <RibbonBar
+        tab={ribbonTab}
         activeTool={activeTool}
         activeCommand={engineView.commandName}
         toolsEnabled={activeLevel.kind === "floor"}

src/styles.css

@@ -5341,9 +5341,10 @@ body {
   color: #fff;
 }
 
-/* ── Ribbon-Oberleiste (2D · 3D · BIM · Ansichten) ─────────────────────────
+/* ── Ribbon (2D · 3D · BIM · Ansichten) ────────────────────────────────────
-   Datengetriebene Tab-Leiste unter der TopBar (RibbonBar). Kompakte Band-Höhe:
+   Die Tab-REITER (`.ribbon-tabs`) sitzen in der TopBar-Zeile; hier folgt nur der
-   Tab-Reiter oben, darunter die Werkzeug-/Befehls-Gruppen des aktiven Tabs. */
+   INHALT (`.ribbon`/`.ribbon-body`) des aktiven Tabs darunter. So gibt es genau
+   zwei Bänder: TopBar-Zeile (Chrome + Tabs) oben, Ribbon-Inhalt darunter. */
 .ribbon {
   display: flex;
   flex-direction: column;
@@ -5353,12 +5354,13 @@ body {
   z-index: 1;
   flex: 0 0 auto;
 }
+/* Tab-Reiter — leben in der TopBar-Zeile: volle Zeilenhöhe, Aktiv-Unterstrich
+   sitzt an der Unterkante (verbindet optisch mit dem Inhalt darunter). */
 .ribbon-tabs {
   display: flex;
-  align-items: flex-end;
+  align-self: stretch;
+  align-items: stretch;
   gap: 2px;
-  padding: 0 10px;
-  border-bottom: 1px solid var(--line);
 }
 .ribbon-tab {
   appearance: none;
@@ -5369,7 +5371,9 @@ body {
   font-weight: 600;
   letter-spacing: 0.04em;
   text-transform: uppercase;
-  padding: 7px 12px 6px;
+  padding: 0 12px;
+  display: flex;
+  align-items: center;
   cursor: pointer;
   border-bottom: 2px solid transparent;
   transition: color 0.12s, border-color 0.12s;

src/ui/TopBar.tsx

@@ -15,6 +15,8 @@ import { useEffect, useRef, useState } from "react";
 import { Dropdown } from "./Dropdown";
 import type { DropdownItem, DropdownOption } from "./Dropdown";
 import { WindowControls } from "./WindowControls";
+import { RibbonTabs } from "./ribbon/RibbonBar";
+import type { RibbonTabId } from "./ribbon/ribbonItems";
 import {
   applyMark,
   applyPreset,
@@ -84,9 +86,14 @@ const ZOOM_CLUSTER_WIDTH = 140;
 export interface TopBarProps {
   project: Project;
 
+  // Ribbon-Tab-Reiter (2D/3D/BIM/Ansichten) sitzen in DIESER Zeile — der Ribbon-
+  // Inhalt darunter (RibbonBar). Der aktive Tab liegt in App (geteilter State).
+  ribbonTab: RibbonTabId;
+  onRibbonTab: (id: RibbonTabId) => void;
+
   // Ansichts-/Zoom-/Darstellungs-Steuerung ist in den „Ansichten"-Ribbon-Tab
   // gewandert (siehe ViewRibbonTab). Die TopBar ist nur noch die schmale globale
-  // Leiste: Marke/Ressourcen · Text-Formatierung · Datei/Export/Einstellungen.
+  // Leiste: Marke/Ressourcen · Tabs · Text-Formatierung · Datei/Export/Einstell.
 
   /** Ob Zoom/Plan aktiv ist — steuert nur noch, ob Export im Datei-Menü geht. */
   zoomEnabled: boolean;
@@ -1198,6 +1205,8 @@ export function ViewRibbonTab({
 
 export function TopBar({
   project,
+  ribbonTab,
+  onRibbonTab,
   zoomEnabled,
   onExportPdf,
   onExportDxf,
@@ -1259,6 +1268,13 @@ export function TopBar({
 
       <Sep />
 
+      {/* Ribbon-Tab-Reiter (2D/3D/BIM/Ansichten) — sitzen in dieser Zeile, der
+          Ribbon-Inhalt folgt darunter (RibbonBar). So gibt es nur ZWEI Bänder:
+          diese Leiste (Chrome + Tabs) und den Inhalt. */}
+      <RibbonTabs tab={ribbonTab} onTab={onRibbonTab} />
+
+      <Sep />
+
       {/* Text-Gruppe (kontextabhängig) — Stil/Schrift/Grösse + B/I/U · L/C/R +
           Zeilenhöhe. Formatiert das aktuelle Text-Ziel (Raumstempel) live. Bleibt
           in der schmalen globalen Leiste, weil sie eine kontextuelle Formatier-

src/ui/ribbon/RibbonBar.tsx

@@ -1,17 +1,16 @@
-// Ribbon-Oberleiste (docs/design/ribbon-ui-plan.md, Phase 1) — datengetriebene
+// Ribbon-Inhaltsleiste (docs/design/ribbon-ui-plan.md) — rendert den INHALT des
-// Tab-Leiste unter der TopBar. Zeigt je Tab (2D · 3D · BIM · Ansichten) die
+// aktiven Ribbon-Tabs. Die Tab-REITER selbst sitzen in der TopBar-Zeile (eine
-// gruppierten Werkzeuge/Befehle aus `RIBBON_TABS`. ADDITIV: die Werkzeug-Sidebar
+// Leiste: globales Chrome + Tabs), damit es nur ZWEI Bänder gibt: TopBar-Zeile
-// (ToolsPanel) bleibt vorerst funktionsfähig — beide teilen sich denselben
+// (mit Tabs) oben, Ribbon-Inhalt darunter. Der aktive Tab wird als `tab`-Prop
-// Aktivierungs-Pfad (onSelectTool / engine.start), es gibt keine Duplikat-Logik.
+// hereingereicht (State liegt in App, geteilt mit der TopBar).
 //
-// Werkzeug-Elemente laufen über `onSelectTool` (gekoppelte Befehle inklusive,
+// Werkzeug-Elemente laufen über `onSelectTool` (gekoppelte Befehle inklusive, wie
-// wie in der Sidebar); Befehls-Elemente über `onRunCommand` (engine.start). Das
+// in der Sidebar); Befehls-Elemente über `onRunCommand` (engine.start). Der
-// Aktiv-Highlight spiegelt für Werkzeuge `activeTool`, für Befehle den laufenden
+// „Ansichten"-Tab trägt reichen Custom-Inhalt (`viewsContent`, aus der TopBar
-// Befehl (`activeCommand`).
+// gemergt) statt datengetriebener Item-Gruppen.
 //
 // Bezeichner englisch, UI-Text/Kommentare deutsch (CONVENTIONS.md).
 
-import { useState } from "react";
 import type { ReactNode } from "react";
 import { t } from "../../i18n";
 import { ToolIcon } from "../../panels/ToolsPanel";
@@ -23,6 +22,8 @@ import type { RibbonItem, RibbonTabId } from "./ribbonItems";
 import { CommandIcon } from "./CommandIcon";
 
 export interface RibbonBarProps {
+  /** Aktiver Tab (State liegt in App, geteilt mit den Reitern in der TopBar). */
+  tab: RibbonTabId;
   /** Aktives Werkzeug (Highlight der `tool`-Elemente). */
   activeTool: ToolId;
   /** Name des laufenden Engine-Befehls (Highlight der `command`-Elemente). */
@@ -36,29 +37,28 @@ export interface RibbonBarProps {
   /**
    * Reicher Inhalt des „Ansichten"-Tabs (aus der TopBar gemergte Ansichts-/Zoom-/
    * Darstellungs-Steuerung, `ViewRibbonTab`). Von App geliefert, damit dessen
-   * Setter/State dort bleiben — analog dazu, wie die TopBar das Layout-Menü als
+   * Setter/State dort bleiben. Fehlt er, zeigt der Tab den Leer-Hinweis.
-   * Node bekommt. Fehlt er, zeigt der Tab den Leer-Hinweis.
    */
   viewsContent?: ReactNode;
 }
 
+/** Aktivierungs-/Highlight-Kontext, den jeder Button-Typ braucht. */
+interface ButtonCtx {
+  activeTool: ToolId;
+  activeCommand: string | null;
+  toolsEnabled: boolean;
+  onSelectTool: (id: ToolId) => void;
+  onRunCommand: (name: string) => void;
+}
+
 /** Ein einzelner Ribbon-Button (Werkzeug ODER Befehl). */
-function RibbonButton({
+function RibbonButton({ item, ctx }: { item: RibbonItem; ctx: ButtonCtx }) {
-  item,
-  activeTool,
-  activeCommand,
-  toolsEnabled,
-  onSelectTool,
-  onRunCommand,
-}: {
-  item: RibbonItem;
-} & Omit<RibbonBarProps, "activeCommand"> & { activeCommand: string | null }) {
   if (item.kind === "tool") {
     const tool = getTool(item.id);
     // Nur Boden-gebundene Werkzeuge sind ohne aktives Geschoss gesperrt; freie
     // 2D-Werkzeuge (Linie/Kreis/…) bleiben auch auf Zeichnungsebenen nutzbar.
-    const disabled = !!tool.floorOnly && !toolsEnabled;
+    const disabled = !!tool.floorOnly && !ctx.toolsEnabled;
-    const active = activeTool === item.id;
+    const active = ctx.activeTool === item.id;
     const label = t(tool.labelKey);
     return (
       <button
@@ -66,7 +66,7 @@ function RibbonButton({
         className={`ribbon-btn${active ? " active" : ""}`}
         disabled={disabled}
         title={disabled ? t("tool.floorOnlyDisabled") : label}
-        onClick={() => onSelectTool(item.id)}
+        onClick={() => ctx.onSelectTool(item.id)}
       >
         <ToolIcon id={item.id} />
         <span>{label}</span>
@@ -76,13 +76,13 @@ function RibbonButton({
   // Befehls-Element: Label aus der Befehls-Registry ableiten.
   const cmd = getCommand(item.name);
   const label = cmd ? t(cmd.labelKey) : item.name;
-  const active = activeCommand === item.name;
+  const active = ctx.activeCommand === item.name;
   return (
     <button
       type="button"
       className={`ribbon-btn${active ? " active" : ""}`}
       title={label}
-      onClick={() => onRunCommand(item.name)}
+      onClick={() => ctx.onRunCommand(item.name)}
     >
       <CommandIcon name={item.name} />
       <span>{label}</span>
@@ -90,30 +90,49 @@ function RibbonButton({
   );
 }
 
+/**
+ * Die Tab-REITER — als eigene Komponente exportiert, weil sie in der TopBar-Zeile
+ * gerendert werden (nicht hier). Rein gesteuert über `tab`/`onTab`.
+ */
+export function RibbonTabs({
+  tab,
+  onTab,
+}: {
+  tab: RibbonTabId;
+  onTab: (id: RibbonTabId) => void;
+}) {
+  return (
+    <div className="ribbon-tabs" role="tablist">
+      {RIBBON_TABS.map((tt) => (
+        <button
+          key={tt.id}
+          type="button"
+          role="tab"
+          aria-selected={tt.id === tab}
+          className={`ribbon-tab${tt.id === tab ? " active" : ""}`}
+          onClick={() => onTab(tt.id)}
+        >
+          {t(tt.labelKey)}
+        </button>
+      ))}
+    </div>
+  );
+}
+
 export function RibbonBar(props: RibbonBarProps) {
-  const [tab, setTab] = useState<RibbonTabId>("2d");
+  const current = RIBBON_TABS.find((tt) => tt.id === props.tab) ?? RIBBON_TABS[0];
-  const current = RIBBON_TABS.find((tt) => tt.id === tab) ?? RIBBON_TABS[0];
+  const ctx: ButtonCtx = {
+    activeTool: props.activeTool,
+    activeCommand: props.activeCommand,
+    toolsEnabled: props.toolsEnabled,
+    onSelectTool: props.onSelectTool,
+    onRunCommand: props.onRunCommand,
+  };
 
   return (
     <div className="ribbon">
-      {/* Tab-Reiter */}
+      {/* Inhalt des aktiven Tabs. Der „Ansichten"-Tab trägt reichen Custom-Inhalt
-      <div className="ribbon-tabs" role="tablist">
+          (ViewRibbonTab) statt der datengetriebenen Item-Gruppen. */}
-        {RIBBON_TABS.map((tt) => (
-          <button
-            key={tt.id}
-            type="button"
-            role="tab"
-            aria-selected={tt.id === tab}
-            className={`ribbon-tab${tt.id === tab ? " active" : ""}`}
-            onClick={() => setTab(tt.id)}
-          >
-            {t(tt.labelKey)}
-          </button>
-        ))}
-      </div>
-
-      {/* Gruppen des aktiven Tabs. Der „Ansichten"-Tab trägt reichen Custom-
-          Inhalt (ViewRibbonTab) statt der datengetriebenen Item-Gruppen. */}
       <div className="ribbon-body">
         {current.id === "views" && props.viewsContent ? (
           props.viewsContent
@@ -127,11 +146,7 @@ export function RibbonBar(props: RibbonBarProps) {
                   <RibbonButton
                     key={item.kind === "tool" ? `t:${item.id}` : `c:${item.name}`}
                     item={item}
-                    activeTool={props.activeTool}
+                    ctx={ctx}
-                    activeCommand={props.activeCommand}
-                    toolsEnabled={props.toolsEnabled}
-                    onSelectTool={props.onSelectTool}
-                    onRunCommand={props.onRunCommand}
                   />
                 ))}
               </div>