feat(fase-17): /settings About section opens ChangelogModal

Adds a discreet "Ver historial" text-button under the existing version
chip in `/settings` › About. The button toggles a local `showChangelog`
$state that drives the ChangelogModal mounted at the bottom of the
template, after every other modal so it stacks correctly.

Playwright CL-01 verifies the trigger → modal → CHANGELOG header path,
CL-02 verifies Escape closes the modal. Both pass against the bundled
?raw import (no fetch, exercises the production load path).

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
2026-05-19 01:20:00 +02:00
parent d11cf6ccef
commit f549dc53a2
2 changed files with 64 additions and 1 deletions

View File

@@ -10,6 +10,7 @@
import ThemeToggle from '$lib/components/ThemeToggle.svelte';
import SyncConflictsPanel from '$lib/components/SyncConflictsPanel.svelte';
import TagChip from '$lib/components/TagChip.svelte';
import ChangelogModal from '$lib/components/ChangelogModal.svelte';
import {
tags as tagsStore,
loadTags,
@@ -41,6 +42,9 @@
let saving = $state(false);
let saved = $state(false);
// Fase 17.2.4 — changelog modal trigger from the About section.
let showChangelog = $state(false);
let debounceTimer: ReturnType<typeof setTimeout>;
// Cropper
@@ -609,7 +613,8 @@
</section>
<!-- About (Fase 14.3.4) — version / commit / build-time chip.
Not clickable, just informational. -->
Fase 17.2.4 adds a "Ver historial" trigger that opens the
ChangelogModal with the bundled CHANGELOG.md content. -->
<section class="pt-8" data-testid="settings-about">
<p class="mb-2 text-[13px] font-semibold uppercase tracking-[0.05em] text-text-secondary">
{m.settings_about()}
@@ -617,6 +622,14 @@
<p class="text-xs text-text-secondary" data-testid="settings-about-version">
{m.settings_about_version({ version, commit, date: builtAt.slice(0, 10) })}
</p>
<button
type="button"
data-testid="settings-about-view-changelog"
onclick={() => (showChangelog = true)}
class="mt-1 text-xs text-text-secondary underline underline-offset-2 hover:text-slate-700 dark:hover:text-slate-300"
>
{m.settings_about_view_changelog()}
</button>
</section>
<!-- Danger zone (Fase 10.5) -->
@@ -722,3 +735,7 @@
</div>
</div>
{/if}
<!-- Fase 17.2.4 — changelog modal. Rendered last so it stacks above
every other modal on the page (delete-account, leave-collective). -->
<ChangelogModal open={showChangelog} onClose={() => (showChangelog = false)} />