Add StickyBar.svelte WithTheming.svelte

ts/editor-toolbar/ButtonGroup.svelte

@@ -25,9 +25,12 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         return { order: index };
     }
 
-    setContext(buttonGroupKey, Object.assign(api, {
+    setContext(
+        buttonGroupKey,
+        Object.assign(api, {
             registerButton,
-    }))
+        })
+    );
 </script>
 
 <style lang="scss">

ts/editor-toolbar/EditorToolbar.svelte

@@ -18,18 +18,13 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 </script>
 
 <script lang="typescript">
-    import type { Identifier } from "./identifiable";
+    import { setContext } from "svelte";
-    import type { ToolbarItem, IterableToolbarItem } from "./types";
-
-    import { setContext, onMount } from "svelte";
     import { disabledKey, nightModeKey } from "./contextKeys";
-    import { add, insert, updateRecursive } from "./identifiable";
-    import { showComponent, hideComponent, toggleComponent } from "./hideable";
 
+    import WithTheming from "./WithTheming.svelte";
+    import StickyBar from "./StickyBar.svelte";
     import NoteTypeButtons from "./NoteTypeButtons.svelte";
 
-    let api = {};
-
     export let nightMode: boolean;
 
     setContext(nightModeKey, nightMode);
@@ -43,18 +38,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     }`;
 </script>
 
-<style lang="scss">
+<WithTheming {style}>
-    nav {
+    <StickyBar>
-        position: sticky;
-        top: 0;
-        left: 0;
-        z-index: 10;
-
-        background-color: var(--window-bg);
-        border-bottom: 1px solid var(--border);
-    }
-</style>
-
-<nav {style} class="pb-1">
         <NoteTypeButtons />
-</nav>
+    </StickyBar>
+</WithTheming>

ts/editor-toolbar/IconButton.svelte

@@ -3,28 +3,18 @@ Copyright: Ankitects Pty Ltd and contributors
 License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="typescript">
+    import ButtonGroupItem from "./ButtonGroupItem.svelte";
     import SquareButton from "./SquareButton.svelte";
 
     export let id: string;
-    export let className = "";
+    let className = "";
+    export { className as class };
+
     export let tooltip: string | undefined;
-    export let shortcutLabel: string | undefined;
-    export let icon: string;
-
-    export let onClick: (event: MouseEvent) => void;
-
     export let disables = true;
     export let dropdownToggle = false;
 </script>
 
-<SquareButton
+<SquareButton {id} {className} {tooltip} {disables} {dropdownToggle} on:click on:mount>
-    {id}
+    <slot />
-    {className}
-    {tooltip}
-    {shortcutLabel}
-    {onClick}
-    {disables}
-    {dropdownToggle}
-    on:mount>
-    {@html icon}
 </SquareButton>

ts/editor-toolbar/LabelButton.svelte

@@ -4,7 +4,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="typescript">
     import type { Readable } from "svelte/store";
-    import ButtonGroupButton from "./ButtonGroupButton.svelte";
+    import ButtonGroupItem from "./ButtonGroupItem.svelte";
     import { onMount, createEventDispatcher, getContext } from "svelte";
     import { disabledKey, nightModeKey } from "./contextKeys";
 
@@ -51,7 +51,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     @include button.btn-night;
 </style>
 
-<ButtonGroupButton let:order={order}>
+<ButtonGroupItem let:order>
     <button
         bind:this={buttonRef}
         {id}
@@ -68,4 +68,4 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         on:mousedown|preventDefault>
         <slot />
     </button>
-</ButtonGroupButton>
+</ButtonGroupItem>

ts/editor-toolbar/NoteTypeButtons.svelte

@@ -17,7 +17,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     <LabelButton
         disables={false}
         tooltip={tr.editingCustomizeFields()}
-        on:click={() => bridgeCommand("fields")}>
+        on:click={() => bridgeCommand('fields')}>
         {tr.editingFields()}...
     </LabelButton>
 
@@ -25,7 +25,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         <LabelButton
             disables={false}
             tooltip={`${tr.editingCustomizeCardTemplates()} (${shortcutLabel})`}
-            on:click={() => bridgeCommand("cards")}
+            on:click={() => bridgeCommand('cards')}
             on:mount={createShortcut}>
             {tr.editingCards()}...
         </LabelButton>

ts/editor-toolbar/StickyBar.svelte

@@ -0,0 +1,26 @@
+<!--
+Copyright: Ankitects Pty Ltd and contributors
+License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
+-->
+<script lang="typescript">
+    export let id: string | undefined;
+    let className: string | undefined;
+    export { className as class };
+</script>
+
+<style lang="scss">
+    nav {
+        position: sticky;
+        top: 0;
+        left: 0;
+        right: 0;
+        z-index: 10;
+
+        background: var(--window-bg);
+        border-bottom: 1px solid var(--border);
+    }
+</style>
+
+<nav {id} class="pb-1 {className}">
+    <slot />
+</nav>

ts/editor-toolbar/WithTheming.svelte

@@ -0,0 +1,17 @@
+<!--
+Copyright: Ankitects Pty Ltd and contributors
+License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
+-->
+<script lang="typescript">
+    export let style: string;
+</script>
+
+<style lang="scss">
+    div {
+        display: contents;
+    }
+</style>
+
+<div {style}>
+    <slot />
+</div>

ts/editor/toolbar.ts

@@ -27,7 +27,9 @@ export function initToolbar(i18n: Promise<void>) {
                 // getTemplateGroup(),
             ];
 
-            const menus = [/*...getFormatBlockMenus(), ...getTemplateMenus()*/];
+            const menus = [
+                /*...getFormatBlockMenus(), ...getTemplateMenus()*/
+            ];
 
             toolbarResolve(editorToolbar({ target, anchor, buttons, menus }));
         });