From 2de2f03db8ad399fe788543068714fccd540db8b Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Sat, 26 Jun 2021 14:10:11 +0200
Subject: [PATCH] Implement blink on duplicate detected

---
 ts/editor/Tag.svelte       | 22 +++++++++++++++++++
 ts/editor/TagEditor.svelte | 44 +++++++++++++++++++++++++++-----------
 ts/editor/tags.ts          |  8 ++++++-
 3 files changed, 61 insertions(+), 13 deletions(-)

diff --git a/ts/editor/Tag.svelte b/ts/editor/Tag.svelte
index 9d896b320..d9cb189cf 100644
--- a/ts/editor/Tag.svelte
+++ b/ts/editor/Tag.svelte
@@ -10,11 +10,16 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
     export let name: string;
     export let active: boolean;
+    export let blink: boolean = false;
 
     const dispatch = createEventDispatcher();
 
     let input: HTMLInputElement;
 
+    $: if (blink) {
+        setTimeout(() => (blink = false), 300);
+    }
+
     function checkForActivation(): void {
         const selection = window.getSelection()!;
         active = selection.isCollapsed;
@@ -56,6 +61,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 {:else}
     <button
         class="d-inline-flex align-items-center tag text-nowrap rounded ps-2 pe-1 me-1"
+        class:blink
         tabindex="-1"
         on:click={checkForActivation}
     >
@@ -69,6 +75,18 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 <style lang="scss">
     $white-translucent: rgba(255, 255, 255, 0.5);
 
+    @keyframes blink {
+        0% {
+            filter: brightness(1);
+        }
+        50% {
+            filter: brightness(2);
+        }
+        100% {
+            filter: brightness(1);
+        }
+    }
+
     .tag :global(.delete-icon > svg:hover) {
         background-color: $white-translucent;
     }
@@ -80,5 +98,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         &:active {
             outline: none;
         }
+
+        &.blink {
+            animation: blink 0.2s linear;
+        }
     }
 </style>
diff --git a/ts/editor/TagEditor.svelte b/ts/editor/TagEditor.svelte
index 1e0bfc515..50874cb3a 100644
--- a/ts/editor/TagEditor.svelte
+++ b/ts/editor/TagEditor.svelte
@@ -26,25 +26,45 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         newInput.focus();
     }
 
-    function checkForDuplicateAt(index: number): void {
-        const names = tags.map(getName);
-        const nameToUpdateTo = names.splice(index, 1)[0];
+    function checkIfContains(newName: string, names: string[]): boolean {
+        const contained = names.indexOf(newName);
+        if (contained >= 0) {
+            tags[contained].blink = true;
+            return true;
+        }
 
-        if (names.includes(nameToUpdateTo)) {
+        return false;
+    }
+
+    function checkIfContainsName(newName: string): boolean {
+        const names = tags.map(getName);
+        return checkIfContains(newName, names);
+    }
+
+    function checkIfContainsNameAt(index: number): boolean {
+        const names = tags.map(getName);
+        const newName = names.splice(index, 1, "")[0];
+        return checkIfContains(newName, names);
+    }
+
+    function checkForDuplicateNameAt(index: number): void {
+        if (checkIfContainsNameAt(index)) {
             deleteTagAt(index);
         }
     }
 
-    function insertTagAt(index: number): void {
+    function insertTagAt(index: number): boolean {
         const names = tags.map(getName);
-        const nameToInsert = names.splice(index, 1)[0];
+        const newName = names.splice(index, 1)[0];
+        let added = false;
 
-        if (names.includes(nameToInsert)) {
-            return;
+        if (!checkIfContainsNameAt(index) && newName.length > 0) {
+            tags.splice(index, 0, attachId(newName));
+            added = true;
         }
 
-        tags.splice(index, 0, attachId(nameToInsert));
         tags = tags;
+        return added;
     }
 
     function deleteTagAt(index: number): void {
@@ -98,10 +118,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     }
 
     function appendTag(): boolean {
-        const names = tags.map(getName);
         let added = false;
 
-        if (!names.includes(newName) && newName.length > 0) {
+        if (!checkIfContainsName(newName)) {
             tags.push(attachId(newName));
             added = true;
         }
@@ -141,9 +160,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                     <Tag
                         bind:name={tag.name}
                         bind:active={tag.active}
+                        bind:blink={tag.blink}
                         on:keydown={() => {}}
                         on:blur={() => {}}
-                        on:tagupdate={() => checkForDuplicateAt(index)}
+                        on:tagupdate={() => checkForDuplicateNameAt(index)}
                         on:tagadd={() => insertTagAt(index)}
                         on:tagdelete={() => deleteTagAt(index)}
                         on:tagjoinprevious={() => joinWithPreviousTag(index)}
diff --git a/ts/editor/tags.ts b/ts/editor/tags.ts
index f9cb79dbe..2d86d582f 100644
--- a/ts/editor/tags.ts
+++ b/ts/editor/tags.ts
@@ -18,11 +18,17 @@ export function normalizeTagname(tagname: string): string {
 interface Tag {
     name: string;
     active: boolean;
+    blink: boolean;
     id: string;
 }
 
 export function attachId(name: string): Tag {
-    return { name, active: false, id: Math.random().toString(36).substring(2) };
+    return {
+        name,
+        active: false,
+        blink: false,
+        id: Math.random().toString(36).substring(2),
+    };
 }
 
 export function getName(tag: Tag): string {