Update DailyLimits and NewOptions to new format

ts/deckoptions/CheckBox.svelte

@@ -3,26 +3,12 @@ Copyright: Ankitects Pty Ltd and contributors
 License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
-    import ConfigEntry from "./ConfigEntry.svelte";
-    import HelpPopup from "./HelpPopup.svelte";
+    import RevertButton from "./RevertButton.svelte";
+
     export let label: string;
     export let value: boolean;
     export let defaultValue: boolean;
-    export let tooltip = "";
-    export let id: string | undefined = undefined;
 </script>
 
-<ConfigEntry {id} label="" wholeLine={true} bind:value {defaultValue}>
-    <div class="checkbox-outer">
 <label> <input type="checkbox" bind:checked={value} /> {label} </label>
-        {#if tooltip}
-            <HelpPopup html={tooltip} />
-        {/if}
-    </div>
-</ConfigEntry>
-
-<style lang="scss">
-    .checkbox-outer {
-        margin-top: 0.5em;
-    }
-</style>
+<RevertButton bind:value {defaultValue} />

ts/deckoptions/ConfigEntry.svelte

@@ -3,41 +3,18 @@ Copyright: Ankitects Pty Ltd and contributors
 License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
-    import marked from "marked";
-    import { slide } from "svelte/transition";
-    import RevertButton from "./RevertButton.svelte";
-    import HelpPopup from "./HelpPopup.svelte";
+    import Row from "./Row.svelte";
 
-    export let label: string;
-    export let tooltip = "";
-    export let value: any;
-    export let defaultValue: any;
-    /// empty strings will be ignored
-    export let warnings: string[] = [];
-    export let wholeLine = false;
     export let id: string | undefined = undefined;
-
-    let renderedTooltip: string;
-    $: renderedTooltip = marked(tooltip);
+    export let wrap = false;
 </script>
 
-<div {id} class="row gx-0 gy-1 mt-0">
+<Row {id}>
     <div class="col-8 d-flex align-items-center">
-        {label}{#if renderedTooltip}<HelpPopup html={renderedTooltip} />{/if}
+        <slot name="left" />
     </div>
 
-    <div class="col-sm-4 d-flex align-items-center">
-        <slot />
-        <RevertButton bind:value {defaultValue} on:revert />
+    <div class:col-4={!wrap} class:col-sm-4={wrap} class="d-flex align-items-center">
+        <slot name="right" />
     </div>
-</div>
-
-{#each warnings as warning}
-    {#if warning}
-        <div class="row gx-0 gy-1 mt-0">
-            <div class="col-11 alert alert-warning mb-0" in:slide out:slide>
-                {warning}
-            </div>
-        </div>
-    {/if}
-{/each}
+</Row>

ts/deckoptions/DailyLimits.svelte

@@ -3,8 +3,12 @@
     License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
+    import marked from "marked";
     import * as tr from "lib/i18n";
     import TitledContainer from "./TitledContainer.svelte";
+    import ConfigEntry from "./ConfigEntry.svelte";
+    import HelpPopup from "./HelpPopup.svelte";
+    import Warnings from "./Warnings.svelte";
     import SpinBox from "./SpinBox.svelte";
     import type { DeckOptionsState } from "./lib";
 
@@ -35,21 +39,37 @@
 </script>
 
 <TitledContainer title={tr.deckConfigDailyLimits()}>
+    <ConfigEntry>
+        <span slot="left">
+            {tr.schedulingNewCardsday()}<HelpPopup
+                html={marked(tr.deckConfigNewLimitTooltip() + v3Extra)}
+            />
+        </span>
+        <svelte:fragment slot="right">
             <SpinBox
-        label={tr.schedulingNewCardsday()}
-        tooltip={tr.deckConfigNewLimitTooltip() + v3Extra}
                 min={0}
-        warnings={[newCardsGreaterThanParent]}
                 defaultValue={defaults.newPerDay}
                 bind:value={$config.newPerDay}
             />
+        </svelte:fragment>
+    </ConfigEntry>
 
+    <Warnings warnings={[newCardsGreaterThanParent]} />
+
+    <ConfigEntry>
+        <span slot="left">
+            {tr.schedulingMaximumReviewsday()}<HelpPopup
+                html={marked(tr.deckConfigReviewLimitTooltip() + v3Extra)}
+            />
+        </span>
+        <svelte:fragment slot="right">
             <SpinBox
-        label={tr.schedulingMaximumReviewsday()}
-        tooltip={tr.deckConfigReviewLimitTooltip() + v3Extra}
                 min={0}
-        warnings={[reviewsTooLow]}
                 defaultValue={defaults.reviewsPerDay}
                 bind:value={$config.reviewsPerDay}
             />
+        </svelte:fragment>
+    </ConfigEntry>
+
+    <Warnings warnings={[reviewsTooLow]} />
 </TitledContainer>

ts/deckoptions/EnumSelector.svelte

@@ -3,19 +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 ConfigEntry from "./ConfigEntry.svelte";
+    import RevertButton from "./RevertButton.svelte";
 
-    export let label: string;
     export let choices: string[];
     export let value: number = 0;
     export let defaultValue: number;
-    export let tooltip = "";
 </script>
 
-<ConfigEntry {label} {tooltip} wholeLine={true} bind:value {defaultValue}>
 <select bind:value class="form-select">
     {#each choices as choice, idx}
         <option value={idx}>{choice}</option>
     {/each}
 </select>
-</ConfigEntry>
+<RevertButton bind:value {defaultValue} />

ts/deckoptions/NewOptions.svelte

@@ -4,7 +4,11 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
     import * as tr from "lib/i18n";
+    import marked from "marked";
     import TitledContainer from "./TitledContainer.svelte";
+    import ConfigEntry from "./ConfigEntry.svelte";
+    import Warnings from "./Warnings.svelte";
+    import HelpPopup from "./HelpPopup.svelte";
     import SpinBox from "./SpinBox.svelte";
     import StepsInput from "./StepsInput.svelte";
     import EnumSelector from "./EnumSelector.svelte";
@@ -37,35 +41,65 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 </script>
 
 <TitledContainer title={tr.schedulingNewCards()}>
+    <ConfigEntry>
+        <span slot="left">
+            {tr.deckConfigLearningSteps()}<HelpPopup
+                html={marked(tr.deckConfigLearningStepsTooltip())}
+            />
+        </span>
+        <svelte:fragment slot="right">
             <StepsInput
-        label={tr.deckConfigLearningSteps()}
-        tooltip={tr.deckConfigLearningStepsTooltip()}
                 defaultValue={defaults.learnSteps}
                 value={$config.learnSteps}
                 on:changed={(evt) => ($config.learnSteps = evt.detail.value)}
             />
+        </svelte:fragment>
+    </ConfigEntry>
 
+    <ConfigEntry>
+        <span slot="left">
+            {tr.schedulingGraduatingInterval()}<HelpPopup
+                html={marked(tr.deckConfigGraduatingIntervalTooltip())}
+            />
+        </span>
+        <svelte:fragment slot="right">
             <SpinBox
-        label={tr.schedulingGraduatingInterval()}
-        tooltip={tr.deckConfigGraduatingIntervalTooltip()}
-        warnings={[stepsExceedGraduatingInterval]}
                 defaultValue={defaults.graduatingIntervalGood}
                 bind:value={$config.graduatingIntervalGood}
             />
+        </svelte:fragment>
+    </ConfigEntry>
 
+    <Warnings warnings={[stepsExceedGraduatingInterval]} />
+
+    <ConfigEntry>
+        <span slot="left">
+            {tr.schedulingEasyInterval()}<HelpPopup
+                html={marked(tr.deckConfigEasyIntervalTooltip())}
+            />
+        </span>
+        <svelte:fragment slot="right">
             <SpinBox
-        label={tr.schedulingEasyInterval()}
-        tooltip={tr.deckConfigEasyIntervalTooltip()}
-        warnings={[goodExceedsEasy]}
                 defaultValue={defaults.graduatingIntervalEasy}
                 bind:value={$config.graduatingIntervalEasy}
             />
+        </svelte:fragment>
+    </ConfigEntry>
 
+    <Warnings warnings={[goodExceedsEasy]} />
+
+    <ConfigEntry wrap={true}>
+        <span slot="left">
+            {tr.deckConfigNewInsertionOrder()}<HelpPopup
+                html={marked(tr.deckConfigNewInsertionOrderTooltip())}
+            />
+        </span>
+        <svelte:fragment slot="right">
             <EnumSelector
-        label={tr.deckConfigNewInsertionOrder()}
-        tooltip={tr.deckConfigNewInsertionOrderTooltip()}
                 choices={newInsertOrderChoices}
                 defaultValue={defaults.newCardInsertOrder}
                 bind:value={$config.newCardInsertOrder}
             />
+        </svelte:fragment>
+    </ConfigEntry>
 </TitledContainer>

ts/deckoptions/RevertButton.svelte

@@ -48,16 +48,15 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     }
 </script>
 
-{#if modified}
 <span
     bind:this={ref}
     class="badge"
+    class:invisible={!modified}
     title={tr.deckConfigRevertButtonTooltip()}
     on:click={revert}
 >
     {@html revertIcon}
 </span>
-{/if}
 
 <style lang="scss">
     span :global(svg) {

ts/deckoptions/Row.svelte

@@ -0,0 +1,11 @@
+<!--
+Copyright: Ankitects Pty Ltd and contributors
+License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
+-->
+<script lang="ts">
+    export let id: string | undefined = undefined;
+</script>
+
+<div {id} class="row gx-0 gy-1 mt-0">
+    <slot />
+</div>

ts/deckoptions/SpinBox.svelte

@@ -3,14 +3,11 @@ Copyright: Ankitects Pty Ltd and contributors
 License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
-    import ConfigEntry from "./ConfigEntry.svelte";
+    import RevertButton from "./RevertButton.svelte";
 
-    export let label: string;
-    export let tooltip: string;
     export let value: number;
     export let min = 1;
     export let max = 9999;
-    export let warnings: string[] = [];
     export let defaultValue: number = 0;
 
     function checkMinMax() {
@@ -22,7 +19,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     }
 </script>
 
-<ConfigEntry {label} {tooltip} {warnings} bind:value {defaultValue}>
 <input
     type="number"
     {min}
@@ -31,4 +27,4 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     class="form-control"
     on:blur={checkMinMax}
 />
-</ConfigEntry>
+<RevertButton bind:value {defaultValue} />

ts/deckoptions/SpinBoxFloat.svelte

@@ -4,11 +4,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
     import { createEventDispatcher } from "svelte";
-    import ConfigEntry from "./ConfigEntry.svelte";
+    import RevertButton from "./RevertButton.svelte";
     import type { NumberValueEvent } from "./events";
 
-    export let label: string;
-    export let tooltip: string;
     export let value: number;
     export let defaultValue: number;
     export let min = 1;
@@ -30,14 +28,13 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     }
 </script>
 
-<ConfigEntry {label} {tooltip} {value} {defaultValue} on:revert={revert}>
 <input
     type="number"
+    class="form-control"
     {min}
     {max}
     step="0.01"
     value={stringValue}
     on:blur={update}
-        class="form-control"
 />
-</ConfigEntry>
+<RevertButton bind:value {defaultValue} on:revert={revert} />

ts/deckoptions/StepsInput.svelte

@@ -5,14 +5,11 @@ 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 ConfigEntry from "./ConfigEntry.svelte";
+    import RevertButton from "./RevertButton.svelte";
     import type { NumberValueEvent } from "./events";
 
-    export let label: string;
-    export let tooltip: string;
     export let value: number[];
     export let defaultValue: number[];
-    export let warnings: string[] = [];
 
     const dispatch = createEventDispatcher();
 
@@ -29,14 +26,5 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     }
 </script>
 
-<ConfigEntry
-    {label}
-    {tooltip}
-    {value}
-    {defaultValue}
-    {warnings}
-    wholeLine={value.length > 2}
-    on:revert={revert}
->
 <input type="text" value={stringValue} on:blur={update} class="form-control" />
-</ConfigEntry>
+<RevertButton bind:value {defaultValue} on:revert={revert} />

ts/deckoptions/Testo.svelte

@@ -0,0 +1,25 @@
+<!--
+    import { slide } from "svelte/transition";
+    import RevertButton from "./RevertButton.svelte";
+    import HelpPopup from "./HelpPopup.svelte";
+    import marked from "marked";
+
+    export let label: string;
+    export let tooltip = "";
+    export let value: any;
+    export let defaultValue: any;
+    /// empty strings will be ignored
+    export let warnings: string[] = [];
+    export let wholeLine = false;
+
+    let renderedTooltip: string;
+    $: renderedTooltip = marked(tooltip);
+
+
+/* {label}{#if renderedTooltip}<HelpPopup html={renderedTooltip} />{/if} */
+
+/* <slot /> */
+/* <RevertButton bind:value {defaultValue} on:revert /> */
+
+
+-->

ts/deckoptions/Warnings.svelte

@@ -0,0 +1,20 @@
+<!--
+Copyright: Ankitects Pty Ltd and contributors
+License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
+-->
+<script lang="ts">
+    import { slide } from "svelte/transition";
+    import Row from "./Row.svelte";
+
+    export let warnings: string[] = [];
+</script>
+
+{#each warnings as warning}
+    {#if warning}
+        <Row>
+            <div class="col-12 alert alert-warning mb-0" in:slide out:slide>
+                {warning}
+            </div>
+        </Row>
+    {/if}
+{/each}