Introduce TitledContainer

ts/deckoptions/Addons.svelte

@@ -3,7 +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 * as tr from "lib/i18n";
+    import TitledContainer from "./TitledContainer.svelte";
     import type { DeckOptionsState } from "./lib";
 
     export let state: DeckOptionsState;
@@ -12,9 +12,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 </script>
 
 {#if $components.length || state.haveAddons}
-    <div>
+    <TitledContainer title="Add-ons">
-        <h2>Add-ons</h2>
-
         <p>
             If you're using an add-on that hasn't been updated to use this new screen
             yet, you can access the old deck options screen by holding down the shift
@@ -24,5 +22,5 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         {#each $components as addon}
             <svelte:component this={addon.component} bind:data={$auxData} {...addon} />
         {/each}
-    </div>
+    </TitledContainer>
 {/if}

ts/deckoptions/AdvancedOptions.svelte

@@ -4,6 +4,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
     import * as tr from "lib/i18n";
+    import TitledContainer from "./TitledContainer.svelte";
     import SpinBox from "./SpinBox.svelte";
     import SpinBoxFloat from "./SpinBoxFloat.svelte";
     import type { DeckOptionsState } from "./lib";
@@ -13,63 +14,63 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     let defaults = state.defaults;
 </script>
 
-<h2>{tr.deckConfigAdvancedTitle()}</h2>
+<TitledContainer title={tr.deckConfigAdvancedTitle()}>
+    <SpinBox
+        label={tr.schedulingMaximumInterval()}
+        tooltip={tr.deckConfigMaximumIntervalTooltip()}
+        min={1}
+        max={365 * 100}
+        defaultValue={defaults.maximumReviewInterval}
+        bind:value={$config.maximumReviewInterval}
+    />
 
-<SpinBox
+    <SpinBoxFloat
-    label={tr.schedulingMaximumInterval()}
+        label={tr.schedulingStartingEase()}
-    tooltip={tr.deckConfigMaximumIntervalTooltip()}
+        tooltip={tr.deckConfigStartingEaseTooltip()}
-    min={1}
+        min={1.31}
-    max={365 * 100}
+        max={5}
-    defaultValue={defaults.maximumReviewInterval}
+        defaultValue={defaults.initialEase}
-    bind:value={$config.maximumReviewInterval}
+        value={$config.initialEase}
-/>
+        on:changed={(evt) => ($config.initialEase = evt.detail.value)}
+    />
 
-<SpinBoxFloat
+    <SpinBoxFloat
-    label={tr.schedulingStartingEase()}
+        label={tr.schedulingEasyBonus()}
-    tooltip={tr.deckConfigStartingEaseTooltip()}
+        tooltip={tr.deckConfigEasyBonusTooltip()}
-    min={1.31}
+        min={1}
-    max={5}
+        max={3}
-    defaultValue={defaults.initialEase}
+        defaultValue={defaults.easyMultiplier}
-    value={$config.initialEase}
+        value={$config.easyMultiplier}
-    on:changed={(evt) => ($config.initialEase = evt.detail.value)}
+        on:changed={(evt) => ($config.easyMultiplier = evt.detail.value)}
-/>
+    />
 
-<SpinBoxFloat
+    <SpinBoxFloat
-    label={tr.schedulingEasyBonus()}
+        label={tr.schedulingIntervalModifier()}
-    tooltip={tr.deckConfigEasyBonusTooltip()}
+        tooltip={tr.deckConfigIntervalModifierTooltip()}
-    min={1}
+        min={0.5}
-    max={3}
+        max={2}
-    defaultValue={defaults.easyMultiplier}
+        defaultValue={defaults.intervalMultiplier}
-    value={$config.easyMultiplier}
+        value={$config.intervalMultiplier}
-    on:changed={(evt) => ($config.easyMultiplier = evt.detail.value)}
+        on:changed={(evt) => ($config.intervalMultiplier = evt.detail.value)}
-/>
+    />
 
-<SpinBoxFloat
+    <SpinBoxFloat
-    label={tr.schedulingIntervalModifier()}
+        label={tr.schedulingHardInterval()}
-    tooltip={tr.deckConfigIntervalModifierTooltip()}
+        tooltip={tr.deckConfigHardIntervalTooltip()}
-    min={0.5}
+        min={0.5}
-    max={2}
+        max={1.3}
-    defaultValue={defaults.intervalMultiplier}
+        defaultValue={defaults.hardMultiplier}
-    value={$config.intervalMultiplier}
+        value={$config.hardMultiplier}
-    on:changed={(evt) => ($config.intervalMultiplier = evt.detail.value)}
+        on:changed={(evt) => ($config.hardMultiplier = evt.detail.value)}
-/>
+    />
 
-<SpinBoxFloat
+    <SpinBoxFloat
-    label={tr.schedulingHardInterval()}
+        label={tr.schedulingNewInterval()}
-    tooltip={tr.deckConfigHardIntervalTooltip()}
+        tooltip={tr.deckConfigNewIntervalTooltip()}
-    min={0.5}
+        min={0}
-    max={1.3}
+        max={1}
-    defaultValue={defaults.hardMultiplier}
+        defaultValue={defaults.lapseMultiplier}
-    value={$config.hardMultiplier}
+        value={$config.lapseMultiplier}
-    on:changed={(evt) => ($config.hardMultiplier = evt.detail.value)}
+        on:changed={(evt) => ($config.lapseMultiplier = evt.detail.value)}
-/>
+    />
-
+</TitledContainer>
-<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)}
-/>

ts/deckoptions/AudioOptions.svelte

@@ -0,0 +1,29 @@
+<!--
+Copyright: Ankitects Pty Ltd and contributors
+License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
+-->
+<script lang="ts">
+    import * as tr from "lib/i18n";
+    import TitledContainer from "./TitledContainer.svelte";
+    import CheckBox from "./CheckBox.svelte";
+    import type { DeckOptionsState } from "./lib";
+
+    export let state: DeckOptionsState;
+    let config = state.currentConfig;
+    let defaults = state.defaults;
+</script>
+
+<TitledContainer title={tr.deckConfigAudioTitle()}>
+    <CheckBox
+        label={tr.deckConfigDisableAutoplay()}
+        defaultValue={defaults.disableAutoplay}
+        bind:value={$config.disableAutoplay}
+    />
+
+    <CheckBox
+        label={tr.schedulingAlwaysIncludeQuestionSideWhenReplaying()}
+        tooltip={tr.deckConfigAlwaysIncludeQuestionAudioTooltip()}
+        defaultValue={defaults.skipQuestionWhenReplayingAnswer}
+        bind:value={$config.skipQuestionWhenReplayingAnswer}
+    />
+</TitledContainer>

ts/deckoptions/BuryOptions.svelte

@@ -4,6 +4,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
     import * as tr from "lib/i18n";
+    import TitledContainer from "./TitledContainer.svelte";
     import CheckBox from "./CheckBox.svelte";
     import type { DeckOptionsState } from "./lib";
 
@@ -12,18 +13,18 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     let defaults = state.defaults;
 </script>
 
-<h2>{tr.deckConfigBuryTitle()}</h2>
+<TitledContainer title={tr.deckConfigBuryTitle()}>
+    <CheckBox
+        label={tr.deckConfigBuryNewSiblings()}
+        tooltip={tr.deckConfigBuryTooltip()}
+        defaultValue={defaults.buryNew}
+        bind:value={$config.buryNew}
+    />
 
-<CheckBox
+    <CheckBox
-    label={tr.deckConfigBuryNewSiblings()}
+        label={tr.deckConfigBuryReviewSiblings()}
-    tooltip={tr.deckConfigBuryTooltip()}
+        tooltip={tr.deckConfigBuryTooltip()}
-    defaultValue={defaults.buryNew}
+        defaultValue={defaults.buryReviews}
-    bind:value={$config.buryNew}
+        bind:value={$config.buryReviews}
-/>
+    />
-
+</TitledContainer>
-<CheckBox
-    label={tr.deckConfigBuryReviewSiblings()}
-    tooltip={tr.deckConfigBuryTooltip()}
-    defaultValue={defaults.buryReviews}
-    bind:value={$config.buryReviews}
-/>

ts/deckoptions/ConfigEditor.svelte

@@ -12,7 +12,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import AdvancedOptions from "./AdvancedOptions.svelte";
     import BuryOptions from "./BuryOptions.svelte";
     import LapseOptions from "./LapseOptions.svelte";
-    import GeneralOptions from "./GeneralOptions.svelte";
+    import TimerOptions from "./TimerOptions.svelte";
+    import AudioOptions from "./AudioOptions.svelte";
     import Addons from "./Addons.svelte";
     import type { DeckOptionsState } from "./lib";
 
@@ -42,7 +43,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     {/if}
 
     <SectionItem>
-        <GeneralOptions {state} />
+        <TimerOptions {state} />
+    </SectionItem>
+    <SectionItem>
+        <AudioOptions {state} />
     </SectionItem>
     <SectionItem>
         <Addons {state} />
@@ -59,7 +63,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         // adding a border decreases the default font size,
         // so increase it again
         font-size: 2em;
-        border-bottom: 1px solid var(--medium-border);
         margin-right: 16px;
         margin-bottom: 0.5em;
     }

ts/deckoptions/DailyLimits.svelte

@@ -1,9 +1,10 @@
 <!--
-Copyright: Ankitects Pty Ltd and contributors
+    Copyright: Ankitects Pty Ltd and contributors
-License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
+    License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
     import * as tr from "lib/i18n";
+    import TitledContainer from "./TitledContainer.svelte";
     import SpinBox from "./SpinBox.svelte";
     import type { DeckOptionsState } from "./lib";
 
@@ -33,9 +34,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
             : "";
 </script>
 
-<h2>{tr.deckConfigDailyLimits()}</h2>
+<TitledContainer title={tr.deckConfigDailyLimits()}>
-
-<div class="container">
     <SpinBox
         label={tr.schedulingNewCardsday()}
         tooltip={tr.deckConfigNewLimitTooltip() + v3Extra}
@@ -53,4 +52,4 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         defaultValue={defaults.reviewsPerDay}
         bind:value={$config.reviewsPerDay}
     />
-</div>
+</TitledContainer>

ts/deckoptions/DisplayOrder.svelte

@@ -4,6 +4,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
     import * as tr from "lib/i18n";
+    import TitledContainer from "./TitledContainer.svelte";
     import EnumSelector from "./EnumSelector.svelte";
 
     import type { DeckOptionsState } from "./lib";
@@ -35,44 +36,44 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     ];
 </script>
 
-<h2>{tr.deckConfigOrderingTitle()}</h2>
+<TitledContainer title={tr.deckConfigOrderingTitle()}>
+    <EnumSelector
+        label={tr.deckConfigNewGatherPriority()}
+        tooltip={tr.deckConfigNewGatherPriorityTooltip()}
+        choices={newGatherPriorityChoices}
+        defaultValue={defaults.newCardGatherPriority}
+        bind:value={$config.newCardGatherPriority}
+    />
 
-<EnumSelector
+    <EnumSelector
-    label={tr.deckConfigNewGatherPriority()}
+        label={tr.deckConfigNewCardSortOrder()}
-    tooltip={tr.deckConfigNewGatherPriorityTooltip()}
+        tooltip={tr.deckConfigNewCardSortOrderTooltip()}
-    choices={newGatherPriorityChoices}
+        choices={newSortOrderChoices}
-    defaultValue={defaults.newCardGatherPriority}
+        defaultValue={defaults.newCardSortOrder}
-    bind:value={$config.newCardGatherPriority}
+        bind:value={$config.newCardSortOrder}
-/>
+    />
 
-<EnumSelector
+    <EnumSelector
-    label={tr.deckConfigNewCardSortOrder()}
+        label={tr.deckConfigNewReviewPriority()}
-    tooltip={tr.deckConfigNewCardSortOrderTooltip()}
+        tooltip={tr.deckConfigNewReviewPriorityTooltip()}
-    choices={newSortOrderChoices}
+        choices={reviewMixChoices()}
-    defaultValue={defaults.newCardSortOrder}
+        defaultValue={defaults.newMix}
-    bind:value={$config.newCardSortOrder}
+        bind:value={$config.newMix}
-/>
+    />
 
-<EnumSelector
+    <EnumSelector
-    label={tr.deckConfigNewReviewPriority()}
+        label={tr.deckConfigInterdayStepPriority()}
-    tooltip={tr.deckConfigNewReviewPriorityTooltip()}
+        tooltip={tr.deckConfigInterdayStepPriorityTooltip()}
-    choices={reviewMixChoices()}
+        choices={reviewMixChoices()}
-    defaultValue={defaults.newMix}
+        defaultValue={defaults.interdayLearningMix}
-    bind:value={$config.newMix}
+        bind:value={$config.interdayLearningMix}
-/>
+    />
 
-<EnumSelector
+    <EnumSelector
-    label={tr.deckConfigInterdayStepPriority()}
+        label={tr.deckConfigReviewSortOrder()}
-    tooltip={tr.deckConfigInterdayStepPriorityTooltip()}
+        tooltip={tr.deckConfigReviewSortOrderTooltip()}
-    choices={reviewMixChoices()}
+        choices={reviewOrderChoices}
-    defaultValue={defaults.interdayLearningMix}
+        defaultValue={defaults.reviewOrder}
-    bind:value={$config.interdayLearningMix}
+        bind:value={$config.reviewOrder}
-/>
+    />
-
+</TitledContainer>>
-<EnumSelector
-    label={tr.deckConfigReviewSortOrder()}
-    tooltip={tr.deckConfigReviewSortOrderTooltip()}
-    choices={reviewOrderChoices}
-    defaultValue={defaults.reviewOrder}
-    bind:value={$config.reviewOrder}
-/>

ts/deckoptions/GeneralOptions.svelte

@@ -1,48 +0,0 @@
-<!--
-Copyright: Ankitects Pty Ltd and contributors
-License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
--->
-<script lang="ts">
-    import * as tr from "lib/i18n";
-    import SpinBox from "./SpinBox.svelte";
-    import CheckBox from "./CheckBox.svelte";
-    import type { DeckOptionsState } from "./lib";
-
-    export let state: DeckOptionsState;
-    let config = state.currentConfig;
-    let defaults = state.defaults;
-</script>
-
-<h2>{tr.deckConfigTimerTitle()}</h2>
-
-<SpinBox
-    label={tr.deckConfigMaximumAnswerSecs()}
-    tooltip={tr.deckConfigMaximumAnswerSecsTooltip()}
-    min={30}
-    max={600}
-    defaultValue={defaults.capAnswerTimeToSecs}
-    bind:value={$config.capAnswerTimeToSecs}
-/>
-
-<CheckBox
-    id="showAnswerTimer"
-    label={tr.schedulingShowAnswerTimer()}
-    tooltip={tr.deckConfigShowAnswerTimerTooltip()}
-    defaultValue={defaults.showTimer}
-    bind:value={$config.showTimer}
-/>
-
-<h2>{tr.deckConfigAudioTitle()}</h2>
-
-<CheckBox
-    label={tr.deckConfigDisableAutoplay()}
-    defaultValue={defaults.disableAutoplay}
-    bind:value={$config.disableAutoplay}
-/>
-
-<CheckBox
-    label={tr.schedulingAlwaysIncludeQuestionSideWhenReplaying()}
-    tooltip={tr.deckConfigAlwaysIncludeQuestionAudioTooltip()}
-    defaultValue={defaults.skipQuestionWhenReplayingAnswer}
-    bind:value={$config.skipQuestionWhenReplayingAnswer}
-/>

ts/deckoptions/LapseOptions.svelte

@@ -4,6 +4,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
     import * as tr from "lib/i18n";
+    import TitledContainer from "./TitledContainer.svelte";
     import SpinBox from "./SpinBox.svelte";
     import EnumSelector from "./EnumSelector.svelte";
     import StepsInput from "./StepsInput.svelte";
@@ -27,9 +28,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     const leechChoices = [tr.actionsSuspendCard(), tr.schedulingTagOnly()];
 </script>
 
-<div>
+<TitledContainer title={tr.schedulingLapses()}>
-    <h2>{tr.schedulingLapses()}</h2>
-
     <StepsInput
         label={tr.deckConfigRelearningSteps()}
         tooltip={tr.deckConfigRelearningStepsTooltip()}
@@ -62,4 +61,4 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         defaultValue={defaults.leechAction}
         bind:value={$config.leechAction}
     />
-</div>
+</TitledContainer>

ts/deckoptions/NewOptions.svelte

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

ts/deckoptions/TimerOptions.svelte

@@ -0,0 +1,34 @@
+<!--
+Copyright: Ankitects Pty Ltd and contributors
+License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
+-->
+<script lang="ts">
+    import * as tr from "lib/i18n";
+    import TitledContainer from "./TitledContainer.svelte";
+    import SpinBox from "./SpinBox.svelte";
+    import CheckBox from "./CheckBox.svelte";
+    import type { DeckOptionsState } from "./lib";
+
+    export let state: DeckOptionsState;
+    let config = state.currentConfig;
+    let defaults = state.defaults;
+</script>
+
+<TitledContainer title={tr.deckConfigTimerTitle()}>
+    <SpinBox
+        label={tr.deckConfigMaximumAnswerSecs()}
+        tooltip={tr.deckConfigMaximumAnswerSecsTooltip()}
+        min={30}
+        max={600}
+        defaultValue={defaults.capAnswerTimeToSecs}
+        bind:value={$config.capAnswerTimeToSecs}
+    />
+
+    <CheckBox
+        id="showAnswerTimer"
+        label={tr.schedulingShowAnswerTimer()}
+        tooltip={tr.deckConfigShowAnswerTimerTooltip()}
+        defaultValue={defaults.showTimer}
+        bind:value={$config.showTimer}
+    />
+</TitledContainer>

ts/deckoptions/TitledContainer.svelte

@@ -0,0 +1,18 @@
+<!--
+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 title: string;
+</script>
+
+<div class="container-fluid mb-3">
+    <h1 class="mt-3">{title}</h1>
+    <slot />
+</div>
+
+<style lang="scss">
+    h1 {
+        border-bottom: 1px solid var(--medium-border);
+    }
+</style>