feat(nav): Breadcrumb-Navigation für Hierarchie-Aufrufkette

Neue BreadcrumbBar-Widget-Komponente (breadcrumb.ts) zeigt die
Aufrufkette als anklickbare Leiste. Der Route-Param bc (JSON-String)
transportiert die Vorgänger-Ansichten durch alle Listen und Masken.
Jede Ansicht hängt beim Weiternavigieren ihren eigenen Crumb an die
Kette an; Masken reichen bc beim Speichern/Abbrechen zurück.
Erfasst: kunde, projekt, kontaktadresse, call_log, kontakt.

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

Client/Components/kunde.ts

@@ -2,6 +2,7 @@ import m from "mithril"
 import {Form, iForm} from "./widgets/form"
 import { Input, iInput} from "./widgets/inputs"
 import {Treenode, iTreenode, Treetable, iTreetable, TopbarButton, iTopbarButton} from "./widgets/Treetable_V2"
+import {BreadcrumbBar, iBreadcrumb, iBreadcrumbBar, parseBc, serializeBc} from "./widgets/breadcrumb"
 import {iKunde, fetchKunden, fetchKundeById, createKundeREST, updateKundeREST} from "../models/kunde"
 import {showServerError} from "./auth/authmessages"
 
@@ -14,11 +15,15 @@ export const kunde: m.ClosureComponent = (vnode) => {
         ort: "",
         land: ""
     }
-    
+    // Breadcrumb-Kette der Vorgänger-Ansichten (aus Route-Param bc).
+    let breadcrumbs: iBreadcrumb[] = []
+
     return {
         oninit: (vnode) => {
             const routeParams = m.route.param()
             const id = routeParams && routeParams.id ? parseInt(routeParams.id) : -1
+            // Breadcrumb-Kette aus Route-Param parsen.
+            breadcrumbs = parseBc(routeParams && routeParams.bc)
             if (id !== -1) {
                 // Kundendaten frisch vom Server holen, um zwischenzeitliche
                 // Änderungen anderer Nutzer nicht zu überschreiben.
@@ -57,6 +62,10 @@ export const kunde: m.ClosureComponent = (vnode) => {
                             m("i.material-icons", "contact_page"), " Kontakte")
                         : null
                 ),
+                m(BreadcrumbBar, {
+                    breadcrumbs: breadcrumbs,
+                    current: currentKunde.id === -1 ? "Neuer Kunde" : "Kundenstammblatt"
+                } as iBreadcrumbBar),
                 m("div", {style: {flex: '1', 'min-height': '0'}},
                     m(Form, {showButtons: true, onsubmit: submit, oncancel: cancel} as iForm, [
                     m("label", "Kundenname", m(Input, {name: "kundenname", value: currentKunde.name, type: "text", required: true} as iInput)),
@@ -74,28 +83,43 @@ export const kunde: m.ClosureComponent = (vnode) => {
 export const kundenliste: m.ClosureComponent = (vnode) => {
     let treenodes: iTreenode[] = []
     let selectedNode: iTreenode | null = null
+    // Breadcrumb-Kette der Vorgänger-Ansichten (aus Route-Param bc).
+    let breadcrumbs: iBreadcrumb[] = []
 
     const handleRowMarked = (node: iTreenode) => {
         selectedNode = node
     }
-    
+
+    // Eigener Listen-Crumb für die Breadcrumb-Kette.
+    const ownCrumb = (): iBreadcrumb => ({
+        route: "/kundenliste",
+        params: {},
+        label: "Kunden"
+    })
+
     const editKunde = (kunde: iKunde, e: Event) => {
         e.stopPropagation()
-        m.route.set("/kunde", {id: kunde.id})
+        // Breadcrumb-Kette um eigene Position erweitern.
+        m.route.set("/kunde", {id: kunde.id, bc: serializeBc([...breadcrumbs, ownCrumb()])})
     }
-    
+
     const showProjekte = (kunde: iKunde, e: Event) => {
         e.stopPropagation()
-        m.route.set("/projektliste", {kunden_id: kunde.id})
+        // Breadcrumb-Kette: Kundenliste als Vorgänger der Projektliste.
+        const bc = serializeBc([...breadcrumbs, ownCrumb()])
+        m.route.set("/projektliste", {kunden_id: kunde.id, bc})
     }
 
     const showKontakte = (kunde: iKunde, e: Event) => {
         e.stopPropagation()
-        m.route.set("/kontaktliste", {kunden_id: kunde.id})
+        // Breadcrumb-Kette: Kundenliste als Vorgänger der Kontaktliste.
+        const bc = serializeBc([...breadcrumbs, ownCrumb()])
+        m.route.set("/kontaktliste", {kunden_id: kunde.id, bc})
     }
-    
+
     const addKundeRoute = () => {
-        m.route.set("/kunde", {id: -1})
+        // Breadcrumb-Kette um eigene Position erweitern.
+        m.route.set("/kunde", {id: -1, bc: serializeBc([...breadcrumbs, ownCrumb()])})
     }
     
     const columnmapper: (node: iTreenode) => any[] = (node: iTreenode) => {
@@ -127,6 +151,8 @@ export const kundenliste: m.ClosureComponent = (vnode) => {
     
     return {
         oninit: (vnode) => {
+            // Breadcrumb-Kette aus Route-Param parsen (bei Top-Level leer).
+            breadcrumbs = parseBc(m.route.param() && m.route.param().bc)
             // Kundenliste asynchron vom Server laden. m.request löst nach
             // Promise-Auflösung automatisch ein Redraw aus.
             fetchKunden().then((kunden: iKunde[]) => {
@@ -136,11 +162,15 @@ export const kundenliste: m.ClosureComponent = (vnode) => {
         view: (vnode) => {
             return m("div.w3-container.w3-auto", {
                 style: {
-                    display: 'flex', 
-                    'flex-direction': 'column', 
-                    height: 'inherit', 
+                    display: 'flex',
+                    'flex-direction': 'column',
+                    height: 'inherit',
                     'overflow-y': 'inherit'}},
                 m("h1", "Kundenliste"),
+                m(BreadcrumbBar, {
+                    breadcrumbs: breadcrumbs,
+                    current: "Kunden"
+                } as iBreadcrumbBar),
                 m("div", {style: {flex: '1', 'overflow-y': 'inherit'}},
                     m(Treetable,
                         {