Give OptionsButton its own ButtonGroup and move it to more prominent position (#2207)

and give it some padding

ts/components/IconButton.svelte

@@ -46,7 +46,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         }
         @include button.border-radius;
 
-        padding: 0;
+        padding: 0 var(--padding-inline, 0);
         font-size: var(--base-font-size);
         height: var(--buttons-size);
         min-width: calc(var(--buttons-size) * 0.75);

ts/editor/editor-toolbar/EditorToolbar.svelte

@@ -57,7 +57,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import BlockButtons from "./BlockButtons.svelte";
     import InlineButtons from "./InlineButtons.svelte";
     import NotetypeButtons from "./NotetypeButtons.svelte";
-    import OptionsButton from "./OptionsButton.svelte";
+    import OptionsButtons from "./OptionsButtons.svelte";
     import RichTextClozeButtons from "./RichTextClozeButtons.svelte";
     import TemplateButtons from "./TemplateButtons.svelte";
 
@@ -66,6 +66,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
     const toolbar = {} as DefaultSlotInterface;
     const notetypeButtons = {} as DefaultSlotInterface;
+    const optionsButtons = {} as DefaultSlotInterface;
     const inlineButtons = {} as DefaultSlotInterface;
     const blockButtons = {} as DefaultSlotInterface;
     const templateButtons = {} as DefaultSlotInterface;
@@ -100,6 +101,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                 </NotetypeButtons>
             </Item>
 
+            <Item id="settings">
+                <OptionsButtons api={optionsButtons} />
+            </Item>
+
             <Item id="inlineFormatting">
                 <InlineButtons api={inlineButtons} />
             </Item>
@@ -115,10 +120,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
             <Item id="cloze">
                 <RichTextClozeButtons />
             </Item>
-
-            <Item id="options">
-                <OptionsButton />
-            </Item>
         </DynamicallySlottable>
     </ButtonToolbar>
 </div>

ts/editor/editor-toolbar/OptionsButton.svelte

@@ -41,6 +41,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         tooltip={tr.actionsOptions()}
         --border-left-radius="5px"
         --border-right-radius="5px"
+        --padding-inline="8px"
         on:click={() => (showFloating = !showFloating)}
     >
         {@html cogIcon}

ts/editor/editor-toolbar/OptionsButtons.svelte

@@ -0,0 +1,30 @@
+<!--
+Copyright: Ankitects Pty Ltd and contributors
+License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
+-->
+<script lang="ts">
+    import ButtonGroup from "../../components/ButtonGroup.svelte";
+    import ButtonGroupItem, {
+        createProps,
+        setSlotHostContext,
+        updatePropsList,
+    } from "../../components/ButtonGroupItem.svelte";
+    import DynamicallySlottable from "../../components/DynamicallySlottable.svelte";
+    import OptionsButton from "./OptionsButton.svelte";
+
+    export let api = {};
+</script>
+
+<ButtonGroup>
+    <DynamicallySlottable
+        slotHost={ButtonGroupItem}
+        {createProps}
+        {updatePropsList}
+        {setSlotHostContext}
+        {api}
+    >
+        <ButtonGroupItem id="options">
+            <OptionsButton />
+        </ButtonGroupItem>
+    </DynamicallySlottable>
+</ButtonGroup>