From 7ae74211adb78d3721a2f47a54aeb4578b43c7ff Mon Sep 17 00:00:00 2001 From: Guy MANDINA Date: Wed, 29 Jul 2026 15:42:14 +0200 Subject: [PATCH] fix(ui): polish Suivi tab spacing, contrast, and readability Resolve multiple UI issues on the Applications (Suivi) tab identified during a polish pass: Spacing & rhythm - Bump section gaps from mt-3/mt-4 (12-16px) to mt-5 (20px) between AvailabilityPanel, Pipeline section, and the missions grid. - Increase Pipeline section padding (py-4 -> py-5) for breathing room. - Flatten the nested "Dossier recommande" card (bordered card-in-card) into a subtle bg-blueprint-blue/5 tint, removing the nested-card smell. Contrast (WCAG AA) - Replace text-text-muted (#a6a09b, ~2.8:1 on white) with text-text-subtle (#57534d, ~7.3:1) across all Suivi-flow body text, labels, hints, and meta. Eliminates every low-contrast text node on the tab. Readability - Bump text-micro (10px) to text-caption (11px) for all eyebrows, status badges, evidence labels, hints, and meta throughout the Suivi flow (ApplicationsPage, ApplicationPipelineSummary, AvailabilityPanel, CopilotPanel, OperationalStoryCard, OperationalEmptyState, OperationalStatusBadge). 10px was below the comfortable readability threshold for a 400px side panel. Mobile - Remove the nested max-h-[32rem] overflow-y-auto scroll box on mobile; restrict it to lg breakpoint only so the whole page scrolls naturally on narrow viewports. Verified at 400px side-panel width: 0 horizontal overflow, 0 text below 11px, 0 muted-gray text nodes, consistent 20px section rhythm. Checked both list-only and mission-selected (CopilotPanel rendered) states. Typecheck and lint pass (0 errors). --- .../ui/atoms/OperationalStatusBadge.svelte | 2 +- .../ui/molecules/OperationalEmptyState.svelte | 6 ++- .../ui/molecules/OperationalStoryCard.svelte | 4 +- .../ApplicationPipelineSummary.svelte | 12 +++-- .../src/ui/organisms/AvailabilityPanel.svelte | 4 +- .../src/ui/organisms/CopilotPanel.svelte | 48 ++++++++++--------- .../src/ui/pages/ApplicationsPage.svelte | 45 ++++++++--------- 7 files changed, 62 insertions(+), 59 deletions(-) diff --git a/apps/extension/src/ui/atoms/OperationalStatusBadge.svelte b/apps/extension/src/ui/atoms/OperationalStatusBadge.svelte index ca35b655..185ae1da 100644 --- a/apps/extension/src/ui/atoms/OperationalStatusBadge.svelte +++ b/apps/extension/src/ui/atoms/OperationalStatusBadge.svelte @@ -26,7 +26,7 @@ {label} diff --git a/apps/extension/src/ui/molecules/OperationalEmptyState.svelte b/apps/extension/src/ui/molecules/OperationalEmptyState.svelte index f3fb68b9..16ae9881 100644 --- a/apps/extension/src/ui/molecules/OperationalEmptyState.svelte +++ b/apps/extension/src/ui/molecules/OperationalEmptyState.svelte @@ -66,7 +66,9 @@
-

Décision

+

+ Décision +

{#if statusLabel} {/if} @@ -78,7 +80,7 @@ {#if proofLabel && proofValue !== null}
-

+

{proofLabel}

diff --git a/apps/extension/src/ui/molecules/OperationalStoryCard.svelte b/apps/extension/src/ui/molecules/OperationalStoryCard.svelte index ef68cf06..73a7dcaf 100644 --- a/apps/extension/src/ui/molecules/OperationalStoryCard.svelte +++ b/apps/extension/src/ui/molecules/OperationalStoryCard.svelte @@ -136,7 +136,7 @@

{#if eyebrow} -

+

{eyebrow}

{/if} @@ -156,7 +156,7 @@ {#each evidence as item, i (i)}

{#if item.icon} diff --git a/apps/extension/src/ui/organisms/ApplicationPipelineSummary.svelte b/apps/extension/src/ui/organisms/ApplicationPipelineSummary.svelte index 96418eee..1eb0377d 100644 --- a/apps/extension/src/ui/organisms/ApplicationPipelineSummary.svelte +++ b/apps/extension/src/ui/organisms/ApplicationPipelineSummary.svelte @@ -91,7 +91,7 @@ >

-

+

{card.label}

@@ -112,17 +112,19 @@

-

{card.stateLabel}

-

{card.hint}

+

{card.stateLabel}

+

{card.hint}

{/each}
-

Avancement

+

+ Avancement +

{#if summary.bottleneck} -

+

Goulot: {summary.bottleneck.label}

diff --git a/apps/extension/src/ui/organisms/AvailabilityPanel.svelte b/apps/extension/src/ui/organisms/AvailabilityPanel.svelte index 15ec1775..f9d51b52 100644 --- a/apps/extension/src/ui/organisms/AvailabilityPanel.svelte +++ b/apps/extension/src/ui/organisms/AvailabilityPanel.svelte @@ -187,7 +187,7 @@ class="rounded-lg border border-border-light bg-surface-white px-3 py-2 text-body-lg text-text-primary focus:border-blueprint-blue focus:outline-none focus:ring-2 focus:ring-blueprint-blue/20" /> {#if dateMissing} - La date est requise pour ce statut. + La date est requise pour ce statut. {/if} {/if} @@ -201,7 +201,7 @@ placeholder="Précisions : rythme, remote, foursquare…" class="resize-y rounded-lg border border-border-light bg-surface-white px-3 py-2 text-body-lg leading-relaxed text-text-primary placeholder:text-text-muted focus:border-blueprint-blue focus:outline-none focus:ring-2 focus:ring-blueprint-blue/20" > - {noteLen}/{AVAILABILITY_NOTE_MAX_LENGTH} diff --git a/apps/extension/src/ui/organisms/CopilotPanel.svelte b/apps/extension/src/ui/organisms/CopilotPanel.svelte index 2c38e524..78265fdb 100644 --- a/apps/extension/src/ui/organisms/CopilotPanel.svelte +++ b/apps/extension/src/ui/organisms/CopilotPanel.svelte @@ -268,7 +268,7 @@ Copilot Premium Eve · distant @@ -285,7 +285,7 @@

Issue de la demande de suppression

{deletionReceiptMessage()}

-

Confirmé le {deletionReceiptDate()}.

+

Confirmé le {deletionReceiptDate()}.

{/if} @@ -299,12 +299,12 @@

Dossier vivant

-

+

Contenus explicitement conservés · état serveur {store.dossier.state}

{#if store.dossier.activeJob} - + Traitement actif · {store.dossier.activeJob.kind} {/if} @@ -314,7 +314,7 @@

Analyse approuvée

- + {approvedAt(store.dossier.analysis.approvedAtMs)}
@@ -323,7 +323,7 @@ {#each store.dossier.analysis.result.evidenceClaims as claim (`${claim.text}:${claim.evidenceIds.join(',')}`)}
  • {claim.text} - + Preuves : {claim.evidenceIds.join(' · ')}
    • @@ -353,7 +353,7 @@ {#if store.dossier.approvedArtifacts.length > 0}
    -

    +

    Brouillons approuvés ({store.dossier.approvedArtifacts.length})

    {#each store.dossier.approvedArtifacts as artifact (artifact.artifactId)} @@ -362,7 +362,9 @@

    {artifactLabels[artifact.kind]}

    - {approvedAt(artifact.approvedAtMs)} + {approvedAt(artifact.approvedAtMs)}

    {artifact.draft} @@ -445,7 +447,7 @@

    - + Mission
    @@ -464,7 +466,7 @@
    - + Profil
    @@ -484,7 +486,7 @@ {#if store.availableEvidence.length > 0}
    - + Expériences comme sources
    @@ -515,15 +517,15 @@ /> Je consens à transmettre uniquement les champs cochés à MissionPulse Copilot pour ce job. -

    +

    Coach TJM transmet aussi des repères de marché numériques agrégés : stacks rapprochées, volumes, fourchette, tendance et date. Aucun relevé de mission individuel n’est transmis.

    -

    +

    Pitch, message et résumé CV exigent au moins une expérience cochée afin que chaque segment généré cite sa source.

    -

    +

    Décocher limite le job courant. Les données déjà consenties restent dans le dossier Copilot jusqu’à sa suppression confirmée.

    @@ -542,7 +544,7 @@ {operation.label} - {operation.detail} + {operation.detail} {/each}
    @@ -552,7 +554,7 @@

    {statusLabel(store.job.status)}

    -

    +

    {store.job.kind === 'analysis' ? 'Analyse incluse' : `${store.job.creditCost} crédit`}

    @@ -571,7 +573,7 @@ {#if store.job.tjmFacts}
    -

    +

    Repères locaux déterministes

    @@ -580,7 +582,7 @@ Marché : {formatEur(store.job.tjmFacts.market.weightedAverage)} Confiance : {store.job.tjmFacts.confidence}
    -

    +

    {store.job.tjmFacts.market.sampleCount} observation{store.job.tjmFacts.market .sampleCount > 1 ? 's' @@ -591,7 +593,7 @@ {#if store.job.result && store.job.status === 'review'}

    -

    +

    Proposition IA non vérifiée

    {#if groundedDraftText} @@ -601,7 +603,7 @@ {#each groundedDraftSegments as segment, index (`${index}:${segment.text}`)}
  • {segment.text} - + {#each segment.sourceRefs as sourceRef (`${sourceRef.kind}:${sourceRef.id}`)} {sourceRefLabel(sourceRef)} — « {sourceRefExcerpt(sourceRef)} » @@ -625,7 +627,7 @@ role="alert" >

    Proposition non vérifiée

    -

    +

    Les segments ne disposent pas tous de sources consenties valides. Le contenu est masqué et ne peut être ni copié ni conservé.

    @@ -640,7 +642,7 @@ {#each supportedEvidenceClaims as claim (claim.text)}
  • {claim.text} - + {claim.evidenceIds .map((id) => `${evidenceLabel(id)} — « ${evidenceExcerpt(id)} »`) .join(' · ')} @@ -743,7 +745,7 @@ {:else} {/if} diff --git a/apps/extension/src/ui/pages/ApplicationsPage.svelte b/apps/extension/src/ui/pages/ApplicationsPage.svelte index bde7b422..5ec08874 100644 --- a/apps/extension/src/ui/pages/ApplicationsPage.svelte +++ b/apps/extension/src/ui/pages/ApplicationsPage.svelte @@ -519,14 +519,14 @@
    -
    +

    Pipeline

    Candidatures

    Local uniquement @@ -534,7 +534,7 @@

    Suivre les missions qualifiées, préparer les messages et faire avancer chaque dossier.

    -

    +

    Ces statuts restent dans l'extension tant que le compte MissionPulse n'est pas connecté.

    @@ -544,7 +544,7 @@
    -
    +
    {#if isOffline} -
    +
    +
    -

    +

    Dossier recommandé

    {#if recommendedTrackedMission} @@ -586,12 +583,12 @@

    {STATUS_LABELS[recommendedTrackedMission.record.currentStatus]} {#if formatNextAction(recommendedTrackedMission.record.nextActionAt)} - + Action {formatNextAction(recommendedTrackedMission.record.nextActionAt)} {/if} @@ -620,10 +617,10 @@
    {#if isLoading} -
    +
    -

    +

    Chargement candidatures

    @@ -661,7 +658,7 @@

    {:else if loadError} -
    +
    {:else if missions.length === 0} -
    +
    {:else} -
    +

    Missions

    {trackedMissions.length} suivies
    -
    +
    {#each trackedMissions.length > 0 ? trackedMissions : missions .slice(0, 20) .map( (mission) => ({ mission, record: tracking.getTrackingForMission(mission.id) ?? null }) ) as item (item.mission.id)} @@ -725,11 +722,11 @@
    {STATUS_LABELS[item.record?.currentStatus ?? 'detected']} - + {formatNextAction(item.record?.nextActionAt) ?? formatDate(getLastActivity(item.record))} @@ -744,7 +741,7 @@
    -

    +

    {STATUS_LABELS[selectedStatus]}

    @@ -793,7 +790,7 @@ {:else} @@ -831,10 +828,10 @@ aria-label="Historique des décisions" >
    -

    +

    Historique des décisions

    - + {selectedTracking?.history.length ?? 0} événement{(selectedTracking?.history .length ?? 0) > 1 ? 's'