Homepage refactor: 3-step checklist, language dropdown, RTL polish - #46
Merged
Conversation
✅ Deploy Preview for primer-paso ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
✅ Deploy Preview for primer-paso-research canceled.
|
✅ Deploy Preview for primer-paso-org-portal canceled.
|
- Highlight the next active step with stronger contrast (bigger title, primary-tinted bg/glow, foreground-coloured eyebrow/hint).
- Lock step 1 toggle once the screener has been completed; add a "Borrar mi progreso" form action that clears journey cookie + localStorage without navigating.
- Sync <html lang>/<dir> on client-side language change via $effect so RTL takes effect without a refresh.
- Replace native select with shadcn Select for the language switcher (white-bg dropdown panel, click-to-open).
- Default home nav back to "Inicio" after iterating on copy.
- Trim "Recibir apoyo" to !isEligible only; unify result-page handover/restart into one panel and link to the home with "Ir a mi solicitud".
- Fix a11y: footer attribution link now underlined (axe link-in-text-block); remove unused noscript fallback + dead language-list/link CSS.
- Extract repeated step-card header into a {#snippet}; tighten enhance handler with SubmitFunction typing.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
solsarratea
force-pushed
the
homepage-refactor
branch
from
May 7, 2026 20:24
adb856f to
135c7ba
Compare
solsarratea
marked this pull request as ready for review
May 7, 2026 20:25
jokroese
previously requested changes
May 7, 2026
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
solsarratea
force-pushed
the
homepage-refactor
branch
from
May 9, 2026 20:44
7b0d30d to
517086d
Compare
jokroese
added a commit
that referenced
this pull request
May 11, 2026
* Initialize homepage refactor
* clean up code with svelte best practices skill
* Update navigation and step 1 on path
* Update layout on language change
* highlight step 1 and update generic text
* refine homepage step polish, lock + clear, and a11y
- Highlight the next active step with stronger contrast (bigger title, primary-tinted bg/glow, foreground-coloured eyebrow/hint).
- Lock step 1 toggle once the screener has been completed; add a "Borrar mi progreso" form action that clears journey cookie + localStorage without navigating.
- Sync <html lang>/<dir> on client-side language change via $effect so RTL takes effect without a refresh.
- Replace native select with shadcn Select for the language switcher (white-bg dropdown panel, click-to-open).
- Default home nav back to "Inicio" after iterating on copy.
- Trim "Recibir apoyo" to !isEligible only; unify result-page handover/restart into one panel and link to the home with "Ir a mi solicitud".
- Fix a11y: footer attribution link now underlined (axe link-in-text-block); remove unused noscript fallback + dead language-list/link CSS.
- Extract repeated step-card header into a {#snippet}; tighten enhance handler with SubmitFunction typing.
* Update background color for step cards
* fix(public): tidy home checklist state handling
* Restore results to main and add a pop up for confirmation on delete answers
* update gitignore
* fix format
---------
Co-authored-by: Jo Kroese <jo@jokroese.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Replaces the home page with a 3-step checklist (eligibility → documents → submission) that persists across visits via
localStorage, and overhauls the result page + chrome to match.Home (
/[locale]/)localStorageper device./result; the toggle is locked while the screener has been completed.Layout / chrome
NativeSelect→ shadcnSelect(click-to-open, white-bg panel).<html lang>and<html dir>are synced on client-side navigation via$effect, so switching to/from Arabic flips RTL immediately (no refresh).<noscript>fallback and orphaned.language-list/.language-linkCSS.Result page
/result→ home when there are no journey answers (clean state instead of a faulty render).Translations (es/en/fr/ar)
pages.home.clear_progress_action,pages.result.continue_*,pages.result.summary_actions_*.pages.home.note_*,pages.home.seo_*,pages.home.choose,pages.home.directory_*,pages.home.quiz_body, etc.result.checklist.item.official_document_requirementscopy.Accessibility
/es,/en,/fr,/ar,/es/screener,/es/organisations.link-in-text-block).--muted-foreground(used byCardDescriptionetc.) sits at ~4.04:1 on white. Not changed in this PR — flagged in conversation for the team to decide whether to bump the global token.Code quality
$statefor truly reactive values,$derived/$derived.byfor everything computed,$effectonly for external DOM sync. Repeated step-card header extracted into a{#snippet}.enhancehandler typed withSubmitFunction.Test plan
/es(and/en,/fr,/ar) renders the 3-step home page; lead text reads "Sigue estos tres pasos para preparar tu solicitud. Marca cada paso al completarlo."/screener→/result) → step 1 on home is auto-checked, toggle is locked, "Ver resultado" button visible./resultafterwards is redirected back home)./es/resultwith no cookies → redirected to/es.pnpm format && pnpm lint && pnpm --filter @primer-paso/public typecheck && pnpm --filter @primer-paso/public test.🤖 Generated with Claude Code