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,18 +14,17 @@ 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
-<SpinBox
         label={tr.schedulingMaximumInterval()}
         tooltip={tr.deckConfigMaximumIntervalTooltip()}
         min={1}
         max={365 * 100}
         defaultValue={defaults.maximumReviewInterval}
         bind:value={$config.maximumReviewInterval}
-/>
+    />
 
-<SpinBoxFloat
+    <SpinBoxFloat
         label={tr.schedulingStartingEase()}
         tooltip={tr.deckConfigStartingEaseTooltip()}
         min={1.31}
@@ -32,9 +32,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         defaultValue={defaults.initialEase}
         value={$config.initialEase}
         on:changed={(evt) => ($config.initialEase = evt.detail.value)}
-/>
+    />
 
-<SpinBoxFloat
+    <SpinBoxFloat
         label={tr.schedulingEasyBonus()}
         tooltip={tr.deckConfigEasyBonusTooltip()}
         min={1}
@@ -42,9 +42,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         defaultValue={defaults.easyMultiplier}
         value={$config.easyMultiplier}
         on:changed={(evt) => ($config.easyMultiplier = evt.detail.value)}
-/>
+    />
 
-<SpinBoxFloat
+    <SpinBoxFloat
         label={tr.schedulingIntervalModifier()}
         tooltip={tr.deckConfigIntervalModifierTooltip()}
         min={0.5}
@@ -52,9 +52,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         defaultValue={defaults.intervalMultiplier}
         value={$config.intervalMultiplier}
         on:changed={(evt) => ($config.intervalMultiplier = evt.detail.value)}
-/>
+    />
 
-<SpinBoxFloat
+    <SpinBoxFloat
         label={tr.schedulingHardInterval()}
         tooltip={tr.deckConfigHardIntervalTooltip()}
         min={0.5}
@@ -62,9 +62,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         defaultValue={defaults.hardMultiplier}
         value={$config.hardMultiplier}
         on:changed={(evt) => ($config.hardMultiplier = evt.detail.value)}
-/>
+    />
 
-<SpinBoxFloat
+    <SpinBoxFloat
         label={tr.schedulingNewInterval()}
         tooltip={tr.deckConfigNewIntervalTooltip()}
         min={0}
@@ -72,4 +72,5 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         defaultValue={defaults.lapseMultiplier}
         value={$config.lapseMultiplier}
         on:changed={(evt) => ($config.lapseMultiplier = evt.detail.value)}
-/>
+    />
+</TitledContainer>

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
-<CheckBox
         label={tr.deckConfigBuryNewSiblings()}
         tooltip={tr.deckConfigBuryTooltip()}
         defaultValue={defaults.buryNew}
         bind:value={$config.buryNew}
-/>
+    />
 
-<CheckBox
+    <CheckBox
         label={tr.deckConfigBuryReviewSiblings()}
         tooltip={tr.deckConfigBuryTooltip()}
         defaultValue={defaults.buryReviews}
         bind:value={$config.buryReviews}
-/>
+    />
+</TitledContainer>

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
-<EnumSelector
         label={tr.deckConfigNewGatherPriority()}
         tooltip={tr.deckConfigNewGatherPriorityTooltip()}
         choices={newGatherPriorityChoices}
         defaultValue={defaults.newCardGatherPriority}
         bind:value={$config.newCardGatherPriority}
-/>
+    />
 
-<EnumSelector
+    <EnumSelector
         label={tr.deckConfigNewCardSortOrder()}
         tooltip={tr.deckConfigNewCardSortOrderTooltip()}
         choices={newSortOrderChoices}
         defaultValue={defaults.newCardSortOrder}
         bind:value={$config.newCardSortOrder}
-/>
+    />
 
-<EnumSelector
+    <EnumSelector
         label={tr.deckConfigNewReviewPriority()}
         tooltip={tr.deckConfigNewReviewPriorityTooltip()}
         choices={reviewMixChoices()}
         defaultValue={defaults.newMix}
         bind:value={$config.newMix}
-/>
+    />
 
-<EnumSelector
+    <EnumSelector
         label={tr.deckConfigInterdayStepPriority()}
         tooltip={tr.deckConfigInterdayStepPriorityTooltip()}
         choices={reviewMixChoices()}
         defaultValue={defaults.interdayLearningMix}
         bind:value={$config.interdayLearningMix}
-/>
+    />
 
-<EnumSelector
+    <EnumSelector
         label={tr.deckConfigReviewSortOrder()}
         tooltip={tr.deckConfigReviewSortOrderTooltip()}
         choices={reviewOrderChoices}
         defaultValue={defaults.reviewOrder}
         bind:value={$config.reviewOrder}
-/>
+    />
+</TitledContainer>>

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
-<StepsInput
         label={tr.deckConfigLearningSteps()}
         tooltip={tr.deckConfigLearningStepsTooltip()}
         defaultValue={defaults.learnSteps}
         value={$config.learnSteps}
         on:changed={(evt) => ($config.learnSteps = evt.detail.value)}
-/>
+    />
 
-<SpinBox
+    <SpinBox
         label={tr.schedulingGraduatingInterval()}
         tooltip={tr.deckConfigGraduatingIntervalTooltip()}
         warnings={[stepsExceedGraduatingInterval]}
         defaultValue={defaults.graduatingIntervalGood}
         bind:value={$config.graduatingIntervalGood}
-/>
+    />
 
-<SpinBox
+    <SpinBox
         label={tr.schedulingEasyInterval()}
         tooltip={tr.deckConfigEasyIntervalTooltip()}
         warnings={[goodExceedsEasy]}
         defaultValue={defaults.graduatingIntervalEasy}
         bind:value={$config.graduatingIntervalEasy}
-/>
+    />
 
-<EnumSelector
+    <EnumSelector
         label={tr.deckConfigNewInsertionOrder()}
         tooltip={tr.deckConfigNewInsertionOrderTooltip()}
         choices={newInsertOrderChoices}
         defaultValue={defaults.newCardInsertOrder}
         bind:value={$config.newCardInsertOrder}
-/>
+    />
+</TitledContainer>

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>