Bubble up some functionality from Tag to TagWithTooltip and TagDeleteBadge

ts/editor/Tag.svelte

@@ -5,23 +5,15 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 <script lang="typescript">
     import { onMount, getContext, createEventDispatcher } from "svelte";
     import { nightModeKey } from "components/context-keys";
-    import Badge from "components/Badge.svelte";
-    import { deleteIcon } from "./icons";
-    import { controlPressed, shiftPressed } from "lib/keys";
 
     let className: string = "";
     export { className as class };
 
-    export let name: string;
     export let tooltip: string | undefined = undefined;
     export let selected: boolean = false;
 
     const dispatch = createEventDispatcher();
 
-    function deleteTag(): void {
-        dispatch("tagdelete");
-    }
-
     let flashing: boolean = false;
 
     export function flash(): void {
@@ -29,26 +21,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         setTimeout(() => (flashing = false), 300);
     }
 
-    let control = false;
-    let shift = false;
-
-    function setDeleteIcon(event: KeyboardEvent | MouseEvent): void {
-        control = controlPressed(event);
-        shift = shiftPressed(event);
-    }
-
-    $: selectMode = control || shift;
-
-    function onClick(): void {
-        if (shift) {
-            dispatch("tagrange");
-        } else if (control) {
-            dispatch("tagselect");
-        } else {
-            dispatch("tagedit");
-        }
-    }
-
     const nightMode = getContext<boolean>(nightModeKey);
 
     let button: HTMLButtonElement;
@@ -56,30 +28,19 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     onMount(() => dispatch("mount", { button }));
 </script>
 
-<svelte:body on:keydown={setDeleteIcon} on:keyup={setDeleteIcon} />
-
 <button
     bind:this={button}
     class="tag btn d-inline-flex align-items-center text-nowrap ps-2 pe-1 {className}"
     class:selected
     class:flashing
-    class:select-mode={selectMode}
     class:btn-day={!nightMode}
     class:btn-night={nightMode}
     tabindex="-1"
     title={tooltip}
-    on:mousemove={setDeleteIcon}
-    on:click={onClick}
+    on:mousemove
+    on:click
 >
-    <span>{name}</span>
-    <Badge
-        class="delete-icon rounded-circle d-flex align-items-center ms-1"
-        on:click={() => {
-            if (!selectMode) {
-                deleteTag();
-            }
-        }}>{@html deleteIcon}</Badge
-    >
+    <slot />
 </button>
 
 <style lang="scss">
@@ -118,33 +79,12 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
             animation: flash 0.3s linear;
         }
 
-        &.select-mode {
-            cursor: crosshair;
-
-            &:hover :global(.delete-icon) {
-                opacity: 0;
-            }
-        }
-
         &.selected {
             box-shadow: 0 0 0 2px var(--focus-shadow);
             --border-color: var(--focus-border);
         }
     }
 
-    :global(.delete-icon > svg:hover) {
-        $white-translucent: rgba(255 255 255 / 0.5);
-        $dark-translucent: rgba(0 0 0 / 0.2);
-
-        .btn-day & {
-            background-color: $dark-translucent;
-        }
-
-        .btn-night & {
-            background-color: $white-translucent;
-        }
-    }
-
     @include button.btn-day(
         $with-active: false,
         $with-disabled: false,

ts/editor/TagDeleteBadge.svelte

@@ -0,0 +1,15 @@
+<!--
+Copyright: Ankitects Pty Ltd and contributors
+License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
+-->
+<script lang="typescript">
+    import Badge from "components/Badge.svelte";
+    import { deleteIcon } from "./icons";
+
+    let className: string = "";
+    export { className as class };
+</script>
+
+<Badge class="rounded-circle d-flex align-items-center ms-1 {className}" on:click
+    >{@html deleteIcon}</Badge
+>

ts/editor/TagEditor.svelte

@@ -490,6 +490,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         />
 
         <div class="position-relative tag-margins hide-tag zero-width-tag">
+            <!-- makes sure footer does not resize when adding first tag -->
             <Tag name="SPACER" />
         </div>
     </ButtonToolbar>

ts/editor/TagWithTooltip.svelte

@@ -5,7 +5,11 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 <script lang="typescript">
     import WithTooltip from "components/WithTooltip.svelte";
     import Tag from "./Tag.svelte";
+    import TagDeleteBadge from "./TagDeleteBadge.svelte";
 
+    import { createEventDispatcher, getContext } from "svelte";
+    import { nightModeKey } from "components/context-keys";
+    import { controlPressed, shiftPressed } from "lib/keys";
     import { delimChar } from "./tags";
 
     export let name: string;
@@ -20,6 +24,32 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
     export let flash: () => void;
 
+    const dispatch = createEventDispatcher();
+
+    function deleteTag(): void {
+        dispatch("tagdelete");
+    }
+
+    let control = false;
+    let shift = false;
+
+    $: selectMode = control || shift;
+
+    function setDeleteIcon(event: KeyboardEvent | MouseEvent): void {
+        control = controlPressed(event);
+        shift = shiftPressed(event);
+    }
+
+    function onClick(): void {
+        if (shift) {
+            dispatch("tagrange");
+        } else if (control) {
+            dispatch("tagselect");
+        } else {
+            dispatch("tagedit");
+        }
+    }
+
     function processTagName(name: string): string {
         const parts = name.split(delimChar);
 
@@ -33,33 +63,72 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     function hasMultipleParts(name: string): boolean {
         return name.split(delimChar).length > 1;
     }
+
+    function onClickDelete() {
+        if (!selectMode) {
+            deleteTag();
+        }
+    }
+
+    const nightMode = getContext<boolean>(nightModeKey);
 </script>
 
-{#if active}
-    <Tag class={className} {name} />
-{:else if shorten && hasMultipleParts(name)}
+<svelte:body on:keydown={setDeleteIcon} on:keyup={setDeleteIcon} />
+
+<div class:select-mode={selectMode} class:night-mode={nightMode}>
+    {#if active}
+        <Tag class={className} on:mousemove={setDeleteIcon} on:click={onClick}>
+            {name}
+            <TagDeleteBadge class="delete-icon" on:click={onClickDelete} />
+        </Tag>
+    {:else if shorten && hasMultipleParts(name)}
         <WithTooltip {tooltip} placement="auto" let:createTooltip>
             <Tag
                 class={className}
-            name={processTagName(name)}
                 bind:flash
                 bind:selected
-            on:tagedit
-            on:tagselect
-            on:tagrange
-            on:tagdelete
+                on:mousemove={setDeleteIcon}
+                on:click={onClick}
                 on:mount={(event) => createTooltip(event.detail.button)}
-        />
+            >
+                <span>{processTagName(name)}</span>
+                <TagDeleteBadge class="delete-icon" on:click={onClickDelete} />
+            </Tag>
         </WithTooltip>
-{:else}
+    {:else}
         <Tag
             class={className}
-        {name}
             bind:flash
             bind:selected
-        on:tagedit
-        on:tagselect
-        on:tagrange
-        on:tagdelete
-    />
-{/if}
+            on:mousemove={setDeleteIcon}
+            on:click={onClick}
+        >
+            <span>{name}</span>
+            <TagDeleteBadge class="delete-icon" on:click={onClickDelete} />
+        </Tag>
+    {/if}
+</div>
+
+<style lang="scss">
+    .select-mode :global(button) {
+        display: contents;
+        cursor: crosshair;
+
+        :global(.delete-icon) {
+            opacity: 0;
+        }
+    }
+
+    :global(.delete-icon):hover {
+        $white-translucent: rgba(255 255 255 / 0.5);
+        $dark-translucent: rgba(0 0 0 / 0.2);
+
+        div & {
+            background-color: $dark-translucent;
+        }
+
+        .night-mode & {
+            background-color: $white-translucent;
+        }
+    }
+</style>