Move (most) FSRS options into their own section

2024-03-17 18:25:25 +07:00 · 2024-03-17 18:25:25 +07:00 · c462f64862
parent e9d3b46d47
commit c462f64862
4 changed files with 145 additions and 90 deletions
--- a/ts/deck-options/AdvancedOptions.svelte
+++ b/ts/deck-options/AdvancedOptions.svelte
@ -12,16 +12,12 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
    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, HelpItemScheduler } from "../components/types";
    import CardStateCustomizer from "./CardStateCustomizer.svelte";
-    import FsrsOptions from "./FsrsOptions.svelte";
-    import GlobalLabel from "./GlobalLabel.svelte";
    import type { DeckOptionsState } from "./lib";
    import SpinBoxFloatRow from "./SpinBoxFloatRow.svelte";
    import SpinBoxRow from "./SpinBoxRow.svelte";
-    import Warning from "./Warning.svelte";

    export let state: DeckOptionsState;
    export let api: Record<string, never>;
@ -32,51 +28,16 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
    const fsrs = state.fsrs;

    const settings = {
-        fsrs: {
-            title: "FSRS",
-            help: tr.deckConfigFsrsTooltip(),
-            url: HelpPage.DeckOptions.fsrs,
-        },
        maximumInterval: {
            title: tr.schedulingMaximumInterval(),
            help: tr.deckConfigMaximumIntervalTooltip(),
            url: HelpPage.DeckOptions.maximumInterval,
        },
-        desiredRetention: {
-            title: tr.deckConfigDesiredRetention(),
-            help: tr.deckConfigDesiredRetentionTooltip(),
-            sched: HelpItemScheduler.FSRS,
-        },
        sm2Retention: {
            title: tr.deckConfigSm2Retention(),
            help: tr.deckConfigSm2RetentionTooltip(),
            sched: HelpItemScheduler.FSRS,
        },
-        modelWeights: {
-            title: tr.deckConfigWeights(),
-            help: tr.deckConfigWeightsTooltip(),
-            sched: HelpItemScheduler.FSRS,
-        },
-        rescheduleCardsOnChange: {
-            title: tr.deckConfigRescheduleCardsOnChange(),
-            help: tr.deckConfigRescheduleCardsOnChangeTooltip(),
-            sched: HelpItemScheduler.FSRS,
-        },
-        ignoreRevlogsBeforeMs: {
-            title: tr.deckConfigIgnoreBefore(),
-            help: tr.deckConfigIgnoreBeforeTooltip(),
-            sched: HelpItemScheduler.FSRS,
-        },
-        computeOptimalWeights: {
-            title: tr.deckConfigComputeOptimalWeights(),
-            help: tr.deckConfigComputeOptimalWeightsTooltip(),
-            sched: HelpItemScheduler.FSRS,
-        },
-        computeOptimalRetention: {
-            title: tr.deckConfigComputeOptimalRetention(),
-            help: tr.deckConfigComputeOptimalRetentionTooltip(),
-            sched: HelpItemScheduler.FSRS,
-        },
        startingEase: {
            title: tr.schedulingStartingEase(),
            help: tr.deckConfigStartingEaseTooltip(),
@ -122,8 +83,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
        modal.show();
        carousel.to(index);
    }
-
-    $: fsrsClientWarning = $fsrs ? tr.deckConfigFsrsOnAllClients() : "";
 </script>

 <TitledContainer title={tr.deckConfigAdvancedTitle()}>
@ -139,19 +98,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
        }}
    />
    <DynamicallySlottable slotHost={Item} {api}>
-        <Item>
-            <SwitchRow bind:value={$fsrs} defaultValue={false}>
-                <SettingTitle
-                    on:click={() =>
-                        openHelpModal(Object.keys(settings).indexOf("fsrs"))}
-                >
-                    <GlobalLabel title={settings.fsrs.title} />
-                </SettingTitle>
-            </SwitchRow>
-        </Item>
-
-        <Warning warning={fsrsClientWarning} />
-
        <Item>
            <SpinBoxRow
                bind:value={$config.maximumReviewInterval}
@ -254,11 +200,19 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                </SpinBoxFloatRow>
            </Item>
        {:else}
-            <FsrsOptions
-                {state}
-                openHelpModal={(key) =>
-                    openHelpModal(Object.keys(settings).indexOf(key))}
-            />
+            <SpinBoxFloatRow
+                bind:value={$config.sm2Retention}
+                defaultValue={defaults.sm2Retention}
+                min={0.5}
+                max={1.0}
+            >
+                <SettingTitle
+                    on:click={() =>
+                        openHelpModal(Object.keys(settings).indexOf("sm2Retention"))}
+                >
+                    {tr.deckConfigSm2Retention()}
+                </SettingTitle>
+            </SpinBoxFloatRow>
        {/if}

        <Item>
--- a/ts/deck-options/DeckOptionsPage.svelte
+++ b/ts/deck-options/DeckOptionsPage.svelte
@ -16,6 +16,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
    import ConfigSelector from "./ConfigSelector.svelte";
    import DailyLimits from "./DailyLimits.svelte";
    import DisplayOrder from "./DisplayOrder.svelte";
+    import FsrsOptionsOuter from "./FsrsOptionsOuter.svelte";
    import HtmlAddon from "./HtmlAddon.svelte";
    import LapseOptions from "./LapseOptions.svelte";
    import type { DeckOptionsState } from "./lib";
@ -107,6 +108,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                </Row>
            {/if}

+            <Row class="row-columns">
+                <FsrsOptionsOuter {state} api={{}} />
+            </Row>
+
            <Row class="row-columns">
                <AdvancedOptions {state} api={advancedOptions} />
            </Row>
--- a/ts/deck-options/FsrsOptions.svelte
+++ b/ts/deck-options/FsrsOptions.svelte
@ -268,17 +268,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html

 <Warning warning={desiredRetentionWarning} className={retentionWarningClass} />

-<SpinBoxFloatRow
-    bind:value={$config.sm2Retention}
-    defaultValue={defaults.sm2Retention}
-    min={0.5}
-    max={1.0}
->
-    <SettingTitle on:click={() => openHelpModal("sm2Retention")}>
-        {tr.deckConfigSm2Retention()}
-    </SettingTitle>
-</SpinBoxFloatRow>
-
 <div class="ms-1 me-1">
    <WeightsInputRow
        bind:value={$config.fsrsWeights}
@ -289,27 +278,17 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
            {tr.deckConfigWeights()}
        </SettingTitle>
    </WeightsInputRow>
-</div>

-<div class="m-2">
-    <SwitchRow bind:value={$fsrsReschedule} defaultValue={false}>
-        <SettingTitle on:click={() => openHelpModal("rescheduleCardsOnChange")}>
-            <GlobalLabel title={tr.deckConfigRescheduleCardsOnChange()} />
-        </SettingTitle>
-    </SwitchRow>
-
-    {#if $fsrsReschedule}
-        <Warning warning={tr.deckConfigRescheduleCardsWarning()} />
-    {/if}
-</div>
-
-<div class="m-2">
-    <b>{tr.deckConfigComputeOptimalWeights()}</b>
    <input
        bind:value={$config.weightSearch}
        placeholder={defaultWeightSearch}
        class="w-100 mb-1"
    />
+    <DateInput bind:date={$config.ignoreRevlogsBeforeDate}>
+        <SettingTitle on:click={() => openHelpModal("ignoreBefore")}>
+            {tr.deckConfigIgnoreBefore()}
+        </SettingTitle>
+    </DateInput>
    <button
        class="btn {computingWeights ? 'btn-warning' : 'btn-primary'}"
        disabled={!computingWeights && computing}
@ -332,11 +311,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
            {tr.deckConfigEvaluateButton()}
        {/if}
    </button>
-    <DateInput bind:date={$config.ignoreRevlogsBeforeDate}>
-        <SettingTitle on:click={() => openHelpModal("ignoreBefore")}>
-            {tr.deckConfigIgnoreBefore()}
-        </SettingTitle>
-    </DateInput>
    {#if computingWeights || checkingWeights}<div>
            {computeWeightsProgressString}
        </div>{/if}
@ -344,6 +318,18 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
    <Warning warning={lastOptimizationWarning} className="alert-warning" />
 </div>

+<div class="m-2">
+    <SwitchRow bind:value={$fsrsReschedule} defaultValue={false}>
+        <SettingTitle on:click={() => openHelpModal("rescheduleCardsOnChange")}>
+            <GlobalLabel title={tr.deckConfigRescheduleCardsOnChange()} />
+        </SettingTitle>
+    </SwitchRow>
+
+    {#if $fsrsReschedule}
+        <Warning warning={tr.deckConfigRescheduleCardsWarning()} />
+    {/if}
+</div>
+
 <div class="m-2">
    <details>
        <summary>{tr.deckConfigComputeOptimalRetention()} (experimental)</summary>
--- a/ts/deck-options/FsrsOptionsOuter.svelte
+++ b/ts/deck-options/FsrsOptionsOuter.svelte
@ -0,0 +1,110 @@
+<!--
+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 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, HelpItemScheduler } from "../components/types";
+    import FsrsOptions from "./FsrsOptions.svelte";
+    import GlobalLabel from "./GlobalLabel.svelte";
+    import type { DeckOptionsState } from "./lib";
+    import Warning from "./Warning.svelte";
+
+    export let state: DeckOptionsState;
+    export let api: Record<string, never>;
+
+    const fsrs = state.fsrs;
+
+    const settings = {
+        fsrs: {
+            title: "FSRS",
+            help: tr.deckConfigFsrsTooltip(),
+            url: HelpPage.DeckOptions.fsrs,
+        },
+        desiredRetention: {
+            title: tr.deckConfigDesiredRetention(),
+            help: tr.deckConfigDesiredRetentionTooltip(),
+            sched: HelpItemScheduler.FSRS,
+        },
+        modelWeights: {
+            title: tr.deckConfigWeights(),
+            help:
+                tr.deckConfigWeightsTooltip() +
+                "\n\n" +
+                tr.deckConfigComputeOptimalWeightsTooltip(),
+            sched: HelpItemScheduler.FSRS,
+        },
+        ignoreRevlogsBeforeMs: {
+            title: tr.deckConfigIgnoreBefore(),
+            help: tr.deckConfigIgnoreBeforeTooltip(),
+            sched: HelpItemScheduler.FSRS,
+        },
+        rescheduleCardsOnChange: {
+            title: tr.deckConfigRescheduleCardsOnChange(),
+            help: tr.deckConfigRescheduleCardsOnChangeTooltip(),
+            sched: HelpItemScheduler.FSRS,
+        },
+        computeOptimalRetention: {
+            title: tr.deckConfigComputeOptimalRetention(),
+            help: tr.deckConfigComputeOptimalRetentionTooltip(),
+            sched: HelpItemScheduler.FSRS,
+        },
+    };
+    const helpSections = Object.values(settings) as HelpItem[];
+
+    let modal: Modal;
+    let carousel: Carousel;
+
+    function openHelpModal(index: number): void {
+        modal.show();
+        carousel.to(index);
+    }
+
+    $: fsrsClientWarning = $fsrs ? tr.deckConfigFsrsOnAllClients() : "";
+</script>
+
+<TitledContainer title={"FSRS"}>
+    <HelpModal
+        title={"FSRS"}
+        url={HelpPage.DeckOptions.fsrs}
+        slot="tooltip"
+        fsrs={$fsrs}
+        {helpSections}
+        on:mount={(e) => {
+            modal = e.detail.modal;
+            carousel = e.detail.carousel;
+        }}
+    />
+    <DynamicallySlottable slotHost={Item} {api}>
+        <Item>
+            <SwitchRow bind:value={$fsrs} defaultValue={false}>
+                <SettingTitle
+                    on:click={() =>
+                        openHelpModal(Object.keys(settings).indexOf("fsrs"))}
+                >
+                    <GlobalLabel title={settings.fsrs.title} />
+                </SettingTitle>
+            </SwitchRow>
+        </Item>
+
+        <Warning warning={fsrsClientWarning} />
+
+        {#if $fsrs}
+            <FsrsOptions
+                {state}
+                openHelpModal={(key) =>
+                    openHelpModal(Object.keys(settings).indexOf(key))}
+            />
+        {/if}
+    </DynamicallySlottable>
+</TitledContainer>