Fix anime text tags

front-src/client/components/Anime/Timeline/Editor/InsertTextModal.svelte

@@ -4,6 +4,10 @@
   import Modal from "@/components/UI/Modal.svelte";
   import Input from "@/components/UI/Input.svelte";
   import Button from "@/components/UI/Button.svelte";
+  import Notify from "@/components/UI/Notify.svelte";
+
+  export let notify = null;
+
 
   const dispatch = createEventDispatcher();
 
@@ -24,6 +28,9 @@
 </script>
 
 <Modal on:close title="{title}" {...$$restProps}>
+  {#if notify}
+    <Notify {...notify} />
+  {/if}
   <div class="p-5">
     <Input label="{_('words.filename')}" on:update="{onUpdate}" />
   </div>

front-src/client/components/Anime/Timeline/Editor/Timeline.svelte

@@ -21,6 +21,7 @@
 
   let fileManager = false;
   let insetTextModal = false;
+  let fileManagerNotify = null;
   let splitter = { x: 200, width: 4, min: 100, max: 500 };
 
   const accept = ["image", "audio", "text", "video", "font"];
@@ -56,12 +57,10 @@
       .upload({ name, buffer })
       .then((uplodedFile) => {
         dispatch("file", uplodedFile);
+        closeInsertTextModal();
       })
       .catch((error) => {
-        console.log("ERROR >>>", error);
-      })
-      .then(() => {
-        closeInsertTextModal();
+        fileManagerNotify = { type: "error", message: error };
       });
   }
 
@@ -115,6 +114,7 @@
 />
 
 <InsertTextModal
+  notify="{fileManagerNotify}"
   bind:opened="{insetTextModal}"
   on:save="{insertText}"
   on:close="{closeInsertTextModal}"

front-src/client/components/Anime/Timeline/Editor/Timeline/TagList.svelte

@@ -0,0 +1,19 @@
+<script>
+  import api from "@/api/twitch";
+  import { _ } from "@/libs/i18next";
+
+  export let widget;
+
+  let tags = [];
+
+  api.getEventNames().then((names) => {
+    const arr = names.find((event) => event.name === widget.eventName);
+    tags = arr ? arr.tags : [];
+  });
+</script>
+
+<div class="pt-5 px-5 flex gap-2">
+  {#each tags as tag}
+    <div class="px-2 bg-gray-900 rounded cursor-pointer">${tag}</div>
+  {/each}
+</div>

front-src/client/components/Anime/Timeline/Editor/Timeline/TextEditorModal.svelte

@@ -1,6 +1,6 @@
 <script>
-  import api from "@/api/twitch";
   import { _ } from "@/libs/i18next";
+  import TagList from "./TagList.svelte";
   import { fetchText } from "../../libs/utils";
   import { createEventDispatcher } from "svelte";
   import Modal from "@/components/UI/Modal.svelte";
@@ -11,39 +11,17 @@
   export let widget;
   export let opened;
 
-  let tags = [];
-  let textarea;
-
-  api.getEventNames().then((names) => {
-    const arr = names.find((event) => event.name === widget.eventName);
-    tags = arr ? arr.tags : [];
-  });
-
   const dispatch = createEventDispatcher();
 
   $: title = opened && item.target.filename;
 
-  function insertTag(tag) {
-    const [start, end] = [textarea.selectionStart, textarea.selectionEnd];
-    textarea.setRangeText(`$${tag}`, start, end, "select");
-  }
-
   function codeMirrorUpdate({ detail }) {
     dispatch("textFileChange", { item, text: detail });
   }
 </script>
 
 <Modal on:close opened="{opened}" {...$$restProps} title="{title}">
-  <div class="pt-5 px-5 flex gap-2">
-    {#each tags as tag}
-      <div
-        on:click="{insertTag.bind(null, tag)}"
-        class="px-2 bg-gray-900 rounded cursor-pointer"
-      >
-        ${tag}
-      </div>
-    {/each}
-  </div>
+  <TagList widget="{widget}" />
   <div class="p-5">
     {#await fetchText(item.target.filename)}
       Loading....

front-src/client/components/Widgets/Anime/Timeline/Settings.svelte

@@ -9,11 +9,12 @@
 
   export let data;
 
+  let widget = null;
   let initialItems = [];
-  let widget = data.widget;
   let timelineOpened = false;
 
-  fetchItems();
+  $: widget = data.widget;
+  $: widget && fetchItems();
 
   function fetchItems() {
     actionsAPI.get(widget.id).then(({ items } = {}) => {