move daily limits into separate section; add extra warning+tweak formatting

ts/deckconfig/ConfigEditor.svelte

@@ -3,6 +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 DailyLimits from "./DailyLimits.svelte";
     import NewOptions from "./NewOptions.svelte";
     import ReviewOptions from "./ReviewOptions.svelte";
     import LapseOptions from "./LapseOptions.svelte";
@@ -19,6 +20,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 </style>
 
 <div>
+    <DailyLimits {state} />
     <NewOptions {state} />
     <ReviewOptions {state} />
     <LapseOptions {state} />

ts/deckconfig/ConfigSelector.svelte

@@ -23,7 +23,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 <style lang="scss">
     .form-select {
         display: inline-block;
-        width: 30em;
+        width: 70%;
     }
 
     .outer {
@@ -35,11 +35,14 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         color: var(--text-fg);
         background: var(--window-bg);
         padding: 0.5em;
+        display: flex;
+        justify-content: center;
     }
 
     .inner {
         display: flex;
-        justify-content: center;
+        flex-wrap: wrap;
+        width: 35em;
 
         & > :global(*) {
             padding-left: 0.5em;
@@ -48,13 +51,12 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     }
 
     .padding {
-        height: 2.5em;
+        height: 3em;
     }
 </style>
 
 <div class="outer">
     <div class="inner">
-        <div>
         <div>{tr.actionsOptionsFor({ val: state.currentDeck.name })}</div>
 
         <!-- svelte-ignore a11y-no-onchange -->
@@ -69,7 +71,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         <OptionsDropdown {state} />
     </div>
 </div>
-</div>
 
 <div class="padding">
     <!-- make sure subsequent content doesn't flow under us -->

ts/deckconfig/DailyLimits.svelte

@@ -0,0 +1,53 @@
+<!--
+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 "anki/i18n";
+    import SpinBox from "./SpinBox.svelte";
+    import type { DeckConfigState } from "./lib";
+
+    export let state: DeckConfigState;
+    let config = state.currentConfig;
+    let defaults = state.defaults;
+    let parentLimits = state.parentLimits;
+
+    $: newCardsGreaterThanParent =
+        $config.newPerDay > $parentLimits.newCards
+            ? `Daily limit will be capped to parent limit of ${$parentLimits.newCards}.`
+            : "";
+
+    $: reviewsGreaterThanParent =
+        $config.reviewsPerDay > $parentLimits.reviews
+            ? `Daily limit will be capped to parent limit of ${$parentLimits.reviews}.`
+            : "";
+
+    $: reviewsTooLow =
+        $config.newPerDay * 10 > $config.reviewsPerDay
+            ? `If adding ${
+                  $config.newPerDay
+              } new cards each day, your review limit should be at least ${
+                  $config.newPerDay * 10
+              }`
+            : "";
+</script>
+
+<div>
+    <h2>Daily Limits</h2>
+
+    <SpinBox
+        label={tr.schedulingNewCardsday()}
+        subLabel="The maximum number of new cards to introduce in a day."
+        min={0}
+        warnings={[newCardsGreaterThanParent]}
+        defaultValue={defaults.newPerDay}
+        bind:value={$config.newPerDay} />
+
+    <SpinBox
+        label={tr.schedulingMaximumReviewsday()}
+        subLabel="The maximum number of reviews cards to show in a day."
+        min={0}
+        warnings={[reviewsTooLow, reviewsGreaterThanParent]}
+        defaultValue={defaults.reviewsPerDay}
+        bind:value={$config.reviewsPerDay} />
+</div>

ts/deckconfig/NewOptions.svelte

@@ -14,18 +14,12 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     export let state: DeckConfigState;
     let config = state.currentConfig;
     let defaults = state.defaults;
-    let parentLimits = state.parentLimits;
 
     const newOrderChoices = [
         tr.schedulingShowNewCardsInOrderAdded(),
         tr.schedulingShowNewCardsInRandomOrder(),
     ];
 
-    $: newCardsGreaterThanParent =
-        $config.newPerDay > $parentLimits.newCards
-            ? `Daily limit will be capped to parent limit of ${$parentLimits.newCards}`
-            : "";
-
     let stepsExceedGraduatingInterval: string;
     $: {
         const lastLearnStepInDays = $config.learnSteps.length
@@ -60,14 +54,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         defaultValue={defaults.newCardOrder}
         bind:value={$config.newCardOrder} />
 
-    <SpinBox
-        label={tr.schedulingNewCardsday()}
-        subLabel="The maximum number of new cards to introduce in a day."
-        min={0}
-        warnings={[newCardsGreaterThanParent]}
-        defaultValue={defaults.newPerDay}
-        bind:value={$config.newPerDay} />
-
     <SpinBox
         label={tr.schedulingGraduatingInterval()}
         subLabel="Days to wait after answering Good on the last learning step."

ts/deckconfig/ReviewOptions.svelte

@@ -17,13 +17,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 <div>
     <h2>Reviews</h2>
 
-    <SpinBox
-        label={tr.schedulingMaximumReviewsday()}
-        subLabel="The maximum number of reviews cards to show in a day."
-        min={0}
-        defaultValue={defaults.reviewsPerDay}
-        bind:value={$config.reviewsPerDay} />
-
     <SpinBoxFloat
         label={tr.schedulingEasyBonus()}
         subLabel="Extra multiplier applied when answering Easy on a review card."