projektuebersicht/public/js/board/board.js

// -----------------------------
// Projektübersicht — Board (Listenansicht)
// -----------------------------
// Diese Datei rendert das Projektboard (Tab "Projektboard" in `Test.html`) als
// schlanke, aufklappbare Liste statt der früheren breiten Matrix (eine Spalte
// je Person/Leistungsphase): jede Zeile zeigt auf einen Blick Kürzel-Avatare
// der zugeordneten Personen, die aktuelle Leistungsphase samt Prozentwert und
// eine einzeilige Status-Vorschau; ein Klick auf die Zeile klappt darunter das
// Detailpanel auf (voller Status-Editor, vollständige Rollen-Zuordnung, alle
// LPH-Balken). Sie wird von `Test.html` nach `js/weeks.js` (vor
// `js/people/people.js`) geladen und stellt globale Funktionen wie
// `renderBoard()`, `toggleBoardRow()`, `cycleAssign()`,
// und `editLph()` bereit. Sie nutzt `currentWeek()`/
// `isWeekLocked()` aus `js/weeks.js`, `lpActiveList()` aus `js/load/load.js`,
// `assignKey()`, `statusFocus()`, `sanitizeStatusHtml()` und
// `getProgressColor()` aus `js/utils.js` sowie `openProjectPlan()` aus
// `js/gantt.js` — navigiert bewusst im selben Tab (kein window.open() mehr),
// ein Klick auf den Rest der Zeile klappt stattdessen nur das Detailpanel
// auf/zu (toggleBoardRow()). editLph()/cycleAssign() rufen zusätzlich
// renderWochenbericht() (js/wochenbericht/wochenbericht.js) auf, da dessen
// Karten dieselben renderBoardDrawer()-Bedienelemente nutzen, aber in einem
// eigenen DOM-Container (#wochenberichtContent) liegen.

// boardRowOpen: UI-Zustand, welche Projekt-Zeile ihr Detailpanel aufgeklappt
// darstellt (Key = Projekt-ID, Wert = boolean). Reine Anzeige-Steuerung, lebt
// außerhalb von renderBoard() und übersteht daher dessen Neuaufbauten (z. B.
// nach einer Zuordnungs- oder Prozent-Änderung im offenen Panel). Nicht
// persistiert — jede Sitzung startet mit eingeklappten Zeilen.
let boardRowOpen = {};

// toggleBoardRow: klappt das Detailpanel einer Projekt-Zeile auf bzw. zu.
// Parameter: pid (Projekt-ID). Keine Rückgabe.
function toggleBoardRow(pid){
  boardRowOpen[pid] = !boardRowOpen[pid];
  renderBoard();
  // Der Wochenbericht rendert dieselben Projektzeilen in einem eigenen
  // Container. Ohne diesen Aufruf merkte er sich den Klick zwar, zeigte die
  // Zeile aber erst nach einem Tab-Wechsel auf- bzw. zugeklappt.
  if(typeof renderWochenbericht === 'function') renderWochenbericht();
}

// statusPreviewText: liefert eine einzeilige Klartext-Vorschau eines
// Status-HTML-Werts (Tags entfernt, überflüssiger Leerraum/Zeilenumbrüche zu
// einem Leerzeichen zusammengefasst) für die eingeklappte Zeile — die volle
// Formatierung bleibt dem aufgeklappten Editor vorbehalten. Parameter: html
// (String). Rückgabe: String.
function statusPreviewText(html){
  if(!html) return '';
  const tmp = document.createElement('div');
  // Bereinigen, BEVOR der Wert ins DOM geht: Auch ein nicht eingehängtes
  // Element lädt Ressourcen und führt deren Fehler-Handler aus, ungefiltertes
  // innerHTML wäre hier also ein Einfallstor.
  tmp.innerHTML = sanitizeStatusHtml(html);
  // Zeilen- und Absatzgrenzen zuerst in Leerzeichen überführen: textContent
  // ignoriert sie, sonst klebte das letzte Wort einer Zeile am ersten der
  // nächsten ("… KW 40.Freigabe steht aus").
  tmp.querySelectorAll('br').forEach(el => el.replaceWith(document.createTextNode(' ')));
  tmp.querySelectorAll('p, div').forEach(el => el.append(document.createTextNode(' ')));
  return (tmp.textContent || tmp.innerText || '').replace(/\s+/g, ' ').trim();
}

// HINWEIS: statusBlur() ist entfallen. Seit der Kommentar-Editor ein
// <textarea> ist (renderCommentEditor/saveBoardComment), gab es keinen Aufrufer
// mehr; die Funktion schrieb ungefiltertes innerHTML in p.status und wäre beim
// erneuten Verdrahten ein Einfallstor gewesen.

// peopleByRole liegt jetzt im gemeinsamen Modul js/utils.js (benötigt auch
// die Projektplan-Seite, die board.js nicht lädt).

// roleClass: erzeugt CSS-Klassen für eine Rolle bzw. ein Rollen-Array
// (Rollenname kleingeschrieben, Leerzeichen → Bindestrich). Parameter: `role`
// (String oder Array). Rückgabe: Klassen-String, leer bei undefined.
function roleClass(role){
  if(Array.isArray(role)){
    return role.map(r=>'role-'+r.toLowerCase().replace(/\s+/g,'-')).join(' ');
  }
  return 'role-' + role.toLowerCase().replace(/\s+/g,'-');
}

// renderBoardRow: baut die eingeklappte Zeile eines Projekts (Nr., Name +
// Tags, Status-Vorschau, Avatar-Stapel der Zugeordneten, Phasen-Badge) sowie
// bei Bedarf das aufgeklappte Detailpanel darunter. Parameter: p (Projekt),
// allPeople (Array `{person, role}`, alle Rollen), locked (Boolean).
// Rückgabe: HTML-String.
// BOARD_OPTS: die Einstellungen der Projektliste. Sie zeigt alle
// Leistungsphasen (nicht nur die beauftragten) in der ausführlichen Fassung,
// aber nichts davon ist hier bearbeitbar — siehe nurAnsicht in
// renderBoardDrawer().
const BOARD_OPTS = { nurAnsicht: true };

function renderBoardRow(p, allPeople, locked, weekLabel, opts){
  const isOpen = !!boardRowOpen[p.id];
  const tags = Array.isArray(p.tags) ? p.tags : [];
  const tagsHtml = tags.map(t => `<span class="tag-chip">${esc(t)}</span>`).join('');
  const previewText = statusPreviewText(p.status);
  const isNew = p.statusState === 'new';

  // Avatar-Stapel der eingeklappten Zeile: nur tatsächlich zugeordnete
  // Personen (Zustand 1 = Haupt oder 2 = optional), volle Rollen-Matrix nur
  // im aufgeklappten Detailpanel (siehe renderBoardDrawer).
  const stackHtml = allPeople.map(entry=>{
    const state = p.assign[assignKey(entry.person.id, entry.role)] || 0;
    if(state === 0) return '';
    return `<span class="board-avatar ${roleClass(entry.role)} state-${state}" title="${esc(entry.person.fullName || entry.person.name)} · ${esc(entry.role)}">${esc(entry.person.name)}</span>`;
  }).join('');

  const aktLp = lpActiveList(p)[0];
  const aktPct = aktLp && p.lph[aktLp] !== undefined && p.lph[aktLp] !== '' ? p.lph[aktLp] : null;
  const phaseHtml = aktLp
    ? `<span class="phase-pill">${esc(aktLp)}${aktPct !== null ? ' · ' + esc(aktPct) + '%' : ''}</span>`
    : `<span class="phase-pill muted">Keine aktive LP</span>`;

  // Ziehbar und mit Griff: Die Reihenfolge innerhalb einer Gruppe und der
  // Wechsel zwischen Gruppen wurden zuvor im eigenen Tab "Projekte" gepflegt,
  // der dieselben Projekte ein zweites Mal auflistete. Beides geschieht jetzt
  // hier, in der einen Projektliste.
  let html = `<div class="board-row${isOpen ? ' open' : ''}" data-project-id="${p.id}" ${locked ? '' : 'draggable="true" ondragstart="handleDragStart(event)" ondragend="handleDragEnd(event)"'}>`;
  html += `<div class="board-row-main" onclick="toggleBoardRow('${p.id}')">`;
  html += locked ? '' : `<span class="drag-handle" title="Verschieben" onclick="event.stopPropagation()">${icon('grip')}</span>`;
  html += `<span class="board-chev">${icon('chevronRight')}</span>`;
  html += `<span class="board-nr">${esc(p.nr) || '<span class="hint" style="margin:0">ohne Nr.</span>'}</span>`;
  html += `<div class="board-name-wrap">
      <span class="board-name" onclick="event.stopPropagation();openProjectPlan('${p.id}')" title="Projektplan öffnen">${esc(p.name)}</span>
      ${typeof auftragsstatusChip === 'function' ? auftragsstatusChip(p) : ''}
      ${tagsHtml}
      <div class="board-status-line">${isNew ? '<span class="board-newdot" title="Neuer Kommentar"></span>' : ''}${previewText ? esc(previewText) : '<span class="hint" style="margin:0">Kein Kommentar</span>'}</div>
    </div>`;
  html += `<div class="board-avatar-stack">${stackHtml}</div>`;
  html += phaseHtml;
  // Listenoperationen am Zeilenende (aus dem früheren Projekte-Tab). Das
  // Bearbeiten der Projektangaben führt in den Projektbereich, wo sie ihren
  // einen Ort haben — hier steht nur, was die LISTE betrifft.
  html += `<div class="board-row-actions" onclick="event.stopPropagation()">
      <button type="button" class="secondary small" onclick="openProjectPlan('${p.id}')" title="Projektbereich öffnen">Öffnen</button>
      ${locked ? '' : `<button type="button" class="danger small" onclick="delProjectFromList('${p.id}')" title="Projekt aus dieser Sitzung löschen">Löschen</button>`}
    </div>`;
  html += `</div>`; // board-row-main

  if(isOpen) html += renderBoardDrawer(p, allPeople, locked, weekLabel, opts);
  html += `</div>`; // board-row
  return html;
}

// ---------- Kommentar-Editor (Board-Schublade und Wochenbericht) ----------
// Der Kommentar eines Projekts zu einer Sitzung (p.status) wird nicht mehr in
// einem contenteditable-Feld mit document.execCommand-Leiste bearbeitet,
// sondern in einem normalen Textfeld mit ausdrücklichem Speichern. Dazu
// kommen Verfasser und Zeitstempel (p.statusAuthor/p.statusAt, Spalten
// status_author/status_at in der Tabelle projects) sowie der scrollbare
// Verlauf der vorangegangenen Sitzungen aus projectStatusHistory()
// (js/utils.js), der bisher nur auf der Projektplan-Seite sichtbar war.
//
// Zusammenspiel mit cloneWeek() (js/weeks.js): Beim Duplizieren einer Sitzung
// wird der Kommentartext NICHT mehr mitkopiert — man schreibt den Kommentar
// dieser Woche, statt den der Vorwoche zu überschreiben. Wenn sich nichts
// geändert hat, übernimmt der Knopf "übernehmen" am jeweiligen Verlaufs-
// Eintrag dessen Text in das Textfeld.

// boardCommentBaseline: der zuletzt gespeicherte Kommentartext je Projekt-ID,
// Vergleichsbasis für die "ungespeichert"-Anzeige und für "Verwerfen".
// Wird bei jedem Aufbau der Schublade neu gesetzt.
let boardCommentBaseline = {};

// commentAuthorLine: Kopfzeile des Editors — wer den gespeicherten Kommentar
// verfasst hat und wann. Bestandskommentare ohne Verfasser (vor der
// Einführung von status_author) werden als "unbekannt" ausgewiesen, statt
// stillschweigend die aktuell angemeldete Person zu behaupten.
// Parameter: p (Projekt). Rückgabe: HTML-String.
function commentAuthorLine(p){
  const hasText = statusPreviewText(p.status) !== '';
  if(!hasText){
    const me = (currentUser && currentUser.displayName) || '';
    return me
      ? `<span class="comment-who"><span class="comment-av">${esc(initialsForName(me))}</span>${esc(me)}</span><span class="comment-sep">·</span><span>neuer Eintrag</span>`
      : `<span>neuer Eintrag</span>`;
  }
  const author = p.statusAuthor || '';
  const at = p.statusAt ? formatCommentStamp(p.statusAt) : '';
  const who = author
    ? `<span class="comment-who"><span class="comment-av">${esc(initialsForName(author))}</span>${esc(author)}</span>`
    : `<span class="comment-who comment-unknown">Verfasser unbekannt</span>`;
  return who + (at ? `<span class="comment-sep">·</span><span>${esc(at)}</span>` : '');
}

// formatCommentStamp: ISO-Zeitstempel als "TT.MM.JJJJ, HH:MM". Parameter:
// iso (String). Rückgabe: String (leer bei ungültigem Wert).
function formatCommentStamp(iso){
  const d = new Date(iso);
  if(isNaN(d.getTime())) return '';
  const pad = n => String(n).padStart(2, '0');
  return `${pad(d.getDate())}.${pad(d.getMonth()+1)}.${d.getFullYear()}, ${pad(d.getHours())}:${pad(d.getMinutes())}`;
}

// renderCommentEditor: der vollständige Kommentarbereich der Schublade —
// Editor mit Kopf-/Fußzeile und darunter der eingeklappte, scrollbare
// Verlauf.
//
// In der dichten Fassung (dicht = true, nur Wochenbericht) entfallen zwei
// Elemente, die dort je Karte rund 60 px kosteten, ohne etwas beizutragen:
//   * Die eigene KOPFZEILE mit Verfasser und Tastenkürzel. Der Verfasser
//     rückt in die Fußzeile neben die Knöpfe — dieselbe Angabe, eine Zeile
//     weniger. Die Tastenkürzel stehen als Titel am Textfeld.
//   * Der Aufklapper "FRÜHERE SITZUNGEN". Er ist seit dem Verlauf eine
//     Doppelung: Der zeigt dieselben Kommentare und mehr. Seine einzige
//     eigene Funktion — einen früheren Text übernehmen — hat der Verlauf
//     übernommen (renderProjektVerlauf(), js/utils.js).
// Parameter: p (Projekt), weekLabel (String), locked (Boolean),
// dicht (Boolean). Rückgabe: HTML-String.
function renderCommentEditor(p, weekLabel, locked, dicht){
  const text = statusHtmlToEditText(p.status || '');
  boardCommentBaseline[p.id] = text;

  if(locked){
    return `<div class="comment-block" data-pid="${esc(p.id)}">
        <div class="comment-head-line">${commentAuthorLine(p)}</div>
        <div class="comment-readonly">${text ? sanitizeStatusHtml(p.status) : '<span class="hint">Kein Kommentar erfasst.</span>'}</div>
      </div>`;
  }

  const kopf = dicht ? '' : `<div class="comment-editor-head">
          ${commentAuthorLine(p)}
          <span class="comment-kbd">Strg+↵ speichern · Esc verwerfen</span>
        </div>`;
  const verfasserImFuss = dicht ? `<span class="comment-foot-author">${commentAuthorLine(p)}</span>` : '';
  // Der frühere Aufklapper "Frühere Sitzungen" ist entfallen. Er zeigte nur
  // den Kommentartext und auch den nur für Sitzungen mit tatsächlicher
  // Änderung — eine dritte, engere Auswahl neben dem Verlauf im
  // Wochenbericht und dem Dialog im Projektbereich. Alle drei Stellen nutzen
  // jetzt renderProjektVerlauf() (js/utils.js) und zeigen damit dasselbe.
  const verlaufAufklapper = '';

  return `<div class="comment-block" data-pid="${esc(p.id)}">
      <div class="comment-editor">
        ${kopf}
        <textarea class="comment-field" rows="3" placeholder="Was gibt es diese Woche zu diesem Projekt?"
          ${dicht ? 'title="Strg+↵ speichern · Esc verwerfen"' : ''}
          oninput="markCommentDirty(this)"
          onkeydown="boardCommentKey(event, this)"
          onblur="boardCommentBlur(this)">${esc(text)}</textarea>
        <div class="comment-editor-foot">
          <button type="button" class="small" onmousedown="event.preventDefault()" onclick="saveBoardComment(this)">Speichern</button>
          <button type="button" class="secondary small"
            onmousedown="event.preventDefault();discardBoardComment(this)">Verwerfen</button>
          ${verfasserImFuss}
          <span class="comment-foot-spacer"></span>
          <span class="comment-dirty" hidden>● ungespeichert</span>
        </div>
      </div>
      ${verlaufAufklapper}
    </div>`;
}

// pendingCommentFocus: Projekt-ID des Kommentarfelds, in das der Nutzer gerade
// klickt. Hintergrund: Ein Klick in ein anderes Kommentarfeld löst zuerst den
// Fokusverlust des bisherigen aus; dessen Blur-Netz speichert und rendert
// Board UND Wochenbericht neu — das angeklickte Feld ist dann längst durch ein
// neues Element ersetzt, der Klick geht ins Leere und die nächsten
// Tastenanschläge landen nirgends. Die Absicht wird deshalb in der
// Capture-Phase festgehalten und nach dem Neu-Rendern wiederhergestellt.
let pendingCommentFocus = null;

document.addEventListener('mousedown', function(e){
  const field = e.target && e.target.closest ? e.target.closest('.comment-field') : null;
  const block = field && field.closest('.comment-block');
  pendingCommentFocus = block ? block.dataset.pid : null;
}, true);

// restorePendingCommentFocus: setzt den Fokus nach einem Neu-Rendern in das
// Kommentarfeld, das der Nutzer anklicken wollte, und stellt den Cursor ans
// Textende. Ohne gemerkte Absicht oder ohne Treffer passiert nichts.
// Keine Parameter, keine Rückgabe.
function restorePendingCommentFocus(){
  const pid = pendingCommentFocus;
  pendingCommentFocus = null;
  if(!pid) return;
  const sel = '.comment-block[data-pid="' + ((window.CSS && CSS.escape) ? CSS.escape(pid) : pid) + '"] .comment-field';
  // Board und Wochenbericht rendern dieselben Projekte; das sichtbare Feld
  // gewinnt (offsetParent ist null, solange der Tab ausgeblendet ist).
  const kandidaten = Array.from(document.querySelectorAll(sel));
  const field = kandidaten.find(f => f.offsetParent !== null) || kandidaten[0];
  if(!field) return;
  field.focus();
  const ende = field.value.length;
  try { field.setSelectionRange(ende, ende); } catch(e){ /* unterstützt nicht jedes Feld */ }
}

// commentParts: löst von einem beliebigen Bedienelement aus dessen
// Kommentar-Block auf und liefert Projekt-ID, Textfeld und Hinweis-Element.
//
// Warum nicht über Element-IDs: Projektboard und Wochenbericht rendern
// dieselben Projekte gleichzeitig (der Bericht nutzt renderBoardDrawer()
// wieder). Feste IDs wie "bc_text_<pid>" wären dann doppelt vergeben, und
// document.getElementById() liefert immer den ersten Treffer — im
// Wochenbericht getippter Text wurde dadurch beim Speichern durch den Inhalt
// des (unsichtbaren) Board-Felds ersetzt. Über closest() trifft jede Aktion
// garantiert den Block, in dem sie ausgelöst wurde.
// Parameter: el (Element innerhalb des Blocks). Rückgabe: Objekt oder null.
function commentParts(el){
  if(!el || !el.closest) return null;
  // Erst der eigene Block; findet sich keiner, der Block derselben Karte.
  // Gebraucht seit der Verlauf (js/wochenbericht/wochenbericht.js) einen
  // "übernehmen"-Knopf trägt: Er steht UNTER dem Spaltenraster und damit
  // ausserhalb von .comment-block, gehört aber zum selben Projekt.
  const block = el.closest('.comment-block')
    || (el.closest('.report-card') || document).querySelector('.comment-block');
  if(!block) return null;
  return {
    block,
    pid: block.dataset.pid,
    field: block.querySelector('.comment-field'),
    dirty: block.querySelector('.comment-dirty')
  };
}

// markCommentDirty: blendet den "ungespeichert"-Hinweis ein bzw. aus, indem
// der Feldinhalt mit dem zuletzt gespeicherten Stand verglichen wird.
// Parameter: el (Element im Kommentar-Block). Keine Rückgabe.
function markCommentDirty(el){
  const c = commentParts(el);
  if(!c || !c.field || !c.dirty) return;
  c.dirty.hidden = c.field.value === (boardCommentBaseline[c.pid] || '');
}

// saveBoardComment: schreibt den Feldinhalt als neuen Kommentar des Projekts,
// samt Verfasser (angemeldete Person) und Zeitstempel, und rendert neu.
// Wird nichts geändert, passiert nichts — ein unverändertes Feld soll weder
// den Zeitstempel noch den Verfasser überschreiben. Parameter: el (Element im
// Kommentar-Block). Rückgabe: keine.
function saveBoardComment(el){
  if(guardWeekLocked()) return;
  const c = commentParts(el);
  if(!c || !c.field) return;
  const text = c.field.value;
  if(text === (boardCommentBaseline[c.pid] || '')) return;

  const p = currentWeek().projects.find(x => x.id === c.pid);
  if(!p) return;

  const html = statusEditTextToHtml(text);
  const before = (p.status || '').trim();
  if(before === '' && html !== '') p.statusState = 'new';
  else if(html === '') delete p.statusState;

  p.status = html;
  if(html === ''){
    p.statusAuthor = '';
    p.statusAt = '';
  } else {
    p.statusAuthor = (currentUser && currentUser.displayName) || '';
    p.statusAt = new Date().toISOString();
  }
  boardCommentBaseline[c.pid] = text;
  save();
  renderBoard();
  if(typeof renderWochenbericht === 'function') renderWochenbericht();
  // Beide Ansichten wurden komplett neu aufgebaut — den Fokus in das Feld
  // zurückholen, das der Nutzer gerade anklicken wollte.
  restorePendingCommentFocus();
}

// discardBoardComment: setzt das Textfeld auf den zuletzt gespeicherten Stand
// zurück. Parameter: el (Element im Kommentar-Block). Keine Rückgabe.
function discardBoardComment(el){
  const c = commentParts(el);
  if(!c || !c.field) return;
  c.field.value = boardCommentBaseline[c.pid] || '';
  markCommentDirty(c.field);
  c.field.focus();
}

// boardCommentKey: Tastaturbedienung des Kommentarfelds — Strg/Cmd+Enter
// speichert, Escape verwirft. Ein einfaches Enter bleibt der Zeilenumbruch.
// Parameter: e (KeyboardEvent), el (das Textfeld). Keine Rückgabe.
function boardCommentKey(e, el){
  if(e.key === 'Enter' && (e.ctrlKey || e.metaKey)){
    saveBoardComment(el);
    e.preventDefault();
  } else if(e.key === 'Escape'){
    discardBoardComment(el);
    e.preventDefault();
  }
}

// boardCommentBlur: Sicherheitsnetz — wer tippt und dann woanders hin klickt,
// verliert seinen Text nicht. Entspricht dem früheren Verhalten von
// statusBlur(). Bedienelemente, bei denen der Fokusverlust stören würde
// ("Verwerfen", "übernehmen", die Anwesenheits-Kacheln), unterdrücken ihn per
// onmousedown/preventDefault. Parameter: el (das Textfeld). Keine Rückgabe.
function boardCommentBlur(el){
  saveBoardComment(el);
}

// takeCommentFromHistory: übernimmt den Kommentartext einer früheren Sitzung
// in das Textfeld der aktuellen — für den häufigen Fall "gegenüber der
// Vorwoche unverändert". Gespeichert wird erst durch Speichern (oder das
// Blur-Netz), sodass der Text vorher noch angepasst werden kann. Parameter:
// el (der geklickte Knopf), weekLabel (Bezeichnung der Quell-Sitzung).
// Keine Rückgabe.
function takeCommentFromHistory(el, weekLabel){
  if(guardWeekLocked()) return;
  const c = commentParts(el);
  if(!c || !c.field) return;
  const p = currentWeek().projects.find(x => x.id === c.pid);
  if(!p || !p.projectUid) return;

  // Zwei Quellen, weil zwei Aufrufer: Der Aufklapper "Frühere Sitzungen"
  // listet projectStatusHistory() — also nur Sitzungen, in denen sich der
  // Text tatsächlich GEÄNDERT hat. Der Verlauf im Wochenbericht zeigt dagegen
  // JEDE frühere Sitzung. Verwies der Knopf dort auf eine Woche ohne
  // Textänderung, fand find() nichts und das Übernehmen blieb wirkungslos.
  const entry = projectStatusHistory(p.projectUid).find(e => e.week.label === weekLabel);
  const html = entry
    ? entry.html
    : (v => v ? sanitizeStatusHtml(v.project.status || '') : null)(
        projectVersionsForUid(p.projectUid).find(v => v.week.label === weekLabel));
  if(html === null || html === undefined) return;

  c.field.value = statusHtmlToEditText(html);
  markCommentDirty(c.field);
  c.field.focus();
}

// renderBoardDrawer: baut das aufgeklappte Detailpanel einer Projekt-Zeile —
// links der volle Status-Editor (unverändert gegenüber der früheren Matrix-
// Zelle) plus alle LPH-Balken, rechts die vollständige Rollen-/Personen-
// Zuordnung als klickbare Avatar-Chips. Parameter: p (Projekt), allPeople
// (Array `{person, role}`), locked (Boolean). Rückgabe: HTML-String.
function renderBoardDrawer(p, allPeople, locked, weekLabel, opts){
  // opts.dicht: die dichte Fassung der Karte (Wochenbericht). Sie zeigt
  // dieselben Angaben und dieselben Bedienelemente wie die normale, nur
  // enger gesetzt: die Leistungsphasen stehen als EINE Leiste nebeneinander
  // statt als bis zu zehn Zeilen untereinander, und die Beteiligten rücken
  // darunter statt in eine eigene Spalte. Die Zeilenform bestimmte bisher die
  // Höhe der ganzen Karte — bei 29 Projekten ergab das rund 17
  // Bildschirmseiten, durch die man sich im Teammeeting hindurchscrollen
  // musste. Im Projektboard, wo die Karte nur beim Aufklappen einer Zeile
  // erscheint, bleibt es bei der ausführlichen Fassung.
  //
  // nurBeauftragteLph: im Wochenbericht werden nur die Leistungsphasen
  // gezeigt, für die das Projekt beauftragt ist (p.beauftragteLP, gesetzt
  // beim Anlegen oder im Honorar-Dialog). Ist nichts hinterlegt — was auf
  // alle Bestandsprojekte zutrifft —, bleibt es bei der vollständigen Liste,
  // sonst stünde dort gar nichts. Im Projektboard sind immer alle Phasen zu
  // sehen.
  // opts.nurAnsicht: die Karte zeigt, sie erfasst nicht.
  //
  // Kommentar, Fortschritt je Leistungsphase und die Zuordnung der
  // Beteiligten entstehen in der wöchentlichen Besprechung und werden deshalb
  // allein im Wochenbericht gepflegt. Zuvor waren dieselben drei Angaben an
  // drei Stellen bearbeitbar (Projektboard, Wochenbericht, Projektbereich) —
  // niemand wusste, welche die richtige ist, und zwei Personen konnten
  // dasselbe Feld an verschiedenen Stellen ändern. Dieselbe Karte, dieselben
  // Werte, nur ohne Eingabefelder und mit einem Verweis dorthin, wo sie
  // gepflegt werden. Eine gesperrte Sitzung wirkt weiterhin zusätzlich.
  const ansicht = !!(opts && opts.nurAnsicht);
  const starr = ansicht || locked;

  const beauftragt = Array.isArray(p.beauftragteLP) ? p.beauftragteLP : [];
  const nurBeauftragte = !!(opts && opts.nurBeauftragteLph) && beauftragt.length > 0;
  const sichtbareLphs = nurBeauftragte ? LPHS.filter(l => beauftragt.includes(l)) : LPHS;
  const aktLp = lpActiveList(p)[0];
  const lphRows = sichtbareLphs.map(l=>{
    const v = (p.lph[l]!==undefined && p.lph[l]!="") ? p.lph[l] : "";
    const aktiv = l === aktLp;
    const inputAttr = starr ? 'readonly tabindex="-1"' : `onchange="editLph('${p.id}','${l}',this.value)"`;
    const pct = v !== "" ? Math.min(100, parseFloat(v)||0) : 0;
    const feld = ansicht
      ? `<span class="board-lph-wert">${v === "" ? '–' : esc(v) + ' %'}</span>`
      : `<input type="text" value="${esc(v)}" ${inputAttr} placeholder="-">`;
    return `<div class="board-lph-row${aktiv ? ' lp-aktiv' : ''}${ansicht ? ' is-ansicht' : ''}${locked ? ' locked-cell' : ''}"${aktiv ? ' title="Amtierende Leistungsphase"' : ''}>
        <span class="board-lph-label">${esc(l)}</span>
        <div class="bar"><div style="width:${pct}%;background:${getProgressColor(pct)}"></div></div>
        ${feld}
      </div>`;
  }).join('');

  // lphLeiste: dieselben Werte wie lphRows, nur nebeneinander. Jede Phase ist
  // ein schmales Feld mit der Phasennummer und ihrem Eingabefeld; der
  // Füllstand steckt als senkrechter Verlauf im Feld-Hintergrund, damit der
  // Fortschrittsbalken nicht verlorengeht. Die amtierende Phase bleibt
  // hervorgehoben.
  const lphLeiste = sichtbareLphs.map(l=>{
    const v = (p.lph[l]!==undefined && p.lph[l]!="") ? p.lph[l] : "";
    const aktiv = l === aktLp;
    const inputAttr = starr ? 'readonly tabindex="-1"' : `onchange="editLph('${p.id}','${l}',this.value)"`;
    const pct = v !== "" ? Math.min(100, parseFloat(v)||0) : 0;
    // Deckkraft 4d (30 %): Bei 33 (20 %) war der Füllstand auf dem dunklen
    // Feld-Hintergrund praktisch nicht zu sehen, und damit hätte die Leiste
    // den Balken der Zeilenform ersatzlos verloren.
    const fuellung = pct > 0
      ? ` style="background:linear-gradient(to top, ${getProgressColor(pct)}4d ${pct}%, transparent ${pct}%)"`
      : '';
    return `<div class="board-lph-cell${aktiv ? ' lp-aktiv' : ''}${locked ? ' locked-cell' : ''}"${fuellung} title="${esc(l)}${aktiv ? ' · amtierende Leistungsphase' : ''}">
        <span class="board-lph-cell-label">${esc(l.replace('LPH ', ''))}</span>
        <input type="text" value="${esc(v)}" ${inputAttr} placeholder="-">
      </div>`;
  }).join('');

  const roleRows = ROLES.map(r=>{
    const entries = allPeople.filter(e=>e.role===r);
    const chips = entries.length ? entries.map(entry=>{
      const state = p.assign[assignKey(entry.person.id, entry.role)] || 0;
      const click = starr ? '' : `onclick="cycleAssign('${p.id}','${entry.person.id}','${entry.role}')"`;
      return `<span class="board-avatar ${roleClass(entry.role)} state-${state}${ansicht ? ' is-ansicht' : ''}${locked ? ' locked-cell' : ''}" ${click} title="${esc(entry.person.fullName || entry.person.name)}">${esc(entry.person.name)}</span>`;
    }).join('') : `<span class="hint" style="margin:0">Niemand hinterlegt</span>`;
    return `<div class="board-role-row"><span class="board-role-label ${roleClass(r)}">${esc(r)}</span><div class="board-role-chips">${chips}</div></div>`;
  }).join('');

  // Dichte Fassung: zwei Spalten — links der Kommentar, rechts die
  // Leistungsphasen-Leiste und darunter die Beteiligten.
  //
  // Zwischenzeitlich waren es drei Spalten, weil die gestapelten Beteiligten
  // die Karte höher machten und damals 29 Karten untereinander standen. Seit
  // der Wochenbericht eine Tagesordnung ist, ist immer nur EIN Projekt
  // geöffnet — die Höhe der Karte kostet nichts mehr, während die Breite
  // knapp ist: Neben der Projektliste blieben für drei Spalten nur noch
  // 137 px für die Beteiligten, zu wenig für Rollenname und Kürzel.
  //
  // Die Beteiligten behalten ihre Zeile je Rolle — anders als im Entwurf, wo
  // sie zu einer flachen Reihe zusammengefasst waren: Ein Kürzel kann in
  // mehreren Rollen vorkommen, und cycleAssign() braucht die Rolle. Ohne sie
  // wäre beim Klicken nicht erkennbar, welche Zuordnung man durchschaltet.
  if(opts && opts.dicht){
    return `<div class="board-drawer board-drawer-dicht">
        <div class="board-drawer-grid">
          <div class="drawer-col drawer-col-comment">
            <h4>Kommentar${weekLabel ? ' zur Sitzung ' + esc(weekLabel) : ''}</h4>
            ${renderCommentEditor(p, weekLabel, locked, true)}
          </div>
          <div class="drawer-col drawer-col-kompakt">
            <h4>${nurBeauftragte ? 'Beauftragte Leistungsphasen' : 'Leistungsphasen'}</h4>
            <div class="board-lph-leiste">${lphLeiste}</div>
            <h4 class="drawer-h4-zweit">Beteiligte</h4>
            <div class="board-role-mini">${roleRows}</div>
          </div>
        </div>
        ${typeof renderProjektVerlauf === 'function' ? renderProjektVerlauf(p, weekLabel, locked) : ''}
      </div>`;
  }

  // Die drei Blöcke stehen als gleichrangige Geschwister im Raster, damit der
  // aufrufende Kontext ihre Anordnung allein über CSS bestimmen kann: das
  // Projektboard stellt Kommentar und Leistungsphasen übereinander in die
  // linke Spalte (grid-template-areas in styles.css), der Wochenbericht
  // nebeneinander in drei Spalten. Inhalt und Reihenfolge sind in beiden
  // Fällen identisch.
  return `<div class="board-drawer">
      <div class="board-drawer-grid">
        <div class="drawer-col drawer-col-comment">
          <h4>Kommentar${weekLabel ? ' zur Sitzung ' + esc(weekLabel) : ''}</h4>
          ${ansicht ? renderKommentarAnsicht(p, locked) : renderCommentEditor(p, weekLabel, locked)}
        </div>
        <div class="drawer-col drawer-col-lph">
          <h4>${nurBeauftragte ? 'Beauftragte Leistungsphasen' : 'Leistungsphasen'}</h4>
          <div class="board-lph-list">${lphRows}</div>
        </div>
        <div class="drawer-col drawer-col-people">
          <h4>Beteiligte</h4>
          <div class="board-role-mini">${roleRows}</div>
        </div>
      </div>
      ${ansicht ? renderBerichtVerweis(p, locked) : ''}
      ${typeof renderProjektVerlauf === 'function' ? renderProjektVerlauf(p, weekLabel, locked) : ''}
    </div>`;
}

// renderKommentarAnsicht: der Kommentar der laufenden Sitzung, nur zu lesen.
// Parameter: p (Projekt), locked. Rückgabe: HTML-String.
function renderKommentarAnsicht(p, locked){
  const text = sanitizeStatusHtml(p.status || '');
  return `<div class="status-edit is-ansicht locked-cell">${text ||
    '<span class="hint" style="margin:0">Für diese Sitzung ist noch kein Kommentar erfasst.</span>'}</div>`;
}

// renderBerichtVerweis: der Weg zur Bearbeitung. Der Verweis springt in den
// Wochenbericht UND stellt dort dieses Projekt ein — ohne das müsste man es
// in einer Liste von dreißig wiederfinden.
// Parameter: p (Projekt), locked. Rückgabe: HTML-String.
function renderBerichtVerweis(p, locked){
  if(locked) return '<div class="drawer-verweis"><span class="hint" style="margin:0">Die Sitzung ist gesperrt.</span></div>';
  const uid = esc(p.projectUid || '');
  return `<div class="drawer-verweis">
      <span class="hint" style="margin:0">Kommentar, Fortschritt und Zuordnung werden in der Besprechung erfasst.</span>
      <button type="button" class="plan-verweis" onclick="springZumWochenbericht('${uid}')">Im Wochenbericht bearbeiten →</button>
    </div>`;
}

// renderBoard: baut die Listenansicht des Boards auf (eine Bubble-Card je
// Projektgruppe mit den Projekten als Zeilen, siehe renderBoardRow()). Liest
// die aktuelle Woche, gruppiert Projekte nach Gruppe und sortiert sie nach
// `order`. Bei gesperrten Sitzungen werden alle Bearbeitungs-Handler
// deaktiviert und ein Hinweis samt Entsperren-Button angezeigt. Aktualisiert
// außerdem die Legende mit den vollständigen Namen und Anwesenheiten. Keine
// Parameter, keine Rückgabe.
function renderBoard(){
  const w = currentWeek();
  const container = document.getElementById('boardTable');
  // Ohne geladene Sitzung (Ladefehler, oder die letzte Sitzung wurde von
  // jemand anderem gelöscht) griff der Code ungeprüft auf w.projects zu — der
  // TypeError riss renderAll() mit und ließ die Oberfläche halb gerendert
  // stehen. Alle Schwester-Renderer prüfen das bereits selbst.
  if(!w){
    if(container) container.innerHTML = '<div class="hint">Keine Sitzung geladen.</div>';
    return;
  }
  const locked = isWeekLocked(w);
  const grouped = peopleByRole(w);
  const allPeople = [];
  ROLES.forEach(r=> grouped[r].forEach(entry=>allPeople.push(entry)));

  // Projekte nach Gruppen (z.B. "Aktive Projekte") zusammenfassen.
  //
  // Alle vier Standardgruppen werden vorbelegt, auch wenn sie leer sind: Sonst
  // entstünde für eine leer geräumte Gruppe keine Ablagefläche, und ein
  // Projekt ließe sich nicht mehr dorthin ziehen. (Aus dem früheren
  // Projekte-Tab übernommen, der hierin aufgegangen ist.)
  const groups = {};
  GROUP_ORDER.forEach(g => { groups[g] = []; });
  w.projects.forEach(p=>{ (groups[p.group]||(groups[p.group]=[])).push(p); });

  // Projekte nach ihrer Reihenfolge sortieren
  Object.keys(groups).forEach(g=>{
    groups[g].sort((a, b) => (a.order || 0) - (b.order || 0));
  });

  let html = "";
  sortGroups(Object.keys(groups)).forEach(g=>{
    html += `<div class="section-title">${esc(g)}</div>`;
    // Klasse "projects-sortable": Die Ablage-Handler aus
    // js/projects/projects.js (handleDrop/reorderProjects) finden ihre
    // Container über diesen Selektor. Sie bleiben dort, weil sie auch die
    // Reihenfolge-Logik für die Daten enthalten — hier wird nur dieselbe
    // Ablagefläche aufgespannt.
    html += `<div class="board-list projects-sortable" data-group="${esc(g)}" ${locked ? '' : 'ondragover="handleDragOver(event)" ondrop="handleDrop(event)"'}>`;
    groups[g].forEach(p=>{ html += renderBoardRow(p, allPeople, locked, w.label, BOARD_OPTS); });
    if(groups[g].length === 0) html += `<div class="hint" style="padding:6px 2px 12px">Keine Projekte — Projekt hierher ziehen.</div>`;
    html += `</div>`;
  });
  // Sperr-Hinweis über der Projektliste. Er stand früher im Container der
  // Kürzel-Legende unter dem Board; seit die Legende entfallen ist, gehört er
  // dorthin, wo er gilt — über die Liste, die man nicht bearbeiten kann.
  if(locked){
    html = `<div class="lock-notice">
      Diese Sitzung ist gesperrt. Bearbeiten nur nach Entsperren möglich.
      <button type="button" class="secondary small" onclick="unlockCurrentWeek()">Entsperren</button>
    </div>` + html;
  }
  container.innerHTML = html;
}

// cycleAssign: wechselt die Zuweisung einer Person zu einem Projekt zyklisch
// durch die Zustände 0=keine → 1=Haupt → 2=optional → 0. Parameter `pid`
// (Projekt-ID), `personId`, `role`; bei Zustand 0 wird der Eintrag gelöscht.
// Keine Rückgabe.
function cycleAssign(pid, personId, role){
  if(guardWeekLocked()) return;
  const p = currentWeek().projects.find(x=>x.id===pid);
  const key = assignKey(personId, role);
  const cur = p.assign[key]||0;
  const next = (cur+1)%3;
  if(next===0) delete p.assign[key]; else p.assign[key]=next;
  save(); renderBoard(); renderWochenbericht();
}

// editLph: setzt oder entfernt den Prozentwert einer Leistungsphase für ein
// Projekt. Parameter: `pid` (Projekt-ID), `lph` (Leistungsphasen-Schlüssel),
// `val` (Eingabewert). Leere/`%`-Werte werden bereinigt; keine Rückgabe.
function editLph(pid,lph,val){
  if(guardWeekLocked()) return;
  const p = currentWeek().projects.find(x=>x.id===pid);
  val = val.trim();
  if(val==="") delete p.lph[lph];
  else p.lph[lph]=val.replace('%','');
  save(); renderBoard(); renderWochenbericht();
}

// editProj: aktualisiert ein Feld eines Projekts; für Status wird zusätzlich
// ein flag `statusState` gesetzt (='new' beim Anlegen eines neuen Kommentars),
// wenn zuvor noch kein Status existierte. Parameter: `pid` (Projekt-ID),
// `field` (Feldname), `val` (neuer Wert). Keine Rückgabe.
function editProj(pid,field,val){
  if(guardWeekLocked()) return;
  const p = currentWeek().projects.find(x=>x.id===pid);
  if(!p) return;
  if(field==='status'){
    const before = (p.status||"").trim();
    const after = val.trim();
    if(before === "" && after !== ""){
      p.statusState = 'new';
    } else if(after === ""){
      delete p.statusState;
    }
  }
  p[field]=val; save();
}

// HINWEIS: delProj() ist entfallen — seit der neuen Zeilendarstellung des
// Boards gibt es dort keinen Löschen-Knopf mehr. Projekte werden im
// Projekte-Tab entfernt (delProjectFromList(), js/projects/projects.js).