m/paliad
1
0
Fork 0
Code Issues 146 Pull Requests 8 Actions 1 Packages Projects Releases Wiki Activity

Verfahrensablauf event-card overhaul: 'Wieder einblenden' horizontal-scroll + iconify hidden/optional state (the 'cut the tree' UX) #125

New Issue
Open
opened 2026-05-26 07:58:51 +00:00 by mAi · 1 comment
mAi commented 2026-05-26 07:58:51 +00:00
Collaborator
Copy Link

m's report (2026-05-26 09:58)

When we decide to show hidden, the 'wieder einblenden' button leads to horizontal scrolling because the cards get too wide. Maybe we can improve that?

The whole event card may need some little overhaul. I like title, date and Rule how they are cited.. but maybe we can improve the info box as well as the optional and options to show again. Maybe icons are enough to show if something was hidden or should be shown as an option again. Basically what we do is we 'cut' the tree of possibilities - and later make it possible to reroute.

Scope — two layers

Concern A (fix now): 'Wieder einblenden' button breaks card width

artemis's #122 added the 'Wieder einblenden' chip to re-surface hidden cards. The chip text is long enough that on narrower columns it overflows the card, triggering horizontal page scroll. Fix by making the chip narrower (icon-only on small viewports, or compact text + tooltip).

Concern B (the bigger UX overhaul): icon-based state language for cards

m's framing: per-card choices are a 'cut on the tree of possibilities' — and we want to make rerouting later possible. The card surface should:

  1. Keep what works: title, date, Rule (legal-source citation) — m explicitly likes these.
  2. Compact the info box: a small ⓘ icon, click/hover for full notes (current behavior already has showNotes toggle — reuse + extend).
  3. Iconify state markers:
    • Optional event → small ⊘ or ⊙ icon
    • Hidden by user → 👁\u034f (eye-slash) icon
    • Conditional (uncertain anchor) → ⏳ or ◇ icon
    • CCR-included (from #96 Slice B) → ⤴ icon
    • Auto-derived from Type → ⚙ icon (when relevant)
  4. Card actions menu instead of inline chips for re-surface / un-skip / pin / override-date — caret popover (matches atlas's #96 popover pattern). Hover the card → caret appears → menu opens with state-changing actions.
  5. Visual density tighter: 2-line height per card by default (title + date+rule), expand on hover/focus for the notes + meta.

Naming the model

m's 'cut the tree of possibilities' framing implies cards should communicate their decision state clearly:

  • ACTIVE (no per-card cut)
  • CUT (the user said 'skip this branch')
  • CONDITIONAL (cut by data — anchor missing)
  • BRANCHED (the user added a fork — e.g. include_ccr=true on Klageerwiderung)

Icon library should map 1:1 onto these states. Future rerouting UX = removing the cut + showing the previously-cut subtree again.

What to do

  1. Fix the horizontal-scroll bug immediately (Concern A). Shrink the 'Wieder einblenden' chip text → use a small 👁 icon + accessible label.
  2. Design pass on the card (Concern B):
    • Pick the icon set (Unicode or inline SVG).
    • Restructure the card markup: title row · meta row (date + Rule + state icons) · expandable detail (notes, info box).
    • Move per-card actions into a caret-popover.
    • Test on narrow viewports (375 / 414 / 768).
  3. Coordinate with #96 (atlas's popover module) — the caret action menu may share code.
  4. Don't break the date-edit affordance (frist-date-edit click handler).
  5. Don't break the hidden/show-hidden flow from #122 — the unhide action moves into the caret menu instead of an inline chip.

Files most likely touched

  • frontend/src/client/views/verfahrensablauf-core.ts — card render
  • frontend/src/client/views/event-card-choices.ts — caret/popover (atlas #96)
  • frontend/src/client/views/verfahrensablauf-core.test.ts — render tests
  • frontend/src/styles/global.css — new card layout + icons
  • frontend/src/client/i18n.ts + frontend/src/i18n-keys.ts — labels for icon tooltips + actions

Hard rules

  • No horizontal scroll at any mobile width (consistent with #86, #91, #100 rules).
  • Preserve title + date + Rule citation rendering as-is (m likes these).
  • Don't lose existing per-card actions (skip, appellant pick, include-CCR, unhide) — they all move to the caret menu.
  • go build ./... && go test ./internal/... && cd frontend && bun run build clean.
  • Branch: mai/<worker>/event-card-overhaul.

Out of scope

  • Rerouting UX (m flagged this as 'later' — defer to a follow-up issue once the cut/branched semantic is in place).
  • Adding new per-card choice kinds beyond what #96 + #122 already cover.
  • Drag-and-drop reordering of cards.

Reporting

mai report completed with branch + SHAs + UX path: open Verfahrensablauf at 375px → confirm no horizontal scroll on any card state (active/cut/conditional/branched) → caret menu opens on hover → all actions accessible → 'Wieder einblenden' is an icon + label in the menu, not an inline chip.

## m's report (2026-05-26 09:58) > When we decide to show hidden, the 'wieder einblenden' button leads to horizontal scrolling because the cards get too wide. Maybe we can improve that? > > The whole event card may need some little overhaul. I like title, date and Rule how they are cited.. but maybe we can improve the info box as well as the optional and options to show again. Maybe icons are enough to show if something was hidden or should be shown as an option again. Basically what we do is we 'cut' the tree of possibilities - and later make it possible to reroute. ## Scope — two layers ### Concern A (fix now): 'Wieder einblenden' button breaks card width artemis's #122 added the 'Wieder einblenden' chip to re-surface hidden cards. The chip text is long enough that on narrower columns it overflows the card, triggering horizontal page scroll. Fix by making the chip narrower (icon-only on small viewports, or compact text + tooltip). ### Concern B (the bigger UX overhaul): icon-based state language for cards m's framing: per-card choices are a 'cut on the tree of possibilities' — and we want to make rerouting later possible. The card surface should: 1. **Keep what works**: title, date, Rule (legal-source citation) — m explicitly likes these. 2. **Compact the info box**: a small ⓘ icon, click/hover for full notes (current behavior already has `showNotes` toggle — reuse + extend). 3. **Iconify state markers**: - **Optional event** → small ⊘ or ⊙ icon - **Hidden by user** → 👁\u034f (eye-slash) icon - **Conditional (uncertain anchor)** → ⏳ or ◇ icon - **CCR-included (from #96 Slice B)** → ⤴ icon - **Auto-derived from Type** → ⚙ icon (when relevant) 4. **Card actions menu** instead of inline chips for re-surface / un-skip / pin / override-date — caret popover (matches atlas's #96 popover pattern). Hover the card → caret appears → menu opens with state-changing actions. 5. **Visual density tighter**: 2-line height per card by default (title + date+rule), expand on hover/focus for the notes + meta. ### Naming the model m's 'cut the tree of possibilities' framing implies cards should communicate their **decision state** clearly: - ACTIVE (no per-card cut) - CUT (the user said 'skip this branch') - CONDITIONAL (cut by data — anchor missing) - BRANCHED (the user added a fork — e.g. include_ccr=true on Klageerwiderung) Icon library should map 1:1 onto these states. Future rerouting UX = removing the cut + showing the previously-cut subtree again. ## What to do 1. **Fix the horizontal-scroll bug** immediately (Concern A). Shrink the 'Wieder einblenden' chip text → use a small 👁 icon + accessible label. 2. **Design pass on the card** (Concern B): - Pick the icon set (Unicode or inline SVG). - Restructure the card markup: title row · meta row (date + Rule + state icons) · expandable detail (notes, info box). - Move per-card actions into a caret-popover. - Test on narrow viewports (375 / 414 / 768). 3. **Coordinate with #96** (atlas's popover module) — the caret action menu may share code. 4. **Don't break the date-edit affordance** (`frist-date-edit` click handler). 5. **Don't break the hidden/show-hidden flow** from #122 — the unhide action moves into the caret menu instead of an inline chip. ## Files most likely touched - `frontend/src/client/views/verfahrensablauf-core.ts` — card render - `frontend/src/client/views/event-card-choices.ts` — caret/popover (atlas #96) - `frontend/src/client/views/verfahrensablauf-core.test.ts` — render tests - `frontend/src/styles/global.css` — new card layout + icons - `frontend/src/client/i18n.ts` + `frontend/src/i18n-keys.ts` — labels for icon tooltips + actions ## Hard rules - **No horizontal scroll at any mobile width** (consistent with #86, #91, #100 rules). - Preserve title + date + Rule citation rendering as-is (m likes these). - Don't lose existing per-card actions (skip, appellant pick, include-CCR, unhide) — they all move to the caret menu. - `go build ./... && go test ./internal/... && cd frontend && bun run build` clean. - Branch: `mai/<worker>/event-card-overhaul`. ## Out of scope - Rerouting UX (m flagged this as 'later' — defer to a follow-up issue once the cut/branched semantic is in place). - Adding new per-card choice kinds beyond what #96 + #122 already cover. - Drag-and-drop reordering of cards. ## Reporting `mai report completed` with branch + SHAs + UX path: open Verfahrensablauf at 375px → confirm no horizontal scroll on any card state (active/cut/conditional/branched) → caret menu opens on hover → all actions accessible → 'Wieder einblenden' is an icon + label in the menu, not an inline chip.
mAi self-assigned this 2026-05-26 07:58:51 +00:00
mAi commented 2026-05-26 08:12:41 +00:00
Author
Collaborator
Copy Link

hermes shift-1 — t-paliad-293 implementation complete

Branch: mai/hermes/coder-verfahrensablauf
Commit: 7ca6b2d
Tests: 181/181 pass (29 in verfahrensablauf-core.test.ts, +4 new contract pairs); go build ./... && go test ./internal/... clean; bun run build clean.

What changed

Concern A — horizontal scroll fixed at the source

The Wieder einblenden inline chip from t-paliad-290 is gone. It used to live in the card title-row flex container, and its long German label ("Wieder einblenden") pushed the row past the column width on 375 / 414 / 768 viewports. Replaced two ways:

  1. Action moved into the caret popover (concern B / m's framing). The popover now renders a prominent full-width "Wieder einblenden" button at the top when the caret is opened on a re-surfaced hidden card. Same wire effect as before (clear on the skip kind).
  2. Card title row gains flex-wrap + min-width:0 + overflow-wrap:anywhere as a structural fix so no inline child can ever blow the row width again — long German compounds (Vertraulichkeitswiderklage …) now wrap mid-word instead of overflowing.

Both layers in defense — even if a future contributor adds another inline chip, the row will wrap rather than scroll the page.

Concern B — iconified state language

Cards now speak m's "cut the tree of possibilities" vocabulary via small icons in the title row:

State Icon Class Tooltip
Optional event (was optional text badge) ⊙ timeline-state-icon--optional state.optional.tooltip
Hidden by user 👁⃠ timeline-state-icon--hidden state.hidden.tooltip
Conditional (uncertain anchor) — (already covered by the abhängig von <parent> chip in the date column — t-paliad-289; no duplicate marker) —
CCR-included / appellant pick — (already on the per-card event-card-choices-chip) —

The legacy .optional-badge text chip and .event-card-choices-unhide inline chip are both gone. Icon set uses Unicode (consistent with existing pill glyphs like 👀 for approval, ✨ for agent — no SVG dependency added).

Caret popover — hidden-card prominence

The caret button now carries data-is-hidden="1" when isHidden=true. The popover module reads it and surfaces a prominent "Wieder einblenden" entry at the top, ahead of the skip-toggle's reset link. The unhide path uses the same data-choice-action="clear" data-choice-kind="skip" contract that the existing handler already dispatches — no new commit semantics needed.

Defensive fallback: if a rule's choices_offered is edited away after a user already saved skip=true (so isHidden=true but choicesOffered is empty), the renderer synthesizes {skip:[true,false]} so the user still gets the un-hide path via the popover. Tested.

Card density tightened

  • .timeline-item min-height: 4rem → 2.75rem
  • .timeline-content padding-bottom: 1rem → 0.6rem
  • .timeline-item-header gains flex-wrap: wrap + min-width: 0
  • .timeline-name gains min-width: 0 + overflow-wrap: anywhere

Hard rules respected

  • ✅ Title + date + Rule citation rendering unchanged (m likes these).
  • ✅ .frist-date-edit click-to-edit on date span untouched.
  • ✅ Conditional rendering (t-paliad-289: abhängig von <parent> chip + dotted border) untouched.
  • ✅ Per-card actions (skip, appellant pick, include-CCR, unhide) all reachable via the caret popover.
  • ✅ go build ./... && go test ./internal/... && cd frontend && bun run build && bun test all green.

Files touched (6)

  • frontend/src/client/views/verfahrensablauf-core.ts — state-icon emission, caret data-is-hidden contract, dropped unhide chip, defensive fallback.
  • frontend/src/client/views/event-card-choices.ts — dropped inline-chip handler, added renderUnhideBlock() + isHidden-driven popover entry.
  • frontend/src/client/views/verfahrensablauf-core.test.ts — old isHidden chip tests replaced with state-icon + caret contract tests; added defensive-fallback test; added optional-icon contract.
  • frontend/src/styles/global.css — new .timeline-state-icon[--optional|--hidden], new .event-card-choices-unhide-btn + --unhide block, tighter card density, wrap-safe title row.
  • frontend/src/client/i18n.ts — DE+EN state.optional.tooltip + state.hidden.tooltip.
  • frontend/src/i18n-keys.ts — keys auto-extracted into the union.

UX verification needed by reviewer (auth-gated page — couldn't drive headless)

Open /tools/verfahrensablauf (e.g. paliad.de) and:

  1. Pick a proceeding, set a date, render the timeline.
  2. Resize to 375 / 414 / 768 — confirm no horizontal page scroll in any state.
  3. Open the caret popover on an active card with optional priority — confirm a ⊙ marker is visible next to the title.
  4. Use a per-card skip action on a card → enable the "Ausgeblendete anzeigen" toggle → confirm the faded card now shows a 👁⃠ marker in the title and no inline chip.
  5. Click the caret on the hidden card → confirm a prominent green "Wieder einblenden" button is the top entry of the popover. Click it → card un-hides + projection recalcs.
  6. Test the date column resize: long compound names (e.g. Vertraulichkeitswiderklage on UPC.inf.cfi) should wrap inside the column, never push the date or caret off-screen.

Out of scope (deferred per issue)

  • Re-routing UX (m flagged this as "later" — follow-up issue).
  • Additional per-card choice kinds.
  • Drag-and-drop reordering.

Self-review notes

  • IsConditional does NOT get an icon in the title row because the date column already shows the abhängig von <parent> chip — adding a marker on top would be redundant noise (one signal per state is the principle).
  • The popover unhide button is data-choice-action="clear" rather than the synthesized skip=false set, because clear matches the legacy unhideCard() semantics (removes the entry entirely; the re-projection then drops the card from the result list).
  • data-is-hidden="0" is always emitted on the caret (not omitted) so the dataset access is type-safe and the test contract pins both directions.
## hermes shift-1 — t-paliad-293 implementation complete **Branch:** `mai/hermes/coder-verfahrensablauf` **Commit:** [`7ca6b2d`](https://mgit.msbls.de/m/paliad/commit/7ca6b2d643434283112150f4c88f99e8ede1f381) **Tests:** 181/181 pass (29 in `verfahrensablauf-core.test.ts`, +4 new contract pairs); `go build ./... && go test ./internal/...` clean; `bun run build` clean. ### What changed #### Concern A — horizontal scroll fixed at the source The `Wieder einblenden` inline chip from t-paliad-290 is gone. It used to live in the card title-row flex container, and its long German label ("Wieder einblenden") pushed the row past the column width on 375 / 414 / 768 viewports. Replaced two ways: 1. **Action moved into the caret popover** (concern B / m's framing). The popover now renders a prominent full-width "Wieder einblenden" button at the top when the caret is opened on a re-surfaced hidden card. Same wire effect as before (`clear` on the `skip` kind). 2. **Card title row gains flex-wrap + min-width:0 + overflow-wrap:anywhere** as a structural fix so no inline child can ever blow the row width again — long German compounds (Vertraulichkeitswiderklage …) now wrap mid-word instead of overflowing. Both layers in defense — even if a future contributor adds another inline chip, the row will wrap rather than scroll the page. #### Concern B — iconified state language Cards now speak m's "cut the tree of possibilities" vocabulary via small icons in the title row: | State | Icon | Class | Tooltip | |---|---|---|---| | Optional event (was `optional` text badge) | ⊙ | `timeline-state-icon--optional` | `state.optional.tooltip` | | Hidden by user | 👁⃠ | `timeline-state-icon--hidden` | `state.hidden.tooltip` | | Conditional (uncertain anchor) | — | (already covered by the `abhängig von <parent>` chip in the date column — t-paliad-289; no duplicate marker) | — | | CCR-included / appellant pick | — | (already on the per-card `event-card-choices-chip`) | — | The legacy `.optional-badge` text chip and `.event-card-choices-unhide` inline chip are both gone. Icon set uses Unicode (consistent with existing pill glyphs like `👀` for approval, `✨` for agent — no SVG dependency added). #### Caret popover — hidden-card prominence The caret button now carries `data-is-hidden="1"` when `isHidden=true`. The popover module reads it and surfaces a prominent "Wieder einblenden" entry at the top, ahead of the skip-toggle's reset link. The unhide path uses the same `data-choice-action="clear" data-choice-kind="skip"` contract that the existing handler already dispatches — no new commit semantics needed. **Defensive fallback:** if a rule's `choices_offered` is edited away after a user already saved `skip=true` (so `isHidden=true` but `choicesOffered` is empty), the renderer synthesizes `{skip:[true,false]}` so the user still gets the un-hide path via the popover. Tested. #### Card density tightened - `.timeline-item` `min-height: 4rem → 2.75rem` - `.timeline-content` `padding-bottom: 1rem → 0.6rem` - `.timeline-item-header` gains `flex-wrap: wrap` + `min-width: 0` - `.timeline-name` gains `min-width: 0` + `overflow-wrap: anywhere` ### Hard rules respected - ✅ Title + date + Rule citation rendering unchanged (m likes these). - ✅ `.frist-date-edit` click-to-edit on date span untouched. - ✅ Conditional rendering (t-paliad-289: `abhängig von <parent>` chip + dotted border) untouched. - ✅ Per-card actions (skip, appellant pick, include-CCR, unhide) all reachable via the caret popover. - ✅ `go build ./... && go test ./internal/... && cd frontend && bun run build && bun test` all green. ### Files touched (6) - `frontend/src/client/views/verfahrensablauf-core.ts` — state-icon emission, caret data-is-hidden contract, dropped unhide chip, defensive fallback. - `frontend/src/client/views/event-card-choices.ts` — dropped inline-chip handler, added `renderUnhideBlock()` + isHidden-driven popover entry. - `frontend/src/client/views/verfahrensablauf-core.test.ts` — old isHidden chip tests replaced with state-icon + caret contract tests; added defensive-fallback test; added optional-icon contract. - `frontend/src/styles/global.css` — new `.timeline-state-icon[--optional|--hidden]`, new `.event-card-choices-unhide-btn` + `--unhide` block, tighter card density, wrap-safe title row. - `frontend/src/client/i18n.ts` — DE+EN `state.optional.tooltip` + `state.hidden.tooltip`. - `frontend/src/i18n-keys.ts` — keys auto-extracted into the union. ### UX verification needed by reviewer (auth-gated page — couldn't drive headless) Open `/tools/verfahrensablauf` (e.g. paliad.de) and: 1. Pick a proceeding, set a date, render the timeline. 2. Resize to 375 / 414 / 768 — confirm **no horizontal page scroll** in any state. 3. Open the caret popover on an active card with `optional` priority — confirm a ⊙ marker is visible next to the title. 4. Use a per-card `skip` action on a card → enable the "Ausgeblendete anzeigen" toggle → confirm the faded card now shows a 👁⃠ marker in the title and no inline chip. 5. Click the caret on the hidden card → confirm a prominent green "Wieder einblenden" button is the top entry of the popover. Click it → card un-hides + projection recalcs. 6. Test the date column resize: long compound names (e.g. Vertraulichkeitswiderklage on UPC.inf.cfi) should wrap inside the column, never push the date or caret off-screen. ### Out of scope (deferred per issue) - Re-routing UX (m flagged this as "later" — follow-up issue). - Additional per-card choice kinds. - Drag-and-drop reordering. ### Self-review notes - `IsConditional` does NOT get an icon in the title row because the date column already shows the `abhängig von <parent>` chip — adding a marker on top would be redundant noise (one signal per state is the principle). - The popover unhide button is `data-choice-action="clear"` rather than the synthesized skip=false set, because `clear` matches the legacy `unhideCard()` semantics (removes the entry entirely; the re-projection then drops the card from the result list). - `data-is-hidden="0"` is always emitted on the caret (not omitted) so the dataset access is type-safe and the test contract pins both directions.
mAi added the
done
 label 2026-05-26 08:12:52 +00:00
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
deferred
Parked — not pursuing now, may un-park later
done
Work completed by an agent; awaiting m to close
No Label
done
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
mAi m
No Assignees mAi
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: m/paliad#125
No description provided.
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?