Add Multilanguage support for creator notes

src/lib/UI/GUI/MultiLangDisplay.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+  import { ParseMarkdown } from "src/ts/parser";
+  import { parseMultilangString, toLangName } from "src/ts/util";
+
+    export let value: string
+    export let markdown: boolean = false
+    let valueObject: {[code:string]:string} = parseMultilangString(value)
+    let selectedLang = "en"
+    if(valueObject["en"] === undefined){
+        selectedLang = "xx"
+    }
+</script>
+
+<div class="flex flex-col">
+    <div class="flex flex-wrap max-w-fit p-1 gap-2">
+        {#each Object.keys(valueObject) as lang}
+            {#if lang !== 'xx' || Object.keys(valueObject).length === 1}
+                <button class="bg-bgcolor py-2 rounded-lg px-4" class:ring-1={selectedLang === lang} on:click|stopPropagation={() => {
+                    selectedLang = lang
+                }}>{toLangName(lang)}</button>
+            {/if}
+        {/each}
+    </div>
+    {#if markdown}
+        <div class="ml-2 max-w-full break-words text chat chattext prose prose-invert">
+            {#await ParseMarkdown(valueObject[selectedLang]) then md} 
+                {@html md}
+            {/await}
+        </div>
+    {:else}
+        <div class="ml-2 max-w-full break-words text chat chattext prose prose-invert">
+            {valueObject[selectedLang]}
+        </div>
+    {/if}
+</div>

src/lib/UI/GUI/MultiLangInput.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+    import { encodeMultilangString, languageCodes, parseMultilangString, toLangName } from "src/ts/util";
+    import TextAreaInput from "./TextAreaInput.svelte";
+    export let value: string
+    let addingLang = false
+    let valueObject: {[code:string]:string} = parseMultilangString(value)
+    let selectedLang = "en"
+    export let className = ""
+    export let onInput = () => {}
+    const updateValue = () => {
+        for(let lang in valueObject){
+            if(valueObject[lang] === "" && lang !== selectedLang && lang!=="en" ){
+                delete valueObject[lang]
+            }
+        }
+        if(valueObject.xx){
+            delete valueObject.xx
+        }
+        valueObject = valueObject // force update
+        value = encodeMultilangString(valueObject)
+    }
+    if(valueObject["en"] === undefined){
+        valueObject["en"] = valueObject["xx"]
+        delete valueObject["xx"]
+        updateValue()
+    }
+</script>
+
+<div class="flex flex-wrap max-w-fit p-1 gap-2">
+    {#each Object.keys(valueObject) as lang}
+        {#if lang !== 'xx'}
+            <button class="bg-bgcolor py-2 rounded-lg px-4" class:ring-1={selectedLang === lang} on:click={() => {
+                selectedLang = lang
+                updateValue()
+            }}>{toLangName(lang)}</button>
+        {/if}
+    {/each}
+    <button class="text-nowrap bg-bgcolor py-2 rounded-lg px-4" class:ring-1={addingLang} on:click={() => {addingLang = !addingLang}}>+</button>
+</div>
+{#if addingLang}
+    <div class="m-1 p-1 g-2 flex max-w-fit rounded-md border-t-bgcolor flex-wrap gap-1">
+        {#each languageCodes as lang}
+            <button class="bg-bgcolor py-2 rounded-lg px-4 text-nowrap" on:click={() => {
+                valueObject[lang] = ""
+                selectedLang = lang
+                addingLang = false
+            }}>{toLangName(lang)}</button>
+        {/each}
+    </div>
+{/if}
+<TextAreaInput autocomplete="off" bind:value={valueObject[selectedLang]} height={"20"} onInput={() => {
+    updateValue()
+    onInput()
+}} additionalClass={className} />