feat(t-paliad-207): notes toggle — compact ⓘ hover by default, expand inline when "Hinweise anzeigen" is checked

m's ask 2026-05-18 18:21: per-rule descriptive notes ("Innerhalb von 1
Monat ab Zustellung der Klage. Drei mögliche Gründe…") are noisy in the
default timeline view. Make them optional — small ⓘ icon next to the
meta line by default with full text on hover; switch in the toggle bar
expands them inline when the user wants the wall of text.

**Renderer (verfahrensablauf-core.ts)** — `CardOpts.showNotes?: boolean`
gates two render paths:
- on  → `<div class="timeline-notes">…</div>` (today's behaviour)
- off → `<span class="timeline-note-hint" tabindex=0 role=note
        aria-label=… title=…>ⓘ</span>` inside the meta line (browser
        title for hover, aria-label for screen readers, tabindex for
        keyboard accessibility)

Pass-through wired in renderColumnsBody too so the columns view picks
up the toggle equally.

**Toggle UI** — added a checkbox row to the existing `fristen-view-toggle`
bar on both /tools/verfahrensablauf and /tools/fristenrechner:
"Hinweise anzeigen" / "Show details". CSS modifier
`.fristen-notes-option` separates it from the radio view-picker with
a leading border-left.

**State** — `paliad.fristen.notes-show` localStorage key (shared
between both pages so the preference carries across), default off,
re-render on flip.

i18n: 1 new key DE + EN (deadlines.notes.show). Build clean.

frontend/src/client/fristenrechner.ts

@@ -57,6 +57,19 @@ type ProcedureView = "timeline" | "columns";
 // HLC team than the single vertical line.
 let procedureView: ProcedureView = "columns";
 
+// Notes toggle — off by default; per-rule notes render as a compact
+// ⓘ hover icon. Flipped on, they expand under each card. Choice is
+// localStorage-persisted (paliad.fristen.notes-show key shared with
+// /tools/verfahrensablauf so the preference carries across both).
+const NOTES_PREF_KEY = "paliad.fristen.notes-show";
+function readNotesPref(): boolean {
+  try { return localStorage.getItem(NOTES_PREF_KEY) === "1"; } catch { return false; }
+}
+function writeNotesPref(on: boolean): void {
+  try { localStorage.setItem(NOTES_PREF_KEY, on ? "1" : "0"); } catch { /* no-op */ }
+}
+let showNotes = readNotesPref();
+
 onLangChange(() => {
   if (lastResponse) renderProcedureResults(lastResponse);
   // Update trigger event name if a proceeding is selected
@@ -391,8 +404,8 @@ function renderProcedureResults(data: DeadlineResponse) {
   </div>`;
 
   const bodyHtml = procedureView === "columns"
-    ? renderColumnsBody(data, { editable: true })
-    : renderTimelineBody(data, { showParty: true, editable: true });
+    ? renderColumnsBody(data, { editable: true, showNotes })
+    : renderTimelineBody(data, { showParty: true, editable: true, showNotes });
 
   container.innerHTML = headerHtml + bodyHtml;
   printBtn.style.display = "block";
@@ -661,6 +674,18 @@ document.addEventListener("DOMContentLoaded", () => {
   const saveBtn = document.getElementById("fristen-save-cta");
   if (saveBtn) saveBtn.addEventListener("click", openSaveModal);
 
+  // Notes toggle — restores last preference on load + re-renders when
+  // the user flips it. Lives in the same toggle bar as the view picker.
+  const notesShowCb = document.getElementById("fristen-notes-show") as HTMLInputElement | null;
+  if (notesShowCb) {
+    notesShowCb.checked = showNotes;
+    notesShowCb.addEventListener("change", () => {
+      showNotes = notesShowCb.checked;
+      writeNotesPref(showNotes);
+      if (lastResponse) renderProcedureResults(lastResponse);
+    });
+  }
+
   // View toggle (timeline vs. columns layout) for procedure mode.
   initViewToggle();
 

frontend/src/client/i18n.ts

@@ -300,6 +300,7 @@ const translations: Record<Lang, Record<string, string>> = {
     "deadlines.view.label": "Ansicht:",
     "deadlines.view.timeline": "Zeitstrahl",
     "deadlines.view.columns": "Spalten",
+    "deadlines.notes.show": "Hinweise anzeigen",
     "deadlines.col.proactive": "Proaktiv",
     "deadlines.col.court": "Gericht",
     "deadlines.col.reactive": "Reaktiv",
@@ -2909,6 +2910,7 @@ const translations: Record<Lang, Record<string, string>> = {
     "deadlines.view.label": "View:",
     "deadlines.view.timeline": "Timeline",
     "deadlines.view.columns": "Columns",
+    "deadlines.notes.show": "Show details",
     "deadlines.col.proactive": "Proactive",
     "deadlines.col.court": "Court",
     "deadlines.col.reactive": "Reactive",

frontend/src/client/verfahrensablauf.ts

@@ -25,6 +25,19 @@ let lastResponse: DeadlineResponse | null = null;
 type ProcedureView = "timeline" | "columns";
 let procedureView: ProcedureView = "columns";
 
+// Notes toggle — when off (default), per-rule descriptive notes render
+// as a compact ⓘ icon next to the meta line (hover for full text). When
+// on, the full notes block expands under each card. Choice persists in
+// localStorage so a reload or recalc keeps the user's preference.
+const NOTES_PREF_KEY = "paliad.fristen.notes-show";
+function readNotesPref(): boolean {
+  try { return localStorage.getItem(NOTES_PREF_KEY) === "1"; } catch { return false; }
+}
+function writeNotesPref(on: boolean): void {
+  try { localStorage.setItem(NOTES_PREF_KEY, on ? "1" : "0"); } catch { /* no-op */ }
+}
+let showNotes = readNotesPref();
+
 // Jurisdiction display prefix for the proceeding-summary chip + the
 // trigger-event placeholder. Same forum slugs the .proceeding-group
 // `data-forum` attribute carries in verfahrensablauf.tsx /
@@ -167,8 +180,8 @@ function renderResults(data: DeadlineResponse) {
   </div>`;
 
   const bodyHtml = procedureView === "columns"
-    ? renderColumnsBody(data)
-    : renderTimelineBody(data);
+    ? renderColumnsBody(data, { showNotes })
+    : renderTimelineBody(data, { showParty: true, showNotes });
 
   container.innerHTML = headerHtml + bodyHtml;
   if (printBtn) printBtn.style.display = "block";
@@ -299,6 +312,18 @@ document.addEventListener("DOMContentLoaded", () => {
 
   document.getElementById("fristen-print-btn")?.addEventListener("click", () => window.print());
 
+  // Notes toggle — restores last preference on load + re-renders when
+  // the user flips it. Lives in the same toggle bar as the view picker.
+  const notesShowCb = document.getElementById("fristen-notes-show") as HTMLInputElement | null;
+  if (notesShowCb) {
+    notesShowCb.checked = showNotes;
+    notesShowCb.addEventListener("change", () => {
+      showNotes = notesShowCb.checked;
+      writeNotesPref(showNotes);
+      if (lastResponse) renderResults(lastResponse);
+    });
+  }
+
   initViewToggle();
 
   onLangChange(() => {

frontend/src/client/views/verfahrensablauf-core.ts

@@ -219,6 +219,13 @@ export interface CardOpts {
   // verfahrensablauf abstract-browse surface keeps editable=false because
   // there's no anchor-override state on that page in Slice 1.
   editable?: boolean;
+  // showNotes controls how the per-rule descriptive notes render:
+  //   true  → expanded `<div class="timeline-notes">…</div>` below the card
+  //   false → compact ⓘ icon next to the meta line, full text on hover
+  //           (browser-native `title` attribute) and screen-reader-readable
+  // Page shells expose a toggle ("Hinweise anzeigen") that flips this and
+  // re-renders. Default false — notes are noisy on long timelines.
+  showNotes?: boolean;
 }
 
 export function deadlineCardHtml(dl: CalculatedDeadline, opts: CardOpts): string {
@@ -264,14 +271,19 @@ export function deadlineCardHtml(dl: CalculatedDeadline, opts: CardOpts): string
   }
 
   const noteText = getLang() === "en" ? (dl.notesEN || dl.notes) : dl.notes;
-  const notes = noteText
+  const showNotes = opts.showNotes === true;
+  const notesBlock = noteText && showNotes
     ? `<div class="timeline-notes">${noteText}</div>`
     : "";
+  const noteHint = noteText && !showNotes
+    ? `<span class="timeline-note-hint" tabindex="0" role="note" aria-label="${escAttr(noteText)}" title="${escAttr(noteText)}">ⓘ</span>`
+    : "";
 
-  const meta = (opts.showParty || ruleRef)
+  const meta = (opts.showParty || ruleRef || noteHint)
     ? `<div class="timeline-meta">
         ${opts.showParty ? partyBadge(dl.party) : ""}
         ${ruleRef}
+        ${noteHint}
       </div>`
     : "";
 
@@ -284,7 +296,7 @@ export function deadlineCardHtml(dl: CalculatedDeadline, opts: CardOpts): string
     </div>
     ${meta}
     ${adjustedNote}
-    ${notes}`;
+    ${notesBlock}`;
 }
 
 export function renderTimelineBody(data: DeadlineResponse, opts: CardOpts = { showParty: true }): string {
@@ -358,7 +370,7 @@ export function renderColumnsBody(data: DeadlineResponse, opts: Omit<CardOpts, "
   unscheduledKeys.sort();
   const keys = [...datedKeys, ...unscheduledKeys];
 
-  const cardOpts: CardOpts = { showParty: false, editable: opts.editable };
+  const cardOpts: CardOpts = { showParty: false, editable: opts.editable, showNotes: opts.showNotes };
 
   const renderCell = (items: CalculatedDeadline[]): string => {
     if (items.length === 0) {

frontend/src/fristenrechner.tsx

@@ -546,6 +546,10 @@ export function renderFristenrechner(): string {
                       <input type="radio" name="fristen-view" value="timeline" />
                       <span data-i18n="deadlines.view.timeline">Zeitstrahl</span>
                     </label>
+                    <label className="fristen-notes-option">
+                      <input type="checkbox" id="fristen-notes-show" />
+                      <span data-i18n="deadlines.notes.show">Hinweise anzeigen</span>
+                    </label>
                   </div>
 
                   <div id="timeline-container">

frontend/src/i18n-keys.ts

@@ -1069,6 +1069,7 @@ export type I18nKey =
   | "deadlines.neu.submit"
   | "deadlines.neu.subtitle"
   | "deadlines.neu.title"
+  | "deadlines.notes.show"
   | "deadlines.optional.badge"
   | "deadlines.party.both"
   | "deadlines.party.both.label"

frontend/src/styles/global.css

@@ -3441,6 +3441,49 @@ input[type="range"]::-moz-range-thumb {
     cursor: pointer;
 }
 
+/* Notes toggle — checkbox affordance in the view-toggle bar that flips
+   per-card descriptive notes between compact (ⓘ tooltip icon) and
+   expanded (timeline-notes block). Sits with a leading separator so it
+   reads as a distinct control from the radio view picker. */
+.fristen-notes-option {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.35rem;
+    cursor: pointer;
+    color: var(--color-text);
+    margin-left: auto;
+    padding-left: 0.75rem;
+    border-left: 1px solid var(--color-border);
+}
+
+.fristen-notes-option input[type=checkbox] {
+    margin: 0;
+    cursor: pointer;
+}
+
+/* Compact note hint — sits in the timeline-meta line when the notes
+   toggle is off. Native browser tooltip via title= attribute carries
+   the full text on hover; tabindex=0 + aria-label make it
+   keyboard / screen-reader accessible. */
+.timeline-note-hint {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 1.1rem;
+    height: 1.1rem;
+    border-radius: 50%;
+    font-size: 0.85rem;
+    color: var(--color-text-muted);
+    cursor: help;
+    user-select: none;
+}
+
+.timeline-note-hint:hover,
+.timeline-note-hint:focus-visible {
+    color: var(--color-text);
+    outline: none;
+}
+
 /* Fristenrechner — three-column lane view (Proactive | Court | Reactive).
    Each lane is independently date-ordered; party=both rows render below
    as full-width spans because they apply to all sides. */

frontend/src/verfahrensablauf.tsx

@@ -225,6 +225,10 @@ export function renderVerfahrensablauf(): string {
                       <input type="radio" name="fristen-view" value="timeline" />
                       <span data-i18n="deadlines.view.timeline">Zeitstrahl</span>
                     </label>
+                    <label className="fristen-notes-option">
+                      <input type="checkbox" id="fristen-notes-show" />
+                      <span data-i18n="deadlines.notes.show">Hinweise anzeigen</span>
+                    </label>
                   </div>
 
                   <div id="timeline-container">