Improve calculator progress tracking and responsive layout

website/src/features/toolboxes/modules/CalculatorModule.jsx

@@ -7,7 +7,7 @@ import { CalculatorEntries, FormattedCalculatorNumber } from "./CalculatorEntrie
 import { TextExchangeActions } from "./TextExchangeActions.jsx";
 import {
   BASE_TOKEN,
-  calculateExpression,
+  calculateRemainingValue,
   createStoredFormula,
   evaluateCalculatorEntries,
   formatDisplayResult,
@@ -15,7 +15,8 @@ import {
   getDescendantIds,
   getEditableFormula,
   getEntriesInTreeOrder,
-  getResultLengthClass
+  getResultLengthClass,
+  parseCalculatorCurrent
 } from "./calculatorUtils.js";
 
 function focusExpressionInputAtEnd(element) {
@@ -41,6 +42,8 @@ export function CalculatorModule({ toolboxId, moduleId, context, textExchangeOpe
   const calculatedData = useMemo(() => ({ ...data, entries: calculatedEntries }), [data, calculatedEntries]);
   const textContent = context.moduleText?.calculator || {};
   const [expression, setExpression] = useState("");
+  const [current, setCurrent] = useState("");
+  const [showCurrent, setShowCurrent] = useState(false);
   const [label, setLabel] = useState("");
   const [activeParentId, setActiveParentId] = useState("");
   const [editingEntryId, setEditingEntryId] = useState("");
@@ -48,12 +51,13 @@ export function CalculatorModule({ toolboxId, moduleId, context, textExchangeOpe
   const [copied, setCopied] = useState(false);
   const calculatorCardRef = useRef(null);
   const expressionInputRef = useRef(null);
+  const currentInputRef = useRef(null);
   const pendingExpressionFocusRef = useRef(false);
   const editingEntry = calculatedEntries.find((entry) => entry.id === editingEntryId);
   const formulaParentId = editingEntry ? editingEntry.parentId || "" : activeParentId;
   const formulaParent = calculatedEntries.find((entry) => entry.id === formulaParentId);
   const formMode = editingEntry ? "edit" : formulaParent ? "child" : "root";
-  const result = useMemo(() => calculateExpression(expression, formulaParent?.value), [formulaParent?.value, expression]);
+  const result = useMemo(() => calculateRemainingValue(expression, current, formulaParent?.value), [current, formulaParent?.value, expression]);
   const scopeParentId = (parentId = "") => `${moduleId}:${parentId}`;
   const reorder = useGroupedReorder({
     namespace: "calculator",
@@ -99,13 +103,16 @@ export function CalculatorModule({ toolboxId, moduleId, context, textExchangeOpe
     if (result == null) return;
     const cleanLabel = label.trim();
     const storedFormula = createStoredFormula(expression, formulaParent?.value);
+    const storedCurrent = parseCalculatorCurrent(current);
+    if (storedCurrent == null) return;
 
     if (editingEntry) {
       save(calculatedEntries.map((entry) => entry.id === editingEntry.id ? {
         ...entry,
         label: cleanLabel,
         value: result,
-        formula: storedFormula
+        formula: storedFormula,
+        current: storedCurrent
       } : entry));
       setLabel(cleanLabel);
       return;
@@ -118,10 +125,13 @@ export function CalculatorModule({ toolboxId, moduleId, context, textExchangeOpe
         parentId: formulaParentId,
         label: cleanLabel,
         value: result,
-        formula: storedFormula
+        formula: storedFormula,
+        current: storedCurrent
       }
     ]);
     setExpression(formulaParent ? BASE_TOKEN : "");
+    setCurrent("");
+    setShowCurrent(false);
     setLabel("");
   }
 
@@ -129,6 +139,8 @@ export function CalculatorModule({ toolboxId, moduleId, context, textExchangeOpe
     setEditingEntryId(entry.id);
     setActiveParentId("");
     setExpression(getEditableFormula(entry));
+    setCurrent(entry.current ? formatResult(entry.current) : "");
+    setShowCurrent(Boolean(entry.current));
     setLabel(entry.label || "");
   }
 
@@ -141,7 +153,8 @@ export function CalculatorModule({ toolboxId, moduleId, context, textExchangeOpe
         parentId: entry.id,
         label: "",
         value: Number.isFinite(entry.value) ? entry.value : 0,
-        formula: BASE_TOKEN
+        formula: BASE_TOKEN,
+        current: 0
       }
     ]);
     setEditingEntryId("");
@@ -149,6 +162,8 @@ export function CalculatorModule({ toolboxId, moduleId, context, textExchangeOpe
     setEditingEntryId(childId);
     setActiveParentId("");
     setExpression(BASE_TOKEN);
+    setCurrent("");
+    setShowCurrent(false);
     setLabel("");
   }
 
@@ -162,12 +177,16 @@ export function CalculatorModule({ toolboxId, moduleId, context, textExchangeOpe
       setEditingEntryId("");
       setLabel("");
       setExpression("");
+      setCurrent("");
+      setShowCurrent(false);
     }
     save(calculatedEntries.filter((entry) => !deletedIds.has(entry.id)));
   }
 
   function resetCalculator() {
     setExpression("");
+    setCurrent("");
+    setShowCurrent(false);
     setLabel("");
     setActiveParentId("");
     setEditingEntryId("");
@@ -177,9 +196,21 @@ export function CalculatorModule({ toolboxId, moduleId, context, textExchangeOpe
     setActiveParentId("");
     setEditingEntryId("");
     setExpression("");
+    setCurrent("");
+    setShowCurrent(false);
     setLabel("");
   }
 
+  function toggleCurrent() {
+    if (showCurrent) {
+      setCurrent("");
+      setShowCurrent(false);
+      return;
+    }
+    setShowCurrent(true);
+    window.requestAnimationFrame(() => currentInputRef.current?.focus());
+  }
+
   async function copyChecklistImport() {
     const text = getEntriesInTreeOrder(calculatedEntries)
       .map((entry) => `${entry.label || formatResult(entry.value)}:${formatResult(entry.value)}`)
@@ -201,61 +232,91 @@ export function CalculatorModule({ toolboxId, moduleId, context, textExchangeOpe
         <div className="calculator-card" ref={calculatorCardRef}>
           <div className="calculator-field">
             <span>{textContent.expressionLabel || "Calcul"}</span>
-            {formulaParent ? (
-              <MixTagsInput
-                aria-label={textContent.expressionLabel || "Calcul"}
-                className="calculator-expression-input"
-                inputRef={expressionInputRef}
-                onChange={setExpression}
-                onKeyDown={(event) => {
-                  if (event.key !== "Enter") return;
-                  event.preventDefault();
-                  event.currentTarget.closest("form")?.requestSubmit();
-                }}
-                formulaSpacing
-                insertToken={{
-                  value: "base",
-                  label: textContent.baseTokenLabel || "Valeur du parent",
-                  icon: "parent",
-                  title: textContent.insertBaseTitle || "Ajouter la valeur du parent"
-                }}
-                placeholder={textContent.formulaPlaceholder || "base * 3"}
-                tokens={[{
-                  value: "base",
-                  label: textContent.baseTokenLabel || "Valeur du parent"
-                }]}
-                value={expression}
-              />
-            ) : (
-              <input
-                type="text"
-                aria-label={textContent.expressionLabel || "Calcul"}
-                className="calculator-expression-input nds-input"
+            <div className={`calculator-expression-row ${showCurrent ? "has-current" : ""}`}>
+              {showCurrent && <span className="calculator-total-label">{textContent.totalLabel || "Total"}</span>}
+              {formulaParent ? (
+                <MixTagsInput
+                  aria-label={textContent.expressionLabel || "Calcul"}
+                  className="calculator-expression-input"
+                  inputRef={expressionInputRef}
+                  onChange={setExpression}
+                  onKeyDown={(event) => {
+                    if (event.key !== "Enter") return;
+                    event.preventDefault();
+                    event.currentTarget.closest("form")?.requestSubmit();
+                  }}
+                  formulaSpacing
+                  insertToken={{
+                    value: "base",
+                    label: textContent.baseTokenLabel || "Valeur du parent",
+                    icon: "parent",
+                    title: textContent.insertBaseTitle || "Ajouter la valeur du parent"
+                  }}
+                  placeholder={textContent.formulaPlaceholder || "base * 3"}
+                  tokens={[{
+                    value: "base",
+                    label: textContent.baseTokenLabel || "Valeur du parent"
+                  }]}
+                  value={expression}
+                />
+              ) : (
+                <input
+                  type="text"
+                  aria-label={textContent.expressionLabel || "Calcul"}
+                  className="calculator-expression-input nds-input"
+                  data-size="sm"
+                  ref={expressionInputRef}
+                  onChange={(event) => setExpression(event.target.value)}
+                  onKeyDown={(event) => {
+                    if (event.key !== "Enter") return;
+                    event.preventDefault();
+                    event.currentTarget.closest("form")?.requestSubmit();
+                  }}
+                  inputMode="decimal"
+                  placeholder={textContent.expressionPlaceholder || "10*10"}
+                  value={expression}
+                />
+              )}
+              <button
+                className="calculator-current-toggle nds-icon-button"
                 data-size="sm"
-                ref={expressionInputRef}
-                onChange={(event) => setExpression(event.target.value)}
-                onKeyDown={(event) => {
-                  if (event.key !== "Enter") return;
-                  event.preventDefault();
-                  event.currentTarget.closest("form")?.requestSubmit();
-                }}
-                inputMode="decimal"
-                placeholder={textContent.expressionPlaceholder || "10*10"}
-                value={expression}
-              />
-            )}
+                type="button"
+                onClick={toggleCurrent}
+                aria-label={textContent.subtractCurrentTitle || "Soustraire l'actuel"}
+                aria-pressed={showCurrent}
+                title={textContent.subtractCurrentTitle || "Soustraire l'actuel"}
+              >
+                <span aria-hidden="true">−</span>
+              </button>
+            </div>
           </div>
+          {showCurrent && (
+            <div className="calculator-current-field">
+              <span>{textContent.currentLabel || "Actuel"}</span>
+              <input
+                aria-label={textContent.currentLabel || "Actuel"}
+                className="nds-input"
+                data-size="sm"
+                ref={currentInputRef}
+                type="text"
+                inputMode="decimal"
+                value={current}
+                onChange={(event) => setCurrent(event.target.value)}
+                placeholder={textContent.currentPlaceholder || "0"}
+              />
+            </div>
+          )}
           <div className={`calculator-result ${result == null ? "" : getResultLengthClass(result)}`} aria-live="polite">
             <span>{textContent.resultLabel || "Résultat"}</span>
             <strong aria-label={result == null ? "-" : formatDisplayResult(result)}>
               <FormattedCalculatorNumber value={result} />
             </strong>
           </div>
-          <label>
+          <label className="calculator-label-field">
             <span>{textContent.labelLabel || "Libellé"}</span>
             <input className="nds-input" data-size="sm" type="text" value={label} onChange={(event) => setLabel(event.target.value)} placeholder={textContent.labelPlaceholder || "Lingots de fer"} />
           </label>
-          <button className="nds-button" data-size="sm" data-variant="primary" disabled={result == null}>{formMode === "edit" ? textContent.updateButton || "Mettre à jour" : textContent.saveButton || "Enregistrer"}</button>
+          <button className="calculator-save-button nds-button" data-size="sm" data-variant="primary" disabled={result == null}>{formMode === "edit" ? textContent.updateButton || "Mettre à jour" : textContent.saveButton || "Enregistrer"}</button>
         </div>
       </form>
       <div