Native Selects auf einheitliche Dropdown-Komponente umgestellt

Mehrere Stellen (ResourceManager SelectField + Material-Browser,
ImportDialog, AttributesPanel, SitePanel, ToolsPanel,
DisplayModeSelect, RichTextEditor) nutzten noch native <select>, deren
Optionsliste vom Betriebssystem gerendert wird und optisch nicht zur
eigenen Dropdown-Komponente (dunkles Kontextmenü-Popover) passt. Jetzt
durchgaengig dieselbe Optik.

src/panels/AttributesPanel.tsx

@@ -28,6 +28,7 @@ import { formatM } from "../model/types";
 import { PEN_WEIGHTS } from "../model/types";
 import type { AttributeSource } from "../model/types";
 import { usePanelHost } from "./host";
+import { Dropdown } from "../ui/Dropdown";
 
 /** UI-Zustand des 3-Optionen-Quellen-Dropdowns (nicht 1:1 das Modell-Feld:
  *  „custom" ist abgeleitet aus „ist ein expliziter Wert gesetzt?", nicht
@@ -77,17 +78,17 @@ export function AttributesPanel() {
     ui: UiSource,
     onChange: (next: UiSource) => void,
   ) => (
-    <select
-      className="attr-select"
-      style={{ width: 104 }}
+    <Dropdown
+      width={104}
       value={ui}
       disabled={!editable}
-      onChange={(e) => onChange(e.target.value as UiSource)}
-    >
-      <option value="layer">{t("attr.source.layer")}</option>
-      <option value="object">{t("attr.source.object")}</option>
-      <option value="custom">{t("attr.source.custom")}</option>
-    </select>
+      onChange={(v) => onChange(v as UiSource)}
+      options={[
+        { value: "layer", label: t("attr.source.layer") },
+        { value: "object", label: t("attr.source.object") },
+        { value: "custom", label: t("attr.source.custom") },
+      ]}
+    />
   );
 
   // Farb-Swatch-Eingabe für „eigener Wert" (Vordergrund/Hintergrund). Erscheint
@@ -246,19 +247,15 @@ export function AttributesPanel() {
           fillEditable,
           hatchUi,
           onHatchSourceChange,
-          <select
-            className="attr-select"
-            style={{ width: 104 }}
+          <Dropdown
+            width={104}
             value={sel.fillHatchId ?? ""}
-            onChange={(e) => host.onSetSelectionFill(e.target.value || null)}
-          >
-            <option value="">{t("attr.none")}</option>
-            {project.hatches.map((h) => (
-              <option key={h.id} value={h.id}>
-                {h.name}
-              </option>
-            ))}
-          </select>,
+            onChange={(v) => host.onSetSelectionFill(v || null)}
+            options={[
+              { value: "", label: t("attr.none") },
+              ...project.hatches.map((h) => ({ value: h.id, label: h.name })),
+            ]}
+          />,
         )}
       </div>
 

src/panels/DisplayModeSelect.tsx

@@ -10,6 +10,7 @@
 
 import type { DisplayMode } from "./types";
 import { t } from "../i18n";
+import { Dropdown } from "../ui/Dropdown";
 
 /**
  * Beschriftungs-Keys je Modus (Werte englisch, vgl. types.ts) — exakt die
@@ -41,18 +42,12 @@ export function DisplayModeSelect({
 }) {
   const label = title ?? t("display.title");
   return (
-    <select
-      className="display-mode"
+    <Dropdown
+      triggerClassName="display-mode"
       value={value}
       title={label}
-      aria-label={label}
-      onChange={(e) => onChange(e.target.value as DisplayMode)}
-    >
-      {MODE_OPTIONS.map((o) => (
-        <option key={o.value} value={o.value}>
-          {t(o.labelKey)}
-        </option>
-      ))}
-    </select>
+      onChange={(v) => onChange(v as DisplayMode)}
+      options={MODE_OPTIONS.map((o) => ({ value: o.value, label: t(o.labelKey) }))}
+    />
   );
 }

src/panels/SitePanel.tsx

@@ -17,6 +17,7 @@ import type { TranslationKey } from "../i18n";
 import { usePanelHost } from "./host";
 import type { ContextObject } from "../model/types";
 import { ContextImportDialog } from "../ui/ContextImportDialog";
+import { Dropdown } from "../ui/Dropdown";
 
 /** Typ-spezifisches Badge-Label (i18n-Key) je Kontext-Objekt-Art. */
 function typeBadgeKey(obj: ContextObject): TranslationKey {
@@ -85,18 +86,12 @@ export function SitePanel() {
       {contourSets.length > 0 && (
         <div className="site-terrain-row">
           {contourSets.length > 1 ? (
-            <select
-              className="site-select"
+            <Dropdown
               value={effectiveSet}
-              onChange={(e) => setSelectedSet(e.target.value)}
-              aria-label={t("site.contourSet")}
-            >
-              {contourSets.map((cs) => (
-                <option key={cs.id} value={cs.id}>
-                  {cs.name}
-                </option>
-              ))}
-            </select>
+              onChange={(v) => setSelectedSet(v)}
+              title={t("site.contourSet")}
+              options={contourSets.map((cs) => ({ value: cs.id, label: cs.name }))}
+            />
           ) : (
             <span className="site-terrain-src" title={t("site.contourSet")}>
               {contourSets[0].name}

src/panels/ToolsPanel.tsx

@@ -13,6 +13,7 @@ import { t } from "../i18n";
 import { usePanelHost } from "./host";
 import type { ToolId } from "./host";
 import { TOOL_ORDER, getTool } from "../tools/tools";
+import { Dropdown } from "../ui/Dropdown";
 
 // ── Icons ──────────────────────────────────────────────────────────────────
 // Keine echten Asset-Icons vorhanden: schlichte Inline-SVG-Glyphen je Werkzeug
@@ -153,17 +154,15 @@ export function ToolsPanel() {
       {host.activeTool === "wall" && (
         <label className="tools-field">
           <span>{t("tool.wallType")}</span>
-          <select
+          <Dropdown
             value={host.activeWallTypeId}
             disabled={!host.toolsEnabled}
-            onChange={(e) => host.onActiveWallTypeId(e.target.value)}
-          >
-            {host.project.wallTypes.map((wt) => (
-              <option key={wt.id} value={wt.id}>
-                {wt.name}
-              </option>
-            ))}
-          </select>
+            onChange={(v) => host.onActiveWallTypeId(v)}
+            options={host.project.wallTypes.map((wt) => ({
+              value: wt.id,
+              label: wt.name,
+            }))}
+          />
         </label>
       )}
 
@@ -174,17 +173,15 @@ export function ToolsPanel() {
       {host.activeTool === "ceiling" && (
         <label className="tools-field">
           <span>{t("tool.ceilingType")}</span>
-          <select
+          <Dropdown
             value={host.activeWallTypeId}
             disabled={!host.toolsEnabled}
-            onChange={(e) => host.onActiveWallTypeId(e.target.value)}
-          >
-            {host.project.wallTypes.map((wt) => (
-              <option key={wt.id} value={wt.id}>
-                {wt.name}
-              </option>
-            ))}
-          </select>
+            onChange={(v) => host.onActiveWallTypeId(v)}
+            options={host.project.wallTypes.map((wt) => ({
+              value: wt.id,
+              label: wt.name,
+            }))}
+          />
         </label>
       )}