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 !== '' && (
+  let header: ReactNode = null;
-    <div className="shrink-0 border-b border-border px-2.5 py-1.5">
+  if (isEditMode) {
-      <h2 className="truncate text-sm font-semibold text-foreground">{trimmedTitle}</h2>
+    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
+      {picker || (
-        data-testid="proxmox-list"
+        <ul
-        className="-mx-1 min-h-0 flex-1 overflow-y-auto [@container(max-height:7.5rem)]:hidden @max-[8rem]:hidden"
+          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);
+          {sorted.map((server) => {
-          return (
+            const health = serverHealth(server, now);
-            <li key={server.id} data-testid="proxmox-row" data-server-name={server.name}>
+            return (
-              {isEditMode ? (
+              <li key={server.id} data-testid="proxmox-row" data-server-name={server.name}>
-                <div className={ROW_CLASS}>{rowContent(server, health)}</div>
+                {isEditMode ? (
-              ) : (
+                  <div className={ROW_CLASS}>{rowContent(server, health)}</div>
-                <Link
+                ) : (
-                  href="/modules/proxmox"
+                  <Link
-                  className={`${ROW_CLASS} transition-colors hover:bg-muted/60 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring`}
+                    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>
+                    {rowContent(server, health)}
-              )}
+                  </Link>
-            </li>
+                )}
-          );
+              </li>
-        })}
+            );
-      </ul>
+          })}
+        </ul>
+      )}
     </>,
   );
 }

apps/web/src/components/proxmox/proxmox-server-picker.tsx

@@ -0,0 +1,65 @@
+'use client';
+
+import { useTranslations } from 'next-intl';
+import { useId, useMemo } from 'react';
+import type { ProxmoxServer } from '@/lib/proxmox-api';
+
+interface ProxmoxServerPickerProps {
+  servers: readonly ProxmoxServer[];
+  selectedIds: readonly string[];
+  onChange: (next: string[]) => void;
+}
+
+/**
+ * Serverauswahl der Proxmox-Kachel (quick-260924-i8v) — gemeinsam fuer die
+ * Kachel im Bearbeitungsmodus und das Formular unter Einstellungen >
+ * Dashboard. Keine eigene Datenabfrage: die Liste wird hereingereicht.
+ *
+ * `onChange` liefert die Kennungen in Listenreihenfolge (nach `position`)
+ * und nur fuer vorhandene Server — jede Aenderung raeumt so Kennungen
+ * geloeschter Server mit auf. Keine Auswahl heisst: alle Server.
+ */
+export function ProxmoxServerPicker({ servers, selectedIds, onChange }: ProxmoxServerPickerProps) {
+  const t = useTranslations('widgets');
+  const tp = useTranslations('proxmox');
+  const baseId = useId();
+
+  const ordered = useMemo(() => [...servers].sort((a, b) => a.position - b.position), [servers]);
+
+  function toggle(id: string, checked: boolean) {
+    const next = ordered
+      .map((s) => s.id)
+      .filter((sid) => (sid === id ? checked : selectedIds.includes(sid)));
+    onChange(next);
+  }
+
+  return (
+    <fieldset className="min-w-0 space-y-1.5">
+      <legend className="text-sm font-medium text-foreground">{t('proxmox.serversLabel')}</legend>
+      <p className="text-xs text-muted-foreground">{t('proxmox.serversHint')}</p>
+      <ul className="space-y-0.5">
+        {ordered.map((server, index) => {
+          const inputId = `${baseId}-${index}`;
+          return (
+            <li key={server.id} className="flex items-center gap-2">
+              <input
+                id={inputId}
+                type="checkbox"
+                value={server.id}
+                checked={selectedIds.includes(server.id)}
+                onChange={(e) => toggle(server.id, e.target.checked)}
+                className="h-4 w-4 shrink-0 rounded border-border text-primary"
+              />
+              <label htmlFor={inputId} className="min-w-0 truncate text-sm text-foreground">
+                {server.name}{' '}
+                <span className="text-muted-foreground">
+                  {tp(`card.product.${server.productType}`)}
+                </span>
+              </label>
+            </li>
+          );
+        })}
+      </ul>
+    </fieldset>
+  );
+}

apps/web/src/components/settings/proxmox-widget-config-form.tsx

@@ -0,0 +1,81 @@
+'use client';
+
+import { useTranslations } from 'next-intl';
+import { type ReactNode, useEffect, useState } from 'react';
+import { resolveProxmoxWidgetConfig } from '@/components/dashboard/widgets/proxmox-widget-model';
+import { ProxmoxServerPicker } from '@/components/proxmox/proxmox-server-picker';
+// T-I8V-02: nur die Leseabfrage des Zwischenlagers, nie die manuelle Abfrage.
+import { listServers, type ProxmoxServer } from '@/lib/proxmox-api';
+
+interface ProxmoxWidgetConfigFormProps {
+  config: Record<string, unknown>;
+  onChange: (cfg: Record<string, unknown>) => void;
+}
+
+/**
+ * Einstellungen der Proxmox-Kachel unter Einstellungen > Dashboard
+ * (quick-260924-i8v): Titel und Serverauswahl. Laedt die Serverliste einmal;
+ * dieselbe Auswahl gibt es an der Kachel im Bearbeitungsmodus (dort auch
+ * fuer Kacheln auf weiteren Reitern, die diese Seite nicht zeigt).
+ */
+export function ProxmoxWidgetConfigForm({ config, onChange }: ProxmoxWidgetConfigFormProps) {
+  const t = useTranslations('widgets');
+  const tp = useTranslations('proxmox');
+  const { title: rawTitle, serverIds } = resolveProxmoxWidgetConfig(config);
+  // Anzeige getrimmt (Leerraum-Titel sind fachlich „kein Titel“), gesendet
+  // wird der rohe Tippwert — Muster FavoritesConfig.
+  const title = rawTitle.trim() === '' ? '' : rawTitle;
+
+  const [servers, setServers] = useState<ProxmoxServer[] | null>(null);
+  const [loadFailed, setLoadFailed] = useState(false);
+
+  useEffect(() => {
+    let cancelled = false;
+    listServers()
+      .then((list) => {
+        if (!cancelled) setServers(list);
+      })
+      .catch(() => {
+        if (!cancelled) setLoadFailed(true);
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  let serverPart: ReactNode;
+  if (loadFailed) {
+    serverPart = <p className="text-sm text-muted-foreground">{tp('loadError')}</p>;
+  } else if (servers === null) {
+    serverPart = <p className="text-sm text-muted-foreground">{tp('loading')}</p>;
+  } else if (servers.length === 0) {
+    serverPart = <p className="text-sm text-muted-foreground">{t('proxmox.empty')}</p>;
+  } else {
+    serverPart = (
+      <ProxmoxServerPicker
+        servers={servers}
+        selectedIds={serverIds}
+        onChange={(next) => onChange({ serverIds: next })}
+      />
+    );
+  }
+
+  return (
+    <div className="space-y-4">
+      <div>
+        <label htmlFor="proxmox-widget-title" className="mb-1 block text-sm text-foreground">
+          {t('proxmox.titleLabel')}
+        </label>
+        <input
+          id="proxmox-widget-title"
+          type="text"
+          className="h-9 w-full max-w-xs rounded border border-border bg-background px-3 text-sm text-foreground"
+          value={title}
+          placeholder={t('proxmox.titlePlaceholder')}
+          onChange={(e) => onChange({ title: e.target.value })}
+        />
+      </div>
+      {serverPart}
+    </div>
+  );
+}

apps/web/src/components/settings/widget-settings-panel.tsx

@@ -5,6 +5,7 @@ import { useTranslations } from 'next-intl';
 import Link from 'next/link';
 import { WIDGET_REGISTRY, type WidgetType } from '@/components/dashboard/widget-registry';
 import { PictureFrameConfigForm } from '@/components/settings/picture-frame-config-form';
+import { ProxmoxWidgetConfigForm } from '@/components/settings/proxmox-widget-config-form';
 import { SearchProviderForm } from '@/components/settings/search-provider-form';
 import { XframeConfigForm } from '@/components/settings/xframe-config-form';
 import { updateWidgetConfig } from '@/lib/dashboard-api';
@@ -122,7 +123,8 @@ export function WidgetSettingsPanel({
                         {t(def.nameKey)} #{idx + 1}
                         {(widget.widgetType === 'note' ||
                           widget.widgetType === 'favorites' ||
-                          widget.widgetType === 'xframe') &&
+                          widget.widgetType === 'xframe' ||
+                          widget.widgetType === 'proxmox') &&
                           typeof widget.config.title === 'string' &&
                           widget.config.title.trim() !== '' && (
                             <span className="ml-2 text-muted-foreground">
@@ -232,6 +234,16 @@ export function WidgetSettingsPanel({
                             }
                           />
                         )}
+
+                        {/* Proxmox: Titel und Serverauswahl (quick-260924-i8v) */}
+                        {widget.widgetType === 'proxmox' && (
+                          <ProxmoxWidgetConfigForm
+                            config={widget.config}
+                            onChange={(cfg) =>
+                              handleConfigChange(widget.id, cfg)
+                            }
+                          />
+                        )}
                       </div>
                     )}
                   </div>

apps/web/src/messages/de.json

@@ -428,7 +428,12 @@
       "load": "Auslastung {percent}",
       "backupAgo": "Sicherung {age}",
       "mailIn": "{count} eingehend",
-      "selectionGone": "Die ausgewählten Server gibt es nicht mehr. Wählen Sie im Bearbeitungsmodus andere aus."
+      "selectionGone": "Die ausgewählten Server gibt es nicht mehr. Wählen Sie im Bearbeitungsmodus andere aus.",
+      "titleLabel": "Titel",
+      "titlePlaceholder": "Titel (optional)",
+      "serversLabel": "Angezeigte Server",
+      "serversHint": "Ohne Auswahl zeigt die Kachel alle Server.",
+      "chooseServers": "Server auswählen"
     }
   },
   "admin": {

apps/web/src/messages/en.json

@@ -428,7 +428,12 @@
       "load": "Load {percent}",
       "backupAgo": "Backup {age}",
       "mailIn": "{count} incoming",
-      "selectionGone": "The selected servers no longer exist. Choose others in edit mode."
+      "selectionGone": "The selected servers no longer exist. Choose others in edit mode.",
+      "titleLabel": "Title",
+      "titlePlaceholder": "Title (optional)",
+      "serversLabel": "Servers shown",
+      "serversHint": "With nothing selected, the tile shows all servers.",
+      "chooseServers": "Choose servers"
     }
   },
   "admin": {