round13: manuelle vs. echte Aenderungen trennen, Scan-Uebersicht ueber Navigation persistieren, ausgeblendete Dienste als Tab, Suche ueber Geraetenamen

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

@@ -63,6 +63,8 @@ interface ScanNameChange {
   field: "displayName" | "category";
   current: string | null;
   suggested: string;
+  /** true = weicht nur ab, weil der Wert zuvor manuell bearbeitet wurde. */
+  manualOverride: boolean;
 }
 
 interface ScanResult {
@@ -184,8 +186,10 @@ function NameChangesReview({
   const [handled, setHandled] = useState<Set<string>>(new Set());
 
   const applyMutation = useMutation({
-    mutationFn: (change: ScanNameChange) =>
-      patchService(change.serviceId, { [change.field]: change.suggested }),
+    mutationFn: (change: ScanNameChange) => {
+      const resetFlag = change.field === "displayName" ? "displayNameEditedManually" : "categoryEditedManually";
+      return patchService(change.serviceId, { [change.field]: change.suggested, [resetFlag]: false });
+    },
     onSuccess: (_data, change) => {
       setHandled((prev) => new Set(prev).add(`${change.serviceId}:${change.field}`));
       queryClient.invalidateQueries({ queryKey: ["services"] });
@@ -199,14 +203,13 @@ function NameChangesReview({
 
   const fieldLabel = (field: ScanNameChange["field"]) =>
     field === "displayName" ? "Name" : "Kategorie";
+  const manual = remaining.filter((c) => c.manualOverride);
+  const real = remaining.filter((c) => !c.manualOverride);
 
-  return (
-    <div className="mt-2 rounded-xl border border-blue-500/30 bg-blue-500/5 p-3 text-xs">
-      <p className="mb-2 font-medium text-blue-700 dark:text-blue-400">
-        {remaining.length} erkannte Änderung(en) weichen vom gespeicherten Wert ab:
-      </p>
+  function renderList(list: ScanNameChange[]) {
+    return (
       <ul className="space-y-1">
-        {remaining.map((c) => (
+        {list.map((c) => (
           <li key={`${c.serviceId}:${c.field}`} className="flex items-center justify-between gap-2">
             <span className="text-black/70 dark:text-white/70">
               {c.serviceHostname}:{c.servicePort} – {fieldLabel(c.field)}: „{c.current ?? "–"}" → „{c.suggested}"
@@ -231,7 +234,28 @@ function NameChangesReview({
           </li>
         ))}
       </ul>
-      <button onClick={onDone} className="mt-2 text-black/40 underline dark:text-white/40">
+    );
+  }
+
+  return (
+    <div className="mt-2 space-y-2">
+      {real.length > 0 ? (
+        <div className="rounded-xl border border-blue-500/30 bg-blue-500/5 p-3 text-xs">
+          <p className="mb-2 font-medium text-blue-700 dark:text-blue-400">
+            {real.length} erkannte Änderung(en) weichen vom gespeicherten Wert ab:
+          </p>
+          {renderList(real)}
+        </div>
+      ) : null}
+      {manual.length > 0 ? (
+        <div className="rounded-xl border border-black/10 bg-black/[0.02] p-3 text-xs dark:border-white/10 dark:bg-white/[0.02]">
+          <p className="mb-2 font-medium text-black/60 dark:text-white/60">
+            {manual.length} Abweichung(en), weil du diesen Wert bereits manuell angepasst hast:
+          </p>
+          {renderList(manual)}
+        </div>
+      ) : null}
+      <button onClick={onDone} className="text-black/40 underline dark:text-white/40">
         Hinweis schließen
       </button>
     </div>