Feature: theme intro panel now has download button for custom themes

src/Logic/DetermineTheme.ts

@@ -152,9 +152,6 @@ export default class DetermineTheme {
             json = {
                 id: json.id,
                 description: json.description,
-                descriptionTail: {
-                    en: "<div class='alert'>Layer only mode.</div> The loaded custom theme actually isn't a custom theme, but only contains a layer.",
-                },
                 icon,
                 title: json.name,
                 layers: [json],

src/Models/ThemeConfig/ThemeConfig.ts

@@ -90,7 +90,7 @@ export default class ThemeConfig implements ThemeInformation {
     public readonly definitionRaw?: string
 
     private readonly layersDict: Map<string, LayerConfig>
-    private readonly source: ThemeConfigJson
+    public readonly source: ThemeConfigJson
     public readonly enableCache: boolean
 
     constructor(

src/UI/BigComponents/ThemeIntroPanel.svelte

@@ -9,12 +9,15 @@
   import If from "../Base/If.svelte"
   import { ExclamationTriangleIcon } from "@babeard/svelte-heroicons/mini"
   import GeolocationIndicator from "./GeolocationIndicator.svelte"
+  import { DownloadIcon } from "@rgossiaux/svelte-heroicons/solid"
+  import { Utils } from "../../Utils"
+  import ThemeConfig from "../../Models/ThemeConfig/ThemeConfig"
 
   /**
    * The theme introduction panel
    */
   export let state: ThemeViewState
-  let theme = state.theme
+  let theme: ThemeConfig = state.theme
 
   let geolocation = state.geolocation.geolocationState
   let geopermission: Store<GeolocationPermissionState> = geolocation.permission
@@ -52,7 +55,14 @@
     </If>
 
     <Tr t={theme.descriptionTail} />
+    {#if !theme.official}
+      <div class="flex w-full justify-end">
 
+      <button class="flex small w-fit self-end as-link" on:click={() => Utils.offerContentsAsDownloadableFile(JSON.stringify(theme.source, null, "  "), theme.id+".mapcomplete_theme.json")}>
+        Download the theme definition
+      </button>
+        </div>
+    {/if}
     <!-- Buttons: open map, go to location, search -->
     <NextButton
       clss="primary w-full"
@@ -100,6 +110,7 @@
     {/if}
   </div>
 
+
   <div class="link-underline mt-8 flex justify-end text-sm">
     <a href="https://mapcomplete.org" target="_blank">
       <Tr t={Translations.t.general.poweredByMapComplete} />