Kundenansicht neu E-Fix M5: Chat hält die Eingabe über der Tastatur (revealChatComposer aus app.js)

Der Chat der neuen Ansicht übernahm nur das Ausblenden der Leiste, nicht das Nachschieben der Eingabe: auf kleinen Handys (iPhone SE, Android mit
hoher Tastatur) konnte die Eingabezeile unter der Tastatur stehen bleiben, und die letzte Nachricht verschwand beim Schrumpfen des Verlaufs.
Jetzt wie in app.js: 350 ms nach dem Fokus im Composer und bei jedem visualViewport-Resize wird die Eingabe in den sichtbaren Bereich geschoben
(composerVersatz, nur wenn verdeckt, 8 px Luft, nur am Handy), und ein ResizeObserver hält die neueste Nachricht sichtbar, wenn man unten war.
Hörer und Beobachter werden beim Neuaufbau abgebaut. Tests für die Rechnung und die Verdrahtung in knAnsichtChat.test.js.

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>

public/neu/ansicht-chat.js

@@ -4,6 +4,7 @@
 import { api } from './api.js'
 import { h, leeren } from './dom.js'
 import { K, fmtDatumZeit, meldeZaehlerNeu, nimmChatVorgabe } from './ansicht-hilfen.js'
+import { HANDY_ABFRAGE } from './leiste.js'
 
 export const CHAT_TEXTE = {
   platzhalter: 'Nachricht an das WEBklar-Team…',
@@ -21,18 +22,56 @@ export function nachrichtMeta(msg) {
   return `${meine ? 'Du' : msg?.senderName || 'Webklar-Team'} · ${fmtDatumZeit(msg?.createdAt)}`
 }
 
-let aktiv = null // der laufende Chat: { timer, composer }
+/**
+ * Um wie viele Pixel muss die Seite scrollen, damit die Eingabe im sichtbaren Bereich (visualViewport) steht? Aus revealChatComposer (app.js:2240-2260):
+ * nur nachschieben, wenn sie wirklich verdeckt ist (8 px Luft), nie die Seite nach oben pinnen. Unter 1 Pixel und ungültige Werte ergeben 0.
+ */
+export function composerVersatz({ rect, visibleTop, visibleBottom }, luft = 8) {
+  let delta = 0
+  if (rect.bottom > visibleBottom - luft) delta = rect.bottom - visibleBottom + luft
+  else if (rect.top < visibleTop + luft) delta = rect.top - visibleTop - luft
+  return Number.isFinite(delta) && Math.abs(delta) > 1 ? delta : 0
+}
+
+/**
+ * Die Eingabe über der Tastatur halten (E-Fix M5, wie app.js): 350 ms nach dem Fokus im Composer (die Tastatur-Animation auf iOS) und bei jedem
+ * visualViewport-Resize die Eingabe in den sichtbaren Bereich schieben. Nur am Handy und nur, solange der Fokus im Composer liegt.
+ * Rückgabe { abbau } entfernt die Hörer.
+ */
+export function verdrahteEingabe({ win = globalThis.window, doc = globalThis.document, wurzel }) {
+  const vv = win?.visualViewport
+  const zeige = () => {
+    if (!vv || !wurzel.contains(doc.activeElement) || !win.matchMedia?.(HANDY_ABFRAGE).matches) return
+    const delta = composerVersatz({ rect: wurzel.getBoundingClientRect(), visibleTop: vv.offsetTop, visibleBottom: vv.offsetTop + vv.height })
+    if (delta) win.scrollBy(0, delta)
+  }
+  const beiFokus = (ev) => { if (wurzel.contains(ev.target) && ev.target.matches?.('textarea, input')) win.setTimeout(zeige, 350) }
+  const frame = (fn) => (win.requestAnimationFrame ? win.requestAnimationFrame(fn) : fn())
+  const beiVv = () => frame(() => frame(zeige))
+  doc.addEventListener('focusin', beiFokus)
+  vv?.addEventListener('resize', beiVv)
+  return {
+    abbau() {
+      doc.removeEventListener('focusin', beiFokus)
+      vv?.removeEventListener('resize', beiVv)
+    },
+  }
+}
+
+let aktiv = null // der laufende Chat: { timer, composer, eingabe, beobachter }
 
 function raeumeAuf() {
   if (!aktiv) return
   if (aktiv.timer) clearInterval(aktiv.timer)
   try { aktiv.composer?.destroy?.() } catch { /* schon abgebaut */ }
+  try { aktiv.eingabe?.abbau() } catch { /* schon abgebaut */ }
+  try { aktiv.beobachter?.disconnect() } catch { /* schon abgebaut */ }
   aktiv = null
 }
 
 export async function zeigeChat(wurzel, { route, me, nav } = {}) {
   raeumeAuf()
-  const eigener = { timer: null, composer: null }
+  const eigener = { timer: null, composer: null, eingabe: null, beobachter: null }
   aktiv = eigener
   const gilt = () => aktiv === eigener
   leeren(wurzel).append(h('p', { class: K.leer }, 'Wird geladen …'))
@@ -119,6 +158,13 @@ export async function zeigeChat(wurzel, { route, me, nav } = {}) {
     onSent: (message) => { haengeAn([message]) },
   })
 
+  // Eingabe über der Tastatur halten; wird der Verlauf kleiner (Tastatur, Leiste), bleibt die neueste Nachricht sichtbar, sofern man unten war (E-Fix M5)
+  eigener.eingabe = verdrahteEingabe({ win: globalThis.window, doc: globalThis.document, wurzel: composerWurzel })
+  if (typeof globalThis.ResizeObserver === 'function') {
+    eigener.beobachter = new globalThis.ResizeObserver(() => { if (verlauf.dataset.stick !== 'false') verlauf.scrollTop = verlauf.scrollHeight })
+    eigener.beobachter.observe(verlauf)
+  }
+
   const vorgabe = nimmChatVorgabe()
   if (vorgabe) {
     const feld = composerWurzel.querySelector('textarea')