From c859c5b038f7679cb95268321eb2b92f4e9c091f Mon Sep 17 00:00:00 2001
From: KoloMl <thekolomoets@hotmail.com>
Date: Tue, 18 Feb 2025 02:09:41 +0400
Subject: [PATCH] Refactored tag editor element

---
 src/components/tags/TagsEditor.svelte | 46 +++++++++++++--------------
 1 file changed, 23 insertions(+), 23 deletions(-)

diff --git a/src/components/tags/TagsEditor.svelte b/src/components/tags/TagsEditor.svelte
index 711ff77..83a433f 100644
--- a/src/components/tags/TagsEditor.svelte
+++ b/src/components/tags/TagsEditor.svelte
@@ -1,31 +1,29 @@
-<script>
-  import { run } from 'svelte/legacy';
+<script lang="ts">
+  import type { EventHandler } from "svelte/elements";
 
+  interface TagEditorProps {
+    // List of tags to edit. Any duplicated tags present in the array will be removed on the first edit.
+    tags?: string[];
+  }
 
-  /**
-   * @typedef {Object} Props
-   * @property {string[]} [tags] - List of tags to edit. Any duplicated tags present in the array will be removed on the first edit.
-   */
+  let {
+    tags = $bindable([])
+  }: TagEditorProps = $props();
 
-  /** @type {Props} */
-  let { tags = $bindable([]) } = $props();
+  let uniqueTags = $state<Set<string>>(new Set());
 
-  /** @type {Set<string>} */
-  let uniqueTags = $state(new Set());
-
-  run(() => {
+  $effect.pre(() => {
     uniqueTags = new Set(tags);
   });
 
-  /** @type {string} */
-  let addedTagName = $state('');
+  let addedTagName = $state<string>('');
 
   /**
    * Create a callback function to pass into both mouse & keyboard events for tag removal.
-   * @param {string} tagName
-   * @return {function(Event)} Callback to pass as event listener.
+   * @param tagName Name to remove when clicked.
+   * @return Callback to pass as event listener.
    */
-  function createTagRemoveHandler(tagName) {
+  function createTagRemoveHandler(tagName: string): EventHandler<Event, HTMLElement> {
     return event => {
       if (event.type === 'click') {
         removeTag(tagName);
@@ -49,17 +47,19 @@
   }
 
   /**
-   * @param {string} tagName
+   * Remove the tag from the set.
+   * @param tagName Name of the tag to remove.
    */
-  function removeTag(tagName) {
+  function removeTag(tagName: string) {
     uniqueTags.delete(tagName);
     tags = Array.from(uniqueTags);
   }
 
   /**
-   * @param {string} tagName
+   * Add the tag to the set.
+   * @param tagName Name of the tag to add.
    */
-  function addTag(tagName) {
+  function addTag(tagName: string) {
     uniqueTags.add(tagName);
     tags = Array.from(uniqueTags);
   }
@@ -70,9 +70,9 @@
    * Additional note: For some reason, mobile Chrome breaks the usual behaviour inside extension. `code` is becoming
    * empty, while usually it should contain proper button code.
    *
-   * @param {KeyboardEvent} event
+   * @param event
    */
-  function handleKeyPresses(event) {
+  function handleKeyPresses(event: KeyboardEvent) {
     if ((event.code === 'Enter' || event.key === 'Enter') && addedTagName.length) {
       addTag(addedTagName)
       addedTagName = '';