Chore: fix some type errors, remove more of Svg.ts

scripts/generateIncludedImages.ts

@@ -7,6 +7,7 @@ function genImages(dryrun = false) {
         "add",
         "addSmall",
         "back",
+        "circle",
         "blocked",
         "brick_wall",
         "brick_wall_raw",
@@ -33,6 +34,7 @@ function genImages(dryrun = false) {
         "duplicate",
         "elevator",
         "elevator_wheelchair",
+        "envelope",
         "eye",
         "filter",
         "filter_disable",
@@ -73,6 +75,7 @@ function genImages(dryrun = false) {
         "osm_logo_us",
         "osm-logo-us",
         "party",
+        "pencil",
         "person",
         "pin",
         "plantnet_logo",
@@ -81,6 +84,8 @@ function genImages(dryrun = false) {
         "resolved",
         "ring",
         "robot",
+        "scissors",
+        "search",
         "search_disable",
         "share",
         "SocialImageForeground",

src/UI/Popup/AddNewPoint/AddNewPoint.svelte

@@ -28,12 +28,14 @@
   import { onDestroy } from "svelte"
   import NextButton from "../../Base/NextButton.svelte"
   import BackButton from "../../Base/BackButton.svelte"
-  import ToSvelte from "../../Base/ToSvelte.svelte"
-  import Svg from "../../../Svg"
   import OpenBackgroundSelectorButton from "../../BigComponents/OpenBackgroundSelectorButton.svelte"
   import { twJoin } from "tailwind-merge"
   import Confirm from "../../../assets/svg/Confirm.svelte"
   import Close from "../../../assets/svg/Close.svelte"
+  import Layers from "../../../assets/svg/Layers.svelte"
+  import { Translation } from "../../i18n/Translation"
+  import ToSvelte from "../../Base/ToSvelte.svelte"
+  import BaseUIElement from "../../BaseUIElement"
 
   export let coordinate: { lon: number; lat: number }
   export let state: SpecialVisualizationState
@@ -41,8 +43,9 @@
   let selectedPreset: {
     preset: PresetConfig
     layer: LayerConfig
-    icon: string
-    tags: Record<string, string>
+    icon: BaseUIElement
+    tags: Record<string, string>,
+    text: Translation
   } = undefined
   let checkedOfGlobalFilters: number = 0
   let confirmedCategory = false
@@ -143,7 +146,6 @@
     const feature = state.indexedFeatures.featuresById.data.get(newId)
     console.log("Selecting feature", feature, "and opening their popup")
     abort()
-    state.selectedLayer.setData(selectedPreset.layer)
     state.selectedElement.setData(feature)
     tagsStore.ping()
   }
@@ -199,7 +201,7 @@
             state.guistate.openFilterView(selectedPreset.layer)
           }}
         >
-          <ToSvelte construct={Svg.layers_svg().SetClass("w-12")} />
+          <Layers class="w-12"/>
           <Tr t={Translations.t.general.add.openLayerControl} />
         </button>
 
@@ -240,7 +242,7 @@
             state.guistate.openFilterView(selectedPreset.layer)
           }}
         >
-          <ToSvelte construct={Svg.layers_svg().SetClass("w-12")} />
+          <Layers class="w-12"/>
           <Tr t={Translations.t.general.add.openLayerControl} />
         </button>
       </div>
@@ -252,8 +254,6 @@
         />
       </h2>
 
-      <Tr t={Translations.t.general.add.confirmIntro} />
-
       {#if selectedPreset.preset.description}
         <Tr t={selectedPreset.preset.description} />
       {/if}
@@ -304,7 +304,7 @@
         <Tr
           slot="message"
           t={_globalFilter[checkedOfGlobalFilters].onNewPoint?.confirmAddNew.Subs({
-            preset: selectedPreset.preset,
+            preset: selectedPreset.text
           })}
         />
       </SubtleButton>

src/UI/Popup/AddNewPoint/PresetList.svelte

@@ -22,6 +22,10 @@
     preset: PresetConfig
     layer: LayerConfig
     text: Translation
+    /**
+     * Same as `this.preset.description.firstSentence()`
+     */
+    description: Translation,
     icon: BaseUIElement
     tags: Record<string, string>
   }[] = []
@@ -72,7 +76,13 @@
   }
 
   const dispatch = createEventDispatcher<{
-    select: { preset: PresetConfig; layer: LayerConfig; icon: string; tags: Record<string, string> }
+    select: {
+      preset: PresetConfig;
+      layer: LayerConfig;
+      icon: BaseUIElement;
+      tags: Record<string, string>,
+      text: Translation
+    }
   }>()
 </script>
 

src/UI/Popup/SendEmail.svelte

@@ -4,6 +4,7 @@
   import ToSvelte from "../Base/ToSvelte.svelte"
   import { Utils } from "../../Utils"
   import { Store } from "../../Logic/UIEventSource"
+  import Envelope from "../../assets/svg/Envelope.svelte"
 
   export let tags: Store<OsmTags>
   export let args: string[]
@@ -14,6 +15,6 @@
 </script>
 
 <a class="button flex w-full items-center" href={url} style="margin-left: 0">
-  <ToSvelte construct={Svg.envelope_svg().SetClass("w-8 h-8 mr-4 shrink-0")} />
+  <Envelope class="w-8 h-8 mr-4 shrink-0"/>
   {button_text}
 </a>

src/UI/Popup/SplitRoadWizard.ts

@@ -1,5 +1,4 @@
 import Toggle from "../Input/Toggle"
-import Svg from "../../Svg"
 import { UIEventSource } from "../../Logic/UIEventSource"
 import { SubtleButton } from "../Base/SubtleButton"
 import Combine from "../Base/Combine"
@@ -19,6 +18,7 @@ import { Changes } from "../../Logic/Osm/Changes"
 import { IndexedFeatureSource } from "../../Logic/FeatureSource/FeatureSource"
 import LayoutConfig from "../../Models/ThemeConfig/LayoutConfig"
 import OsmObjectDownloader from "../../Logic/Osm/OsmObjectDownloader"
+import Scissors from "../../assets/svg/Scissors.svelte"
 
 export default class SplitRoadWizard extends Combine {
     public dialogIsOpened: UIEventSource<boolean>
@@ -26,8 +26,8 @@ export default class SplitRoadWizard extends Combine {
     /**
      * A UI Element used for splitting roads
      *
-     * @param id: The id of the road to remove
-     * @param state: the state of the application
+     * @param id The id of the road to remove
+     * @param state the state of the application
      */
     constructor(
         id: WayId,
@@ -68,7 +68,7 @@ export default class SplitRoadWizard extends Combine {
 
         // Toggle between splitmap
         const splitButton = new SubtleButton(
-            Svg.scissors_svg().SetStyle("height: 1.5rem; width: auto"),
+            new SvelteUIElement(Scissors).SetClass("h-6 w-6"),
             new Toggle(
                 t.splitAgain.Clone().SetClass("text-lg font-bold"),
                 t.inviteToSplit.Clone().SetClass("text-lg font-bold"),

src/UI/Wikipedia/WikidataSearchBox.ts

@@ -11,6 +11,8 @@ import Title from "../Base/Title"
 import Svg from "../../Svg"
 import Loading from "../Base/Loading"
 import Table from "../Base/Table"
+import SvelteUIElement from "../Base/SvelteUIElement"
+import Search from "../../assets/svg/Search.svelte"
 
 export default class WikidataSearchBox extends InputElement<string> {
     public static docs = new Combine([
@@ -207,7 +209,7 @@ Another example is to search for species and trees:
         return new Combine([
             new Title(Translations.t.general.wikipedia.searchWikidata, 3).SetClass("m-2"),
             new Combine([
-                Svg.search_svg().SetStyle("width: 1.5rem"),
+                new SvelteUIElement(Search).SetClass("w-6"),
                 searchField.SetClass("m-2 w-full"),
             ]).SetClass("flex"),
             previews,