From 24cbf35902c4eceba7af8f31b3760e467def4fc9 Mon Sep 17 00:00:00 2001
From: ordinarthur <@arthurbarre.js@gmail.com>
Date: Wed, 6 May 2026 23:05:34 +0200
Subject: [PATCH] =?UTF-8?q?fix(plans/wizard):=20variables=20dans=20le=20su?=
 =?UTF-8?q?jet=20+=20UX=20mobile=20resserr=C3=A9e?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Variables
- Le clic sur un chip de variable insère désormais au curseur du dernier
  champ focus (sujet OU corps), pas seulement dans le corps. On capture
  la position via onSelect/onClick/onKeyUp/onBlur et on utilise mousedown
  + preventDefault sur les chips pour que le focus ne quitte pas le champ
  ciblé avant l'insertion. Le label sous les chips indique en live
  quel champ est ciblé.
- OffsetInput (étape Cadence) : composant string-controlled qui accepte
  les états intermédiaires "" et "-" pour ne plus avoir le 0 fantôme
  quand on efface pour ressaisir un offset négatif.

Mobile
- Bottom nav (Annuler/Continuer) sticky en bas sur mobile, en flux normal
  sur desktop. Safe-area inset respectée.
- Header du wizard : back button compact (icône seule sous sm), compteur
  d'étape toujours visible, stepper centré.
- Card padding adaptatif (p-5 sm:p-7 lg:p-9).
- Step 3 — sélecteur d'étape : scroll horizontal sur mobile (au lieu de
  wrap), évite l'effet escalier avec 5 étapes.
- Step 3 — body textarea : min-h adaptatif (180px mobile, 260px sm+).
- CadenceTimeline : rail horizontal masqué sous lg ; en mobile, ligne
  verticale fine entre les nœuds (cohérent identité ◆) ; bouton retirer
  visible en permanence sur mobile (les hover-only ne marchent pas tactile).

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 .../plans/wizard/CadenceTimeline.tsx          |  49 +++--
 apps/web/src/routes/_app/plans_.nouveau.tsx   | 195 +++++++++++++++---
 2 files changed, 195 insertions(+), 49 deletions(-)

diff --git a/apps/web/src/components/plans/wizard/CadenceTimeline.tsx b/apps/web/src/components/plans/wizard/CadenceTimeline.tsx
index e75aea9..8cfe3e3 100644
--- a/apps/web/src/components/plans/wizard/CadenceTimeline.tsx
+++ b/apps/web/src/components/plans/wizard/CadenceTimeline.tsx
@@ -49,8 +49,8 @@ export function CadenceTimeline({
   onSelectStep?: (idx: number) => void;
 }) {
   return (
-    <div className="rounded-card border border-line bg-cream/40 p-6">
-      <div className="flex items-center justify-between mb-5">
+    <div className="rounded-card border border-line bg-cream/40 p-4 sm:p-6">
+      <div className="flex items-center justify-between mb-4 sm:mb-5">
         <p className="text-[12px] uppercase tracking-[0.1em] text-ink-3 font-semibold">
           Cadence
         </p>
@@ -60,27 +60,35 @@ export function CadenceTimeline({
       </div>
 
       <div className="relative">
-        {/* Rail */}
+        {/* Rail horizontal en desktop uniquement. En mobile, un trait vertical
+            plus court reliera chaque nœud à son label dans la liste verticale. */}
         {steps.length > 0 && (
           <div
             aria-hidden="true"
-            className="absolute left-4 right-4 top-[26px] h-px bg-rubis-glow lg:block"
+            className="hidden lg:block absolute left-6 right-6 top-[26px] h-px bg-rubis-glow"
           />
         )}
 
-        <ol className="relative flex flex-col gap-3 lg:flex-row lg:items-start lg:gap-2">
+        <ol className="relative flex flex-col lg:flex-row lg:items-start lg:gap-2">
           {steps.map((step, idx) => {
             const isSelected = idx === selectedIndex;
+            const isLast = idx === steps.length - 1 && steps.length >= 8;
             return (
               <li
                 key={idx}
-                className="group relative flex items-center gap-3 lg:flex-1 lg:flex-col lg:items-center"
+                className={cn(
+                  "group relative flex items-center gap-3 lg:flex-1 lg:flex-col lg:items-center lg:gap-0",
+                  // Ligne verticale entre nœuds en mobile (sauf le dernier)
+                  !isLast &&
+                    "lg:after:hidden after:absolute after:left-[25px] after:top-[52px] after:bottom-[-12px] after:w-px after:bg-rubis-glow",
+                  idx > 0 && "mt-3 lg:mt-0",
+                )}
               >
                 <button
                   type="button"
                   onClick={() => onSelectStep?.(idx)}
                   className={cn(
-                    "relative flex size-13 items-center justify-center rotate-45 border-2 transition-all",
+                    "shrink-0 relative flex size-13 items-center justify-center rotate-45 border-2 transition-all",
                     "focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-rubis-glow",
                     TONE_NODE_CLASS[step.tone],
                     isSelected && "ring-4 ring-rubis-glow scale-105",
@@ -94,8 +102,8 @@ export function CadenceTimeline({
                   </span>
                 </button>
 
-                <div className="flex flex-col items-start lg:items-center min-w-0 lg:mt-2">
-                  <p className="font-display text-[13px] font-semibold text-ink truncate max-w-[120px]">
+                <div className="flex-1 lg:flex-none flex flex-col items-start lg:items-center min-w-0 lg:mt-2">
+                  <p className="font-display text-[13px] font-semibold text-ink truncate max-w-[180px] lg:max-w-[120px]">
                     {TONE_LABELS[step.tone]}
                   </p>
                   <p className="text-[11px] text-ink-3 tabular-nums">
@@ -112,15 +120,17 @@ export function CadenceTimeline({
                       onRemoveStep(idx);
                     }}
                     className={cn(
-                      "absolute -top-1 -right-1 lg:right-auto lg:left-[calc(50%+18px)]",
-                      "flex size-5 items-center justify-center rounded-full",
+                      // Mobile : visible à droite de la ligne, plus accessible
+                      "shrink-0 lg:absolute lg:-top-1 lg:right-auto lg:left-[calc(50%+18px)]",
+                      "flex size-7 lg:size-5 items-center justify-center rounded-full",
                       "bg-white border border-line text-ink-3",
-                      "opacity-0 group-hover:opacity-100 focus:opacity-100",
+                      "lg:opacity-0 lg:group-hover:opacity-100 lg:focus:opacity-100",
                       "hover:text-rubis-deep hover:border-rubis transition-opacity",
                     )}
                     aria-label="Retirer cette étape"
                   >
-                    <X size={11} />
+                    <X size={13} className="lg:hidden" />
+                    <X size={11} className="hidden lg:block" />
                   </button>
                 )}
               </li>
@@ -129,12 +139,17 @@ export function CadenceTimeline({
 
           {/* + add at the end */}
           {steps.length < 8 && (
-            <li className="flex items-center gap-3 lg:flex-col lg:items-center">
+            <li
+              className={cn(
+                "flex items-center gap-3 lg:flex-col lg:items-center lg:gap-0",
+                steps.length > 0 && "mt-3 lg:mt-0",
+              )}
+            >
               <button
                 type="button"
                 onClick={onAddStep}
                 className={cn(
-                  "flex size-13 items-center justify-center rounded-full",
+                  "shrink-0 flex size-13 items-center justify-center rounded-full",
                   "border-2 border-dashed border-line bg-white text-ink-3",
                   "hover:border-rubis hover:text-rubis transition-colors",
                   "focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-rubis-glow",
@@ -144,7 +159,9 @@ export function CadenceTimeline({
               >
                 <Plus size={20} />
               </button>
-              <span className="text-[11px] text-ink-3 lg:mt-2">Ajouter</span>
+              <span className="text-[13px] sm:text-[11px] font-medium text-ink-2 lg:text-ink-3 lg:mt-2">
+                Ajouter une étape
+              </span>
             </li>
           )}
         </ol>
diff --git a/apps/web/src/routes/_app/plans_.nouveau.tsx b/apps/web/src/routes/_app/plans_.nouveau.tsx
index e9247cb..37519c2 100644
--- a/apps/web/src/routes/_app/plans_.nouveau.tsx
+++ b/apps/web/src/routes/_app/plans_.nouveau.tsx
@@ -199,20 +199,27 @@ function PlanCreateWizard() {
   const canProceed = stepCanProceed(step, draft);
 
   return (
-    <div className="flex flex-col gap-6">
-      <div className="flex items-center justify-between gap-4">
-        <Button asChild variant="ghost" size="sm">
-          <Link to="/plans">
-            <ArrowLeft size={14} /> Plans
+    <div className="flex flex-col gap-5 pb-[env(safe-area-inset-bottom)]">
+      {/* Header — sur mobile, on cache le label "Plans" : juste l'icône
+          + compteur d'étape. Stepper centré, plus compact. */}
+      <div className="flex items-center justify-between gap-3">
+        <Button asChild variant="ghost" size="sm" className="px-2">
+          <Link to="/plans" aria-label="Retour aux plans">
+            <ArrowLeft size={16} />
+            <span className="hidden sm:inline">Plans</span>
           </Link>
         </Button>
-        <Stepper steps={[...STEPS]} currentIndex={step - 1} className="flex-1 max-w-md" />
-        <span className="hidden sm:block text-[12px] text-ink-3 tabular-nums">
+        <Stepper
+          steps={[...STEPS]}
+          currentIndex={step - 1}
+          className="flex-1 max-w-md min-w-0"
+        />
+        <span className="text-[12px] text-ink-3 tabular-nums shrink-0">
           {step}/4
         </span>
       </div>
 
-      <Card padding="lg" className="overflow-visible">
+      <Card padding="none" className="p-5 sm:p-7 lg:p-9 overflow-visible">
         {step === 1 && <StepIdentity draft={draft} onChange={setDraft} />}
         {step === 2 && <StepCadence draft={draft} onChange={setDraft} />}
         {step === 3 && (
@@ -221,7 +228,16 @@ function PlanCreateWizard() {
         {step === 4 && <StepRecap draft={draft} />}
       </Card>
 
-      <div className="flex items-center justify-between gap-3">
+      {/* Bottom nav — sticky en bas sur mobile pour rester accessible quand
+          le formulaire est long, normal en flux sur desktop. */}
+      <div
+        className={cn(
+          "sticky bottom-0 z-10 -mx-4 px-4 py-3 sm:mx-0 sm:px-0 sm:py-0 sm:static",
+          "bg-cream/95 backdrop-blur-sm border-t border-line sm:bg-transparent sm:border-0 sm:backdrop-blur-none",
+          "flex items-center justify-between gap-3",
+        )}
+        style={{ paddingBottom: "max(0.75rem, env(safe-area-inset-bottom))" }}
+      >
         <Button
           variant="ghost"
           size="md"
@@ -457,17 +473,10 @@ function StepCadence({ draft, onChange }: { draft: Draft; onChange: (d: Draft) =
               htmlFor="step-offset"
               hint="Négatif = avant échéance. 0 = jour J. 30 = J+30."
             >
-              <Input
+              <OffsetInput
                 id="step-offset"
-                type="number"
-                min={-30}
-                max={180}
                 value={selected.offsetDays}
-                onChange={(e) =>
-                  updateStep(selectedIdx, {
-                    offsetDays: parseInt(e.target.value, 10) || 0,
-                  })
-                }
+                onCommit={(n) => updateStep(selectedIdx, { offsetDays: n })}
               />
             </Field>
             <Field label="Tonalité" htmlFor="step-tone">
@@ -521,7 +530,15 @@ function StepMessages({
 }) {
   const [selectedIdx, setSelectedIdx] = useState(0);
   const [aiOpen, setAiOpen] = useState(false);
+  const subjectRef = useRef<HTMLInputElement | null>(null);
   const bodyRef = useRef<HTMLTextAreaElement | null>(null);
+  // Quel champ a été focus en dernier — détermine où on insère une variable
+  // quand l'utilisateur clique sur un chip. Capturé sur focus ; on capture
+  // aussi la position du curseur sur blur pour pouvoir insérer même après
+  // que le clic sur le chip ait blur le champ.
+  const [focusedField, setFocusedField] = useState<"subject" | "body">("body");
+  const subjectSelRef = useRef<{ start: number; end: number }>({ start: 0, end: 0 });
+  const bodySelRef = useRef<{ start: number; end: number }>({ start: 0, end: 0 });
   const selected = draft.steps[selectedIdx];
 
   const updateSelected = (patch: Partial<DraftStep>) => {
@@ -538,19 +555,48 @@ function StepMessages({
     [draft.steps, clients],
   );
 
+  const captureSubjectSelection = () => {
+    const el = subjectRef.current;
+    if (el) subjectSelRef.current = { start: el.selectionStart ?? el.value.length, end: el.selectionEnd ?? el.value.length };
+  };
+  const captureBodySelection = () => {
+    const el = bodyRef.current;
+    if (el) bodySelRef.current = { start: el.selectionStart, end: el.selectionEnd };
+  };
+
   const insertVariable = (token: string) => {
-    if (!bodyRef.current) {
-      updateSelected({ body: (selected?.body ?? "") + token });
+    if (!selected) return;
+    if (focusedField === "subject") {
+      const el = subjectRef.current;
+      const current = selected.subject;
+      const { start, end } = subjectSelRef.current;
+      const insertAt = Math.min(Math.max(start, 0), current.length);
+      const insertEnd = Math.min(Math.max(end, insertAt), current.length);
+      const next = current.slice(0, insertAt) + token + current.slice(insertEnd);
+      updateSelected({ subject: next.slice(0, 200) });
+      requestAnimationFrame(() => {
+        if (!el) return;
+        el.focus();
+        const caret = insertAt + token.length;
+        el.setSelectionRange(caret, caret);
+        subjectSelRef.current = { start: caret, end: caret };
+      });
       return;
     }
-    const ta = bodyRef.current;
-    const start = ta.selectionStart;
-    const end = ta.selectionEnd;
-    const next = (selected?.body ?? "").slice(0, start) + token + (selected?.body ?? "").slice(end);
-    updateSelected({ body: next });
+    // body (défaut)
+    const el = bodyRef.current;
+    const current = selected.body;
+    const { start, end } = bodySelRef.current;
+    const insertAt = Math.min(Math.max(start, 0), current.length);
+    const insertEnd = Math.min(Math.max(end, insertAt), current.length);
+    const next = current.slice(0, insertAt) + token + current.slice(insertEnd);
+    updateSelected({ body: next.slice(0, 5000) });
     requestAnimationFrame(() => {
-      ta.focus();
-      ta.setSelectionRange(start + token.length, start + token.length);
+      if (!el) return;
+      el.focus();
+      const caret = insertAt + token.length;
+      el.setSelectionRange(caret, caret);
+      bodySelRef.current = { start: caret, end: caret };
     });
   };
 
@@ -567,8 +613,9 @@ function StepMessages({
         </p>
       </div>
 
-      {/* Sélecteur d'étape */}
-      <div className="flex flex-wrap gap-2">
+      {/* Sélecteur d'étape — scroll horizontal sur mobile, wrap au-delà.
+          Le -mx + px compense pour pouvoir scroller jusqu'au bord de la card. */}
+      <div className="-mx-1 px-1 flex gap-2 overflow-x-auto sm:flex-wrap sm:overflow-visible scrollbar-thin">
         {draft.steps.map((s, idx) => {
           const filled = s.subject.trim() !== "" && s.body.trim() !== "";
           return (
@@ -577,7 +624,7 @@ function StepMessages({
               type="button"
               onClick={() => setSelectedIdx(idx)}
               className={cn(
-                "inline-flex items-center gap-2 rounded-default border px-3 py-1.5",
+                "shrink-0 inline-flex items-center gap-2 rounded-default border px-3 py-1.5",
                 "text-[12.5px] font-medium transition-all",
                 idx === selectedIdx
                   ? "border-rubis bg-rubis-glow text-rubis-deep"
@@ -616,9 +663,18 @@ function StepMessages({
             <Field label="Sujet de l'email" htmlFor="step-subject">
               <Input
                 id="step-subject"
+                ref={subjectRef}
                 placeholder="Ex. Petit rappel — facture {{numero}}"
                 value={selected.subject}
                 onChange={(e) => updateSelected({ subject: e.target.value })}
+                onFocus={() => {
+                  setFocusedField("subject");
+                  captureSubjectSelection();
+                }}
+                onSelect={captureSubjectSelection}
+                onBlur={captureSubjectSelection}
+                onKeyUp={captureSubjectSelection}
+                onClick={captureSubjectSelection}
                 maxLength={200}
               />
             </Field>
@@ -627,9 +683,18 @@ function StepMessages({
               <Textarea
                 id="step-body"
                 ref={bodyRef}
-                rows={12}
+                rows={8}
+                className="min-h-[180px] sm:min-h-[260px]"
                 value={selected.body}
                 onChange={(e) => updateSelected({ body: e.target.value })}
+                onFocus={() => {
+                  setFocusedField("body");
+                  captureBodySelection();
+                }}
+                onSelect={captureBodySelection}
+                onBlur={captureBodySelection}
+                onKeyUp={captureBodySelection}
+                onClick={captureBodySelection}
                 placeholder="Bonjour {{client.contactFirstName}}, ..."
                 maxLength={5000}
               />
@@ -637,14 +702,25 @@ function StepMessages({
 
             <div>
               <p className="text-[11.5px] text-ink-3 mb-2">
-                Cliquez pour insérer une variable au curseur :
+                Cliquez pour insérer une variable dans{" "}
+                <strong className="text-ink-2">
+                  {focusedField === "subject" ? "le sujet" : "le corps"}
+                </strong>{" "}
+                au curseur :
               </p>
               <div className="flex flex-wrap gap-1.5">
                 {TEMPLATE_VARIABLES.map((v) => (
                   <button
                     key={v.token}
                     type="button"
-                    onClick={() => insertVariable(v.token)}
+                    // onMouseDown au lieu de onClick : le mousedown se déclenche
+                    // AVANT le blur de l'input, donc subjectSelRef/bodySelRef
+                    // contiennent encore la position correcte. preventDefault
+                    // empêche le focus de quitter le champ visé.
+                    onMouseDown={(e) => {
+                      e.preventDefault();
+                      insertVariable(v.token);
+                    }}
                     className="inline-flex items-center rounded-full border border-line bg-cream-2/50 px-2.5 py-1 text-[11.5px] text-ink-2 hover:border-rubis hover:text-rubis-deep transition-colors"
                   >
                     {v.label}
@@ -782,6 +858,59 @@ function stepCanProceed(step: WizardStep, draft: Draft): boolean {
   }
 }
 
+/**
+ * Input numérique signé piloté en string local. Évite le 0 fantôme quand on
+ * efface pour ressaisir, et accepte les états intermédiaires "" et "-" le
+ * temps que l'utilisateur termine de taper. On clamp [-30, 180] sur commit
+ * et on retombe à 0 au blur si l'utilisateur sort en laissant vide.
+ */
+function OffsetInput({
+  id,
+  value,
+  onCommit,
+}: {
+  id: string;
+  value: number;
+  onCommit: (n: number) => void;
+}) {
+  const [local, setLocal] = useState<string>(String(value));
+
+  // Sync depuis l'extérieur quand on change d'étape sélectionnée.
+  useEffect(() => {
+    setLocal(String(value));
+  }, [value]);
+
+  return (
+    <Input
+      id={id}
+      type="text"
+      inputMode="numeric"
+      pattern="-?[0-9]*"
+      value={local}
+      onChange={(e) => {
+        const next = e.target.value;
+        // Autorise vide, juste "-", ou entier signé.
+        if (next === "" || next === "-" || /^-?\d{0,3}$/.test(next)) {
+          setLocal(next);
+          if (next !== "" && next !== "-") {
+            const parsed = parseInt(next, 10);
+            if (!Number.isNaN(parsed)) {
+              const clamped = Math.max(-30, Math.min(180, parsed));
+              onCommit(clamped);
+            }
+          }
+        }
+      }}
+      onBlur={() => {
+        if (local === "" || local === "-") {
+          setLocal("0");
+          onCommit(0);
+        }
+      }}
+    />
+  );
+}
+
 /**
  * Détecte les variables sensibles utilisées dans les templates et compte
  * combien de clients existants n'ont pas le champ correspondant rempli.