Use icon buttons in the circuit list editor

- New IconButton/IconButtonSeparator component based on lucide-react.
- Toolbar: icon plus text, grouped into history, view and insert blocks.
- Group headers: compact icons for add circuit, upstream fuse (VS), group
  RCD (FI), edit, move up/down, renumber and delete; the header no longer
  overflows the grid.
- Rows: add device, delete circuit (trash) and delete device (ListX).
- The previous German labels remain accessible names and tooltips;
  destructive actions highlight in the danger color.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

AGENTS.md

@@ -167,6 +167,13 @@ Keyboard behavior:
 
 Support Ctrl+Plus and Ctrl+Shift+Plus for insertion.
 
+Editor actions use `IconButton` (`src/frontend/components/icon-button.tsx`,
+`lucide-react` icons). The German action text is always the accessible name and
+tooltip; the toolbar shows icon plus text, group headers and rows show icons
+only, separated into logical blocks with `IconButtonSeparator`. Destructive
+actions use `variant="danger"` (trash icon for circuits and groups, `ListX` for
+removing a device row).
+
 ## Bootstrap / Styling Rule
 
 Bootstrap may be used for the general application UI, such as navigation, page layout, buttons, forms, cards, alerts and modals.

src/app/globals.css

@@ -487,6 +487,54 @@ a.kpi:hover {
   opacity: 0.45;
 }
 
+/* Icon buttons (circuit list editor toolbar, group and row actions) */
+.icon-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.35rem;
+  line-height: 1.2;
+  cursor: pointer;
+  transition: color 0.12s ease, border-color 0.12s ease, background-color 0.12s ease;
+}
+
+.icon-button svg {
+  flex: none;
+}
+
+.icon-button:disabled {
+  cursor: not-allowed;
+}
+
+.icon-button:not(:disabled):hover {
+  border-color: var(--accent-blue);
+  color: var(--accent-blue);
+}
+
+.icon-button-danger:not(:disabled):hover {
+  border-color: var(--color-danger);
+  background: var(--color-danger-bg);
+  color: var(--color-danger);
+}
+
+.editor-toolbar .project-device-drawer-toggle:not(:disabled):hover {
+  color: #fff;
+  filter: brightness(1.08);
+}
+
+.icon-button-text {
+  font-size: 0.7rem;
+  font-weight: 700;
+  letter-spacing: 0.02em;
+}
+
+.icon-button-separator {
+  align-self: stretch;
+  width: 1px;
+  margin: 0.1rem 0.15rem;
+  background: var(--panel-border-strong);
+}
+
 .editor-toolbar .project-device-drawer-toggle {
   border-color: var(--accent-blue);
   background: var(--accent-blue);
@@ -1153,7 +1201,20 @@ a.kpi:hover {
 
 .tree-grid .section-actions {
   display: flex;
-  gap: 0.35rem;
+  align-items: center;
+  gap: 0.25rem;
+}
+
+.tree-grid .section-actions .icon-button,
+.tree-grid .action-cell .icon-button {
+  min-width: 1.75rem;
+  min-height: 1.6rem;
+  padding: 0.15rem 0.3rem;
+}
+
+.tree-grid .section-actions .icon-button:disabled,
+.tree-grid .action-cell .icon-button:disabled {
+  opacity: 0.35;
 }
 
 .tree-grid .section-actions button {
@@ -1265,7 +1326,7 @@ a.kpi:hover {
 
 .tree-grid .action-cell {
   display: flex;
-  gap: 0.3rem;
+  gap: 0.25rem;
 }
 
 .tree-grid .action-cell button {

src/frontend/components/circuit-tree-editor.tsx

@@ -1,6 +1,28 @@
 "use client";
 
 import { DragEvent, KeyboardEvent, useEffect, useMemo, useRef, useState } from "react";
+import {
+  ArrowDown,
+  ArrowDown01,
+  ArrowUp,
+  Check,
+  Columns3,
+  FilterX,
+  FolderPlus,
+  ListOrdered,
+  ListPlus,
+  ListX,
+  PackagePlus,
+  PanelRightClose,
+  PanelRightOpen,
+  Pencil,
+  Plus,
+  Redo2,
+  ShieldPlus,
+  Trash2,
+  Undo2,
+} from "lucide-react";
+import { IconButton, IconButtonSeparator } from "./icon-button";
 import {
   inferProjectDeviceSectionKey,
   isProjectDevicePlacementValid,
@@ -2995,32 +3017,37 @@ export function CircuitTreeEditor(props: { projectId: string; circuitListId: str
     return (
       <div className="tree-editor-shell">
         <div className="editor-toolbar">
-          <button
-            type="button"
-            onClick={() => void handleUndo()}
+          <IconButton
             disabled={!historyState || historyState.undoDepth === 0 || historyBusy || isSaving}
-          >
-            Rückgängig
-          </button>
-          <button
-            type="button"
-            onClick={() => void handleRedo()}
+            icon={Undo2}
+            label="Rückgängig"
+            onClick={() => void handleUndo()}
+            showLabel
+          />
+          <IconButton
             disabled={!historyState || historyState.redoDepth === 0 || historyBusy || isSaving}
-          >
-            Wiederholen
-          </button>
-        <button
-          type="button"
-          onClick={clearSortAndFilters}
-          disabled={!Boolean(sortState) && !hasActiveFilters}
-        >
-          Sortierung/Filter zurücksetzen
-        </button>
-        <button type="button" onClick={toggleColumnSettingsMenu} aria-expanded={isColumnMenuOpen}>
-          Spalten
-        </button>
-        {renderColumnSettingsMenu("col-empty")}
-      </div>
+            icon={Redo2}
+            label="Wiederholen"
+            onClick={() => void handleRedo()}
+            showLabel
+          />
+          <IconButtonSeparator />
+          <IconButton
+            ariaExpanded={isColumnMenuOpen}
+            icon={Columns3}
+            label="Spalten"
+            onClick={toggleColumnSettingsMenu}
+            showLabel
+          />
+          <IconButton
+            disabled={!Boolean(sortState) && !hasActiveFilters}
+            icon={FilterX}
+            label="Sortierung/Filter zurücksetzen"
+            onClick={clearSortAndFilters}
+            showLabel
+          />
+          {renderColumnSettingsMenu("col-empty")}
+        </div>
         {renderActiveViewSummary()}
         {renderDistributionPowerSummary()}
         {error ? (
@@ -3140,82 +3167,90 @@ export function CircuitTreeEditor(props: { projectId: string; circuitListId: str
         />
       ) : null}
       <div className="editor-toolbar">
-        <button
-          type="button"
-          onClick={() => void handleUndo()}
+        <IconButton
           disabled={!historyState || historyState.undoDepth === 0 || historyBusy || isSaving}
+          icon={Undo2}
+          label="Rückgängig"
+          onClick={() => void handleUndo()}
+          showLabel
           title={
             historyState?.undoDepth
               ? `${historyState.undoDepth} Änderung(en) können rückgängig gemacht werden.`
               : undefined
           }
-        >
-          Rückgängig
-        </button>
-        <button
-          type="button"
-          onClick={() => void handleRedo()}
+        />
+        <IconButton
           disabled={!historyState || historyState.redoDepth === 0 || historyBusy || isSaving}
+          icon={Redo2}
+          label="Wiederholen"
+          onClick={() => void handleRedo()}
+          showLabel
           title={
             historyState?.redoDepth
               ? `${historyState.redoDepth} Änderung(en) können wiederholt werden.`
               : undefined
           }
-        >
-          Wiederholen
-        </button>
+        />
+        <IconButtonSeparator />
         {isSortedView ? (
-          <button
-            type="button"
-            onClick={() => void handleApplySortedOrder()}
+          <IconButton
             disabled={hasActiveFilters || isSaving || historyBusy}
+            icon={Check}
+            label="Sortierung übernehmen"
+            onClick={() => void handleApplySortedOrder()}
+            showLabel
             title={hasActiveFilters ? "Vor dem Übernehmen der Sortierung zuerst die Filter zurücksetzen." : undefined}
-          >
-            Sortierung übernehmen
-          </button>
+          />
         ) : null}
-        <button type="button" onClick={toggleColumnSettingsMenu} aria-expanded={isColumnMenuOpen}>
-          Spalten
-        </button>
-        <button
-          aria-controls="project-device-drawer"
-          aria-expanded={isProjectDeviceDrawerOpen}
-          className="project-device-drawer-toggle"
-          type="button"
-          onClick={() =>
-            setIsProjectDeviceDrawerOpen((current) => !current)
-          }
-        >
-          {isProjectDeviceDrawerOpen
-            ? "Projektgeräte schließen"
-            : `Projektgeräte öffnen (${projectDevices.length})`}
-        </button>
-        <button
-          type="button"
+        <IconButton
+          ariaExpanded={isColumnMenuOpen}
+          icon={Columns3}
+          label="Spalten"
+          onClick={toggleColumnSettingsMenu}
+          showLabel
+        />
+        <IconButton
+          disabled={!isSortedView && !hasActiveFilters}
+          icon={FilterX}
+          label="Sortierung/Filter zurücksetzen"
+          onClick={clearSortAndFilters}
+          showLabel
+        />
+        <IconButtonSeparator />
+        <IconButton
           disabled={isSaving || historyBusy}
+          icon={FolderPlus}
+          label="Stromkreisgruppe hinzufügen"
+          onClick={() => setCircuitGroupEditorIntent({ kind: "create" })}
+          showLabel
+        />
+        <IconButton
+          disabled={isSaving || historyBusy}
+          icon={PackagePlus}
+          label="Verteilergerät hinzufügen"
           onClick={() =>
             setComponentEditorIntent({
               kind: "create",
               role: "auxiliary",
             })
           }
-        >
-          Verteilergerät hinzufügen
-        </button>
-        <button
-          type="button"
-          disabled={isSaving || historyBusy}
-          onClick={() => setCircuitGroupEditorIntent({ kind: "create" })}
-        >
-          Stromkreisgruppe hinzufügen
-        </button>
-        <button
-          type="button"
-          onClick={clearSortAndFilters}
-          disabled={!isSortedView && !hasActiveFilters}
-        >
-          Sortierung/Filter zurücksetzen
-        </button>
+          showLabel
+        />
+        <IconButton
+          ariaControls="project-device-drawer"
+          ariaExpanded={isProjectDeviceDrawerOpen}
+          className="project-device-drawer-toggle"
+          icon={isProjectDeviceDrawerOpen ? PanelRightClose : PanelRightOpen}
+          label={
+            isProjectDeviceDrawerOpen
+              ? "Projektgeräte schließen"
+              : `Projektgeräte öffnen (${projectDevices.length})`
+          }
+          onClick={() =>
+            setIsProjectDeviceDrawerOpen((current) => !current)
+          }
+          showLabel
+        />
         {renderColumnSettingsMenu("col")}
       </div>
       {renderActiveViewSummary()}
@@ -3717,105 +3752,21 @@ export function CircuitTreeEditor(props: { projectId: string; circuitListId: str
                           </span>
                         </div>
                         <div className="section-actions">
-                          <button
-                            type="button"
-                            tabIndex={-1}
-                            disabled={!section.category || !section.groupNumber}
-                            onClick={() =>
-                              setCircuitGroupEditorIntent({
-                                kind: "edit",
-                                section,
-                              })
-                            }
-                          >
-                            Gruppe bearbeiten
-                          </button>
-                          <button
-                            type="button"
-                            tabIndex={-1}
-                            disabled={
-                              isSaving ||
-                              !buildCircuitGroupReorderAssignments(
-                                data.sections,
-                                section.id,
-                                -1
-                              )
-                            }
-                            onClick={() =>
-                              void handleMoveCircuitGroup(section.id, -1)
-                            }
-                            title="Innerhalb derselben Kategorie nach oben verschieben"
-                          >
-                            Gruppe nach oben
-                          </button>
-                          <button
-                            type="button"
-                            tabIndex={-1}
-                            disabled={
-                              isSaving ||
-                              !buildCircuitGroupReorderAssignments(
-                                data.sections,
-                                section.id,
-                                1
-                              )
-                            }
-                            onClick={() =>
-                              void handleMoveCircuitGroup(section.id, 1)
-                            }
-                            title="Innerhalb derselben Kategorie nach unten verschieben"
-                          >
-                            Gruppe nach unten
-                          </button>
-                          <button
-                            type="button"
-                            tabIndex={-1}
-                            disabled={
-                              isSaving ||
-                              hasActiveSortOrFilter ||
-                              !section.category ||
-                              !canRenumberCircuitGroups(
-                                data.sections,
-                                section.category
-                              )
-                            }
-                            onClick={() =>
-                              section.category
-                                ? void handleRenumberCircuitGroups(
-                                    section.category
-                                  )
-                                : undefined
-                            }
-                            title={
-                              hasActiveSortOrFilter
-                                ? "Vor der Gruppenneunummerierung Sortierung und Filter zurücksetzen."
-                                : "Alle Gruppen dieser Kategorie gemäß ihrer Reihenfolge neu nummerieren"
-                            }
-                          >
-                            Gruppen-BMK neu nummerieren
-                          </button>
-                          <button
-                            type="button"
-                            tabIndex={-1}
+                          <IconButton
                             disabled={isSaving}
-                            title={
-                              canDeleteCircuitGroup(section)
-                                ? "Leere Stromkreisgruppe entfernen"
-                                : "Befüllte Stromkreisgruppe mit vollständiger Warnung entfernen"
-                            }
-                            onClick={() =>
-                              void handleDeleteCircuitGroup(section)
-                            }
-                          >
-                            Gruppe entfernen
-                          </button>
-                          <button
-                            type="button"
+                            icon={Plus}
+                            label="Stromkreis hinzufügen"
+                            onClick={() => void handleAddReserveCircuit(section.id)}
                             tabIndex={-1}
+                          />
+                          <IconButton
                             disabled={
                               hasUpstreamProtection ||
                               !section.category ||
                               !section.groupNumber
                             }
+                            icon={ShieldPlus}
+                            label="Vorsicherung hinzufügen"
                             onClick={() =>
                               setComponentEditorIntent({
                                 kind: "create",
@@ -3828,17 +3779,18 @@ export function CircuitTreeEditor(props: { projectId: string; circuitListId: str
                                   ),
                               })
                             }
-                          >
-                            Vorsicherung hinzufügen
-                          </button>
-                          <button
-                            type="button"
                             tabIndex={-1}
+                          >
+                            <span className="icon-button-text">VS</span>
+                          </IconButton>
+                          <IconButton
                             disabled={
                               hasGroupRcd ||
                               !section.category ||
                               !section.groupNumber
                             }
+                            icon={ShieldPlus}
+                            label="Gruppen-FI hinzufügen"
                             onClick={() =>
                               setComponentEditorIntent({
                                 kind: "create",
@@ -3851,26 +3803,112 @@ export function CircuitTreeEditor(props: { projectId: string; circuitListId: str
                                   ),
                               })
                             }
-                          >
-                            Gruppen-FI hinzufügen
-                          </button>
-                          <button
-                            type="button"
                             tabIndex={-1}
-                            disabled={isSaving}
-                            onClick={() => void handleAddReserveCircuit(section.id)}
                           >
-                            Stromkreis hinzufügen
-                          </button>
-                          <button
-                            type="button"
+                            <span className="icon-button-text">FI</span>
+                          </IconButton>
+                          <IconButtonSeparator />
+                          <IconButton
+                            disabled={!section.category || !section.groupNumber}
+                            icon={Pencil}
+                            label="Gruppe bearbeiten"
+                            onClick={() =>
+                              setCircuitGroupEditorIntent({
+                                kind: "edit",
+                                section,
+                              })
+                            }
                             tabIndex={-1}
+                          />
+                          <IconButton
+                            disabled={
+                              isSaving ||
+                              !buildCircuitGroupReorderAssignments(
+                                data.sections,
+                                section.id,
+                                -1
+                              )
+                            }
+                            icon={ArrowUp}
+                            label="Gruppe nach oben"
+                            onClick={() =>
+                              void handleMoveCircuitGroup(section.id, -1)
+                            }
+                            tabIndex={-1}
+                            title="Gruppe nach oben (innerhalb derselben Kategorie)"
+                          />
+                          <IconButton
+                            disabled={
+                              isSaving ||
+                              !buildCircuitGroupReorderAssignments(
+                                data.sections,
+                                section.id,
+                                1
+                              )
+                            }
+                            icon={ArrowDown}
+                            label="Gruppe nach unten"
+                            onClick={() =>
+                              void handleMoveCircuitGroup(section.id, 1)
+                            }
+                            tabIndex={-1}
+                            title="Gruppe nach unten (innerhalb derselben Kategorie)"
+                          />
+                          <IconButtonSeparator />
+                          <IconButton
                             disabled={hasActiveSortOrFilter || isSaving}
+                            icon={ArrowDown01}
+                            label="Bereich neu nummerieren"
                             onClick={() => void handleRenumberSection(section.id)}
-                            title={hasActiveSortOrFilter ? "Vor der Neunummerierung Sortierung und Filter zurücksetzen." : undefined}
-                          >
-                            Bereich neu nummerieren
-                          </button>
+                            tabIndex={-1}
+                            title={
+                              hasActiveSortOrFilter
+                                ? "Vor der Neunummerierung Sortierung und Filter zurücksetzen."
+                                : "Stromkreise dieser Gruppe neu nummerieren"
+                            }
+                          />
+                          <IconButton
+                            disabled={
+                              isSaving ||
+                              hasActiveSortOrFilter ||
+                              !section.category ||
+                              !canRenumberCircuitGroups(
+                                data.sections,
+                                section.category
+                              )
+                            }
+                            icon={ListOrdered}
+                            label="Gruppen-BMK neu nummerieren"
+                            onClick={() =>
+                              section.category
+                                ? void handleRenumberCircuitGroups(
+                                    section.category
+                                  )
+                                : undefined
+                            }
+                            tabIndex={-1}
+                            title={
+                              hasActiveSortOrFilter
+                                ? "Vor der Gruppenneunummerierung Sortierung und Filter zurücksetzen."
+                                : "Gruppen-BMK: alle Gruppen dieser Kategorie gemäß ihrer Reihenfolge neu nummerieren"
+                            }
+                          />
+                          <IconButtonSeparator />
+                          <IconButton
+                            disabled={isSaving}
+                            icon={Trash2}
+                            label="Gruppe entfernen"
+                            onClick={() =>
+                              void handleDeleteCircuitGroup(section)
+                            }
+                            tabIndex={-1}
+                            title={
+                              canDeleteCircuitGroup(section)
+                                ? "Leere Stromkreisgruppe entfernen"
+                                : "Befüllte Stromkreisgruppe entfernen (mit Warnung)"
+                            }
+                            variant="danger"
+                          />
                         </div>
                       </div>
                       {dropIntent?.kind === "new-circuit" && dropIntent.sectionId === section.id ? (
@@ -4467,28 +4505,32 @@ export function CircuitTreeEditor(props: { projectId: string; circuitListId: str
                   >
                     {row.circuit && row.rowType !== "deviceRow" ? (
                       <>
-                        <button
-                          type="button"
-                          tabIndex={-1}
+                        <IconButton
                           disabled={isSaving}
+                          icon={ListPlus}
+                          label="Manuelles Gerät hinzufügen"
                           onClick={() => void handleAddManualDevice(row.circuit!, row.sectionId)}
-                        >
-                          Manuelles Gerät hinzufügen
-                        </button>
-                        <button
-                          type="button"
                           tabIndex={-1}
+                        />
+                        <IconButton
                           disabled={isSaving}
+                          icon={Trash2}
+                          label="Stromkreis löschen"
                           onClick={() => void handleDeleteCircuit(row.circuit!.id)}
-                        >
-                          Stromkreis löschen
-                        </button>
+                          tabIndex={-1}
+                          variant="danger"
+                        />
                       </>
                     ) : null}
                     {row.device ? (
-                      <button type="button" tabIndex={-1} disabled={isSaving} onClick={() => void handleDeleteDevice(row.device!.id)}>
-                        Gerät löschen
-                      </button>
+                      <IconButton
+                        disabled={isSaving}
+                        icon={ListX}
+                        label="Gerät löschen"
+                        onClick={() => void handleDeleteDevice(row.device!.id)}
+                        tabIndex={-1}
+                        variant="danger"
+                      />
                     ) : null}
                     {dropIntent?.kind === "new-circuit" && row.rowType === "placeholder" && dropIntent.sectionId === row.sectionId ? (
                       <span className="drop-hint">

src/frontend/components/icon-button.tsx

@@ -0,0 +1,59 @@
+"use client";
+
+import type { LucideIcon } from "lucide-react";
+import type { ReactNode } from "react";
+
+/**
+ * Compact editor button with a lucide icon. `label` is always the accessible
+ * name; it is also the tooltip unless a more specific `title` is given.
+ * With `showLabel` the label (or `children`) is rendered next to the icon.
+ */
+export function IconButton({
+  icon: Icon,
+  label,
+  title,
+  onClick,
+  disabled,
+  variant = "default",
+  showLabel = false,
+  children,
+  className,
+  tabIndex,
+  ariaExpanded,
+  ariaControls,
+}: {
+  icon: LucideIcon;
+  label: string;
+  title?: string;
+  onClick: () => void;
+  disabled?: boolean;
+  variant?: "default" | "danger" | "primary";
+  showLabel?: boolean;
+  children?: ReactNode;
+  className?: string;
+  tabIndex?: number;
+  ariaExpanded?: boolean;
+  ariaControls?: string;
+}) {
+  return (
+    <button
+      aria-controls={ariaControls}
+      aria-expanded={ariaExpanded}
+      aria-label={showLabel ? undefined : label}
+      className={`icon-button icon-button-${variant}${className ? ` ${className}` : ""}`}
+      disabled={disabled}
+      onClick={onClick}
+      tabIndex={tabIndex}
+      title={title ?? label}
+      type="button"
+    >
+      <Icon aria-hidden="true" size={15} strokeWidth={2} />
+      {showLabel ? <span>{children ?? label}</span> : children}
+    </button>
+  );
+}
+
+/** Thin vertical divider between groups of icon buttons. */
+export function IconButtonSeparator() {
+  return <span aria-hidden="true" className="icon-button-separator" />;
+}