Add buttons to go back to the index

UI/BigComponents/ActionButtons.ts

@@ -1,6 +1,6 @@
 import Combine from "../Base/Combine"
 import LayoutConfig from "../../Models/ThemeConfig/LayoutConfig"
-import { Store, UIEventSource } from "../../Logic/UIEventSource"
+import { Store } from "../../Logic/UIEventSource"
 import { BBox } from "../../Logic/BBox"
 import Loc from "../../Models/Loc"
 import { OsmConnection } from "../../Logic/Osm/OsmConnection"
@@ -11,6 +11,28 @@ import { Utils } from "../../Utils"
 import { MapillaryLink } from "./MapillaryLink"
 import TranslatorsPanel from "./TranslatorsPanel"
 import { OpenIdEditor, OpenJosm } from "./CopyrightPanel"
+import Toggle from "../Input/Toggle"
+
+export class BackToThemeOverview extends Toggle {
+    constructor(
+        state: {
+            readonly featureSwitchMoreQuests: Store<boolean>
+        },
+        options: {
+            imgSize: string
+        }
+    ) {
+        const t = Translations.t.general
+        const button = new SubtleButton(Svg.add_ui(), t.backToIndex, options).onClick(() => {
+            const path = window.location.href.split("/")
+            path.pop()
+            path.push("index.html")
+            window.location.href = path.join("/")
+        })
+
+        super(button, undefined, state.featureSwitchMoreQuests)
+    }
+}
 
 export class ActionButtons extends Combine {
     constructor(state: {
@@ -19,12 +41,15 @@ export class ActionButtons extends Combine {
         readonly locationControl: Store<Loc>
         readonly osmConnection: OsmConnection
         readonly isTranslator: Store<boolean>
+        readonly featureSwitchMoreQuests: Store<boolean>
     }) {
         const imgSize = "h-6 w-6"
         const iconStyle = "height: 1.5rem; width: 1.5rem"
         const t = Translations.t.general.attribution
 
         super([
+            new BackToThemeOverview(state, { imgSize }),
+
             new SubtleButton(Svg.liberapay_ui(), t.donate, {
                 url: "https://liberapay.com/pietervdvn/",
                 newTab: true,

UI/BigComponents/FilterView.ts

@@ -22,16 +22,18 @@ import { DropDown } from "../Input/DropDown"
 import { FixedUiElement } from "../Base/FixedUiElement"
 import BaseLayer from "../../Models/BaseLayer"
 import Loc from "../../Models/Loc"
+import { BackToThemeOverview } from "./ActionButtons"
 
 export default class FilterView extends VariableUiElement {
     constructor(
         filteredLayer: Store<FilteredLayer[]>,
         tileLayers: { config: TilesourceConfig; isDisplayed: UIEventSource<boolean> }[],
         state: {
-            availableBackgroundLayers?: Store<BaseLayer[]>
-            featureSwitchBackgroundSelection?: UIEventSource<boolean>
-            featureSwitchIsDebugging?: UIEventSource<boolean>
-            locationControl?: UIEventSource<Loc>
+            readonly availableBackgroundLayers?: Store<BaseLayer[]>
+            readonly featureSwitchBackgroundSelection?: UIEventSource<boolean>
+            readonly featureSwitchIsDebugging?: UIEventSource<boolean>
+            readonly locationControl?: UIEventSource<Loc>
+            readonly featureSwitchMoreQuests: Store<boolean>
         }
     ) {
         const backgroundSelector = new Toggle(
@@ -53,8 +55,12 @@ export default class FilterView extends VariableUiElement {
                 elements = elements.concat(
                     tileLayers.map((tl) => FilterView.createOverlayToggle(state, tl))
                 )
-                // ... and add the dropdown to select a different background
-                return elements.concat(backgroundSelector)
+
+                elements.push(
+                    backgroundSelector,
+                    new BackToThemeOverview(state, { imgSize: "h-6 w-6" }).SetClass("block mt-12")
+                )
+                return elements
             })
         )
     }

UI/BigComponents/ThemeIntroductionPanel.ts

@@ -83,20 +83,6 @@ export default class ThemeIntroductionPanel extends Combine {
             layout.descriptionTail?.Clone().SetClass("block mt-4"),
 
             languagePicker?.SetClass("block mt-4 pb-8 border-b-2 border-dotted border-gray-400"),
-
-            Toggle.If(state.featureSwitchMoreQuests, () =>
-                new Combine([
-                    t.welcomeExplanation.browseOtherThemesIntro,
-                    new SubtleButton(
-                        Svg.add_ui().SetClass("h-6"),
-                        t.welcomeExplanation.browseMoreMaps
-                    )
-                        .onClick(() =>
-                            currentTab.setData(FullWelcomePaneWithTabs.MoreThemesTabIndex)
-                        )
-                        .SetClass("h-12"),
-                ]).SetClass("flex flex-col mt-6")
-            ),
             new ActionButtons(state),
 
             ...layout.CustomCodeSnippets(),