Factor RevertButton out of components

ts/deckoptions/AdvancedOptions.svelte

@@ -10,6 +10,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import HelpPopup from "./HelpPopup.svelte";
     import SpinBox from "./SpinBox.svelte";
     import SpinBoxFloat from "./SpinBoxFloat.svelte";
+    import RevertButton from "./RevertButton.svelte";
     import type { DeckOptionsState } from "./lib";
 
     export let state: DeckOptionsState;
@@ -27,6 +28,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
             <SpinBox
                 min={1}
                 max={365 * 100}
+                bind:value={$config.maximumReviewInterval}
+            />
+            <RevertButton
                 defaultValue={defaults.maximumReviewInterval}
                 bind:value={$config.maximumReviewInterval}
             />
@@ -39,12 +43,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
             <HelpPopup html={marked(tr.deckConfigStartingEaseTooltip())} />
         </span>
         <svelte:fragment slot="right">
-            <SpinBoxFloat
-                min={1.31}
-                max={5}
+            <SpinBoxFloat min={1.31} max={5} bind:value={$config.initialEase} />
+            <RevertButton
                 defaultValue={defaults.initialEase}
-                value={$config.initialEase}
-                on:changed={(evt) => ($config.initialEase = evt.detail.value)}
+                bind:value={$config.initialEase}
             />
         </svelte:fragment>
     </ConfigEntry>
@@ -55,12 +57,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
             <HelpPopup html={marked(tr.deckConfigEasyBonusTooltip())} />
         </span>
         <svelte:fragment slot="right">
-            <SpinBoxFloat
-                min={1}
-                max={3}
+            <SpinBoxFloat min={1} max={3} bind:value={$config.easyMultiplier} />
+            <RevertButton
                 defaultValue={defaults.easyMultiplier}
-                value={$config.easyMultiplier}
-                on:changed={(evt) => ($config.easyMultiplier = evt.detail.value)}
+                bind:value={$config.easyMultiplier}
             />
         </svelte:fragment>
     </ConfigEntry>
@@ -71,12 +71,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
             <HelpPopup html={marked(tr.deckConfigIntervalModifierTooltip())} />
         </span>
         <svelte:fragment slot="right">
-            <SpinBoxFloat
-                min={0.5}
-                max={2}
+            <SpinBoxFloat min={0.5} max={2} bind:value={$config.intervalMultiplier} />
+            <RevertButton
                 defaultValue={defaults.intervalMultiplier}
-                value={$config.intervalMultiplier}
-                on:changed={(evt) => ($config.intervalMultiplier = evt.detail.value)}
+                bind:value={$config.intervalMultiplier}
             />
         </svelte:fragment>
     </ConfigEntry>
@@ -87,12 +85,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
             <HelpPopup html={marked(tr.deckConfigHardIntervalTooltip())} />
         </span>
         <svelte:fragment slot="right">
-            <SpinBoxFloat
-                min={0.5}
-                max={1.3}
+            <SpinBoxFloat min={0.5} max={1.3} bind:value={$config.hardMultiplier} />
+            <RevertButton
                 defaultValue={defaults.hardMultiplier}
-                value={$config.hardMultiplier}
-                on:changed={(evt) => ($config.hardMultiplier = evt.detail.value)}
+                bind:value={$config.hardMultiplier}
             />
         </svelte:fragment>
     </ConfigEntry>
@@ -100,15 +96,13 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     <ConfigEntry>
         <span slot="left">
             {tr.schedulingNewInterval()}
-            <HelpPopup html={tr.deckConfigNewIntervalTooltip()} />
+            <HelpPopup html={marked(tr.deckConfigNewIntervalTooltip())} />
         </span>
         <svelte:fragment slot="right">
-            <SpinBoxFloat
-                min={0}
-                max={1}
+            <SpinBoxFloat min={0} max={1} bind:value={$config.lapseMultiplier} />
+            <RevertButton
                 defaultValue={defaults.lapseMultiplier}
-                value={$config.lapseMultiplier}
-                on:changed={(evt) => ($config.lapseMultiplier = evt.detail.value)}
+                bind:value={$config.lapseMultiplier}
             />
         </svelte:fragment>
     </ConfigEntry>

ts/deckoptions/AudioOptions.svelte

@@ -9,6 +9,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import ConfigEntryFull from "./ConfigEntryFull.svelte";
     import HelpPopup from "./HelpPopup.svelte";
     import CheckBox from "./CheckBox.svelte";
+    import RevertButton from "./RevertButton.svelte";
     import type { DeckOptionsState } from "./lib";
 
     export let state: DeckOptionsState;
@@ -18,23 +19,25 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
 <TitledContainer title={tr.deckConfigAudioTitle()}>
     <ConfigEntryFull>
-        <CheckBox
-            defaultValue={defaults.disableAutoplay}
-            bind:value={$config.disableAutoplay}
-        >
+        <CheckBox bind:value={$config.disableAutoplay}>
             {tr.deckConfigDisableAutoplay()}
         </CheckBox>
+        <RevertButton
+            defaultValue={defaults.disableAutoplay}
+            bind:value={$config.disableAutoplay}
+        />
     </ConfigEntryFull>
 
     <ConfigEntryFull>
-        <CheckBox
-            defaultValue={defaults.skipQuestionWhenReplayingAnswer}
-            bind:value={$config.skipQuestionWhenReplayingAnswer}
-        >
+        <CheckBox bind:value={$config.skipQuestionWhenReplayingAnswer}>
             {tr.schedulingAlwaysIncludeQuestionSideWhenReplaying()}
             <HelpPopup
                 html={marked(tr.deckConfigAlwaysIncludeQuestionAudioTooltip())}
             />
         </CheckBox>
+        <RevertButton
+            defaultValue={defaults.skipQuestionWhenReplayingAnswer}
+            bind:value={$config.skipQuestionWhenReplayingAnswer}
+        />
     </ConfigEntryFull>
 </TitledContainer>

ts/deckoptions/BuryOptions.svelte

@@ -9,6 +9,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import ConfigEntryFull from "./ConfigEntryFull.svelte";
     import HelpPopup from "./HelpPopup.svelte";
     import CheckBox from "./CheckBox.svelte";
+    import RevertButton from "./RevertButton.svelte";
     import type { DeckOptionsState } from "./lib";
 
     export let state: DeckOptionsState;
@@ -18,16 +19,21 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
 <TitledContainer title={tr.deckConfigBuryTitle()}>
     <ConfigEntryFull>
-        <CheckBox defaultValue={defaults.buryNew} bind:value={$config.buryNew}>
+        <CheckBox bind:value={$config.buryNew}>
             {tr.deckConfigBuryNewSiblings()}
             <HelpPopup html={marked(tr.deckConfigBuryTooltip())} />
         </CheckBox>
+        <RevertButton defaultValue={defaults.buryNew} bind:value={$config.buryNew} />
     </ConfigEntryFull>
 
     <ConfigEntryFull>
-        <CheckBox defaultValue={defaults.buryReviews} bind:value={$config.buryReviews}>
+        <CheckBox bind:value={$config.buryReviews}>
             {tr.deckConfigBuryReviewSiblings()}
             <HelpPopup html={marked(tr.deckConfigBuryTooltip())} />
         </CheckBox>
+        <RevertButton
+            defaultValue={defaults.buryReviews}
+            bind:value={$config.buryReviews}
+        />
     </ConfigEntryFull>
 </TitledContainer>

ts/deckoptions/CheckBox.svelte

@@ -3,11 +3,7 @@ Copyright: Ankitects Pty Ltd and contributors
 License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
-    import RevertButton from "./RevertButton.svelte";
-
     export let value: boolean;
-    export let defaultValue: boolean;
 </script>
 
 <label> <input type="checkbox" bind:checked={value} /> <slot /> </label>
-<RevertButton bind:value {defaultValue} />

ts/deckoptions/DailyLimits.svelte

@@ -10,6 +10,7 @@
     import HelpPopup from "./HelpPopup.svelte";
     import Warnings from "./Warnings.svelte";
     import SpinBox from "./SpinBox.svelte";
+    import RevertButton from "./RevertButton.svelte";
     import type { DeckOptionsState } from "./lib";
 
     export let state: DeckOptionsState;
@@ -46,8 +47,8 @@
             />
         </span>
         <svelte:fragment slot="right">
-            <SpinBox
-                min={0}
+            <SpinBox min={0} bind:value={$config.newPerDay} />
+            <RevertButton
                 defaultValue={defaults.newPerDay}
                 bind:value={$config.newPerDay}
             />
@@ -63,8 +64,8 @@
             />
         </span>
         <svelte:fragment slot="right">
-            <SpinBox
-                min={0}
+            <SpinBox min={0} bind:value={$config.reviewsPerDay} />
+            <RevertButton
                 defaultValue={defaults.reviewsPerDay}
                 bind:value={$config.reviewsPerDay}
             />

ts/deckoptions/DisplayOrder.svelte

@@ -9,6 +9,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import ConfigEntry from "./ConfigEntry.svelte";
     import HelpPopup from "./HelpPopup.svelte";
     import EnumSelector from "./EnumSelector.svelte";
+    import RevertButton from "./RevertButton.svelte";
 
     import type { DeckOptionsState } from "./lib";
     import { reviewMixChoices } from "./strings";
@@ -48,6 +49,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         <svelte:fragment slot="right">
             <EnumSelector
                 choices={newGatherPriorityChoices}
+                bind:value={$config.newCardGatherPriority}
+            />
+            <RevertButton
                 defaultValue={defaults.newCardGatherPriority}
                 bind:value={$config.newCardGatherPriority}
             />
@@ -62,6 +66,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         <svelte:fragment slot="right">
             <EnumSelector
                 choices={newSortOrderChoices}
+                bind:value={$config.newCardSortOrder}
+            />
+            <RevertButton
                 defaultValue={defaults.newCardSortOrder}
                 bind:value={$config.newCardSortOrder}
             />
@@ -74,11 +81,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
             <HelpPopup html={marked(tr.deckConfigNewReviewPriorityTooltip())} />
         </span>
         <svelte:fragment slot="right">
-            <EnumSelector
-                choices={reviewMixChoices()}
-                defaultValue={defaults.newMix}
-                bind:value={$config.newMix}
-            />
+            <EnumSelector choices={reviewMixChoices()} bind:value={$config.newMix} />
+            <RevertButton defaultValue={defaults.newMix} bind:value={$config.newMix} />
         </svelte:fragment>
     </ConfigEntry>
 
@@ -90,6 +94,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         <svelte:fragment slot="right">
             <EnumSelector
                 choices={reviewMixChoices()}
+                bind:value={$config.interdayLearningMix}
+            />
+            <RevertButton
                 defaultValue={defaults.interdayLearningMix}
                 bind:value={$config.interdayLearningMix}
             />
@@ -104,6 +111,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         <svelte:fragment slot="right">
             <EnumSelector
                 choices={reviewOrderChoices}
+                bind:value={$config.reviewOrder}
+            />
+            <RevertButton
                 defaultValue={defaults.reviewOrder}
                 bind:value={$config.reviewOrder}
             />

ts/deckoptions/EnumSelector.svelte

@@ -3,11 +3,8 @@ Copyright: Ankitects Pty Ltd and contributors
 License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
-    import RevertButton from "./RevertButton.svelte";
-
     export let choices: string[];
     export let value: number = 0;
-    export let defaultValue: number;
 </script>
 
 <select bind:value class="form-select">
@@ -15,4 +12,3 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         <option value={idx}>{choice}</option>
     {/each}
 </select>
-<RevertButton bind:value {defaultValue} />

ts/deckoptions/LapseOptions.svelte

@@ -12,6 +12,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import SpinBox from "./SpinBox.svelte";
     import EnumSelector from "./EnumSelector.svelte";
     import StepsInput from "./StepsInput.svelte";
+    import RevertButton from "./RevertButton.svelte";
     import type { DeckOptionsState } from "./lib";
 
     export let state: DeckOptionsState;
@@ -41,10 +42,13 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         </span>
         <svelte:fragment slot="right">
             <StepsInput
-                defaultValue={defaults.relearnSteps}
                 value={$config.relearnSteps}
                 on:changed={(evt) => ($config.relearnSteps = evt.detail.value)}
             />
+            <RevertButton
+                defaultValue={defaults.relearnSteps}
+                value={$config.relearnSteps}
+            />
         </svelte:fragment>
     </ConfigEntry>
 
@@ -55,8 +59,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
             />
         </span>
         <svelte:fragment slot="right">
-            <SpinBox
-                min={1}
+            <SpinBox min={1} bind:value={$config.minimumLapseInterval} />
+            <RevertButton
                 defaultValue={defaults.minimumLapseInterval}
                 bind:value={$config.minimumLapseInterval}
             />
@@ -72,8 +76,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
             />
         </span>
         <svelte:fragment slot="right">
-            <SpinBox
-                min={1}
+            <SpinBox min={1} bind:value={$config.leechThreshold} />
+            <RevertButton
                 defaultValue={defaults.leechThreshold}
                 bind:value={$config.leechThreshold}
             />
@@ -87,8 +91,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
             />
         </span>
         <svelte:fragment slot="right">
-            <EnumSelector
-                choices={leechChoices}
+            <EnumSelector choices={leechChoices} bind:value={$config.leechAction} />
+            <RevertButton
                 defaultValue={defaults.leechAction}
                 bind:value={$config.leechAction}
             />

ts/deckoptions/NewOptions.svelte

@@ -12,6 +12,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import SpinBox from "./SpinBox.svelte";
     import StepsInput from "./StepsInput.svelte";
     import EnumSelector from "./EnumSelector.svelte";
+    import RevertButton from "./RevertButton.svelte";
     import type { DeckOptionsState } from "./lib";
 
     export let state: DeckOptionsState;
@@ -48,10 +49,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
             />
         </span>
         <svelte:fragment slot="right">
-            <StepsInput
+            <StepsInput bind:value={$config.learnSteps} />
+            <RevertButton
                 defaultValue={defaults.learnSteps}
-                value={$config.learnSteps}
-                on:changed={(evt) => ($config.learnSteps = evt.detail.value)}
+                bind:value={$config.learnSteps}
             />
         </svelte:fragment>
     </ConfigEntry>
@@ -63,7 +64,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
             />
         </span>
         <svelte:fragment slot="right">
-            <SpinBox
+            <SpinBox bind:value={$config.graduatingIntervalGood} />
+            <RevertButton
                 defaultValue={defaults.graduatingIntervalGood}
                 bind:value={$config.graduatingIntervalGood}
             />
@@ -79,7 +81,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
             />
         </span>
         <svelte:fragment slot="right">
-            <SpinBox
+            <SpinBox bind:value={$config.graduatingIntervalEasy} />
+            <RevertButton
                 defaultValue={defaults.graduatingIntervalEasy}
                 bind:value={$config.graduatingIntervalEasy}
             />
@@ -97,6 +100,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         <svelte:fragment slot="right">
             <EnumSelector
                 choices={newInsertOrderChoices}
+                bind:value={$config.newCardInsertOrder}
+            />
+            <RevertButton
                 defaultValue={defaults.newCardInsertOrder}
                 bind:value={$config.newCardInsertOrder}
             />

ts/deckoptions/SpinBox.svelte

@@ -3,12 +3,9 @@ Copyright: Ankitects Pty Ltd and contributors
 License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
-    import RevertButton from "./RevertButton.svelte";
-
     export let value: number;
     export let min = 1;
     export let max = 9999;
-    export let defaultValue: number = 0;
 
     function checkMinMax() {
         if (value > max) {
@@ -27,4 +24,3 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     class="form-control"
     on:blur={checkMinMax}
 />
-<RevertButton bind:value {defaultValue} />

ts/deckoptions/SpinBoxFloat.svelte

@@ -3,28 +3,15 @@ Copyright: Ankitects Pty Ltd and contributors
 License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
-    import { createEventDispatcher } from "svelte";
-    import RevertButton from "./RevertButton.svelte";
-    import type { NumberValueEvent } from "./events";
-
     export let value: number;
-    export let defaultValue: number;
     export let min = 1;
     export let max = 9999;
 
-    const dispatch = createEventDispatcher();
-
     let stringValue: string;
     $: stringValue = value.toFixed(2);
 
     function update(this: HTMLInputElement): void {
-        dispatch("changed", {
-            value: Math.min(max, Math.max(min, parseFloat(this.value))),
-        });
-    }
-
-    function revert(evt: NumberValueEvent): void {
-        dispatch("changed", { value: evt.detail.value });
+        value = Math.min(max, Math.max(min, parseFloat(this.value)));
     }
 </script>
 
@@ -37,4 +24,3 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     value={stringValue}
     on:blur={update}
 />
-<RevertButton bind:value {defaultValue} on:revert={revert} />

ts/deckoptions/StepsInput.svelte

@@ -3,28 +3,16 @@ Copyright: Ankitects Pty Ltd and contributors
 License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
-    import { createEventDispatcher } from "svelte";
     import { stepsToString, stringToSteps } from "./steps";
-    import RevertButton from "./RevertButton.svelte";
-    import type { NumberValueEvent } from "./events";
 
     export let value: number[];
-    export let defaultValue: number[];
-
-    const dispatch = createEventDispatcher();
 
     let stringValue: string;
     $: stringValue = stepsToString(value);
 
     function update(this: HTMLInputElement): void {
-        const value = stringToSteps(this.value);
-        dispatch("changed", { value });
-    }
-
-    function revert(evt: NumberValueEvent): void {
-        dispatch("changed", { value: evt.detail.value });
+        value = stringToSteps(this.value);
     }
 </script>
 
 <input type="text" value={stringValue} on:blur={update} class="form-control" />
-<RevertButton bind:value {defaultValue} on:revert={revert} />

ts/deckoptions/TimerOptions.svelte

@@ -11,6 +11,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import HelpPopup from "./HelpPopup.svelte";
     import SpinBox from "./SpinBox.svelte";
     import CheckBox from "./CheckBox.svelte";
+    import RevertButton from "./RevertButton.svelte";
     import type { DeckOptionsState } from "./lib";
 
     export let state: DeckOptionsState;
@@ -25,9 +26,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
             <HelpPopup html={marked(tr.deckConfigMaximumAnswerSecsTooltip())} />
         </span>
         <svelte:fragment slot="right">
-            <SpinBox
-                min={30}
-                max={600}
+            <SpinBox min={30} max={600} bind:value={$config.capAnswerTimeToSecs} />
+            <RevertButton
                 defaultValue={defaults.capAnswerTimeToSecs}
                 bind:value={$config.capAnswerTimeToSecs}
             />
@@ -35,9 +35,13 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     </ConfigEntry>
 
     <ConfigEntryFull>
-        <CheckBox defaultValue={defaults.showTimer} bind:value={$config.showTimer}>
+        <CheckBox bind:value={$config.showTimer}>
             {tr.schedulingShowAnswerTimer()}
             <HelpPopup html={marked(tr.deckConfigShowAnswerTimerTooltip())} />
         </CheckBox>
+        <RevertButton
+            defaultValue={defaults.showTimer}
+            bind:value={$config.showTimer}
+        />
     </ConfigEntryFull>
 </TitledContainer>

ts/deckoptions/deckoptions-base.scss

@@ -20,7 +20,8 @@
     @include bootstrap-dark.night-mode;
 }
 
-.form-control, .form-select{
+.form-control,
+.form-select {
     line-height: 1;
     // the unprefixed version wasn't added until Chrome 81
     -webkit-appearance: none;