feat(isdirty): Navigations-Guard gegen ungespeichertes Verlassen von Bearbeitungsmasken

Zentraler DirtyGuard (dirtyguard.ts) mit DirtyMaskHelper-Klasse und
3-Button-Bestätigungs-Modal (Speichern/Verwerden/Abbrechen). Form meldet
Dirty-State via onDirtyChange nach oben; input-Event ergänzt change für
frühzeitiges Dirty-Marking. Alle App-Navigationen (Breadcrumb, Menü,
In-Masken-Buttons, Abbrechen) laufen über guardedNavigate. Auto-Redraw
bei dirty per e.redraw=false unterbunden, damit DOM-Eingaben erhalten
bleiben (Input-Widget hat kein Live-Binding).

Generated by Mistral Vibe.
Co-Authored-By: Mistral Vibe <vibe@mistral.ai>

Client/Components/kontakt.ts

@@ -6,6 +6,7 @@ import {BreadcrumbBar, iBreadcrumb, iBreadcrumbBar, parseBc, serializeBc} from "
 import {iKontakt, fetchKontakte, fetchKontaktById, createKontaktREST, updateKontaktREST} from "../models/kontakt"
 import {iKunde, fetchKundeById} from "../models/kunde"
 import {showServerError} from "./auth/authmessages"
+import {guardedNavigate, DirtyMaskHelper} from "./widgets/dirtyguard"
 
 export const kontaktliste: m.ClosureComponent = (vnode) => {
     let treenodes: iTreenode[] = []
@@ -150,6 +151,17 @@ export const Kontakt: m.ClosureComponent = (vnode) => {
     }
     // Breadcrumb-Kette der Vorgänger-Ansichten (aus Route-Param bc).
     let breadcrumbs: iBreadcrumb[] = []
+    // Route-Params für die Rückkehr zur Kontaktliste; als Closure an den
+    // DirtyMaskHelper übergeben, da dieser die maskenspezifischen Variablen
+    // (currentKontakt, breadcrumbs) nicht kennt.
+    const backParams = (): any => {
+        const listBc = serializeBc(breadcrumbs.slice(0, -1))
+        const params: any = {kunden_id: currentKontakt.kunden_id, kunden_name: currentKontakt.kunden_name}
+        if (listBc) params.bc = listBc
+        return params
+    }
+    // DirtyMaskHelper kapselt den isDirty/Guard-Boilerplate.
+    const guard = new DirtyMaskHelper("/kontaktliste", backParams)
 
     return {
         oninit: (vnode) => {
@@ -157,6 +169,7 @@ export const Kontakt: m.ClosureComponent = (vnode) => {
             const id = routeParams && routeParams.id ? parseInt(routeParams.id) : -1
             // Breadcrumb-Kette aus Route-Param parsen.
             breadcrumbs = parseBc(routeParams && routeParams.bc)
+            guard.registerGuard()
             if (id !== -1) {
                 // Kontaktdaten frisch vom Server holen, um zwischenzeitliche
                 // Änderungen anderer Nutzer nicht zu überschreiben.
@@ -170,15 +183,10 @@ export const Kontakt: m.ClosureComponent = (vnode) => {
                 currentKontakt.kunden_name = routeParams && routeParams.kunden_name ? routeParams.kunden_name : ""
             }
         },
+        onremove: (vnode) => {
+            guard.cleanup()
+        },
         view: (vnode) => {
-            // Rückkehr zur Kontaktliste; das bc ohne das letzte Glied (die
-            // Kontaktliste selbst) durchreichen.
-            const goBack = () => {
-                const listBc = serializeBc(breadcrumbs.slice(0, -1))
-                const routeParams: any = {kunden_id: currentKontakt.kunden_id, kunden_name: currentKontakt.kunden_name}
-                if (listBc) routeParams.bc = listBc
-                m.route.set("/kontaktliste", routeParams)
-            }
             const submit = (form: HTMLFormElement): boolean => {
                 const formData = new FormData(form)
                 const gespeicherterKontakt: iKontakt = {
@@ -193,25 +201,23 @@ export const Kontakt: m.ClosureComponent = (vnode) => {
                     notiz: (formData.get("notiz") as string) || ""
                 }
                 if (currentKontakt.id === -1) {
-                    createKontaktREST(gespeicherterKontakt).then(() => goBack()).catch((e) => showServerError(e))
+                    createKontaktREST(gespeicherterKontakt).then(() => guard.navigateAfterSave()).catch((e) => { showServerError(e); guard.markDirty() })
                 } else {
-                    updateKontaktREST(gespeicherterKontakt).then(() => goBack()).catch((e) => showServerError(e))
+                    updateKontaktREST(gespeicherterKontakt).then(() => guard.navigateAfterSave()).catch((e) => { showServerError(e); guard.markDirty() })
                 }
                 return true
             }
-            const cancel = (e: Event) => {
-                goBack()
-            }
             return m("div.w3-container.w3-auto.form-view-container",
                 m("h1", currentKontakt.id === -1
                     ? "Neuer Kontakt für " + currentKontakt.kunden_name
                     : "Kontakt-Stammblatt"),
                 m(BreadcrumbBar, {
                     breadcrumbs: breadcrumbs,
-                    current: currentKontakt.id === -1 ? "Neuer Kontakt" : "Kontakt-Stammblatt"
+                    current: currentKontakt.id === -1 ? "Neuer Kontakt" : "Kontakt-Stammblatt",
+                    onnavigate: guardedNavigate
                 } as iBreadcrumbBar),
                 m("div", {style: {flex: '1', 'min-height': '0'}},
-                    m(Form, {showButtons: true, onsubmit: submit, oncancel: cancel} as iForm, [
+                    m(Form, guard.formAttrs(submit) as iForm, [
                     m("input", {type: "hidden", name: "kunden_id", value: currentKontakt.kunden_id}),
                     m("label", "Anrede", m(Input, {name: "anrede", value: currentKontakt.anrede, type: "text"} as iInput)),
                     m("label", "Name", m(Input, {name: "name", value: currentKontakt.name, type: "text", required: true} as iInput)),