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

src/UI/StudioGUI.svelte

@@ -183,18 +183,18 @@
     state = "editing_layer"
   }
 
-  async function selectStateBasedOnHash() {
+  async function selectStateBasedOnHash(uid: number) {
     const hash = Hash.hash.data
     if (!hash) {
       return
     }
-    console.log("Selecting state based on ", hash)
+    console.log("Selecting state based on ", hash, uid)
     const [mode, id, tab] = hash.split("/")
     // Not really an event, we just set the 'detail'
     const event = {
       detail: {
         id,
-        owner: uid.data,
+        owner: uid,
       },
     }
     const statePromise: Promise<EditJsonState<any>> =
@@ -203,7 +203,9 @@
     state.selectedTab.setData(Number(tab))
   }
 
-  selectStateBasedOnHash()
+  uid.AsPromise().then(
+    uid => selectStateBasedOnHash(uid)
+  )
 
   function backToStudio() {
     console.log("Back to studio")

src/UI/i18n/Translations.ts

@@ -112,21 +112,21 @@ export default class Translations {
             }
         }
 
-        const langaugeCounts = {}
+        const languageCounts = {}
         for (const translation of tr) {
             for (const language in translation.translations) {
-                if (langaugeCounts[language] === undefined) {
-                    langaugeCounts[language] = 1
+                if (languageCounts[language] === undefined) {
+                    languageCounts[language] = 1
                 } else {
-                    langaugeCounts[language]++
+                    languageCounts[language]++
                 }
             }
         }
-        for (const language in langaugeCounts) {
+        for (const language in languageCounts) {
             console.log(
                 "Total translations in ",
                 language,
-                langaugeCounts[language],
+                languageCounts[language],
                 "/",
                 tr.length
             )