Split "auto advance" into a separate section

ftl/core/deck-config.ftl

@@ -234,6 +234,9 @@ deck-config-stop-timer-on-answer = Stop timer on answer
 deck-config-stop-timer-on-answer-tooltip =
     Whether to stop the timer when the answer is revealed.
     This doesn't affect statistics.
+
+## Auto Advance section
+
 deck-config-seconds-to-show-question = Seconds to show question for
 deck-config-seconds-to-show-question-tooltip-2 = When auto advance is activated, the number of seconds to wait before revealing the answer. Set to 0 to disable.
 deck-config-seconds-to-show-answer = Seconds to show answer for

ts/deck-options/AutoAdvance.svelte

@@ -0,0 +1,133 @@
+<!--
+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 "@tslib/ftl";
+    import { HelpPage } from "@tslib/help-page";
+    import type Carousel from "bootstrap/js/dist/carousel";
+    import type Modal from "bootstrap/js/dist/modal";
+
+    import DynamicallySlottable from "../components/DynamicallySlottable.svelte";
+    import EnumSelectorRow from "../components/EnumSelectorRow.svelte";
+    import HelpModal from "../components/HelpModal.svelte";
+    import Item from "../components/Item.svelte";
+    import SettingTitle from "../components/SettingTitle.svelte";
+    import SwitchRow from "../components/SwitchRow.svelte";
+    import TitledContainer from "../components/TitledContainer.svelte";
+    import type { HelpItem } from "../components/types";
+    import { answerChoices } from "./choices";
+    import type { DeckOptionsState } from "./lib";
+    import SpinBoxFloatRow from "./SpinBoxFloatRow.svelte";
+
+    export let state: DeckOptionsState;
+    export let api: Record<string, never>;
+
+    const config = state.currentConfig;
+    const defaults = state.defaults;
+
+    const settings = {
+        secondsToShowQuestion: {
+            title: tr.deckConfigSecondsToShowQuestion(),
+            help: tr.deckConfigSecondsToShowQuestionTooltip2(),
+        },
+        secondsToShowAnswer: {
+            title: tr.deckConfigSecondsToShowAnswer(),
+            help: tr.deckConfigSecondsToShowAnswerTooltip2(),
+        },
+        waitForAudio: {
+            title: tr.deckConfigWaitForAudio(),
+            help: tr.deckConfigWaitForAudioTooltip(),
+        },
+        answerAction: {
+            title: tr.deckConfigAnswerAction(),
+            help: tr.deckConfigAnswerActionTooltip(),
+        },
+    };
+    const helpSections = Object.values(settings) as HelpItem[];
+
+    let modal: Modal;
+    let carousel: Carousel;
+
+    function openHelpModal(index: number): void {
+        modal.show();
+        carousel.to(index);
+    }
+</script>
+
+<TitledContainer title={tr.actionsAutoAdvance()}>
+    <HelpModal
+        title={tr.deckConfigTimerTitle()}
+        url={HelpPage.DeckOptions.timer}
+        slot="tooltip"
+        {helpSections}
+        on:mount={(e) => {
+            modal = e.detail.modal;
+            carousel = e.detail.carousel;
+        }}
+    />
+    <DynamicallySlottable slotHost={Item} {api}>
+        <Item>
+            <SpinBoxFloatRow
+                bind:value={$config.secondsToShowQuestion}
+                defaultValue={defaults.secondsToShowQuestion}
+                step={0.1}
+            >
+                <SettingTitle
+                    on:click={() =>
+                        openHelpModal(
+                            Object.keys(settings).indexOf("secondsToShowQuestion"),
+                        )}
+                >
+                    {settings.secondsToShowQuestion.title}
+                </SettingTitle>
+            </SpinBoxFloatRow>
+        </Item>
+
+        <Item>
+            <SpinBoxFloatRow
+                bind:value={$config.secondsToShowAnswer}
+                defaultValue={defaults.secondsToShowAnswer}
+                step={0.1}
+            >
+                <SettingTitle
+                    on:click={() =>
+                        openHelpModal(
+                            Object.keys(settings).indexOf("secondsToShowAnswer"),
+                        )}
+                >
+                    {settings.secondsToShowAnswer.title}
+                </SettingTitle>
+            </SpinBoxFloatRow>
+        </Item>
+
+        <Item>
+            <SwitchRow
+                bind:value={$config.waitForAudio}
+                defaultValue={defaults.waitForAudio}
+            >
+                <SettingTitle
+                    on:click={() =>
+                        openHelpModal(Object.keys(settings).indexOf("waitForAudio"))}
+                >
+                    {settings.waitForAudio.title}
+                </SettingTitle>
+            </SwitchRow>
+        </Item>
+
+        <Item>
+            <EnumSelectorRow
+                bind:value={$config.answerAction}
+                defaultValue={defaults.answerAction}
+                choices={answerChoices()}
+            >
+                <SettingTitle
+                    on:click={() =>
+                        openHelpModal(Object.keys(settings).indexOf("answerAction"))}
+                >
+                    {settings.answerAction.title}
+                </SettingTitle>
+            </EnumSelectorRow>
+        </Item>
+    </DynamicallySlottable>
+</TitledContainer>

ts/deck-options/DeckOptionsPage.svelte

@@ -11,6 +11,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import Addons from "./Addons.svelte";
     import AdvancedOptions from "./AdvancedOptions.svelte";
     import AudioOptions from "./AudioOptions.svelte";
+    import AutoAdvance from "./AutoAdvance.svelte";
     import BuryOptions from "./BuryOptions.svelte";
     import ConfigSelector from "./ConfigSelector.svelte";
     import DailyLimits from "./DailyLimits.svelte";
@@ -88,12 +89,16 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         </div>
 
         <div>
+            <Row class="row-columns">
+                <AudioOptions {state} api={audioOptions} />
+            </Row>
+
             <Row class="row-columns">
                 <TimerOptions {state} api={timerOptions} />
             </Row>
 
             <Row class="row-columns">
-                <AudioOptions {state} api={audioOptions} />
+                <AutoAdvance {state} api={timerOptions} />
             </Row>
 
             {#if $addons.length}

ts/deck-options/TimerOptions.svelte

@@ -9,16 +9,13 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import type Modal from "bootstrap/js/dist/modal";
 
     import DynamicallySlottable from "../components/DynamicallySlottable.svelte";
-    import EnumSelectorRow from "../components/EnumSelectorRow.svelte";
     import HelpModal from "../components/HelpModal.svelte";
     import Item from "../components/Item.svelte";
     import SettingTitle from "../components/SettingTitle.svelte";
     import SwitchRow from "../components/SwitchRow.svelte";
     import TitledContainer from "../components/TitledContainer.svelte";
     import type { HelpItem } from "../components/types";
-    import { answerChoices } from "./choices";
     import type { DeckOptionsState } from "./lib";
-    import SpinBoxFloatRow from "./SpinBoxFloatRow.svelte";
     import SpinBoxRow from "./SpinBoxRow.svelte";
     import Warning from "./Warning.svelte";
 
@@ -46,22 +43,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
             title: tr.deckConfigStopTimerOnAnswer(),
             help: tr.deckConfigStopTimerOnAnswerTooltip(),
         },
-        secondsToShowQuestion: {
-            title: tr.deckConfigSecondsToShowQuestion(),
-            help: tr.deckConfigSecondsToShowQuestionTooltip2(),
-        },
-        secondsToShowAnswer: {
-            title: tr.deckConfigSecondsToShowAnswer(),
-            help: tr.deckConfigSecondsToShowAnswerTooltip2(),
-        },
-        waitForAudio: {
-            title: tr.deckConfigWaitForAudio(),
-            help: tr.deckConfigWaitForAudioTooltip(),
-        },
-        answerAction: {
-            title: tr.deckConfigAnswerAction(),
-            help: tr.deckConfigAnswerActionTooltip(),
-        },
     };
     const helpSections = Object.values(settings) as HelpItem[];
 
@@ -144,68 +125,5 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                 </SwitchRow>
             </div>
         </Item>
-
-        <Item>
-            <SpinBoxFloatRow
-                bind:value={$config.secondsToShowQuestion}
-                defaultValue={defaults.secondsToShowQuestion}
-                step={0.1}
-            >
-                <SettingTitle
-                    on:click={() =>
-                        openHelpModal(
-                            Object.keys(settings).indexOf("secondsToShowQuestion"),
-                        )}
-                >
-                    {settings.secondsToShowQuestion.title}
-                </SettingTitle>
-            </SpinBoxFloatRow>
-        </Item>
-
-        <Item>
-            <SpinBoxFloatRow
-                bind:value={$config.secondsToShowAnswer}
-                defaultValue={defaults.secondsToShowAnswer}
-                step={0.1}
-            >
-                <SettingTitle
-                    on:click={() =>
-                        openHelpModal(
-                            Object.keys(settings).indexOf("secondsToShowAnswer"),
-                        )}
-                >
-                    {settings.secondsToShowAnswer.title}
-                </SettingTitle>
-            </SpinBoxFloatRow>
-        </Item>
-
-        <Item>
-            <SwitchRow
-                bind:value={$config.waitForAudio}
-                defaultValue={defaults.waitForAudio}
-            >
-                <SettingTitle
-                    on:click={() =>
-                        openHelpModal(Object.keys(settings).indexOf("waitForAudio"))}
-                >
-                    {settings.waitForAudio.title}
-                </SettingTitle>
-            </SwitchRow>
-        </Item>
-
-        <Item>
-            <EnumSelectorRow
-                bind:value={$config.answerAction}
-                defaultValue={defaults.answerAction}
-                choices={answerChoices()}
-            >
-                <SettingTitle
-                    on:click={() =>
-                        openHelpModal(Object.keys(settings).indexOf("answerAction"))}
-                >
-                    {settings.answerAction.title}
-                </SettingTitle>
-            </EnumSelectorRow>
-        </Item>
     </DynamicallySlottable>
 </TitledContainer>