feat(crm): zentrale TagBadge-Komponente und Ergänzungen zur Workflow-Maske

- Position des Ansprechpartners in der Kopfzeile der Tagesworkflow-Maske anzeigen
- Neue TagBadge-Komponente (Farbchip, Name, Workflow-Icons: erledigend/
  Wiedervorlage) ersetzt die duplizierte Badge-Darstellung in Notiz-Liste,
  Workflow-Liste, Historie und Tag-Liste
- MultiSelect: optionale content-Option rendert ein fertiges Badge des
  Aufrufers statt Farbpunkt + Label im Auswahl-Modal; Suchfeld wird beim
  Öffnen des Modals fokussiert
- TagBadge-Attribut heißt tagData statt tag, da Mithril attrs-Objekte mit
  tag-Property als Vnode-Kinder behandelt (führte zu 'color' undefined)

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

Client/Components/tagbadge.ts

@@ -0,0 +1,97 @@
+import m from "mithril"
+import {iTag} from "../models/tag"
+
+/**
+ * Der Vnode der Komponente 'TagBadge' akzeptiert die folgenden Parameter:
+ *  @property {iTag} tagData - Der darzustellende Tag. Achtung: Das Attribut
+ *                  darf nicht 'tag' heißen — Mithril behandelt ein attrs-
+ *                  Objekt mit einer 'tag'-Property als Vnode und verschiebt
+ *                  es in die children (siehe hyperscriptVnode.js).
+ *  @property {boolean} compact (optional) - kompakte Darstellung für dichte
+ *                  Listen/Tabellen (kleinere Schrift, engeres Padding);
+ *                  Default ist die Standarddarstellung (fett)
+ *  @property {string} title (optional) - Tooltip des Farbchips
+ *                  (Default: Tag-Name)
+ */
+export interface iTagBadge {
+    tagData: iTag
+    compact?: boolean
+    title?: string
+}
+
+/**
+ * Farbige Badge-Komponente für einen Tag: rendert den Tag-Namen als Chip in
+ * der Tag-Farbe und dahinter automatisch die Workflow-Zusatzicons —
+ * back_hand (rot) für erledigende Tags, schedule + Tagesabstand (blau) für
+ * Tags, die eine Wiedervorlage auslösen (jeweils mit Tooltip). Parent-Tags
+ * erhalten keine Zusatzicons.
+ *
+ * Die Komponente kapselt die Darstellung zentral, damit alle Stellen
+ * (Notiz-Listen, Workflow-Liste, Historie, Auswahl-Modals, Tag-Liste)
+ * einheitlich aussehen. Aufrufer geben nur den Tag an; Name, Farbe und
+ * Zusatzicons ergeben sich aus den Tag-Daten.
+ */
+export const TagBadge: m.ClosureComponent<iTagBadge> = () => {
+    return {
+        view: (vnode) => {
+            const tag = vnode.attrs.tagData
+            const compact = vnode.attrs.compact === true
+            // Farbiger Chip mit dem Tag-Namen. Bei fehlender Farbe grau.
+            const chip = m("span", {
+                style: {
+                    backgroundColor: tag.color || '#999',
+                    color: 'white',
+                    padding: compact ? '1px 5px' : '2px 6px',
+                    'border-radius': '3px',
+                    'font-size': compact ? '11px' : undefined,
+                    fontWeight: compact ? undefined : 'bold',
+                    display: 'inline-block',
+                    marginRight: '4px'
+                },
+                title: vnode.attrs.title || tag.name
+            }, tag.name)
+            // Workflow-Zusatzicons hinter dem Chip — fest programmiert aus
+            // den Tag-Flags, nicht per Attribut steuerbar. Parent-Tags sind
+            // nicht zuordenbar und erhalten daher keine Icons.
+            const icons: m.Child[] = []
+            if (!tag.is_parent) {
+                if (tag.is_erledigend) {
+                    icons.push(m("i.material-icons", {
+                        title: "Erledigend: Kontakt gilt als erledigt",
+                        style: {
+                            verticalAlign: 'middle',
+                            fontSize: '16px',
+                            color: '#d32f2f'
+                        }
+                    }, "back_hand"))
+                }
+                if (tag.loest_wiedervorlage_aus) {
+                    icons.push(m("span", {
+                        title: "Löst Wiedervorlage aus: " + (tag.wiedervorlage_abstand_tage ?? 0) + " Tage",
+                        style: {
+                            verticalAlign: 'middle',
+                            fontSize: '12px',
+                            color: '#1565c0'
+                        }
+                    },
+                        m("i.material-icons", {
+                            style: {
+                                verticalAlign: 'middle',
+                                marginRight: '2px',
+                                fontSize: '16px'
+                            }
+                        }, "schedule"),
+                        tag.wiedervorlage_abstand_tage != null ? tag.wiedervorlage_abstand_tage + "d" : ""))
+                }
+            }
+            return m("span", {
+                style: {
+                    display: 'inline-flex',
+                    alignItems: 'center',
+                    marginLeft: '4px',
+                    whiteSpace: 'nowrap'
+                }
+            }, chip, icons)
+        }
+    }
+}