Studio: UX-improvements after user testing

src/UI/Studio/EditLayer.svelte

@@ -10,6 +10,7 @@
   import type { LayerConfigJson } from "../../Models/ThemeConfig/Json/LayerConfigJson";
   import type { ConversionMessage } from "../../Models/ThemeConfig/Conversion/Conversion";
   import ErrorIndicatorForRegion from "./ErrorIndicatorForRegion.svelte";
+  import { ChevronRightIcon } from "@rgossiaux/svelte-heroicons/solid";
 
   const layerSchema: ConfigMeta[] = <any>layerSchemaRaw;
 
@@ -57,12 +58,15 @@
 </script>
 
 <div class="w-full flex justify-between">
+  <slot />
   <h3>Editing layer {$title}</h3>
   {#if $hasErrors > 0}
     <div class="alert">{$hasErrors} errors detected</div>
   {:else}
-    <a class="primary button" href={baseUrl+state.server.layerUrl(title.data)} target="_blank" rel="noopener">Try it
-      out</a>
+    <a class="primary button" href={baseUrl+state.server.layerUrl(title.data)} target="_blank" rel="noopener">
+      Try it out
+      <ChevronRightIcon class= "h-6 w-6 shrink-0"/>
+    </a>
   {/if}
 </div>
 <div class="m4">

src/UI/Studio/SchemaBasedField.svelte

@@ -20,17 +20,17 @@
 
   const isTranslation = schema.hints.typehint === "translation" || schema.hints.typehint === "rendered" || ConfigMetaUtils.isTranslation(schema);
   let type = schema.hints.typehint ?? "string";
-  
-  let rendervalue = schema.type === "boolean" ? undefined : ((schema.hints.inline ?? schema.path.join(".")) + " <b>{translated(value)}</b>")
-  let helperArgs = undefined
-  let inline = schema.hints.inline !== undefined
+
+  let rendervalue = schema.type === "boolean" ? undefined : ((schema.hints.inline ?? schema.path.join(".")) + " <b>{translated(value)}</b>");
+  let helperArgs = schema.hints.typehelper?.split(",");
+  let inline = schema.hints.inline !== undefined;
   if (isTranslation) {
     type = "translation";
-    if(schema.hints.inline){
-      const inlineValue = schema.hints.inline
-      rendervalue = inlineValue
-      inline = false
-      helperArgs = [inlineValue.substring(0, inlineValue.indexOf("{")), inlineValue.substring(inlineValue.indexOf("}") + 1)]
+    if (schema.hints.inline) {
+      const inlineValue = schema.hints.inline;
+      rendervalue = inlineValue;
+      inline = false;
+      helperArgs = [inlineValue.substring(0, inlineValue.indexOf("{")), inlineValue.substring(inlineValue.indexOf("}") + 1)];
     }
   }
   if (type.endsWith("[]")) {
@@ -164,6 +164,8 @@
         <div class="alert">{msg.message}</div>
       {/each}
     {/if}
-    <span class="subtle">{schema.path.join(".")}</span>
+    {#if window.location.hostname === "127.0.0.1"}
+      <span class="subtle">{schema.path.join(".")}</span>
+    {/if}
   </div>
 {/if}

src/UI/Studio/TagInput/BasicTagInput.svelte

@@ -11,9 +11,16 @@
     export let tag: UIEventSource<string> = new UIEventSource<string>(undefined)
     export let uploadableOnly: boolean
     export let overpassSupportNeeded: boolean
+    
+    export  let dropdownFocussed = new UIEventSource(false)
 
+    /**
+     * If set, do not show tagInfo if there are many features matching
+     */
     export let silent : boolean = false
     
+    export let selected: UIEventSource<boolean> = new UIEventSource<boolean>(false)
+    
     let feedbackGlobal = tag.map(tag => {
         if (!tag) {
             return undefined
@@ -38,7 +45,7 @@
     let valueValue = new UIEventSource<string>(undefined)
 
 
-    let mode: string = "="
+    export let mode: string = "="
     let modes: string[] = []
 
     for (const k in TagUtils.modeDocumentation) {
@@ -105,7 +112,7 @@
 
         <ValidatedInput feedback={feedbackKey} placeholder="The key of the tag" type="key"
                         value={keyValue}></ValidatedInput>
-        <select bind:value={mode}>
+        <select bind:value={mode} on:focusin={() => dropdownFocussed.setData(true)} on:focusout={() => dropdownFocussed.setData(false)}>
             {#each modes as option}
                 <option value={option}>
                     {option}

src/UI/Studio/configMeta.ts

@@ -3,9 +3,13 @@ import { JsonSchema, JsonSchemaType } from "./jsonSchema"
 export interface ConfigMeta {
     path: string[]
     type: JsonSchemaType | JsonSchema[]
+    /**
+     * All fields are lowercase, as they should be case-insensitive
+     */
     hints: {
         group?: string
         typehint?: string
+        typehelper?: string
         /**
          * If multiple subcategories can be chosen
          */