feat(targets): MOOD_STABILITY headline switches from σ to verbal label

The card used to render the raw σ value ("0.42 σ") as the big headline
number. Most users cannot interpret a standard deviation; the W3e
research found this was the single biggest "what does this mean?"
friction point in the v1.4.22 page.

Replace with a three-state verbal label keyed by the
`moodStabilityLabel(sigma)` helper landed in the previous phase
(thresholds: < 1.0 stable, < 2.0 variable, ≥ 2.0 highly variable).
Translations under `targets.mood.stability.{stable,variable,highlyVariable}`
in EN + DE.

The raw σ value stays one hover away — the headline carries a
tooltip surfacing "σ = 0.42" so power users keep the precise number
without forcing every visitor to decode it. Headline also gets a
`capitalize` class so the lowercase i18n string ("stable" / "stabil")
renders sentence-cased.
This commit is contained in:
Marc-André Bombeck committed 2026-05-14 12:34:47 +02:00
1 parent f2b9f843b1
commit 9acee2bd81
1 file changed
+25 -7
+25 -7
View File
@@ -454,13 +454,31 @@ export function TargetCard({
<div className="flex flex-col gap-1">
<div className="flex items-baseline gap-2">
{moodStabilityValue && moodStabilityCopy ? (
<span
className="text-foreground text-2xl leading-none font-semibold sm:text-3xl"
data-slot="target-headline-value"
data-mood-stability={moodStabilityValue}
>
{moodStabilityCopy}
</span>
// v1.4.25 W3e — verbal label is the headline; the raw σ
// moves into a tooltip so power users keep the precise
// number one hover away without forcing every visitor
// to read "0.42 σ" and decode it.
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<span
className="text-foreground text-2xl leading-none font-semibold capitalize cursor-help sm:text-3xl"
data-slot="target-headline-value"
data-mood-stability={moodStabilityValue}
>
{moodStabilityCopy}
</span>
</TooltipTrigger>
<TooltipContent>
<p className="text-xs">
σ ={" "}
{target.current != null
? target.current.toFixed(2)
: "—"}
</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
) : isBp && bpDiastolic?.current != null ? (
<span
className="text-foreground flex items-baseline gap-1 text-2xl leading-none font-semibold sm:text-3xl"