Properly render theme icon when using a studio layer as theme

src/Logic/DetermineLayout.ts

@@ -162,18 +162,26 @@ export default class DetermineLayout {
 
         return dict
     }
+    private static getSharedTagRenderingOrder(): string[] {
+        return questions.tagRenderings.map(tr => tr.id)
+    }
 
     private static prepCustomTheme(json: any, sourceUrl?: string, forceId?: string): LayoutConfig {
         if (json.layers === undefined && json.tagRenderings !== undefined) {
             // We got fed a layer instead of a theme
             const layerConfig = <LayerConfigJson>json
-            const iconTr: string | TagRenderingConfigJson =
+            const icon = Utils.NoNull(layerConfig.pointRendering.flatMap(
-                <any>(
+                pr => pr.marker
-                    layerConfig.pointRendering
+            ).map(iconSpec => {
-                        .map((mr) => mr?.marker?.find((icon) => icon.icon !== undefined)?.icon)
+                const icon = new TagRenderingConfig(<TagRenderingConfigJson>iconSpec.icon).render.txt
-                        .find((i) => i !== undefined)
+                if(iconSpec.color === undefined || icon.startsWith("http:") || icon.startsWith("https:")){
-                ) ?? "bug"
+                    return icon
-            const icon = new TagRenderingConfig(iconTr)?.render?.txt ?? "./assets/svg/bug.svg"
+                }
+                const color = new TagRenderingConfig(<TagRenderingConfigJson>iconSpec.color).render.txt
+                return icon+":"+color
+
+            })).join(";")
+
             json = {
                 id: json.id,
                 description: json.description,
@@ -193,6 +201,7 @@ export default class DetermineLayout {
         }
         const convertState: DesugaringContext = {
             tagRenderings: DetermineLayout.getSharedTagRenderings(),
+            tagRenderingOrder: DetermineLayout.getSharedTagRenderingOrder(),
             sharedLayers: knownLayersDict,
             publicLayers: new Set<string>(),
         }
@@ -211,7 +220,7 @@ export default class DetermineLayout {
         }
         {
             new ValidateThemeAndLayers(
-                new DoesImageExist(new Set<string>(), (_) => true),
+                new DoesImageExist(new Set<string>(), () => true),
                 "",
                 false
             ).convertStrict(json)

src/Models/ThemeConfig/Json/TagRenderingConfigJson.ts

@@ -183,7 +183,10 @@ export interface TagRenderingConfigJson {
          * ifunset: Do not show an extra icon next to the render value
          *
          * An icon supporting this mapping; typically shown pretty small.
-         * This can be used to show a 'phone'-icon next to the phone number
+         * This can be used to show a e.g. 'phone'-icon next to the phone number
+         *
+         * This supports patterns, you can e.g. have `close:red;some/other/icon.svg`
+         *
          * inline: <img src='{icon}' class="w-8 h-8" /> {icon}
          * Type: icon
          */

src/UI/BigComponents/ThemeButton.svelte

@@ -8,6 +8,7 @@
   import Tr from "../Base/Tr.svelte"
   import Translations from "../i18n/Translations"
   import { LocalStorageSource } from "../../Logic/Web/LocalStorageSource"
+  import Marker from "../Map/Marker.svelte"
 
   export let theme: LayoutInformation
   export let isCustom: boolean = false
@@ -86,7 +87,8 @@
 
 {#if theme.id !== personal.id || $unlockedPersonal}
   <a class={"flex w-full items-center text-ellipsis rounded my-2"} href={$href}>
-    <img src={theme.icon} class="m-1 block h-11 w-11 sm:mr-2" alt="" />
+    <Marker icons={theme.icon} size="m-1 block h-11 w-11 sm:mr-2"/>
+
     <span class="flex flex-col overflow-hidden text-ellipsis font-bold text-xl">
       <Tr cls="underline" t={title} />
       <Tr cls="subtle text-base" t={description}/>

src/UI/Map/Marker.svelte

@@ -5,11 +5,30 @@
   /**
    * Renders a 'marker', which consists of multiple 'icons'
    */
-  export let icons: { icon: string; color: string }[]
+  export let icons: string | { icon: string; color: string }[]
+
+  if(typeof icons === "string") {
+    icons = icons.split(";").map(subspec => {
+      if(subspec.startsWith("http://") || subspec.startsWith("https://")){
+        return {
+          icon: subspec, color: "black"
+        }
+      }
+      const [icon, color] = subspec.split(":")
+      return {
+        icon, color: color ?? "black"
+      }
+    })
+  }
+
   /**
    * Class which is applied onto the individual icons
    */
   export let clss = ""
+
+  /**
+   * Class applied onto the entire element
+   */
   export let size = "w-full h-full"
 </script>
 

src/UI/Popup/TagRendering/TagRenderingMapping.svelte

@@ -31,20 +31,13 @@
       | "large-height"
       | string
   }
-  function iconToMarker(spec: string) {
+
-    return spec.split(";").map(subspec => {
-      const [icon, color] = subspec.split(":")
-      return {
-        icon, color: color ?? "black"
-      }
-    })
-  }
 </script>
 
 {#if mapping.icon !== undefined}
   <div class="inline-flex items-center">
     <Marker
-      icons={iconToMarker(mapping.icon)}
+      icons={mapping.icon}
       size={twJoin(`mapping-icon-${mapping.iconClass ?? "small"}-height mapping-icon-${mapping.iconClass ?? "small"}-width`, "mr-2", "shrink-0 mx-2")}
       clss={`mapping-icon-${mapping.iconClass ?? "small"}`}
     />

src/UI/ThemeViewGUI.svelte

@@ -78,6 +78,7 @@
   import Share from "@babeard/svelte-heroicons/solid/Share"
   import ChevronRight from "@babeard/svelte-heroicons/solid/ChevronRight"
   import DocumentChartBar from "@babeard/svelte-heroicons/outline/DocumentChartBar"
+  import Marker from "./Map/Marker.svelte"
 
   export let state: ThemeViewState
   let layout = state.layout
@@ -254,12 +255,7 @@
         htmlElem={openMapButton}
       >
         <div class="m-0.5 mx-1 flex cursor-pointer items-center max-[480px]:w-full sm:mx-1 md:mx-2">
-          <img
+          <Marker icons={layout.icon} size="h-4 w-4 md:h-8 md:w-8 mr-0.5 sm:mr-1 md:mr-2" ></Marker>
-            role="presentation"
-            alt=""
-            class="mr-0.5 block h-4 w-4 sm:mr-1 md:mr-2 md:h-8 md:w-8"
-            src={layout.icon}
-          />
           <b class="mr-1">
             <Tr t={layout.title} />
           </b>
@@ -489,7 +485,8 @@
         </div>
 
         <div class="flex" slot="title0">
-          <img class="block h-4 w-4" src={layout.icon} />
+          <Marker icons={layout.icon} size="h-4 w-4"/>
+
           <Tr t={layout.title} />
         </div>