[+] Allow saving chuni team name

AquaNet/src/components/GameSettingFields.svelte

@@ -1,8 +1,10 @@
 <script lang="ts">
+  import { slide } from "svelte/transition";
   import { SETTING } from "../libs/sdk";
   import type { GameOption } from "../libs/generalTypes";
   import { ts } from "../libs/i18n";
   import StatusOverlays from "./StatusOverlays.svelte";
+  import InputWithButton from "./ui/InputWithButton.svelte";
 
   export let game: string;
   let gameFields: GameOption[] = []
@@ -13,26 +15,32 @@
     gameFields = s.filter(it => it.game === game)
   })
 
-  function submitGameOption(field: string, value: any) {
-    if (submitting) return
+  async function submitGameOption(field: string, value: any) {
+    if (submitting) return false
     submitting = field
 
-    SETTING.set(field, value).catch(e => error = e.message).finally(() => submitting = "")
+    await SETTING.set(field, value).catch(e => error = e.message).finally(() => submitting = "")
+    return true
   }
 </script>
 
 <div class="fields">
   {#each gameFields as field}
-    <div class="field">
+    <div class="field {field.type.toLowerCase()}">
       {#if field.type === "Boolean"}
-        <div class="bool">
-          <input id={field.key} type="checkbox" bind:checked={field.value}
-                 on:change={() => submitGameOption(field.key, field.value)}/>
-          <label for={field.key}>
-            <span class="name">{ts(`settings.fields.${field.key}.name`)}</span>
-            <span class="desc">{ts(`settings.fields.${field.key}.desc`)}</span>
-          </label>
-        </div>
+        <input id={field.key} type="checkbox" bind:checked={field.value}
+                on:change={() => submitGameOption(field.key, field.value)}/>
+        <label for={field.key}>
+          <span class="name">{ts(`settings.fields.${field.key}.name`)}</span>
+          <span class="desc">{ts(`settings.fields.${field.key}.desc`)}</span>
+        </label>
+      {/if}
+      {#if field.type === "String"}
+        <label for={field.key}>
+          <span class="name">{ts(`settings.fields.${field.key}.name`)}</span>
+          <span class="desc">{ts(`settings.fields.${field.key}.desc`)}</span>
+        </label>
+        <InputWithButton bind:field={field} callback={() => submitGameOption(field.key, field.value)}/>
       {/if}
     </div>
   {/each}
@@ -46,31 +54,27 @@
     flex-direction: column
     gap: 12px
 
-  .bool
-    display: flex
+  .field.string
+    flex-direction: column
+    align-items: flex-start
+    gap: 0.5rem
+
+  .field.boolean
     align-items: center
     gap: 1rem
 
+  .field
+    display: flex
+
     label
       display: flex
       flex-direction: column
+      max-width: max-content
 
       .desc
         opacity: 0.6
 
-  .field
-    display: flex
-    flex-direction: column
-
-    label
-      max-width: max-content
-
-    > div:not(.bool)
-      display: flex
-      align-items: center
-      gap: 1rem
-      margin-top: 0.5rem
-
-      > input
-        flex: 1
+    input[type="text"]
+      flex: 1
+      width: 100%
 </style>

AquaNet/src/components/ui/InputWithButton.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+  import { slide } from "svelte/transition";
+  import { ts } from "../../libs/i18n";
+
+  export let field: {key: string, value: string, changed?: boolean};
+  export let callback: () => Promise<boolean>;
+</script>
+
+<div class="field">
+  <input id={field.key} type="text" bind:value={field.value}
+  on:input={() => field.changed = true}/>
+  {#if field.changed}
+    <button on:click={async () => { if (await callback()) field.changed = false } }
+      transition:slide={{axis: 'x'}}>
+      {ts('settings.profile.save')}
+    </button>
+  {/if}
+</div>
+
+<style lang="sass">
+  .field
+    display: flex
+    align-items: center
+    gap: 1rem
+    width: 100%
+
+    input
+      flex: 1
+</style>