Add percentage to FSRS spinner (#3679)

* Add percentage to FSRS spinner

This commit add a percentage option in SpinBox and SpinBoxFloatRow, set to False
by default.

If it's true, a percent symbol is added at the end of the line before
the increase/decrease button.

While the value is represented as a percentage without decimal places,
the internal representation is not changed. Which mean that a
multiplier must used to compute the string value, indicate to the
input field the min, max and step, and when updating the result.

* Remove unsightly percentage sign, and update historical retention too

https://github.com/ankitects/anki/pull/3679#issuecomment-2579636981

---------

Co-authored-by: Damien Elmes <gpg@ankiweb.net>

ftl/core/deck-config.ftl

@@ -385,7 +385,7 @@ deck-config-fsrs-tooltip =
     more material in the same amount of time. This setting is shared by all presets.
 
 deck-config-desired-retention-tooltip =
-    The default value of 0.9 schedules cards so that you have a 90% chance of remembering them when
+    By default, Anki schedules cards so that you have a 90% chance of remembering them when
     they come up for review again. If you increase this value, Anki will show cards more frequently
     to increase the chances of you remembering them. If you decrease the value, Anki will show cards
     less frequently, and you will forget more of them. Be conservative when adjusting this - higher

ts/lib/components/SpinBox.svelte

@@ -16,9 +16,16 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     export let step = 1;
     export let min = 1;
     export let max = 9999;
+    /**
+     * Whether the value is shown as a percentage to the user.
+     * It's saved as a proportion.
+     */
+    export let percentage = false;
 
     let input: HTMLInputElement;
     let focused = false;
+    let multiplier: number;
+    $: multiplier = percentage ? 100 : 1;
 
     /** Set value to a new number, clamping it to a valid range, and
         leaving it unchanged if `newValue` is NaN. */
@@ -36,18 +43,25 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         tick().then(() => (input.value = stringValue));
     }
 
+    /**
+     * The number of decimal places to record. May be different than the number of decimal places displayed for percentages.
+     * @param value The size of the step.
+     */
     function decimalPlaces(value: number) {
         if (Math.floor(value) === value) {
+            // If the step is an integer, do not show decimal places.
             return 0;
         }
-        return value.toString().split(".")[1].length || 0;
+        const places = value.toString().split(".")[1].length || 0;
+        const displayedPlace = percentage ? places - 2 : places;
+        return Math.max(0, displayedPlace);
     }
 
     let stringValue: string;
-    $: stringValue = value.toFixed(decimalPlaces(step));
+    $: stringValue = (value * multiplier).toFixed(decimalPlaces(step));
 
     function update(this: HTMLInputElement): void {
-        updateValue(parseFloat(this.value));
+        updateValue(parseFloat(this.value) / multiplier);
     }
 
     function handleWheel(event: WheelEvent) {
@@ -88,9 +102,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         type="number"
         pattern="[0-9]*"
         inputmode="numeric"
-        {min}
-        {max}
-        {step}
+        min={min * multiplier}
+        max={max * multiplier}
+        step={step * multiplier}
         value={stringValue}
         bind:this={input}
         on:blur={update}

ts/routes/deck-options/AdvancedOptions.svelte

@@ -212,6 +212,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                 defaultValue={defaults.historicalRetention}
                 min={0.5}
                 max={1.0}
+                percentage={true}
             >
                 <SettingTitle
                     on:click={() =>

ts/routes/deck-options/FsrsOptions.svelte

@@ -382,6 +382,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     defaultValue={defaults.desiredRetention}
     min={0.7}
     max={0.99}
+    percentage={true}
 >
     <SettingTitle on:click={() => openHelpModal("desiredRetention")}>
         {tr.deckConfigDesiredRetention()}

ts/routes/deck-options/SpinBoxFloatRow.svelte

@@ -14,6 +14,7 @@
     export let min = 0;
     export let max = 9999;
     export let step = 0.01;
+    export let percentage = false;
 </script>
 
 <Row --cols={13}>
@@ -22,7 +23,7 @@
     </Col>
     <Col --col-size={6} breakpoint="xs">
         <ConfigInput>
-            <SpinBox bind:value {min} {max} {step} />
+            <SpinBox bind:value {min} {max} {step} {percentage} />
             <RevertButton slot="revert" bind:value {defaultValue} />
         </ConfigInput>
     </Col>