feat(260924-i8v): Titel und Serverauswahl der Proxmox-Kachel an der Kachel und in den Einstellungen

- ProxmoxServerPicker gemeinsam fuer Kachel und Einstellungsformular
- Bearbeitungsmodus: entprelltes Titelfeld, Server auswaehlen statt Liste, sofort gespeichert
- ProxmoxWidgetConfigForm unter Einstellungen > Dashboard, Titel-Zusatz in der Kopfzeile

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>

apps/web/src/components/dashboard/widgets/proxmox-widget.tsx

@@ -2,9 +2,10 @@
 
 import Link from 'next/link';
 import { useLocale, useTranslations } from 'next-intl';
-import { type ReactNode, useEffect, useMemo, useState } from 'react';
+import { type ChangeEvent, type ReactNode, useEffect, useMemo, useRef, useState } from 'react';
 import type { WidgetProps } from '@/components/dashboard/widget-registry';
 import { HealthBar } from '@/components/proxmox/HealthBar';
+import { ProxmoxServerPicker } from '@/components/proxmox/proxmox-server-picker';
 import {
   formatAge,
   formatCount,
@@ -15,6 +16,7 @@ import {
   summarizeHealth,
 } from '@/components/proxmox/proxmox-status';
 import { HEALTH_STYLE, METER_TEXT } from '@/components/proxmox/status-styles';
+import { updateWidgetConfig } from '@/lib/dashboard-api';
 // T-I8V-02: aus dem Proxmox-Klienten NUR die Leseabfrage des Zwischenlagers.
 // Die manuelle Abfrage (POST .../poll) gehoert der Modulseite und darf hier
 // nie auftauchen — sonst loeste jede Kachel je Benutzer Live-Abfragen aus.
@@ -31,6 +33,9 @@ import {
 /** Minutentakt: so oft liest die Kachel das Zwischenlager neu. */
 const REFRESH_MS = 60_000;
 
+/** Wie TITLE_DEBOUNCE_MS der Favoriten (quick-260916-iex). */
+const TITLE_DEBOUNCE_MS = 1500;
+
 const ROW_CLASS = 'flex items-center gap-2 rounded-md px-1.5 py-1 text-sm';
 
 /**
@@ -54,15 +59,55 @@ const ROW_CLASS = 'flex items-center gap-2 rounded-md px-1.5 py-1 text-sm';
  *   Ziehen ueber fast die ganze Kachel blockieren.
  * - T-I8V-05: bei „nicht erreichbar“ nur das Zustandswort, keine
  *   Fehlerdetails und keine Adresse — die bleiben auf der Modulseite.
+ * - Bearbeitungsmodus (Aufgabe 3): Titelfeld (entprellt gespeichert) und
+ *   „Server auswählen“ direkt an der Kachel. Grund: Einstellungen >
+ *   Dashboard zeigt nur die Kacheln des ersten Reiters (quick-260923-ad9),
+ *   eine Proxmox-Kachel auf einem weiteren Reiter waere sonst nicht
+ *   einstellbar. Die Auswahl bekommt die schon geladene, ungefilterte
+ *   Liste — kein zusaetzlicher Abruf.
  */
-export function ProxmoxWidget({ config, isEditMode }: WidgetProps) {
+export function ProxmoxWidget({ instanceId, config, isEditMode }: WidgetProps) {
   const t = useTranslations('widgets');
   const tp = useTranslations('proxmox');
   const locale = useLocale();
   const user = useAuthStore((s) => s.user);
   const isAdmin = user?.role === 'ADMIN' || user?.role === 'SUPER_ADMIN';
 
-  const { title, serverIds } = useMemo(() => resolveProxmoxWidgetConfig(config), [config]);
+  // Lokaler Zustand aus `config` initialisiert (wie `viewMode` bei den
+  // Favoriten); Aenderungen gehen per updateWidgetConfig an den Server.
+  const [title, setTitle] = useState(() => resolveProxmoxWidgetConfig(config).title);
+  const [serverIds, setServerIds] = useState(() => resolveProxmoxWidgetConfig(config).serverIds);
+  const [pickerOpen, setPickerOpen] = useState(false);
+  const titleTimerRef = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
+
+  useEffect(() => () => clearTimeout(titleTimerRef.current), []);
+
+  // Verlaesst der Nutzer den Bearbeitungsmodus, schliesst die Auswahl.
+  useEffect(() => {
+    if (!isEditMode) setPickerOpen(false);
+  }, [isEditMode]);
+
+  async function saveConfig(partial: Record<string, unknown>) {
+    try {
+      await updateWidgetConfig(instanceId, partial);
+    } catch {
+      // still: der naechste Ladevorgang zeigt den gespeicherten Stand
+    }
+  }
+
+  function handleTitleChange(e: ChangeEvent<HTMLInputElement>) {
+    const value = e.target.value;
+    setTitle(value);
+    clearTimeout(titleTimerRef.current);
+    titleTimerRef.current = setTimeout(() => {
+      void saveConfig({ title: value });
+    }, TITLE_DEBOUNCE_MS);
+  }
+
+  function handleSelectionChange(next: string[]) {
+    setServerIds(next);
+    void saveConfig({ serverIds: next });
+  }
 
   const [servers, setServers] = useState<ProxmoxServer[] | null>(null);
   // Fehler als Flag, nicht als Text: `t` gehoert nicht in die Effekt-
@@ -110,16 +155,63 @@ export function ProxmoxWidget({ config, isEditMode }: WidgetProps) {
   const summary = useMemo(() => healthSummary(counts), [counts]);
   const sorted = useMemo(() => sortServersByHealth(selection.servers, now), [selection, now]);
 
+  const canChoose = servers !== null && servers.length > 0;
+  const showPicker = isEditMode && pickerOpen && canChoose;
+
   const trimmedTitle = title.trim();
-  const header = trimmedTitle !== '' && (
-    <div className="shrink-0 border-b border-border px-2.5 py-1.5">
-      <h2 className="truncate text-sm font-semibold text-foreground">{trimmedTitle}</h2>
+  let header: ReactNode = null;
+  if (isEditMode) {
+    header = (
+      <div className="flex shrink-0 items-center gap-2 border-b border-border px-2.5 py-1.5">
+        <input
+          type="text"
+          className="widgetNoDrag min-w-0 flex-1 bg-transparent text-sm font-semibold text-foreground outline-none placeholder:text-muted-foreground"
+          value={title}
+          onChange={handleTitleChange}
+          placeholder={t('proxmox.titlePlaceholder')}
+          aria-label={t('proxmox.titleLabel')}
+        />
+        {canChoose && (
+          <button
+            type="button"
+            data-no-drag=""
+            aria-expanded={pickerOpen}
+            onClick={() => setPickerOpen((open) => !open)}
+            className="shrink-0 rounded-sm text-xs font-medium text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+          >
+            {t('proxmox.chooseServers')}
+          </button>
+        )}
+      </div>
+    );
+  } else if (trimmedTitle !== '') {
+    header = (
+      <div className="shrink-0 border-b border-border px-2.5 py-1.5">
+        <h2 className="truncate text-sm font-semibold text-foreground">{trimmedTitle}</h2>
+      </div>
+    );
+  }
+
+  // Die Auswahl ersetzt den Listenbereich; die Huelle traegt `widgetNoDrag`,
+  // damit ein Klick auf eine Beschriftung kein Ziehen der Kachel startet.
+  const picker = showPicker && (
+    <div className="widgetNoDrag min-h-0 flex-1 overflow-y-auto">
+      <ProxmoxServerPicker
+        servers={servers ?? []}
+        selectedIds={serverIds}
+        onChange={handleSelectionChange}
+      />
     </div>
   );
 
   function frame(body: ReactNode, bodyClassName = 'gap-2') {
     return (
-      <div className="flex h-full flex-col overflow-hidden">
+      <div
+        data-testid="proxmox-widget"
+        // pt-5: die 20 px hohe Griffleiste des Wrappers verdeckt sonst das
+        // Titelfeld (vgl. top-6 im XFrame).
+        className={`flex h-full flex-col overflow-hidden${isEditMode ? ' pt-5' : ''}`}
+      >
         {header}
         <div className={`flex min-h-0 flex-1 flex-col p-2.5 ${bodyClassName}`}>{body}</div>
       </div>
@@ -163,7 +255,10 @@ export function ProxmoxWidget({ config, isEditMode }: WidgetProps) {
     return centered(t('proxmox.empty'), settingsHint);
   }
 
-  if (selection.selectionGone) return centered(t('proxmox.selectionGone'));
+  if (selection.selectionGone) {
+    // Mit offener Auswahl kann der Nutzer das gleich beheben.
+    return picker ? frame(picker) : centered(t('proxmox.selectionGone'));
+  }
 
   const summaryText = summary.allOk
     ? t('proxmox.allOk')
@@ -242,28 +337,30 @@ export function ProxmoxWidget({ config, isEditMode }: WidgetProps) {
       >
         {summaryText}
       </p>
-      <ul
-        data-testid="proxmox-list"
-        className="-mx-1 min-h-0 flex-1 overflow-y-auto [@container(max-height:7.5rem)]:hidden @max-[8rem]:hidden"
-      >
-        {sorted.map((server) => {
-          const health = serverHealth(server, now);
-          return (
-            <li key={server.id} data-testid="proxmox-row" data-server-name={server.name}>
-              {isEditMode ? (
-                <div className={ROW_CLASS}>{rowContent(server, health)}</div>
-              ) : (
-                <Link
-                  href="/modules/proxmox"
-                  className={`${ROW_CLASS} transition-colors hover:bg-muted/60 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring`}
-                >
-                  {rowContent(server, health)}
-                </Link>
-              )}
-            </li>
-          );
-        })}
-      </ul>
+      {picker || (
+        <ul
+          data-testid="proxmox-list"
+          className="-mx-1 min-h-0 flex-1 overflow-y-auto [@container(max-height:7.5rem)]:hidden @max-[8rem]:hidden"
+        >
+          {sorted.map((server) => {
+            const health = serverHealth(server, now);
+            return (
+              <li key={server.id} data-testid="proxmox-row" data-server-name={server.name}>
+                {isEditMode ? (
+                  <div className={ROW_CLASS}>{rowContent(server, health)}</div>
+                ) : (
+                  <Link
+                    href="/modules/proxmox"
+                    className={`${ROW_CLASS} transition-colors hover:bg-muted/60 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring`}
+                  >
+                    {rowContent(server, health)}
+                  </Link>
+                )}
+              </li>
+            );
+          })}
+        </ul>
+      )}
     </>,
   );
 }