Rename SectionItem to just Item and use across option sections

ts/components/ButtonToolbar.svelte

@@ -5,7 +5,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 <script lang="typescript">
     import { setContext } from "svelte";
     import { writable } from "svelte/store";
-    import SectionItem from "./SectionItem.svelte";
+    import Item from "./Item.svelte";
     import { sectionKey } from "./contextKeys";
     import type { Identifier } from "./identifier";
     import { insertElement, appendElement } from "./identifier";
@@ -84,9 +84,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 >
     <slot />
     {#each $dynamicItems as item}
-        <SectionItem id={item[0].id} registration={item[1]}>
+        <Item id={item[0].id} registration={item[1]}>
             <svelte:component this={item[0].component} {...item[0].props} />
-        </SectionItem>
+        </Item>
     {/each}
 </div>
 

ts/components/Section.svelte

@@ -5,7 +5,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 <script lang="typescript">
     import { setContext } from "svelte";
     import { writable } from "svelte/store";
-    import SectionItem from "./SectionItem.svelte";
+    import Item from "./Item.svelte";
     import { sectionKey } from "./contextKeys";
     import type { Identifier } from "./identifier";
     import { insertElement, appendElement } from "./identifier";
@@ -56,9 +56,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 <div bind:this={sectionRef} {id}>
     <slot />
     {#each $dynamicItems as item}
-        <SectionItem id={item[0].id} registration={item[1]}>
+        <Item id={item[0].id} registration={item[1]}>
             <svelte:component this={item[0].component} {...item[0].props} />
-        </SectionItem>
+        </Item>
     {/each}
 </div>
 

ts/deckoptions/AdvancedOptions.svelte

@@ -5,6 +5,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 Item from "components/Item.svelte";
     import SpinBoxRow from "./SpinBoxRow.svelte";
     import SpinBoxFloatRow from "./SpinBoxFloatRow.svelte";
     import type { DeckOptionsState } from "./lib";
@@ -17,6 +18,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 </script>
 
 <TitledContainer title={tr.deckConfigAdvancedTitle()} {api}>
+    <Item>
         <SpinBoxRow
             bind:value={$config.maximumReviewInterval}
             defaultValue={defaults.maximumReviewInterval}
@@ -26,7 +28,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         >
             {tr.schedulingMaximumInterval()}
         </SpinBoxRow>
+    </Item>
 
+    <Item>
         <SpinBoxFloatRow
             bind:value={$config.initialEase}
             defaultValue={defaults.initialEase}
@@ -36,7 +40,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         >
             {tr.schedulingStartingEase()}
         </SpinBoxFloatRow>
+    </Item>
 
+    <Item>
         <SpinBoxFloatRow
             bind:value={$config.easyMultiplier}
             defaultValue={defaults.easyMultiplier}
@@ -46,7 +52,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         >
             {tr.schedulingEasyBonus()}
         </SpinBoxFloatRow>
+    </Item>
 
+    <Item>
         <SpinBoxFloatRow
             bind:value={$config.intervalMultiplier}
             defaultValue={defaults.intervalMultiplier}
@@ -56,7 +64,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         >
             {tr.schedulingIntervalModifier()}
         </SpinBoxFloatRow>
+    </Item>
 
+    <Item>
         <SpinBoxFloatRow
             bind:value={$config.hardMultiplier}
             defaultValue={defaults.hardMultiplier}
@@ -66,7 +76,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         >
             {tr.schedulingHardInterval()}
         </SpinBoxFloatRow>
+    </Item>
 
+    <Item>
         <SpinBoxFloatRow
             bind:value={$config.lapseMultiplier}
             defaultValue={defaults.lapseMultiplier}
@@ -75,4 +87,5 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         >
             {tr.schedulingNewInterval()}
         </SpinBoxFloatRow>
+    </Item>
 </TitledContainer>

ts/deckoptions/AudioOptions.svelte

@@ -5,6 +5,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 Item from "components/Item.svelte";
     import CheckBoxRow from "./CheckBoxRow.svelte";
     import type { DeckOptionsState } from "./lib";
 
@@ -16,13 +17,16 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 </script>
 
 <TitledContainer title={tr.deckConfigAudioTitle()} {api}>
+    <Item>
         <CheckBoxRow
             bind:value={$config.disableAutoplay}
             defaultValue={defaults.disableAutoplay}
         >
             {tr.deckConfigDisableAutoplay()}
         </CheckBoxRow>
+    </Item>
 
+    <Item>
         <CheckBoxRow
             bind:value={$config.skipQuestionWhenReplayingAnswer}
             defaultValue={defaults.skipQuestionWhenReplayingAnswer}
@@ -30,4 +34,5 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         >
             {tr.schedulingAlwaysIncludeQuestionSideWhenReplaying()}
         </CheckBoxRow>
+    </Item>
 </TitledContainer>

ts/deckoptions/BuryOptions.svelte

@@ -5,6 +5,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 Item from "components/Item.svelte";
     import CheckBoxRow from "./CheckBoxRow.svelte";
     import type { DeckOptionsState } from "./lib";
 
@@ -16,6 +17,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 </script>
 
 <TitledContainer title={tr.deckConfigBuryTitle()} {api}>
+    <Item>
         <CheckBoxRow
             bind:value={$config.buryNew}
             defaultValue={defaults.buryNew}
@@ -23,7 +25,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         >
             {tr.deckConfigBuryNewSiblings()}
         </CheckBoxRow>
+    </Item>
 
+    <Item>
         <CheckBoxRow
             bind:value={$config.buryReviews}
             defaultValue={defaults.buryReviews}
@@ -31,4 +35,5 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         >
             {tr.deckConfigBuryReviewSiblings()}
         </CheckBoxRow>
+    </Item>
 </TitledContainer>

ts/deckoptions/ConfigSelector.svelte

@@ -12,7 +12,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import TextInputModal from "./TextInputModal.svelte";
     import StickyBar from "components/StickyBar.svelte";
     import ButtonToolbar from "components/ButtonToolbar.svelte";
-    import SectionItem from "components/SectionItem.svelte";
+    import Item from "components/Item.svelte";
     import ButtonGroup from "components/ButtonGroup.svelte";
     import ButtonGroupItem from "components/ButtonGroupItem.svelte";
 
@@ -89,7 +89,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
 <StickyBar>
     <ButtonToolbar class="justify-content-between" size={2.3} wrap={false}>
-        <SectionItem>
+        <Item>
             <ButtonGroup class="flex-grow-1">
                 <ButtonGroupItem>
                     <SelectButton class="flex-grow-1" on:change={blur}>
@@ -104,15 +104,15 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                     </SelectButton>
                 </ButtonGroupItem>
             </ButtonGroup>
-        </SectionItem>
+        </Item>
 
-        <SectionItem>
+        <Item>
             <SaveButton
                 {state}
                 on:add={promptToAdd}
                 on:clone={promptToClone}
                 on:rename={promptToRename}
             />
-        </SectionItem>
+        </Item>
     </ButtonToolbar>
 </StickyBar>

ts/deckoptions/DailyLimits.svelte

@@ -5,7 +5,7 @@
 <script lang="ts">
     import * as tr from "lib/i18n";
     import TitledContainer from "./TitledContainer.svelte";
-    import SectionItem from "components/SectionItem.svelte";
+    import Item from "components/Item.svelte";
     import SpinBoxRow from "./SpinBoxRow.svelte";
     import Warning from "./Warning.svelte";
     import type { DeckOptionsState } from "./lib";
@@ -39,7 +39,7 @@
 </script>
 
 <TitledContainer title={tr.deckConfigDailyLimits()} {api}>
-    <SectionItem>
+    <Item>
         <SpinBoxRow
             bind:value={$config.newPerDay}
             defaultValue={defaults.newPerDay}
@@ -49,9 +49,9 @@
         </SpinBoxRow>
 
         <Warning warning={newCardsGreaterThanParent} />
-    </SectionItem>
+    </Item>
 
-    <SectionItem>
+    <Item>
         <SpinBoxRow
             bind:value={$config.reviewsPerDay}
             defaultValue={defaults.reviewsPerDay}
@@ -61,5 +61,5 @@
         </SpinBoxRow>
 
         <Warning warning={reviewsTooLow} />
-    </SectionItem>
+    </Item>
 </TitledContainer>

ts/deckoptions/DeckOptionsPage.svelte

@@ -5,7 +5,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 <script lang="ts">
     import ConfigSelector from "./ConfigSelector.svelte";
     import Container from "components/Container.svelte";
-    import SectionItem from "components/SectionItem.svelte";
+    import Item from "components/Item.svelte";
     import DailyLimits from "./DailyLimits.svelte";
     import DisplayOrder from "./DisplayOrder.svelte";
     import NewOptions from "./NewOptions.svelte";
@@ -58,36 +58,36 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 <ConfigSelector {state} />
 
 <Container api={options}>
-    <SectionItem>
+    <Item>
         <DailyLimits {state} api={dailyLimits} />
-    </SectionItem>
+    </Item>
 
-    <SectionItem>
+    <Item>
         <NewOptions {state} api={newOptions} />
-    </SectionItem>
-    <SectionItem>
+    </Item>
+    <Item>
         <LapseOptions {state} api={lapseOptions} />
-    </SectionItem>
-    <SectionItem>
+    </Item>
+    <Item>
         <BuryOptions {state} api={buryOptions} />
-    </SectionItem>
+    </Item>
 
     {#if state.v3Scheduler}
-        <SectionItem>
+        <Item>
             <DisplayOrder {state} api={displayOrder} />
-        </SectionItem>
+        </Item>
     {/if}
 
-    <SectionItem>
+    <Item>
         <TimerOptions {state} api={timerOptions} />
-    </SectionItem>
-    <SectionItem>
+    </Item>
+    <Item>
         <AudioOptions {state} api={audioOptions} />
-    </SectionItem>
-    <SectionItem>
+    </Item>
+    <Item>
         <Addons {state} api={addonOptions} />
-    </SectionItem>
-    <SectionItem>
+    </Item>
+    <Item>
         <AdvancedOptions {state} api={advancedOptions} />
-    </SectionItem>
+    </Item>
 </Container>

ts/deckoptions/DisplayOrder.svelte

@@ -5,6 +5,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 Item from "components/Item.svelte";
     import EnumSelectorRow from "./EnumSelectorRow.svelte";
 
     import type { DeckOptionsState } from "./lib";
@@ -39,6 +40,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 </script>
 
 <TitledContainer title={tr.deckConfigOrderingTitle()} {api}>
+    <Item>
         <EnumSelectorRow
             bind:value={$config.newCardGatherPriority}
             defaultValue={defaults.newCardGatherPriority}
@@ -47,7 +49,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         >
             {tr.deckConfigNewGatherPriority()}
         </EnumSelectorRow>
+    </Item>
 
+    <Item>
         <EnumSelectorRow
             bind:value={$config.newCardSortOrder}
             defaultValue={defaults.newCardSortOrder}
@@ -56,7 +60,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         >
             {tr.deckConfigNewCardSortOrder()}
         </EnumSelectorRow>
+    </Item>
 
+    <Item>
         <EnumSelectorRow
             bind:value={$config.newMix}
             defaultValue={defaults.newMix}
@@ -65,7 +71,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         >
             {tr.deckConfigNewReviewPriority()}
         </EnumSelectorRow>
+    </Item>
 
+    <Item>
         <EnumSelectorRow
             bind:value={$config.interdayLearningMix}
             defaultValue={defaults.interdayLearningMix}
@@ -74,7 +82,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         >
             {tr.deckConfigInterdayStepPriority()}
         </EnumSelectorRow>
+    </Item>
 
+    <Item>
         <EnumSelectorRow
             bind:value={$config.reviewOrder}
             defaultValue={defaults.reviewOrder}
@@ -83,4 +93,5 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         >
             {tr.deckConfigReviewSortOrder()}
         </EnumSelectorRow>
+    </Item>
 </TitledContainer>>

ts/deckoptions/LapseOptions.svelte

@@ -5,6 +5,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 Item from "components/Item.svelte";
     import StepsInputRow from "./StepsInputRow.svelte";
     import SpinBoxRow from "./SpinBoxRow.svelte";
     import EnumSelectorRow from "./EnumSelectorRow.svelte";
@@ -32,6 +33,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 </script>
 
 <TitledContainer title={tr.schedulingLapses()} {api}>
+    <Item>
         <StepsInputRow
             bind:value={$config.relearnSteps}
             defaultValue={defaults.relearnSteps}
@@ -39,7 +41,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         >
             {tr.deckConfigRelearningSteps()}
         </StepsInputRow>
+    </Item>
 
+    <Item>
         <SpinBoxRow
             bind:value={$config.minimumLapseInterval}
             defaultValue={defaults.minimumLapseInterval}
@@ -50,7 +54,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         </SpinBoxRow>
 
         <Warning warning={stepsExceedMinimumInterval} />
+    </Item>
 
+    <Item>
         <SpinBoxRow
             bind:value={$config.leechThreshold}
             defaultValue={defaults.leechThreshold}
@@ -59,7 +65,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         >
             {tr.schedulingLeechThreshold()}
         </SpinBoxRow>
+    </Item>
 
+    <Item>
         <EnumSelectorRow
             bind:value={$config.leechAction}
             defaultValue={defaults.leechAction}
@@ -69,4 +77,5 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         >
             {tr.schedulingLeechAction()}
         </EnumSelectorRow>
+    </Item>
 </TitledContainer>

ts/deckoptions/NewOptions.svelte

@@ -5,6 +5,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 Item from "components/Item.svelte";
     import StepsInputRow from "./StepsInputRow.svelte";
     import SpinBoxRow from "./SpinBoxRow.svelte";
     import EnumSelectorRow from "./EnumSelectorRow.svelte";
@@ -40,6 +41,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 </script>
 
 <TitledContainer title={tr.schedulingNewCards()} {api}>
+    <Item>
         <StepsInputRow
             bind:value={$config.learnSteps}
             defaultValue={defaults.learnSteps}
@@ -47,7 +49,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         >
             {tr.deckConfigLearningSteps()}
         </StepsInputRow>
+    </Item>
 
+    <Item>
         <SpinBoxRow
             bind:value={$config.graduatingIntervalGood}
             defaultValue={defaults.graduatingIntervalGood}
@@ -57,7 +61,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         </SpinBoxRow>
 
         <Warning warning={stepsExceedGraduatingInterval} />
+    </Item>
 
+    <Item>
         <SpinBoxRow
             bind:value={$config.graduatingIntervalEasy}
             defaultValue={defaults.graduatingIntervalEasy}
@@ -67,7 +73,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         </SpinBoxRow>
 
         <Warning warning={goodExceedsEasy} />
+    </Item>
 
+    <Item>
         <EnumSelectorRow
             bind:value={$config.newCardInsertOrder}
             defaultValue={defaults.newCardInsertOrder}
@@ -77,4 +85,5 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         >
             {tr.deckConfigNewInsertionOrder()}
         </EnumSelectorRow>
+    </Item>
 </TitledContainer>

ts/deckoptions/TimerOptions.svelte

@@ -5,6 +5,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 Item from "components/Item.svelte";
     import SpinBoxRow from "./SpinBoxRow.svelte";
     import CheckBoxRow from "./CheckBoxRow.svelte";
     import type { DeckOptionsState } from "./lib";
@@ -17,6 +18,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 </script>
 
 <TitledContainer title={tr.deckConfigTimerTitle()} {api}>
+    <Item>
         <SpinBoxRow
             bind:value={$config.capAnswerTimeToSecs}
             defaultValue={defaults.capAnswerTimeToSecs}
@@ -26,7 +28,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         >
             {tr.deckConfigMaximumAnswerSecs()}
         </SpinBoxRow>
+    </Item>
 
+    <Item>
         <CheckBoxRow
             bind:value={$config.showTimer}
             defaultValue={defaults.showTimer}
@@ -34,4 +38,5 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         >
             {tr.schedulingShowAnswerTimer()}
         </CheckBoxRow>
+    </Item>
 </TitledContainer>

ts/editor/EditorToolbar.svelte

@@ -33,7 +33,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import { isApplePlatform } from "lib/platform";
     import StickyBar from "components/StickyBar.svelte";
     import ButtonToolbar from "components/ButtonToolbar.svelte";
-    import SectionItem from "components/SectionItem.svelte";
+    import Item from "components/Item.svelte";
 
     import NoteTypeButtons from "./NoteTypeButtons.svelte";
     import FormatInlineButtons from "./FormatInlineButtons.svelte";
@@ -54,24 +54,24 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
 <StickyBar>
     <ButtonToolbar {size} {wrap} api={toolbar}>
-        <SectionItem id="notetype">
+        <Item id="notetype">
             <NoteTypeButtons api={notetypeButtons} />
-        </SectionItem>
+        </Item>
 
-        <SectionItem id="inlineFormatting">
+        <Item id="inlineFormatting">
             <FormatInlineButtons api={formatInlineButtons} />
-        </SectionItem>
+        </Item>
 
-        <SectionItem id="blockFormatting">
+        <Item id="blockFormatting">
             <FormatBlockButtons api={formatBlockButtons} />
-        </SectionItem>
+        </Item>
 
-        <SectionItem id="color">
+        <Item id="color">
             <ColorButtons api={colorButtons} />
-        </SectionItem>
+        </Item>
 
-        <SectionItem id="template">
+        <Item id="template">
             <TemplateButtons api={templateButtons} />
-        </SectionItem>
+        </Item>
     </ButtonToolbar>
 </StickyBar>

ts/editor/FormatBlockButtons.svelte

@@ -10,7 +10,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import ButtonGroupItem from "components/ButtonGroupItem.svelte";
     import IconButton from "components/IconButton.svelte";
     import ButtonDropdown from "components/ButtonDropdown.svelte";
-    import SectionItem from "components/SectionItem.svelte";
+    import Item from "components/Item.svelte";
     import WithDropdownMenu from "components/WithDropdownMenu.svelte";
     import OnlyEditable from "./OnlyEditable.svelte";
     import CommandIconButton from "./CommandIconButton.svelte";
@@ -71,7 +71,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
             </OnlyEditable>
 
             <ButtonDropdown id={menuId}>
-                <SectionItem id="justify">
+                <Item id="justify">
                     <ButtonGroup>
                         <ButtonGroupItem>
                             <CommandIconButton
@@ -109,9 +109,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                             >
                         </ButtonGroupItem>
                     </ButtonGroup>
-                </SectionItem>
+                </Item>
 
-                <SectionItem id="indentation">
+                <Item id="indentation">
                     <ButtonGroup>
                         <ButtonGroupItem>
                             <OnlyEditable let:disabled>
@@ -137,7 +137,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                             </OnlyEditable>
                         </ButtonGroupItem>
                     </ButtonGroup>
-                </SectionItem>
+                </Item>
             </ButtonDropdown>
         </WithDropdownMenu>
     </ButtonGroupItem>