kyuno/batchCooking
1
0
Fork 0
Code Issues 5 Pull requests 1 Projects Releases Packages Wiki Activity Actions

fix(web): retire l'affichage visuel du contexte des tech steps

Browse source 
Ne touche que le rendu — le backend continue de calculer et de
persister contextStart/contextEnd (tech-step-matcher.ts, StepTechStep),
et splitDescriptionByTechSteps continue de découper la description
autour du contexte (segments isKeyword: false). StepDescription.tsx
rend désormais ces segments comme du texte brut, comme un segment sans
technique — plus d'encadré/bordure autour de la clause, seul le
mot-clé reste surligné avec sa tooltip.

.step-tech-step-context (CSS) retirée, devenue inutilisée.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
Nicolas 2026-08-21 18:42:29 +02:00
parent c190f3f21c
commit f741bbb4f1
3 changed files with 25 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
apps/web/src/features/recipes/recipes.scss
View file

@ -627,27 +627,11 @@
}
}
// The wider clause a `.step-tech-step` keyword was found in (see
// StepDescription.tsx/highlight-tech-steps.ts's `contextStart`/
// `contextEnd`) — a lighter treatment than the keyword itself (no dotted
// underline, no hover/focus state, no cursor: help: purely visual, not
// interactive, the keyword segment inside/beside it already carries the
// tooltip) so the keyword still reads as the strongest highlight, this
// just shows how much of the sentence it was understood from. The
// original 6% background tint (half the keyword's own 14%) turned out to
// be imperceptible in practice against this dark theme — `--color-primary`
// itself isn't bright/saturated enough for a same-order-of-magnitude
// percentage cut in half to still read as "highlighted" rather than "not
// highlighted at all" — so this pairs a still-subtle 10% background with a
// thin solid bottom border for a second, independent visual cue.
.step-tech-step-context {
display: inline;
padding: 0 0.15em;
margin: 0;
border-radius: 0.2em;
background: color-mix(in srgb, var(--color-primary) 10%, transparent);
border-bottom: 1px solid color-mix(in srgb, var(--color-primary) 45%, transparent);
}
// `.step-tech-step-context` (the wider clause a `.step-tech-step` keyword
// was found in) used to be highlighted here too, more subtly — turned back
// off (see `StepDescription.tsx`'s doc comment): the backend still
// computes and persists `contextStart`/`contextEnd`, this file just no
// longer gives that class any styling to render with.
// --- Favorite star toggle (detail panel header) -----------------------------
.favorite-star-button {

28
apps/web/src/features/recipes/steps/StepDescription.tsx
View file

@ -9,11 +9,17 @@ import { splitDescriptionByTechSteps } from "./highlight-tech-steps";
* matched words highlighted and given a {@link Tooltip} naming the
* technique (e.g. hovering/focusing "hacher" in "Hacher les oignons" shows
* "Hacher") — `RecipeDetailPanel`'s replacement for a bare `<p>{description}</p>`.
* When a match also carries `contextStart`/`contextEnd` (see
* `StepTechStepView`), the wider clause the keyword was found in (e.g.
* "Dans une poêle chaude" around a `preheat` keyword of "poêle chaude") is
* highlighted too, more subtly — no tooltip of its own, the keyword inside
* it already carries one.
*
* A match's wider `contextStart`/`contextEnd` clause (see
* `StepTechStepView`) is deliberately *not* visualized here — only the
* tight keyword span is highlighted. The backend still computes and
* persists it (`tech-step-matcher.ts`/`StepTechStep`), and
* `splitDescriptionByTechSteps` still splits the description around it
* (`isKeyword: false` context segments), but this component now renders
* those non-keyword segments as plain text, same as a segment with no
* technique at all — the visual "wider clause, subtler highlight"
* treatment (`.step-tech-step-context`) turned out to be more visual noise
* than useful signal in practice and was turned back off.
*
* `techStep.key` resolves its tooltip label through `catalog.techSteps.<key>`
* i18n, the same pattern every other reference catalog (diets, units, …)
@ -41,14 +47,10 @@ export function StepDescription({
if (!segment.techStep) return <Fragment key={key}>{segment.text}</Fragment>;
if (!segment.isKeyword) {
// Context-only run — subtly highlighted, no tooltip of its own
// (the keyword segment elsewhere in this same technique already
// has one) and not interactive, unlike the keyword's <button>.
return (
<span key={key} className="step-tech-step-context">
{segment.text}
</span>
);
// Context-only run — rendered as plain text, same as a segment
// with no technique at all (see this component's doc comment for
// why the wider-clause highlight was turned back off).
return <Fragment key={key}>{segment.text}</Fragment>;
}
return (
<Tooltip key={key} content={t(`catalog.techSteps.${segment.techStep.key}`)}>

8
apps/web/src/features/recipes/steps/highlight-tech-steps.ts
View file

@ -7,9 +7,11 @@ import type { StepTechStepView } from "@batch-cooking/shared";
* the tight keyword span (`isKeyword: true`, e.g. "préchauffer") and, when
* `StepTechStepView.contextStart`/`contextEnd` are present, the wider
* surrounding clause around it (`isKeyword: false`, e.g. "Dans une poêle
* chaude" around a keyword of "poêle chaude"). What `StepDescription.tsx`
* renders: plain segments as-is, keyword segments in a strong
* tooltip-bearing highlight, context segments in a subtler one around it.
* chaude" around a keyword of "poêle chaude"). `StepDescription.tsx`
* currently renders `isKeyword: false` segments as plain text (no visual
* distinction from a segment with no technique at all) — the context split
* still happens here so the data stays available, but its own dedicated
* highlight was turned back off; see that component's doc comment.
*/
export interface DescriptionSegment {
text: string;