Bugfixes (Dark Mode, Dropdown-Kontrast, IP-Suche), Lesezeichen-Ausbau (Farbe, Beschreibung, Favicon), Zuletzt-besucht, Spaeter-lesen, kombinierter Import-Export, Scanner-Reconciliation, Admin-Ueberarbeitung

apps/frontend/src/routes/admin/DevicesPage.tsx

@@ -1,6 +1,7 @@
-import { useState, type FormEvent } from "react";
+import { useMemo, useState, type FormEvent } from "react";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
-import { Button } from "@launchpad/ui";
+import { Button, Favicon } from "@launchpad/ui";
+import type { Service } from "@launchpad/shared";
 import { useDevices, type DeviceWithServices } from "../../hooks/useDevices.js";
 import { AdminPageHeader } from "./AdminPageHeader.js";
 
@@ -17,6 +18,18 @@ async function createDevice(input: { hostname: string; ip: string }) {
   return res.json();
 }
 
+async function patchDevice(id: string, patch: Record<string, unknown>) {
+  const res = await fetch(`/api/devices/${id}`, {
+    method: "PATCH",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify(patch),
+  });
+  if (!res.ok) {
+    throw new Error(`Gerät konnte nicht aktualisiert werden (HTTP ${res.status})`);
+  }
+  return res.json();
+}
+
 async function deleteDevice(id: string) {
   const res = await fetch(`/api/devices/${id}`, { method: "DELETE" });
   if (!res.ok && res.status !== 404) {
@@ -24,11 +37,19 @@ async function deleteDevice(id: string) {
   }
 }
 
+async function deleteServiceRequest(id: string) {
+  const res = await fetch(`/api/services/${id}`, { method: "DELETE" });
+  if (!res.ok && res.status !== 404) {
+    throw new Error(`Dienst konnte nicht gelöscht werden (HTTP ${res.status})`);
+  }
+}
+
 interface ScanResult {
   scannedPorts: number;
   ports: number[];
   created: number;
   updated: number;
+  staleServices: Service[];
 }
 
 async function scanDevice(id: string): Promise<ScanResult> {
@@ -40,9 +61,150 @@ async function scanDevice(id: string): Promise<ScanResult> {
   return body;
 }
 
+function EditDeviceForm({ device, onDone }: { device: DeviceWithServices; onDone: () => void }) {
+  const queryClient = useQueryClient();
+  const [hostname, setHostname] = useState(device.hostname);
+  const [ip, setIp] = useState(device.ip);
+  const [mac, setMac] = useState(device.mac ?? "");
+  const [manufacturer, setManufacturer] = useState(device.manufacturer ?? "");
+  const [model, setModel] = useState(device.model ?? "");
+
+  const mutation = useMutation({
+    mutationFn: () =>
+      patchDevice(device.id, {
+        hostname: hostname.trim(),
+        ip: ip.trim(),
+        mac: mac.trim() || undefined,
+        manufacturer: manufacturer.trim() || undefined,
+        model: model.trim() || undefined,
+      }),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["devices"] });
+      onDone();
+    },
+  });
+
+  return (
+    <tr className="border-b border-black/5 bg-black/[0.02] last:border-0 dark:border-white/5 dark:bg-white/5">
+      <td colSpan={6} className="px-4 py-3">
+        <div className="flex flex-wrap items-end gap-3">
+          <div>
+            <label className="mb-1 block text-xs text-black/50 dark:text-white/50">Hostname</label>
+            <input
+              value={hostname}
+              onChange={(e) => setHostname(e.target.value)}
+              className="rounded-lg border border-black/10 bg-white px-2 py-1 text-sm
+                dark:border-white/10 dark:bg-white/10 dark:text-white"
+            />
+          </div>
+          <div>
+            <label className="mb-1 block text-xs text-black/50 dark:text-white/50">IP</label>
+            <input
+              value={ip}
+              onChange={(e) => setIp(e.target.value)}
+              className="rounded-lg border border-black/10 bg-white px-2 py-1 text-sm
+                dark:border-white/10 dark:bg-white/10 dark:text-white"
+            />
+          </div>
+          <div>
+            <label className="mb-1 block text-xs text-black/50 dark:text-white/50">
+              MAC-Adresse
+            </label>
+            <input
+              value={mac}
+              onChange={(e) => setMac(e.target.value)}
+              placeholder="AA:BB:CC:DD:EE:FF"
+              className="w-40 rounded-lg border border-black/10 bg-white px-2 py-1 text-sm
+                dark:border-white/10 dark:bg-white/10 dark:text-white"
+            />
+          </div>
+          <div>
+            <label className="mb-1 block text-xs text-black/50 dark:text-white/50">Hersteller</label>
+            <input
+              value={manufacturer}
+              onChange={(e) => setManufacturer(e.target.value)}
+              className="rounded-lg border border-black/10 bg-white px-2 py-1 text-sm
+                dark:border-white/10 dark:bg-white/10 dark:text-white"
+            />
+          </div>
+          <div>
+            <label className="mb-1 block text-xs text-black/50 dark:text-white/50">Modell</label>
+            <input
+              value={model}
+              onChange={(e) => setModel(e.target.value)}
+              className="rounded-lg border border-black/10 bg-white px-2 py-1 text-sm
+                dark:border-white/10 dark:bg-white/10 dark:text-white"
+            />
+          </div>
+          <div className="flex gap-2">
+            <Button size="sm" variant="primary" onClick={() => mutation.mutate()} disabled={mutation.isPending}>
+              Speichern
+            </Button>
+            <Button size="sm" variant="ghost" onClick={onDone}>
+              Abbrechen
+            </Button>
+          </div>
+        </div>
+      </td>
+    </tr>
+  );
+}
+
+function StaleServicesReview({ staleServices, onDone }: { staleServices: Service[]; onDone: () => void }) {
+  const queryClient = useQueryClient();
+  const [handled, setHandled] = useState<Set<string>>(new Set());
+
+  const deleteMutation = useMutation({
+    mutationFn: (id: string) => deleteServiceRequest(id),
+    onSuccess: (_data, id) => {
+      setHandled((prev) => new Set(prev).add(id));
+      queryClient.invalidateQueries({ queryKey: ["services"] });
+    },
+  });
+
+  const remaining = staleServices.filter((s) => !handled.has(s.id));
+  if (remaining.length === 0) return null;
+
+  return (
+    <div className="mt-2 rounded-xl border border-amber-500/30 bg-amber-500/5 p-3 text-xs">
+      <p className="mb-2 font-medium text-amber-700 dark:text-amber-400">
+        {remaining.length} Dienst(e) beim letzten Scan nicht mehr gefunden (Port nicht mehr offen):
+      </p>
+      <ul className="space-y-1">
+        {remaining.map((s) => (
+          <li key={s.id} className="flex items-center justify-between gap-2">
+            <span className="text-black/70 dark:text-white/70">
+              {s.displayName} ({s.hostname}:{s.port})
+            </span>
+            <div className="flex gap-1">
+              <Button size="sm" variant="ghost" onClick={() => setHandled((prev) => new Set(prev).add(s.id))}>
+                Behalten
+              </Button>
+              <Button
+                size="sm"
+                variant="danger"
+                onClick={() => deleteMutation.mutate(s.id)}
+                disabled={deleteMutation.isPending}
+              >
+                Entfernen
+              </Button>
+            </div>
+          </li>
+        ))}
+      </ul>
+      <button onClick={onDone} className="mt-2 text-black/40 underline dark:text-white/40">
+        Hinweis schließen
+      </button>
+    </div>
+  );
+}
+
 function DeviceRow({ device }: { device: DeviceWithServices }) {
   const queryClient = useQueryClient();
   const [scanMessage, setScanMessage] = useState<string | null>(null);
+  const [staleServices, setStaleServices] = useState<Service[]>([]);
+  const [expanded, setExpanded] = useState(false);
+  const [editing, setEditing] = useState(false);
 
   const scanMutation = useMutation({
     mutationFn: () => scanDevice(device.id),
@@ -51,6 +213,7 @@ function DeviceRow({ device }: { device: DeviceWithServices }) {
       setScanMessage(
         `Ports offen: ${portsText} · ${result.created} neu · ${result.updated} aktualisiert`
       );
+      setStaleServices(result.staleServices);
       queryClient.invalidateQueries({ queryKey: ["devices"] });
       queryClient.invalidateQueries({ queryKey: ["services"] });
     },
@@ -62,56 +225,113 @@ function DeviceRow({ device }: { device: DeviceWithServices }) {
     onSuccess: () => queryClient.invalidateQueries({ queryKey: ["devices"] }),
   });
 
+  if (editing) {
+    return <EditDeviceForm device={device} onDone={() => setEditing(false)} />;
+  }
+
   return (
-    <tr className="border-b border-black/5 last:border-0 dark:border-white/5">
-      <td className="px-4 py-3">
-        <div className="font-medium text-black dark:text-white">{device.hostname}</div>
-        <div className="text-xs text-black/40 dark:text-white/40">{device.ip}</div>
-      </td>
-      <td className="px-4 py-3">
-        <span
-          className={`inline-flex items-center gap-1.5 text-xs ${
-            device.online ? "text-emerald-600 dark:text-emerald-400" : "text-black/40 dark:text-white/40"
-          }`}
-        >
+    <>
+      <tr className="border-b border-black/5 last:border-0 dark:border-white/5">
+        <td className="px-4 py-3">
+          <button
+            onClick={() => setExpanded((e) => !e)}
+            className="flex items-center gap-1.5 text-left"
+            title={expanded ? "Dienste ausblenden" : "Dienste anzeigen"}
+          >
+            <span className="text-black/30 dark:text-white/30">{expanded ? "▾" : "▸"}</span>
+            <span className="font-medium text-black dark:text-white">{device.hostname}</span>
+          </button>
+        </td>
+        <td className="px-4 py-3 font-mono text-black/60 dark:text-white/60">{device.ip}</td>
+        <td className="px-4 py-3 font-mono text-xs text-black/40 dark:text-white/40">
+          {device.mac ?? "–"}
+        </td>
+        <td className="px-4 py-3">
           <span
-            className={`h-1.5 w-1.5 rounded-full ${device.online ? "bg-emerald-500" : "bg-black/20 dark:bg-white/20"}`}
-          />
-          {device.online ? "Online" : "Offline"}
-        </span>
-      </td>
-      <td className="px-4 py-3 text-black/60 dark:text-white/60">{device.services.length}</td>
-      <td className="px-4 py-3 text-xs text-black/40 dark:text-white/40">
-        {device.lastScan ? new Date(device.lastScan).toLocaleString("de-DE") : "nie gescannt"}
-      </td>
-      <td className="px-4 py-3">
-        <div className="flex items-center justify-end gap-2">
-          {scanMessage ? (
-            <span className="max-w-[22rem] truncate text-xs text-black/40 dark:text-white/40" title={scanMessage}>
-              {scanMessage}
-            </span>
-          ) : null}
-          <Button
-            size="sm"
-            onClick={() => {
-              setScanMessage(null);
-              scanMutation.mutate();
-            }}
-            disabled={scanMutation.isPending}
+            className={`inline-flex items-center gap-1.5 text-xs ${
+              device.online ? "text-emerald-600 dark:text-emerald-400" : "text-black/40 dark:text-white/40"
+            }`}
           >
-            {scanMutation.isPending ? "Scanne …" : "Jetzt scannen"}
-          </Button>
-          <Button
-            size="sm"
-            variant="danger"
-            onClick={() => deleteMutation.mutate()}
-            disabled={deleteMutation.isPending}
-          >
-            Löschen
-          </Button>
-        </div>
-      </td>
-    </tr>
+            <span
+              className={`h-1.5 w-1.5 rounded-full ${device.online ? "bg-emerald-500" : "bg-black/20 dark:bg-white/20"}`}
+            />
+            {device.online ? "Online" : "Offline"}
+          </span>
+          <div className="text-[10px] text-black/30 dark:text-white/30">
+            {device.lastScan
+              ? `zuletzt gesehen: ${new Date(device.lastScan).toLocaleString("de-DE")}`
+              : "nie gescannt"}
+          </div>
+        </td>
+        <td className="px-4 py-3 text-black/60 dark:text-white/60">{device.services.length}</td>
+        <td className="px-4 py-3">
+          <div className="flex items-center justify-end gap-2">
+            <Button size="sm" onClick={() => setEditing(true)}>
+              Bearbeiten
+            </Button>
+            <Button
+              size="sm"
+              onClick={() => {
+                setScanMessage(null);
+                scanMutation.mutate();
+              }}
+              disabled={scanMutation.isPending}
+            >
+              {scanMutation.isPending ? "Scanne …" : "Jetzt scannen"}
+            </Button>
+            <Button
+              size="sm"
+              variant="danger"
+              onClick={() => deleteMutation.mutate()}
+              disabled={deleteMutation.isPending}
+            >
+              Löschen
+            </Button>
+          </div>
+        </td>
+      </tr>
+
+      {(scanMessage || staleServices.length > 0) && (
+        <tr className="border-b border-black/5 dark:border-white/5">
+          <td colSpan={6} className="px-4 pb-3">
+            {scanMessage ? (
+              <p className="text-xs text-black/40 dark:text-white/40">{scanMessage}</p>
+            ) : null}
+            {staleServices.length > 0 ? (
+              <StaleServicesReview staleServices={staleServices} onDone={() => setStaleServices([])} />
+            ) : null}
+          </td>
+        </tr>
+      )}
+
+      {expanded && (
+        <tr className="border-b border-black/5 bg-black/[0.015] dark:border-white/5 dark:bg-white/[0.02]">
+          <td colSpan={6} className="px-4 py-3">
+            {device.services.length === 0 ? (
+              <p className="text-xs text-black/40 dark:text-white/40">Keine Dienste auf diesem Gerät.</p>
+            ) : (
+              <div className="flex flex-wrap gap-2">
+                {device.services.map((s) => (
+                  <a
+                    key={s.id}
+                    href={s.url}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="flex items-center gap-1.5 rounded-full border border-black/10 bg-white/60
+                      px-2.5 py-1 text-xs text-black/70 hover:bg-black/5 dark:border-white/10
+                      dark:bg-white/5 dark:text-white/70 dark:hover:bg-white/10"
+                  >
+                    <Favicon src={s.favicon} fallbackLetter={s.displayName} size="sm" />
+                    {s.displayName}
+                    <span className="text-black/30 dark:text-white/30">:{s.port}</span>
+                  </a>
+                ))}
+              </div>
+            )}
+          </td>
+        </tr>
+      )}
+    </>
   );
 }
 
@@ -173,14 +393,83 @@ function AddDeviceForm() {
   );
 }
 
+type SortColumn = "hostname" | "ip" | "mac" | "online" | "services" | null;
+
+function SortableHeader({
+  label,
+  column,
+  activeColumn,
+  direction,
+  onClick,
+}: {
+  label: string;
+  column: SortColumn;
+  activeColumn: SortColumn;
+  direction: "asc" | "desc";
+  onClick: (column: SortColumn) => void;
+}) {
+  const active = activeColumn === column;
+  return (
+    <th className="px-4 py-2 font-medium">
+      <button
+        onClick={() => onClick(column)}
+        className={`flex items-center gap-1 hover:text-black dark:hover:text-white ${
+          active ? "text-black dark:text-white" : ""
+        }`}
+      >
+        {label}
+        <span className="text-[10px]">{active ? (direction === "asc" ? "▲" : "▼") : "⇅"}</span>
+      </button>
+    </th>
+  );
+}
+
 export function DevicesPage() {
   const { data: devices, isLoading, isError } = useDevices();
+  const [sortColumn, setSortColumn] = useState<SortColumn>(null);
+  const [sortDirection, setSortDirection] = useState<"asc" | "desc">("asc");
+
+  const list = useMemo(() => {
+    const base = devices ?? [];
+    if (!sortColumn) return base;
+    const sorted = [...base].sort((a, b) => {
+      let cmp = 0;
+      switch (sortColumn) {
+        case "hostname":
+          cmp = a.hostname.localeCompare(b.hostname);
+          break;
+        case "ip":
+          cmp = a.ip.localeCompare(b.ip, undefined, { numeric: true });
+          break;
+        case "mac":
+          cmp = (a.mac ?? "").localeCompare(b.mac ?? "");
+          break;
+        case "online":
+          cmp = Number(a.online) - Number(b.online);
+          break;
+        case "services":
+          cmp = a.services.length - b.services.length;
+          break;
+      }
+      return sortDirection === "asc" ? cmp : -cmp;
+    });
+    return sorted;
+  }, [devices, sortColumn, sortDirection]);
+
+  function handleHeaderClick(column: SortColumn) {
+    if (sortColumn === column) {
+      setSortDirection((d) => (d === "asc" ? "desc" : "asc"));
+    } else {
+      setSortColumn(column);
+      setSortDirection("asc");
+    }
+  }
 
   return (
     <div>
       <AdminPageHeader
         title="Geräte"
-        description="Alle bekannten Geräte in deinem Netzwerk. Scans laufen nur auf Knopfdruck."
+        description="Alle bekannten Geräte in deinem Netzwerk. Scans laufen nur auf Knopfdruck. Klick auf den Gerätenamen zeigt die zugehörigen Dienste."
       />
 
       <div className="mb-6">
@@ -191,22 +480,23 @@ export function DevicesPage() {
         <p className="text-sm text-black/40 dark:text-white/40">Lade Geräte …</p>
       ) : isError ? (
         <p className="text-sm text-red-500">Geräte konnten nicht geladen werden.</p>
-      ) : devices && devices.length > 0 ? (
+      ) : list.length > 0 ? (
         <div className="overflow-hidden rounded-2xl border border-black/10 dark:border-white/10">
           <div className="overflow-x-auto">
-            <table className="w-full min-w-[640px] text-sm">
+            <table className="w-full min-w-[760px] text-sm">
               <thead>
                 <tr className="border-b border-black/10 bg-black/[0.02] text-left text-xs
                   uppercase tracking-wide text-black/40 dark:border-white/10 dark:bg-white/5 dark:text-white/40">
-                  <th className="px-4 py-2 font-medium">Gerät</th>
-                  <th className="px-4 py-2 font-medium">Status</th>
-                  <th className="px-4 py-2 font-medium">Dienste</th>
-                  <th className="px-4 py-2 font-medium">Letzter Scan</th>
+                  <SortableHeader label="Gerät" column="hostname" activeColumn={sortColumn} direction={sortDirection} onClick={handleHeaderClick} />
+                  <SortableHeader label="IP" column="ip" activeColumn={sortColumn} direction={sortDirection} onClick={handleHeaderClick} />
+                  <SortableHeader label="MAC" column="mac" activeColumn={sortColumn} direction={sortDirection} onClick={handleHeaderClick} />
+                  <SortableHeader label="Status" column="online" activeColumn={sortColumn} direction={sortDirection} onClick={handleHeaderClick} />
+                  <SortableHeader label="Dienste" column="services" activeColumn={sortColumn} direction={sortDirection} onClick={handleHeaderClick} />
                   <th className="px-4 py-2" />
                 </tr>
               </thead>
               <tbody>
-                {devices.map((device) => (
+                {list.map((device) => (
                   <DeviceRow key={device.id} device={device} />
                 ))}
               </tbody>