Studio: add previews of the questions, edit them in floatover

src/UI/Studio/QuestionPreview.svelte

@@ -0,0 +1,91 @@
+<script lang="ts">
+  import type { ConfigMeta } from "./configMeta";
+  import EditLayerState from "./EditLayerState";
+  import * as questions from "../../assets/generated/layers/questions.json";
+  import { ImmutableStore, Store } from "../../Logic/UIEventSource";
+  import TagRenderingEditable from "../Popup/TagRendering/TagRenderingEditable.svelte";
+  import TagRenderingConfig from "../../Models/ThemeConfig/TagRenderingConfig";
+  import * as nmd from "nano-markdown";
+  import type {
+    QuestionableTagRenderingConfigJson
+  } from "../../Models/ThemeConfig/Json/QuestionableTagRenderingConfigJson.js";
+  import type { TagRenderingConfigJson } from "../../Models/ThemeConfig/Json/TagRenderingConfigJson";
+  import FromHtml from "../Base/FromHtml.svelte";
+
+  export let state: EditLayerState;
+  export let path: ReadonlyArray<string | number>;
+  export let schema: ConfigMeta;
+  let value = state.getStoreFor(path);
+
+  let perId: Record<string, TagRenderingConfigJson[]> = {};
+  for (const tagRendering of questions.tagRenderings) {
+    if (tagRendering.labels) {
+      for (const label of tagRendering.labels) {
+        perId[label] = (perId[label] ?? []).concat(tagRendering);
+      }
+    }
+    perId[tagRendering.id] = [tagRendering];
+  }
+
+  let configJson: Store<QuestionableTagRenderingConfigJson[]> = value.map(x => {
+    if (typeof x === "string") {
+      return perId[x];
+    } else {
+      return [x];
+    }
+  });
+  let configs: Store<TagRenderingConfig[]> = configJson.mapD(configs => configs.map(config => new TagRenderingConfig(config)));
+  let id: Store<string> = value.mapD(c => {
+    if (c.id) {
+      return c.id;
+    }
+    if (typeof c === "string") {
+      return c;
+    }
+    return undefined;
+  });
+
+  let tags = state.testTags;
+
+  let messages = state.messagesFor(path);
+
+</script>
+
+<div class="flex">
+
+  <div class="flex flex-col interactive border-interactive m-4 w-full">
+
+    {#if $id}
+      TagRendering {$id}
+    {/if}
+    <button on:click={() => state.highlightedItem.setData({path, schema})}>
+      {#if schema.hints.question}
+        {schema.hints.question}
+      {/if}
+    </button>
+    {#if schema.description}
+      <FromHtml src={nmd(schema.description)} />
+    {/if}
+    {#each $messages as message}
+      <div class="alert">
+        {message.message}
+      </div>
+    {/each}
+
+    <slot class="self-end my-4"></slot>
+
+
+  </div>
+
+  <div class="flex flex-col w-full m-4">
+    {#each $configs as config}
+      <TagRenderingEditable
+        selectedElement={state.exampleFeature}
+        config={config} editingEnabled={new ImmutableStore(true)} showQuestionIfUnknown={true}
+        {state}
+        {tags}></TagRenderingEditable>
+    {/each}
+  </div>
+
+
+</div>