Fix some issues with the Tag Editor (#2215)

* Prevent global focus border on tag-input

* Fix margin issues with tag editor

* Remove redundant autocomplete call

that caused the addition of an empty tag when tag suggestions were selected with the Enter key.

* Prevent input text from overlapping with newly added tags

... at least when they're selected from the autocomplete list via mouse. If they're selected via keyboard, there's still an overlapping issue.

* Fix error on updateSuggestions

* Hide empty tag

* Make double-click to collapse/expand translatable

ftl/core/editing.ftl

@@ -15,7 +15,8 @@ editing-customize-card-templates = Customize Card Templates
 editing-customize-fields = Customize Fields
 editing-cut = Cut
 editing-double-click-image = double-click image
-editing-double-click-to-expand = (double-click to expand)
+editing-double-click-to-expand = double-click to expand
+editing-double-click-to-collapse = double-click to collapse
 editing-edit-current = Edit Current
 editing-edit-html = Edit HTML
 editing-fields = Fields

ts/editor/NoteEditor.svelte

@@ -49,6 +49,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import PaneContent from "../components/PaneContent.svelte";
     import { ResizablePane } from "../components/types";
     import { bridgeCommand } from "../lib/bridgecommand";
+    import * as tr from "../lib/ftl";
     import { TagEditor } from "../tag-editor";
     import TagAddButton from "../tag-editor/tag-options-button/TagAddButton.svelte";
     import { ChangeTimer } from "./change-timer";
@@ -560,7 +561,9 @@ the AddCards dialog) should be implemented in the user of this component.
     <HorizontalResizer
         panes={[fieldsPane, tagsPane]}
         showIndicator={$tagsCollapsed || snapTags}
-        tip={`Double click to ${$tagsCollapsed ? "expand" : "collapse"} tag editor`}
+        tip={$tagsCollapsed
+            ? tr.editingDoubleClickToExpand()
+            : tr.editingDoubleClickToCollapse()}
         {clientHeight}
         bind:this={lowerResizer}
         on:dblclick={() => snapResizer(!$tagsCollapsed)}
@@ -575,7 +578,7 @@ the AddCards dialog) should be implemented in the user of this component.
                 }}
                 keyCombination="Control+Shift+T"
             >
-                {@html tagAmount > 0 ? `${tagAmount} Tags` : ""}
+                {@html tagAmount > 0 ? `${tagAmount} ${tr.editingTags()}` : ""}
             </TagAddButton>
         </div>
     </HorizontalResizer>

ts/editor/image-overlay/ImageOverlay.svelte

@@ -324,7 +324,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
                 <HandleLabel>
                     {#if isSizeConstrained}
-                        <span>{tr.editingDoubleClickToExpand()}</span>
+                        <span>{`(${tr.editingDoubleClickToExpand()})`}</span>
                     {:else}
                         <span>{actualWidth}&times;{actualHeight}</span>
                         {#if customDimensions}

ts/tag-editor/Tag.svelte

@@ -56,6 +56,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     .tag {
         @include button.base($with-active: false, $with-disabled: false);
 
+        vertical-align: middle;
         font-size: var(--font-size);
         padding: 0;
 

ts/tag-editor/TagEditor.svelte

@@ -77,7 +77,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
     function updateSuggestions(): void {
         const activeTag = tagTypes[active!];
-        const activeName = activeTag.name;
+        const activeName = activeTag!.name;
 
         autocompleteDisabled = activeName.length === 0;
 
@@ -125,15 +125,15 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     export function appendEmptyTag(): void {
         // used by tag badge and tag spacer
         deselect();
+        const tagsHadFocus = active === null;
+        active = null;
+
         const lastTag = tagTypes[tagTypes.length - 1];
 
         if (!lastTag || lastTag.name.length > 0) {
             appendTagAndFocusAt(tagTypes.length - 1, "");
         }
 
-        const tagsHadFocus = active === null;
-        active = null;
-
         if (tagsHadFocus) {
             decideNextActive();
         }
@@ -163,11 +163,11 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         const splitOff = activeName.slice(end);
 
         activeName = current;
+        active = null;
         // await tag to update its name, so it can normalize correctly
         await tick();
 
         appendTagAndFocusAt(index, splitOff);
-        active = null;
         await tick();
 
         if (index === active) {
@@ -292,7 +292,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                 break;
 
             case "Enter":
-                autocomplete.chooseSelected();
                 event.preventDefault();
                 break;
         }
@@ -392,7 +391,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     $: shortenTags = shortenTags || assumedRows > 2;
     $: anyTagsSelected = tagTypes.some((tag) => tag.selected);
 
-    $: dispatch("heightChange", { height: height * 1.15 });
+    $: dispatch("heightChange", { height: height + 1 });
 </script>
 
 {#if anyTagsSelected}
@@ -410,6 +409,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         on:tagdelete={deleteSelectedTags}
         on:tagappend={appendEmptyTag}
         {keyCombination}
+        --icon-align="baseline"
     />
 
     {#each tagTypes as tag, index (tag.id)}
@@ -518,6 +518,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     }
 
     .hide-tag :global(.tag) {
-        opacity: 0;
+        visibility: hidden;
     }
 </style>

ts/tag-editor/TagInput.svelte

@@ -280,6 +280,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     .tag-input {
         /* recreates positioning of Tag component
          * so that the text does not move when accepting */
-        border-left: 1px solid transparent;
+        border: 1px solid transparent !important;
     }
 </style>

ts/tag-editor/TagSpacer.svelte

@@ -2,12 +2,15 @@
 Copyright: Ankitects Pty Ltd and contributors
 License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
-<div class="tag-spacer" on:click />
+<div class="tag-spacer" on:click>
+    <br />
+</div>
 
 <style lang="scss">
     .tag-spacer {
         cursor: text;
         flex-grow: 1;
         align-self: stretch;
+        margin-top: 3px;
     }
 </style>

ts/tag-editor/TagWithTooltip.svelte

@@ -63,7 +63,11 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
 <svelte:body on:keydown={setControlShift} on:keyup={setControlShift} />
 
-<div class:select-mode={selectMode} class:night-mode={$pageTheme.isDark}>
+<div
+    class:select-mode={selectMode}
+    class:night-mode={$pageTheme.isDark}
+    class:empty={name === ""}
+>
     {#if active}
         <Tag class={className} on:mousemove={setControlShift} on:click={onClick}>
             {name}
@@ -119,4 +123,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
             background-color: $white-translucent;
         }
     }
+
+    .empty {
+        visibility: hidden;
+    }
 </style>

ts/tag-editor/WithAutocomplete.svelte

@@ -178,7 +178,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
         /* Make sure that text in TagInput perfectly overlaps with Tag */
         border-left: 1px solid transparent;
-        border-top: 2px solid transparent;
+        border-bottom: 1px solid transparent;
     }
 
     .autocomplete-menu {