refactor(ui): unify tab pages on PageShell and restructure layout hierarchy - #308
Merged
Conversation
…rarchy - Add PageShell template (scroll container + gutters + 16px cadence) and adopt it on Profil, CV, Suivi, TJM, Réglages; drop dead SettingsLayout - Profil: criteria form moves directly under the header; impact advisory (story + priorités) becomes a following act; Priorités promoted to its own section-card (fixes nested-card violation). First form input drops from y≈825 to y≈364 in a 700px viewport - Suivi: Dossier recommandé lifted out of the header card to a top-level sibling (header 678→445px); heading promoted h3→h2 - TJM: dashboard split into a decision act and a details act separated by a 24px boundary with a "Détails du marché" label No copy, handler, or state changes. Operational constraint tests pass. Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
1 Skipped Deployment
|
![devin-ai-integration[bot]](https://avatars.githubusercontent.com/in/811515?s=60&v=4){kind=small}
There was a problem hiding this comment.
🟢 Approval recommended
The changes are layout-focused refactors with consistent PageShell adoption, and no concrete correctness, accessibility, or architectural issues were identified in the updated components.
Pull request overview
This PR refactors the extension UI layout for non-feed tabs by introducing a shared PageShell template to standardize the scroll container and spacing cadence, while restructuring several pages (Profile, Applications/Suivi, TJM) to fix layout hierarchy issues and improve above-the-fold content placement.
Changes:
- Added
PageShelland migrated multiple tab pages to use it as the single shared page root (replacing per-page scroll/gutter implementations). - Reorganized
ProfilePagecontent order so the criteria form appears directly under the header, with impact advisory content moved below. - Restructured
ApplicationsPage(“Dossier recommandé” becomes a top-level sibling) andTJMDashboard(split into decision vs. details acts with a labeled boundary).
File summaries
| File | Description |
|---|---|
| apps/extension/src/ui/templates/SettingsLayout.svelte | Removes the now-obsolete layout wrapper previously duplicating page-root structure. |
| apps/extension/src/ui/templates/PageShell.svelte | Introduces the shared page shell that centralizes scroll container + spacing + aria-busy. |
| apps/extension/src/ui/pages/TJMPage.svelte | Switches TJM page root to PageShell for consistent layout behavior. |
| apps/extension/src/ui/pages/SettingsPage.svelte | Uses PageShell and routes busy state through ariaBusy for consistent accessibility signaling. |
| apps/extension/src/ui/pages/ProfilePage.svelte | Reorders header/footer and moves the criteria form earlier; impact advisory becomes its own sibling block. |
| apps/extension/src/ui/pages/CvPage.svelte | Switches CV page root to PageShell to match standardized tab layout. |
| apps/extension/src/ui/pages/ApplicationsPage.svelte | Uses PageShell and lifts “Dossier recommandé” out of the header card into the page flow. |
| apps/extension/src/ui/organisms/TJMDashboard.svelte | Reorganizes dashboard sections into clearer “decision” vs “details” grouping with a labeled divider. |
Review details
- Files reviewed: 8/8 changed files
- Comments generated: 0
- Review effort level: Lite
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
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
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
PageShelltemplate is now the single source for the scroll container and 16px sibling cadence; deadSettingsLayoutremoved.600px of advisory content inside the header card. The form now sits directly under the header; impact advisory (story + priorites) follows as its own act. First form input moved from below the fold to y364 in a 700px viewport.operational-ui-constraints.test.tspreserved.Verification
pnpm format:checkpnpm lintpnpm typecheckpnpm testpnpm build(all via the pre-push
ci:checkgate; plus targetedoperational-ui-constraints+TJMDashboardunit tests, layout detector scan clean, and visual verification at 360px and 500px widths: no horizontal overflow, measured block geometry confirms the offsets above)Checklist