MapComplete/UI/BigComponents/HiddenThemeList.svelte

<script lang="ts">
  import { OsmConnection } from "../../Logic/Osm/OsmConnection"
  import { UIEventSource } from "../../Logic/UIEventSource"
  import * as themeOverview from "../../assets/generated/theme_overview.json"
  import { Utils } from "../../Utils"
  import ThemesList from "./ThemesList.svelte"
  import Translations from "../i18n/Translations"
  import { LayoutInformation } from "../../Models/ThemeConfig/LayoutConfig"
  import LoginToggle from "../Base/LoginToggle.svelte"

  export let search: UIEventSource<string>
  export let state: { osmConnection: OsmConnection }
  export let onMainScreen: boolean = true

  const prefix = "mapcomplete-hidden-theme-"
  const hiddenThemes: LayoutInformation[] =
    (themeOverview["default"] ?? themeOverview)?.filter((layout) => layout.hideFromOverview) ?? []
  const userPreferences = state.osmConnection.preferencesHandler.preferences
  const t = Translations.t.general.morescreen

  let knownThemesId: string[]
  $: knownThemesId = Utils.NoNull(
    Object.keys($userPreferences)
      .filter((key) => key.startsWith(prefix))
      .map((key) => key.substring(prefix.length, key.length - "-enabled".length))
  )
  $: console.log("Known theme ids:", knownThemesId)
  $: knownThemes = hiddenThemes.filter((theme) => knownThemesId.includes(theme.id))
</script>

<LoginToggle {state}>
  <ThemesList
    hideThemes={false}
    isCustom={false}
    {onMainScreen}
    {search}
    {state}
    themes={knownThemes}
  >
    <svelte:fragment slot="title">
      <h3>{t.previouslyHiddenTitle.toString()}</h3>
      <p>
        {t.hiddenExplanation.Subs({
          hidden_discovered: knownThemes.length.toString(),
          total_hidden: hiddenThemes.length.toString(),
        })}
      </p>
    </svelte:fragment>
  </ThemesList>
</LoginToggle>