From 5a42fe9b6b7211e344f67af5e5a85dd404d06d6a Mon Sep 17 00:00:00 2001
From: kwaroran <kwaworan@gmail.com>
Date: Wed, 19 Jul 2023 04:02:13 +0900
Subject: [PATCH] [fix] fixed input lag, bugs

---
 src/lib/ChatScreens/ChatScreen.svelte    |   5 +-
 src/lib/Setting/Pages/BotSettings.svelte |   2 +-
 src/lib/SideBars/CharConfig.svelte       |   6 +-
 src/lib/SideBars/Sidebar.svelte          |   8 +-
 src/lib/UI/GUI/Button.svelte             |   3 +-
 src/lib/UI/GUI/SelectInput.svelte        |   1 +
 src/lib/UI/GUI/TextAreaInput.svelte      | 121 +++++++++++++----------
 src/lib/UI/GUI/TextInput.svelte          |  20 ----
 src/lib/UI/HubUpload.svelte              |   2 +-
 9 files changed, 85 insertions(+), 83 deletions(-)

diff --git a/src/lib/ChatScreens/ChatScreen.svelte b/src/lib/ChatScreens/ChatScreen.svelte
index c661e953..d122b896 100644
--- a/src/lib/ChatScreens/ChatScreen.svelte
+++ b/src/lib/ChatScreens/ChatScreen.svelte
@@ -55,7 +55,10 @@
 {:else if $DataBase.theme === 'waifuMobile'}
     <div class="flex-grow h-full relative" style={bgImg.length < 4 ? wallPaper : bgImg}>
         <BackgroundDom />
-        <div class="w-full absolute z-10 bottom-0 left-0" class:per33={$selectedCharID >= 0}>
+        <div class="w-full absolute z-10 bottom-0 left-0"
+            class:per33={$selectedCharID >= 0 && $DataBase.characters[$selectedCharID].viewScreen !== 'none'}
+            class:h-full={!($selectedCharID >= 0 && $DataBase.characters[$selectedCharID].viewScreen !== 'none')}
+        >
             <DefaultChatScreen customStyle={`${externalStyles}backdrop-filter: blur(4px);`} bind:openChatList/>
         </div>
         {#if $selectedCharID >= 0}
diff --git a/src/lib/Setting/Pages/BotSettings.svelte b/src/lib/Setting/Pages/BotSettings.svelte
index 4a684bc5..790ba168 100644
--- a/src/lib/Setting/Pages/BotSettings.svelte
+++ b/src/lib/Setting/Pages/BotSettings.svelte
@@ -359,6 +359,6 @@
         <Check bind:check={$DataBase.promptPreprocess} name={language.promptPreprocess}/>
     </div>
 
-<Button onClick={() => {openPresetList = true}} className="mt-4">{language.presets}</Button>
+<Button on:click={() => {openPresetList = true}} className="mt-4">{language.presets}</Button>
 
 {/if}
diff --git a/src/lib/SideBars/CharConfig.svelte b/src/lib/SideBars/CharConfig.svelte
index a5b90550..f460dc1c 100644
--- a/src/lib/SideBars/CharConfig.svelte
+++ b/src/lib/SideBars/CharConfig.svelte
@@ -711,10 +711,10 @@
             </div>
         {/if}
 
-        <Button size="lg" onClick={async () => {
+        <Button size="lg" on:click={async () => {
             exportChar($selectedCharID)
         }} className="mt-2">{language.exportCharacter}</Button>
-        <Button size="lg" onClick={async () => {
+        <Button size="lg" on:click={async () => {
             openHubUpload = true
         }} className="mt-2">{language.shareCloud}</Button>
         {#if openHubUpload}
@@ -732,7 +732,7 @@
             </div>
         {/if}
     {/if}
-    <Button onClick={async () => {
+    <Button on:click={async () => {
         const conf = await alertConfirm(language.removeConfirm + currentChar.data.name)
         if(!conf){
             return
diff --git a/src/lib/SideBars/Sidebar.svelte b/src/lib/SideBars/Sidebar.svelte
index 4c959388..859f54d1 100644
--- a/src/lib/SideBars/Sidebar.svelte
+++ b/src/lib/SideBars/Sidebar.svelte
@@ -554,25 +554,25 @@
     {/if}
   {:else if sideBarMode === 1}
     <Button
-      onClick={createScratch}
+      on:click={createScratch}
       className="mt-2"
     >
       {language.createfromScratch}
     </Button>
     <Button
-      onClick={createImport}
+      on:click={createImport}
       className="mt-2"
     >
       {language.importCharacter}
     </Button>
     <Button
-      onClick={createGroup}
+      on:click={createGroup}
       className="mt-2"
     >
       {language.createGroup}
     </Button>
     <Button
-      onClick={BotCreator.createBotFromWeb}
+      on:click={BotCreator.createBotFromWeb}
       className="mt-2"
     >
       {language.createBotInternet}
diff --git a/src/lib/UI/GUI/Button.svelte b/src/lib/UI/GUI/Button.svelte
index 833d98cf..7cd89290 100644
--- a/src/lib/UI/GUI/Button.svelte
+++ b/src/lib/UI/GUI/Button.svelte
@@ -1,5 +1,5 @@
 <button 
-    on:click={onClick}
+    on:click
     class="{selected ? 'bg-borderc' : 'bg-gray-700'} border border-gray-600 text-white rounded-md shadow-sm hover:bg-borderc focus:outline-none focus:ring-2 focus:ring-borderc transition-colors duration-200{className ? (" " + className) : ""}"
     class:px-4 = {size == "md"}
     class:px-2 = {size == "sm"}
@@ -14,7 +14,6 @@
 </button>
 <script lang="ts">
     export let selected = false
-    export let onClick = () => {}
     export let className = ""
     export let size: "sm" | "md" | "lg" = "md"
 </script>
\ No newline at end of file
diff --git a/src/lib/UI/GUI/SelectInput.svelte b/src/lib/UI/GUI/SelectInput.svelte
index 16abf349..20f25f0d 100644
--- a/src/lib/UI/GUI/SelectInput.svelte
+++ b/src/lib/UI/GUI/SelectInput.svelte
@@ -11,6 +11,7 @@
     class:px-6={size === 'lg'}
     class:py-3={size === 'lg'}
     bind:value
+    on:change
 >
     <slot></slot>
 </select>
diff --git a/src/lib/UI/GUI/TextAreaInput.svelte b/src/lib/UI/GUI/TextAreaInput.svelte
index 59da26e1..4c189926 100644
--- a/src/lib/UI/GUI/TextAreaInput.svelte
+++ b/src/lib/UI/GUI/TextAreaInput.svelte
@@ -1,54 +1,66 @@
-<!-- <textarea
-    class={"bg-transparent input-text mt-2 mb-2 text-gray-200 resize-none focus:bg-selected w-full" + ((additionalClass) ? (' ' + additionalClass) : '')}
-    class:text-sm={size === 'sm'}
-    class:text-md={size === 'md'}
-    class:text-lg={size === 'lg'}
-    class:text-xl={size === 'xl'}
-    class:text-xs={size === 'xs'}
-    class:p-2={padding}
-    class:mb-4={margin === 'bottom'}
-    class:mb-2={margin === 'both'}
-    class:mt-4={margin === 'top'}
-    class:mt-2={margin === 'both'}
-    class:w-full={fullwidth}
-    class:h-20={height === '20'}
-    class:h-32={height === '32'}
-    class:h-full={height === 'full'}
-    class:min-h-20={height === '20'}
-    class:min-h-32={height === '32'}
-
-    {autocomplete}
-    {placeholder}
-    id={id}
-    bind:value
-    on:input={onInput}
-/> -->
-
-<textarea 
-    class={"border border-gray-600 focus:border-borderc resize-none rounded-md shadow-sm text-white bg-transparent focus:ring-borderc focus:ring-2 focus:outline-none transition-colors duration-200" + ((additionalClass) ? (' ' + additionalClass) : '')} 
-    class:text-sm={size === 'sm'}
-    class:text-md={size === 'md'}
-    class:text-lg={size === 'lg'}
-    class:text-xl={size === 'xl'}
-    class:text-xs={size === 'xs'}
-    class:px-4={padding}
-    class:py-2={padding}
-    class:mb-4={margin === 'bottom'}
-    class:mb-2={margin === 'both'}
-    class:mt-4={margin === 'top'}
-    class:mt-2={margin === 'both'}
-    class:w-full={fullwidth}
-    class:h-20={height === '20'}
-    class:h-32={height === '32'}
-    class:h-full={height === 'full'}
-    class:min-h-20={height === '20'}
-    class:min-h-32={height === '32'}
-    {autocomplete}
-    {placeholder}
-    id={id}
-    bind:value
-    on:input={onInput}
-/>
+{#if optimaizedInput}
+    <textarea 
+        class={"border border-gray-600 focus:border-borderc resize-none rounded-md shadow-sm text-white bg-transparent focus:ring-borderc focus:ring-2 focus:outline-none transition-colors duration-200" + ((additionalClass) ? (' ' + additionalClass) : '')} 
+        class:text-sm={size === 'sm'}
+        class:text-md={size === 'md'}
+        class:text-lg={size === 'lg'}
+        class:text-xl={size === 'xl'}
+        class:text-xs={size === 'xs'}
+        class:px-4={padding}
+        class:py-2={padding}
+        class:mb-4={margin === 'bottom'}
+        class:mb-2={margin === 'both'}
+        class:mt-4={margin === 'top'}
+        class:mt-2={margin === 'both'}
+        class:w-full={fullwidth}
+        class:h-20={height === '20'}
+        class:h-32={height === '32'}
+        class:h-full={height === 'full'}
+        class:min-h-20={height === '20'}
+        class:min-h-32={height === '32'}
+        {autocomplete}
+        {placeholder}
+        id={id}
+        bind:value={value}
+        on:input={(e) => {
+            if(inpa++ > 10){
+                value = e.currentTarget.value
+                inpa = 0
+                onInput()
+            }
+        }}
+        on:change={(e) => {
+            value = e.currentTarget.value
+            onInput()
+        }}
+    />
+{:else}
+    <textarea 
+        class={"border border-gray-600 focus:border-borderc resize-none rounded-md shadow-sm text-white bg-transparent focus:ring-borderc focus:ring-2 focus:outline-none transition-colors duration-200" + ((additionalClass) ? (' ' + additionalClass) : '')} 
+        class:text-sm={size === 'sm'}
+        class:text-md={size === 'md'}
+        class:text-lg={size === 'lg'}
+        class:text-xl={size === 'xl'}
+        class:text-xs={size === 'xs'}
+        class:px-4={padding}
+        class:py-2={padding}
+        class:mb-4={margin === 'bottom'}
+        class:mb-2={margin === 'both'}
+        class:mt-4={margin === 'top'}
+        class:mt-2={margin === 'both'}
+        class:w-full={fullwidth}
+        class:h-20={height === '20'}
+        class:h-32={height === '32'}
+        class:h-full={height === 'full'}
+        class:min-h-20={height === '20'}
+        class:min-h-32={height === '32'}
+        {autocomplete}
+        {placeholder}
+        id={id}
+        bind:value
+        on:input={onInput}
+    />
+{/if}
 <script lang="ts">
     export let size: 'xs'|'sm'|'md'|'lg'|'xl' = 'xs'
     export let autocomplete: 'on'|'off' = 'off'
@@ -61,4 +73,11 @@
     export let fullwidth = false
     export let height:'20'|'32'|'full' = '20'
     export let additionalClass = ''
+    export let optimaizedInput = true
+    let inpa = 0
+
+    let optiValue = value
+
+    $: optiValue = value
+
 </script>
\ No newline at end of file
diff --git a/src/lib/UI/GUI/TextInput.svelte b/src/lib/UI/GUI/TextInput.svelte
index f1a497f6..3cfdc1f9 100644
--- a/src/lib/UI/GUI/TextInput.svelte
+++ b/src/lib/UI/GUI/TextInput.svelte
@@ -1,23 +1,3 @@
-<!-- <input
-    class={"text-neutral-200 bg-transparent input-text focus:bg-selected" + ((additionalClass) ? (' ' + additionalClass) : '')}
-    class:text-sm={size === 'sm'}
-    class:text-md={size === 'md'}
-    class:text-lg={size === 'lg'}
-    class:text-xl={size === 'xl'}
-    class:p-2={padding}
-    class:mb-4={marginBottom}
-    class:w-full={fullwidth}
-    class:h-full={fullh}
-
-    {autocomplete}
-    {placeholder}
-    id={id}
-    type="text"
-    bind:value
-    on:input={onInput}
-> -->
-
-
 <input 
     class={"border border-gray-600 focus:border-borderc rounded-md shadow-sm text-white bg-transparent focus:ring-borderc focus:ring-2 focus:outline-none transition-colors duration-200" + ((additionalClass) ? (' ' + additionalClass) : '')} 
     class:text-sm={size === 'sm'}
diff --git a/src/lib/UI/HubUpload.svelte b/src/lib/UI/HubUpload.svelte
index 148064b2..1adf9c67 100644
--- a/src/lib/UI/HubUpload.svelte
+++ b/src/lib/UI/HubUpload.svelte
@@ -42,7 +42,7 @@
         {#if privateMode}
             <span class="text-gray-400 text-sm">Private characters can be removed from the server if there is only a few downloads.</span>
         {/if}
-        <Button onClick={async () => {
+        <Button on:click={async () => {
             if(char.creatorNotes.length < 20){
                 alertError("Creator Notes must be longer than 20 characters")
             }