From 6c6a10c1422b55c1ab3d4599e6b22514248f2ceb Mon Sep 17 00:00:00 2001
From: Matthias Metelka <62722460+kleinerpirat@users.noreply.github.com>
Date: Sun, 27 Nov 2022 01:45:33 +0100
Subject: [PATCH] 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                        |  3 ++-
 ts/editor/NoteEditor.svelte                 |  7 +++++--
 ts/editor/image-overlay/ImageOverlay.svelte |  2 +-
 ts/tag-editor/Tag.svelte                    |  1 +
 ts/tag-editor/TagEditor.svelte              | 16 ++++++++--------
 ts/tag-editor/TagInput.svelte               |  2 +-
 ts/tag-editor/TagSpacer.svelte              |  5 ++++-
 ts/tag-editor/TagWithTooltip.svelte         | 10 +++++++++-
 ts/tag-editor/WithAutocomplete.svelte       |  2 +-
 9 files changed, 32 insertions(+), 16 deletions(-)

diff --git a/ftl/core/editing.ftl b/ftl/core/editing.ftl
index b91dcb390..f3447f716 100644
--- a/ftl/core/editing.ftl
+++ b/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
diff --git a/ts/editor/NoteEditor.svelte b/ts/editor/NoteEditor.svelte
index e7b6afd65..8e5d28381 100644
--- a/ts/editor/NoteEditor.svelte
+++ b/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>
diff --git a/ts/editor/image-overlay/ImageOverlay.svelte b/ts/editor/image-overlay/ImageOverlay.svelte
index 56146c2f4..e87239fb6 100644
--- a/ts/editor/image-overlay/ImageOverlay.svelte
+++ b/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}
diff --git a/ts/tag-editor/Tag.svelte b/ts/tag-editor/Tag.svelte
index bfa7d0c8b..9f3a93e70 100644
--- a/ts/tag-editor/Tag.svelte
+++ b/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;
 
diff --git a/ts/tag-editor/TagEditor.svelte b/ts/tag-editor/TagEditor.svelte
index 29bb87de7..c81053291 100644
--- a/ts/tag-editor/TagEditor.svelte
+++ b/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>
diff --git a/ts/tag-editor/TagInput.svelte b/ts/tag-editor/TagInput.svelte
index 1f557fc73..d8e7b8988 100644
--- a/ts/tag-editor/TagInput.svelte
+++ b/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>
diff --git a/ts/tag-editor/TagSpacer.svelte b/ts/tag-editor/TagSpacer.svelte
index 7dbdfd37a..f05a1c155 100644
--- a/ts/tag-editor/TagSpacer.svelte
+++ b/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>
diff --git a/ts/tag-editor/TagWithTooltip.svelte b/ts/tag-editor/TagWithTooltip.svelte
index 2ed282b25..4ef0046c1 100644
--- a/ts/tag-editor/TagWithTooltip.svelte
+++ b/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>
diff --git a/ts/tag-editor/WithAutocomplete.svelte b/ts/tag-editor/WithAutocomplete.svelte
index c7f390826..1f6a1e0b0 100644
--- a/ts/tag-editor/WithAutocomplete.svelte
+++ b/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 {