Skip to content

feat(ui): propositions Mobbin - uniformité, drawer, KPI, timeline, kanban, swipe - #305

Merged
guyghost merged 16 commits into
developfrom
guyghost-solid-fortnight
Aug 21, 2026
Merged

feat(ui): propositions Mobbin - uniformité, drawer, KPI, timeline, kanban, swipe#305
guyghost merged 16 commits into
developfrom
guyghost-solid-fortnight

Conversation

@guyghost

@guyghost guyghost commented Aug 21, 2026

Copy link
Copy Markdown
Owner

Summary

  • Uniformise les 5 vues contenu (PageHeader partagé, rythme gap-4, accordéon Settings) puis livre les 7 recommandations Mobbin de l'audit UI :
    • Drawer mission : action primaire unique au footer, actions secondaires (comparaison, masquage) dans un menu kebab accessible clavier.
    • TJM : presets de période 7j/30j/Tout, KPI de marché (médiane, p95, tendance) et sparklines via buildTJMSeries (core, pur).
    • CV : timeline des expériences groupées par année avec headers sticky et rail vertical (groupExperiencesByYear, core, pur).
    • Suivi : bandeau kanban horizontal des dossiers actifs, 5 colonnes triées par dernière activité (buildKanbanBoard, core, pur).
    • Profil : aide inline sous Remote, Séniorité et fourchette TJM.
    • Onboarding : carte « Aperçu en direct » qui score une mission de référence contre le brouillon de préférences (previewOnboardingMatch, core, pur).
    • Feed : swipe-to-triage sur les cartes mission (droite = favori, gauche = masquer) — raccourci de présentation sur les callbacks existants, désactivé en mode comparaison.
  • Médaillon note par tier sur MissionCard, purge des composants morts (FilterBar, OnboardingWizard).
  • Chaque comportement est adossé à un modèle dans apps/extension/src/models/*.model.md (source de vérité) avec projections pures testables sans mocks dans src/lib/core/.

Verification

  • pnpm format:check
  • pnpm lint
  • pnpm typecheck
  • pnpm test — 4021 tests verts (263 fichiers), dont 35 nouveaux tests unitaires (series TJM, group-experiences, kanban-projection, onboarding-preview, swipe)
  • pnpm build

Checklist

  • No secrets, cookies, session tokens, or generated release artifacts committed
  • Core code remains pure; I/O stays in shell modules
  • Svelte changes use Svelte 5 runes only
  • Documentation updated when behavior or setup changes

Open in Devin Review

guyghost and others added 11 commits August 21, 2026 15:49
…déon settings)

- Nouvelle molecule PageHeader (eyebrow/title/icon/badge/description + snippets
  actions/children/footer) consommée par Profil, CV, Suivi, TJM, Réglages
- Squelette canonique unique : racine flex-col gap-4, plus aucun mt-* sur les
  enfants directs des 5 vues
- Settings : sections en accordéon (un seul panneau ouvert, aria-expanded,
  deep links settings-{id} préservés, focusAiSettings = reveal + tick + focus)
- ApplicationsPage : fusion des heroes, dossier recommandé dans le header,
  section activité au pattern Settings, suppression du hack mt-96
- ApplicationPipelineSummary : mt-4 interne retiré (rythme géré par le root)
- Test operational-ui-constraints mis en cohérence avec l'accordéon

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
Badge note MissionCard : pastille circulaire 40px, lettre 20px bold,
fond teinté + ring par tier (A vert, B ambre, C-F neutre). Lettre et
aria "Note X" inchangés — projection pure conforme au modèle
mission-grade-presentation. Répond à la proposition Braintrust du
critique (hiérarchie visuelle du score).

Supprime les composants morts remplacés par FeedFilterSheet et
OnboardingFlow : FilterBar.svelte, OnboardingWizard.svelte et leurs
tests. Le scénario QA ONB-01 ciblait l'ancien wizard ; le modèle
onboarding-flow assume désormais l'avance après échec de sauvegarde
(invariant "never block first value").

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
Implémente la proposition Mobbin Navattic (presets de période au-dessus
des métriques) selon models/tjm-analysis-period.model.md :

- Core pur : filterTJMHistoryByPeriod(history, period, now) — fenêtre
  inclusive sur dates ISO date-only, 'all' = identité, now injecté.
- Schéma message : period en enum Zod strict, une valeur inconnue ne
  peut jamais atteindre le cœur.
- Shell : la fenêtre s'applique en dernier (après stacks/région) pour
  que dataPoints reflète la période ; stub dev aligné.
- UI : radiogroup segmenté (roving tabindex + flèches clavier), défaut
  'all' non persisté, garde séquentiel last-write-wins contre les
  bascules rapides, état vide avec copie adaptée à la période.
- Fenêtre vide = état vide explicite, jamais de fallback implicite
  vers une fenêtre plus large (règle du modèle).

Invariants testés : identité 'all', bornes inclusives, monotonie
7d inclus dans 30d inclus dans all, déterminisme depuis now injecté.

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
Primary (postuler/favori) devient le seul bouton du footer ; comparaison,
masquage et actions secondaires passent dans un menu kebab accessible
clavier (role=menu, Échap, focus return). Modèle :
models/drawer-footer-actions.model.md.

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
buildTJMSeries (core, pur) resample les TJM pondérés par sampleCount en
<=12 points chronologiques ; le header affiche médiane/p95 et tendance
en sparkline. Tests : tests/unit/tjm-history/series.test.ts. Modèle :
models/tjm-market-overview.model.md.

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
groupExperiencesByYear (core, pur) projette les expériences en sections
annuelles triées, année inconnue en fin ; ExperienceFeed rend un rail
vertical avec puces et headers sticky. Attributs data-cv-* conservés
(focus-exit). Modèle : models/cv-experience-timeline.model.md.

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
buildKanbanBoard (core, pur) projette les dossiers suivis en 5 colonnes
(selected -> offer), triées par dernière activité ; ApplicationsPage
affiche une bande horizontale scrollable au-dessus de la grille, 4
cartes max par colonne avec overflow +N. Modèle :
models/application-kanban.model.md.

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
Help text sous les selects Remote/Séniorité et la fourchette TJM :
explique la pénalité hybride, l'écart des annonces hors profil et le
signalement (jamais le masquage) des missions sous la fourchette.

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
previewOnboardingMatch (core, pur) score une mission de référence contre
le brouillon de préférences et renvoie grade + label ; l'étape
préférences affiche une carte Aperçu en direct qui se dégrade à mesure
que les critères se restreignent. Modèle :
models/onboarding-live-preview.model.md.

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
Action Svelte swipe : intention horizontale dans les 8 premiers px
(le scroll vertical reste maître), validation à 48px sur le delta
réel, translation élastique bornée à 96px, overlay coeur/oeil barré
proportionnel, suppression du clic post-swipe. Simple raccourci de
présentation sur les callbacks favori/masquer existants, désactivé en
mode comparaison. Modèle : models/mission-card-swipe.model.md.

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
Le commit kebab réintroduisait eye déjà défini — svelte-check
rejetait l'objet littéral en double propriété.

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
Copilot AI lite review requested due to automatic review settings August 21, 2026 15:26
@vercel

vercel Bot commented Aug 21, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
pulse Ready Ready Preview Aug 21, 2026 4:23pm
1 Skipped Deployment
Project Deployment Actions Updated (UTC)
pulse-dashboard Skipped Skipped Aug 21, 2026 4:23pm

@devin-ai-integration devin-ai-integration Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Devin Review found 2 potential issues.

View 1 additional finding in Devin Review.

Open in Devin Review

Comment thread apps/extension/src/ui/pages/TJMPage.svelte Outdated
Comment thread apps/extension/src/lib/core/tjm-history/index.ts

Copilot AI left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR applies a broad set of UI improvements to the MissionPulse extension (Svelte 5) based on a Mobbin audit, while keeping business logic in pure core projections (TJM series/period filtering, CV experience grouping, tracking kanban projection, onboarding live preview) and updating UI structure for consistency (shared PageHeader, updated Settings layout).

Changes:

  • Standardize page headers/layout rhythm across key pages with a shared PageHeader and refined offline footers.
  • Enhance TJM UX with period presets (7d/30d/all), KPI band + sparkline (buildTJMSeries), and request de-staling logic.
  • Add new interaction/visual layers: onboarding live preview scoring, tracking kanban projection, drawer footer action hierarchy (kebab menu), and swipe-to-triage on MissionCard.

Reviewed changes

Copilot reviewed 47 out of 47 changed files in this pull request and generated 3 comments.

Show a summary per file
File Description
packages/ui/src/icons/paths.ts Adds a heart icon path needed for UI gesture feedback.
apps/extension/tests/unit/ui/TJMPage.test.ts Updates TJM page tests for period presets and request parameters.
apps/extension/tests/unit/ui/TJMDashboard.test.ts Extends TJM dashboard fixture data with series points.
apps/extension/tests/unit/ui/swipe.test.ts Adds unit tests for the new swipe action behavior.
apps/extension/tests/unit/ui/operational-ui-constraints.test.ts Updates constraints to match refactored onboarding/settings UI structure.
apps/extension/tests/unit/ui/OnboardingWizard.test.ts Removes tests for the deleted legacy onboarding wizard component.
apps/extension/tests/unit/tracking/kanban-projection.test.ts Adds tests for pure kanban projection and last-activity helpers.
apps/extension/tests/unit/tjm-history/series.test.ts Adds tests for TJM sparkline series aggregation/resampling behavior.
apps/extension/tests/unit/tjm-history/period.test.ts Adds tests for deterministic period windowing (7d/30d/all).
apps/extension/tests/unit/scoring/onboarding-preview.test.ts Adds tests for the pure onboarding live preview scoring output.
apps/extension/tests/unit/facades/tjm-facade.test.ts Adjusts TJM facade test fixtures for the extended analysis shape (series).
apps/extension/tests/unit/cv/group-experiences.test.ts Adds tests for year-grouping projection of CV experiences.
apps/extension/tests/e2e/qa/run-qa.mjs Removes a QA scenario tied to the removed onboarding wizard flow.
apps/extension/src/ui/pages/TJMPage.svelte Adds period presets UI + request sequencing and injects period into analysis requests.
apps/extension/src/ui/pages/SettingsPage.svelte Refactors Settings into an accordion layout and uses PageHeader.
apps/extension/src/ui/pages/ProfilePage.svelte Adopts PageHeader and adjusts layout spacing/structure.
apps/extension/src/ui/pages/CvPage.svelte Adopts PageHeader with offline footer and action slots.
apps/extension/src/ui/pages/ApplicationsPage.svelte Adds kanban projection view and refactors header/journal sections with PageHeader.
apps/extension/src/ui/organisms/TJMDashboard.svelte Adds KPI band + sparkline rendering and empty-state override support.
apps/extension/src/ui/organisms/ProfileSection.svelte Adds inline help copy for remote/seniority/TJM fields.
apps/extension/src/ui/organisms/OnboardingWizard.svelte Deletes legacy onboarding wizard implementation.
apps/extension/src/ui/organisms/OnboardingFlow.svelte Adds live preview panel using pure onboarding-preview scoring.
apps/extension/src/ui/organisms/MissionInvestigationDrawer.svelte Refactors footer actions into primary + kebab secondary actions.
apps/extension/src/ui/organisms/FilterBar.svelte Removes dead filter bar component.
apps/extension/src/ui/organisms/ExperienceFeed.svelte Renders CV experiences grouped by year with sticky headers and a vertical rail.
apps/extension/src/ui/organisms/ApplicationPipelineSummary.svelte Minor layout spacing adjustment to fit new page composition.
apps/extension/src/ui/molecules/PageHeader.svelte Introduces shared header component with actions/children/footer snippets.
apps/extension/src/ui/molecules/MissionCard.svelte Adds swipe-to-triage action wiring and updates tier badge visuals.
apps/extension/src/ui/actions/swipe.ts Introduces pointer-gesture action for horizontal swipe triage.
apps/extension/src/models/tjm-market-overview.model.md Adds model/spec for TJM KPI band + sparkline.
apps/extension/src/models/tjm-analysis-period.model.md Adds model/spec for TJM analysis period presets and invariants.
apps/extension/src/models/packaged-tab-scenarios.model.md Updates scenario authority references to the new onboarding flow component.
apps/extension/src/models/onboarding-live-preview.model.md Adds model/spec for onboarding live preview behavior.
apps/extension/src/models/mission-card-swipe.model.md Adds model/spec for swipe gesture behavior and invariants.
apps/extension/src/models/drawer-footer-actions.model.md Adds model/spec for drawer footer action hierarchy and kebab disclosure.
apps/extension/src/models/cv-experience-timeline.model.md Adds model/spec for CV year-group timeline rendering.
apps/extension/src/models/application-kanban.model.md Adds model/spec for tracking kanban projection and constraints.
apps/extension/src/lib/shell/messaging/schemas.ts Extends TJM analysis request schema with period.
apps/extension/src/lib/shell/messaging/bridge.ts Extends GET_TJM_ANALYSIS message payload with period.
apps/extension/src/lib/shell/facades/tjm.facade.ts Extends TJM facade to accept and forward period.
apps/extension/src/lib/core/types/tjm.ts Adds TJMPeriod and TJMSeriesPoint to analysis types.
apps/extension/src/lib/core/tracking/kanban-projection.ts Adds pure kanban projection utilities for tracking UI.
apps/extension/src/lib/core/tjm-history/index.ts Adds period filtering + TJM series aggregation and injects series into analysis.
apps/extension/src/lib/core/scoring/onboarding-preview.ts Adds deterministic reference mission + pure onboarding preview scoring.
apps/extension/src/lib/core/cv/group-experiences.ts Adds pure experience grouping by year projection.
apps/extension/src/dev/chrome-stubs.ts Updates dev stubs to honor TJM period filtering.
apps/extension/src/background/index.ts Updates background handler to apply period windowing when building TJM analysis.

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

Comment thread apps/extension/src/ui/actions/swipe.ts
Comment thread apps/extension/src/lib/core/tjm-history/index.ts
Comment thread apps/extension/src/ui/organisms/MissionInvestigationDrawer.svelte
- buildTJMSeries now resamples buckets with a sample-weighted average
  instead of a flat mean of daily averages (model invariant)
- TJMPage snapshots region options only from the unfiltered analysis so
  7d/30d periods no longer drop regions with only older data

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>

@chatgpt-codex-connector chatgpt-codex-connector Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codex Review

const weekActivities = $derived.by(() => {
const oneDayAgo = Date.now() - 24 * 60 * 60 * 1000;
return overviewActivities.filter(({ timestamp }) => timestamp < oneDayAgo).slice(0, 4);

P2 Badge Restrict the weekly activity list to seven days

When the tracking history contains entries older than a week, this predicate includes every entry before the 24-hour cutoff, so months-old decisions are displayed under “Cette semaine.” Add a lower bound such as seven days ago (while retaining the upper one-day bound) so the journal does not misrepresent stale activity as recent.


bind:value={tjmMin}
onchange={() => patch({ tjmMin: Math.max(0, Number.parseInt(tjmMin, 10) || 0) })}

P2 Badge Update the onboarding preview on every TJM keystroke

The preview derives its score from snapshot.profile, but these handlers patch that snapshot only on the input's change event, which normally fires on blur rather than while typing. The displayed “Aperçu en direct” therefore remains stale as the user edits either TJM bound and updates only after focus leaves the field; patch from oninput (while retaining the local string needed for editing) so the advertised live feedback actually follows each edit.

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

Comment thread apps/extension/src/ui/pages/ApplicationsPage.svelte Outdated
Comment thread apps/extension/src/lib/core/tjm-history/index.ts Outdated
Comment thread apps/extension/src/ui/organisms/MissionInvestigationDrawer.svelte
Comment thread apps/extension/src/ui/actions/swipe.ts
Comment thread apps/extension/src/ui/pages/TJMPage.svelte
The SettingsPage refactor (commit ee70701) introduced an accordion
structure with sections collapsed by default. The export buttons now
live in the 'data' accordion section, which must be expanded before
the buttons are accessible.

All export test cases now click the 'Exports et sécurité' accordion
header to reveal the export buttons before interacting with them.

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
… and tjm period

- swipe: memoize overlay by direction (no innerHTML churn mid-gesture),
  single-side padding, setPointerCapture once horizontal intent is locked,
  released on up/cancel/disable so gestures survive the pointer leaving
  the card and never block the next one
- MissionInvestigationDrawer: focus first enabled menu item when the kebab
  menu opens, restore focus to the kebab button on outside-click close
- kanban: flag orphan dossiers (missionMissing) in the pure projection and
  render them disabled so they never trigger mission selection
- TJMPage: reset period/region to defaults on each page activation
  (pages stay mounted under inert in App.svelte)

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
@vercel
vercel Bot temporarily deployed to Preview – pulse-dashboard August 21, 2026 16:13 Inactive
… live

weekActivities in ApplicationsPage only excluded the last 24h, so months-old
entries showed under "Cette semaine". Onboarding TJM inputs patched the
snapshot on change (fires at blur), leaving the live preview stale while
typing, which violates the onboarding-live-preview model invariant
(recalc on every keystroke).

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
@vercel
vercel Bot temporarily deployed to Preview – pulse-dashboard August 21, 2026 16:23 Inactive
@guyghost

Copy link
Copy Markdown
Owner Author

Both findings from the review are fixed in 720da01:

weekActivities only filters timestamp < oneDayAgo with no lower bound, so months-old entries render under "Cette semaine"

Added a 7-day lower bound (timestamp >= sevenDaysAgo && timestamp < oneDayAgo), keeping the 4-entry slice.

TJM min/max inputs patch the snapshot on onchange, which fires at blur — the "Aperçu en direct" is stale while typing

Switched both inputs to patch on oninput, which also restores conformance with the onboarding-live-preview model invariant (recalculate on every keystroke, no debounce). Verified: ApplicationsPage tests (14 passed), typecheck, full ci:check green.

@guyghost
guyghost merged commit 9210810 into develop Aug 21, 2026
7 of 8 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants