Move the remaining Options to new ConfigEntry layout

ts/deckoptions/AdvancedOptions.svelte

@@ -4,7 +4,10 @@ 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 HelpPopup from "./HelpPopup.svelte";
     import SpinBox from "./SpinBox.svelte";
     import SpinBoxFloat from "./SpinBoxFloat.svelte";
     import type { DeckOptionsState } from "./lib";
@@ -15,62 +18,98 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 </script>
 
 <TitledContainer title={tr.deckConfigAdvancedTitle()}>
-    <SpinBox
-        label={tr.schedulingMaximumInterval()}
-        tooltip={tr.deckConfigMaximumIntervalTooltip()}
-        min={1}
-        max={365 * 100}
-        defaultValue={defaults.maximumReviewInterval}
-        bind:value={$config.maximumReviewInterval}
-    />
+    <ConfigEntry>
+        <span slot="left">
+            {tr.schedulingMaximumInterval()}
+            <HelpPopup html={marked(tr.deckConfigMaximumIntervalTooltip())} />
+        </span>
+        <svelte:fragment slot="right">
+            <SpinBox
+                min={1}
+                max={365 * 100}
+                defaultValue={defaults.maximumReviewInterval}
+                bind:value={$config.maximumReviewInterval}
+            />
+        </svelte:fragment>
+    </ConfigEntry>
 
-    <SpinBoxFloat
-        label={tr.schedulingStartingEase()}
-        tooltip={tr.deckConfigStartingEaseTooltip()}
-        min={1.31}
-        max={5}
-        defaultValue={defaults.initialEase}
-        value={$config.initialEase}
-        on:changed={(evt) => ($config.initialEase = evt.detail.value)}
-    />
+    <ConfigEntry>
+        <span slot="left">
+            {tr.schedulingStartingEase()}
+            <HelpPopup html={marked(tr.deckConfigStartingEaseTooltip())} />
+        </span>
+        <svelte:fragment slot="right">
+            <SpinBoxFloat
+                min={1.31}
+                max={5}
+                defaultValue={defaults.initialEase}
+                value={$config.initialEase}
+                on:changed={(evt) => ($config.initialEase = evt.detail.value)}
+            />
+        </svelte:fragment>
+    </ConfigEntry>
 
-    <SpinBoxFloat
-        label={tr.schedulingEasyBonus()}
-        tooltip={tr.deckConfigEasyBonusTooltip()}
-        min={1}
-        max={3}
-        defaultValue={defaults.easyMultiplier}
-        value={$config.easyMultiplier}
-        on:changed={(evt) => ($config.easyMultiplier = evt.detail.value)}
-    />
+    <ConfigEntry>
+        <span slot="left">
+            {tr.schedulingEasyBonus()}
+            <HelpPopup html={marked(tr.deckConfigEasyBonusTooltip())} />
+        </span>
+        <svelte:fragment slot="right">
+            <SpinBoxFloat
+                min={1}
+                max={3}
+                defaultValue={defaults.easyMultiplier}
+                value={$config.easyMultiplier}
+                on:changed={(evt) => ($config.easyMultiplier = evt.detail.value)}
+            />
+        </svelte:fragment>
+    </ConfigEntry>
 
-    <SpinBoxFloat
-        label={tr.schedulingIntervalModifier()}
-        tooltip={tr.deckConfigIntervalModifierTooltip()}
-        min={0.5}
-        max={2}
-        defaultValue={defaults.intervalMultiplier}
-        value={$config.intervalMultiplier}
-        on:changed={(evt) => ($config.intervalMultiplier = evt.detail.value)}
-    />
+    <ConfigEntry>
+        <span slot="left">
+            {tr.schedulingIntervalModifier()}
+            <HelpPopup html={marked(tr.deckConfigIntervalModifierTooltip())} />
+        </span>
+        <svelte:fragment slot="right">
+            <SpinBoxFloat
+                min={0.5}
+                max={2}
+                defaultValue={defaults.intervalMultiplier}
+                value={$config.intervalMultiplier}
+                on:changed={(evt) => ($config.intervalMultiplier = evt.detail.value)}
+            />
+        </svelte:fragment>
+    </ConfigEntry>
 
-    <SpinBoxFloat
-        label={tr.schedulingHardInterval()}
-        tooltip={tr.deckConfigHardIntervalTooltip()}
-        min={0.5}
-        max={1.3}
-        defaultValue={defaults.hardMultiplier}
-        value={$config.hardMultiplier}
-        on:changed={(evt) => ($config.hardMultiplier = evt.detail.value)}
-    />
+    <ConfigEntry>
+        <span slot="left">
+            {tr.schedulingHardInterval()}
+            <HelpPopup html={marked(tr.deckConfigHardIntervalTooltip())} />
+        </span>
+        <svelte:fragment slot="right">
+            <SpinBoxFloat
+                min={0.5}
+                max={1.3}
+                defaultValue={defaults.hardMultiplier}
+                value={$config.hardMultiplier}
+                on:changed={(evt) => ($config.hardMultiplier = evt.detail.value)}
+            />
+        </svelte:fragment>
+    </ConfigEntry>
 
-    <SpinBoxFloat
-        label={tr.schedulingNewInterval()}
-        tooltip={tr.deckConfigNewIntervalTooltip()}
-        min={0}
-        max={1}
-        defaultValue={defaults.lapseMultiplier}
-        value={$config.lapseMultiplier}
-        on:changed={(evt) => ($config.lapseMultiplier = evt.detail.value)}
-    />
+    <ConfigEntry>
+        <span slot="left">
+            {tr.schedulingNewInterval()}
+            <HelpPopup html={tr.deckConfigNewIntervalTooltip()} />
+        </span>
+        <svelte:fragment slot="right">
+            <SpinBoxFloat
+                min={0}
+                max={1}
+                defaultValue={defaults.lapseMultiplier}
+                value={$config.lapseMultiplier}
+                on:changed={(evt) => ($config.lapseMultiplier = evt.detail.value)}
+            />
+        </svelte:fragment>
+    </ConfigEntry>
 </TitledContainer>

ts/deckoptions/AudioOptions.svelte

@@ -4,7 +4,10 @@ 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 ConfigEntryFull from "./ConfigEntryFull.svelte";
+    import HelpPopup from "./HelpPopup.svelte";
     import CheckBox from "./CheckBox.svelte";
     import type { DeckOptionsState } from "./lib";
 
@@ -14,16 +17,24 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 </script>
 
 <TitledContainer title={tr.deckConfigAudioTitle()}>
-    <CheckBox
-        label={tr.deckConfigDisableAutoplay()}
-        defaultValue={defaults.disableAutoplay}
-        bind:value={$config.disableAutoplay}
-    />
+    <ConfigEntryFull>
+        <CheckBox
+            defaultValue={defaults.disableAutoplay}
+            bind:value={$config.disableAutoplay}
+        >
+            {tr.deckConfigDisableAutoplay()}
+        </CheckBox>
+    </ConfigEntryFull>
 
-    <CheckBox
-        label={tr.schedulingAlwaysIncludeQuestionSideWhenReplaying()}
-        tooltip={tr.deckConfigAlwaysIncludeQuestionAudioTooltip()}
-        defaultValue={defaults.skipQuestionWhenReplayingAnswer}
-        bind:value={$config.skipQuestionWhenReplayingAnswer}
-    />
+    <ConfigEntryFull>
+        <CheckBox
+            defaultValue={defaults.skipQuestionWhenReplayingAnswer}
+            bind:value={$config.skipQuestionWhenReplayingAnswer}
+        >
+            {tr.schedulingAlwaysIncludeQuestionSideWhenReplaying()}
+            <HelpPopup
+                html={marked(tr.deckConfigAlwaysIncludeQuestionAudioTooltip())}
+            />
+        </CheckBox>
+    </ConfigEntryFull>
 </TitledContainer>

ts/deckoptions/BuryOptions.svelte

@@ -4,7 +4,10 @@ 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 ConfigEntryFull from "./ConfigEntryFull.svelte";
+    import HelpPopup from "./HelpPopup.svelte";
     import CheckBox from "./CheckBox.svelte";
     import type { DeckOptionsState } from "./lib";
 
@@ -14,17 +17,17 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 </script>
 
 <TitledContainer title={tr.deckConfigBuryTitle()}>
-    <CheckBox
-        label={tr.deckConfigBuryNewSiblings()}
-        tooltip={tr.deckConfigBuryTooltip()}
-        defaultValue={defaults.buryNew}
-        bind:value={$config.buryNew}
-    />
+    <ConfigEntryFull>
+        <CheckBox defaultValue={defaults.buryNew} bind:value={$config.buryNew}>
+            {tr.deckConfigBuryNewSiblings()}
+            <HelpPopup html={marked(tr.deckConfigBuryTooltip())} />
+        </CheckBox>
+    </ConfigEntryFull>
 
-    <CheckBox
-        label={tr.deckConfigBuryReviewSiblings()}
-        tooltip={tr.deckConfigBuryTooltip()}
-        defaultValue={defaults.buryReviews}
-        bind:value={$config.buryReviews}
-    />
+    <ConfigEntryFull>
+        <CheckBox defaultValue={defaults.buryReviews} bind:value={$config.buryReviews}>
+            {tr.deckConfigBuryReviewSiblings()}
+            <HelpPopup html={marked(tr.deckConfigBuryTooltip())} />
+        </CheckBox>
+    </ConfigEntryFull>
 </TitledContainer>

ts/deckoptions/CheckBox.svelte

@@ -5,10 +5,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 <script lang="ts">
     import RevertButton from "./RevertButton.svelte";
 
-    export let label: string;
     export let value: boolean;
     export let defaultValue: boolean;
 </script>
 
-<label> <input type="checkbox" bind:checked={value} /> {label} </label>
+<label> <input type="checkbox" bind:checked={value} /> <slot /> </label>
 <RevertButton bind:value {defaultValue} />

ts/deckoptions/ConfigEntryFull.svelte

@@ -0,0 +1,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 Row from "./Row.svelte";
+
+    export let id: string | undefined = undefined;
+</script>
+
+<Row {id}>
+    <div class="col-12 d-flex align-items-center">
+        <slot />
+    </div>
+</Row>

ts/deckoptions/DisplayOrder.svelte

@@ -4,7 +4,10 @@ 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 HelpPopup from "./HelpPopup.svelte";
     import EnumSelector from "./EnumSelector.svelte";
 
     import type { DeckOptionsState } from "./lib";
@@ -37,43 +40,73 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 </script>
 
 <TitledContainer title={tr.deckConfigOrderingTitle()}>
-    <EnumSelector
-        label={tr.deckConfigNewGatherPriority()}
-        tooltip={tr.deckConfigNewGatherPriorityTooltip()}
-        choices={newGatherPriorityChoices}
-        defaultValue={defaults.newCardGatherPriority}
-        bind:value={$config.newCardGatherPriority}
-    />
+    <ConfigEntry>
+        <span slot="left">
+            {tr.deckConfigNewGatherPriority()}
+            <HelpPopup html={marked(tr.deckConfigNewGatherPriorityTooltip())} />
+        </span>
+        <svelte:fragment slot="right">
+            <EnumSelector
+                choices={newGatherPriorityChoices}
+                defaultValue={defaults.newCardGatherPriority}
+                bind:value={$config.newCardGatherPriority}
+            />
+        </svelte:fragment>
+    </ConfigEntry>
 
-    <EnumSelector
-        label={tr.deckConfigNewCardSortOrder()}
-        tooltip={tr.deckConfigNewCardSortOrderTooltip()}
-        choices={newSortOrderChoices}
-        defaultValue={defaults.newCardSortOrder}
-        bind:value={$config.newCardSortOrder}
-    />
+    <ConfigEntry>
+        <span slot="left">
+            {tr.deckConfigNewCardSortOrder()}
+            <HelpPopup html={marked(tr.deckConfigNewCardSortOrderTooltip())} />
+        </span>
+        <svelte:fragment slot="right">
+            <EnumSelector
+                choices={newSortOrderChoices}
+                defaultValue={defaults.newCardSortOrder}
+                bind:value={$config.newCardSortOrder}
+            />
+        </svelte:fragment>
+    </ConfigEntry>
 
-    <EnumSelector
-        label={tr.deckConfigNewReviewPriority()}
-        tooltip={tr.deckConfigNewReviewPriorityTooltip()}
-        choices={reviewMixChoices()}
-        defaultValue={defaults.newMix}
-        bind:value={$config.newMix}
-    />
+    <ConfigEntry>
+        <span slot="left">
+            {tr.deckConfigNewReviewPriority()}
+            <HelpPopup html={marked(tr.deckConfigNewReviewPriorityTooltip())} />
+        </span>
+        <svelte:fragment slot="right">
+            <EnumSelector
+                choices={reviewMixChoices()}
+                defaultValue={defaults.newMix}
+                bind:value={$config.newMix}
+            />
+        </svelte:fragment>
+    </ConfigEntry>
 
-    <EnumSelector
-        label={tr.deckConfigInterdayStepPriority()}
-        tooltip={tr.deckConfigInterdayStepPriorityTooltip()}
-        choices={reviewMixChoices()}
-        defaultValue={defaults.interdayLearningMix}
-        bind:value={$config.interdayLearningMix}
-    />
+    <ConfigEntry>
+        <span slot="left">
+            {tr.deckConfigInterdayStepPriority()}
+            <HelpPopup html={marked(tr.deckConfigInterdayStepPriorityTooltip())} />
+        </span>
+        <svelte:fragment slot="right">
+            <EnumSelector
+                choices={reviewMixChoices()}
+                defaultValue={defaults.interdayLearningMix}
+                bind:value={$config.interdayLearningMix}
+            />
+        </svelte:fragment>
+    </ConfigEntry>
 
-    <EnumSelector
-        label={tr.deckConfigReviewSortOrder()}
-        tooltip={tr.deckConfigReviewSortOrderTooltip()}
-        choices={reviewOrderChoices}
-        defaultValue={defaults.reviewOrder}
-        bind:value={$config.reviewOrder}
-    />
+    <ConfigEntry>
+        <span slot="left">
+            {tr.deckConfigReviewSortOrder()}
+            <HelpPopup html={marked(tr.deckConfigReviewSortOrderTooltip())} />
+        </span>
+        <svelte:fragment slot="right">
+            <EnumSelector
+                choices={reviewOrderChoices}
+                defaultValue={defaults.reviewOrder}
+                bind:value={$config.reviewOrder}
+            />
+        </svelte:fragment>
+    </ConfigEntry>
 </TitledContainer>>

ts/deckoptions/LapseOptions.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 EnumSelector from "./EnumSelector.svelte";
     import StepsInput from "./StepsInput.svelte";
@@ -29,36 +33,65 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 </script>
 
 <TitledContainer title={tr.schedulingLapses()}>
-    <StepsInput
-        label={tr.deckConfigRelearningSteps()}
-        tooltip={tr.deckConfigRelearningStepsTooltip()}
-        defaultValue={defaults.relearnSteps}
-        value={$config.relearnSteps}
-        on:changed={(evt) => ($config.relearnSteps = evt.detail.value)}
-    />
+    <ConfigEntry>
+        <span slot="left">
+            {tr.deckConfigRelearningSteps()}<HelpPopup
+                html={marked(tr.deckConfigRelearningStepsTooltip())}
+            />
+        </span>
+        <svelte:fragment slot="right">
+            <StepsInput
+                defaultValue={defaults.relearnSteps}
+                value={$config.relearnSteps}
+                on:changed={(evt) => ($config.relearnSteps = evt.detail.value)}
+            />
+        </svelte:fragment>
+    </ConfigEntry>
 
-    <SpinBox
-        label={tr.schedulingMinimumInterval()}
-        tooltip={tr.deckConfigMinimumIntervalTooltip()}
-        warnings={[stepsExceedMinimumInterval]}
-        min={1}
-        defaultValue={defaults.minimumLapseInterval}
-        bind:value={$config.minimumLapseInterval}
-    />
+    <ConfigEntry>
+        <span slot="left">
+            {tr.schedulingMinimumInterval()}<HelpPopup
+                html={marked(tr.deckConfigMinimumIntervalTooltip())}
+            />
+        </span>
+        <svelte:fragment slot="right">
+            <SpinBox
+                min={1}
+                defaultValue={defaults.minimumLapseInterval}
+                bind:value={$config.minimumLapseInterval}
+            />
+        </svelte:fragment>
+    </ConfigEntry>
 
-    <SpinBox
-        label={tr.schedulingLeechThreshold()}
-        tooltip={tr.deckConfigLeechThresholdTooltip()}
-        min={1}
-        defaultValue={defaults.leechThreshold}
-        bind:value={$config.leechThreshold}
-    />
+    <Warnings warnings={[stepsExceedMinimumInterval]} />
 
-    <EnumSelector
-        label={tr.schedulingLeechAction()}
-        tooltip={tr.deckConfigLeechActionTooltip()}
-        choices={leechChoices}
-        defaultValue={defaults.leechAction}
-        bind:value={$config.leechAction}
-    />
+    <ConfigEntry>
+        <span slot="left">
+            {tr.schedulingLeechThreshold()}<HelpPopup
+                html={marked(tr.deckConfigLeechThresholdTooltip())}
+            />
+        </span>
+        <svelte:fragment slot="right">
+            <SpinBox
+                min={1}
+                defaultValue={defaults.leechThreshold}
+                bind:value={$config.leechThreshold}
+            />
+        </svelte:fragment>
+    </ConfigEntry>
+
+    <ConfigEntry wrap={true}>
+        <span slot="left">
+            {tr.schedulingLeechAction()}<HelpPopup
+                html={marked(tr.deckConfigLeechActionTooltip())}
+            />
+        </span>
+        <svelte:fragment slot="right">
+            <EnumSelector
+                choices={leechChoices}
+                defaultValue={defaults.leechAction}
+                bind:value={$config.leechAction}
+            />
+        </svelte:fragment>
+    </ConfigEntry>
 </TitledContainer>

ts/deckoptions/TimerOptions.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 ConfigEntryFull from "./ConfigEntryFull.svelte";
+    import HelpPopup from "./HelpPopup.svelte";
     import SpinBox from "./SpinBox.svelte";
     import CheckBox from "./CheckBox.svelte";
     import type { DeckOptionsState } from "./lib";
@@ -15,20 +19,25 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 </script>
 
 <TitledContainer title={tr.deckConfigTimerTitle()}>
-    <SpinBox
-        label={tr.deckConfigMaximumAnswerSecs()}
-        tooltip={tr.deckConfigMaximumAnswerSecsTooltip()}
-        min={30}
-        max={600}
-        defaultValue={defaults.capAnswerTimeToSecs}
-        bind:value={$config.capAnswerTimeToSecs}
-    />
+    <ConfigEntry>
+        <span slot="left">
+            {tr.deckConfigMaximumAnswerSecs()}
+            <HelpPopup html={marked(tr.deckConfigMaximumAnswerSecsTooltip())} />
+        </span>
+        <svelte:fragment slot="right">
+            <SpinBox
+                min={30}
+                max={600}
+                defaultValue={defaults.capAnswerTimeToSecs}
+                bind:value={$config.capAnswerTimeToSecs}
+            />
+        </svelte:fragment>
+    </ConfigEntry>
 
-    <CheckBox
-        id="showAnswerTimer"
-        label={tr.schedulingShowAnswerTimer()}
-        tooltip={tr.deckConfigShowAnswerTimerTooltip()}
-        defaultValue={defaults.showTimer}
-        bind:value={$config.showTimer}
-    />
+    <ConfigEntryFull>
+        <CheckBox defaultValue={defaults.showTimer} bind:value={$config.showTimer}>
+            {tr.schedulingShowAnswerTimer()}
+            <HelpPopup html={marked(tr.deckConfigShowAnswerTimerTooltip())} />
+        </CheckBox>
+    </ConfigEntryFull>
 </TitledContainer>