refactor: Update TextInput class to include "peer" for styling consistency

src/lib/UI/GUI/TextInput.svelte

@@ -1,5 +1,5 @@
 <input 
-    class={"border border-darkborderc focus:border-borderc rounded-md shadow-sm text-textcolor bg-transparent focus:ring-borderc focus:ring-2 focus:outline-none transition-colors duration-200" + ((className) ? (' ' + className) : '')} 
+    class={"border border-darkborderc peer focus:border-borderc rounded-md shadow-sm text-textcolor bg-transparent focus:ring-borderc focus:ring-2 focus:outline-none transition-colors duration-200" + ((className) ? (' ' + className) : '')} 
     class:text-sm={size === 'sm'}
     class:text-md={size === 'md'}
     class:text-lg={size === 'lg'}

src/lib/UI/Realm/RealmUpload.svelte

@@ -29,9 +29,19 @@
         <span class="text-textcolor">{language.tags}</span>
         <span class="text-textcolor2 text-sm">Tags to search your character easily. latin alphabets only. seperate by comma.</span>
         <TextInput placeholder="" bind:value={tags} on:input={() => {
-            tags = tags.replace(/[^a-zA-Z,]/g, '').toLocaleLowerCase().replace(/ /g, '')
+            tags = tags.replace(/[^a-zA-Z,\-]/g, '').toLocaleLowerCase().replace(/ /g, '')
         }} />
 
+        <div class="peer-focus:block hidden hover:block flex-wrap">
+            {#each searchTagList(tags) as tag}
+                <button class="text-textcolor2 text-sm p-2 border border-bgcolor" on:click={() => {
+                    const splited = tags.split(',').map(e => e.trim())
+                    splited[splited.length - 1] = tag
+                    tags = splited.join(',') + ','
+                }}>{tag}</button>
+            {/each}
+        </div>
+
         {#if char.license !== 'CC BY-NC-SA 4.0' && char.license !== 'CC BY-SA 4.0'}
 
         <span class="text-textcolor mt-4">License</span>
@@ -104,7 +114,7 @@
     import SelectInput from "../GUI/SelectInput.svelte";
     import { CCLicenseData } from "src/ts/creation/license";
     import OptionInput from "../GUI/OptionInput.svelte";
-    import { parseMultilangString, sleep } from "src/ts/util";
+    import { TagList, parseMultilangString, searchTagList, sleep } from "src/ts/util";
     import MultiLangInput from "../GUI/MultiLangInput.svelte";
     export let close = () => {}
     export let char:character

src/ts/util.ts

@@ -933,4 +933,29 @@ export const TagList = [
             'inhuman', 'nonhuman', 'non-human-character', 'not-human'
         ]
     }
-]
+]
+
+export const searchTagList = (query:string) => {
+    const splited = query.split(',').map(v => v.trim())
+    if(splited.length > 10){
+        return []
+    }
+    const realQuery = splited.at(-1).trim().toLowerCase()
+
+    let result = []
+
+    for(const tag of TagList){
+        if(tag.value.startsWith(realQuery)){
+            result.push(tag.value)
+            continue
+        }
+        for(const alias of tag.alias){
+            if(alias.startsWith(realQuery)){
+                result.push(tag.value)
+                break
+            }
+        }
+    }
+
+    return result.filter(v => splited.indexOf(v) === -1)
+}