Compare commits
11 Commits
feat/issue
...
feat/issue
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
fe1a3dcc00 | ||
|
|
063d1aac55 | ||
|
|
a3fd886711 | ||
|
|
73a01b1cad | ||
|
|
d9028da941 | ||
|
|
663bb57334 | ||
|
|
491d1a015a | ||
|
|
4d9b165a2d | ||
|
|
6d2b6f3d2b | ||
|
|
0f6e9f7bc7 | ||
|
|
47b1ad6199 |
@@ -192,52 +192,17 @@ jobs:
|
|||||||
REPO="${{ github.repository }}"
|
REPO="${{ github.repository }}"
|
||||||
RUN_URL="${GITEA_URL}/${REPO}/actions/runs/${{ github.run_id }}"
|
RUN_URL="${GITEA_URL}/${REPO}/actions/runs/${{ github.run_id }}"
|
||||||
|
|
||||||
# --- Gitea API helper ---
|
|
||||||
# api METHOD URL [extra curl args...] — authenticated Gitea API call.
|
|
||||||
# `curl -sf` collapses every HTTP >=400 into a bare "exit 22", which
|
|
||||||
# surfaces as an opaque step failure (issue #839). Instead we read the
|
|
||||||
# status code and, on a >=400 response, print an actionable ::error::
|
|
||||||
# to stderr (so a calling command substitution does not swallow it) and
|
|
||||||
# return 1 — `set -e` then still fails the step. The token is never
|
|
||||||
# echoed (no set -x; never placed in the message).
|
|
||||||
api() {
|
|
||||||
local method="$1" url="$2"; shift 2
|
|
||||||
local resp http
|
|
||||||
resp=$(curl -s -w '\n%{http_code}' -X "$method" \
|
|
||||||
-H "Authorization: token $NIGHTLY_AUDIT_TOKEN" "$@" -- "$url")
|
|
||||||
http=${resp##*$'\n'}
|
|
||||||
printf '%s' "${resp%$'\n'*}"
|
|
||||||
case "$http" in
|
|
||||||
2*|3*) return 0 ;;
|
|
||||||
401|403)
|
|
||||||
echo "::error::Gitea returned HTTP $http for $method ${url%%\?*} — the NIGHTLY_AUDIT_TOKEN secret is missing, expired, or lacks issue read+write scope; recreate the renovate_bot PAT and update the secret." >&2
|
|
||||||
return 1 ;;
|
|
||||||
*)
|
|
||||||
echo "::error::Gitea returned HTTP ${http:-(none)} for $method ${url%%\?*}." >&2
|
|
||||||
return 1 ;;
|
|
||||||
esac
|
|
||||||
}
|
|
||||||
|
|
||||||
# --- Self-test (mirrors ci.yml §Assert pattern) ---
|
# --- Self-test (mirrors ci.yml §Assert pattern) ---
|
||||||
# Runs before any real API call so broken logic fails loudly early:
|
# Tests the exact jq test() call used in the dedupe step, before any
|
||||||
# (a) the jq title matcher used by the dedupe step — proves the regex
|
# API call, so a broken matcher fails loudly early rather than silently
|
||||||
# only; the create-vs-update decision is exercised by the
|
# opening duplicate issues. Proves the regex only — create-vs-update
|
||||||
# workflow_dispatch AC;
|
# decision is exercised by the workflow_dispatch AC.
|
||||||
# (b) the api helper's HTTP-status handling, driven by a mocked curl so
|
|
||||||
# it needs no network — proves a 2xx returns the body and a >=400
|
|
||||||
# fails with an ::error:: instead of an opaque exit 22.
|
|
||||||
echo "{\"title\": \"${MARKER}\"}" \
|
echo "{\"title\": \"${MARKER}\"}" \
|
||||||
| jq -e --arg m "$MARKER" '.title | test($m; "i")' > /dev/null \
|
| jq -e --arg m "$MARKER" '.title | test($m; "i")' > /dev/null \
|
||||||
|| { echo "FAIL: self-test — jq test() missed tracking issue title"; exit 1; }
|
|| { echo "FAIL: self-test — jq test() missed tracking issue title"; exit 1; }
|
||||||
echo '{"title": "fix(deps): update dependency esbuild (CVE-2025-12345)"}' \
|
echo '{"title": "fix(deps): update dependency esbuild (CVE-2025-12345)"}' \
|
||||||
| jq -e --arg m "$MARKER" '.title | test($m; "i") | not' > /dev/null \
|
| jq -e --arg m "$MARKER" '.title | test($m; "i") | not' > /dev/null \
|
||||||
|| { echo "FAIL: self-test — jq test() incorrectly matched unrelated title"; exit 1; }
|
|| { echo "FAIL: self-test — jq test() incorrectly matched unrelated title"; exit 1; }
|
||||||
( curl() { printf 'OK\n200'; }; [ "$(api GET selftest)" = "OK" ] ) \
|
|
||||||
|| { echo "FAIL: self-test — api helper dropped body on HTTP 200"; exit 1; }
|
|
||||||
( curl() { printf 'nope\n401'; }
|
|
||||||
if api GET selftest >/dev/null 2>/tmp/api_selftest_err; then exit 1; fi
|
|
||||||
grep -q '::error::' /tmp/api_selftest_err ) \
|
|
||||||
|| { echo "FAIL: self-test — api helper did not emit ::error:: on HTTP 401"; exit 1; }
|
|
||||||
echo "Self-test passed."
|
echo "Self-test passed."
|
||||||
|
|
||||||
# --- Run audit ---
|
# --- Run audit ---
|
||||||
@@ -272,7 +237,8 @@ jobs:
|
|||||||
# Renovate vuln PRs also carry the "security" label, so >1 open
|
# Renovate vuln PRs also carry the "security" label, so >1 open
|
||||||
# "security" issue WILL occur. Title-match (not just label) ensures
|
# "security" issue WILL occur. Title-match (not just label) ensures
|
||||||
# we deduplicate only our own tracking issue.
|
# we deduplicate only our own tracking issue.
|
||||||
OPEN_ISSUES=$(api GET \
|
OPEN_ISSUES=$(curl -sf \
|
||||||
|
-H "Authorization: token $NIGHTLY_AUDIT_TOKEN" \
|
||||||
"${GITEA_URL}/api/v1/repos/${REPO}/issues?state=open&type=issues&labels=security&limit=50")
|
"${GITEA_URL}/api/v1/repos/${REPO}/issues?state=open&type=issues&labels=security&limit=50")
|
||||||
|
|
||||||
MATCHED=$(echo "$OPEN_ISSUES" | jq \
|
MATCHED=$(echo "$OPEN_ISSUES" | jq \
|
||||||
@@ -289,10 +255,11 @@ jobs:
|
|||||||
--arg run_url "$RUN_URL" \
|
--arg run_url "$RUN_URL" \
|
||||||
'$existing + "\n\n---\n\nUpdated by run: " + $run_url')
|
'$existing + "\n\n---\n\nUpdated by run: " + $run_url')
|
||||||
PAYLOAD=$(jq -n --arg body "$NEW_BODY" '{"body": $body}')
|
PAYLOAD=$(jq -n --arg body "$NEW_BODY" '{"body": $body}')
|
||||||
api PATCH \
|
curl -sf -X PATCH \
|
||||||
"${GITEA_URL}/api/v1/repos/${REPO}/issues/${ISSUE_NUMBER}" \
|
-H "Authorization: token $NIGHTLY_AUDIT_TOKEN" \
|
||||||
-H "Content-Type: application/json" \
|
-H "Content-Type: application/json" \
|
||||||
-d "$PAYLOAD" > /dev/null
|
-d "$PAYLOAD" \
|
||||||
|
"${GITEA_URL}/api/v1/repos/${REPO}/issues/${ISSUE_NUMBER}" > /dev/null
|
||||||
echo "Updated tracking issue #${ISSUE_NUMBER}"
|
echo "Updated tracking issue #${ISSUE_NUMBER}"
|
||||||
else
|
else
|
||||||
# Closed prior issue that recurs → new issue (not reopened).
|
# Closed prior issue that recurs → new issue (not reopened).
|
||||||
@@ -301,21 +268,24 @@ jobs:
|
|||||||
--arg title "$MARKER" \
|
--arg title "$MARKER" \
|
||||||
--arg body "$ISSUE_BODY" \
|
--arg body "$ISSUE_BODY" \
|
||||||
'{"title": $title, "body": $body}')
|
'{"title": $title, "body": $body}')
|
||||||
CREATED=$(api POST \
|
CREATED=$(curl -sf -X POST \
|
||||||
"${GITEA_URL}/api/v1/repos/${REPO}/issues" \
|
-H "Authorization: token $NIGHTLY_AUDIT_TOKEN" \
|
||||||
-H "Content-Type: application/json" \
|
-H "Content-Type: application/json" \
|
||||||
-d "$PAYLOAD")
|
-d "$PAYLOAD" \
|
||||||
|
"${GITEA_URL}/api/v1/repos/${REPO}/issues")
|
||||||
NEW_NUMBER=$(echo "$CREATED" | jq -r '.number')
|
NEW_NUMBER=$(echo "$CREATED" | jq -r '.number')
|
||||||
echo "Opened new tracking issue #${NEW_NUMBER}"
|
echo "Opened new tracking issue #${NEW_NUMBER}"
|
||||||
|
|
||||||
# Labels are ignored on issue create in Gitea — add in a follow-up call.
|
# Labels are ignored on issue create in Gitea — add in a follow-up call.
|
||||||
LABEL_IDS=$(api GET \
|
LABEL_IDS=$(curl -sf \
|
||||||
|
-H "Authorization: token $NIGHTLY_AUDIT_TOKEN" \
|
||||||
"${GITEA_URL}/api/v1/repos/${REPO}/labels?limit=50" \
|
"${GITEA_URL}/api/v1/repos/${REPO}/labels?limit=50" \
|
||||||
| jq '[.[] | select(.name == "security" or .name == "devops" or .name == "P1-high") | .id]')
|
| jq '[.[] | select(.name == "security" or .name == "devops" or .name == "P1-high") | .id]')
|
||||||
api POST \
|
curl -sf -X POST \
|
||||||
"${GITEA_URL}/api/v1/repos/${REPO}/issues/${NEW_NUMBER}/labels" \
|
-H "Authorization: token $NIGHTLY_AUDIT_TOKEN" \
|
||||||
-H "Content-Type: application/json" \
|
-H "Content-Type: application/json" \
|
||||||
-d "{\"labels\": $LABEL_IDS}" > /dev/null
|
-d "{\"labels\": $LABEL_IDS}" \
|
||||||
|
"${GITEA_URL}/api/v1/repos/${REPO}/issues/${NEW_NUMBER}/labels" > /dev/null
|
||||||
fi
|
fi
|
||||||
|
|
||||||
exit "$AUDIT_EXIT"
|
exit "$AUDIT_EXIT"
|
||||||
|
|||||||
@@ -2,7 +2,7 @@
|
|||||||
|
|
||||||
> Living document. One row per `REQ-NNN` across all in-flight and shipped features. The spec
|
> Living document. One row per `REQ-NNN` across all in-flight and shipped features. The spec
|
||||||
> itself lives in the **Gitea issue** (issue-only — there is no committed `spec.md`); this
|
> itself lives in the **Gitea issue** (issue-only — there is no committed `spec.md`); this
|
||||||
> matrix is the part of the spec that _is_ committed: it links each requirement to its issue,
|
> matrix is the part of the spec that *is* committed: it links each requirement to its issue,
|
||||||
> the code that implements it, and the test(s) that prove it — so any requirement traces end
|
> the code that implements it, and the test(s) that prove it — so any requirement traces end
|
||||||
> to end, and any orphan (a requirement with no test) is visible on `main`.
|
> to end, and any orphan (a requirement with no test) is visible on `main`.
|
||||||
|
|
||||||
@@ -24,31 +24,30 @@
|
|||||||
|
|
||||||
## Matrix
|
## Matrix
|
||||||
|
|
||||||
| REQ-ID | Requirement Summary | Issue | Feature | Implementation File(s) | Test(s) | Status |
|
| REQ-ID | Requirement Summary | Issue | Feature | Implementation File(s) | Test(s) | Status |
|
||||||
| ------- | ---------------------------------------------------------------------- | -------- | ---------------------------------- | ------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- |
|
|---|---|---|---|---|---|---|
|
||||||
| REQ-001 | Store avatar at `avatars/{userId}`, overwrite | #example | profile-picture-upload (\_example) | `UserService` (planned) | `UserServiceAvatarTest#storesUnderUserKey`, `#replaceLeavesNoOrphan` | Planned |
|
| REQ-001 | Store avatar at `avatars/{userId}`, overwrite | #example | profile-picture-upload (_example) | `UserService` (planned) | `UserServiceAvatarTest#storesUnderUserKey`, `#replaceLeavesNoOrphan` | Planned |
|
||||||
| REQ-002 | Upload self avatar → 200 + avatarUrl | #example | profile-picture-upload (\_example) | `UserAvatarController`, `UserService` (planned) | `UserAvatarControllerTest#uploadReturnsAvatarUrl` | Planned |
|
| REQ-002 | Upload self avatar → 200 + avatarUrl | #example | profile-picture-upload (_example) | `UserAvatarController`, `UserService` (planned) | `UserAvatarControllerTest#uploadReturnsAvatarUrl` | Planned |
|
||||||
| REQ-003 | Delete self avatar → avatarUrl null | #example | profile-picture-upload (\_example) | `UserAvatarController` (planned) | `UserAvatarControllerTest#deleteClearsAvatar` | Planned |
|
| REQ-003 | Delete self avatar → avatarUrl null | #example | profile-picture-upload (_example) | `UserAvatarController` (planned) | `UserAvatarControllerTest#deleteClearsAvatar` | Planned |
|
||||||
| REQ-004 | No avatar → null + initials placeholder | #example | profile-picture-upload (\_example) | `UserProfileView`, avatar component (planned) | `avatar-placeholder.svelte.spec.ts` | Planned |
|
| REQ-004 | No avatar → null + initials placeholder | #example | profile-picture-upload (_example) | `UserProfileView`, avatar component (planned) | `avatar-placeholder.svelte.spec.ts` | Planned |
|
||||||
| REQ-005 | ADMIN_USER may delete others' avatar | #example | profile-picture-upload (\_example) | `UserAvatarController` (planned) | `UserAvatarControllerTest#adminDeletesOthersAvatar` | Planned |
|
| REQ-005 | ADMIN_USER may delete others' avatar | #example | profile-picture-upload (_example) | `UserAvatarController` (planned) | `UserAvatarControllerTest#adminDeletesOthersAvatar` | Planned |
|
||||||
| REQ-006 | Unauthenticated → 401, store nothing | #example | profile-picture-upload (\_example) | `SecurityConfig`, controller (planned) | `UserAvatarControllerTest#unauthenticatedReturns401` | Planned |
|
| REQ-006 | Unauthenticated → 401, store nothing | #example | profile-picture-upload (_example) | `SecurityConfig`, controller (planned) | `UserAvatarControllerTest#unauthenticatedReturns401` | Planned |
|
||||||
| REQ-007 | Non-image → 400 UNSUPPORTED_FILE_TYPE | #example | profile-picture-upload (\_example) | `UserService` (planned) | `UserAvatarControllerTest#rejectsNonImage` | Planned |
|
| REQ-007 | Non-image → 400 UNSUPPORTED_FILE_TYPE | #example | profile-picture-upload (_example) | `UserService` (planned) | `UserAvatarControllerTest#rejectsNonImage` | Planned |
|
||||||
| REQ-008 | Over 2 MB → 400 AVATAR_TOO_LARGE | #example | profile-picture-upload (\_example) | `UserService`, `ErrorCode` (planned) | `UserAvatarControllerTest#rejectsOversize` | Planned |
|
| REQ-008 | Over 2 MB → 400 AVATAR_TOO_LARGE | #example | profile-picture-upload (_example) | `UserService`, `ErrorCode` (planned) | `UserAvatarControllerTest#rejectsOversize` | Planned |
|
||||||
| REQ-009 | Non-admin on others → 403 FORBIDDEN | #example | profile-picture-upload (\_example) | `UserAvatarController` (planned) | `UserAvatarControllerTest#nonAdminForbiddenOnOthers` | Planned |
|
| REQ-009 | Non-admin on others → 403 FORBIDDEN | #example | profile-picture-upload (_example) | `UserAvatarController` (planned) | `UserAvatarControllerTest#nonAdminForbiddenOnOthers` | Planned |
|
||||||
| REQ-001 | Render dated entry via shared `formatDocumentDate` (de/en/es) | #778 | timeline-date-label | `frontend/src/lib/timeline/dateLabel.ts` | `dateLabel.spec.ts` › `renders a DAY date localized in German`, `renders a SEASON date with the German season word`, `delegates a same-year RANGE to formatDocumentDate` | Done |
|
| REQ-001 | Render dated entry via shared `formatDocumentDate` (de/en/es) | #778 | timeline-date-label | `frontend/src/lib/timeline/dateLabel.ts` | `dateLabel.spec.ts` › `renders a DAY date localized in German`, `renders a SEASON date with the German season word`, `delegates a same-year RANGE to formatDocumentDate` | Done |
|
||||||
| REQ-002 | Non-UNKNOWN + non-empty date → shared label, `raw=null`, `getLocale()` | #778 | timeline-date-label | `frontend/src/lib/timeline/dateLabel.ts` | `dateLabel.spec.ts` › `renders a DAY date localized in German`, `renders a DAY date localized in English` | Done |
|
| REQ-002 | Non-UNKNOWN + non-empty date → shared label, `raw=null`, `getLocale()` | #778 | timeline-date-label | `frontend/src/lib/timeline/dateLabel.ts` | `dateLabel.spec.ts` › `renders a DAY date localized in German`, `renders a DAY date localized in English` | Done |
|
||||||
| REQ-003 | `UNKNOWN` → `null` (no chip) | #778 | timeline-date-label | `frontend/src/lib/timeline/dateLabel.ts` | `dateLabel.spec.ts` › `returns null for UNKNOWN precision even with a date`, `returns null for UNKNOWN precision without a date` | Done |
|
| REQ-003 | `UNKNOWN` → `null` (no chip) | #778 | timeline-date-label | `frontend/src/lib/timeline/dateLabel.ts` | `dateLabel.spec.ts` › `returns null for UNKNOWN precision even with a date`, `returns null for UNKNOWN precision without a date` | Done |
|
||||||
| REQ-004 | `null`/`undefined`/`''` eventDate → `null`, no formatter call | #778 | timeline-date-label | `frontend/src/lib/timeline/dateLabel.ts` | `dateLabel.spec.ts` › `returns null for APPROX with a null eventDate, without calling the formatter`, `returns null for DAY with an empty-string eventDate`, `treats undefined eventDateEnd identically to null for RANGE` | Done |
|
| REQ-004 | `null`/`undefined`/`''` eventDate → `null`, no formatter call | #778 | timeline-date-label | `frontend/src/lib/timeline/dateLabel.ts` | `dateLabel.spec.ts` › `returns null for APPROX with a null eventDate, without calling the formatter`, `returns null for DAY with an empty-string eventDate`, `treats undefined eventDateEnd identically to null for RANGE` | Done |
|
||||||
| REQ-005 | No rendering logic outside `documentDate.ts` | #778 | timeline-date-label | `frontend/src/lib/timeline/dateLabel.ts` (façade) | `dateLabel.spec.ts` › `delegates a same-year RANGE to formatDocumentDate` (asserts byte-identical delegation) | Done |
|
| REQ-005 | No rendering logic outside `documentDate.ts` | #778 | timeline-date-label | `frontend/src/lib/timeline/dateLabel.ts` (façade) | `dateLabel.spec.ts` › `delegates a same-year RANGE to formatDocumentDate` (asserts byte-identical delegation) | Done |
|
||||||
| REQ-006 | `timeline` in coverage `include` (80% branch gate) | #778 | timeline-date-label | `frontend/vite.config.ts` | coverage `include` now lists `src/lib/timeline/**`; covered by all `dateLabel.spec.ts` cases | Done |
|
| REQ-006 | `timeline` in coverage `include` (80% branch gate) | #778 | timeline-date-label | `frontend/vite.config.ts` | coverage `include` now lists `src/lib/timeline/**`; covered by all `dateLabel.spec.ts` cases | Done |
|
||||||
|
|
||||||
<!-- Append real features below this line, one row per REQ-NNN, with the real issue number. Keep the header row above. -->
|
<!-- Append real features below this line, one row per REQ-NNN, with the real issue number. Keep the header row above. -->
|
||||||
|
|
||||||
| REQ-001 | family-member Person with birthDate → 1 BIRTH event, precision passed through | #776 | derive-person-life-events | `timeline/TimelineEventService#buildBirthEvents` | `DerivedEventsAssemblyTest#should_emit_one_geburt_for_person_with_birthdate`, `#should_pass_birth_precision_through_unchanged` | Done |
|
| REQ-001 | family-member Person with birthDate → 1 BIRTH event, precision passed through | #776 | derive-person-life-events | `timeline/TimelineEventService#buildBirthEvents` | `DerivedEventsAssemblyTest#should_emit_one_geburt_for_person_with_birthdate`, `#should_pass_birth_precision_through_unchanged` | Done |
|
||||||
| REQ-002 | family-member Person with deathDate → 1 DEATH event | #776 | derive-person-life-events | `timeline/TimelineEventService#buildDeathEvents` | `DerivedEventsAssemblyTest#should_emit_one_tod_for_person_with_deathdate`, `#should_emit_one_tod_and_zero_geburt_for_person_with_deathdate_only` | Done |
|
| REQ-002 | family-member Person with deathDate → 1 DEATH event | #776 | derive-person-life-events | `timeline/TimelineEventService#buildDeathEvents` | `DerivedEventsAssemblyTest#should_emit_one_tod_for_person_with_deathdate`, `#should_emit_one_tod_and_zero_geburt_for_person_with_deathdate_only` | Done |
|
||||||
| REQ-003 | null birthDate → 0 Geburt events | #776 | derive-person-life-events | `timeline/TimelineEventService#buildBirthEvents` | `DerivedEventsAssemblyTest#should_emit_zero_tod_when_person_has_birthdate_but_no_deathdate`, `#should_emit_one_tod_and_zero_geburt_for_person_with_deathdate_only` | Done |
|
| REQ-003 | null birthDate → 0 Geburt events | #776 | derive-person-life-events | `timeline/TimelineEventService#buildBirthEvents` | `DerivedEventsAssemblyTest#should_emit_zero_tod_when_person_has_birthdate_but_no_deathdate`, `#should_emit_one_tod_and_zero_geburt_for_person_with_deathdate_only` | Done |
|
||||||
| REQ-004 | null deathDate → 0 Tod events; no dates → 0 events | #776 | derive-person-life-events | `timeline/TimelineEventService#buildDeathEvents` | `DerivedEventsAssemblyTest#should_emit_no_events_for_person_with_neither_date` | Done |
|
| REQ-004 | null deathDate → 0 Tod events; no dates → 0 events | #776 | derive-person-life-events | `timeline/TimelineEventService#buildDeathEvents` | `DerivedEventsAssemblyTest#should_emit_no_events_for_person_with_neither_date` | Done |
|
||||||
| REQ-005 | SPOUSE*OF edge with fromYear → MARRIAGE event, eventDate={fromYear}-01-01, precision=YEAR | #776 | derive-person-life-events | `timeline/TimelineEventService#buildMarriageEvents` | `DerivedEventsAssemblyTest#should_emit_one_heirat_for_spouse_edge_with_fromYear` | Done |
|
| REQ-005 | SPOUSE_OF edge with fromYear → MARRIAGE event, eventDate={fromYear}-01-01, precision=YEAR | #776 | derive-person-life-events | `timeline/TimelineEventService#buildMarriageEvents` | `DerivedEventsAssemblyTest#should_emit_one_heirat_for_spouse_edge_with_fromYear` | Done |
|
||||||
| REQ-006 | SPOUSE_OF edge with null fromYear → MARRIAGE emitted, eventDate=null, precision=UNKNOWN | #776 | derive-person-life-events | `timeline/TimelineEventService#buildMarriageEvents` | `DerivedEventsAssemblyTest#should_emit_unknown_precision_heirat_when_fromYear_is_null` | Done |
|
| REQ-006 | SPOUSE_OF edge with null fromYear → MARRIAGE emitted, eventDate=null, precision=UNKNOWN | #776 | derive-person-life-events | `timeline/TimelineEventService#buildMarriageEvents` | `DerivedEventsAssemblyTest#should_emit_unknown_precision_heirat_when_fromYear_is_null` | Done |
|
||||||
| REQ-007 | exactly one MARRIAGE per SPOUSE_OF row (dedup on relationship id) | #776 | derive-person-life-events | `timeline/TimelineEventService#buildMarriageEvents` | `DerivedEventsAssemblyTest#should_emit_exactly_one_heirat_when_both_spouses_in_scope`, `#should_emit_two_heirat_for_person_married_to_two_partners` | Done |
|
| REQ-007 | exactly one MARRIAGE per SPOUSE_OF row (dedup on relationship id) | #776 | derive-person-life-events | `timeline/TimelineEventService#buildMarriageEvents` | `DerivedEventsAssemblyTest#should_emit_exactly_one_heirat_when_both_spouses_in_scope`, `#should_emit_two_heirat_for_person_married_to_two_partners` | Done |
|
||||||
| REQ-008 | synthetic prefixed ids (birth:/death:/marriage:), never parseable as UUID | #776 | derive-person-life-events | `timeline/TimelineEventService#buildBirthEvents,#buildDeathEvents,#buildMarriageEvents` | `DerivedEventsAssemblyTest#should_mint_prefixed_synthetic_ids_never_uuid` | Done |
|
| REQ-008 | synthetic prefixed ids (birth:/death:/marriage:), never parseable as UUID | #776 | derive-person-life-events | `timeline/TimelineEventService#buildBirthEvents,#buildDeathEvents,#buildMarriageEvents` | `DerivedEventsAssemblyTest#should_mint_prefixed_synthetic_ids_never_uuid` | Done |
|
||||||
@@ -174,45 +173,3 @@
|
|||||||
| REQ-012 | chip renders wherever a LetterCard renders (global timeline + expanded YearLetterStrip) | #835 | zeitstrahl-tag-chips | `frontend/src/lib/timeline/LetterCard.svelte` | `LetterCard.svelte.spec.ts#renders the chip inside an expanded YearLetterStrip too` | Done |
|
| REQ-012 | chip renders wherever a LetterCard renders (global timeline + expanded YearLetterStrip) | #835 | zeitstrahl-tag-chips | `frontend/src/lib/timeline/LetterCard.svelte` | `LetterCard.svelte.spec.ts#renders the chip inside an expanded YearLetterStrip too` | Done |
|
||||||
| REQ-013 | sr-only theme label is a Paraglide key present in de/en/es | #835 | zeitstrahl-tag-chips | `frontend/messages/{de,en,es}.json` | `messages.spec.ts#zeitstrahl tag-chip label key is present in all locales` | Done |
|
| REQ-013 | sr-only theme label is a Paraglide key present in de/en/es | #835 | zeitstrahl-tag-chips | `frontend/messages/{de,en,es}.json` | `messages.spec.ts#zeitstrahl tag-chip label key is present in all locales` | Done |
|
||||||
| REQ-014 | GET /api/timeline stays read-only (READ_ALL); no new endpoint/ErrorCode/IDOR; assembly logs UUIDs only | #835 | zeitstrahl-tag-chips | `timeline/TimelineController` (unchanged), `timeline/TimelineService` | `TimelineControllerTest#returns_200_with_read_all_permission`, `#returns_403_when_authenticated_without_read_all` (unchanged path); no tag names logged (review) | Done |
|
| REQ-014 | GET /api/timeline stays read-only (READ_ALL); no new endpoint/ErrorCode/IDOR; assembly logs UUIDs only | #835 | zeitstrahl-tag-chips | `timeline/TimelineController` (unchanged), `timeline/TimelineService` | `TimelineControllerTest#returns_200_with_read_all_permission`, `#returns_403_when_authenticated_without_read_all` (unchanged path); no tag names logged (review) | Done |
|
||||||
| REQ-001 | TimelineFilters is presentation-only (3 $bindable layer booleans + onChange); no goto/url.searchParams/api.GET/fetch | #780 | timeline-layer-filter | `frontend/src/lib/timeline/TimelineFilters.svelte` | `TimelineFilters.svelte.spec.ts#renders the three layer toggles with accessible names`, `#reflects a layer as pressed and flips it, firing onChange`; `timelineFilterBoundary.spec.ts` | Done |
|
|
||||||
| REQ-002 | route derives a client-side $derived filtered view, passes it to TimelineView; no goto/fetch on toggle | #780 | timeline-layer-filter | `frontend/src/routes/zeitstrahl/+page.svelte`, `frontend/src/lib/timeline/timelineFilter.ts#filterTimeline` | `page.svelte.spec.ts#hides letter cards when the Letters layer is off ... with no fetch`; `timelineFilterBoundary.spec.ts` | Done |
|
|
||||||
| REQ-003 | Personal off → personal events (curated + derived life-events) hidden client-side | #780 | timeline-layer-filter | `frontend/src/lib/timeline/timelineFilter.ts#filterTimeline` | `timelineFilter.spec.ts#hides personal events — curated and derived`, `page.svelte.spec.ts#hides personal event cards` | Done |
|
|
||||||
| REQ-004 | Historical off → historical event entries hidden client-side | #780 | timeline-layer-filter | `frontend/src/lib/timeline/timelineFilter.ts#filterTimeline` | `timelineFilter.spec.ts#hides HISTORICAL events`, `page.svelte.spec.ts#hides historical event cards` | Done |
|
|
||||||
| REQ-005 | Letters off → letter entries hidden client-side | #780 | timeline-layer-filter | `frontend/src/lib/timeline/timelineFilter.ts#filterTimeline` | `timelineFilter.spec.ts#hides LETTER entries`, `page.svelte.spec.ts#hides letter cards` | Done |
|
|
||||||
| REQ-006 | zero visible → filter empty-state + one-click reset below the open bar (never blank, never generic empty) | #780 | timeline-layer-filter | `frontend/src/routes/zeitstrahl/+page.svelte`, `frontend/src/lib/timeline/timelineFilter.ts#filterTimeline` | `page.svelte.spec.ts#shows the filtered-empty message + reset below the open bar`, `timelineFilter.spec.ts#drops year bands that become empty` | Done |
|
|
||||||
| REQ-007 | sticky "Filter (N aktiv)" trigger; N from isDefaultState/hiddenLayerCount; 44px target | #780 | timeline-layer-filter | `frontend/src/lib/timeline/timelineFilter.ts`, `frontend/src/lib/timeline/TimelineFilters.svelte` | `timelineFilter.spec.ts#isDefaultState`, `#hiddenLayerCount`; `TimelineFilters.svelte.spec.ts#shows a plain trigger ... and a count`, `#gives the trigger a 44px touch target` | Done |
|
|
||||||
| REQ-008 | reset text button restores all layers on; visibility tracks a $derived any-layer-off flag | #780 | timeline-layer-filter | `frontend/src/lib/timeline/TimelineFilters.svelte` | `TimelineFilters.svelte.spec.ts#hides the reset button by default and restores all layers when activated` | Done |
|
|
||||||
| REQ-009 | prefers-reduced-motion → slide duration 0 (matchMedia guard reused from documents/[id]/+page.svelte:57) | #780 | timeline-layer-filter | `frontend/src/lib/timeline/TimelineFilters.svelte` | manual reduced-motion check + svelte-autofixer/code review (guard reused, only the slide `duration` zeroed) | Done |
|
|
||||||
| REQ-010 | 8 timeline_filter*_ keys in de/en/es; trigger vs trigger*active({count}) distinct | #780 | timeline-layer-filter | `frontend/messages/{de,en,es}.json` | `messages.spec.ts#zeitstrahl layer-filter keys are present in all locales (#780 REQ-010)` | Done |
|
|
||||||
| REQ-001 | WRITE_ALL viewer → "Ereignis hinzufügen" link to /zeitstrahl/events/new in the wrapping Zeitstrahl header | #842 | timeline-curator-affordances | `frontend/src/routes/zeitstrahl/+page.svelte`, `frontend/messages/{de,en,es}.json` | `zeitstrahl/page.svelte.spec.ts#renders the add-event CTA in a wrapping header when the viewer can write` | Done |
|
|
||||||
| REQ-002 | viewer without WRITE_ALL → no add-event affordance on /zeitstrahl | #842 | timeline-curator-affordances | `frontend/src/routes/zeitstrahl/+page.svelte` | `zeitstrahl/page.svelte.spec.ts#renders no add-event CTA when the viewer cannot write` | Done |
|
|
||||||
| REQ-003 | WRITE_ALL viewer → person-page "Ereignis für diese Person" link to /zeitstrahl/events/new?personId={id} | #842 | timeline-curator-affordances | `frontend/src/routes/persons/[id]/PersonCard.svelte`, `frontend/messages/{de,en,es}.json` | `PersonCard.svelte.spec.ts#shows an add-event link pre-seeded with the person to a curator` | Done |
|
|
||||||
| REQ-004 | viewer without WRITE_ALL → no add-event affordance on /persons/{id} | #842 | timeline-curator-affordances | `frontend/src/routes/persons/[id]/PersonCard.svelte` | `PersonCard.svelte.spec.ts#renders no add-event link to a reader` | Done |
|
|
||||||
| REQ-005 | WRITE_ALL → EventPill edit link /zeitstrahl/events/{eventId}/edit for a curated PERSONAL event | #842 | timeline-curator-affordances | `frontend/src/lib/timeline/EventPill.svelte` | `EventPill.svelte.spec.ts#shows an edit affordance for a curated PERSONAL event when canWrite is true` | Done |
|
|
||||||
| REQ-006 | WRITE_ALL → WorldBand edit link /zeitstrahl/events/{eventId}/edit for a curated HISTORICAL event (new inline ✎) | #842 | timeline-curator-affordances | `frontend/src/lib/timeline/WorldBand.svelte` | `WorldBand.svelte.spec.ts#shows an edit affordance for a curated HISTORICAL event when canWrite is true`, `#mirrors the EventPill pencil` | Done |
|
|
||||||
| REQ-007 | viewer without WRITE_ALL → neither EventPill nor WorldBand renders an edit link | #842 | timeline-curator-affordances | `frontend/src/lib/timeline/EventPill.svelte`, `frontend/src/lib/timeline/WorldBand.svelte` | `EventPill.svelte.spec.ts#renders no edit affordance for a curated PERSONAL event when canWrite is false`, `WorldBand.svelte.spec.ts#renders no edit affordance for a curated HISTORICAL event when canWrite is false`, `TimelineView.svelte.spec.ts#renders no edit links in either path when canWrite is false` | Done |
|
|
||||||
| REQ-008 | derived OR null eventId → no edit link regardless of permission (contract preserved) | #842 | timeline-curator-affordances | `frontend/src/lib/timeline/EventPill.svelte`, `frontend/src/lib/timeline/WorldBand.svelte` | `EventPill.svelte.spec.ts#shows no edit affordance when eventId is null even with canWrite`, `#shows no edit affordance for a derived event even with canWrite`, `WorldBand.svelte.spec.ts#shows no edit affordance when eventId is null even with canWrite` | Done |
|
|
||||||
| REQ-009 | TimelineView threads canWrite through the year-band path and the undated bucket (identical gate) | #842 | timeline-curator-affordances | `frontend/src/lib/timeline/TimelineView.svelte`, `frontend/src/lib/timeline/YearBand.svelte` | `TimelineView.svelte.spec.ts#threads canWrite to a curated event in both a year band and the undated bucket`, `#threads canWrite to a curated HISTORICAL world band in both paths` | Done |
|
|
||||||
| REQ-010 | person add-event opens #781 create form prefilled with the person, returns to /persons/{id} on save | #842 | timeline-curator-affordances | `frontend/src/routes/persons/[id]/PersonCard.svelte`, `frontend/src/routes/zeitstrahl/events/new/+page.server.ts` (#781) | `PersonCard.svelte.spec.ts#shows an add-event link pre-seeded with the person to a curator` (URL), `zeitstrahl/events/new/page.server.spec.ts#redirects to /persons/{id} when originPersonId is a valid UUID` (#781) | Done |
|
|
||||||
| REQ-011 | non-curator direct nav to /zeitstrahl/events/new or /{id}/edit → 403 (existing #781 route guard, regression) | #842 | timeline-curator-affordances | `frontend/src/routes/zeitstrahl/events/new/+page.server.ts`, `frontend/src/routes/zeitstrahl/events/[id]/edit/+page.server.ts` (#781, unchanged — both share `requireWriteAll`) | `zeitstrahl/events/new/page.server.spec.ts#throws 403 for an authenticated user without WRITE_ALL`, `zeitstrahl/events/[id]/edit/page.server.spec.ts#throws 403 for a user without WRITE_ALL` | Done |
|
|
||||||
| REQ-001 | axis-fixed layers (life-events, pills, world-bands) render identically across all 3 modes; only loose letters re-bundle | #827 | timeline-grouping-modes | `frontend/src/lib/timeline/TimelineView.svelte`, `frontend/src/lib/timeline/YearBand.svelte` | `grouping-event-layer-identity.svelte.spec.ts#renders the event pills and world-bands identically across all three grouping modes`, `YearBand.svelte.spec.ts#still renders the event world-band in Ereignis mode` | Done |
|
|
||||||
| REQ-002 | mode switch re-bundles loose letters over the layer-filtered view, no GET /api/timeline refetch | #827 | timeline-grouping-modes | `frontend/src/routes/zeitstrahl/+page.svelte`, `frontend/src/lib/timeline/timelineGrouping.ts`, `frontend/src/lib/timeline/TimelineView.svelte` | `zeitstrahl/page.svelte.spec.ts#regroups loose letters under their event client-side`, `e2e/zeitstrahl-grouping.spec.ts#switching grouping modes issues no extra timeline fetch` | Done |
|
|
||||||
| REQ-003 | Ereignis clusters each loose letter under the curated event whose documents contain it | #827 | timeline-grouping-modes | `frontend/src/lib/timeline/timelineGrouping.ts#bucketLetters`, `frontend/src/lib/timeline/YearBand.svelte`, `frontend/src/lib/timeline/LetterBucket.svelte` | `timelineGrouping.spec.ts#clusters letters under the curated event named by linkedEventId`, `YearBand.svelte.spec.ts#clusters loose letters under their linked event in Ereignis mode` | Done |
|
|
||||||
| REQ-004 | Thema buckets each loose letter per year under its primary root tag (rootTagId) | #827 | timeline-grouping-modes | `frontend/src/lib/timeline/timelineGrouping.ts#bucketLetters`, `frontend/src/lib/timeline/YearBand.svelte`, `frontend/src/lib/timeline/LetterBucket.svelte` | `timelineGrouping.spec.ts#buckets letters under their primary root tag with name and colour`, `YearBand.svelte.spec.ts#buckets loose letters under their root tag in Thema mode` | Done |
|
|
||||||
| REQ-005 | TimelineEntryDTO carries nullable linkedEventId, resolved in one batched membership pass | #827 | timeline-grouping-modes | `backend/.../timeline/TimelineEntryDTO.java`, `backend/.../timeline/TimelineService.java#resolveLetterEventLinks`, `frontend/src/lib/generated/api.ts` | `TimelineServiceTest#letter_in_a_curated_events_documents_carries_that_events_id` | Done |
|
|
||||||
| REQ-005b | linkedEventId is nullable / not @Schema REQUIRED; null for non-letter entries | #827 | timeline-grouping-modes | `backend/.../timeline/TimelineEntryDTO.java`, `frontend/src/lib/generated/api.ts` (`linkedEventId?`) | `TimelineServiceTest#letter_in_no_curated_event_has_null_linkedEventId` | Done |
|
|
||||||
| REQ-006 | Ereignis: letter with null linkedEventId → per-year "Weitere Briefe" bucket | #827 | timeline-grouping-modes | `frontend/src/lib/timeline/timelineGrouping.ts`, `frontend/src/lib/timeline/LetterBucket.svelte` | `timelineGrouping.spec.ts#drops a letter with no linkedEventId into the fallback bucket`, `LetterBucket.svelte.spec.ts#uses the localized "Weitere Briefe" label` | Done |
|
|
||||||
| REQ-007 | Thema: untagged letter → per-year "Ohne Thema" bucket | #827 | timeline-grouping-modes | `frontend/src/lib/timeline/timelineGrouping.ts`, `frontend/src/lib/timeline/LetterBucket.svelte` | `timelineGrouping.spec.ts#drops an untagged letter into the "Ohne Thema" fallback bucket`, `LetterBucket.svelte.spec.ts#uses the localized "Ohne Thema" label` | Done |
|
|
||||||
| REQ-008 | multi-tagged letter appears under exactly one root tag, never duplicated | #827 | timeline-grouping-modes | `frontend/src/lib/timeline/timelineGrouping.ts` | `timelineGrouping.spec.ts#places a letter in exactly one bucket` | Done |
|
|
||||||
| REQ-009 | tag names + hint render via `{...}` escaping; grep gate forbids `{@html}` in lib/timeline | #827 | timeline-grouping-modes | `frontend/src/lib/timeline/BucketHeaderChip.svelte`, `frontend/src/lib/timeline/LetterCard.svelte`, `frontend/src/lib/timeline/TagChip.svelte` | `BucketHeaderChip.svelte.spec.ts#renders an HTML-bearing name as inert text`, `timeline-no-raw-html.spec.ts#no timeline component contains the raw-HTML directive` | Done |
|
|
||||||
| REQ-010 | grouping control is a keyboard-navigable role=radiogroup, ≥44px text segments, default Datum, dark-mode contrast | #827 | timeline-grouping-modes | `frontend/src/lib/timeline/GroupingControl.svelte` | `GroupingControl.svelte.spec.ts#renders three radios inside a radiogroup`, `#moves the selection forward with the right arrow key`, `#each segment has a tap target of at least 44×44px`, `#defaults to Datum`; `e2e/zeitstrahl-grouping.spec.ts#no wcag2a/wcag2aa violations ... (light + dark)` | Done |
|
|
||||||
| REQ-011 | ≤320px: control overflow-free + tap ≥44px, each abbreviation carries its full word as aria-label | #827 | timeline-grouping-modes | `frontend/src/lib/timeline/GroupingControl.svelte` | `GroupingControl.svelte.spec.ts#exposes each segment full word as an aria-label`, `e2e/zeitstrahl-grouping.spec.ts#the control stays overflow-free and operable at 320px` | Done |
|
|
||||||
| REQ-012 | new grouping/bucket Paraglide keys in de/en/es; no collision with existing timeline*_ keys | #827 | timeline-grouping-modes | `frontend/messages/{de,en,es}.json` | `messages.spec.ts#zeitstrahl grouping + bucket keys are present in all locales (#827 REQ-012)`, `messages.spec.ts#de, en, and es have identical key sets` | Done |
|
|
||||||
| REQ-013 | failed timeline fetch → existing localized error via getErrorMessage; grouping has no independent failure mode | #827 | timeline-grouping-modes | `frontend/src/routes/zeitstrahl/+page.server.ts` (#779, unchanged) | `zeitstrahl/page.server` error path (#779 — getErrorMessage(extractErrorCode)) | Done |
|
|
||||||
| REQ-014 | Ereignis event-clustered letters live inside a **contained card whose header is the same-year curated event** (glyph, title, date, provenance, edit pencil) — the title reads once, no separate floating pill; letters render as the compact `.lcard.ev` variant, first 5 + show-more (redesign #847 → #827 grouped-card layout) | #827 | timeline-grouping-modes | `frontend/src/lib/timeline/LetterCard.svelte`, `frontend/src/lib/timeline/LetterBucket.svelte`, `frontend/src/lib/timeline/YearBand.svelte` | `LetterCard.svelte.spec.ts#carries the .lcard.ev class in the event variant`, `LetterBucket.svelte.spec.ts#renders the curated event as the card header when given an `event` (no separate pill)`, `LetterBucket.svelte.spec.ts#shows no edit affordance in the header when canWrite is false`, `YearBand.svelte.spec.ts#renders a same-year curated event as one card header, with no separate pill and no duplicate title` | Done |
|
|
||||||
| REQ-015 | Thema bucket-header chip tinted via rootTagColor `var(--c-tag-*)`, neutral fallback when null/unknown; **label kept in a fixed ink for ≥4.5:1 contrast** (redesign #847) | #827 | timeline-grouping-modes | `frontend/src/lib/timeline/BucketHeaderChip.svelte` | `BucketHeaderChip.svelte.spec.ts#tints the chip with var(--c-tag-{token})`, `#renders a neutral chip with no --c-tag- binding when colour is null`, `#falls back to neutral for an unknown colour token`, `#paints the label in a fixed ink colour, never the saturated tag token` | Done |
|
|
||||||
| REQ-016 | header meta-line grouping segment tracks the active mode (date/event/thema keys) | #827 | timeline-grouping-modes | `frontend/src/routes/zeitstrahl/+page.svelte` | `zeitstrahl/page.svelte.spec.ts#updates the meta-line grouping label when a mode is chosen` | Done |
|
|
||||||
| REQ-017 | Thema: per-letter TagChip suppressed inside its own bucket; still shown in Datum/Ereignis | #827 | timeline-grouping-modes | `frontend/src/lib/timeline/LetterCard.svelte`, `frontend/src/lib/timeline/LetterBucket.svelte` | `LetterCard.svelte.spec.ts#suppresses the per-letter tag chip when asked`, `#still shows the per-letter tag chip when not suppressed`, `LetterBucket.svelte.spec.ts#suppresses the per-letter tag chip inside its own root-tag bucket` | Done |
|
|
||||||
| REQ-018 | Letters layer off → grouping control disabled (kept in place), mode retained | #827 | timeline-grouping-modes | `frontend/src/routes/zeitstrahl/+page.svelte`, `frontend/src/lib/timeline/GroupingControl.svelte`, `frontend/src/lib/timeline/timelineGrouping.ts#hasLooseLetters` | `zeitstrahl/page.svelte.spec.ts#disables the grouping control when the Letters layer is off`, `GroupingControl.svelte.spec.ts#retains the active mode while disabled`, `timelineGrouping.spec.ts#hasLooseLetters` | Done |
|
|
||||||
| REQ-019 | Ereignis: letter whose only linking event was filtered off → "Weitere Briefe" (never re-introduced) | #827 | timeline-grouping-modes | `frontend/src/lib/timeline/timelineGrouping.ts#buildEventLookup`, `frontend/src/lib/timeline/TimelineView.svelte` | `timelineGrouping.spec.ts#drops a letter whose linked event is absent from the lookup into fallback` | Done |
|
|
||||||
| REQ-020 | Grouped clusters are **contained colour-railed cards** (bordered, rounded, surface) carrying compact cards; a cluster shows the first `CLUSTER_PREVIEW` (5) letters behind a show-more toggle, and the leftover bin is a **collapsed count-only drawer** revealed on demand — the month-density `YearLetterStrip` is no longer used in grouped mode (still used in Datum dense years) (redesign #847 → #827 grouped-card layout) | #827 | timeline-grouping-modes | `frontend/src/lib/timeline/LetterBucket.svelte`, `frontend/src/lib/timeline/timelineGrouping.ts#CLUSTER_PREVIEW`, `frontend/src/lib/timeline/LetterCard.svelte` | `LetterBucket.svelte.spec.ts#renders the cluster as a contained card (bordered, rounded, surface)`, `#binds a tag bucket together with a coloured left rail from its token`, `#shows only the first 5 letters with a show-more toggle when the cluster is larger`, `#expands to all letters and collapses back on toggle`, `#renders collapsed — count + reveal, no letter cards — until opened`, `#reveals the first 5 letters when opened`, `LetterCard.svelte.spec.ts#renders the compact variant on a single tighter row` | Done |
|
|
||||||
|
|||||||
@@ -28,13 +28,6 @@ import java.util.UUID;
|
|||||||
* They are deliberately NOT {@code @Schema(requiredMode = REQUIRED)} so the generated TypeScript
|
* They are deliberately NOT {@code @Schema(requiredMode = REQUIRED)} so the generated TypeScript
|
||||||
* types stay optional.
|
* types stay optional.
|
||||||
*
|
*
|
||||||
* <p><b>Letter→event link ({@code linkedEventId}):</b> for a {@link Kind#LETTER} entry, the id of
|
|
||||||
* the curated {@link TimelineEvent} whose {@code documents} set contains the letter's document, or
|
|
||||||
* {@code null} when the letter is referenced by no curated event (#827). Computed on read from the
|
|
||||||
* existing {@code timeline_event_documents} join — no new column. {@code null} for non-letter
|
|
||||||
* entries. Deliberately NOT {@code @Schema(requiredMode = REQUIRED)} so the generated TypeScript
|
|
||||||
* type stays optional.
|
|
||||||
*
|
|
||||||
* <p>Callers of {@code TimelineEventService.assembleDerivedEvents()} must independently enforce
|
* <p>Callers of {@code TimelineEventService.assembleDerivedEvents()} must independently enforce
|
||||||
* {@code READ_ALL} authorization before invoking that method (see ADR-043).
|
* {@code READ_ALL} authorization before invoking that method (see ADR-043).
|
||||||
*/
|
*/
|
||||||
@@ -54,7 +47,6 @@ public record TimelineEntryDTO(
|
|||||||
DerivedEventType derivedType,
|
DerivedEventType derivedType,
|
||||||
UUID rootTagId,
|
UUID rootTagId,
|
||||||
String rootTagName,
|
String rootTagName,
|
||||||
String rootTagColor,
|
String rootTagColor
|
||||||
UUID linkedEventId
|
|
||||||
) {
|
) {
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -267,7 +267,7 @@ public class TimelineEventService {
|
|||||||
p.getBirthDate(), null,
|
p.getBirthDate(), null,
|
||||||
p.getDisplayName(), EventType.PERSONAL,
|
p.getDisplayName(), EventType.PERSONAL,
|
||||||
null, null, List.of(p.getId()), DerivedEventType.BIRTH,
|
null, null, List.of(p.getId()), DerivedEventType.BIRTH,
|
||||||
null, null, null, null))
|
null, null, null))
|
||||||
.toList();
|
.toList();
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -279,7 +279,7 @@ public class TimelineEventService {
|
|||||||
p.getDeathDate(), null,
|
p.getDeathDate(), null,
|
||||||
p.getDisplayName(), EventType.PERSONAL,
|
p.getDisplayName(), EventType.PERSONAL,
|
||||||
null, null, List.of(p.getId()), DerivedEventType.DEATH,
|
null, null, List.of(p.getId()), DerivedEventType.DEATH,
|
||||||
null, null, null, null))
|
null, null, null))
|
||||||
.toList();
|
.toList();
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -304,7 +304,7 @@ public class TimelineEventService {
|
|||||||
null, null,
|
null, null,
|
||||||
List.of(r.getPerson().getId(), r.getRelatedPerson().getId()),
|
List.of(r.getPerson().getId(), r.getRelatedPerson().getId()),
|
||||||
DerivedEventType.MARRIAGE,
|
DerivedEventType.MARRIAGE,
|
||||||
null, null, null, null));
|
null, null, null));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
return result;
|
return result;
|
||||||
|
|||||||
@@ -80,14 +80,9 @@ public class TimelineService {
|
|||||||
// Resolve generation person IDs once — used across all three layers
|
// Resolve generation person IDs once — used across all three layers
|
||||||
Set<UUID> genPersonIds = resolveGenerationPersonIds(filter.generation());
|
Set<UUID> genPersonIds = resolveGenerationPersonIds(filter.generation());
|
||||||
|
|
||||||
// Fetch curated events once — reused for both the event entries below and the
|
|
||||||
// batched letter→event link resolution (resolveLetterEventLinks), so the
|
|
||||||
// membership pass costs no extra query. REQ-005.
|
|
||||||
List<TimelineEvent> allEvents = eventRepository.findAll();
|
|
||||||
|
|
||||||
// ── curated events ───────────────────────────────────────────────────
|
// ── curated events ───────────────────────────────────────────────────
|
||||||
List<TimelineEntryDTO> entries = new ArrayList<>();
|
List<TimelineEntryDTO> entries = new ArrayList<>();
|
||||||
for (TimelineEvent ev : allEvents) {
|
for (TimelineEvent ev : eventRepository.findAll()) {
|
||||||
if (!passesTypeFilter(ev.getType(), filter.type())) continue;
|
if (!passesTypeFilter(ev.getType(), filter.type())) continue;
|
||||||
if (!passesPersonFilter(ev.getPersons(), filter.personId())) continue;
|
if (!passesPersonFilter(ev.getPersons(), filter.personId())) continue;
|
||||||
if (!passesGenerationFilter(ev.getPersons(), genPersonIds)) continue;
|
if (!passesGenerationFilter(ev.getPersons(), genPersonIds)) continue;
|
||||||
@@ -112,9 +107,8 @@ public class TimelineService {
|
|||||||
letters.add(doc);
|
letters.add(doc);
|
||||||
}
|
}
|
||||||
Map<UUID, RootTag> rootByDocId = resolveLetterRootTags(letters);
|
Map<UUID, RootTag> rootByDocId = resolveLetterRootTags(letters);
|
||||||
Map<UUID, UUID> eventByDocId = resolveLetterEventLinks(letters, allEvents);
|
|
||||||
for (Document doc : letters) {
|
for (Document doc : letters) {
|
||||||
entries.add(mapDocument(doc, rootByDocId, eventByDocId));
|
entries.add(mapDocument(doc, rootByDocId));
|
||||||
}
|
}
|
||||||
|
|
||||||
return bucket(entries);
|
return bucket(entries);
|
||||||
@@ -235,13 +229,11 @@ public class TimelineService {
|
|||||||
null,
|
null,
|
||||||
null,
|
null,
|
||||||
null,
|
null,
|
||||||
null,
|
|
||||||
null
|
null
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
private TimelineEntryDTO mapDocument(Document doc, Map<UUID, RootTag> rootByDocId,
|
private TimelineEntryDTO mapDocument(Document doc, Map<UUID, RootTag> rootByDocId) {
|
||||||
Map<UUID, UUID> eventByDocId) {
|
|
||||||
RootTag root = rootByDocId.get(doc.getId());
|
RootTag root = rootByDocId.get(doc.getId());
|
||||||
return new TimelineEntryDTO(
|
return new TimelineEntryDTO(
|
||||||
Kind.LETTER,
|
Kind.LETTER,
|
||||||
@@ -259,38 +251,10 @@ public class TimelineService {
|
|||||||
null,
|
null,
|
||||||
root == null ? null : root.id(),
|
root == null ? null : root.id(),
|
||||||
root == null ? null : root.name(),
|
root == null ? null : root.name(),
|
||||||
root == null ? null : root.color(),
|
root == null ? null : root.color()
|
||||||
eventByDocId.get(doc.getId())
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
|
||||||
* Resolves each letter's linked curated event in one batched pass, keyed by document id: the
|
|
||||||
* event whose {@code documents} set contains the letter (REQ-005). A single doc→event map is
|
|
||||||
* built over the already-loaded events — no per-letter query ({@code TimelineEvent.documents}
|
|
||||||
* carries {@code @BatchSize(50)}). When a document is referenced by more than one curated
|
|
||||||
* event, the first by repository iteration order wins ({@code putIfAbsent}). The map is built
|
|
||||||
* from <em>all</em> events (not just the year/type-filtered ones) so the link is a stable
|
|
||||||
* property of the data; the frontend's filter-then-group decides whether the linked event is
|
|
||||||
* actually on screen (#827). Logs nothing — the assembly path keeps UUIDs out of logs (§2.7).
|
|
||||||
*/
|
|
||||||
private Map<UUID, UUID> resolveLetterEventLinks(List<Document> letters, List<TimelineEvent> events) {
|
|
||||||
Set<UUID> letterDocIds = letters.stream().map(Document::getId).collect(Collectors.toSet());
|
|
||||||
if (letterDocIds.isEmpty()) return Map.of();
|
|
||||||
|
|
||||||
Map<UUID, UUID> eventByDocId = new HashMap<>();
|
|
||||||
for (TimelineEvent ev : events) {
|
|
||||||
Set<Document> linkedDocs = ev.getDocuments();
|
|
||||||
if (linkedDocs == null) continue;
|
|
||||||
for (Document linked : linkedDocs) {
|
|
||||||
if (letterDocIds.contains(linked.getId())) {
|
|
||||||
eventByDocId.putIfAbsent(linked.getId(), ev.getId());
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return eventByDocId;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Resolves each letter's primary root tag in one batched pass, keyed by document id — no
|
* Resolves each letter's primary root tag in one batched pass, keyed by document id — no
|
||||||
* per-letter N+1: each letter contributes only its alphabetically-first assigned tag (#835),
|
* per-letter N+1: each letter contributes only its alphabetically-first assigned tag (#835),
|
||||||
|
|||||||
@@ -69,10 +69,10 @@ class TimelineServiceTest {
|
|||||||
UUID id2 = UUID.fromString("00000000-0000-0000-0000-000000000002");
|
UUID id2 = UUID.fromString("00000000-0000-0000-0000-000000000002");
|
||||||
var e1 = new TimelineEntryDTO(Kind.LETTER, DatePrecision.DAY, false, "", "",
|
var e1 = new TimelineEntryDTO(Kind.LETTER, DatePrecision.DAY, false, "", "",
|
||||||
LocalDate.of(1914, 7, 28), null, "Same Title", null, null, id1, List.of(), null,
|
LocalDate.of(1914, 7, 28), null, "Same Title", null, null, id1, List.of(), null,
|
||||||
null, null, null, null);
|
null, null, null);
|
||||||
var e2 = new TimelineEntryDTO(Kind.LETTER, DatePrecision.DAY, false, "", "",
|
var e2 = new TimelineEntryDTO(Kind.LETTER, DatePrecision.DAY, false, "", "",
|
||||||
LocalDate.of(1914, 7, 28), null, "Same Title", null, null, id2, List.of(), null,
|
LocalDate.of(1914, 7, 28), null, "Same Title", null, null, id2, List.of(), null,
|
||||||
null, null, null, null);
|
null, null, null);
|
||||||
|
|
||||||
var sorted = List.of(e2, e1).stream()
|
var sorted = List.of(e2, e1).stream()
|
||||||
.sorted(TimelineService.WITHIN_BAND_ORDER)
|
.sorted(TimelineService.WITHIN_BAND_ORDER)
|
||||||
@@ -511,44 +511,6 @@ class TimelineServiceTest {
|
|||||||
verify(tagService, times(1)).resolveRootTags(anyList());
|
verify(tagService, times(1)).resolveRootTags(anyList());
|
||||||
}
|
}
|
||||||
|
|
||||||
// ─── letter→event link (#827, REQ-005/006) ───────────────────────────────
|
|
||||||
|
|
||||||
@Test
|
|
||||||
void letter_in_a_curated_events_documents_carries_that_events_id() {
|
|
||||||
// REQ-005: linkedEventId = the curated event whose documents set contains the letter.
|
|
||||||
Document letterDoc = docWithDate(LocalDate.of(1915, 5, 1), DatePrecision.MONTH);
|
|
||||||
UUID eventId = UUID.randomUUID();
|
|
||||||
TimelineEvent event = TimelineEvent.builder().id(eventId)
|
|
||||||
.title("Briefe von der Front").type(EventType.PERSONAL)
|
|
||||||
.documents(new HashSet<>(Set.of(letterDoc)))
|
|
||||||
.build(); // no eventDate → event lands undated, leaving the year band to the letter
|
|
||||||
when(eventRepository.findAll()).thenReturn(List.of(event));
|
|
||||||
when(timelineEventService.assembleDerivedEvents()).thenReturn(List.of());
|
|
||||||
when(documentService.getAllForTimeline()).thenReturn(List.of(letterDoc));
|
|
||||||
|
|
||||||
TimelineEntryDTO entry = onlyLetterEntry(timelineService.assemble(noFilters()));
|
|
||||||
|
|
||||||
assertThat(entry.linkedEventId()).isEqualTo(eventId);
|
|
||||||
}
|
|
||||||
|
|
||||||
@Test
|
|
||||||
void letter_in_no_curated_event_has_null_linkedEventId() {
|
|
||||||
// REQ-006: a letter referenced by no curated event → linkedEventId null (frontend falls
|
|
||||||
// back to the per-year "Weitere Briefe" bucket).
|
|
||||||
Document letterDoc = docWithDate(LocalDate.of(1915, 5, 1), DatePrecision.MONTH);
|
|
||||||
TimelineEvent event = TimelineEvent.builder().id(UUID.randomUUID())
|
|
||||||
.title("Anderes Ereignis").type(EventType.PERSONAL)
|
|
||||||
.documents(new HashSet<>(Set.of(Document.builder().id(UUID.randomUUID()).build())))
|
|
||||||
.build();
|
|
||||||
when(eventRepository.findAll()).thenReturn(List.of(event));
|
|
||||||
when(timelineEventService.assembleDerivedEvents()).thenReturn(List.of());
|
|
||||||
when(documentService.getAllForTimeline()).thenReturn(List.of(letterDoc));
|
|
||||||
|
|
||||||
TimelineEntryDTO entry = onlyLetterEntry(timelineService.assemble(noFilters()));
|
|
||||||
|
|
||||||
assertThat(entry.linkedEventId()).isNull();
|
|
||||||
}
|
|
||||||
|
|
||||||
private static TimelineEntryDTO onlyLetterEntry(TimelineDTO result) {
|
private static TimelineEntryDTO onlyLetterEntry(TimelineDTO result) {
|
||||||
assertThat(result.years()).hasSize(1);
|
assertThat(result.years()).hasSize(1);
|
||||||
return result.years().get(0).entries().get(0);
|
return result.years().get(0).entries().get(0);
|
||||||
@@ -561,7 +523,7 @@ class TimelineServiceTest {
|
|||||||
private static TimelineEntryDTO letter(LocalDate date, DatePrecision precision, String title) {
|
private static TimelineEntryDTO letter(LocalDate date, DatePrecision precision, String title) {
|
||||||
return new TimelineEntryDTO(Kind.LETTER, precision, false, "", "",
|
return new TimelineEntryDTO(Kind.LETTER, precision, false, "", "",
|
||||||
date, null, title, null, null, UUID.randomUUID(), List.of(), null,
|
date, null, title, null, null, UUID.randomUUID(), List.of(), null,
|
||||||
null, null, null, null);
|
null, null, null);
|
||||||
}
|
}
|
||||||
|
|
||||||
private static Document docWithDate(LocalDate date, DatePrecision precision) {
|
private static Document docWithDate(LocalDate date, DatePrecision precision) {
|
||||||
|
|||||||
@@ -1,78 +0,0 @@
|
|||||||
# ADR-045 — The /zeitstrahl Ereignis/Thema regroup is client-side, over a computed letter→event link
|
|
||||||
|
|
||||||
**Status:** Accepted
|
|
||||||
**Date:** 2026-06-15
|
|
||||||
**Issue:** #827 (Zeitstrahl milestone; deferred follow-up to #779, builds on #835/PR #838 and #780)
|
|
||||||
|
|
||||||
## Context
|
|
||||||
|
|
||||||
#779 shipped `/zeitstrahl` in **Datum** mode only and deferred the Concept-A
|
|
||||||
**Datum · Ereignis · Thema** segmented control, because the other two modes need data the
|
|
||||||
`TimelineEntryDTO` did not carry: a letter's curated-event association (Ereignis) and a letter's
|
|
||||||
primary root tag + colour (Thema). #835 (merged in PR #838) added the Thema fields
|
|
||||||
(`rootTagId`/`rootTagName`/`rootTagColor`) and the batched `TimelineService → TagService`
|
|
||||||
resolver. Meanwhile #780 added the **layer filter** — `/zeitstrahl/+page.svelte` owns
|
|
||||||
`personalOn`/`historicalOn`/`lettersOn` `$state` and renders `TimelineView` over a client-side
|
|
||||||
`filterTimeline(data.timeline, …)` view.
|
|
||||||
|
|
||||||
This ADR records the three forks specific to **#827** (the Thema enrichment + the
|
|
||||||
`TimelineService → TagService` edge are #835's scope, not this one).
|
|
||||||
|
|
||||||
## Decisions
|
|
||||||
|
|
||||||
### 1. Grouping is a client-side presentation transform — no `grouping=` query param
|
|
||||||
|
|
||||||
`GET /api/timeline` already returns the whole timeline in one payload. Regrouping the loose
|
|
||||||
letters is an in-memory transform in `lib/timeline/timelineGrouping.ts` (`bucketLetters`,
|
|
||||||
`buildEventLookup`, `hasLooseLetters`), driven by a `groupingMode` `$state` in `+page.svelte`.
|
|
||||||
A server-side `grouping=DATE|EVENT|TOPIC` parameter was rejected: it would add lasting API
|
|
||||||
surface and a bucket query for zero benefit on an already-loaded payload, and switching modes
|
|
||||||
must issue **zero** extra fetches (REQ-002). The blast radius stays inside the read view.
|
|
||||||
|
|
||||||
### 2. The letter→event link is computed, reusing `timeline_event_documents` — no new column
|
|
||||||
|
|
||||||
A letter clusters under a curated event iff that event's `documents` set (ADR-040;
|
|
||||||
`@ManyToMany @BatchSize(50)` over join table `timeline_event_documents`) contains the letter's
|
|
||||||
document. `TimelineService.assemble` resolves this in **one batched membership pass** —
|
|
||||||
`resolveLetterEventLinks` builds a single `docId → eventId` map over the already-loaded events
|
|
||||||
(no per-letter query), reusing the same `eventRepository.findAll()` it already iterates for the
|
|
||||||
event entries. The result is exposed as one nullable DTO field, `linkedEventId`. A new persisted
|
|
||||||
FK on the document/letter row was rejected: it duplicates an existing capability and opens a
|
|
||||||
mutating write path + Flyway migration for no gain. **No new column, no migration, no new
|
|
||||||
cross-domain edge** (the field derives from data `TimelineService` already loads). `linkedEventId`
|
|
||||||
is deliberately **not** `@Schema(requiredMode = REQUIRED)` — it is null for non-letter entries and
|
|
||||||
for letters under no curated event — so the generated TypeScript type stays optional.
|
|
||||||
|
|
||||||
### 3. Grouping composes with the #780 layer filter as **filter-then-group**
|
|
||||||
|
|
||||||
The pipeline is `data.timeline → filterTimeline() (#780) → groupingMode transform → TimelineView`.
|
|
||||||
The grouping `$state` lives in `+page.svelte` beside the filter `$state`, and the regroup runs over
|
|
||||||
the layer-**filtered** view, never the raw `data.timeline`. Grouping the raw timeline and filtering
|
|
||||||
afterward was rejected: the counts and buckets would disagree with the layer toggles, re-opening
|
|
||||||
the #780 count-mismatch the page already closed. Two consequences fall out of filter-then-group:
|
|
||||||
|
|
||||||
- **Letters layer off → the grouping control disables, kept in place (REQ-018).** With no loose
|
|
||||||
letters in the filtered view there is nothing to regroup; the control renders `aria-disabled`
|
|
||||||
(no header reflow), keeps its selected mode, and announces a screen-reader reason.
|
|
||||||
- **A letter whose only linking event was filtered out falls back to "Weitere Briefe" (REQ-019).**
|
|
||||||
`buildEventLookup` is built from the events present in the _filtered_ view, so Ereignis clusters
|
|
||||||
only under events that survived the filter; everything else lands in the per-year fallback bucket.
|
|
||||||
|
|
||||||
The control is a `role="radiogroup"` (single-select), deliberately distinct from #780's
|
|
||||||
`aria-pressed` toggle filter, stacked above the filter trigger so the two read as one control
|
|
||||||
cluster — the top-right corner stays the #842 add-event CTA.
|
|
||||||
|
|
||||||
## Consequences
|
|
||||||
|
|
||||||
- One nullable field (`linkedEventId`) is added to `TimelineEntryDTO` (17 components); the
|
|
||||||
regenerated `frontend/src/lib/generated/api.ts` is committed in the same PR. No table, column,
|
|
||||||
Flyway migration, endpoint, `ErrorCode`, or `Permission` changes.
|
|
||||||
- The regroup is pure and fully unit-tested independently of the components; `TimelineView`/
|
|
||||||
`YearBand` render the axis-fixed event layer identically across all three modes (REQ-001) and
|
|
||||||
only swap the loose-letter rendering for per-year `LetterBucket`s off Datum.
|
|
||||||
- The new Thema bucket-header chip (`BucketHeaderChip`) is a filled variant tinted from
|
|
||||||
`rootTagColor`; the shipped neutral per-letter `TagChip` (#838) is reused as-is and suppressed
|
|
||||||
inside its own bucket (REQ-017). All `lib/timeline` components keep the `{...}`-escaping
|
|
||||||
guarantee — a grep gate forbids `{@html}` (REQ-009).
|
|
||||||
- Read-only feature: no new authn/authz surface beyond the existing `READ_ALL` on
|
|
||||||
`GET /api/timeline`.
|
|
||||||
@@ -1,102 +0,0 @@
|
|||||||
# Zeitstrahl grouped-view layout redesign
|
|
||||||
|
|
||||||
**Date:** 2026-06-15
|
|
||||||
**Feature:** #827 (regroup `/zeitstrahl` by Ereignis/Thema) — layout follow-up on PR #847
|
|
||||||
**Status:** Approved (brainstorm), pending implementation plan
|
|
||||||
|
|
||||||
> The REQ contract for #827 lives in the Gitea issue body (and the amendment comment of
|
|
||||||
> 2026-06-15). This document records the **layout/visual design** agreed in the visual
|
|
||||||
> brainstorm and the REQ deltas it implies. Mockups: `.superpowers/brainstorm/*/content/`.
|
|
||||||
|
|
||||||
## Problem
|
|
||||||
|
|
||||||
The first grouped-view implementation (PR #847) fixed the flood and the duplicate event title,
|
|
||||||
but two issues remained on review of the live view:
|
|
||||||
|
|
||||||
1. **Weak belonging.** A clustered event's letters dropped below its centered pill as a
|
|
||||||
full-width block with only a thin left rail. The connection between an event and its letters
|
|
||||||
read weakly — the eye couldn't tell the letters belonged to the pill above.
|
|
||||||
2. **Layout inconsistency.** In Datum mode letters alternate left/right of the centered spine
|
|
||||||
(events/density centered). In grouped mode the letters became full-width, breaking that
|
|
||||||
rhythm with no clear reason.
|
|
||||||
|
|
||||||
## Decision: a cluster is one contained card
|
|
||||||
|
|
||||||
A clustered event (Ereignis) or root tag (Thema) renders as **one bordered card** whose header
|
|
||||||
is the event/tag itself and whose body holds that cluster's letters. Belonging becomes
|
|
||||||
structural (a single container), not positional guesswork. This replaces the full-width block.
|
|
||||||
|
|
||||||
### Ereignis mode, per year band
|
|
||||||
|
|
||||||
1. **Derived life-events** (Geburt/Tod/Heirat, `abgeleitet`) never cluster — they carry no
|
|
||||||
document links, so they are always **plain axis fixtures, unchanged from Datum mode**. A
|
|
||||||
**world-band** (`historisch`) is normally letterless and stays a plain band; on the rare
|
|
||||||
occasion a historical event has linked letters it follows rule 2 (becomes a card).
|
|
||||||
2. **A curated event (PERSONAL or HISTORICAL) with letters in this band** → one mint-bordered card:
|
|
||||||
- **Header** = the event's glyph + title + date + `kuratiert` + edit-✎ + count (the pill's
|
|
||||||
content, laid out as a header bar). This *replaces* the separate floating pill for that
|
|
||||||
event in this band — killing the duplicate title.
|
|
||||||
- **Body** = the cluster's letters, **first 5 shown, then a "+ N weitere Briefe anzeigen"
|
|
||||||
toggle** that expands/collapses the rest. Letters use the compact `LetterCard` variant.
|
|
||||||
3. **A curated event with no letters in this band** → stays a plain centered pill (no empty card).
|
|
||||||
4. **A curated event whose letters fall in a different year than its pill** → those letters form a
|
|
||||||
labeled card in *their* year (header = event name as text, no ✎/pill since the pill lives
|
|
||||||
elsewhere); the pill stays in its own band. No adjacent duplication.
|
|
||||||
5. **Leftover letters** (linked to no surviving curated event) → a collapsed neutral, dashed
|
|
||||||
**"✉ N Briefe ohne Ereignis · anzeigen ›"** drawer. Clicking expands to the same first-5 +
|
|
||||||
show-more list. No preview letters until opened.
|
|
||||||
|
|
||||||
### Thema mode
|
|
||||||
|
|
||||||
Identical shape. Each card's header is the **tinted root-tag chip** (`● Krieg · 24`,
|
|
||||||
`BucketHeaderChip`, fixed-ink label per the contrast fix) instead of an event pill; there is no
|
|
||||||
axis pill for a tag, so every tag cluster is a standalone card. The per-letter `TagChip` stays
|
|
||||||
suppressed inside its own card (REQ-017). The leftover drawer reads **"Ohne Thema"**.
|
|
||||||
|
|
||||||
### Layout / spine
|
|
||||||
|
|
||||||
- Cluster cards are **centered on the spine** (like events already are), not full-width-flush —
|
|
||||||
consistent with how grouped units (events) relate to the axis. Individual chronological
|
|
||||||
letters keep alternating left/right only in **Datum** mode.
|
|
||||||
- Each card carries a colour left rail: **mint** for an Ereignis cluster, the **tag colour** for
|
|
||||||
a Thema cluster, **neutral dashed** for the leftover drawer.
|
|
||||||
|
|
||||||
## Components affected
|
|
||||||
|
|
||||||
- `LetterBucket.svelte` — becomes the contained card: header slot (pill-content / tag chip /
|
|
||||||
drawer label / cross-year text label) + body with the first-5 cap and the show-more toggle.
|
|
||||||
Drop the `YearLetterStrip` (sparkline) branch from grouped mode.
|
|
||||||
- `YearBand.svelte` — in Ereignis mode, a same-year curated event renders *as* the card header
|
|
||||||
(merge pill into the card) instead of pill-then-nested-bucket; derived/world/letterless events
|
|
||||||
stay plain; cross-year clusters and the leftover drawer render after the axis entries.
|
|
||||||
- `LetterCard.svelte` — compact variant already exists (PR #847); reused inside cards.
|
|
||||||
- `BucketHeaderChip.svelte` — reused as the Thema card header (contrast fix already shipped).
|
|
||||||
- `timelineGrouping.ts` — the first-visible cap (`CLUSTER_PREVIEW = 5`) replaces
|
|
||||||
`BUCKET_DENSE_THRESHOLD`; helpers unchanged otherwise.
|
|
||||||
- Possibly a small `ClusterCard`/header sub-component if `LetterBucket` grows too large.
|
|
||||||
|
|
||||||
## REQ deltas (to fold into issue #827)
|
|
||||||
|
|
||||||
- **REQ-001 (amended):** derived life-events, world-bands, and *letterless* curated event pills
|
|
||||||
render identically across modes; a curated event **that has letters** renders as its cluster
|
|
||||||
card's header in grouped mode (no longer byte-identical to its Datum pill). Every event keeps
|
|
||||||
its spine position (year).
|
|
||||||
- **REQ-003 / REQ-014 (amended):** event-clustered letters live inside a contained card; the
|
|
||||||
header is the event (same-year) or a text label (cross-year). First 5 shown + show-more.
|
|
||||||
- **REQ-020 (amended):** grouped clusters are contained colour-railed cards with a first-5
|
|
||||||
preview + show-more toggle; the leftover bin is a collapsed count-only drawer. The
|
|
||||||
month-density `YearLetterStrip` is **no longer used in grouped mode** (still used in Datum
|
|
||||||
dense years).
|
|
||||||
|
|
||||||
## Out of scope
|
|
||||||
|
|
||||||
- Datum mode (untouched — keeps the alternating-axis zigzag and the >12 sparkline strip).
|
|
||||||
- Backend / DTO (`linkedEventId` and root-tag fields already shipped; no change).
|
|
||||||
- New i18n beyond a show-more / drawer label string set.
|
|
||||||
|
|
||||||
## Testing approach
|
|
||||||
|
|
||||||
TDD per component, mirroring PR #847: `LetterBucket` (card header variants, first-5 cap,
|
|
||||||
show-more expand/collapse, drawer collapsed-by-default, colour rail), `YearBand` (same-year merge
|
|
||||||
= no duplicate title; cross-year keeps a label; derived/world pills unchanged), and the route
|
|
||||||
spec for the assembled view. Run targeted `--project=client` / `--project=server` specs only.
|
|
||||||
@@ -50,7 +50,7 @@ src/
|
|||||||
│ │ ├── relationship/ # Relationship form + chip components
|
│ │ ├── relationship/ # Relationship form + chip components
|
||||||
│ │ └── genealogy/ # Stammbaum (family tree) components
|
│ │ └── genealogy/ # Stammbaum (family tree) components
|
||||||
│ ├── tag/ # Tag domain: TagInput, TagChipList, TagParentPicker
|
│ ├── tag/ # Tag domain: TagInput, TagChipList, TagParentPicker
|
||||||
│ ├── timeline/ # Timeline (Zeitstrahl) domain: TimelineView, YearBand, EventPill, WorldBand, LetterCard, LetterBucket, BucketHeaderChip, GroupingControl, TagChip, YearLetterStrip, GapSpan; dateLabel + timelineDensity + timelineFilter + timelineGrouping + eventCardConfig (imports $lib/shared only, never document/)
|
│ ├── timeline/ # Timeline (Zeitstrahl) domain: TimelineView, YearBand, EventPill, WorldBand, LetterCard, YearLetterStrip, GapSpan; dateLabel + timelineDensity + eventCardConfig (imports $lib/shared only, never document/)
|
||||||
│ ├── geschichte/ # Geschichte (story) domain: editor + card
|
│ ├── geschichte/ # Geschichte (story) domain: editor + card
|
||||||
│ ├── notification/ # Notification bell + dropdown + store
|
│ ├── notification/ # Notification bell + dropdown + store
|
||||||
│ ├── activity/ # Activity feed (Chronik) components
|
│ ├── activity/ # Activity feed (Chronik) components
|
||||||
|
|||||||
@@ -1,93 +0,0 @@
|
|||||||
import AxeBuilder from '@axe-core/playwright';
|
|
||||||
import { test, expect, type APIRequestContext } from '@playwright/test';
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Global /zeitstrahl layer filter (#780). Runs against the real stack with the
|
|
||||||
* seeded admin session (auth.setup). Covers the primary journey (hide the
|
|
||||||
* Letters layer → letter cards vanish + the trigger reports one active filter →
|
|
||||||
* reset restores everything) and a 375px axe pass with the collapsible open in
|
|
||||||
* both light and dark mode.
|
|
||||||
*
|
|
||||||
* #779 (the /zeitstrahl route) is merged, so this spec is NOT skipped. Per
|
|
||||||
* e2e/CLAUDE.md, E2E is not yet wired into CI — this axe gate runs locally only
|
|
||||||
* for now.
|
|
||||||
*/
|
|
||||||
|
|
||||||
const stamp = () => new Date().toISOString().replace(/[^0-9]/g, '');
|
|
||||||
|
|
||||||
async function createPerson(request: APIRequestContext, firstName: string, lastName: string) {
|
|
||||||
const res = await request.post('/api/persons', {
|
|
||||||
data: { personType: 'PERSON', firstName, lastName }
|
|
||||||
});
|
|
||||||
if (!res.ok()) throw new Error(`create person failed: ${res.status()}`);
|
|
||||||
return (await res.json()).id as string;
|
|
||||||
}
|
|
||||||
|
|
||||||
/** Seeds one dated letter so the timeline has content (and a LetterCard to hide). */
|
|
||||||
async function seedDatedLetter(request: APIRequestContext, isoDate: string, title: string) {
|
|
||||||
const senderId = await createPerson(request, 'Filter-Test', `Absender ${stamp()}`);
|
|
||||||
const receiverId = await createPerson(request, 'Filter-Test', `Empfaenger ${stamp()}`);
|
|
||||||
|
|
||||||
const createRes = await request.post('/api/documents', { multipart: { title } });
|
|
||||||
if (!createRes.ok()) throw new Error(`create document failed: ${createRes.status()}`);
|
|
||||||
const docId = (await createRes.json()).id as string;
|
|
||||||
|
|
||||||
const put = await request.put(`/api/documents/${docId}`, {
|
|
||||||
multipart: {
|
|
||||||
title,
|
|
||||||
documentDate: isoDate,
|
|
||||||
metaDatePrecision: 'DAY',
|
|
||||||
senderId,
|
|
||||||
receiverIds: receiverId
|
|
||||||
}
|
|
||||||
});
|
|
||||||
if (!put.ok()) throw new Error(`update document failed: ${put.status()}`);
|
|
||||||
}
|
|
||||||
|
|
||||||
test.describe('Zeitstrahl — layer filter (#780)', () => {
|
|
||||||
test('hiding the Letters layer removes letter cards and reports the active count; reset restores', async ({
|
|
||||||
page,
|
|
||||||
request
|
|
||||||
}) => {
|
|
||||||
// A sparse year keeps the seeded letter an individual card (not a dense strip).
|
|
||||||
const title = `E2E Filter Brief ${stamp()}`;
|
|
||||||
await seedDatedLetter(request, '1903-03-03', title);
|
|
||||||
|
|
||||||
await page.goto('/zeitstrahl');
|
|
||||||
await page.waitForSelector('[data-hydrated]');
|
|
||||||
await expect(page.getByText(title)).toBeVisible();
|
|
||||||
|
|
||||||
await page.getByTestId('timeline-filter-trigger').click();
|
|
||||||
await page.getByTestId('timeline-filter-letters').click();
|
|
||||||
|
|
||||||
await expect(page.getByText(title)).toHaveCount(0);
|
|
||||||
await expect(page.getByTestId('timeline-filter-trigger')).toContainText('1 aktiv');
|
|
||||||
|
|
||||||
await page.getByTestId('timeline-filter-reset').click();
|
|
||||||
await expect(page.getByText(title)).toBeVisible();
|
|
||||||
});
|
|
||||||
|
|
||||||
test('no wcag2a/wcag2aa violations at 375px with the filter bar open (light + dark)', async ({
|
|
||||||
page,
|
|
||||||
request
|
|
||||||
}) => {
|
|
||||||
await seedDatedLetter(request, '1915-06-15', `E2E Filter A11y ${stamp()}`);
|
|
||||||
|
|
||||||
await page.setViewportSize({ width: 375, height: 800 });
|
|
||||||
await page.goto('/zeitstrahl');
|
|
||||||
await page.waitForSelector('[data-hydrated]');
|
|
||||||
|
|
||||||
// Open the collapsible so axe scans the toggles, not just the trigger.
|
|
||||||
await page.getByTestId('timeline-filter-trigger').click();
|
|
||||||
await expect(page.getByTestId('timeline-filter-personal')).toBeVisible();
|
|
||||||
|
|
||||||
const scan = () => new AxeBuilder({ page }).withTags(['wcag2a', 'wcag2aa']).analyze();
|
|
||||||
|
|
||||||
const light = await scan();
|
|
||||||
expect(light.violations, JSON.stringify(light.violations, null, 2)).toEqual([]);
|
|
||||||
|
|
||||||
await page.evaluate(() => document.documentElement.setAttribute('data-theme', 'dark'));
|
|
||||||
const dark = await scan();
|
|
||||||
expect(dark.violations, JSON.stringify(dark.violations, null, 2)).toEqual([]);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
@@ -1,123 +0,0 @@
|
|||||||
import AxeBuilder from '@axe-core/playwright';
|
|
||||||
import { test, expect, type APIRequestContext } from '@playwright/test';
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Global /zeitstrahl grouping toggle (#827). Runs against the real stack with the seeded admin
|
|
||||||
* session (auth.setup). Covers REQ-002 (switching modes issues zero extra GET /api/timeline
|
|
||||||
* requests — the regroup is client-side), REQ-011 (the control stays usable and overflow-free at
|
|
||||||
* 320px with full-word aria-labels and ≥44px tap targets), and REQ-010g (a 320px axe pass over
|
|
||||||
* the control in both light and dark mode).
|
|
||||||
*
|
|
||||||
* Per e2e/CLAUDE.md, E2E is not yet wired into CI — this gate runs locally for now, like the
|
|
||||||
* #780 layer-filter spec it mirrors.
|
|
||||||
*/
|
|
||||||
|
|
||||||
const stamp = () => new Date().toISOString().replace(/[^0-9]/g, '');
|
|
||||||
|
|
||||||
async function createPerson(request: APIRequestContext, firstName: string, lastName: string) {
|
|
||||||
const res = await request.post('/api/persons', {
|
|
||||||
data: { personType: 'PERSON', firstName, lastName }
|
|
||||||
});
|
|
||||||
if (!res.ok()) throw new Error(`create person failed: ${res.status()}`);
|
|
||||||
return (await res.json()).id as string;
|
|
||||||
}
|
|
||||||
|
|
||||||
/** Seeds one dated letter so the timeline has a loose letter and the grouping control is enabled. */
|
|
||||||
async function seedDatedLetter(request: APIRequestContext, isoDate: string, title: string) {
|
|
||||||
const senderId = await createPerson(request, 'Group-Test', `Absender ${stamp()}`);
|
|
||||||
const receiverId = await createPerson(request, 'Group-Test', `Empfaenger ${stamp()}`);
|
|
||||||
|
|
||||||
const createRes = await request.post('/api/documents', { multipart: { title } });
|
|
||||||
if (!createRes.ok()) throw new Error(`create document failed: ${createRes.status()}`);
|
|
||||||
const docId = (await createRes.json()).id as string;
|
|
||||||
|
|
||||||
const put = await request.put(`/api/documents/${docId}`, {
|
|
||||||
multipart: {
|
|
||||||
title,
|
|
||||||
documentDate: isoDate,
|
|
||||||
metaDatePrecision: 'DAY',
|
|
||||||
senderId,
|
|
||||||
receiverIds: receiverId
|
|
||||||
}
|
|
||||||
});
|
|
||||||
if (!put.ok()) throw new Error(`update document failed: ${put.status()}`);
|
|
||||||
}
|
|
||||||
|
|
||||||
test.describe('Zeitstrahl — grouping toggle (#827)', () => {
|
|
||||||
test('switching grouping modes issues no extra timeline fetch (REQ-002)', async ({
|
|
||||||
page,
|
|
||||||
request
|
|
||||||
}) => {
|
|
||||||
await seedDatedLetter(request, '1909-05-05', `E2E Group Brief ${stamp()}`);
|
|
||||||
|
|
||||||
let timelineRequests = 0;
|
|
||||||
page.on('request', (req) => {
|
|
||||||
if (req.url().includes('/api/timeline')) timelineRequests++;
|
|
||||||
});
|
|
||||||
|
|
||||||
await page.goto('/zeitstrahl');
|
|
||||||
await page.waitForSelector('[data-hydrated]');
|
|
||||||
await expect(page.getByTestId('grouping-control')).toBeVisible();
|
|
||||||
|
|
||||||
const afterLoad = timelineRequests;
|
|
||||||
await page.locator('[data-value="event"]').click();
|
|
||||||
await page.locator('[data-value="thema"]').click();
|
|
||||||
await page.locator('[data-value="date"]').click();
|
|
||||||
|
|
||||||
// the regroup is a pure client-side transform — not one more GET /api/timeline
|
|
||||||
expect(timelineRequests).toBe(afterLoad);
|
|
||||||
});
|
|
||||||
|
|
||||||
test('the control stays overflow-free and operable at 320px (REQ-011)', async ({
|
|
||||||
page,
|
|
||||||
request
|
|
||||||
}) => {
|
|
||||||
await seedDatedLetter(request, '1911-02-02', `E2E Group 320 ${stamp()}`);
|
|
||||||
|
|
||||||
await page.setViewportSize({ width: 320, height: 800 });
|
|
||||||
await page.goto('/zeitstrahl');
|
|
||||||
await page.waitForSelector('[data-hydrated]');
|
|
||||||
|
|
||||||
const control = page.getByTestId('grouping-control');
|
|
||||||
await expect(control).toBeVisible();
|
|
||||||
|
|
||||||
// the control fits inside the 320px viewport — no horizontal overflow
|
|
||||||
const box = await control.boundingBox();
|
|
||||||
expect(box).not.toBeNull();
|
|
||||||
expect(box!.x + box!.width).toBeLessThanOrEqual(321);
|
|
||||||
|
|
||||||
for (const [value, fullWord] of [
|
|
||||||
['date', 'Datum'],
|
|
||||||
['event', 'Ereignis'],
|
|
||||||
['thema', 'Thema']
|
|
||||||
]) {
|
|
||||||
const radio = page.locator(`[data-value="${value}"]`);
|
|
||||||
const radioBox = await radio.boundingBox();
|
|
||||||
expect(radioBox!.height).toBeGreaterThanOrEqual(44);
|
|
||||||
expect(radioBox!.width).toBeGreaterThanOrEqual(44);
|
|
||||||
// the abbreviated segment still announces its full word
|
|
||||||
expect(await radio.getAttribute('aria-label')).toBe(fullWord);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
test('no wcag2a/wcag2aa violations on the grouping control at 320px (light + dark) (REQ-010g)', async ({
|
|
||||||
page,
|
|
||||||
request
|
|
||||||
}) => {
|
|
||||||
await seedDatedLetter(request, '1915-06-15', `E2E Group A11y ${stamp()}`);
|
|
||||||
|
|
||||||
await page.setViewportSize({ width: 320, height: 800 });
|
|
||||||
await page.goto('/zeitstrahl');
|
|
||||||
await page.waitForSelector('[data-hydrated]');
|
|
||||||
await expect(page.getByTestId('grouping-control')).toBeVisible();
|
|
||||||
|
|
||||||
const scan = () => new AxeBuilder({ page }).withTags(['wcag2a', 'wcag2aa']).analyze();
|
|
||||||
|
|
||||||
const light = await scan();
|
|
||||||
expect(light.violations, JSON.stringify(light.violations, null, 2)).toEqual([]);
|
|
||||||
|
|
||||||
await page.evaluate(() => document.documentElement.setAttribute('data-theme', 'dark'));
|
|
||||||
const dark = await scan();
|
|
||||||
expect(dark.violations, JSON.stringify(dark.violations, null, 2)).toEqual([]);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
@@ -188,7 +188,6 @@
|
|||||||
"person_hint_generation": "Generation in der Familie (G 0 = älteste Generation)",
|
"person_hint_generation": "Generation in der Familie (G 0 = älteste Generation)",
|
||||||
"person_year_error": "Bitte eine vierstellige Jahreszahl eingeben",
|
"person_year_error": "Bitte eine vierstellige Jahreszahl eingeben",
|
||||||
"person_years_error_order": "Geburtsjahr muss vor dem Todesjahr liegen",
|
"person_years_error_order": "Geburtsjahr muss vor dem Todesjahr liegen",
|
||||||
"person_add_event": "Ereignis für diese Person",
|
|
||||||
"person_docs_heading": "Gesendete Dokumente",
|
"person_docs_heading": "Gesendete Dokumente",
|
||||||
"person_no_docs": "Diese Person ist noch nicht als Absender verknüpft.",
|
"person_no_docs": "Diese Person ist noch nicht als Absender verknüpft.",
|
||||||
"person_received_docs_heading": "Empfangene Dokumente",
|
"person_received_docs_heading": "Empfangene Dokumente",
|
||||||
@@ -1036,7 +1035,6 @@
|
|||||||
"nav_geschichten": "Geschichten",
|
"nav_geschichten": "Geschichten",
|
||||||
"nav_zeitstrahl": "Zeitstrahl",
|
"nav_zeitstrahl": "Zeitstrahl",
|
||||||
"timeline_heading": "Zeitstrahl",
|
"timeline_heading": "Zeitstrahl",
|
||||||
"timeline_add_event": "Ereignis hinzufügen",
|
|
||||||
"timeline_empty_state": "Noch keine Ereignisse.",
|
"timeline_empty_state": "Noch keine Ereignisse.",
|
||||||
"timeline_undated_section": "Ohne Datum",
|
"timeline_undated_section": "Ohne Datum",
|
||||||
"timeline_unknown_person": "Unbekannt",
|
"timeline_unknown_person": "Unbekannt",
|
||||||
@@ -1050,21 +1048,6 @@
|
|||||||
"timeline_derived_death": "Tod",
|
"timeline_derived_death": "Tod",
|
||||||
"timeline_derived_marriage": "Heirat",
|
"timeline_derived_marriage": "Heirat",
|
||||||
"timeline_grouping_date": "Gruppierung: Datum",
|
"timeline_grouping_date": "Gruppierung: Datum",
|
||||||
"timeline_grouping_event": "Gruppierung: Ereignis",
|
|
||||||
"timeline_grouping_thema": "Gruppierung: Thema",
|
|
||||||
"timeline_grouping_aria_label": "Gruppierung",
|
|
||||||
"timeline_grouping_segment_date": "Datum",
|
|
||||||
"timeline_grouping_segment_event": "Ereignis",
|
|
||||||
"timeline_grouping_segment_thema": "Thema",
|
|
||||||
"timeline_grouping_segment_date_short": "Dat.",
|
|
||||||
"timeline_grouping_segment_event_short": "Ereig.",
|
|
||||||
"timeline_grouping_segment_thema_short": "Thema",
|
|
||||||
"timeline_grouping_disabled_reason": "Briefe sind ausgeblendet – es gibt nichts zu gruppieren.",
|
|
||||||
"timeline_grouping_multitag_hint": "Brief mit mehreren Tags erscheint unter seinem primären Tag.",
|
|
||||||
"timeline_bucket_other_letters": "Weitere Briefe",
|
|
||||||
"timeline_bucket_no_topic": "Ohne Thema",
|
|
||||||
"timeline_bucket_show_more": "+ {count} weitere Briefe anzeigen",
|
|
||||||
"timeline_bucket_show_less": "Weniger anzeigen",
|
|
||||||
"timeline_provenance_derived": "abgeleitet",
|
"timeline_provenance_derived": "abgeleitet",
|
||||||
"timeline_provenance_curated": "kuratiert",
|
"timeline_provenance_curated": "kuratiert",
|
||||||
"timeline_letter_glyph_label": "Brief",
|
"timeline_letter_glyph_label": "Brief",
|
||||||
@@ -1074,14 +1057,6 @@
|
|||||||
"timeline_events_count": "{count} Ereignisse",
|
"timeline_events_count": "{count} Ereignisse",
|
||||||
"timeline_letters_count_singular": "1 Brief",
|
"timeline_letters_count_singular": "1 Brief",
|
||||||
"timeline_events_count_singular": "1 Ereignis",
|
"timeline_events_count_singular": "1 Ereignis",
|
||||||
"timeline_filter_label_layers": "Ebenen anzeigen",
|
|
||||||
"timeline_filter_layer_personal": "Persönliche Ereignisse",
|
|
||||||
"timeline_filter_layer_historical": "Historische Ereignisse",
|
|
||||||
"timeline_filter_layer_letters": "Briefe",
|
|
||||||
"timeline_filter_trigger": "Filter",
|
|
||||||
"timeline_filter_trigger_active": "Filter ({count} aktiv)",
|
|
||||||
"timeline_filter_reset": "Filter zurücksetzen",
|
|
||||||
"timeline_filter_empty_state": "Keine Einträge entsprechen diesen Filtern.",
|
|
||||||
"event_editor_new_title": "Neues Ereignis",
|
"event_editor_new_title": "Neues Ereignis",
|
||||||
"event_editor_edit_title": "Ereignis bearbeiten",
|
"event_editor_edit_title": "Ereignis bearbeiten",
|
||||||
"event_editor_section_when": "Wann",
|
"event_editor_section_when": "Wann",
|
||||||
|
|||||||
@@ -188,7 +188,6 @@
|
|||||||
"person_hint_generation": "Generation within the family (G 0 = oldest generation)",
|
"person_hint_generation": "Generation within the family (G 0 = oldest generation)",
|
||||||
"person_year_error": "Please enter a four-digit year",
|
"person_year_error": "Please enter a four-digit year",
|
||||||
"person_years_error_order": "Birth year must be before death year",
|
"person_years_error_order": "Birth year must be before death year",
|
||||||
"person_add_event": "Add event for this person",
|
|
||||||
"person_docs_heading": "Sent documents",
|
"person_docs_heading": "Sent documents",
|
||||||
"person_no_docs": "This person has not yet been linked as a sender.",
|
"person_no_docs": "This person has not yet been linked as a sender.",
|
||||||
"person_received_docs_heading": "Received documents",
|
"person_received_docs_heading": "Received documents",
|
||||||
@@ -1036,7 +1035,6 @@
|
|||||||
"nav_geschichten": "Stories",
|
"nav_geschichten": "Stories",
|
||||||
"nav_zeitstrahl": "Timeline",
|
"nav_zeitstrahl": "Timeline",
|
||||||
"timeline_heading": "Timeline",
|
"timeline_heading": "Timeline",
|
||||||
"timeline_add_event": "Add event",
|
|
||||||
"timeline_empty_state": "No events yet.",
|
"timeline_empty_state": "No events yet.",
|
||||||
"timeline_undated_section": "Without Date",
|
"timeline_undated_section": "Without Date",
|
||||||
"timeline_unknown_person": "Unknown",
|
"timeline_unknown_person": "Unknown",
|
||||||
@@ -1050,21 +1048,6 @@
|
|||||||
"timeline_derived_death": "Death",
|
"timeline_derived_death": "Death",
|
||||||
"timeline_derived_marriage": "Marriage",
|
"timeline_derived_marriage": "Marriage",
|
||||||
"timeline_grouping_date": "Grouping: Date",
|
"timeline_grouping_date": "Grouping: Date",
|
||||||
"timeline_grouping_event": "Grouping: Event",
|
|
||||||
"timeline_grouping_thema": "Grouping: Topic",
|
|
||||||
"timeline_grouping_aria_label": "Grouping",
|
|
||||||
"timeline_grouping_segment_date": "Date",
|
|
||||||
"timeline_grouping_segment_event": "Event",
|
|
||||||
"timeline_grouping_segment_thema": "Topic",
|
|
||||||
"timeline_grouping_segment_date_short": "Date",
|
|
||||||
"timeline_grouping_segment_event_short": "Event",
|
|
||||||
"timeline_grouping_segment_thema_short": "Topic",
|
|
||||||
"timeline_grouping_disabled_reason": "Letters are hidden — there is nothing to group.",
|
|
||||||
"timeline_grouping_multitag_hint": "A letter with several tags appears under its primary tag.",
|
|
||||||
"timeline_bucket_other_letters": "More letters",
|
|
||||||
"timeline_bucket_no_topic": "No topic",
|
|
||||||
"timeline_bucket_show_more": "+ {count} more letters",
|
|
||||||
"timeline_bucket_show_less": "Show fewer",
|
|
||||||
"timeline_provenance_derived": "derived",
|
"timeline_provenance_derived": "derived",
|
||||||
"timeline_provenance_curated": "curated",
|
"timeline_provenance_curated": "curated",
|
||||||
"timeline_letter_glyph_label": "Letter",
|
"timeline_letter_glyph_label": "Letter",
|
||||||
@@ -1074,14 +1057,6 @@
|
|||||||
"timeline_events_count": "{count} events",
|
"timeline_events_count": "{count} events",
|
||||||
"timeline_letters_count_singular": "1 letter",
|
"timeline_letters_count_singular": "1 letter",
|
||||||
"timeline_events_count_singular": "1 event",
|
"timeline_events_count_singular": "1 event",
|
||||||
"timeline_filter_label_layers": "Show layers",
|
|
||||||
"timeline_filter_layer_personal": "Personal events",
|
|
||||||
"timeline_filter_layer_historical": "Historical events",
|
|
||||||
"timeline_filter_layer_letters": "Letters",
|
|
||||||
"timeline_filter_trigger": "Filter",
|
|
||||||
"timeline_filter_trigger_active": "Filter ({count} active)",
|
|
||||||
"timeline_filter_reset": "Reset filters",
|
|
||||||
"timeline_filter_empty_state": "No entries match these filters.",
|
|
||||||
"event_editor_new_title": "New event",
|
"event_editor_new_title": "New event",
|
||||||
"event_editor_edit_title": "Edit event",
|
"event_editor_edit_title": "Edit event",
|
||||||
"event_editor_section_when": "When",
|
"event_editor_section_when": "When",
|
||||||
|
|||||||
@@ -188,7 +188,6 @@
|
|||||||
"person_hint_generation": "Generación dentro de la familia (G 0 = generación más antigua)",
|
"person_hint_generation": "Generación dentro de la familia (G 0 = generación más antigua)",
|
||||||
"person_year_error": "Introduzca un año de cuatro dígitos",
|
"person_year_error": "Introduzca un año de cuatro dígitos",
|
||||||
"person_years_error_order": "El año de nacimiento debe ser anterior al año de fallecimiento",
|
"person_years_error_order": "El año de nacimiento debe ser anterior al año de fallecimiento",
|
||||||
"person_add_event": "Añadir evento para esta persona",
|
|
||||||
"person_docs_heading": "Documentos enviados",
|
"person_docs_heading": "Documentos enviados",
|
||||||
"person_no_docs": "Esta persona aún no está vinculada como remitente.",
|
"person_no_docs": "Esta persona aún no está vinculada como remitente.",
|
||||||
"person_received_docs_heading": "Documentos recibidos",
|
"person_received_docs_heading": "Documentos recibidos",
|
||||||
@@ -1036,7 +1035,6 @@
|
|||||||
"nav_geschichten": "Historias",
|
"nav_geschichten": "Historias",
|
||||||
"nav_zeitstrahl": "Línea de tiempo",
|
"nav_zeitstrahl": "Línea de tiempo",
|
||||||
"timeline_heading": "Línea de tiempo",
|
"timeline_heading": "Línea de tiempo",
|
||||||
"timeline_add_event": "Añadir evento",
|
|
||||||
"timeline_empty_state": "Aún no hay eventos.",
|
"timeline_empty_state": "Aún no hay eventos.",
|
||||||
"timeline_undated_section": "Sin Fecha",
|
"timeline_undated_section": "Sin Fecha",
|
||||||
"timeline_unknown_person": "Desconocido",
|
"timeline_unknown_person": "Desconocido",
|
||||||
@@ -1050,21 +1048,6 @@
|
|||||||
"timeline_derived_death": "Fallecimiento",
|
"timeline_derived_death": "Fallecimiento",
|
||||||
"timeline_derived_marriage": "Matrimonio",
|
"timeline_derived_marriage": "Matrimonio",
|
||||||
"timeline_grouping_date": "Agrupación: Fecha",
|
"timeline_grouping_date": "Agrupación: Fecha",
|
||||||
"timeline_grouping_event": "Agrupación: Evento",
|
|
||||||
"timeline_grouping_thema": "Agrupación: Tema",
|
|
||||||
"timeline_grouping_aria_label": "Agrupación",
|
|
||||||
"timeline_grouping_segment_date": "Fecha",
|
|
||||||
"timeline_grouping_segment_event": "Evento",
|
|
||||||
"timeline_grouping_segment_thema": "Tema",
|
|
||||||
"timeline_grouping_segment_date_short": "Fecha",
|
|
||||||
"timeline_grouping_segment_event_short": "Evento",
|
|
||||||
"timeline_grouping_segment_thema_short": "Tema",
|
|
||||||
"timeline_grouping_disabled_reason": "Las cartas están ocultas: no hay nada que agrupar.",
|
|
||||||
"timeline_grouping_multitag_hint": "Una carta con varias etiquetas aparece bajo su etiqueta principal.",
|
|
||||||
"timeline_bucket_other_letters": "Más cartas",
|
|
||||||
"timeline_bucket_no_topic": "Sin tema",
|
|
||||||
"timeline_bucket_show_more": "+ {count} cartas más",
|
|
||||||
"timeline_bucket_show_less": "Mostrar menos",
|
|
||||||
"timeline_provenance_derived": "derivado",
|
"timeline_provenance_derived": "derivado",
|
||||||
"timeline_provenance_curated": "curado",
|
"timeline_provenance_curated": "curado",
|
||||||
"timeline_letter_glyph_label": "Carta",
|
"timeline_letter_glyph_label": "Carta",
|
||||||
@@ -1074,14 +1057,6 @@
|
|||||||
"timeline_events_count": "{count} eventos",
|
"timeline_events_count": "{count} eventos",
|
||||||
"timeline_letters_count_singular": "1 carta",
|
"timeline_letters_count_singular": "1 carta",
|
||||||
"timeline_events_count_singular": "1 evento",
|
"timeline_events_count_singular": "1 evento",
|
||||||
"timeline_filter_label_layers": "Mostrar capas",
|
|
||||||
"timeline_filter_layer_personal": "Eventos personales",
|
|
||||||
"timeline_filter_layer_historical": "Eventos históricos",
|
|
||||||
"timeline_filter_layer_letters": "Cartas",
|
|
||||||
"timeline_filter_trigger": "Filtro",
|
|
||||||
"timeline_filter_trigger_active": "Filtro ({count} activos)",
|
|
||||||
"timeline_filter_reset": "Restablecer filtros",
|
|
||||||
"timeline_filter_empty_state": "Ninguna entrada coincide con estos filtros.",
|
|
||||||
"event_editor_new_title": "Nuevo evento",
|
"event_editor_new_title": "Nuevo evento",
|
||||||
"event_editor_edit_title": "Editar evento",
|
"event_editor_edit_title": "Editar evento",
|
||||||
"event_editor_section_when": "Cuándo",
|
"event_editor_section_when": "Cuándo",
|
||||||
|
|||||||
@@ -2467,8 +2467,6 @@ export interface components {
|
|||||||
rootTagId?: string;
|
rootTagId?: string;
|
||||||
rootTagName?: string;
|
rootTagName?: string;
|
||||||
rootTagColor?: string;
|
rootTagColor?: string;
|
||||||
/** Format: uuid */
|
|
||||||
linkedEventId?: string;
|
|
||||||
};
|
};
|
||||||
TimelineYearDTO: {
|
TimelineYearDTO: {
|
||||||
/** Format: int32 */
|
/** Format: int32 */
|
||||||
|
|||||||
@@ -98,68 +98,4 @@ describe('message key parity', () => {
|
|||||||
expect(en).toMatchObject({ timeline_tag_chip_label: 'Topic' });
|
expect(en).toMatchObject({ timeline_tag_chip_label: 'Topic' });
|
||||||
expect(es).toMatchObject({ timeline_tag_chip_label: 'Tema' });
|
expect(es).toMatchObject({ timeline_tag_chip_label: 'Tema' });
|
||||||
});
|
});
|
||||||
|
|
||||||
// #780 REQ-010: the layer-filter strings are Paraglide keys in every locale.
|
|
||||||
// timeline_filter_trigger (0 active) and timeline_filter_trigger_active ({count},
|
|
||||||
// ≥1 active) are distinct keys so the trigger never reads "Filter (0 aktiv)".
|
|
||||||
it('zeitstrahl layer-filter keys are present in all locales (#780 REQ-010)', () => {
|
|
||||||
const requiredKeys = [
|
|
||||||
'timeline_filter_label_layers',
|
|
||||||
'timeline_filter_layer_personal',
|
|
||||||
'timeline_filter_layer_historical',
|
|
||||||
'timeline_filter_layer_letters',
|
|
||||||
'timeline_filter_trigger',
|
|
||||||
'timeline_filter_trigger_active',
|
|
||||||
'timeline_filter_reset',
|
|
||||||
'timeline_filter_empty_state'
|
|
||||||
];
|
|
||||||
for (const key of requiredKeys) {
|
|
||||||
expect(de, `missing key in de: ${key}`).toHaveProperty(key);
|
|
||||||
expect(en, `missing key in en: ${key}`).toHaveProperty(key);
|
|
||||||
expect(es, `missing key in es: ${key}`).toHaveProperty(key);
|
|
||||||
}
|
|
||||||
// the active-count key carries the established {count} placeholder
|
|
||||||
expect(de.timeline_filter_trigger_active).toContain('{count}');
|
|
||||||
expect(en.timeline_filter_trigger_active).toContain('{count}');
|
|
||||||
expect(es.timeline_filter_trigger_active).toContain('{count}');
|
|
||||||
});
|
|
||||||
|
|
||||||
// #842: the two curator-affordance CTA labels (Zeitstrahl header + person page)
|
|
||||||
// are Paraglide keys present in every locale; the edit pencils reuse btn_edit.
|
|
||||||
it('curator-affordance CTA keys are present in all locales (#842)', () => {
|
|
||||||
for (const key of ['timeline_add_event', 'person_add_event']) {
|
|
||||||
expect(de, `missing key in de: ${key}`).toHaveProperty(key);
|
|
||||||
expect(en, `missing key in en: ${key}`).toHaveProperty(key);
|
|
||||||
expect(es, `missing key in es: ${key}`).toHaveProperty(key);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// #827 REQ-012: the grouping toggle + bucket strings are new Paraglide keys in
|
|
||||||
// every locale; the pre-existing timeline_grouping_date / timeline_tag_chip_label /
|
|
||||||
// timeline_filter_* set is reused, never re-added.
|
|
||||||
it('zeitstrahl grouping + bucket keys are present in all locales (#827 REQ-012)', () => {
|
|
||||||
const requiredKeys = [
|
|
||||||
'timeline_grouping_event',
|
|
||||||
'timeline_grouping_thema',
|
|
||||||
'timeline_grouping_aria_label',
|
|
||||||
'timeline_grouping_segment_date',
|
|
||||||
'timeline_grouping_segment_event',
|
|
||||||
'timeline_grouping_segment_thema',
|
|
||||||
'timeline_grouping_segment_date_short',
|
|
||||||
'timeline_grouping_segment_event_short',
|
|
||||||
'timeline_grouping_segment_thema_short',
|
|
||||||
'timeline_grouping_disabled_reason',
|
|
||||||
'timeline_grouping_multitag_hint',
|
|
||||||
'timeline_bucket_other_letters',
|
|
||||||
'timeline_bucket_no_topic'
|
|
||||||
];
|
|
||||||
for (const key of requiredKeys) {
|
|
||||||
expect(de, `missing key in de: ${key}`).toHaveProperty(key);
|
|
||||||
expect(en, `missing key in en: ${key}`).toHaveProperty(key);
|
|
||||||
expect(es, `missing key in es: ${key}`).toHaveProperty(key);
|
|
||||||
}
|
|
||||||
// the pre-existing meta-line + chip keys are reused by #827, not re-declared
|
|
||||||
expect(de).toHaveProperty('timeline_grouping_date');
|
|
||||||
expect(de).toHaveProperty('timeline_tag_chip_label');
|
|
||||||
});
|
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -1,64 +0,0 @@
|
|||||||
<script lang="ts">
|
|
||||||
import * as m from '$lib/paraglide/messages.js';
|
|
||||||
|
|
||||||
/**
|
|
||||||
* The header chip of a Thema-mode root-tag bucket (#827, REQ-015): a *fully-tinted* chip whose
|
|
||||||
* fill and label both derive from the root tag's `--c-tag-*` colour token — distinct from the
|
|
||||||
* neutral per-letter {@link TagChip} (a surface pill with a tiny colour square). The label uses
|
|
||||||
* the saturated token as text over a subtle `color-mix` wash of the same token, so the ≥4.5:1
|
|
||||||
* label contrast holds in both light and dark themes. A `null` colour — or any value outside the
|
|
||||||
* known token set (the §2 `krieg`/`weih`/`fam` are demo class names, not tokens) — falls back to a
|
|
||||||
* neutral chip with no `var(--c-tag-)` reference, never a broken colour. The name is
|
|
||||||
* curator/import-derived and rendered through default `{...}` escaping, never the raw-HTML
|
|
||||||
* directive (REQ-009).
|
|
||||||
*/
|
|
||||||
const TAG_COLORS = new Set([
|
|
||||||
'sage',
|
|
||||||
'sienna',
|
|
||||||
'amber',
|
|
||||||
'slate',
|
|
||||||
'violet',
|
|
||||||
'rose',
|
|
||||||
'cobalt',
|
|
||||||
'moss',
|
|
||||||
'sand',
|
|
||||||
'coral'
|
|
||||||
]);
|
|
||||||
|
|
||||||
let { name, color }: { name: string; color: string | null } = $props();
|
|
||||||
|
|
||||||
const token = $derived(color && TAG_COLORS.has(color) ? color : null);
|
|
||||||
// The tint paints the chip's fill + dot only — never the label text. The saturated
|
|
||||||
// --c-tag-* tokens used AS text over their own wash drop below WCAG AA 4.5:1 for the
|
|
||||||
// light tokens (amber ≈3.0, sand ≈3.2, sage ≈3.4); a fixed dark ink keeps every token
|
|
||||||
// legible while the 18% wash still reads as a genuinely tinted chip (REQ-015).
|
|
||||||
const chipStyle = $derived(
|
|
||||||
token ? `background-color: color-mix(in srgb, var(--c-tag-${token}) 18%, transparent)` : ''
|
|
||||||
);
|
|
||||||
const dotStyle = $derived(token ? `background-color: var(--c-tag-${token})` : '');
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<span
|
|
||||||
data-testid="bucket-header-chip"
|
|
||||||
title={name}
|
|
||||||
style={chipStyle}
|
|
||||||
class="inline-flex max-w-full items-center gap-1.5 rounded-full px-2.5 py-0.5 font-sans text-xs font-semibold"
|
|
||||||
class:border={!token}
|
|
||||||
class:border-line={!token}
|
|
||||||
class:bg-surface={!token}
|
|
||||||
>
|
|
||||||
<span class="sr-only">{m.timeline_tag_chip_label()}: </span>
|
|
||||||
<span
|
|
||||||
data-testid="bucket-header-chip-dot"
|
|
||||||
aria-hidden="true"
|
|
||||||
style={dotStyle}
|
|
||||||
class="inline-block h-2 w-2 flex-shrink-0 rounded-sm"
|
|
||||||
class:bg-ink-3={!token}
|
|
||||||
></span>
|
|
||||||
<span
|
|
||||||
data-testid="bucket-header-chip-label"
|
|
||||||
style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0"
|
|
||||||
class:text-ink={token}
|
|
||||||
class:text-ink-3={!token}>{name}</span
|
|
||||||
>
|
|
||||||
</span>
|
|
||||||
@@ -1,57 +0,0 @@
|
|||||||
import { describe, it, expect, afterEach } from 'vitest';
|
|
||||||
import { cleanup, render } from 'vitest-browser-svelte';
|
|
||||||
import * as m from '$lib/paraglide/messages.js';
|
|
||||||
import BucketHeaderChip from './BucketHeaderChip.svelte';
|
|
||||||
|
|
||||||
afterEach(() => cleanup());
|
|
||||||
|
|
||||||
describe('BucketHeaderChip (REQ-015/009)', () => {
|
|
||||||
it('renders the root-tag name', () => {
|
|
||||||
render(BucketHeaderChip, { name: 'Krieg', color: 'sienna' });
|
|
||||||
expect(document.body.textContent).toContain('Krieg');
|
|
||||||
});
|
|
||||||
|
|
||||||
it('tints the chip with var(--c-tag-{token}) for a known colour token (REQ-015)', () => {
|
|
||||||
render(BucketHeaderChip, { name: 'Krieg', color: 'sienna' });
|
|
||||||
const chip = document.querySelector('[data-testid="bucket-header-chip"]') as HTMLElement;
|
|
||||||
expect(chip.getAttribute('style')).toContain('var(--c-tag-sienna)');
|
|
||||||
});
|
|
||||||
|
|
||||||
it('renders a neutral chip with no --c-tag- binding when colour is null (REQ-015)', () => {
|
|
||||||
render(BucketHeaderChip, { name: 'Ohne Thema', color: null });
|
|
||||||
expect(document.body.textContent).toContain('Ohne Thema');
|
|
||||||
expect(document.body.innerHTML).not.toContain('var(--c-tag-');
|
|
||||||
});
|
|
||||||
|
|
||||||
it('falls back to neutral for an unknown colour token, never a broken var (REQ-015)', () => {
|
|
||||||
// "krieg" is a §2 demo class name, not a real --c-tag-* token.
|
|
||||||
render(BucketHeaderChip, { name: 'Krieg', color: 'krieg' });
|
|
||||||
expect(document.body.innerHTML).not.toContain('var(--c-tag-');
|
|
||||||
});
|
|
||||||
|
|
||||||
it('prefixes the name with an sr-only theme label so colour is never the only cue', () => {
|
|
||||||
render(BucketHeaderChip, { name: 'Krieg', color: 'sienna' });
|
|
||||||
const srOnly = document.querySelector('.sr-only');
|
|
||||||
expect(srOnly?.textContent).toContain(m.timeline_tag_chip_label());
|
|
||||||
});
|
|
||||||
|
|
||||||
it('renders an HTML-bearing name as inert text, never markup (REQ-009)', () => {
|
|
||||||
const evil = '<img src=x onerror="alert(1)">';
|
|
||||||
render(BucketHeaderChip, { name: evil, color: null });
|
|
||||||
expect(document.body.textContent).toContain(evil);
|
|
||||||
expect(document.querySelector('img')).toBeNull();
|
|
||||||
});
|
|
||||||
|
|
||||||
it('paints the label in a fixed ink colour, never the saturated tag token (contrast, REQ-015)', () => {
|
|
||||||
// A saturated --c-tag-* token used as TEXT over its own wash fails 4.5:1 for the
|
|
||||||
// light tokens (amber/sand/sage ≈ 3:1). The tint must go to the background + dot;
|
|
||||||
// the label keeps a guaranteed-contrast ink token.
|
|
||||||
render(BucketHeaderChip, { name: 'Weihnachten', color: 'amber' });
|
|
||||||
const chip = document.querySelector('[data-testid="bucket-header-chip"]') as HTMLElement;
|
|
||||||
expect(chip.getAttribute('style') ?? '').not.toContain('color: var(--c-tag-');
|
|
||||||
const label = document.querySelector('[data-testid="bucket-header-chip-label"]') as HTMLElement;
|
|
||||||
expect(label.className).toContain('text-ink');
|
|
||||||
// still genuinely tinted — the token paints the wash and the dot
|
|
||||||
expect(document.body.innerHTML).toContain('var(--c-tag-amber)');
|
|
||||||
});
|
|
||||||
});
|
|
||||||
@@ -10,11 +10,9 @@ type TimelineEntryDTO = components['schemas']['TimelineEntryDTO'];
|
|||||||
* Centered axis pill for a derived life-event or a curated PERSONAL event
|
* Centered axis pill for a derived life-event or a curated PERSONAL event
|
||||||
* (REQ-007/008). The glyph is wrapped aria-hidden with an sr-only label sibling
|
* (REQ-007/008). The glyph is wrapped aria-hidden with an sr-only label sibling
|
||||||
* (REQ-018). An edit affordance shows only for a curated event with an eventId
|
* (REQ-018). An edit affordance shows only for a curated event with an eventId
|
||||||
* (never derived, never null — REQ-008) and only for a curator who holds
|
* (never derived, never null — REQ-008).
|
||||||
* WRITE_ALL (`canWrite`, gate-closed by default — #842 REQ-005/007/008). The
|
|
||||||
* gate is UX only; the real boundary is the #781 route guard + backend permission.
|
|
||||||
*/
|
*/
|
||||||
let { entry, canWrite = false }: { entry: TimelineEntryDTO; canWrite?: boolean } = $props();
|
let { entry }: { entry: TimelineEntryDTO } = $props();
|
||||||
|
|
||||||
const config = $derived(getAccentConfig(entry));
|
const config = $derived(getAccentConfig(entry));
|
||||||
const dateLabel = $derived(timelineDateLabel(entry.eventDate, entry.precision, entry.eventDateEnd));
|
const dateLabel = $derived(timelineDateLabel(entry.eventDate, entry.precision, entry.eventDateEnd));
|
||||||
@@ -26,7 +24,7 @@ const provenance = $derived(
|
|||||||
// Provenance always shows; the date is an optional prefix so an undated event
|
// Provenance always shows; the date is an optional prefix so an undated event
|
||||||
// still reads "abgeleitet"/"kuratiert" (REQ-007).
|
// still reads "abgeleitet"/"kuratiert" (REQ-007).
|
||||||
const subtitle = $derived(dateLabel ? `${dateLabel} · ${provenance}` : provenance);
|
const subtitle = $derived(dateLabel ? `${dateLabel} · ${provenance}` : provenance);
|
||||||
const canEdit = $derived(canWrite && !entry.derived && entry.eventId != null);
|
const canEdit = $derived(!entry.derived && entry.eventId != null);
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="flex justify-center">
|
<div class="flex justify-center">
|
||||||
|
|||||||
@@ -51,9 +51,8 @@ describe('EventPill', () => {
|
|||||||
expect(srOnly?.textContent).toBe('Geburt');
|
expect(srOnly?.textContent).toBe('Geburt');
|
||||||
});
|
});
|
||||||
|
|
||||||
it('shows an edit affordance for a curated PERSONAL event when canWrite is true (REQ-005)', () => {
|
it('shows an edit affordance for a curated PERSONAL event with an eventId (REQ-008)', () => {
|
||||||
render(EventPill, {
|
render(EventPill, {
|
||||||
canWrite: true,
|
|
||||||
entry: makeEntry({
|
entry: makeEntry({
|
||||||
kind: 'EVENT',
|
kind: 'EVENT',
|
||||||
derived: false,
|
derived: false,
|
||||||
@@ -67,45 +66,11 @@ describe('EventPill', () => {
|
|||||||
});
|
});
|
||||||
const edit = document.querySelector('[data-testid="event-edit"]') as HTMLAnchorElement | null;
|
const edit = document.querySelector('[data-testid="event-edit"]') as HTMLAnchorElement | null;
|
||||||
expect(edit).not.toBeNull();
|
expect(edit).not.toBeNull();
|
||||||
expect(edit?.getAttribute('href')).toBe(`/zeitstrahl/events/${EVENT_ID}/edit`);
|
expect(edit?.getAttribute('href')).toContain(EVENT_ID);
|
||||||
});
|
});
|
||||||
|
|
||||||
it('renders no edit affordance for a curated PERSONAL event when canWrite is false (REQ-007)', () => {
|
it('shows no edit affordance when eventId is null (REQ-008)', () => {
|
||||||
render(EventPill, {
|
render(EventPill, {
|
||||||
canWrite: false,
|
|
||||||
entry: makeEntry({
|
|
||||||
kind: 'EVENT',
|
|
||||||
derived: false,
|
|
||||||
type: 'PERSONAL',
|
|
||||||
eventId: EVENT_ID,
|
|
||||||
title: 'Auswanderung',
|
|
||||||
senderName: '',
|
|
||||||
receiverName: '',
|
|
||||||
documentId: undefined
|
|
||||||
})
|
|
||||||
});
|
|
||||||
expect(document.querySelector('[data-testid="event-edit"]')).toBeNull();
|
|
||||||
});
|
|
||||||
|
|
||||||
it('renders no edit affordance when the canWrite prop is omitted (gate-closed default) (REQ-007)', () => {
|
|
||||||
render(EventPill, {
|
|
||||||
entry: makeEntry({
|
|
||||||
kind: 'EVENT',
|
|
||||||
derived: false,
|
|
||||||
type: 'PERSONAL',
|
|
||||||
eventId: EVENT_ID,
|
|
||||||
title: 'Auswanderung',
|
|
||||||
senderName: '',
|
|
||||||
receiverName: '',
|
|
||||||
documentId: undefined
|
|
||||||
})
|
|
||||||
});
|
|
||||||
expect(document.querySelector('[data-testid="event-edit"]')).toBeNull();
|
|
||||||
});
|
|
||||||
|
|
||||||
it('shows no edit affordance when eventId is null even with canWrite (REQ-008)', () => {
|
|
||||||
render(EventPill, {
|
|
||||||
canWrite: true,
|
|
||||||
entry: makeEntry({
|
entry: makeEntry({
|
||||||
kind: 'EVENT',
|
kind: 'EVENT',
|
||||||
derived: false,
|
derived: false,
|
||||||
@@ -120,8 +85,8 @@ describe('EventPill', () => {
|
|||||||
expect(document.querySelector('[data-testid="event-edit"]')).toBeNull();
|
expect(document.querySelector('[data-testid="event-edit"]')).toBeNull();
|
||||||
});
|
});
|
||||||
|
|
||||||
it('shows no edit affordance for a derived event even with canWrite (REQ-008)', () => {
|
it('shows no edit affordance for a derived event (REQ-008)', () => {
|
||||||
render(EventPill, { canWrite: true, entry: derived('MARRIAGE', 'Heirat') });
|
render(EventPill, { entry: derived('MARRIAGE', 'Heirat') });
|
||||||
expect(document.querySelector('[data-testid="event-edit"]')).toBeNull();
|
expect(document.querySelector('[data-testid="event-edit"]')).toBeNull();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
@@ -1,114 +0,0 @@
|
|||||||
<script lang="ts">
|
|
||||||
import * as m from '$lib/paraglide/messages.js';
|
|
||||||
import type { GroupingMode } from './timelineGrouping';
|
|
||||||
|
|
||||||
/**
|
|
||||||
* The Datum·Ereignis·Thema segmented control (#827, REQ-010/011/018). An ARIA radiogroup with
|
|
||||||
* roving tabindex — single selection, arrow-key navigable — deliberately distinct from #780's
|
|
||||||
* `aria-pressed` layer-filter toggles. Defaults to Datum. Each segment is ≥44×44px, carries a
|
|
||||||
* text label (full word as `aria-label`, an abbreviated label shown ≤360px so the control never
|
|
||||||
* overflows at 320px), and uses semantic tokens so the selected/unselected contrast holds in dark
|
|
||||||
* mode. When `disabled` (the Letters layer is off, nothing to regroup) the control stays in place
|
|
||||||
* — no reflow — keeps its `aria-checked` selection so re-enabling restores the mode, and announces
|
|
||||||
* a screen-reader reason.
|
|
||||||
*/
|
|
||||||
let {
|
|
||||||
mode = $bindable('date'),
|
|
||||||
disabled = false,
|
|
||||||
ariaLabel = m.timeline_grouping_aria_label()
|
|
||||||
}: { mode?: GroupingMode; disabled?: boolean; ariaLabel?: string } = $props();
|
|
||||||
|
|
||||||
interface Segment {
|
|
||||||
value: GroupingMode;
|
|
||||||
full: string;
|
|
||||||
short: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
const segments: Segment[] = [
|
|
||||||
{
|
|
||||||
value: 'date',
|
|
||||||
full: m.timeline_grouping_segment_date(),
|
|
||||||
short: m.timeline_grouping_segment_date_short()
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: 'event',
|
|
||||||
full: m.timeline_grouping_segment_event(),
|
|
||||||
short: m.timeline_grouping_segment_event_short()
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: 'thema',
|
|
||||||
full: m.timeline_grouping_segment_thema(),
|
|
||||||
short: m.timeline_grouping_segment_thema_short()
|
|
||||||
}
|
|
||||||
];
|
|
||||||
|
|
||||||
function select(value: GroupingMode) {
|
|
||||||
if (disabled) return;
|
|
||||||
mode = value;
|
|
||||||
}
|
|
||||||
|
|
||||||
function onKeydown(event: KeyboardEvent) {
|
|
||||||
if (disabled) return;
|
|
||||||
const forward = event.key === 'ArrowRight' || event.key === 'ArrowDown';
|
|
||||||
const backward = event.key === 'ArrowLeft' || event.key === 'ArrowUp';
|
|
||||||
if (!forward && !backward) return;
|
|
||||||
event.preventDefault();
|
|
||||||
const index = segments.findIndex((s) => s.value === mode);
|
|
||||||
const delta = forward ? 1 : -1;
|
|
||||||
const next = segments[(index + delta + segments.length) % segments.length];
|
|
||||||
mode = next.value;
|
|
||||||
const groupEl = event.currentTarget as HTMLElement;
|
|
||||||
groupEl.querySelector<HTMLElement>(`[data-value="${next.value}"]`)?.focus();
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<div
|
|
||||||
role="radiogroup"
|
|
||||||
tabindex="-1"
|
|
||||||
aria-label={ariaLabel}
|
|
||||||
aria-disabled={disabled}
|
|
||||||
data-testid="grouping-control"
|
|
||||||
class="inline-flex overflow-hidden rounded-md border border-line"
|
|
||||||
onkeydown={onKeydown}
|
|
||||||
>
|
|
||||||
{#each segments as segment (segment.value)}
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
role="radio"
|
|
||||||
data-value={segment.value}
|
|
||||||
aria-label={segment.full}
|
|
||||||
aria-checked={mode === segment.value}
|
|
||||||
tabindex={mode === segment.value ? 0 : -1}
|
|
||||||
disabled={disabled}
|
|
||||||
onclick={() => select(segment.value)}
|
|
||||||
style="display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px"
|
|
||||||
class="px-3 py-2 font-sans text-xs font-semibold focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-navy focus-visible:ring-inset"
|
|
||||||
class:bg-brand-navy={mode === segment.value && !disabled}
|
|
||||||
class:text-white={mode === segment.value && !disabled}
|
|
||||||
class:bg-surface={mode !== segment.value || disabled}
|
|
||||||
class:text-ink-3={mode !== segment.value || disabled}
|
|
||||||
>
|
|
||||||
<span class="seg-full">{segment.full}</span>
|
|
||||||
<span class="seg-short">{segment.short}</span>
|
|
||||||
</button>
|
|
||||||
{/each}
|
|
||||||
</div>
|
|
||||||
{#if disabled}
|
|
||||||
<span class="sr-only" role="status" data-testid="grouping-disabled-reason"
|
|
||||||
>{m.timeline_grouping_disabled_reason()}</span
|
|
||||||
>
|
|
||||||
{/if}
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.seg-short {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
@media (max-width: 360px) {
|
|
||||||
.seg-full {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
.seg-short {
|
|
||||||
display: inline;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,106 +0,0 @@
|
|||||||
import { describe, it, expect, afterEach } from 'vitest';
|
|
||||||
import { cleanup, render } from 'vitest-browser-svelte';
|
|
||||||
import { tick } from 'svelte';
|
|
||||||
import * as m from '$lib/paraglide/messages.js';
|
|
||||||
import GroupingControl from './GroupingControl.svelte';
|
|
||||||
|
|
||||||
afterEach(() => cleanup());
|
|
||||||
|
|
||||||
const radios = () => Array.from(document.querySelectorAll('[role="radio"]')) as HTMLElement[];
|
|
||||||
const group = () => document.querySelector('[role="radiogroup"]') as HTMLElement;
|
|
||||||
const checkedValue = () =>
|
|
||||||
radios()
|
|
||||||
.find((r) => r.getAttribute('aria-checked') === 'true')
|
|
||||||
?.getAttribute('data-value');
|
|
||||||
|
|
||||||
describe('GroupingControl (REQ-010)', () => {
|
|
||||||
it('renders three radios inside a radiogroup, each with aria-checked (a)', () => {
|
|
||||||
render(GroupingControl, {});
|
|
||||||
expect(group()).not.toBeNull();
|
|
||||||
const r = radios();
|
|
||||||
expect(r).toHaveLength(3);
|
|
||||||
r.forEach((radio) => expect(radio.hasAttribute('aria-checked')).toBe(true));
|
|
||||||
});
|
|
||||||
|
|
||||||
it('defaults to Datum (f)', () => {
|
|
||||||
render(GroupingControl, {});
|
|
||||||
expect(radios().filter((r) => r.getAttribute('aria-checked') === 'true')).toHaveLength(1);
|
|
||||||
expect(checkedValue()).toBe('date');
|
|
||||||
});
|
|
||||||
|
|
||||||
it('exposes a text label on every segment, not colour alone (d)', () => {
|
|
||||||
render(GroupingControl, {});
|
|
||||||
radios().forEach((r) => expect((r.textContent ?? '').trim().length).toBeGreaterThan(0));
|
|
||||||
});
|
|
||||||
|
|
||||||
it('gives the radiogroup an accessible name (e)', () => {
|
|
||||||
render(GroupingControl, {});
|
|
||||||
expect(group().getAttribute('aria-label')).toBe(m.timeline_grouping_aria_label());
|
|
||||||
});
|
|
||||||
|
|
||||||
it('each segment has a tap target of at least 44×44px (c)', () => {
|
|
||||||
render(GroupingControl, {});
|
|
||||||
radios().forEach((r) => {
|
|
||||||
const rect = r.getBoundingClientRect();
|
|
||||||
expect(rect.width).toBeGreaterThanOrEqual(44);
|
|
||||||
expect(rect.height).toBeGreaterThanOrEqual(44);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
it('exposes each segment full word as an aria-label (REQ-011)', () => {
|
|
||||||
render(GroupingControl, {});
|
|
||||||
const labels = radios().map((r) => r.getAttribute('aria-label'));
|
|
||||||
expect(labels).toEqual([
|
|
||||||
m.timeline_grouping_segment_date(),
|
|
||||||
m.timeline_grouping_segment_event(),
|
|
||||||
m.timeline_grouping_segment_thema()
|
|
||||||
]);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('moves the selection forward with the right arrow key (b)', async () => {
|
|
||||||
render(GroupingControl, { mode: 'date' });
|
|
||||||
group().dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight', bubbles: true }));
|
|
||||||
await tick();
|
|
||||||
expect(checkedValue()).toBe('event');
|
|
||||||
});
|
|
||||||
|
|
||||||
it('wraps to the last segment with the left arrow from Datum (b)', async () => {
|
|
||||||
render(GroupingControl, { mode: 'date' });
|
|
||||||
group().dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowLeft', bubbles: true }));
|
|
||||||
await tick();
|
|
||||||
expect(checkedValue()).toBe('thema');
|
|
||||||
});
|
|
||||||
|
|
||||||
it('selects a segment on click', async () => {
|
|
||||||
render(GroupingControl, { mode: 'date' });
|
|
||||||
const thema = radios().find((r) => r.getAttribute('data-value') === 'thema')!;
|
|
||||||
thema.click();
|
|
||||||
await tick();
|
|
||||||
expect(thema.getAttribute('aria-checked')).toBe('true');
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
describe('GroupingControl — disabled (REQ-018)', () => {
|
|
||||||
it('marks the radiogroup aria-disabled and keeps all radios in the DOM', () => {
|
|
||||||
render(GroupingControl, { mode: 'event', disabled: true });
|
|
||||||
expect(group().getAttribute('aria-disabled')).toBe('true');
|
|
||||||
expect(radios()).toHaveLength(3);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('announces a screen-reader reason that letters are hidden', () => {
|
|
||||||
render(GroupingControl, { disabled: true });
|
|
||||||
const reason = document.querySelector('[data-testid="grouping-disabled-reason"]');
|
|
||||||
expect(reason?.textContent).toContain(m.timeline_grouping_disabled_reason());
|
|
||||||
});
|
|
||||||
|
|
||||||
it('retains the active mode while disabled (no reset to Datum)', () => {
|
|
||||||
render(GroupingControl, { mode: 'thema', disabled: true });
|
|
||||||
expect(checkedValue()).toBe('thema');
|
|
||||||
});
|
|
||||||
|
|
||||||
it('ignores arrow keys while disabled', () => {
|
|
||||||
render(GroupingControl, { mode: 'event', disabled: true });
|
|
||||||
group().dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight', bubbles: true }));
|
|
||||||
expect(checkedValue()).toBe('event');
|
|
||||||
});
|
|
||||||
});
|
|
||||||
@@ -1,195 +0,0 @@
|
|||||||
<script lang="ts">
|
|
||||||
import * as m from '$lib/paraglide/messages.js';
|
|
||||||
import LetterCard from './LetterCard.svelte';
|
|
||||||
import BucketHeaderChip from './BucketHeaderChip.svelte';
|
|
||||||
import { entryKey } from './entryKey';
|
|
||||||
import { getAccentConfig } from './eventCardConfig';
|
|
||||||
import { timelineDateLabel } from './dateLabel';
|
|
||||||
import { CLUSTER_PREVIEW, tagColorVar, type LetterBucket } from './timelineGrouping';
|
|
||||||
import type { components } from '$lib/generated/api';
|
|
||||||
|
|
||||||
type TimelineEntryDTO = components['schemas']['TimelineEntryDTO'];
|
|
||||||
|
|
||||||
/**
|
|
||||||
* One cluster of loose letters, bound together by a coloured left rail so the group reads as a
|
|
||||||
* unit (#827). The axis-fixed world-band layer is rendered elsewhere — this is only the
|
|
||||||
* loose-letter bundling.
|
|
||||||
*
|
|
||||||
* - Thema: a tinted root-tag header chip + a rail in the tag colour, over compact cards whose own
|
|
||||||
* tag chip is suppressed (REQ-004/015/017).
|
|
||||||
* - Ereignis: a same-year curated `event` becomes the card header (glyph, title, date,
|
|
||||||
* provenance, edit pencil) so its title reads once — no separate floating pill (#827 redesign,
|
|
||||||
* REQ-001/014). A cross-year cluster keeps a plain text header. The standalone "Weitere Briefe"
|
|
||||||
* / "Ohne Thema" fallback keeps its label and a neutral dashed rail (REQ-006/007).
|
|
||||||
*
|
|
||||||
* A cluster shows its first `CLUSTER_PREVIEW` letters, then a show-more toggle reveals the rest
|
|
||||||
* instead of flooding the timeline with every card (#827 redesign).
|
|
||||||
*/
|
|
||||||
let {
|
|
||||||
bucket,
|
|
||||||
mode,
|
|
||||||
// `year` is the band's year — accepted for the cross-year label card seam (#827) but no
|
|
||||||
// longer consumed here now the in-bucket month-density strip is gone (the year frames the
|
|
||||||
// time from the band heading). Kept in the prop contract for callers/tests.
|
|
||||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
||||||
year = 0,
|
|
||||||
nested = false,
|
|
||||||
event = undefined,
|
|
||||||
canWrite = false
|
|
||||||
}: {
|
|
||||||
bucket: LetterBucket;
|
|
||||||
mode: 'event' | 'thema';
|
|
||||||
year?: number;
|
|
||||||
nested?: boolean;
|
|
||||||
/** The same-year curated event whose letters this card holds — renders as the header. */
|
|
||||||
event?: TimelineEntryDTO;
|
|
||||||
canWrite?: boolean;
|
|
||||||
} = $props();
|
|
||||||
|
|
||||||
const count = $derived(bucket.letters.length);
|
|
||||||
const fallbackLabel = $derived(
|
|
||||||
mode === 'event' ? m.timeline_bucket_other_letters() : m.timeline_bucket_no_topic()
|
|
||||||
);
|
|
||||||
|
|
||||||
// Event-as-header (#827 redesign): a same-year curated event renders as this card's header,
|
|
||||||
// mirroring EventPill — glyph + title + date · provenance + an edit pencil for a curator. The
|
|
||||||
// title is never repeated as a separate floating pill.
|
|
||||||
const accent = $derived(event ? getAccentConfig(event) : null);
|
|
||||||
const eventDateLabel = $derived(
|
|
||||||
event ? timelineDateLabel(event.eventDate, event.precision, event.eventDateEnd) : null
|
|
||||||
);
|
|
||||||
const provenance = $derived(
|
|
||||||
event?.derived ? m.timeline_provenance_derived() : m.timeline_provenance_curated()
|
|
||||||
);
|
|
||||||
const eventSubtitle = $derived(eventDateLabel ? `${eventDateLabel} · ${provenance}` : provenance);
|
|
||||||
const canEdit = $derived(canWrite && !!event && !event.derived && event.eventId != null);
|
|
||||||
// The left rail binds the cluster: the tag colour in Thema, mint for an Ereignis cluster,
|
|
||||||
// neutral for the fallback (and for a colourless/unknown tag token).
|
|
||||||
const railColor = $derived(bucket.kind === 'tag' ? tagColorVar(bucket.color) : null);
|
|
||||||
const railStyle = $derived(railColor ? `border-left-color: ${railColor}` : '');
|
|
||||||
const isEventCluster = $derived(nested || bucket.kind === 'event');
|
|
||||||
const cardVariant = $derived(mode === 'event' && isEventCluster ? 'event' : 'plain');
|
|
||||||
|
|
||||||
// First-5 preview + show-more (#827 redesign): a large cluster stays readable instead of
|
|
||||||
// dumping every card into the timeline.
|
|
||||||
let expanded = $state(false);
|
|
||||||
const visible = $derived(expanded ? bucket.letters : bucket.letters.slice(0, CLUSTER_PREVIEW));
|
|
||||||
const hiddenCount = $derived(bucket.letters.length - CLUSTER_PREVIEW);
|
|
||||||
|
|
||||||
// The catch-all "Weitere Briefe" / "Ohne Thema" bin is a junk drawer: render it count-only
|
|
||||||
// behind a reveal control so it never floods the timeline; every other cluster starts open
|
|
||||||
// (#827 redesign). The view re-creates a bucket per `{#each}` key, so the initial capture is
|
|
||||||
// the right lifetime — `revealed` belongs to this bucket instance.
|
|
||||||
const isDrawer = $derived(bucket.kind === 'fallback');
|
|
||||||
// svelte-ignore state_referenced_locally
|
|
||||||
let revealed = $state(bucket.kind !== 'fallback');
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<section
|
|
||||||
class="my-3 overflow-hidden rounded-md border border-l-2 border-line bg-surface shadow-sm"
|
|
||||||
class:border-l-brand-mint={isEventCluster}
|
|
||||||
class:border-dashed={isDrawer}
|
|
||||||
style={railStyle}
|
|
||||||
data-testid="letter-bucket"
|
|
||||||
data-bucket-kind={bucket.kind}
|
|
||||||
>
|
|
||||||
{#if !nested}
|
|
||||||
{#if event && accent}
|
|
||||||
<!-- A same-year curated event IS the card header — its title reads once here, never
|
|
||||||
also as a floating pill (#827 redesign, REQ-001/014). Glyph is aria-hidden with an
|
|
||||||
sr-only label sibling (REQ-018); the edit pencil mirrors EventPill's gate. -->
|
|
||||||
<header
|
|
||||||
data-testid="bucket-event-header"
|
|
||||||
class="flex items-center gap-2 border-b border-line bg-canvas px-3 py-2"
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
class="flex h-7 w-7 shrink-0 items-center justify-center rounded-full {accent.accent ===
|
|
||||||
'curated'
|
|
||||||
? 'bg-brand-mint text-brand-navy'
|
|
||||||
: 'bg-brand-navy text-brand-mint'}"
|
|
||||||
>
|
|
||||||
<span aria-hidden="true">{accent.glyph}</span>
|
|
||||||
<span class="sr-only">{accent.label}</span>
|
|
||||||
</span>
|
|
||||||
<span class="min-w-0 text-left">
|
|
||||||
<span class="block font-serif text-sm font-bold whitespace-pre-line text-brand-navy"
|
|
||||||
>{event.title}</span
|
|
||||||
>
|
|
||||||
<span class="block font-sans text-xs text-ink-3">
|
|
||||||
{eventSubtitle} <span data-testid="bucket-count">· {count}</span>
|
|
||||||
</span>
|
|
||||||
</span>
|
|
||||||
{#if canEdit}
|
|
||||||
<a
|
|
||||||
data-testid="event-edit"
|
|
||||||
href="/zeitstrahl/events/{event.eventId}/edit"
|
|
||||||
class="ml-auto rounded-sm px-1 font-sans text-xs text-ink-3 hover:text-brand-navy focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-navy"
|
|
||||||
>
|
|
||||||
<span aria-hidden="true">✎</span>
|
|
||||||
<span class="sr-only">{m.btn_edit()}</span>
|
|
||||||
</a>
|
|
||||||
{/if}
|
|
||||||
</header>
|
|
||||||
{:else}
|
|
||||||
<header
|
|
||||||
class="flex items-center gap-2 px-3 py-2"
|
|
||||||
class:bg-canvas={isEventCluster}
|
|
||||||
class:border-b={!isDrawer}
|
|
||||||
class:border-line={!isDrawer}
|
|
||||||
>
|
|
||||||
{#if mode === 'thema' && bucket.kind === 'tag'}
|
|
||||||
<BucketHeaderChip name={bucket.title ?? ''} color={bucket.color} />
|
|
||||||
{:else if mode === 'event' && bucket.kind === 'event'}
|
|
||||||
<span class="font-serif text-sm font-bold text-ink">
|
|
||||||
<span aria-hidden="true">✉</span>
|
|
||||||
{bucket.title}
|
|
||||||
</span>
|
|
||||||
{:else}
|
|
||||||
<span class="font-sans text-xs font-semibold text-ink-3">{fallbackLabel}</span>
|
|
||||||
{/if}
|
|
||||||
<span data-testid="bucket-count" class="font-sans text-xs text-ink-3">· {count}</span>
|
|
||||||
</header>
|
|
||||||
{/if}
|
|
||||||
{/if}
|
|
||||||
|
|
||||||
<div class="px-3 py-2">
|
|
||||||
{#if !revealed}
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
data-testid="bucket-reveal"
|
|
||||||
onclick={() => (revealed = true)}
|
|
||||||
style="display: inline-flex; align-items: center; min-height: 44px"
|
|
||||||
class="px-1 font-sans text-xs font-semibold text-brand-navy hover:underline focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-navy"
|
|
||||||
>
|
|
||||||
{m.timeline_bucket_show_more({ count: bucket.letters.length })}
|
|
||||||
</button>
|
|
||||||
{:else}
|
|
||||||
<ul class="space-y-1.5">
|
|
||||||
{#each visible as letter (entryKey(letter))}
|
|
||||||
<li>
|
|
||||||
<LetterCard
|
|
||||||
entry={letter}
|
|
||||||
variant={cardVariant}
|
|
||||||
suppressTagChip={mode === 'thema'}
|
|
||||||
compact={true}
|
|
||||||
/>
|
|
||||||
</li>
|
|
||||||
{/each}
|
|
||||||
</ul>
|
|
||||||
{#if hiddenCount > 0}
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
data-testid="bucket-show-more"
|
|
||||||
aria-expanded={expanded}
|
|
||||||
onclick={() => (expanded = !expanded)}
|
|
||||||
style="display: inline-flex; align-items: center; min-height: 44px"
|
|
||||||
class="mt-1 px-1 font-sans text-xs font-semibold text-brand-navy hover:underline focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-navy"
|
|
||||||
>
|
|
||||||
{expanded
|
|
||||||
? m.timeline_bucket_show_less()
|
|
||||||
: m.timeline_bucket_show_more({ count: hiddenCount })}
|
|
||||||
</button>
|
|
||||||
{/if}
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
@@ -1,232 +0,0 @@
|
|||||||
import { describe, it, expect, afterEach } from 'vitest';
|
|
||||||
import { cleanup, render } from 'vitest-browser-svelte';
|
|
||||||
import { tick } from 'svelte';
|
|
||||||
import * as m from '$lib/paraglide/messages.js';
|
|
||||||
import LetterBucket from './LetterBucket.svelte';
|
|
||||||
import { makeEntry } from './test-factories';
|
|
||||||
import type { LetterBucket as Bucket } from './timelineGrouping';
|
|
||||||
|
|
||||||
afterEach(() => cleanup());
|
|
||||||
|
|
||||||
const eventBucket: Bucket = {
|
|
||||||
key: 'event:e1',
|
|
||||||
kind: 'event',
|
|
||||||
title: 'Briefe von der Front',
|
|
||||||
color: null,
|
|
||||||
letters: [makeEntry({ documentId: 'a' }), makeEntry({ documentId: 'b' })]
|
|
||||||
};
|
|
||||||
|
|
||||||
const tagBucket: Bucket = {
|
|
||||||
key: 'tag:t1',
|
|
||||||
kind: 'tag',
|
|
||||||
title: 'Krieg',
|
|
||||||
color: 'sienna',
|
|
||||||
letters: [makeEntry({ documentId: 'c', rootTagName: 'Krieg', rootTagColor: 'sienna' })]
|
|
||||||
};
|
|
||||||
|
|
||||||
describe('LetterBucket — Ereignis mode (REQ-003/006/014)', () => {
|
|
||||||
it('shows the event title and the cluster count', () => {
|
|
||||||
render(LetterBucket, { bucket: eventBucket, mode: 'event' });
|
|
||||||
expect(document.body.textContent).toContain('Briefe von der Front');
|
|
||||||
expect(document.querySelector('[data-testid="bucket-count"]')?.textContent).toContain('2');
|
|
||||||
});
|
|
||||||
|
|
||||||
it('renders its letters as .lcard.ev event cards (REQ-014)', () => {
|
|
||||||
render(LetterBucket, { bucket: eventBucket, mode: 'event' });
|
|
||||||
expect(document.querySelectorAll('a.lcard.ev')).toHaveLength(2);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('uses the localized "Weitere Briefe" label and plain cards for the fallback bucket (REQ-006)', () => {
|
|
||||||
const fb: Bucket = {
|
|
||||||
key: '__fallback__',
|
|
||||||
kind: 'fallback',
|
|
||||||
color: null,
|
|
||||||
letters: [makeEntry({ documentId: 'x' })]
|
|
||||||
};
|
|
||||||
render(LetterBucket, { bucket: fb, mode: 'event' });
|
|
||||||
expect(document.body.textContent).toContain(m.timeline_bucket_other_letters());
|
|
||||||
// fallback letters are not clustered under a curated event → plain card, never .lcard.ev
|
|
||||||
expect(document.querySelector('a.ev')).toBeNull();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
describe('LetterBucket — Thema mode (REQ-004/007/015/017)', () => {
|
|
||||||
it('renders a tinted bucket-header chip carrying the root-tag name (REQ-015)', () => {
|
|
||||||
render(LetterBucket, { bucket: tagBucket, mode: 'thema' });
|
|
||||||
const chip = document.querySelector('[data-testid="bucket-header-chip"]');
|
|
||||||
expect(chip?.textContent).toContain('Krieg');
|
|
||||||
});
|
|
||||||
|
|
||||||
it('suppresses the per-letter tag chip inside its own root-tag bucket (REQ-017)', () => {
|
|
||||||
render(LetterBucket, { bucket: tagBucket, mode: 'thema' });
|
|
||||||
expect(document.querySelector('[data-testid="tag-chip"]')).toBeNull();
|
|
||||||
});
|
|
||||||
|
|
||||||
it('uses the localized "Ohne Thema" label for the untagged fallback bucket (REQ-007)', () => {
|
|
||||||
const fb: Bucket = {
|
|
||||||
key: '__fallback__',
|
|
||||||
kind: 'fallback',
|
|
||||||
color: null,
|
|
||||||
letters: [makeEntry({ documentId: 'y', rootTagName: undefined })]
|
|
||||||
};
|
|
||||||
render(LetterBucket, { bucket: fb, mode: 'thema' });
|
|
||||||
expect(document.body.textContent).toContain(m.timeline_bucket_no_topic());
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
const manyLetters = (n: number) =>
|
|
||||||
Array.from({ length: n }, (_, i) =>
|
|
||||||
makeEntry({ documentId: `d${i}`, eventDate: `1916-0${(i % 9) + 1}-01` })
|
|
||||||
);
|
|
||||||
|
|
||||||
describe('LetterBucket — preview cap + show-more (#827 redesign)', () => {
|
|
||||||
it('shows only the first 5 letters with a show-more toggle when the cluster is larger', () => {
|
|
||||||
const bucket: Bucket = {
|
|
||||||
key: 'tag:t1',
|
|
||||||
kind: 'tag',
|
|
||||||
title: 'Krieg',
|
|
||||||
color: 'sienna',
|
|
||||||
letters: manyLetters(8)
|
|
||||||
};
|
|
||||||
render(LetterBucket, { bucket, mode: 'thema', year: 1916 });
|
|
||||||
expect(document.querySelectorAll('a.lcard')).toHaveLength(5);
|
|
||||||
expect(document.querySelector('[data-testid="bucket-show-more"]')).not.toBeNull();
|
|
||||||
expect(document.querySelector('[data-testid="strip-expand"]')).toBeNull(); // sparkline gone
|
|
||||||
});
|
|
||||||
|
|
||||||
it('expands to all letters and collapses back on toggle', async () => {
|
|
||||||
const bucket: Bucket = {
|
|
||||||
key: 'tag:t1',
|
|
||||||
kind: 'tag',
|
|
||||||
title: 'Krieg',
|
|
||||||
color: 'sienna',
|
|
||||||
letters: manyLetters(8)
|
|
||||||
};
|
|
||||||
render(LetterBucket, { bucket, mode: 'thema', year: 1916 });
|
|
||||||
(document.querySelector('[data-testid="bucket-show-more"]') as HTMLButtonElement).click();
|
|
||||||
await tick();
|
|
||||||
expect(document.querySelectorAll('a.lcard')).toHaveLength(8);
|
|
||||||
(document.querySelector('[data-testid="bucket-show-more"]') as HTMLButtonElement).click();
|
|
||||||
await tick();
|
|
||||||
expect(document.querySelectorAll('a.lcard')).toHaveLength(5);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('shows all letters and no toggle for a small cluster (<= 5)', () => {
|
|
||||||
const bucket: Bucket = {
|
|
||||||
key: 'tag:t1',
|
|
||||||
kind: 'tag',
|
|
||||||
title: 'Tod',
|
|
||||||
color: null,
|
|
||||||
letters: manyLetters(3)
|
|
||||||
};
|
|
||||||
render(LetterBucket, { bucket, mode: 'thema', year: 1916 });
|
|
||||||
expect(document.querySelectorAll('a.lcard')).toHaveLength(3);
|
|
||||||
expect(document.querySelector('[data-testid="bucket-show-more"]')).toBeNull();
|
|
||||||
});
|
|
||||||
|
|
||||||
it('binds a tag bucket together with a coloured left rail from its token', () => {
|
|
||||||
const bucket: Bucket = {
|
|
||||||
key: 'tag:t1',
|
|
||||||
kind: 'tag',
|
|
||||||
title: 'Krieg',
|
|
||||||
color: 'sienna',
|
|
||||||
letters: manyLetters(1)
|
|
||||||
};
|
|
||||||
render(LetterBucket, { bucket, mode: 'thema', year: 1916 });
|
|
||||||
const section = document.querySelector('[data-testid="letter-bucket"]') as HTMLElement;
|
|
||||||
expect(section.getAttribute('style') ?? '').toContain('var(--c-tag-sienna)');
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
describe('LetterBucket — leftover drawer (#827 redesign)', () => {
|
|
||||||
const fb = (n: number): Bucket => ({
|
|
||||||
key: '__fallback__',
|
|
||||||
kind: 'fallback',
|
|
||||||
color: null,
|
|
||||||
letters: Array.from({ length: n }, (_, i) =>
|
|
||||||
makeEntry({ documentId: `f${i}`, eventDate: `1916-01-0${(i % 9) + 1}` })
|
|
||||||
)
|
|
||||||
});
|
|
||||||
it('renders collapsed — count + reveal, no letter cards — until opened', () => {
|
|
||||||
render(LetterBucket, { bucket: fb(20), mode: 'event', year: 1916 });
|
|
||||||
expect(document.querySelector('a.lcard')).toBeNull();
|
|
||||||
expect(document.body.textContent).toContain(m.timeline_bucket_other_letters());
|
|
||||||
expect(document.querySelector('[data-testid="bucket-reveal"]')).not.toBeNull();
|
|
||||||
});
|
|
||||||
it('reveals the first 5 letters when opened', async () => {
|
|
||||||
render(LetterBucket, { bucket: fb(20), mode: 'event', year: 1916 });
|
|
||||||
(document.querySelector('[data-testid="bucket-reveal"]') as HTMLButtonElement).click();
|
|
||||||
await tick();
|
|
||||||
expect(document.querySelectorAll('a.lcard')).toHaveLength(5);
|
|
||||||
expect(document.querySelector('[data-testid="bucket-show-more"]')).not.toBeNull();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
describe('LetterBucket — card chrome (#827 redesign)', () => {
|
|
||||||
it('renders the cluster as a contained card (bordered, rounded, surface)', () => {
|
|
||||||
const bucket: Bucket = {
|
|
||||||
key: 'tag:t1',
|
|
||||||
kind: 'tag',
|
|
||||||
title: 'Krieg',
|
|
||||||
color: 'sienna',
|
|
||||||
letters: [makeEntry({ documentId: 'a' })]
|
|
||||||
};
|
|
||||||
render(LetterBucket, { bucket, mode: 'thema', year: 1916 });
|
|
||||||
const card = document.querySelector('[data-testid="letter-bucket"]') as HTMLElement;
|
|
||||||
expect(card.className).toMatch(/\brounded\b|rounded-/);
|
|
||||||
expect(card.className).toContain('border');
|
|
||||||
expect(card.className).toContain('bg-surface');
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
describe('LetterBucket — event-as-header (#827 redesign)', () => {
|
|
||||||
it('renders the curated event as the card header when given an `event` (no separate pill)', () => {
|
|
||||||
const event = makeEntry({
|
|
||||||
kind: 'EVENT',
|
|
||||||
type: 'PERSONAL',
|
|
||||||
derived: false,
|
|
||||||
eventId: 'e1',
|
|
||||||
title: 'Ein gewaltiger Stadtbrand',
|
|
||||||
eventDate: '1916-07-06',
|
|
||||||
senderName: '',
|
|
||||||
receiverName: '',
|
|
||||||
documentId: undefined
|
|
||||||
});
|
|
||||||
const bucket: Bucket = {
|
|
||||||
key: 'event:e1',
|
|
||||||
kind: 'event',
|
|
||||||
title: 'Ein gewaltiger Stadtbrand',
|
|
||||||
color: null,
|
|
||||||
letters: [makeEntry({ documentId: 'a', linkedEventId: 'e1' })]
|
|
||||||
};
|
|
||||||
render(LetterBucket, { bucket, mode: 'event', year: 1916, event, canWrite: true });
|
|
||||||
const header = document.querySelector('[data-testid="bucket-event-header"]') as HTMLElement;
|
|
||||||
expect(header.textContent).toContain('Ein gewaltiger Stadtbrand');
|
|
||||||
expect(header.textContent).toContain(m.timeline_provenance_curated());
|
|
||||||
expect(document.querySelector('[data-testid="event-edit"]')?.getAttribute('href')).toBe(
|
|
||||||
'/zeitstrahl/events/e1/edit'
|
|
||||||
);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('shows no edit affordance in the header when canWrite is false', () => {
|
|
||||||
const event = makeEntry({
|
|
||||||
kind: 'EVENT',
|
|
||||||
type: 'PERSONAL',
|
|
||||||
derived: false,
|
|
||||||
eventId: 'e1',
|
|
||||||
title: 'X',
|
|
||||||
senderName: '',
|
|
||||||
receiverName: '',
|
|
||||||
documentId: undefined
|
|
||||||
});
|
|
||||||
const bucket: Bucket = {
|
|
||||||
key: 'event:e1',
|
|
||||||
kind: 'event',
|
|
||||||
title: 'X',
|
|
||||||
color: null,
|
|
||||||
letters: [makeEntry({ documentId: 'a' })]
|
|
||||||
};
|
|
||||||
render(LetterBucket, { bucket, mode: 'event', year: 1916, event, canWrite: false });
|
|
||||||
expect(document.querySelector('[data-testid="event-edit"]')).toBeNull();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
@@ -12,30 +12,10 @@ type TimelineEntryDTO = components['schemas']['TimelineEntryDTO'];
|
|||||||
* precision-aware date chip, linking to the document. Names/titles are
|
* precision-aware date chip, linking to the document. Names/titles are
|
||||||
* OCR/import-derived — rendered via default `{...}` escaping with
|
* OCR/import-derived — rendered via default `{...}` escaping with
|
||||||
* `whitespace-pre-line` for line breaks (REQ-021); never the raw-HTML directive.
|
* `whitespace-pre-line` for line breaks (REQ-021); never the raw-HTML directive.
|
||||||
*
|
|
||||||
* In Ereignis mode the card sits inside an event cluster and renders as the
|
|
||||||
* `.lcard.ev` variant (#827, REQ-014). In Thema mode the per-letter tag chip is
|
|
||||||
* suppressed inside its own root-tag bucket, where the bucket header already
|
|
||||||
* carries the topic (`suppressTagChip`, REQ-017).
|
|
||||||
*/
|
*/
|
||||||
let {
|
let { entry }: { entry: TimelineEntryDTO } = $props();
|
||||||
entry,
|
|
||||||
variant = 'plain',
|
|
||||||
suppressTagChip = false,
|
|
||||||
compact = false
|
|
||||||
}: {
|
|
||||||
entry: TimelineEntryDTO;
|
|
||||||
variant?: 'plain' | 'event';
|
|
||||||
suppressTagChip?: boolean;
|
|
||||||
compact?: boolean;
|
|
||||||
} = $props();
|
|
||||||
|
|
||||||
const isEventVariant = $derived(variant === 'event');
|
|
||||||
const dateLabel = $derived(timelineDateLabel(entry.eventDate, entry.precision, entry.eventDateEnd));
|
const dateLabel = $derived(timelineDateLabel(entry.eventDate, entry.precision, entry.eventDateEnd));
|
||||||
// Inside a per-year bucket the year frames the time, and these archive titles already
|
|
||||||
// embed the date — so the compact in-bucket card drops the redundant date chip when a
|
|
||||||
// title is present, halving the row height and killing the duplicate date (#827).
|
|
||||||
const showDate = $derived(!compact || !entry.title);
|
|
||||||
const sender = $derived(entry.senderName === '' ? m.timeline_unknown_person() : entry.senderName);
|
const sender = $derived(entry.senderName === '' ? m.timeline_unknown_person() : entry.senderName);
|
||||||
const receiver = $derived(
|
const receiver = $derived(
|
||||||
entry.receiverName === '' ? m.timeline_unknown_person() : entry.receiverName
|
entry.receiverName === '' ? m.timeline_unknown_person() : entry.receiverName
|
||||||
@@ -48,37 +28,28 @@ const receiver = $derived(
|
|||||||
<a
|
<a
|
||||||
href="/documents/{entry.documentId}"
|
href="/documents/{entry.documentId}"
|
||||||
style="display: flex; flex-direction: column; justify-content: center; min-height: 44px"
|
style="display: flex; flex-direction: column; justify-content: center; min-height: 44px"
|
||||||
class="lcard rounded-sm border border-l-[3px] border-line border-l-brand-mint bg-surface px-3 shadow-sm transition-colors hover:border-brand-mint focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-navy"
|
class="rounded-sm border border-l-[3px] border-line border-l-brand-mint bg-surface px-3 py-2 shadow-sm transition-colors hover:border-brand-mint focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-navy"
|
||||||
class:py-2={!compact}
|
|
||||||
class:py-1={compact}
|
|
||||||
class:ev={isEventVariant}
|
|
||||||
class:compact={compact}
|
|
||||||
>
|
>
|
||||||
{#if entry.title}
|
{#if entry.title}
|
||||||
<!-- ✉ + sr-only label are static chrome rendered as sibling nodes, NEVER
|
<!-- ✉ + sr-only label are static chrome rendered as sibling nodes, NEVER
|
||||||
interpolated into the escaped user title; the title keeps its own
|
interpolated into the escaped user title; the title keeps its own
|
||||||
pre-line span for multi-line OCR text (REQ-008/016/021). -->
|
pre-line span for multi-line OCR text (REQ-008/016/021). -->
|
||||||
<span
|
<span class="font-serif text-sm font-bold break-words text-ink">
|
||||||
class="font-serif font-bold break-words text-ink"
|
|
||||||
class:text-sm={!compact}
|
|
||||||
class:text-xs={compact}
|
|
||||||
>
|
|
||||||
<GlyphLabel glyph="✉" label={m.timeline_letter_glyph_label()} />
|
<GlyphLabel glyph="✉" label={m.timeline_letter_glyph_label()} />
|
||||||
<span class="whitespace-pre-line">{entry.title}</span>
|
<span class="whitespace-pre-line">{entry.title}</span>
|
||||||
</span>
|
</span>
|
||||||
{/if}
|
{/if}
|
||||||
<span class="font-sans text-xs break-words text-ink-3" class:mt-0.5={!compact}>
|
<span class="mt-0.5 font-sans text-xs break-words text-ink-3">
|
||||||
<span class="font-serif whitespace-pre-line">{sender}</span>
|
<span class="font-serif whitespace-pre-line">{sender}</span>
|
||||||
<span aria-hidden="true">→</span>
|
<span aria-hidden="true">→</span>
|
||||||
<span class="font-serif whitespace-pre-line">{receiver}</span>
|
<span class="font-serif whitespace-pre-line">{receiver}</span>
|
||||||
{#if dateLabel && showDate}
|
{#if dateLabel}
|
||||||
<span data-testid="letter-date"> · {dateLabel}</span>
|
<span data-testid="letter-date"> · {dateLabel}</span>
|
||||||
{/if}
|
{/if}
|
||||||
</span>
|
</span>
|
||||||
{#if entry.rootTagName && !suppressTagChip}
|
{#if entry.rootTagName}
|
||||||
<!-- The primary root-tag chip sits on its own line beneath the meta line
|
<!-- The primary root-tag chip sits on its own line beneath the meta line
|
||||||
(#835 §3); absent when the letter has no tag (REQ-005), and suppressed in
|
(#835 §3); absent when the letter has no tag (REQ-005). -->
|
||||||
Thema mode inside its own root-tag bucket where the header conveys it (REQ-017). -->
|
|
||||||
<TagChip name={entry.rootTagName} color={entry.rootTagColor ?? null} />
|
<TagChip name={entry.rootTagName} color={entry.rootTagColor ?? null} />
|
||||||
{/if}
|
{/if}
|
||||||
</a>
|
</a>
|
||||||
|
|||||||
@@ -127,46 +127,3 @@ describe('LetterCard', () => {
|
|||||||
expect(chip?.textContent).toContain('Familie');
|
expect(chip?.textContent).toContain('Familie');
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
describe('LetterCard — grouping variants (#827, REQ-014/017)', () => {
|
|
||||||
it('carries the .lcard.ev class in the event variant (REQ-014)', () => {
|
|
||||||
render(LetterCard, { entry: makeEntry(), variant: 'event' });
|
|
||||||
expect(document.querySelector('a.lcard.ev')).not.toBeNull();
|
|
||||||
});
|
|
||||||
|
|
||||||
it('is a plain card with no .ev marker by default (REQ-014)', () => {
|
|
||||||
render(LetterCard, { entry: makeEntry() });
|
|
||||||
expect(document.querySelector('a.ev')).toBeNull();
|
|
||||||
});
|
|
||||||
|
|
||||||
it('suppresses the per-letter tag chip when asked, even with a root tag (REQ-017)', () => {
|
|
||||||
render(LetterCard, {
|
|
||||||
entry: makeEntry({ rootTagName: 'Krieg', rootTagColor: 'sienna' }),
|
|
||||||
suppressTagChip: true
|
|
||||||
});
|
|
||||||
expect(document.querySelector('[data-testid="tag-chip"]')).toBeNull();
|
|
||||||
});
|
|
||||||
|
|
||||||
it('still shows the per-letter tag chip when not suppressed — Datum/Ereignis (REQ-017)', () => {
|
|
||||||
render(LetterCard, { entry: makeEntry({ rootTagName: 'Krieg', rootTagColor: 'sienna' }) });
|
|
||||||
expect(document.querySelector('[data-testid="tag-chip"]')).not.toBeNull();
|
|
||||||
});
|
|
||||||
|
|
||||||
it('drops the redundant date line in the compact variant when a title is present (#827)', () => {
|
|
||||||
// Inside a per-year bucket the year already frames the time, and these archive
|
|
||||||
// titles embed the date — so the compact in-bucket card omits the date chip.
|
|
||||||
render(LetterCard, { entry: makeEntry({ title: 'H-0023 – 6. Juli 1916' }), compact: true });
|
|
||||||
expect(document.querySelector('[data-testid="letter-date"]')).toBeNull();
|
|
||||||
expect(document.body.textContent).toContain('Karl Raddatz'); // sender still shown
|
|
||||||
});
|
|
||||||
|
|
||||||
it('keeps the date in the compact variant when the letter has no title (#827)', () => {
|
|
||||||
render(LetterCard, { entry: makeEntry({ title: undefined }), compact: true });
|
|
||||||
expect(document.querySelector('[data-testid="letter-date"]')).not.toBeNull();
|
|
||||||
});
|
|
||||||
|
|
||||||
it('renders the compact variant on a single tighter row (#827)', () => {
|
|
||||||
render(LetterCard, { entry: makeEntry(), compact: true });
|
|
||||||
expect(document.querySelector('a.lcard.compact')).not.toBeNull();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|||||||
@@ -1,133 +0,0 @@
|
|||||||
<script lang="ts">
|
|
||||||
import * as m from '$lib/paraglide/messages.js';
|
|
||||||
import { slide } from 'svelte/transition';
|
|
||||||
import { hiddenLayerCount, isDefaultState, type TimelineLayerFilters } from './timelineFilter';
|
|
||||||
|
|
||||||
// Presentation-only layer filter for the global /zeitstrahl (#780, REQ-001).
|
|
||||||
// Holds no timeline data and never navigates or fetches — the route owns the
|
|
||||||
// $state and derives the filtered view. Three $bindable layer booleans plus an
|
|
||||||
// onChange notification hook are the whole contract.
|
|
||||||
let {
|
|
||||||
personalOn = $bindable(true),
|
|
||||||
historicalOn = $bindable(true),
|
|
||||||
lettersOn = $bindable(true),
|
|
||||||
onChange
|
|
||||||
}: {
|
|
||||||
personalOn?: boolean;
|
|
||||||
historicalOn?: boolean;
|
|
||||||
lettersOn?: boolean;
|
|
||||||
onChange?: () => void;
|
|
||||||
} = $props();
|
|
||||||
|
|
||||||
let open = $state(false);
|
|
||||||
|
|
||||||
// Reuse the reduced-motion guard expression from documents/[id]/+page.svelte:57
|
|
||||||
// for a new purpose — zeroing the slide duration so the collapsible opens
|
|
||||||
// instantly when the reader prefers reduced motion (REQ-009).
|
|
||||||
const prefersReducedMotion = $derived(
|
|
||||||
typeof window !== 'undefined' && window.matchMedia('(prefers-reduced-motion: reduce)').matches
|
|
||||||
);
|
|
||||||
const slideDuration = $derived(prefersReducedMotion ? 0 : 200);
|
|
||||||
|
|
||||||
const filters: TimelineLayerFilters = $derived({ personalOn, historicalOn, lettersOn });
|
|
||||||
const hiddenCount = $derived(hiddenLayerCount(filters));
|
|
||||||
const anyLayerOff = $derived(!isDefaultState(filters));
|
|
||||||
|
|
||||||
function reset() {
|
|
||||||
personalOn = true;
|
|
||||||
historicalOn = true;
|
|
||||||
lettersOn = true;
|
|
||||||
onChange?.();
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
{#snippet layerToggle(label: string, testid: string, pressed: boolean, toggle: () => void)}
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
data-testid={testid}
|
|
||||||
aria-pressed={pressed}
|
|
||||||
onclick={toggle}
|
|
||||||
class="inline-flex min-h-[44px] items-center gap-2 rounded border px-3 font-sans text-sm transition-colors {pressed
|
|
||||||
? 'border-primary bg-primary text-primary-fg'
|
|
||||||
: 'border-line bg-muted text-ink-2 hover:bg-line'}"
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
aria-hidden="true"
|
|
||||||
class="inline-flex h-4 w-4 items-center justify-center rounded-sm border {pressed
|
|
||||||
? 'border-primary-fg bg-primary-fg/20'
|
|
||||||
: 'border-ink-3'}"
|
|
||||||
>
|
|
||||||
{#if pressed}✓{/if}
|
|
||||||
</span>
|
|
||||||
{label}
|
|
||||||
</button>
|
|
||||||
{/snippet}
|
|
||||||
|
|
||||||
<section class="mb-6">
|
|
||||||
<!-- Sticky trigger kept in document flow so the hidden-layer count stays
|
|
||||||
visible without clipping timeline content (REQ-007). -->
|
|
||||||
<div class="sticky top-16 z-20 bg-canvas py-2">
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
data-testid="timeline-filter-trigger"
|
|
||||||
aria-expanded={open}
|
|
||||||
aria-controls={open ? 'timeline-filter-panel' : undefined}
|
|
||||||
onclick={() => (open = !open)}
|
|
||||||
class="inline-flex min-h-[44px] items-center gap-2 rounded border border-line bg-surface px-4 font-sans text-xs font-bold tracking-widest text-ink-2 uppercase transition-colors hover:bg-muted"
|
|
||||||
>
|
|
||||||
{hiddenCount === 0
|
|
||||||
? m.timeline_filter_trigger()
|
|
||||||
: m.timeline_filter_trigger_active({ count: hiddenCount })}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{#if open}
|
|
||||||
<div id="timeline-filter-panel" transition:slide={{ duration: slideDuration }}>
|
|
||||||
<fieldset class="mt-2 rounded-sm border border-line bg-surface p-4">
|
|
||||||
<legend class="px-1 font-sans text-xs font-bold tracking-widest text-ink-3 uppercase">
|
|
||||||
{m.timeline_filter_label_layers()}
|
|
||||||
</legend>
|
|
||||||
<div class="flex flex-wrap gap-2">
|
|
||||||
{@render layerToggle(
|
|
||||||
m.timeline_filter_layer_personal(),
|
|
||||||
'timeline-filter-personal',
|
|
||||||
personalOn,
|
|
||||||
() => {
|
|
||||||
personalOn = !personalOn;
|
|
||||||
onChange?.();
|
|
||||||
}
|
|
||||||
)}
|
|
||||||
{@render layerToggle(
|
|
||||||
m.timeline_filter_layer_historical(),
|
|
||||||
'timeline-filter-historical',
|
|
||||||
historicalOn,
|
|
||||||
() => {
|
|
||||||
historicalOn = !historicalOn;
|
|
||||||
onChange?.();
|
|
||||||
}
|
|
||||||
)}
|
|
||||||
{@render layerToggle(
|
|
||||||
m.timeline_filter_layer_letters(),
|
|
||||||
'timeline-filter-letters',
|
|
||||||
lettersOn,
|
|
||||||
() => {
|
|
||||||
lettersOn = !lettersOn;
|
|
||||||
onChange?.();
|
|
||||||
}
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{#if anyLayerOff}
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
data-testid="timeline-filter-reset"
|
|
||||||
onclick={reset}
|
|
||||||
class="mt-3 inline-flex min-h-[44px] items-center font-sans text-sm text-primary underline-offset-2 hover:underline"
|
|
||||||
>
|
|
||||||
{m.timeline_filter_reset()}
|
|
||||||
</button>
|
|
||||||
{/if}
|
|
||||||
</fieldset>
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
</section>
|
|
||||||
@@ -1,74 +0,0 @@
|
|||||||
import { describe, it, expect, vi, afterEach } from 'vitest';
|
|
||||||
import { cleanup, render } from 'vitest-browser-svelte';
|
|
||||||
import { page } from 'vitest/browser';
|
|
||||||
import * as m from '$lib/paraglide/messages.js';
|
|
||||||
import TimelineFilters from './TimelineFilters.svelte';
|
|
||||||
|
|
||||||
afterEach(() => cleanup());
|
|
||||||
|
|
||||||
const allOn = () => ({ personalOn: true, historicalOn: true, lettersOn: true, onChange: vi.fn() });
|
|
||||||
|
|
||||||
async function openBar() {
|
|
||||||
await page.getByTestId('timeline-filter-trigger').click();
|
|
||||||
}
|
|
||||||
|
|
||||||
describe('TimelineFilters', () => {
|
|
||||||
it('renders the three layer toggles with accessible names inside a labelled group (REQ-001)', async () => {
|
|
||||||
render(TimelineFilters, allOn());
|
|
||||||
await openBar();
|
|
||||||
await expect
|
|
||||||
.element(page.getByRole('button', { name: m.timeline_filter_layer_personal() }))
|
|
||||||
.toBeVisible();
|
|
||||||
await expect
|
|
||||||
.element(page.getByRole('button', { name: m.timeline_filter_layer_historical() }))
|
|
||||||
.toBeVisible();
|
|
||||||
await expect
|
|
||||||
.element(page.getByRole('button', { name: m.timeline_filter_layer_letters() }))
|
|
||||||
.toBeVisible();
|
|
||||||
// the fieldset legend groups the toggles
|
|
||||||
await expect.element(page.getByText(m.timeline_filter_label_layers())).toBeVisible();
|
|
||||||
});
|
|
||||||
|
|
||||||
it('reflects a layer as pressed and flips it, firing onChange (REQ-001)', async () => {
|
|
||||||
const props = allOn();
|
|
||||||
render(TimelineFilters, props);
|
|
||||||
await openBar();
|
|
||||||
const personal = page.getByTestId('timeline-filter-personal');
|
|
||||||
await expect.element(personal).toHaveAttribute('aria-pressed', 'true');
|
|
||||||
await personal.click();
|
|
||||||
await expect.element(personal).toHaveAttribute('aria-pressed', 'false');
|
|
||||||
expect(props.onChange).toHaveBeenCalled();
|
|
||||||
});
|
|
||||||
|
|
||||||
it('shows a plain trigger when all layers are on and a count once a layer is hidden (REQ-007/010)', async () => {
|
|
||||||
render(TimelineFilters, allOn());
|
|
||||||
const trigger = page.getByTestId('timeline-filter-trigger');
|
|
||||||
await expect.element(trigger).toHaveTextContent(m.timeline_filter_trigger());
|
|
||||||
await expect.element(trigger).not.toHaveTextContent('aktiv');
|
|
||||||
await trigger.click();
|
|
||||||
await page.getByTestId('timeline-filter-letters').click();
|
|
||||||
await expect.element(trigger).toHaveTextContent(m.timeline_filter_trigger_active({ count: 1 }));
|
|
||||||
});
|
|
||||||
|
|
||||||
it('gives the trigger a 44px touch target (REQ-007)', async () => {
|
|
||||||
render(TimelineFilters, allOn());
|
|
||||||
await expect.element(page.getByTestId('timeline-filter-trigger')).toHaveClass(/min-h-\[44px\]/);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('hides the reset button by default and restores all layers when activated (REQ-008)', async () => {
|
|
||||||
const props = allOn();
|
|
||||||
render(TimelineFilters, props);
|
|
||||||
await openBar();
|
|
||||||
const reset = page.getByTestId('timeline-filter-reset');
|
|
||||||
// absent (not just hidden) while every layer is on
|
|
||||||
expect(reset.query()).toBeNull();
|
|
||||||
await page.getByTestId('timeline-filter-historical').click();
|
|
||||||
await expect.element(reset).toBeVisible();
|
|
||||||
await reset.click();
|
|
||||||
await expect
|
|
||||||
.element(page.getByTestId('timeline-filter-historical'))
|
|
||||||
.toHaveAttribute('aria-pressed', 'true');
|
|
||||||
await expect.poll(() => reset.query()).toBeNull();
|
|
||||||
expect(props.onChange).toHaveBeenCalled();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
@@ -6,7 +6,6 @@ import LetterCard from './LetterCard.svelte';
|
|||||||
import EventPill from './EventPill.svelte';
|
import EventPill from './EventPill.svelte';
|
||||||
import WorldBand from './WorldBand.svelte';
|
import WorldBand from './WorldBand.svelte';
|
||||||
import { entryKey } from './entryKey';
|
import { entryKey } from './entryKey';
|
||||||
import { buildEventLookup, type GroupingMode } from './timelineGrouping';
|
|
||||||
import type { components } from '$lib/generated/api';
|
import type { components } from '$lib/generated/api';
|
||||||
|
|
||||||
type TimelineDTO = components['schemas']['TimelineDTO'];
|
type TimelineDTO = components['schemas']['TimelineDTO'];
|
||||||
@@ -19,28 +18,8 @@ type TimelineYearDTO = components['schemas']['TimelineYearDTO'];
|
|||||||
* empty timeline shows a calm message (REQ-017). `personId` is a declared seam
|
* empty timeline shows a calm message (REQ-017). `personId` is a declared seam
|
||||||
* for the per-person rail (issue #10) and is undefined here; it is not passed to
|
* for the per-person rail (issue #10) and is undefined here; it is not passed to
|
||||||
* leaf cards (REQ-025). Owns no <main> — the layout does.
|
* leaf cards (REQ-025). Owns no <main> — the layout does.
|
||||||
*
|
|
||||||
* `groupingMode` (#827) flows down to each YearBand to re-bundle its loose letters;
|
|
||||||
* the event lookup — the curated events present in this (already layer-filtered)
|
|
||||||
* view — is resolved once here so Ereignis clusters never reference a filtered-out
|
|
||||||
* event (filter-then-group, REQ-019). The undated bucket renders unchanged in every
|
|
||||||
* mode (its letters have no year, so the per-year bucketing does not apply).
|
|
||||||
*/
|
*/
|
||||||
let {
|
let { timeline, personId = undefined }: { timeline: TimelineDTO; personId?: string } = $props();
|
||||||
timeline,
|
|
||||||
personId = undefined,
|
|
||||||
canWrite = false,
|
|
||||||
groupingMode = 'date'
|
|
||||||
}: {
|
|
||||||
timeline: TimelineDTO;
|
|
||||||
personId?: string;
|
|
||||||
canWrite?: boolean;
|
|
||||||
groupingMode?: GroupingMode;
|
|
||||||
} = $props();
|
|
||||||
|
|
||||||
const eventLookup = $derived(
|
|
||||||
groupingMode === 'date' ? new Map<string, string>() : buildEventLookup(timeline)
|
|
||||||
);
|
|
||||||
|
|
||||||
type Row = { t: 'band'; year: TimelineYearDTO } | { t: 'gap'; from: number; to: number };
|
type Row = { t: 'band'; year: TimelineYearDTO } | { t: 'gap'; from: number; to: number };
|
||||||
|
|
||||||
@@ -71,12 +50,7 @@ const isEmpty = $derived(timeline.years.length === 0 && timeline.undated.length
|
|||||||
{#each rows as row (row.t === 'band' ? `band-${row.year.year}` : `gap-${row.from}`)}
|
{#each rows as row (row.t === 'band' ? `band-${row.year.year}` : `gap-${row.from}`)}
|
||||||
<li>
|
<li>
|
||||||
{#if row.t === 'band'}
|
{#if row.t === 'band'}
|
||||||
<YearBand
|
<YearBand year={row.year} />
|
||||||
year={row.year}
|
|
||||||
canWrite={canWrite}
|
|
||||||
groupingMode={groupingMode}
|
|
||||||
eventLookup={eventLookup}
|
|
||||||
/>
|
|
||||||
{:else}
|
{:else}
|
||||||
<GapSpan from={row.from} to={row.to} />
|
<GapSpan from={row.from} to={row.to} />
|
||||||
{/if}
|
{/if}
|
||||||
@@ -101,9 +75,9 @@ const isEmpty = $derived(timeline.years.length === 0 && timeline.undated.length
|
|||||||
<li>
|
<li>
|
||||||
{#if entry.kind === 'EVENT'}
|
{#if entry.kind === 'EVENT'}
|
||||||
{#if entry.type === 'HISTORICAL'}
|
{#if entry.type === 'HISTORICAL'}
|
||||||
<WorldBand entry={entry} canWrite={canWrite} />
|
<WorldBand entry={entry} />
|
||||||
{:else}
|
{:else}
|
||||||
<EventPill entry={entry} canWrite={canWrite} />
|
<EventPill entry={entry} />
|
||||||
{/if}
|
{/if}
|
||||||
{:else}
|
{:else}
|
||||||
<LetterCard entry={entry} />
|
<LetterCard entry={entry} />
|
||||||
|
|||||||
@@ -105,7 +105,6 @@ describe('TimelineView', () => {
|
|||||||
|
|
||||||
it('renders an undated curated EVENT as a pill, not a broken letter card (REQ-008/016)', () => {
|
it('renders an undated curated EVENT as a pill, not a broken letter card (REQ-008/016)', () => {
|
||||||
render(TimelineView, {
|
render(TimelineView, {
|
||||||
canWrite: true,
|
|
||||||
timeline: makeTimelineDTO({
|
timeline: makeTimelineDTO({
|
||||||
undated: [
|
undated: [
|
||||||
makeEntry({
|
makeEntry({
|
||||||
@@ -126,8 +125,8 @@ describe('TimelineView', () => {
|
|||||||
// The event renders inside the undated section…
|
// The event renders inside the undated section…
|
||||||
expect(document.querySelector('[data-testid="undated-section"]')).not.toBeNull();
|
expect(document.querySelector('[data-testid="undated-section"]')).not.toBeNull();
|
||||||
expect(document.body.textContent).toContain('Auswanderung');
|
expect(document.body.textContent).toContain('Auswanderung');
|
||||||
// …as an EventPill (its edit affordance, threaded canWrite), never as a
|
// …as an EventPill (its edit affordance), never as a letter card linking
|
||||||
// letter card linking to /documents/undefined with "Unbekannt → Unbekannt".
|
// to /documents/undefined with "Unbekannt → Unbekannt".
|
||||||
expect(document.querySelector('[data-testid="event-edit"]')).not.toBeNull();
|
expect(document.querySelector('[data-testid="event-edit"]')).not.toBeNull();
|
||||||
expect(document.querySelector('a[href="/documents/undefined"]')).toBeNull();
|
expect(document.querySelector('a[href="/documents/undefined"]')).toBeNull();
|
||||||
expect(document.body.textContent).not.toContain('Unbekannt');
|
expect(document.body.textContent).not.toContain('Unbekannt');
|
||||||
@@ -277,68 +276,4 @@ describe('TimelineView', () => {
|
|||||||
);
|
);
|
||||||
expect(sides).toEqual(['left', 'right', 'left', 'right']);
|
expect(sides).toEqual(['left', 'right', 'left', 'right']);
|
||||||
});
|
});
|
||||||
|
|
||||||
// A curated PERSONAL event reachable through both dispatch paths: the year-band
|
|
||||||
// path (TimelineView → YearBand → EventPill) and the undated bucket
|
|
||||||
// (TimelineView → EventPill). canWrite must thread to both (REQ-009).
|
|
||||||
const curated = (eventId: string, title: string) =>
|
|
||||||
makeEntry({
|
|
||||||
kind: 'EVENT',
|
|
||||||
type: 'PERSONAL',
|
|
||||||
derived: false,
|
|
||||||
eventId,
|
|
||||||
title,
|
|
||||||
senderName: '',
|
|
||||||
receiverName: '',
|
|
||||||
documentId: undefined
|
|
||||||
});
|
|
||||||
|
|
||||||
const bothPaths = () =>
|
|
||||||
makeTimelineDTO({
|
|
||||||
years: [makeYear(1924, [curated('banded', 'Umzug nach Berlin')])],
|
|
||||||
undated: [curated('undated', 'Auswanderung')]
|
|
||||||
});
|
|
||||||
|
|
||||||
it('threads canWrite to a curated event in both a year band and the undated bucket (REQ-009)', () => {
|
|
||||||
render(TimelineView, { canWrite: true, timeline: bothPaths() });
|
|
||||||
const hrefs = Array.from(document.querySelectorAll('[data-testid="event-edit"]')).map((a) =>
|
|
||||||
a.getAttribute('href')
|
|
||||||
);
|
|
||||||
expect(hrefs).toContain('/zeitstrahl/events/banded/edit');
|
|
||||||
expect(hrefs).toContain('/zeitstrahl/events/undated/edit');
|
|
||||||
});
|
|
||||||
|
|
||||||
it('renders no edit links in either path when canWrite is false (REQ-007/009)', () => {
|
|
||||||
render(TimelineView, { canWrite: false, timeline: bothPaths() });
|
|
||||||
expect(document.querySelectorAll('[data-testid="event-edit"]')).toHaveLength(0);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('threads canWrite to a curated HISTORICAL world band in both paths (REQ-006/009)', () => {
|
|
||||||
const world = (eventId: string, title: string) =>
|
|
||||||
makeEntry({
|
|
||||||
kind: 'EVENT',
|
|
||||||
type: 'HISTORICAL',
|
|
||||||
derived: false,
|
|
||||||
eventId,
|
|
||||||
precision: 'YEAR',
|
|
||||||
eventDate: '1929-01-01',
|
|
||||||
eventDateEnd: undefined,
|
|
||||||
title,
|
|
||||||
senderName: '',
|
|
||||||
receiverName: '',
|
|
||||||
documentId: undefined
|
|
||||||
});
|
|
||||||
render(TimelineView, {
|
|
||||||
canWrite: true,
|
|
||||||
timeline: makeTimelineDTO({
|
|
||||||
years: [makeYear(1929, [world('wb', 'Weltwirtschaftskrise')])],
|
|
||||||
undated: [world('wu', 'Unbekanntes Weltereignis')]
|
|
||||||
})
|
|
||||||
});
|
|
||||||
const hrefs = Array.from(document.querySelectorAll('[data-testid="event-edit"]')).map((a) =>
|
|
||||||
a.getAttribute('href')
|
|
||||||
);
|
|
||||||
expect(hrefs).toContain('/zeitstrahl/events/wb/edit');
|
|
||||||
expect(hrefs).toContain('/zeitstrahl/events/wu/edit');
|
|
||||||
});
|
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -11,11 +11,9 @@ type TimelineEntryDTO = components['schemas']['TimelineEntryDTO'];
|
|||||||
* (REQ-009). A RANGE carries a visible span pill ("1914–1918") with a Zeitraum
|
* (REQ-009). A RANGE carries a visible span pill ("1914–1918") with a Zeitraum
|
||||||
* aria-label; a RANGE with no end degrades to the start year, no pill (REQ-010).
|
* aria-label; a RANGE with no end degrades to the start year, no pill (REQ-010).
|
||||||
* The glyph is a redundant non-color cue with an sr-only label (REQ-018); text
|
* The glyph is a redundant non-color cue with an sr-only label (REQ-018); text
|
||||||
* uses text-ink-2 to stay AA in both themes (REQ-019). A curator (`canWrite`,
|
* uses text-ink-2 to stay AA in both themes (REQ-019).
|
||||||
* gate-closed by default) gets an inline edit pencil for a curated event with an
|
|
||||||
* eventId — #842 REQ-006/007/008; UX gate only, the #781 route guard is the boundary.
|
|
||||||
*/
|
*/
|
||||||
let { entry, canWrite = false }: { entry: TimelineEntryDTO; canWrite?: boolean } = $props();
|
let { entry }: { entry: TimelineEntryDTO } = $props();
|
||||||
|
|
||||||
const config = $derived(getAccentConfig(entry));
|
const config = $derived(getAccentConfig(entry));
|
||||||
const dateLabel = $derived(timelineDateLabel(entry.eventDate, entry.precision, entry.eventDateEnd));
|
const dateLabel = $derived(timelineDateLabel(entry.eventDate, entry.precision, entry.eventDateEnd));
|
||||||
@@ -26,9 +24,6 @@ const dateText = $derived(showSpan ? null : entry.precision === 'RANGE' ? fromYe
|
|||||||
// Every WorldBand is a HISTORICAL band, so the visible "historisch" register
|
// Every WorldBand is a HISTORICAL band, so the visible "historisch" register
|
||||||
// always trails the subtitle as plain text — never a second pill (REQ-009).
|
// always trails the subtitle as plain text — never a second pill (REQ-009).
|
||||||
const historical = $derived(m.timeline_layer_historical_suffix());
|
const historical = $derived(m.timeline_layer_historical_suffix());
|
||||||
// A HISTORICAL event is never derived, so the edit gate is just the curator
|
|
||||||
// flag plus a real eventId (#842 REQ-006/008).
|
|
||||||
const canEdit = $derived(canWrite && entry.eventId != null);
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="my-3 border-y border-line bg-canvas px-4 py-2 text-center">
|
<div class="my-3 border-y border-line bg-canvas px-4 py-2 text-center">
|
||||||
@@ -51,14 +46,4 @@ const canEdit = $derived(canWrite && entry.eventId != null);
|
|||||||
<!-- Single trailing "· historisch" register, after the title and any
|
<!-- Single trailing "· historisch" register, after the title and any
|
||||||
span pill / date — one render site, consistent separator (REQ-009). -->
|
span pill / date — one render site, consistent separator (REQ-009). -->
|
||||||
<span class="ml-2 font-sans text-xs text-ink-3">· {historical}</span>
|
<span class="ml-2 font-sans text-xs text-ink-3">· {historical}</span>
|
||||||
{#if canEdit}
|
|
||||||
<a
|
|
||||||
data-testid="event-edit"
|
|
||||||
href="/zeitstrahl/events/{entry.eventId}/edit"
|
|
||||||
class="ml-2 rounded-sm px-1 font-sans text-xs text-ink-3 hover:text-brand-navy focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-navy"
|
|
||||||
>
|
|
||||||
<span aria-hidden="true">✎</span>
|
|
||||||
<span class="sr-only">{m.btn_edit()}</span>
|
|
||||||
</a>
|
|
||||||
{/if}
|
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -73,35 +73,4 @@ describe('WorldBand', () => {
|
|||||||
expect(pill?.textContent).not.toContain(m.timeline_layer_historical_suffix());
|
expect(pill?.textContent).not.toContain(m.timeline_layer_historical_suffix());
|
||||||
expect(document.body.textContent).toContain(m.timeline_layer_historical_suffix());
|
expect(document.body.textContent).toContain(m.timeline_layer_historical_suffix());
|
||||||
});
|
});
|
||||||
|
|
||||||
const HIST_EVENT_ID = '44444444-4444-4444-4444-444444444444';
|
|
||||||
|
|
||||||
it('shows an edit affordance for a curated HISTORICAL event when canWrite is true (REQ-006)', () => {
|
|
||||||
render(WorldBand, { canWrite: true, entry: historical({ eventId: HIST_EVENT_ID }) });
|
|
||||||
const edit = document.querySelector('[data-testid="event-edit"]') as HTMLAnchorElement | null;
|
|
||||||
expect(edit).not.toBeNull();
|
|
||||||
expect(edit?.getAttribute('href')).toBe(`/zeitstrahl/events/${HIST_EVENT_ID}/edit`);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('mirrors the EventPill pencil: aria-hidden ✎ glyph + sr-only Bearbeiten label (REQ-006)', () => {
|
|
||||||
render(WorldBand, { canWrite: true, entry: historical({ eventId: HIST_EVENT_ID }) });
|
|
||||||
const edit = document.querySelector('[data-testid="event-edit"]');
|
|
||||||
expect(edit?.querySelector('[aria-hidden="true"]')?.textContent).toBe('✎');
|
|
||||||
expect(edit?.querySelector('.sr-only')?.textContent).toBe(m.btn_edit());
|
|
||||||
});
|
|
||||||
|
|
||||||
it('renders no edit affordance for a curated HISTORICAL event when canWrite is false (REQ-007)', () => {
|
|
||||||
render(WorldBand, { canWrite: false, entry: historical({ eventId: HIST_EVENT_ID }) });
|
|
||||||
expect(document.querySelector('[data-testid="event-edit"]')).toBeNull();
|
|
||||||
});
|
|
||||||
|
|
||||||
it('renders no edit affordance when the canWrite prop is omitted (gate-closed default) (REQ-007)', () => {
|
|
||||||
render(WorldBand, { entry: historical({ eventId: HIST_EVENT_ID }) });
|
|
||||||
expect(document.querySelector('[data-testid="event-edit"]')).toBeNull();
|
|
||||||
});
|
|
||||||
|
|
||||||
it('shows no edit affordance when eventId is null even with canWrite (REQ-008)', () => {
|
|
||||||
render(WorldBand, { canWrite: true, entry: historical({ eventId: undefined }) });
|
|
||||||
expect(document.querySelector('[data-testid="event-edit"]')).toBeNull();
|
|
||||||
});
|
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -3,14 +3,8 @@ import EventPill from './EventPill.svelte';
|
|||||||
import WorldBand from './WorldBand.svelte';
|
import WorldBand from './WorldBand.svelte';
|
||||||
import LetterCard from './LetterCard.svelte';
|
import LetterCard from './LetterCard.svelte';
|
||||||
import YearLetterStrip from './YearLetterStrip.svelte';
|
import YearLetterStrip from './YearLetterStrip.svelte';
|
||||||
import LetterBucket from './LetterBucket.svelte';
|
|
||||||
import { isDense } from './timelineDensity';
|
import { isDense } from './timelineDensity';
|
||||||
import { entryKey } from './entryKey';
|
import { entryKey } from './entryKey';
|
||||||
import {
|
|
||||||
bucketLetters,
|
|
||||||
type GroupingMode,
|
|
||||||
type LetterBucket as LetterBucketModel
|
|
||||||
} from './timelineGrouping';
|
|
||||||
import type { components } from '$lib/generated/api';
|
import type { components } from '$lib/generated/api';
|
||||||
|
|
||||||
type TimelineYearDTO = components['schemas']['TimelineYearDTO'];
|
type TimelineYearDTO = components['schemas']['TimelineYearDTO'];
|
||||||
@@ -21,80 +15,19 @@ type TimelineEntryDTO = components['schemas']['TimelineEntryDTO'];
|
|||||||
* render in DTO order as pills/bands; letters render as individual cards while
|
* render in DTO order as pills/bands; letters render as individual cards while
|
||||||
* the band holds ≤ 12 (REQ-011) or collapse to a single density strip above that
|
* the band holds ≤ 12 (REQ-011) or collapse to a single density strip above that
|
||||||
* (REQ-012). Entries are never re-sorted — DTO order is preserved (REQ-003).
|
* (REQ-012). Entries are never re-sorted — DTO order is preserved (REQ-003).
|
||||||
*
|
|
||||||
* In Ereignis/Thema mode (#827) the event pills/world-bands render identically
|
|
||||||
* (REQ-001); only the loose letters re-bundle into per-year buckets below them
|
|
||||||
* (REQ-002/003/004). Datum mode is the original individual-card / density-strip
|
|
||||||
* path, untouched.
|
|
||||||
*/
|
*/
|
||||||
let {
|
let { year }: { year: TimelineYearDTO } = $props();
|
||||||
year,
|
|
||||||
canWrite = false,
|
|
||||||
groupingMode = 'date',
|
|
||||||
eventLookup = new Map<string, string>()
|
|
||||||
}: {
|
|
||||||
year: TimelineYearDTO;
|
|
||||||
canWrite?: boolean;
|
|
||||||
groupingMode?: GroupingMode;
|
|
||||||
eventLookup?: Map<string, string>;
|
|
||||||
} = $props();
|
|
||||||
|
|
||||||
type Row =
|
type Row =
|
||||||
| { t: 'event'; entry: TimelineEntryDTO }
|
| { t: 'event'; entry: TimelineEntryDTO }
|
||||||
| { t: 'eventcard'; entry: TimelineEntryDTO; bucket: LetterBucketModel }
|
|
||||||
| { t: 'letter'; entry: TimelineEntryDTO; side: 'left' | 'right' }
|
| { t: 'letter'; entry: TimelineEntryDTO; side: 'left' | 'right' }
|
||||||
| { t: 'strip' }
|
| { t: 'strip' };
|
||||||
| { t: 'bucket'; bucket: LetterBucketModel; nested: boolean };
|
|
||||||
|
|
||||||
const letters = $derived(year.entries.filter((e) => e.kind === 'LETTER'));
|
const letters = $derived(year.entries.filter((e) => e.kind === 'LETTER'));
|
||||||
const dense = $derived(isDense(letters.length));
|
const dense = $derived(isDense(letters.length));
|
||||||
const bucketMode = $derived(groupingMode === 'thema' ? 'thema' : 'event');
|
|
||||||
|
|
||||||
const rows = $derived.by<Row[]>(() => {
|
const rows = $derived.by<Row[]>(() => {
|
||||||
const out: Row[] = [];
|
const out: Row[] = [];
|
||||||
|
|
||||||
// Ereignis: events stay on the axis (REQ-001). A curated event WITH letters in this band
|
|
||||||
// becomes the contained card's header (no separate pill — its title reads once, #827
|
|
||||||
// redesign); a letterless/derived/world event stays a plain pill/band. A cluster whose event
|
|
||||||
// lives in another year band (or was filtered out) renders as a text-header card here, and
|
|
||||||
// the unlinked letters fall to the single "Weitere Briefe" drawer (REQ-003/006/019).
|
|
||||||
if (groupingMode === 'event') {
|
|
||||||
const buckets = bucketLetters(letters, 'event', eventLookup);
|
|
||||||
const sameYearBucket = (id: string | undefined) =>
|
|
||||||
id ? buckets.find((b) => b.kind === 'event' && b.key === `event:${id}`) : undefined;
|
|
||||||
for (const entry of year.entries) {
|
|
||||||
if (entry.kind !== 'EVENT') continue;
|
|
||||||
const bucket = sameYearBucket(entry.eventId);
|
|
||||||
// A curated event with same-year letters becomes the card header (card replaces pill);
|
|
||||||
// otherwise it stays a plain pill/world-band.
|
|
||||||
if (bucket) out.push({ t: 'eventcard', entry, bucket });
|
|
||||||
else out.push({ t: 'event', entry });
|
|
||||||
}
|
|
||||||
// Cross-year clusters (no matching event entry in this band) and the fallback drawer
|
|
||||||
// render after the axis entries, with their own text header.
|
|
||||||
for (const bucket of buckets) {
|
|
||||||
if (
|
|
||||||
bucket.kind === 'fallback' ||
|
|
||||||
!year.entries.some((e) => e.kind === 'EVENT' && `event:${e.eventId}` === bucket.key)
|
|
||||||
) {
|
|
||||||
out.push({ t: 'bucket', bucket, nested: false });
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return out;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Thema: events stay on the axis (REQ-001); loose letters re-bundle into per-year root-tag
|
|
||||||
// buckets below them (REQ-004) — no axis pill exists for a tag, so every bucket keeps a header.
|
|
||||||
if (groupingMode === 'thema') {
|
|
||||||
for (const entry of year.entries) {
|
|
||||||
if (entry.kind === 'EVENT') out.push({ t: 'event', entry });
|
|
||||||
}
|
|
||||||
for (const bucket of bucketLetters(letters, 'thema', eventLookup)) {
|
|
||||||
out.push({ t: 'bucket', bucket, nested: false });
|
|
||||||
}
|
|
||||||
return out;
|
|
||||||
}
|
|
||||||
|
|
||||||
let stripInserted = false;
|
let stripInserted = false;
|
||||||
let letterIndex = 0;
|
let letterIndex = 0;
|
||||||
for (const entry of year.entries) {
|
for (const entry of year.entries) {
|
||||||
@@ -110,12 +43,6 @@ const rows = $derived.by<Row[]>(() => {
|
|||||||
}
|
}
|
||||||
return out;
|
return out;
|
||||||
});
|
});
|
||||||
|
|
||||||
function rowKey(row: Row): string {
|
|
||||||
if (row.t === 'strip') return `strip-${year.year}`;
|
|
||||||
if (row.t === 'bucket') return row.bucket.key;
|
|
||||||
return entryKey(row.entry);
|
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<section class="py-2">
|
<section class="py-2">
|
||||||
@@ -129,28 +56,18 @@ function rowKey(row: Row): string {
|
|||||||
</h2>
|
</h2>
|
||||||
|
|
||||||
<div class="mt-3 space-y-3">
|
<div class="mt-3 space-y-3">
|
||||||
{#each rows as row (rowKey(row))}
|
{#each rows as row (row.t === 'strip' ? `strip-${year.year}` : entryKey(row.entry))}
|
||||||
{#if row.t === 'event'}
|
{#if row.t === 'event'}
|
||||||
{#if row.entry.type === 'HISTORICAL'}
|
{#if row.entry.type === 'HISTORICAL'}
|
||||||
<WorldBand entry={row.entry} canWrite={canWrite} />
|
<WorldBand entry={row.entry} />
|
||||||
{:else}
|
{:else}
|
||||||
<EventPill entry={row.entry} canWrite={canWrite} />
|
<EventPill entry={row.entry} />
|
||||||
{/if}
|
{/if}
|
||||||
{:else if row.t === 'eventcard'}
|
|
||||||
<LetterBucket
|
|
||||||
bucket={row.bucket}
|
|
||||||
mode="event"
|
|
||||||
year={year.year}
|
|
||||||
event={row.entry}
|
|
||||||
canWrite={canWrite}
|
|
||||||
/>
|
|
||||||
{:else if row.t === 'letter'}
|
{:else if row.t === 'letter'}
|
||||||
<div class="letter-row" data-side={row.side}>
|
<div class="letter-row" data-side={row.side}>
|
||||||
<span data-testid="letter-dot" class="letter-dot bg-surface" aria-hidden="true"></span>
|
<span data-testid="letter-dot" class="letter-dot bg-surface" aria-hidden="true"></span>
|
||||||
<LetterCard entry={row.entry} />
|
<LetterCard entry={row.entry} />
|
||||||
</div>
|
</div>
|
||||||
{:else if row.t === 'bucket'}
|
|
||||||
<LetterBucket bucket={row.bucket} mode={bucketMode} year={year.year} nested={row.nested} />
|
|
||||||
{:else}
|
{:else}
|
||||||
<YearLetterStrip letters={letters} year={year.year} />
|
<YearLetterStrip letters={letters} year={year.year} />
|
||||||
{/if}
|
{/if}
|
||||||
|
|||||||
@@ -165,100 +165,3 @@ describe('YearBand', () => {
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
describe('YearBand — grouping modes (#827)', () => {
|
|
||||||
it('keeps individual letter cards and no buckets in Datum mode (default)', () => {
|
|
||||||
render(YearBand, { year: makeYear(1915, manyLetters(1915, 3)) });
|
|
||||||
expect(document.querySelector('[data-testid="letter-bucket"]')).toBeNull();
|
|
||||||
expect(document.querySelectorAll('a')).toHaveLength(3);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('clusters loose letters under their linked event in Ereignis mode (REQ-002/003)', () => {
|
|
||||||
const a = makeEntry({ documentId: 'a', linkedEventId: 'e1', eventDate: '1915-03-01' });
|
|
||||||
const b = makeEntry({ documentId: 'b', linkedEventId: 'e1', eventDate: '1915-04-01' });
|
|
||||||
render(YearBand, {
|
|
||||||
year: makeYear(1915, [a, b]),
|
|
||||||
groupingMode: 'event',
|
|
||||||
eventLookup: new Map([['e1', 'Briefe von der Front']])
|
|
||||||
});
|
|
||||||
expect(document.querySelectorAll('[data-testid="letter-bucket"]')).toHaveLength(1);
|
|
||||||
expect(document.body.textContent).toContain('Briefe von der Front');
|
|
||||||
// no alternating individual letter rows in grouped mode
|
|
||||||
expect(document.querySelector('.letter-row')).toBeNull();
|
|
||||||
});
|
|
||||||
|
|
||||||
it('still renders the event world-band in Ereignis mode (REQ-001)', () => {
|
|
||||||
const band = makeEntry({
|
|
||||||
kind: 'EVENT',
|
|
||||||
type: 'HISTORICAL',
|
|
||||||
precision: 'RANGE',
|
|
||||||
eventDate: '1914-01-01',
|
|
||||||
eventDateEnd: '1918-12-31',
|
|
||||||
title: 'Erster Weltkrieg',
|
|
||||||
senderName: '',
|
|
||||||
receiverName: '',
|
|
||||||
documentId: undefined
|
|
||||||
});
|
|
||||||
const letter = makeEntry({ documentId: 'a', linkedEventId: 'e1', eventDate: '1914-05-01' });
|
|
||||||
render(YearBand, {
|
|
||||||
year: makeYear(1914, [band, letter]),
|
|
||||||
groupingMode: 'event',
|
|
||||||
eventLookup: new Map([['e1', 'Front']])
|
|
||||||
});
|
|
||||||
expect(document.querySelector('[data-testid="world-range"]')).not.toBeNull();
|
|
||||||
expect(document.querySelector('[data-testid="letter-bucket"]')).not.toBeNull();
|
|
||||||
});
|
|
||||||
|
|
||||||
it('buckets loose letters under their root tag in Thema mode (REQ-004)', () => {
|
|
||||||
const a = makeEntry({
|
|
||||||
documentId: 'a',
|
|
||||||
rootTagId: 't1',
|
|
||||||
rootTagName: 'Krieg',
|
|
||||||
rootTagColor: 'sienna',
|
|
||||||
eventDate: '1915-03-01'
|
|
||||||
});
|
|
||||||
render(YearBand, { year: makeYear(1915, [a]), groupingMode: 'thema', eventLookup: new Map() });
|
|
||||||
const chip = document.querySelector('[data-testid="bucket-header-chip"]');
|
|
||||||
expect(chip?.textContent).toContain('Krieg');
|
|
||||||
});
|
|
||||||
|
|
||||||
it('renders a same-year curated event as one card header, with no separate pill and no duplicate title (#827)', () => {
|
|
||||||
const pill = makeEntry({
|
|
||||||
kind: 'EVENT',
|
|
||||||
type: 'PERSONAL',
|
|
||||||
derived: false,
|
|
||||||
eventId: 'e1',
|
|
||||||
title: 'Ein gewaltiger Stadtbrand',
|
|
||||||
eventDate: '1916-07-06',
|
|
||||||
senderName: '',
|
|
||||||
receiverName: '',
|
|
||||||
documentId: undefined
|
|
||||||
});
|
|
||||||
const letter = makeEntry({ documentId: 'a', linkedEventId: 'e1', eventDate: '1916-07-06' });
|
|
||||||
render(YearBand, {
|
|
||||||
year: makeYear(1916, [pill, letter]),
|
|
||||||
groupingMode: 'event',
|
|
||||||
eventLookup: new Map([['e1', 'Ein gewaltiger Stadtbrand']]),
|
|
||||||
canWrite: true
|
|
||||||
});
|
|
||||||
// the title appears exactly once — in the card header, not also as a separate pill
|
|
||||||
const occurrences =
|
|
||||||
(document.body.textContent ?? '').split('Ein gewaltiger Stadtbrand').length - 1;
|
|
||||||
expect(occurrences).toBe(1);
|
|
||||||
// the event renders as the card header, with its letter clustered inside
|
|
||||||
expect(document.querySelector('[data-testid="bucket-event-header"]')).not.toBeNull();
|
|
||||||
expect(document.querySelector('a.lcard.ev')).not.toBeNull();
|
|
||||||
});
|
|
||||||
|
|
||||||
it('keeps a header on an event cluster whose pill is in another year (#827)', () => {
|
|
||||||
// the letter links to e1, but e1's pill lives in a different band — so the cluster
|
|
||||||
// keeps its own header here (no pill nearby to duplicate).
|
|
||||||
const letter = makeEntry({ documentId: 'a', linkedEventId: 'e1', eventDate: '1917-02-01' });
|
|
||||||
render(YearBand, {
|
|
||||||
year: makeYear(1917, [letter]),
|
|
||||||
groupingMode: 'event',
|
|
||||||
eventLookup: new Map([['e1', 'Briefe von der Front']])
|
|
||||||
});
|
|
||||||
expect(document.body.textContent).toContain('Briefe von der Front');
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|||||||
@@ -1,98 +0,0 @@
|
|||||||
import { describe, it, expect, afterEach } from 'vitest';
|
|
||||||
import { cleanup, render } from 'vitest-browser-svelte';
|
|
||||||
import TimelineView from './TimelineView.svelte';
|
|
||||||
import { makeEntry, makeYear, makeTimelineDTO } from './test-factories';
|
|
||||||
import type { GroupingMode } from './timelineGrouping';
|
|
||||||
|
|
||||||
afterEach(() => cleanup());
|
|
||||||
|
|
||||||
const worldBand = (title: string) =>
|
|
||||||
makeEntry({
|
|
||||||
kind: 'EVENT',
|
|
||||||
type: 'HISTORICAL',
|
|
||||||
derived: false,
|
|
||||||
precision: 'RANGE',
|
|
||||||
eventDate: '1914-01-01',
|
|
||||||
eventDateEnd: '1918-12-31',
|
|
||||||
eventId: 'h1',
|
|
||||||
title,
|
|
||||||
senderName: '',
|
|
||||||
receiverName: '',
|
|
||||||
documentId: undefined
|
|
||||||
});
|
|
||||||
|
|
||||||
const eventPill = (title: string) =>
|
|
||||||
makeEntry({
|
|
||||||
kind: 'EVENT',
|
|
||||||
type: 'PERSONAL',
|
|
||||||
derived: false,
|
|
||||||
eventId: 'p1',
|
|
||||||
title,
|
|
||||||
senderName: '',
|
|
||||||
receiverName: '',
|
|
||||||
documentId: undefined
|
|
||||||
});
|
|
||||||
|
|
||||||
// A signature of the axis-fixed event layer: the curated/world-band titles, the world-range
|
|
||||||
// marker count, and the event-pill count — everything REQ-001 requires to stay constant when
|
|
||||||
// only the loose letters re-bundle. (No pixel-diff harness in the repo; this is the structural
|
|
||||||
// equivalent — the event-layer DOM is byte-for-byte built from the same entries in every mode.)
|
|
||||||
function eventLayerSignature(): string {
|
|
||||||
const body = document.body.textContent ?? '';
|
|
||||||
return JSON.stringify({
|
|
||||||
weltkrieg: body.includes('Erster Weltkrieg'),
|
|
||||||
hochzeit: body.includes('Hochzeit'),
|
|
||||||
worldRange: document.querySelectorAll('[data-testid="world-range"]').length
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// Brief A links to the curated event p1 (Hochzeit), not the world band — so the world band
|
|
||||||
// stays letterless and renders as a plain band in every mode (REQ-001). Under the #827 redesign
|
|
||||||
// a curated event WITH letters becomes its cluster card's header, so the signature tracks the
|
|
||||||
// stable layer: the letterless world band's marker count and the two titles, which all survive
|
|
||||||
// regardless of whether Hochzeit renders as a pill (Datum) or a card header (grouped).
|
|
||||||
const mixed = () =>
|
|
||||||
makeTimelineDTO({
|
|
||||||
years: [
|
|
||||||
makeYear(1915, [
|
|
||||||
worldBand('Erster Weltkrieg'),
|
|
||||||
eventPill('Hochzeit'),
|
|
||||||
makeEntry({ documentId: 'a', title: 'Brief A', linkedEventId: 'p1' }),
|
|
||||||
makeEntry({
|
|
||||||
documentId: 'b',
|
|
||||||
title: 'Brief B',
|
|
||||||
rootTagId: 't1',
|
|
||||||
rootTagName: 'Krieg',
|
|
||||||
rootTagColor: 'sienna'
|
|
||||||
})
|
|
||||||
])
|
|
||||||
]
|
|
||||||
});
|
|
||||||
|
|
||||||
function signatureFor(mode: GroupingMode): string {
|
|
||||||
render(TimelineView, { timeline: mixed(), groupingMode: mode });
|
|
||||||
const sig = eventLayerSignature();
|
|
||||||
cleanup();
|
|
||||||
return sig;
|
|
||||||
}
|
|
||||||
|
|
||||||
describe('TimelineView event layer (REQ-001)', () => {
|
|
||||||
it('renders the event pills and world-bands identically across all three grouping modes', () => {
|
|
||||||
const dateSig = signatureFor('date');
|
|
||||||
const eventSig = signatureFor('event');
|
|
||||||
const themaSig = signatureFor('thema');
|
|
||||||
|
|
||||||
expect(eventSig).toBe(dateSig);
|
|
||||||
expect(themaSig).toBe(dateSig);
|
|
||||||
// sanity: the world-band actually rendered, so the assertion is not vacuously equal on ""
|
|
||||||
expect(dateSig).toContain('"worldRange":1');
|
|
||||||
});
|
|
||||||
|
|
||||||
it('regroups only the loose letters — buckets appear off Datum, not in it', () => {
|
|
||||||
render(TimelineView, { timeline: mixed(), groupingMode: 'date' });
|
|
||||||
expect(document.querySelector('[data-testid="letter-bucket"]')).toBeNull();
|
|
||||||
cleanup();
|
|
||||||
render(TimelineView, { timeline: mixed(), groupingMode: 'event' });
|
|
||||||
expect(document.querySelector('[data-testid="letter-bucket"]')).not.toBeNull();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
@@ -1,23 +0,0 @@
|
|||||||
import { describe, it, expect } from 'vitest';
|
|
||||||
import { readdirSync, readFileSync } from 'node:fs';
|
|
||||||
import { fileURLToPath } from 'node:url';
|
|
||||||
import { dirname, join } from 'node:path';
|
|
||||||
|
|
||||||
const timelineDir = dirname(fileURLToPath(import.meta.url));
|
|
||||||
|
|
||||||
/**
|
|
||||||
* REQ-009 / CWE-79: the regroup touches every component under lib/timeline (the reused TagChip,
|
|
||||||
* the .lcard.ev card, and the new tinted bucket-header chip). Curator/import-derived text must
|
|
||||||
* always render through Svelte's default `{...}` escaping — never `{@html}`. This grep gate fails
|
|
||||||
* loudly the moment any timeline component reaches for the raw-HTML directive.
|
|
||||||
*/
|
|
||||||
describe('lib/timeline never uses {@html} (REQ-009)', () => {
|
|
||||||
it('no timeline component contains the raw-HTML directive', () => {
|
|
||||||
const components = readdirSync(timelineDir).filter((file) => file.endsWith('.svelte'));
|
|
||||||
expect(components.length).toBeGreaterThan(0);
|
|
||||||
const offenders = components.filter((file) =>
|
|
||||||
readFileSync(join(timelineDir, file), 'utf8').includes('{@html')
|
|
||||||
);
|
|
||||||
expect(offenders).toEqual([]);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
@@ -1,151 +0,0 @@
|
|||||||
import { describe, it, expect } from 'vitest';
|
|
||||||
import {
|
|
||||||
isDefaultState,
|
|
||||||
hiddenLayerCount,
|
|
||||||
filterTimeline,
|
|
||||||
ALL_LAYERS_ON,
|
|
||||||
type TimelineLayerFilters
|
|
||||||
} from './timelineFilter';
|
|
||||||
import { makeEntry, makeYear, makeTimelineDTO } from './test-factories';
|
|
||||||
|
|
||||||
// Entry factories pinned to the three layers the filter discriminates (#780).
|
|
||||||
const letter = (overrides = {}) => makeEntry({ kind: 'LETTER', ...overrides });
|
|
||||||
|
|
||||||
const curatedPersonal = (overrides = {}) =>
|
|
||||||
makeEntry({
|
|
||||||
kind: 'EVENT',
|
|
||||||
type: 'PERSONAL',
|
|
||||||
derived: false,
|
|
||||||
documentId: undefined,
|
|
||||||
title: 'Umzug nach Berlin',
|
|
||||||
senderName: '',
|
|
||||||
receiverName: '',
|
|
||||||
...overrides
|
|
||||||
});
|
|
||||||
|
|
||||||
// Derived life-events carry type=PERSONAL (issue #776 REQ-009) — they belong to
|
|
||||||
// the Personal layer, not a fourth one.
|
|
||||||
const derivedLifeEvent = (overrides = {}) =>
|
|
||||||
makeEntry({
|
|
||||||
kind: 'EVENT',
|
|
||||||
type: 'PERSONAL',
|
|
||||||
derived: true,
|
|
||||||
derivedType: 'BIRTH',
|
|
||||||
documentId: undefined,
|
|
||||||
title: 'Geburt',
|
|
||||||
senderName: '',
|
|
||||||
receiverName: '',
|
|
||||||
...overrides
|
|
||||||
});
|
|
||||||
|
|
||||||
const historical = (overrides = {}) =>
|
|
||||||
makeEntry({
|
|
||||||
kind: 'EVENT',
|
|
||||||
type: 'HISTORICAL',
|
|
||||||
derived: false,
|
|
||||||
documentId: undefined,
|
|
||||||
title: 'Erster Weltkrieg',
|
|
||||||
senderName: '',
|
|
||||||
receiverName: '',
|
|
||||||
...overrides
|
|
||||||
});
|
|
||||||
|
|
||||||
const off = (overrides: Partial<TimelineLayerFilters>): TimelineLayerFilters => ({
|
|
||||||
...ALL_LAYERS_ON,
|
|
||||||
...overrides
|
|
||||||
});
|
|
||||||
|
|
||||||
describe('isDefaultState (REQ-007)', () => {
|
|
||||||
it('is true when all three layers are on', () => {
|
|
||||||
expect(isDefaultState(ALL_LAYERS_ON)).toBe(true);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('is false when any single layer is off', () => {
|
|
||||||
expect(isDefaultState(off({ personalOn: false }))).toBe(false);
|
|
||||||
expect(isDefaultState(off({ historicalOn: false }))).toBe(false);
|
|
||||||
expect(isDefaultState(off({ lettersOn: false }))).toBe(false);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
describe('hiddenLayerCount (REQ-007)', () => {
|
|
||||||
it('is 0 in the default all-on state', () => {
|
|
||||||
expect(hiddenLayerCount(ALL_LAYERS_ON)).toBe(0);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('counts each layer that is off', () => {
|
|
||||||
expect(hiddenLayerCount(off({ lettersOn: false }))).toBe(1);
|
|
||||||
expect(hiddenLayerCount(off({ personalOn: false, historicalOn: false }))).toBe(2);
|
|
||||||
expect(hiddenLayerCount({ personalOn: false, historicalOn: false, lettersOn: false })).toBe(3);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
describe('filterTimeline', () => {
|
|
||||||
it('returns every entry unchanged in the default all-on state', () => {
|
|
||||||
const dto = makeTimelineDTO({
|
|
||||||
years: [makeYear(1915, [letter(), historical(), curatedPersonal()])],
|
|
||||||
undated: [letter({ documentId: 'u1' })]
|
|
||||||
});
|
|
||||||
const result = filterTimeline(dto, ALL_LAYERS_ON);
|
|
||||||
expect(result.years[0].entries).toHaveLength(3);
|
|
||||||
expect(result.undated).toHaveLength(1);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('hides LETTER entries when lettersOn is false, keeping events (REQ-005)', () => {
|
|
||||||
const dto = makeTimelineDTO({
|
|
||||||
years: [makeYear(1915, [letter(), historical(), curatedPersonal()])],
|
|
||||||
undated: [letter({ documentId: 'u1' })]
|
|
||||||
});
|
|
||||||
const result = filterTimeline(dto, off({ lettersOn: false }));
|
|
||||||
expect(result.years[0].entries.every((e) => e.kind !== 'LETTER')).toBe(true);
|
|
||||||
expect(result.years[0].entries).toHaveLength(2);
|
|
||||||
expect(result.undated).toHaveLength(0);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('hides HISTORICAL events when historicalOn is false, keeping personal + letters (REQ-004)', () => {
|
|
||||||
const dto = makeTimelineDTO({
|
|
||||||
years: [makeYear(1915, [letter(), historical(), curatedPersonal(), derivedLifeEvent()])]
|
|
||||||
});
|
|
||||||
const result = filterTimeline(dto, off({ historicalOn: false }));
|
|
||||||
const kept = result.years[0].entries;
|
|
||||||
expect(kept.some((e) => e.kind === 'EVENT' && e.type === 'HISTORICAL')).toBe(false);
|
|
||||||
expect(kept.some((e) => e.kind === 'LETTER')).toBe(true);
|
|
||||||
expect(kept.some((e) => e.kind === 'EVENT' && e.type === 'PERSONAL')).toBe(true);
|
|
||||||
expect(kept).toHaveLength(3);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('hides personal events — curated and derived — when personalOn is false (REQ-003)', () => {
|
|
||||||
const dto = makeTimelineDTO({
|
|
||||||
years: [makeYear(1915, [letter(), historical(), curatedPersonal(), derivedLifeEvent()])]
|
|
||||||
});
|
|
||||||
const result = filterTimeline(dto, off({ personalOn: false }));
|
|
||||||
const kept = result.years[0].entries;
|
|
||||||
// neither the curated PERSONAL event nor the derived life-event survives
|
|
||||||
expect(kept.some((e) => e.kind === 'EVENT' && e.type === 'PERSONAL')).toBe(false);
|
|
||||||
expect(kept.some((e) => e.derived)).toBe(false);
|
|
||||||
// historical events and letters are untouched
|
|
||||||
expect(kept.some((e) => e.kind === 'EVENT' && e.type === 'HISTORICAL')).toBe(true);
|
|
||||||
expect(kept.some((e) => e.kind === 'LETTER')).toBe(true);
|
|
||||||
expect(kept).toHaveLength(2);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('drops year bands that become empty and filters the undated bucket (REQ-006)', () => {
|
|
||||||
const dto = makeTimelineDTO({
|
|
||||||
years: [
|
|
||||||
makeYear(1915, [letter()]), // becomes empty when letters are hidden
|
|
||||||
makeYear(1918, [historical()]) // survives
|
|
||||||
],
|
|
||||||
undated: [letter({ documentId: 'u1' }), historical({ documentId: undefined })]
|
|
||||||
});
|
|
||||||
const result = filterTimeline(dto, off({ lettersOn: false }));
|
|
||||||
expect(result.years).toHaveLength(1);
|
|
||||||
expect(result.years[0].year).toBe(1918);
|
|
||||||
expect(result.undated.every((e) => e.kind !== 'LETTER')).toBe(true);
|
|
||||||
expect(result.undated).toHaveLength(1);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('does not mutate the input timeline', () => {
|
|
||||||
const dto = makeTimelineDTO({ years: [makeYear(1915, [letter(), historical()])] });
|
|
||||||
filterTimeline(dto, off({ lettersOn: false }));
|
|
||||||
expect(dto.years[0].entries).toHaveLength(2);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
@@ -1,63 +0,0 @@
|
|||||||
import type { components } from '$lib/generated/api';
|
|
||||||
|
|
||||||
type TimelineDTO = components['schemas']['TimelineDTO'];
|
|
||||||
type TimelineEntryDTO = components['schemas']['TimelineEntryDTO'];
|
|
||||||
|
|
||||||
/**
|
|
||||||
* The three visibility layers a reader can toggle on the global `/zeitstrahl`
|
|
||||||
* (#780). Purely a presentation concern — the whole timeline is loaded once by
|
|
||||||
* #779; these toggles derive a client-side filtered view of it.
|
|
||||||
*/
|
|
||||||
export interface TimelineLayerFilters {
|
|
||||||
/** Personal events — curated `PERSONAL` events and derived life-events. */
|
|
||||||
personalOn: boolean;
|
|
||||||
/** Historical events (`type === 'HISTORICAL'`). */
|
|
||||||
historicalOn: boolean;
|
|
||||||
/** Letters (`kind === 'LETTER'`). */
|
|
||||||
lettersOn: boolean;
|
|
||||||
}
|
|
||||||
|
|
||||||
/** The default view: every layer visible. */
|
|
||||||
export const ALL_LAYERS_ON: TimelineLayerFilters = {
|
|
||||||
personalOn: true,
|
|
||||||
historicalOn: true,
|
|
||||||
lettersOn: true
|
|
||||||
};
|
|
||||||
|
|
||||||
/** True when no layer is hidden — the default, all-on state (REQ-007). */
|
|
||||||
export function isDefaultState(filters: TimelineLayerFilters): boolean {
|
|
||||||
return filters.personalOn && filters.historicalOn && filters.lettersOn;
|
|
||||||
}
|
|
||||||
|
|
||||||
/** How many layers are currently hidden — the "N active" trigger count (REQ-007). */
|
|
||||||
export function hiddenLayerCount(filters: TimelineLayerFilters): number {
|
|
||||||
return (
|
|
||||||
(filters.personalOn ? 0 : 1) + (filters.historicalOn ? 0 : 1) + (filters.lettersOn ? 0 : 1)
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Decides whether one entry survives the active layer toggles. A letter rides
|
|
||||||
* the Letters layer; a historical event the Historical layer; everything else
|
|
||||||
* (curated `PERSONAL` events and derived life-events, which also carry
|
|
||||||
* `type === 'PERSONAL'`) the Personal layer.
|
|
||||||
*/
|
|
||||||
function isVisible(entry: TimelineEntryDTO, filters: TimelineLayerFilters): boolean {
|
|
||||||
if (entry.kind === 'LETTER') return filters.lettersOn;
|
|
||||||
if (entry.type === 'HISTORICAL') return filters.historicalOn;
|
|
||||||
return filters.personalOn;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Derives a client-side filtered copy of the timeline (REQ-003/004/005/006).
|
|
||||||
* Year bands left empty by the active toggles are dropped so `TimelineView`
|
|
||||||
* never renders a hollow band, and the undated bucket is filtered the same way.
|
|
||||||
* Pure — the input DTO is never mutated.
|
|
||||||
*/
|
|
||||||
export function filterTimeline(timeline: TimelineDTO, filters: TimelineLayerFilters): TimelineDTO {
|
|
||||||
const years = timeline.years
|
|
||||||
.map((band) => ({ ...band, entries: band.entries.filter((e) => isVisible(e, filters)) }))
|
|
||||||
.filter((band) => band.entries.length > 0);
|
|
||||||
const undated = timeline.undated.filter((e) => isVisible(e, filters));
|
|
||||||
return { years, undated };
|
|
||||||
}
|
|
||||||
@@ -1,37 +0,0 @@
|
|||||||
import { describe, it, expect } from 'vitest';
|
|
||||||
import { readFileSync } from 'node:fs';
|
|
||||||
import { fileURLToPath } from 'node:url';
|
|
||||||
|
|
||||||
// REQ-001/002: the layer filter is presentation-only and fully client-side. It
|
|
||||||
// must never navigate or fetch — the route derives the filtered view from
|
|
||||||
// already-loaded data. This static guard mirrors the project's existing
|
|
||||||
// grep-gates (e.g. the no-`{@html}` checks) and fails the build if a future
|
|
||||||
// edit reintroduces navigation or a network call into either file.
|
|
||||||
const read = (relative: string) =>
|
|
||||||
readFileSync(fileURLToPath(new URL(relative, import.meta.url)), 'utf8');
|
|
||||||
|
|
||||||
const FILES = {
|
|
||||||
'TimelineFilters.svelte': read('./TimelineFilters.svelte'),
|
|
||||||
'/zeitstrahl/+page.svelte': read('../../routes/zeitstrahl/+page.svelte')
|
|
||||||
};
|
|
||||||
|
|
||||||
const FORBIDDEN: { label: string; pattern: RegExp }[] = [
|
|
||||||
{ label: 'goto(', pattern: /\bgoto\s*\(/ },
|
|
||||||
{ label: 'url.searchParams', pattern: /url\.searchParams/ },
|
|
||||||
{ label: 'api.GET', pattern: /\bapi\.GET\b/ },
|
|
||||||
{ label: 'fetch(', pattern: /\bfetch\s*\(/ }
|
|
||||||
];
|
|
||||||
|
|
||||||
describe('layer-filter boundary (REQ-001/002)', () => {
|
|
||||||
for (const [name, source] of Object.entries(FILES)) {
|
|
||||||
it(`${name} was found and is non-empty`, () => {
|
|
||||||
expect(source.length).toBeGreaterThan(0);
|
|
||||||
});
|
|
||||||
|
|
||||||
for (const { label, pattern } of FORBIDDEN) {
|
|
||||||
it(`${name} contains no ${label}`, () => {
|
|
||||||
expect(pattern.test(source), `${name} must not use ${label}`).toBe(false);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
@@ -1,157 +0,0 @@
|
|||||||
import { describe, it, expect } from 'vitest';
|
|
||||||
import { buildEventLookup, bucketLetters, hasLooseLetters } from './timelineGrouping';
|
|
||||||
import { makeEntry, makeYear, makeTimelineDTO } from './test-factories';
|
|
||||||
|
|
||||||
// Entry factories pinned to the shapes the grouping transform discriminates (#827).
|
|
||||||
const letter = (overrides = {}) => makeEntry({ kind: 'LETTER', ...overrides });
|
|
||||||
|
|
||||||
const curatedEvent = (id: string, title: string, overrides = {}) =>
|
|
||||||
makeEntry({
|
|
||||||
kind: 'EVENT',
|
|
||||||
type: 'PERSONAL',
|
|
||||||
derived: false,
|
|
||||||
documentId: undefined,
|
|
||||||
eventId: id,
|
|
||||||
title,
|
|
||||||
senderName: '',
|
|
||||||
receiverName: '',
|
|
||||||
...overrides
|
|
||||||
});
|
|
||||||
|
|
||||||
describe('buildEventLookup (REQ-019)', () => {
|
|
||||||
it('collects curated events (eventId set) from year bands and the undated bucket', () => {
|
|
||||||
const dto = makeTimelineDTO({
|
|
||||||
years: [makeYear(1915, [curatedEvent('e1', 'Briefe von der Front'), letter()])],
|
|
||||||
undated: [curatedEvent('e2', 'Unbekanntes Ereignis')]
|
|
||||||
});
|
|
||||||
const lookup = buildEventLookup(dto);
|
|
||||||
expect(lookup.get('e1')).toBe('Briefe von der Front');
|
|
||||||
expect(lookup.get('e2')).toBe('Unbekanntes Ereignis');
|
|
||||||
expect(lookup.size).toBe(2);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('ignores letters and derived life-events (no eventId)', () => {
|
|
||||||
const dto = makeTimelineDTO({
|
|
||||||
years: [
|
|
||||||
makeYear(1915, [
|
|
||||||
letter({ linkedEventId: 'e1' }),
|
|
||||||
makeEntry({ kind: 'EVENT', type: 'PERSONAL', derived: true, eventId: undefined })
|
|
||||||
])
|
|
||||||
]
|
|
||||||
});
|
|
||||||
expect(buildEventLookup(dto).size).toBe(0);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
describe('hasLooseLetters (REQ-018)', () => {
|
|
||||||
it('is true when a year band or the undated bucket holds a letter', () => {
|
|
||||||
expect(hasLooseLetters(makeTimelineDTO({ years: [makeYear(1915, [letter()])] }))).toBe(true);
|
|
||||||
expect(hasLooseLetters(makeTimelineDTO({ undated: [letter({ documentId: 'u1' })] }))).toBe(
|
|
||||||
true
|
|
||||||
);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('is false when only events remain', () => {
|
|
||||||
const dto = makeTimelineDTO({ years: [makeYear(1915, [curatedEvent('e1', 'Ereignis')])] });
|
|
||||||
expect(hasLooseLetters(dto)).toBe(false);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
describe('bucketLetters — Ereignis mode (REQ-003/006/019)', () => {
|
|
||||||
const lookup = new Map([
|
|
||||||
['e1', 'Briefe von der Front'],
|
|
||||||
['e2', 'Weihnachten 1915']
|
|
||||||
]);
|
|
||||||
|
|
||||||
it('clusters letters under the curated event named by linkedEventId, with matching counts', () => {
|
|
||||||
const letters = [
|
|
||||||
letter({ documentId: 'a', linkedEventId: 'e1' }),
|
|
||||||
letter({ documentId: 'b', linkedEventId: 'e1' }),
|
|
||||||
letter({ documentId: 'c', linkedEventId: 'e2' })
|
|
||||||
];
|
|
||||||
const buckets = bucketLetters(letters, 'event', lookup);
|
|
||||||
const front = buckets.find((b) => b.title === 'Briefe von der Front');
|
|
||||||
expect(front?.kind).toBe('event');
|
|
||||||
expect(front?.letters).toHaveLength(2);
|
|
||||||
expect(buckets.find((b) => b.title === 'Weihnachten 1915')?.letters).toHaveLength(1);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('drops a letter with no linkedEventId into the fallback bucket (REQ-006)', () => {
|
|
||||||
const letters = [letter({ documentId: 'a', linkedEventId: undefined })];
|
|
||||||
const buckets = bucketLetters(letters, 'event', lookup);
|
|
||||||
expect(buckets).toHaveLength(1);
|
|
||||||
expect(buckets[0].kind).toBe('fallback');
|
|
||||||
expect(buckets[0].letters).toHaveLength(1);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('drops a letter whose linked event is absent from the lookup into fallback (REQ-019)', () => {
|
|
||||||
// e9 is not in the filtered view (its layer was toggled off) → no cluster.
|
|
||||||
const letters = [letter({ documentId: 'a', linkedEventId: 'e9' })];
|
|
||||||
const buckets = bucketLetters(letters, 'event', lookup);
|
|
||||||
expect(buckets).toHaveLength(1);
|
|
||||||
expect(buckets[0].kind).toBe('fallback');
|
|
||||||
});
|
|
||||||
|
|
||||||
it('keeps the fallback bucket last', () => {
|
|
||||||
const letters = [
|
|
||||||
letter({ documentId: 'a', linkedEventId: undefined }),
|
|
||||||
letter({ documentId: 'b', linkedEventId: 'e1' })
|
|
||||||
];
|
|
||||||
const buckets = bucketLetters(letters, 'event', lookup);
|
|
||||||
expect(buckets[buckets.length - 1].kind).toBe('fallback');
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
describe('bucketLetters — Thema mode (REQ-004/007/008)', () => {
|
|
||||||
const noEvents = new Map<string, string>();
|
|
||||||
|
|
||||||
it('buckets letters under their primary root tag with name and colour', () => {
|
|
||||||
const letters = [
|
|
||||||
letter({ documentId: 'a', rootTagId: 't1', rootTagName: 'Krieg', rootTagColor: 'sienna' }),
|
|
||||||
letter({ documentId: 'b', rootTagId: 't1', rootTagName: 'Krieg', rootTagColor: 'sienna' }),
|
|
||||||
letter({
|
|
||||||
documentId: 'c',
|
|
||||||
rootTagId: 't2',
|
|
||||||
rootTagName: 'Weihnachten',
|
|
||||||
rootTagColor: 'amber'
|
|
||||||
})
|
|
||||||
];
|
|
||||||
const buckets = bucketLetters(letters, 'thema', noEvents);
|
|
||||||
const krieg = buckets.find((b) => b.title === 'Krieg');
|
|
||||||
expect(krieg?.kind).toBe('tag');
|
|
||||||
expect(krieg?.color).toBe('sienna');
|
|
||||||
expect(krieg?.letters).toHaveLength(2);
|
|
||||||
expect(buckets.find((b) => b.title === 'Weihnachten')?.color).toBe('amber');
|
|
||||||
});
|
|
||||||
|
|
||||||
it('drops an untagged letter into the "Ohne Thema" fallback bucket (REQ-007)', () => {
|
|
||||||
const letters = [letter({ documentId: 'a', rootTagId: undefined })];
|
|
||||||
const buckets = bucketLetters(letters, 'thema', noEvents);
|
|
||||||
expect(buckets).toHaveLength(1);
|
|
||||||
expect(buckets[0].kind).toBe('fallback');
|
|
||||||
expect(buckets[0].color).toBeNull();
|
|
||||||
});
|
|
||||||
|
|
||||||
it('places a letter in exactly one bucket (REQ-008)', () => {
|
|
||||||
const letters = [
|
|
||||||
letter({ documentId: 'a', rootTagId: 't1', rootTagName: 'Krieg', rootTagColor: 'sienna' })
|
|
||||||
];
|
|
||||||
const buckets = bucketLetters(letters, 'thema', noEvents);
|
|
||||||
const occurrences = buckets.flatMap((b) => b.letters).filter((l) => l.documentId === 'a');
|
|
||||||
expect(occurrences).toHaveLength(1);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('carries a null colour through for a colourless root tag', () => {
|
|
||||||
const letters = [
|
|
||||||
letter({
|
|
||||||
documentId: 'a',
|
|
||||||
rootTagId: 't3',
|
|
||||||
rootTagName: 'Allgemein',
|
|
||||||
rootTagColor: undefined
|
|
||||||
})
|
|
||||||
];
|
|
||||||
const buckets = bucketLetters(letters, 'thema', noEvents);
|
|
||||||
expect(buckets[0].kind).toBe('tag');
|
|
||||||
expect(buckets[0].color).toBeNull();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
@@ -1,152 +0,0 @@
|
|||||||
import type { components } from '$lib/generated/api';
|
|
||||||
|
|
||||||
type TimelineDTO = components['schemas']['TimelineDTO'];
|
|
||||||
type TimelineEntryDTO = components['schemas']['TimelineEntryDTO'];
|
|
||||||
|
|
||||||
/**
|
|
||||||
* The three ways a reader can bundle the loose letters on `/zeitstrahl` (#827). The
|
|
||||||
* axis-fixed layers (life-events, event pills, world-bands) are identical in every mode
|
|
||||||
* — only loose-letter bundling changes. Grouping runs over the *already layer-filtered*
|
|
||||||
* timeline (#780): filter-then-group.
|
|
||||||
*/
|
|
||||||
export type GroupingMode = 'date' | 'event' | 'thema';
|
|
||||||
|
|
||||||
/** The default mode — chronological, as #779 shipped. */
|
|
||||||
export const DEFAULT_GROUPING: GroupingMode = 'date';
|
|
||||||
|
|
||||||
/** Letters shown before a cluster needs a "show more" toggle (#827 redesign). */
|
|
||||||
export const CLUSTER_PREVIEW = 5;
|
|
||||||
|
|
||||||
/** The `--c-tag-*` colour-name tokens (sage/sienna/…); shared by the chip and the rail. */
|
|
||||||
const TAG_COLOR_TOKENS = new Set([
|
|
||||||
'sage',
|
|
||||||
'sienna',
|
|
||||||
'amber',
|
|
||||||
'slate',
|
|
||||||
'violet',
|
|
||||||
'rose',
|
|
||||||
'cobalt',
|
|
||||||
'moss',
|
|
||||||
'sand',
|
|
||||||
'coral'
|
|
||||||
]);
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Maps a root-tag colour-name token to its CSS variable reference, or `null` for an absent
|
|
||||||
* or unknown token (so a colourless/unrecognised tag falls back to a neutral rail, never a
|
|
||||||
* broken `var(--c-tag-undefined)`).
|
|
||||||
*/
|
|
||||||
export function tagColorVar(token: string | null | undefined): string | null {
|
|
||||||
return token && TAG_COLOR_TOKENS.has(token) ? `var(--c-tag-${token})` : null;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* One bundle of loose letters under a single header, within a year (Ereignis/Thema modes).
|
|
||||||
* `kind` decides the header: a curated-event title, a tinted root-tag chip, or the localized
|
|
||||||
* fallback ("Weitere Briefe" / "Ohne Thema") the view supplies for `kind === 'fallback'`.
|
|
||||||
*/
|
|
||||||
export interface LetterBucket {
|
|
||||||
/** Stable `{#each}` key, unique within a year's bucket list. */
|
|
||||||
key: string;
|
|
||||||
kind: 'event' | 'tag' | 'fallback';
|
|
||||||
/** Header label for `event`/`tag` buckets; absent for `fallback` (view supplies a localized label). */
|
|
||||||
title?: string;
|
|
||||||
/** Root-tag colour token for a `tag` bucket; `null` for `event`/`fallback` (neutral). */
|
|
||||||
color: string | null;
|
|
||||||
letters: TimelineEntryDTO[];
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Maps each curated event present in the (already-filtered) timeline to its title. These are the
|
|
||||||
* only events a letter may cluster under — a letter whose `linkedEventId` is absent here links to
|
|
||||||
* an event the layer filter removed, so it falls back to "Weitere Briefe" (filter-then-group,
|
|
||||||
* REQ-019). Curated events carry an `eventId`; derived life-events and letters do not.
|
|
||||||
*/
|
|
||||||
export function buildEventLookup(timeline: TimelineDTO): Map<string, string> {
|
|
||||||
const lookup = new Map<string, string>();
|
|
||||||
const collect = (entries: TimelineEntryDTO[]) => {
|
|
||||||
for (const entry of entries) {
|
|
||||||
if (entry.kind === 'EVENT' && entry.eventId) lookup.set(entry.eventId, entry.title ?? '');
|
|
||||||
}
|
|
||||||
};
|
|
||||||
for (const band of timeline.years) collect(band.entries);
|
|
||||||
collect(timeline.undated);
|
|
||||||
return lookup;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* True when the timeline still holds at least one loose letter. Drives the grouping control's
|
|
||||||
* enabled state: with the Letters layer filtered off there is nothing to regroup (REQ-018).
|
|
||||||
*/
|
|
||||||
export function hasLooseLetters(timeline: TimelineDTO): boolean {
|
|
||||||
const holdsLetter = (entries: TimelineEntryDTO[]) => entries.some((e) => e.kind === 'LETTER');
|
|
||||||
return timeline.years.some((band) => holdsLetter(band.entries)) || holdsLetter(timeline.undated);
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Buckets one year's loose letters for Ereignis/Thema mode. The caller passes only that year's
|
|
||||||
* `LETTER` entries; events stay on the axis untouched (REQ-001). Buckets keep first-seen order and
|
|
||||||
* the fallback bucket, if any, always sorts last.
|
|
||||||
*
|
|
||||||
* - `event`: cluster under `linkedEventId` when it is set AND survives in `eventLookup`; otherwise
|
|
||||||
* the fallback "Weitere Briefe" bucket (REQ-003/006/019).
|
|
||||||
* - `thema`: bucket under `rootTagId` (header = `rootTagName`, tint = `rootTagColor`); an untagged
|
|
||||||
* letter goes to the fallback "Ohne Thema" bucket (REQ-004/007). A letter carries exactly one
|
|
||||||
* `rootTagId`, so it lands in exactly one bucket (REQ-008).
|
|
||||||
*/
|
|
||||||
export function bucketLetters(
|
|
||||||
letters: TimelineEntryDTO[],
|
|
||||||
mode: Exclude<GroupingMode, 'date'>,
|
|
||||||
eventLookup: Map<string, string>
|
|
||||||
): LetterBucket[] {
|
|
||||||
const byKey = new Map<string, LetterBucket>();
|
|
||||||
let fallback: LetterBucket | null = null;
|
|
||||||
|
|
||||||
const fallbackBucket = (): LetterBucket => {
|
|
||||||
if (!fallback) fallback = { key: '__fallback__', kind: 'fallback', color: null, letters: [] };
|
|
||||||
return fallback;
|
|
||||||
};
|
|
||||||
|
|
||||||
const namedBucket = (id: string, build: () => LetterBucket): LetterBucket => {
|
|
||||||
let bucket = byKey.get(id);
|
|
||||||
if (!bucket) {
|
|
||||||
bucket = build();
|
|
||||||
byKey.set(id, bucket);
|
|
||||||
}
|
|
||||||
return bucket;
|
|
||||||
};
|
|
||||||
|
|
||||||
for (const letter of letters) {
|
|
||||||
if (mode === 'event') {
|
|
||||||
const id = letter.linkedEventId;
|
|
||||||
if (id && eventLookup.has(id)) {
|
|
||||||
namedBucket(id, () => ({
|
|
||||||
key: `event:${id}`,
|
|
||||||
kind: 'event',
|
|
||||||
title: eventLookup.get(id),
|
|
||||||
color: null,
|
|
||||||
letters: []
|
|
||||||
})).letters.push(letter);
|
|
||||||
} else {
|
|
||||||
fallbackBucket().letters.push(letter);
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
const id = letter.rootTagId;
|
|
||||||
if (id) {
|
|
||||||
namedBucket(id, () => ({
|
|
||||||
key: `tag:${id}`,
|
|
||||||
kind: 'tag',
|
|
||||||
title: letter.rootTagName ?? '',
|
|
||||||
color: letter.rootTagColor ?? null,
|
|
||||||
letters: []
|
|
||||||
})).letters.push(letter);
|
|
||||||
} else {
|
|
||||||
fallbackBucket().letters.push(letter);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const buckets = [...byKey.values()];
|
|
||||||
if (fallback) buckets.push(fallback);
|
|
||||||
return buckets;
|
|
||||||
}
|
|
||||||
@@ -128,8 +128,7 @@ const deathText = $derived(formatLifeDate(person.deathDate, person.deathDatePrec
|
|||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
<!-- Curator actions — full width, outlined. Both links are gated to
|
<!-- Edit button — full width, outlined -->
|
||||||
WRITE_ALL; the gate is UX only (the #781 route guard is the boundary). -->
|
|
||||||
{#if canWrite}
|
{#if canWrite}
|
||||||
<a
|
<a
|
||||||
href="/persons/{person.id}/edit"
|
href="/persons/{person.id}/edit"
|
||||||
@@ -143,15 +142,6 @@ const deathText = $derived(formatLifeDate(person.deathDate, person.deathDatePrec
|
|||||||
/>
|
/>
|
||||||
{m.btn_edit()}
|
{m.btn_edit()}
|
||||||
</a>
|
</a>
|
||||||
<!-- Opens #781's create form pre-seeded with this person; on save it
|
|
||||||
returns to /persons/{id} (originPersonId). #842 REQ-003/010. -->
|
|
||||||
<a
|
|
||||||
data-testid="person-add-event"
|
|
||||||
href="/zeitstrahl/events/new?personId={person.id}"
|
|
||||||
class="mt-2 flex min-h-[44px] w-full items-center justify-center rounded border border-line px-3 py-2 font-sans text-xs font-bold tracking-widest text-ink-2 uppercase transition-colors hover:border-primary hover:text-ink"
|
|
||||||
>
|
|
||||||
{m.person_add_event()}
|
|
||||||
</a>
|
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -1,32 +0,0 @@
|
|||||||
import { describe, it, expect, afterEach } from 'vitest';
|
|
||||||
import { cleanup, render } from 'vitest-browser-svelte';
|
|
||||||
import PersonCard from './PersonCard.svelte';
|
|
||||||
|
|
||||||
afterEach(() => cleanup());
|
|
||||||
|
|
||||||
const PERSON_ID = '55555555-5555-5555-5555-555555555555';
|
|
||||||
|
|
||||||
const makePerson = (overrides = {}) => ({
|
|
||||||
id: PERSON_ID,
|
|
||||||
firstName: 'Karl',
|
|
||||||
lastName: 'Raddatz',
|
|
||||||
displayName: 'Karl Raddatz',
|
|
||||||
personType: 'PERSON',
|
|
||||||
...overrides
|
|
||||||
});
|
|
||||||
|
|
||||||
describe('PersonCard add-event affordance (#842)', () => {
|
|
||||||
it('shows an add-event link pre-seeded with the person to a curator (REQ-003)', () => {
|
|
||||||
render(PersonCard, { person: makePerson(), canWrite: true });
|
|
||||||
const add = document.querySelector(
|
|
||||||
'[data-testid="person-add-event"]'
|
|
||||||
) as HTMLAnchorElement | null;
|
|
||||||
expect(add).not.toBeNull();
|
|
||||||
expect(add?.getAttribute('href')).toBe(`/zeitstrahl/events/new?personId=${PERSON_ID}`);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('renders no add-event link to a reader (REQ-004)', () => {
|
|
||||||
render(PersonCard, { person: makePerson(), canWrite: false });
|
|
||||||
expect(document.querySelector('[data-testid="person-add-event"]')).toBeNull();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
@@ -1,50 +1,14 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import * as m from '$lib/paraglide/messages.js';
|
import * as m from '$lib/paraglide/messages.js';
|
||||||
import TimelineView from '$lib/timeline/TimelineView.svelte';
|
import TimelineView from '$lib/timeline/TimelineView.svelte';
|
||||||
import TimelineFilters from '$lib/timeline/TimelineFilters.svelte';
|
|
||||||
import GroupingControl from '$lib/timeline/GroupingControl.svelte';
|
|
||||||
import { timelineMeta } from '$lib/timeline/timelineMeta';
|
import { timelineMeta } from '$lib/timeline/timelineMeta';
|
||||||
import { filterTimeline } from '$lib/timeline/timelineFilter';
|
|
||||||
import { hasLooseLetters, type GroupingMode } from '$lib/timeline/timelineGrouping';
|
|
||||||
import type { PageData } from './$types';
|
import type { PageData } from './$types';
|
||||||
|
|
||||||
let { data }: { data: PageData } = $props();
|
let { data }: { data: PageData } = $props();
|
||||||
|
|
||||||
|
const meta = $derived(timelineMeta(data.timeline));
|
||||||
const hasContent = $derived(data.timeline.years.length > 0 || data.timeline.undated.length > 0);
|
const hasContent = $derived(data.timeline.years.length > 0 || data.timeline.undated.length > 0);
|
||||||
|
|
||||||
// Layer-filter state (#780). Layer hiding is client-side only — the whole
|
|
||||||
// timeline is loaded once by #779's SSR load and we derive a filtered view of
|
|
||||||
// it here; there is no goto, no URL param, and no extra fetch.
|
|
||||||
let personalOn = $state(true);
|
|
||||||
let historicalOn = $state(true);
|
|
||||||
let lettersOn = $state(true);
|
|
||||||
|
|
||||||
// Grouping state (#827) lives here beside the layer-filter state; the regroup is a
|
|
||||||
// pure client-side transform over the already-filtered view — filter-then-group.
|
|
||||||
let groupingMode = $state<GroupingMode>('date');
|
|
||||||
|
|
||||||
const filteredTimeline = $derived(
|
|
||||||
filterTimeline(data.timeline, { personalOn, historicalOn, lettersOn })
|
|
||||||
);
|
|
||||||
const filteredEmpty = $derived(
|
|
||||||
filteredTimeline.years.length === 0 && filteredTimeline.undated.length === 0
|
|
||||||
);
|
|
||||||
// The grouping control is only meaningful while loose letters remain in the filtered
|
|
||||||
// view; with the Letters layer off there is nothing to regroup, so it disables but
|
|
||||||
// keeps its selected mode (REQ-018).
|
|
||||||
const hasLetters = $derived(hasLooseLetters(filteredTimeline));
|
|
||||||
|
|
||||||
// Meta-line figures track the *filtered* view, so the header counts always
|
|
||||||
// match what is actually on screen once layers are toggled off (#780 — this
|
|
||||||
// closes the prior D1 limitation, where the counts stayed on the full timeline).
|
|
||||||
const meta = $derived(timelineMeta(filteredTimeline));
|
|
||||||
|
|
||||||
function resetFilters() {
|
|
||||||
personalOn = true;
|
|
||||||
historicalOn = true;
|
|
||||||
lettersOn = true;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Compose the sub-line from segments joined by " · " so the range drops out
|
// Compose the sub-line from segments joined by " · " so the range drops out
|
||||||
// cleanly when there are no year bands; the whole line is absent when the
|
// cleanly when there are no year bands; the whole line is absent when the
|
||||||
// timeline is empty (REQ-002). Counts come from the route alone, never from
|
// timeline is empty (REQ-002). Counts come from the route alone, never from
|
||||||
@@ -70,13 +34,7 @@ const metaLine = $derived.by(() => {
|
|||||||
: m.timeline_events_count({ count: meta.eventCount })
|
: m.timeline_events_count({ count: meta.eventCount })
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
segments.push(
|
segments.push(m.timeline_grouping_date());
|
||||||
groupingMode === 'event'
|
|
||||||
? m.timeline_grouping_event()
|
|
||||||
: groupingMode === 'thema'
|
|
||||||
? m.timeline_grouping_thema()
|
|
||||||
: m.timeline_grouping_date()
|
|
||||||
);
|
|
||||||
return segments.join(' · ');
|
return segments.join(' · ');
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
@@ -90,56 +48,10 @@ const metaLine = $derived.by(() => {
|
|||||||
border is intentionally omitted (the page is already bg-canvas), per the
|
border is intentionally omitted (the page is already bg-canvas), per the
|
||||||
review of REQ-001 — the sheet reads through its padding, not a frame line. -->
|
review of REQ-001 — the sheet reads through its padding, not a frame line. -->
|
||||||
<div data-testid="timeline-canvas" class="rounded-[10px] bg-canvas p-6">
|
<div data-testid="timeline-canvas" class="rounded-[10px] bg-canvas p-6">
|
||||||
<!-- Wrapping header so the CTA drops below the heading at narrow widths
|
<h1 class="font-serif text-2xl font-bold text-brand-navy">{m.timeline_heading()}</h1>
|
||||||
(≤360px) instead of overflowing — #842 REQ-001. -->
|
|
||||||
<header class="flex flex-wrap items-center justify-between gap-3">
|
|
||||||
<h1 class="font-serif text-2xl font-bold text-brand-navy">{m.timeline_heading()}</h1>
|
|
||||||
{#if data.canWrite}
|
|
||||||
<a
|
|
||||||
data-testid="timeline-add-event"
|
|
||||||
href="/zeitstrahl/events/new"
|
|
||||||
class="inline-flex h-11 items-center rounded bg-primary px-4 font-sans text-sm font-medium text-primary-fg hover:opacity-90 focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
|
|
||||||
>
|
|
||||||
{m.timeline_add_event()}
|
|
||||||
</a>
|
|
||||||
{/if}
|
|
||||||
</header>
|
|
||||||
{#if hasContent}
|
{#if hasContent}
|
||||||
<p data-testid="timeline-meta" class="mt-1 mb-3 font-sans text-xs text-ink-3">{metaLine}</p>
|
<p data-testid="timeline-meta" class="mt-1 mb-6 font-sans text-xs text-ink-3">{metaLine}</p>
|
||||||
<!-- Grouping toggle stacked above the #780 layer-filter trigger so the two read as
|
|
||||||
one control cluster in the header (REQ-010); the top-right corner stays the
|
|
||||||
add-event CTA. Disabled — but kept in place — when no loose letters remain
|
|
||||||
(REQ-018). -->
|
|
||||||
<div class="mb-3" data-testid="grouping-cluster">
|
|
||||||
<GroupingControl bind:mode={groupingMode} disabled={!hasLetters} />
|
|
||||||
</div>
|
|
||||||
<TimelineFilters
|
|
||||||
bind:personalOn={personalOn}
|
|
||||||
bind:historicalOn={historicalOn}
|
|
||||||
bind:lettersOn={lettersOn}
|
|
||||||
/>
|
|
||||||
{/if}
|
|
||||||
{#if hasContent && filteredEmpty}
|
|
||||||
<!-- Filtered-empty: a calm message + one-click reset below the still-open
|
|
||||||
filter bar — never a blank page, and never the generic "no events"
|
|
||||||
state (which would imply the archive itself is empty). REQ-006. -->
|
|
||||||
<div data-testid="timeline-filter-empty" class="py-12 text-center">
|
|
||||||
<p class="font-serif text-base text-ink-2">{m.timeline_filter_empty_state()}</p>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
data-testid="timeline-filter-empty-reset"
|
|
||||||
onclick={resetFilters}
|
|
||||||
class="mt-3 inline-flex min-h-[44px] items-center font-sans text-sm text-primary underline-offset-2 hover:underline"
|
|
||||||
>
|
|
||||||
{m.timeline_filter_reset()}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
{:else}
|
|
||||||
<TimelineView
|
|
||||||
timeline={filteredTimeline}
|
|
||||||
canWrite={data.canWrite}
|
|
||||||
groupingMode={groupingMode}
|
|
||||||
/>
|
|
||||||
{/if}
|
{/if}
|
||||||
|
<TimelineView timeline={data.timeline} />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -1,6 +1,5 @@
|
|||||||
import { describe, it, expect, afterEach } from 'vitest';
|
import { describe, it, expect, afterEach } from 'vitest';
|
||||||
import { cleanup, render } from 'vitest-browser-svelte';
|
import { cleanup, render } from 'vitest-browser-svelte';
|
||||||
import { page } from 'vitest/browser';
|
|
||||||
import * as m from '$lib/paraglide/messages.js';
|
import * as m from '$lib/paraglide/messages.js';
|
||||||
import Page from './+page.svelte';
|
import Page from './+page.svelte';
|
||||||
import { makeEntry, makeYear, makeTimelineDTO } from '$lib/timeline/test-factories';
|
import { makeEntry, makeYear, makeTimelineDTO } from '$lib/timeline/test-factories';
|
||||||
@@ -112,214 +111,3 @@ describe('/zeitstrahl page', () => {
|
|||||||
expect(sub?.textContent).not.toContain(m.timeline_events_count({ count: 1 }));
|
expect(sub?.textContent).not.toContain(m.timeline_events_count({ count: 1 }));
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
describe('/zeitstrahl layer filter (#780)', () => {
|
|
||||||
const letter = (title: string, documentId: string) => makeEntry({ documentId, title });
|
|
||||||
const historical = (title: string) =>
|
|
||||||
makeEntry({
|
|
||||||
kind: 'EVENT',
|
|
||||||
type: 'HISTORICAL',
|
|
||||||
derived: false,
|
|
||||||
eventId: 'h1',
|
|
||||||
documentId: undefined,
|
|
||||||
title,
|
|
||||||
senderName: '',
|
|
||||||
receiverName: ''
|
|
||||||
});
|
|
||||||
const personal = (title: string) =>
|
|
||||||
makeEntry({
|
|
||||||
kind: 'EVENT',
|
|
||||||
type: 'PERSONAL',
|
|
||||||
derived: false,
|
|
||||||
eventId: 'p1',
|
|
||||||
documentId: undefined,
|
|
||||||
title,
|
|
||||||
senderName: '',
|
|
||||||
receiverName: ''
|
|
||||||
});
|
|
||||||
|
|
||||||
const mixed = () =>
|
|
||||||
makeTimelineDTO({
|
|
||||||
years: [
|
|
||||||
makeYear(1915, [
|
|
||||||
letter('Brief Eins', 'd1'),
|
|
||||||
historical('Erster Weltkrieg'),
|
|
||||||
personal('Umzug nach Berlin')
|
|
||||||
])
|
|
||||||
]
|
|
||||||
});
|
|
||||||
|
|
||||||
async function openBar() {
|
|
||||||
await page.getByTestId('timeline-filter-trigger').click();
|
|
||||||
}
|
|
||||||
|
|
||||||
it('hides letter cards when the Letters layer is off and restores them, with no fetch (REQ-005/002)', async () => {
|
|
||||||
render(Page, { data: pageData(mixed()) });
|
|
||||||
await expect.element(page.getByText('Brief Eins')).toBeVisible();
|
|
||||||
await openBar();
|
|
||||||
await page.getByTestId('timeline-filter-letters').click();
|
|
||||||
await expect.poll(() => page.getByText('Brief Eins').query()).toBeNull();
|
|
||||||
await expect.element(page.getByText('Umzug nach Berlin')).toBeVisible();
|
|
||||||
await page.getByTestId('timeline-filter-letters').click();
|
|
||||||
await expect.element(page.getByText('Brief Eins')).toBeVisible();
|
|
||||||
});
|
|
||||||
|
|
||||||
it('hides historical event cards when the Historical layer is off (REQ-004)', async () => {
|
|
||||||
render(Page, { data: pageData(mixed()) });
|
|
||||||
await openBar();
|
|
||||||
await page.getByTestId('timeline-filter-historical').click();
|
|
||||||
await expect.poll(() => page.getByText('Erster Weltkrieg').query()).toBeNull();
|
|
||||||
await expect.element(page.getByText('Brief Eins')).toBeVisible();
|
|
||||||
await expect.element(page.getByText('Umzug nach Berlin')).toBeVisible();
|
|
||||||
});
|
|
||||||
|
|
||||||
it('hides personal event cards when the Personal layer is off (REQ-003)', async () => {
|
|
||||||
render(Page, { data: pageData(mixed()) });
|
|
||||||
await openBar();
|
|
||||||
await page.getByTestId('timeline-filter-personal').click();
|
|
||||||
await expect.poll(() => page.getByText('Umzug nach Berlin').query()).toBeNull();
|
|
||||||
await expect.element(page.getByText('Brief Eins')).toBeVisible();
|
|
||||||
await expect.element(page.getByText('Erster Weltkrieg')).toBeVisible();
|
|
||||||
});
|
|
||||||
|
|
||||||
it('shows the filtered-empty message + reset below the open bar when all layers are off (REQ-006)', async () => {
|
|
||||||
render(Page, { data: pageData(mixed()) });
|
|
||||||
await openBar();
|
|
||||||
await page.getByTestId('timeline-filter-personal').click();
|
|
||||||
await page.getByTestId('timeline-filter-historical').click();
|
|
||||||
await page.getByTestId('timeline-filter-letters').click();
|
|
||||||
await expect.element(page.getByText(m.timeline_filter_empty_state())).toBeVisible();
|
|
||||||
await expect.element(page.getByTestId('timeline-filter-empty-reset')).toBeVisible();
|
|
||||||
// the generic TimelineView empty state is never what shows for a filtered-empty view
|
|
||||||
expect(page.getByText(m.timeline_empty_state()).query()).toBeNull();
|
|
||||||
// the one-click reset restores every layer
|
|
||||||
await page.getByTestId('timeline-filter-empty-reset').click();
|
|
||||||
await expect.element(page.getByText('Brief Eins')).toBeVisible();
|
|
||||||
});
|
|
||||||
|
|
||||||
it('recomputes the meta-line counts from the filtered view, so a hidden layer drops out of the totals (#780, resolves D1)', async () => {
|
|
||||||
render(Page, { data: pageData(mixed()) });
|
|
||||||
const meta = page.getByTestId('timeline-meta');
|
|
||||||
// all layers on → the one letter and the two events are counted
|
|
||||||
await expect.element(meta).toHaveTextContent(m.timeline_letters_count_singular());
|
|
||||||
await expect.element(meta).toHaveTextContent(m.timeline_events_count({ count: 2 }));
|
|
||||||
|
|
||||||
await openBar();
|
|
||||||
await page.getByTestId('timeline-filter-letters').click();
|
|
||||||
|
|
||||||
// the hidden letter leaves the count instead of lingering as "1 Brief";
|
|
||||||
// the event total is untouched
|
|
||||||
await expect.element(meta).not.toHaveTextContent(m.timeline_letters_count_singular());
|
|
||||||
await expect.element(meta).toHaveTextContent(m.timeline_events_count({ count: 2 }));
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
describe('/zeitstrahl curator affordances (#842)', () => {
|
|
||||||
const curated = (eventId: string) =>
|
|
||||||
makeEntry({
|
|
||||||
kind: 'EVENT',
|
|
||||||
type: 'PERSONAL',
|
|
||||||
derived: false,
|
|
||||||
eventId,
|
|
||||||
title: 'Auswanderung',
|
|
||||||
senderName: '',
|
|
||||||
receiverName: '',
|
|
||||||
documentId: undefined
|
|
||||||
});
|
|
||||||
|
|
||||||
const withWrite = (timeline: ReturnType<typeof makeTimelineDTO>) => ({
|
|
||||||
...pageData(timeline),
|
|
||||||
canWrite: true
|
|
||||||
});
|
|
||||||
|
|
||||||
it('renders the add-event CTA in a wrapping header when the viewer can write (REQ-001)', () => {
|
|
||||||
render(Page, { data: withWrite(makeTimelineDTO({ years: [makeYear(1909, [makeEntry()])] })) });
|
|
||||||
const add = document.querySelector(
|
|
||||||
'[data-testid="timeline-add-event"]'
|
|
||||||
) as HTMLAnchorElement | null;
|
|
||||||
expect(add).not.toBeNull();
|
|
||||||
expect(add?.getAttribute('href')).toBe('/zeitstrahl/events/new');
|
|
||||||
// The header wraps so the CTA drops below the heading at narrow widths (≤360px)
|
|
||||||
// rather than overflowing — REQ-001.
|
|
||||||
expect(add?.closest('header')?.classList.contains('flex-wrap')).toBe(true);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('renders no add-event CTA when the viewer cannot write (REQ-002)', () => {
|
|
||||||
render(Page, {
|
|
||||||
data: pageData(makeTimelineDTO({ years: [makeYear(1909, [makeEntry()])] }))
|
|
||||||
});
|
|
||||||
expect(document.querySelector('[data-testid="timeline-add-event"]')).toBeNull();
|
|
||||||
});
|
|
||||||
|
|
||||||
it('threads canWrite to the timeline so a curator sees an event edit link (REQ-001/009)', () => {
|
|
||||||
render(Page, {
|
|
||||||
data: withWrite(makeTimelineDTO({ years: [makeYear(1924, [curated('p9')])] }))
|
|
||||||
});
|
|
||||||
expect(document.querySelector('a[href="/zeitstrahl/events/p9/edit"]')).not.toBeNull();
|
|
||||||
});
|
|
||||||
|
|
||||||
it('shows no event edit link to a reader (REQ-007)', () => {
|
|
||||||
render(Page, {
|
|
||||||
data: pageData(makeTimelineDTO({ years: [makeYear(1924, [curated('p9')])] }))
|
|
||||||
});
|
|
||||||
expect(document.querySelector('[data-testid="event-edit"]')).toBeNull();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
describe('/zeitstrahl grouping toggle (#827)', () => {
|
|
||||||
const historical = () =>
|
|
||||||
makeEntry({
|
|
||||||
kind: 'EVENT',
|
|
||||||
type: 'HISTORICAL',
|
|
||||||
derived: false,
|
|
||||||
eventId: 'h1',
|
|
||||||
documentId: undefined,
|
|
||||||
title: 'Erster Weltkrieg',
|
|
||||||
senderName: '',
|
|
||||||
receiverName: ''
|
|
||||||
});
|
|
||||||
const mixed = () =>
|
|
||||||
makeTimelineDTO({
|
|
||||||
years: [
|
|
||||||
makeYear(1915, [
|
|
||||||
makeEntry({ documentId: 'd1', title: 'Brief Eins', linkedEventId: 'h1' }),
|
|
||||||
historical()
|
|
||||||
])
|
|
||||||
]
|
|
||||||
});
|
|
||||||
const radio = (value: string) => document.querySelector(`[data-value="${value}"]`) as HTMLElement;
|
|
||||||
|
|
||||||
it('updates the meta-line grouping label when a mode is chosen (REQ-016)', async () => {
|
|
||||||
render(Page, { data: pageData(mixed()) });
|
|
||||||
const meta = page.getByTestId('timeline-meta');
|
|
||||||
await expect.element(meta).toHaveTextContent(m.timeline_grouping_date());
|
|
||||||
radio('event').click();
|
|
||||||
await expect.element(meta).toHaveTextContent(m.timeline_grouping_event());
|
|
||||||
radio('thema').click();
|
|
||||||
await expect.element(meta).toHaveTextContent(m.timeline_grouping_thema());
|
|
||||||
});
|
|
||||||
|
|
||||||
it('regroups loose letters under their event client-side, no buckets in Datum (REQ-002/003)', async () => {
|
|
||||||
render(Page, { data: pageData(mixed()) });
|
|
||||||
expect(document.querySelector('[data-testid="letter-bucket"]')).toBeNull();
|
|
||||||
radio('event').click();
|
|
||||||
await expect.element(page.getByTestId('letter-bucket')).toBeVisible();
|
|
||||||
});
|
|
||||||
|
|
||||||
it('disables the grouping control when the Letters layer is off, keeping the mode (REQ-018)', async () => {
|
|
||||||
render(Page, { data: pageData(mixed()) });
|
|
||||||
radio('thema').click();
|
|
||||||
const control = page.getByTestId('grouping-control');
|
|
||||||
await expect.element(control).toHaveAttribute('aria-disabled', 'false');
|
|
||||||
// turn the Letters layer off → nothing to regroup
|
|
||||||
await page.getByTestId('timeline-filter-trigger').click();
|
|
||||||
await page.getByTestId('timeline-filter-letters').click();
|
|
||||||
await expect.element(control).toHaveAttribute('aria-disabled', 'true');
|
|
||||||
// the chosen mode is retained for when letters return
|
|
||||||
expect(radio('thema').getAttribute('aria-checked')).toBe('true');
|
|
||||||
// re-enabling restores the enabled control with the same mode (no reset to Datum)
|
|
||||||
await page.getByTestId('timeline-filter-letters').click();
|
|
||||||
await expect.element(control).toHaveAttribute('aria-disabled', 'false');
|
|
||||||
expect(radio('thema').getAttribute('aria-checked')).toBe('true');
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|||||||
Reference in New Issue
Block a user