Merge pull request 'Polish calculator large number display' (#2) from feat/import-export-by-text into main

Reviewed-on: #2

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

@@ -22,6 +22,18 @@ function formatResult(value) {
   return Number.parseFloat(value.toFixed(6)).toString();
 }
 
+function formatDisplayResult(value) {
+  if (!Number.isFinite(value)) return "";
+  return new Intl.NumberFormat("fr-FR", { maximumFractionDigits: 6 }).format(Number.parseFloat(value.toFixed(6)));
+}
+
+function getResultLengthClass(value) {
+  const length = formatResult(value).replace(/[^\d]/g, "").length;
+  if (length >= 16) return "is-compact";
+  if (length >= 12) return "is-long";
+  return "";
+}
+
 function getChildren(entries, parentId) {
   return entries.filter((entry) => (entry.parentId || "") === parentId);
 }
@@ -151,9 +163,9 @@ export function CalculatorModule({ toolboxId, moduleId, context, editing }) {
             <span>{textContent.expressionLabel || "Calcul"}</span>
             <input value={expression} onChange={(event) => setExpression(event.target.value)} placeholder={textContent.expressionPlaceholder || "10*10"} inputMode="decimal" />
           </label>
-          <div className="calculator-result" aria-live="polite">
+          <div className={`calculator-result ${result == null ? "" : getResultLengthClass(result)}`} aria-live="polite">
             <span>{textContent.resultLabel || "Résultat"}</span>
-            <strong>{result == null ? "-" : formatResult(result)}</strong>
+            <strong>{result == null ? "-" : formatDisplayResult(result)}</strong>
           </div>
           <label>
             <span>{textContent.labelLabel || "Libellé"}</span>
@@ -233,13 +245,16 @@ function CalculatorEntries({ entries, parentId, getScopedParentId, activeParentI
             {entry.id === editingId ? (
               <>
                 <span className="tool-split-entry-value is-readonly" title={textContent.readonlyValueTitle || "Quantité non modifiable"}>
-                  <strong>{formatResult(entry.value)}</strong>
+                  <strong>{formatDisplayResult(entry.value)}</strong>
                 </span>
                 <EditableCalculatorLabel entry={entry} textContent={textContent} onRename={onRename} onDone={() => setEditingId("")} />
               </>
             ) : (
               <button className="tool-split-entry-summary" type="button" onClick={() => onUse(entry)} title={textContent.useEntryTitle || "Utiliser comme base"}>
-                <span><strong>{formatResult(entry.value)}</strong> {entry.label}</span>
+                <span>
+                  <strong>{formatDisplayResult(entry.value)}</strong>
+                  {entry.label && <em>{entry.label}</em>}
+                </span>
               </button>
             )}
             <button type="button" onClick={() => setEditingId(entry.id === editingId ? "" : entry.id)} aria-label={`${textContent.renameTitle || "Renommer"} ${entry.label}`} title={textContent.renameTitle || "Renommer"}>

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

@@ -486,6 +486,11 @@ function EquipmentItem({ equipment, reorder, textContent, onUpdate, onDelete })
     onCommit: (name) => onUpdate((current) => ({ ...current, name: name || current.name })),
     blurOnEscape: true
   });
+  const obtainEdit = useInlineEdit({
+    value: equipment.obtain || "",
+    onCommit: (obtain) => onUpdate((current) => ({ ...current, obtain })),
+    commitOnEnter: false
+  });
   const className = [
     "equipment-planner-item",
     equipment.active ? "is-active" : "is-inactive",
@@ -559,7 +564,7 @@ function EquipmentItem({ equipment, reorder, textContent, onUpdate, onDelete })
             <section className="equipment-planner-craft-tab">
               <label className="equipment-planner-field">
                 <span>{textContent.obtainLabel || "Obtention"}</span>
-                <textarea value={equipment.obtain} onChange={(event) => onUpdate((current) => ({ ...current, obtain: event.target.value }))} placeholder={textContent.obtainPlaceholder || "Comment obtenir ou créer cet équipement"} />
+                <textarea {...obtainEdit.getInputProps({ placeholder: textContent.obtainPlaceholder || "Comment obtenir ou créer cet équipement" })} />
               </label>
               <MaterialsEditor equipment={equipment} textContent={textContent} editing onUpdate={onUpdate} />
             </section>

website/src/styles/_toolboxes.scss

@@ -5206,6 +5206,35 @@ button.combo-input-token.combo-value-grab .ui-icon {
   user-select: none;
 }
 
+.calculator-entry .tool-split-entry-summary > span {
+  display: flex;
+  min-width: 0;
+  align-items: baseline;
+  gap: 7px;
+}
+
+.calculator-entry .tool-split-entry-summary strong,
+.calculator-entry .tool-split-entry-value strong {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.calculator-entry .tool-split-entry-summary strong {
+  flex: 0 1 auto;
+}
+
+.calculator-entry .tool-split-entry-summary em {
+  min-width: 0;
+  flex: 1 1 auto;
+  overflow: hidden;
+  color: var(--color-text-secondary);
+  font-style: normal;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .calculator-form label span,
 .calculator-result span,
 .tool-split-root-button {
@@ -5226,11 +5255,27 @@ button.combo-input-token.combo-value-grab .ui-icon {
 }
 
 .calculator-result strong {
+  display: block;
+  min-width: 0;
+  max-width: 100%;
+  overflow: hidden;
   color: var(--color-text-primary);
   font-size: clamp(1.55rem, 3vw, 2.15rem);
   font-weight: 900;
   line-height: 0.95;
   text-align: right;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.calculator-result.is-long strong {
+  font-size: 1.55rem;
+  line-height: 1;
+}
+
+.calculator-result.is-compact strong {
+  font-size: 1.25rem;
+  line-height: 1.05;
 }
 
 .table-module {