From d43e3a0d83ef97a1cc4ce3df9fcc2c13b3fbead2 Mon Sep 17 00:00:00 2001
From: Pieter Vander Vennet <pietervdvn@posteo.net>
Date: Wed, 8 Jan 2025 15:11:17 +0100
Subject: [PATCH] Feature: theme intro panel now has download button for custom
 themes

---
 src/Logic/DetermineTheme.ts                 |  3 ---
 src/Models/ThemeConfig/ThemeConfig.ts       |  2 +-
 src/UI/BigComponents/ThemeIntroPanel.svelte | 13 ++++++++++++-
 3 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/src/Logic/DetermineTheme.ts b/src/Logic/DetermineTheme.ts
index 4d4c1bb295..7d7ca80a67 100644
--- a/src/Logic/DetermineTheme.ts
+++ b/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],
diff --git a/src/Models/ThemeConfig/ThemeConfig.ts b/src/Models/ThemeConfig/ThemeConfig.ts
index 2d7f4eed61..7db9787a79 100644
--- a/src/Models/ThemeConfig/ThemeConfig.ts
+++ b/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(
diff --git a/src/UI/BigComponents/ThemeIntroPanel.svelte b/src/UI/BigComponents/ThemeIntroPanel.svelte
index 0c354be17f..bc6af229ef 100644
--- a/src/UI/BigComponents/ThemeIntroPanel.svelte
+++ b/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} />