Compact circuit list column headers with filter icons

- Replace the "Filtern" text buttons with a funnel icon next to the column
  label; an active filter is highlighted and shows its value count.
- Header labels no longer break inside words (e.g. "Bemerkung"); hyphens
  are non-breaking and a trailing unit moves to its own line, so all
  headers share one height.

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

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

@@ -9,6 +9,7 @@ import {
   Columns3,
   FilterX,
   FolderPlus,
+  Funnel,
   ListOrdered,
   ListPlus,
   ListX,
@@ -268,6 +269,24 @@ function createValuesFromEditPatch(
   );
 }
 
+/**
+ * Header labels break only between words: hyphens become non-breaking and a
+ * trailing unit such as "[kW]" is always shown on its own second line, so
+ * header heights stay uniform.
+ */
+function renderColumnHeaderLabel(label: string) {
+  const match = /^(.*?)s*([[^]]+])$/.exec(label);
+  const name = (match ? match[1] : label).replace(/-/g, "‑");
+  return match ? (
+    <>
+      {name}
+      <span className="header-unit">{match[2]}</span>
+    </>
+  ) : (
+    name
+  );
+}
+
 export function CircuitTreeEditor(props: { projectId: string; circuitListId: string }) {
   /*
     Circuit-tree editor invariant overview:
@@ -3440,7 +3459,9 @@ export function CircuitTreeEditor(props: { projectId: string; circuitListId: str
                         });
                       }}
                     >
-                      <span>{column.label}</span>
+                      <span className="header-label">
+                        {renderColumnHeaderLabel(column.label)}
+                      </span>
                       {sortState?.key === column.key ? (
                         <span className="sort-indicator" aria-label={sortState.direction === "asc" ? "aufsteigend" : "absteigend"}>
                           {sortState.direction === "asc" ? "↑" : "↓"}
@@ -3451,6 +3472,7 @@ export function CircuitTreeEditor(props: { projectId: string; circuitListId: str
                       type="button"
                       className={`header-filter-btn ${(columnFilters[column.key]?.length ?? 0) > 0 ? "active" : ""}`}
                       onClick={() => toggleColumnFilterMenu(column.key)}
+                      aria-label={`${getFullColumnLabel(column)} filtern`}
                       aria-pressed={(columnFilters[column.key]?.length ?? 0) > 0}
                       title={
                         (columnFilters[column.key]?.length ?? 0) > 0
@@ -3458,7 +3480,10 @@ export function CircuitTreeEditor(props: { projectId: string; circuitListId: str
                           : `${getFullColumnLabel(column)} filtern`
                       }
                     >
-                      Filtern{(columnFilters[column.key]?.length ?? 0) > 0 ? ` (${columnFilters[column.key]?.length})` : ""}
+                      <Funnel aria-hidden="true" size={13} strokeWidth={2.2} />
+                      {(columnFilters[column.key]?.length ?? 0) > 0 ? (
+                        <span className="header-filter-count">{columnFilters[column.key]?.length}</span>
+                      ) : null}
                     </button>
                   </div>
                   {openFilterColumn === column.key ? (