Add icons and titles to studio accordeons

src/UI/Studio/QuestionPreview.svelte

@@ -65,10 +65,8 @@
 </script>
 
 <div class="flex">
-  <div class="interactive border-interactive m-4 flex w-full flex-col">
-    {#if $id}
-      TagRendering {$id}
-    {/if}
+  <div class="m-4 flex w-full flex-col">
+
     <NextButton clss="primary" on:click={() => state.highlightedItem.setData({ path, schema })}>
       {#if schema.hints.question}
         {schema.hints.question}

src/UI/Studio/Region.svelte

@@ -28,7 +28,7 @@
 {:else if title}
   <AccordionSingle>
     <div slot="header">{title}</div>
-    <div class="flex w-full flex-col gap-y-1 border border-black pl-2">
+    <div class="flex w-full flex-col gap-y-1 pl-2">
       <slot name="description" />
       {#each configsFiltered as config}
         <SchemaBasedInput {state} path={config.path} schema={config} />

src/UI/Studio/SchemaBasedArray.svelte

@@ -10,11 +10,15 @@
   import ShowConversionMessage from "./ShowConversionMessage.svelte"
   import Markdown from "../Base/Markdown.svelte"
   import AccordionSingle from "../Flowbite/AccordionSingle.svelte"
+  import Icon from "../Map/Icon.svelte"
+  import Tr from "../Base/Tr.svelte"
+  import Translations from "../i18n/Translations"
 
   export let state: EditLayerState
   export let schema: ConfigMeta
 
   let title = schema.path.at(-1)
+  console.log(">>>", schema)
   let singular = title
   if (title?.endsWith("s")) {
     singular = title.slice(0, title.length - 1)
@@ -92,6 +96,28 @@
     currentValue.data.splice(target, 0, x)
     currentValue.ping()
   }
+
+  function genTitle(value: any, singular: string, i: number) {
+    if (schema.hints.title) {
+      return Function("value", "return " + schema.hints.title)(value)
+    }
+    return `${singular} ${i}`
+  }
+
+  let genIconF: (x: any) => ({ icon: string, color: string }) = <any>Function("value", "return " + schema.hints.icon)
+  console.log("Icon lambda is", schema.hints.icon, path, genIconF("test"))
+
+  function genIcon(value: any): string {
+    return genIconF(value)?.icon
+  }
+
+  function genColor(value: any): string {
+    if (!schema.hints.icon) {
+      return undefined
+    }
+    return genIconF(value)?.color
+  }
+
 </script>
 
 <div class="pl-2">
@@ -126,11 +152,22 @@
     {/each}
   {:else}
     {#each $currentValue as value, i}
-      <AccordionSingle>
+      <AccordionSingle expanded={false}>
         <span slot="header">
           {#if !isTagRenderingBlock}
             <div class="flex items-center justify-between">
-              <h3 class="m-0">{singular} {i}</h3>
+              <h3 class="m-0 flex">
+                {#if schema.hints.icon}
+                  <Icon clss="w-6 h-6" icon={genIcon(value)} color={genColor(value)} />
+                {/if}
+                {singular} {i}
+
+                {#if schema.hints.title}
+                  <div class="subtle ml-2">
+                    <Tr t={Translations.T(genTitle(value, singular, i))}/>
+                  </div>
+                  {/if}
+              </h3>
               <button
                 class="h-fit w-fit rounded-full border border-black p-1"
                 on:click={() => {
@@ -140,6 +177,10 @@
                 <TrashIcon class="h-4 w-4" />
               </button>
             </div>
+            {:else if typeof value === "string"}
+            Builtin: <b>{value}</b>
+            {:else}
+            <Tr cls="font-bold" t={Translations.T(value.question ?? value.render)}/>
           {/if}
         </span>
         <div class="normal-background p-2">

src/UI/Studio/configMeta.ts

@@ -23,7 +23,8 @@ export interface ConfigMeta {
         typesdefault?: string
         suggestions?: []
         title?: string
-        multianswer?: "true" | string
+        multianswer?: "true" | string,
+        icon?: string
     }
     required: boolean
     description: string