Add tutorial for tagRenderings

src/UI/Studio/EditLayer.svelte

@@ -168,7 +168,7 @@
     </div>
     {#if $highlightedItem !== undefined}
       <FloatOver on:close={() => highlightedItem.setData(undefined)}>
-        <div class="mt-16">
+        <div>
           <TagRenderingInput path={$highlightedItem.path} {state} schema={$highlightedItem.schema} />
         </div>
       </FloatOver>

src/UI/Studio/EditLayerState.ts

@@ -21,6 +21,7 @@ import LayerConfig from "../../Models/ThemeConfig/LayerConfig"
 import { LayoutConfigJson } from "../../Models/ThemeConfig/Json/LayoutConfigJson"
 import { PrepareTheme } from "../../Models/ThemeConfig/Conversion/PrepareTheme"
 import { ConversionContext } from "../../Models/ThemeConfig/Conversion/ConversionContext"
+import { LocalStorageSource } from "../../Logic/Web/LocalStorageSource"
 
 export interface HighlightedTagRendering {
     path: ReadonlyArray<string | number>
@@ -31,6 +32,9 @@ export abstract class EditJsonState<T> {
     public readonly schema: ConfigMeta[]
     public readonly category: "layers" | "themes"
     public readonly server: StudioServer
+    public readonly showIntro: UIEventSource<"no" | "intro" | "tagrenderings"> = <any>(
+        LocalStorageSource.Get("studio-show-intro", "intro")
+    )
 
     public readonly expertMode: UIEventSource<boolean>
 

src/UI/Studio/TagRenderingInput.svelte

@@ -17,7 +17,10 @@ import { TrashIcon } from "@rgossiaux/svelte-heroicons/outline";
 import questionableTagRenderingSchemaRaw from "../../assets/schemas/questionabletagrenderingconfigmeta.json";
 import SchemaBasedField from "./SchemaBasedField.svelte";
 import Region from "./Region.svelte";
-import exp from "constants";
+import NextButton from "../Base/NextButton.svelte";
+import { QuestionMarkCircleIcon } from "@rgossiaux/svelte-heroicons/solid";
+import { LocalStorageSource } from "../../Logic/Web/LocalStorageSource";
+import { onMount } from "svelte";
 
 export let state: EditLayerState;
 export let schema: ConfigMeta;
@@ -25,7 +28,13 @@ export let path: (string | number)[];
 let expertMode = state.expertMode;
 const store = state.getStoreFor(path);
 let value = store.data;
-
+let hasSeenIntro = UIEventSource.asBoolean(LocalStorageSource.Get("studio-seen-tagrendering-tutorial", "false"))
+onMount(() => {
+if(!hasSeenIntro.data){
+  state.showIntro.setData("tagrenderings")
+  hasSeenIntro.setData(true)
+}
+})
 /**
  * Allows the theme builder to create 'writable' themes.
  * Should only be enabled for 'tagrenderings' in the theme, if the source is OSM
@@ -99,7 +108,7 @@ const ignored = new Set(["labels", "description", "classes"]);
 
 const freeformSchemaAll = <ConfigMeta[]>questionableTagRenderingSchemaRaw
   .filter(schema => schema.path.length == 2 && schema.path[0] === "freeform" && ($allowQuestions || schema.path[1] === "key"));
-let freeformSchema = $expertMode ? freeformSchemaAll : freeformSchemaAll.filter(schema => schema.hints?.group !== "expert")
+let freeformSchema = $expertMode ? freeformSchemaAll : freeformSchemaAll.filter(schema => schema.hints?.group !== "expert");
 const missing: string[] = questionableTagRenderingSchemaRaw.filter(schema => schema.path.length >= 1 && !items.has(schema.path[0]) && !ignored.has(schema.path[0])).map(schema => schema.path.join("."));
 console.log({ state });
 
@@ -112,7 +121,7 @@ console.log({ state });
     <slot name="upper-right" />
   </div>
 {:else}
-  <div class="flex flex-col w-full p-1 gap-y-1">
+  <div class="flex flex-col w-full p-1 gap-y-1 pr-12">
     <div class="flex justify-end">
       <slot name="upper-right" />
     </div>
@@ -157,5 +166,8 @@ console.log({ state });
     {#each missing as field}
       <SchemaBasedField {state} path={[...path,field]} schema={topLevelItems[field]} />
     {/each}
+
+    <NextButton clss="small mt-8" on:click={() => state.showIntro.setData("tagrenderings")}><QuestionMarkCircleIcon class="h-6 w-6"/> Show the introduction again</NextButton>
+    
   </div>
 {/if}

src/UI/StudioGUI.svelte

@@ -21,12 +21,13 @@
   import FloatOver from "./Base/FloatOver.svelte";
   import Walkthrough from "./Walkthrough/Walkthrough.svelte";
   import * as intro from "../assets/studio_introduction.json";
+  import * as intro_tagrenderings from "../assets/studio_tagrenderings_intro.json";
+  
   import { QuestionMarkCircleIcon } from "@babeard/svelte-heroicons/mini";
   import type { ConfigMeta } from "./Studio/configMeta";
   import EditTheme from "./Studio/EditTheme.svelte";
   import * as meta from "../../package.json";
   import Checkbox from "./Base/Checkbox.svelte";
-  import exp from "constants";
 
   export let studioUrl = window.location.hostname === "127.0.0.2" ? "http://127.0.0.1:1235" : "https://studio.mapcomplete.org";
 
@@ -61,13 +62,13 @@
 
   const layerSchema: ConfigMeta[] = <any>layerSchemaRaw;
   let editLayerState = new EditLayerState(layerSchema, studio, osmConnection, { expertMode });
+  let showIntro = editLayerState.showIntro
 
   const layoutSchema: ConfigMeta[] = <any>layoutSchemaRaw;
   let editThemeState = new EditThemeState(layoutSchema, studio, { expertMode });
 
   let layerId = editLayerState.configuration.map(layerConfig => layerConfig.id);
 
-  let showIntro = UIEventSource.asBoolean(LocalStorageSource.Get("studio-show-intro", "true"));
   const version = meta.version;
 
   async function editLayer(event: Event) {
@@ -162,7 +163,7 @@
           <NextButton on:click={() => {editThemeState.configuration.setData({}); state = "editing_theme"}}>
             Create a new theme
           </NextButton>
-          <NextButton clss="small" on:click={() => {showIntro.setData(true)} }>
+          <NextButton clss="small" on:click={() => {showIntro.setData("intro")} }>
             <QuestionMarkCircleIcon class="w-6 h-6" />
             Show the introduction again
           </NextButton>
@@ -222,10 +223,10 @@
 </If>
 
 
-{#if $showIntro}
-  <FloatOver on:close={() => {showIntro.setData(false)}}>
+{#if {intro, tagrenderings: intro_tagrenderings}[$showIntro]?.sections}
+  <FloatOver on:close={() => {showIntro.setData("no")}}>
     <div class="flex p-4 h-full pr-12">
-      <Walkthrough pages={intro.sections} on:done={() => {showIntro.setData(false)}} />
+      <Walkthrough pages={{intro, tagrenderings: intro_tagrenderings}[$showIntro]?.sections} on:done={() => {showIntro.setData("no")}} />
     </div>
   </FloatOver>