From 2039797cade77e0a85489e7854cf0cc46f3d86da Mon Sep 17 00:00:00 2001
From: LL <ljh5650@gmail.com>
Date: Mon, 29 May 2023 02:37:38 +0900
Subject: [PATCH] Toggle color of Chat Edit Icon and Translation Icon

---
 src/lib/ChatScreens/Chat.svelte | 22 +++++++++++++++++-----
 1 file changed, 17 insertions(+), 5 deletions(-)

diff --git a/src/lib/ChatScreens/Chat.svelte b/src/lib/ChatScreens/Chat.svelte
index 3f942994..a0dce186 100644
--- a/src/lib/ChatScreens/Chat.svelte
+++ b/src/lib/ChatScreens/Chat.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { ArrowLeft, ArrowRight, ChevronLeftIcon, ChevronRightIcon, EditIcon, LanguagesIcon, RefreshCcwIcon, TrashIcon } from "lucide-svelte";
+    import { ArrowLeft, ArrowRight, EditIcon, LanguagesIcon, RefreshCcwIcon, TrashIcon } from "lucide-svelte";
     import { ParseMarkdown } from "../../ts/parser";
     import AutoresizeArea from "./AutoresizeArea.svelte";
     import { alertConfirm } from "../../ts/alert";
@@ -22,7 +22,8 @@
     export let altGreeting = false
 
     let msgDisplay = ''
-
+    let msgTranslated = ''
+    let translated = false;
     async function rm(){
         const rm = $DataBase.askRemoval ? await alertConfirm(language.removeChat) : true
         if(rm){
@@ -55,6 +56,8 @@
         if($DataBase.autoTranslate && $DataBase.translator !== ''){
             msgDisplay = replacePlaceholders(message, name)
             msgDisplay = await translate(replacePlaceholders(message, name), false)
+            msgTranslated = msgDisplay
+            translated = true;
         }
         else{
             msgDisplay = replacePlaceholders(message, name)
@@ -77,7 +80,7 @@
                 <span class="chat text-xl unmargin">{name}</span>
                 <div class="flex-grow flex items-center justify-end text-gray-500">
                     {#if idx > -1}
-                        <button class="hover:text-green-500 transition-colors" on:click={() => {
+                        <button class={"hover:text-green-500 transition-colors "+(editMode?'text-green-400':'')} on:click={() => {
                             if(!editMode){
                                 editMode = true
                             }
@@ -93,17 +96,26 @@
                         </button>
                     {/if}
                     {#if $DataBase.translator !== ''}
-                        <button class="ml-2 cursor-pointer hover:text-green-500 transition-colors" class:translating={translating} on:click={async () => {
+                        <button class={"ml-2 cursor-pointer hover:text-green-500 transition-colors " + (translated ? 'text-green-400':'')} class:translating={translating} on:click={async () => {
                             if(translating){
                                 return
                             }
-                            if(msgDisplay === replacePlaceholders(message, name)){
+                            if(!translated){
                                 translating = true
+                                if(msgTranslated !== ''){
+                                    msgDisplay = msgTranslated
+                                    translating = false
+                                    translated = true
+                                    return
+                                }
                                 msgDisplay = (await translate(replacePlaceholders(message, name), false))
+                                msgTranslated = msgDisplay
                                 translating = false
+                                translated = true
                             }
                             else{
                                 msgDisplay = replacePlaceholders(message, name)
+                                translated = false
                             }
                         }}>
                             <LanguagesIcon />