From b55d97649201ddb4d3f8748a41c77198df4c5bfe Mon Sep 17 00:00:00 2001
From: Tobias <tobias@fixmycity.de>
Date: Thu, 15 Jun 2023 05:38:52 +0200
Subject: [PATCH] Apply `twJoin`, `twMerge`

Looking at https://github.com/dcastil/tailwind-merge/blob/v1.13.1/docs/when-and-how-to-use-it.md#how-to-use-it I placed the "winning" class at the end for twMerge
---
 UI/Base/BackButton.svelte                             |  6 +++---
 UI/Base/FromHtml.svelte                               |  2 +-
 UI/Base/LoginButton.svelte                            |  2 +-
 UI/Base/MapControlButton.svelte                       |  4 ++--
 UI/Base/NextButton.svelte                             |  6 +++---
 UI/Base/SubtleButton.svelte                           |  8 ++++----
 UI/Base/SubtleLink.svelte                             |  7 ++++---
 UI/Base/TabbedGroup.svelte                            | 11 ++++++-----
 UI/BigComponents/ThemeIntroPanel.svelte               |  6 +++---
 UI/InputElement/Helpers/FloorSelector.svelte          | 10 ++++++----
 UI/Popup/AddNewPoint/AddNewPoint.svelte               |  5 +++--
 UI/Popup/DeleteFlow/DeleteWizard.svelte               |  6 +++---
 UI/Popup/TagRendering/TagRenderingAnswer.svelte       |  7 +++----
 UI/Popup/TagRendering/TagRenderingMapping.svelte      |  8 ++++++--
 UI/Popup/TagRendering/TagRenderingMappingInput.svelte |  3 ++-
 UI/Popup/TagRendering/TagRenderingQuestion.svelte     |  4 ++--
 16 files changed, 52 insertions(+), 43 deletions(-)

diff --git a/UI/Base/BackButton.svelte b/UI/Base/BackButton.svelte
index 2b11394e10..0c5d20d8ee 100644
--- a/UI/Base/BackButton.svelte
+++ b/UI/Base/BackButton.svelte
@@ -6,15 +6,15 @@
   import SubtleButton from "./SubtleButton.svelte"
   import { ChevronLeftIcon } from "@rgossiaux/svelte-heroicons/solid"
   import { createEventDispatcher } from "svelte"
+  import { twMerge } from "tailwind-merge"
 
   const dispatch = createEventDispatcher<{ click }>()
-  export let clss = ""
+  export let clss: string | undefined = undefined
 </script>
 
 <SubtleButton
   on:click={() => dispatch("click")}
-  options={{ extraClasses: clss + " flex items-center" }}
->
+  options={{ extraClasses: twMerge("flex items-center", clss) }}>
   <ChevronLeftIcon class="h-12 w-12" slot="image" />
   <slot slot="message" />
 </SubtleButton>
diff --git a/UI/Base/FromHtml.svelte b/UI/Base/FromHtml.svelte
index f00c437bfd..b03b2624eb 100644
--- a/UI/Base/FromHtml.svelte
+++ b/UI/Base/FromHtml.svelte
@@ -11,7 +11,7 @@
     }
   }
 
-  export let clss = ""
+  export let clss: string | undefined = undefined
 </script>
 
 {#if src !== undefined}
diff --git a/UI/Base/LoginButton.svelte b/UI/Base/LoginButton.svelte
index e57a9d51a0..504d487132 100644
--- a/UI/Base/LoginButton.svelte
+++ b/UI/Base/LoginButton.svelte
@@ -6,7 +6,7 @@
   import Svg from "../../Svg"
 
   export let osmConnection: OsmConnection
-  export let clss = ""
+  export let clss: string | undefined = undefined
 </script>
 
 <button class={clss} on:click={() => osmConnection.AttemptLogin()}>
diff --git a/UI/Base/MapControlButton.svelte b/UI/Base/MapControlButton.svelte
index 55fa3bd077..595363867f 100644
--- a/UI/Base/MapControlButton.svelte
+++ b/UI/Base/MapControlButton.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
   import { createEventDispatcher } from "svelte"
+  import { twJoin } from "tailwind-merge"
 
   /**
    * A round button with an icon and possible a small text, which hovers above the map
@@ -10,7 +11,6 @@
 
 <button
   on:click={(e) => dispatch("click", e)}
-  class={"pointer-events-auto m-0.5 h-fit w-fit rounded-full p-0.5 sm:p-1 md:m-1 " + cls}
->
+  class={twJoin("pointer-events-auto m-0.5 h-fit w-fit rounded-full p-0.5 sm:p-1 md:m-1", cls)}>
   <slot />
 </button>
diff --git a/UI/Base/NextButton.svelte b/UI/Base/NextButton.svelte
index fc1a67f368..e5714f4bee 100644
--- a/UI/Base/NextButton.svelte
+++ b/UI/Base/NextButton.svelte
@@ -6,16 +6,16 @@
   import SubtleButton from "./SubtleButton.svelte"
   import { ChevronRightIcon } from "@rgossiaux/svelte-heroicons/solid"
   import { createEventDispatcher } from "svelte"
+  import { twMerge } from "tailwind-merge"
 
   const dispatch = createEventDispatcher<{ click }>()
 
-  export let clss: string = ""
+  export let clss: string | undefined = undefined
 </script>
 
 <SubtleButton
   on:click={() => dispatch("click")}
-  options={{ extraClasses: clss + " flex items-center" }}
->
+  options={{ extraClasses: twMerge("flex items-center", clss) }}>
   <slot name="image" slot="image" />
   <div class="flex w-full items-center justify-between" slot="message">
     <slot />
diff --git a/UI/Base/SubtleButton.svelte b/UI/Base/SubtleButton.svelte
index 5528eac2c6..d6863b49c6 100644
--- a/UI/Base/SubtleButton.svelte
+++ b/UI/Base/SubtleButton.svelte
@@ -2,6 +2,7 @@
   import { createEventDispatcher } from "svelte"
   import BaseUIElement from "../BaseUIElement"
   import Img from "./Img"
+  import { twJoin, twMerge } from "tailwind-merge"
 
   export let imageUrl: string | BaseUIElement = undefined
   export let message: string | BaseUIElement = undefined
@@ -10,15 +11,14 @@
     extraClasses?: string
   } = {}
 
-  let imgClasses = "block justify-center shrink-0 mr-4 " + (options?.imgSize ?? "h-11 w-11")
+  let imgClasses = twJoin("block justify-center shrink-0 mr-4", options?.imgSize ?? "h-11 w-11")
   const dispatch = createEventDispatcher<{ click }>()
 </script>
 
 <button
-  class={(options.extraClasses ?? "") + " secondary no-image-background"}
   target={options?.newTab ? "_blank" : ""}
-  on:click={(e) => dispatch("click", e)}
->
+  class={twMerge(options.extraClasses, "secondary no-image-background")}
+  on:click={(e) => dispatch("click", e)}>
   <slot name="image">
     {#if imageUrl !== undefined}
       {#if typeof imageUrl === "string"}
diff --git a/UI/Base/SubtleLink.svelte b/UI/Base/SubtleLink.svelte
index aec1ef80c8..401c34a249 100644
--- a/UI/Base/SubtleLink.svelte
+++ b/UI/Base/SubtleLink.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
   import { onMount } from "svelte"
+  import { twJoin, twMerge } from "tailwind-merge"
   import BaseUIElement from "../BaseUIElement"
   import Img from "./Img"
 
@@ -8,11 +9,11 @@
   export let newTab = false
   export let options: {
     imgSize?: string
-    // extraClasses?: string
+    extraClasses?: string
   } = {}
 
   let imgElem: HTMLElement
-  let imgClasses = "block justify-center shrink-0 mr-4 " + (options?.imgSize ?? "h-11 w-11")
+  let imgClasses = twJoin("block justify-center shrink-0 mr-4", options?.imgSize ?? "h-11 w-11")
 
   onMount(() => {
     // Image
@@ -30,7 +31,7 @@
 </script>
 
 <a
-  class={(options.extraClasses ?? "") + " button text-ellipsis"}
+  class={twMerge(options.extraClasses, "button text-ellipsis")}
   {href}
   target={newTab ? "_blank" : undefined}
 >
diff --git a/UI/Base/TabbedGroup.svelte b/UI/Base/TabbedGroup.svelte
index 9d44d54148..4bfd908076 100644
--- a/UI/Base/TabbedGroup.svelte
+++ b/UI/Base/TabbedGroup.svelte
@@ -5,6 +5,7 @@
 
   import { Tab, TabGroup, TabList, TabPanel, TabPanels } from "@rgossiaux/svelte-headlessui"
   import { UIEventSource } from "../../Logic/UIEventSource"
+  import { twJoin } from "tailwind-merge"
 
   export let tab: UIEventSource<number>
   let tabElements: HTMLElement[] = []
@@ -29,35 +30,35 @@
     <div class="interactive sticky top-0 flex items-center justify-between">
       <TabList class="flex flex-wrap">
         {#if $$slots.title1}
-          <Tab class={({ selected }) => "tab " + (selected ? "primary" : "")}>
+          <Tab class={({ selected }) => twJoin("tab", selected && "primary")}>
             <div bind:this={tabElements[0]} class="flex">
               <slot name="title0">Tab 0</slot>
             </div>
           </Tab>
         {/if}
         {#if $$slots.title1}
-          <Tab class={({ selected }) => "tab " + (selected ? "primary" : "")}>
+          <Tab class={({ selected }) => twJoin("tab", selected && "primary")}>
             <div bind:this={tabElements[1]} class="flex">
               <slot name="title1" />
             </div>
           </Tab>
         {/if}
         {#if $$slots.title2}
-          <Tab class={({ selected }) => "tab " + (selected ? "primary" : "")}>
+          <Tab class={({ selected }) => twJoin("tab", selected && "primary")}>
             <div bind:this={tabElements[2]} class="flex">
               <slot name="title2" />
             </div>
           </Tab>
         {/if}
         {#if $$slots.title3}
-          <Tab class={({ selected }) => "tab " + (selected ? "primary" : "")}>
+          <Tab class={({ selected }) => twJoin("tab", selected && "primary")}>
             <div bind:this={tabElements[3]} class="flex">
               <slot name="title3" />
             </div>
           </Tab>
         {/if}
         {#if $$slots.title4}
-          <Tab class={({ selected }) => "tab " + (selected ? "primary" : "")}>
+          <Tab class={({ selected }) => twJoin("tab", selected && "primary")}>
             <div bind:this={tabElements[4]} class="flex">
               <slot name="title4" />
             </div>
diff --git a/UI/BigComponents/ThemeIntroPanel.svelte b/UI/BigComponents/ThemeIntroPanel.svelte
index a9420e5ce0..ef822f9412 100644
--- a/UI/BigComponents/ThemeIntroPanel.svelte
+++ b/UI/BigComponents/ThemeIntroPanel.svelte
@@ -10,6 +10,7 @@
   import If from "../Base/If.svelte"
   import { UIEventSource } from "../../Logic/UIEventSource"
   import { SearchIcon } from "@rgossiaux/svelte-heroicons/solid"
+  import { twJoin } from "tailwind-merge"
 
   /**
    * The theme introduction panel
@@ -78,9 +79,8 @@ loginStatus.SetClass("block mt-6 pt-2 md:border-t-2 border-dotted border-gray-40
       />
     </div>
     <button
-      class={"flex items-center justify-between gap-x-2 " + (searchEnabled ? "" : "disabled")}
-      on:click={() => triggerSearch.ping()}
-    >
+      class={twJoin("flex items-center justify-between gap-x-2", !searchEnabled && "disabled")}
+      on:click={() => triggerSearch.ping()}>
       <Tr t={Translations.t.general.search.searchShort} />
       <SearchIcon class="h-6 w-6" />
     </button>
diff --git a/UI/InputElement/Helpers/FloorSelector.svelte b/UI/InputElement/Helpers/FloorSelector.svelte
index 1b35c3dfdf..8e283ad4b3 100644
--- a/UI/InputElement/Helpers/FloorSelector.svelte
+++ b/UI/InputElement/Helpers/FloorSelector.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { twJoin } from "tailwind-merge"
   import { Store, Stores, UIEventSource } from "../../../Logic/UIEventSource"
 
   /**
@@ -106,8 +107,10 @@
     {#each $floors as floor, i}
       <button
         style={`height: ${HEIGHT}px; width: ${HEIGHT}px`}
-        class={"content-box m-0 flex items-center justify-center border-2 border-gray-300 " +
-          (i === (forceIndex ?? $index) ? "selected" : "")}
+        class={twJoin(
+          "content-box m-0 flex items-center justify-center border-2 border-gray-300",
+          i === (forceIndex ?? $index) && "selected"
+        )}
         on:click={() => {
           forceIndex = i
         }}
@@ -124,8 +127,7 @@
       draggable="false"
       on:mousedown={click}
       src="./assets/svg/elevator.svg"
-      style={" top: " + top + "px;"}
-    />
+      style={`top: ${top}px;`} />
   </div>
 </div>
 
diff --git a/UI/Popup/AddNewPoint/AddNewPoint.svelte b/UI/Popup/AddNewPoint/AddNewPoint.svelte
index 96e931932a..7b09c49b66 100644
--- a/UI/Popup/AddNewPoint/AddNewPoint.svelte
+++ b/UI/Popup/AddNewPoint/AddNewPoint.svelte
@@ -32,6 +32,7 @@
     import ToSvelte from "../../Base/ToSvelte.svelte"
     import Svg from "../../../Svg"
     import OpenBackgroundSelectorButton from "../../BigComponents/OpenBackgroundSelectorButton.svelte";
+    import { twJoin } from "tailwind-merge"
 
     export let coordinate: { lon: number; lat: number }
     export let state: SpecialVisualizationState
@@ -319,8 +320,8 @@
                 />
             </div>
 
-            <div class={(preciseInputIsTapped ? "" : "hidden") + " absolute top-4 flex justify-center w-full"}>
-                <NextButton on:click={confirm} clss="primary w-fit ">
+            <div class={twJoin(!preciseInputIsTapped && "hidden", "absolute top-4 flex justify-center w-full")}>
+                <NextButton on:click={confirm} clss="primary w-fit">
                     <div class="flex w-full justify-end gap-x-2">
                         <Tr t={Translations.t.general.add.confirmLocation}/>
                     </div>
diff --git a/UI/Popup/DeleteFlow/DeleteWizard.svelte b/UI/Popup/DeleteFlow/DeleteWizard.svelte
index f9553cd36b..461d7782c9 100644
--- a/UI/Popup/DeleteFlow/DeleteWizard.svelte
+++ b/UI/Popup/DeleteFlow/DeleteWizard.svelte
@@ -18,6 +18,7 @@
   import ChangeTagAction from "../../../Logic/Osm/Actions/ChangeTagAction"
   import Loading from "../../Base/Loading.svelte"
   import { DeleteFlowState } from "./DeleteFlowState"
+    import { twJoin } from "tailwind-merge"
 
   export let state: SpecialVisualizationState
   export let deleteConfig: DeleteConfig
@@ -111,11 +112,10 @@
         <button
           slot="save-button"
           on:click={onDelete}
-          class={(selectedTags === undefined ? "disabled" : "") + " primary flex bg-red-600"}
+          class={twJoin((selectedTags === undefined && "disabled"), "primary flex bg-red-600")}
         >
           <TrashIcon
-            class={"ml-1 mr-2 h-6 w-6 rounded-full p-1 " +
-              (selectedTags !== undefined ? "bg-red-600" : "")}
+            class={twJoin("ml-1 mr-2 h-6 w-6 rounded-full p-1", selectedTags !== undefined && "bg-red-600")}
           />
           <Tr t={t.delete} />
         </button>
diff --git a/UI/Popup/TagRendering/TagRenderingAnswer.svelte b/UI/Popup/TagRendering/TagRenderingAnswer.svelte
index 93561d2685..243413fafa 100644
--- a/UI/Popup/TagRendering/TagRenderingAnswer.svelte
+++ b/UI/Popup/TagRendering/TagRenderingAnswer.svelte
@@ -8,6 +8,7 @@
   import { UIEventSource } from "../../../Logic/UIEventSource"
   import { onDestroy } from "svelte"
   import LayerConfig from "../../../Models/ThemeConfig/LayerConfig"
+  import { twMerge } from "tailwind-merge"
 
   export let tags: UIEventSource<Record<string, string> | undefined>
   let _tags: Record<string, string>
@@ -17,7 +18,7 @@
   export let selectedElement: Feature
   export let layer: LayerConfig
   export let config: TagRenderingConfig
-  export let extraClasses: string = ""
+  export let extraClasses: string | undefined = undefined
 
   if (config === undefined) {
     throw "Config is undefined in tagRenderingAnswer"
@@ -28,12 +29,10 @@
       trs = Utils.NoNull(config?.GetRenderValues(_tags))
     })
   )
-  let classes = ""
-  $: classes = config?.classes?.join(" ") ?? ""
 </script>
 
 {#if config !== undefined && (config?.condition === undefined || config.condition.matchesProperties(_tags))}
-  <div class={"link-underline inline-block w-full " + classes + " " + extraClasses}>
+  <div class={twMerge("link-underline inline-block w-full", config?.classes, extraClasses)}>
     {#if trs.length === 1}
       <TagRenderingMapping mapping={trs[0]} {tags} {state} {selectedElement} {layer} />
     {/if}
diff --git a/UI/Popup/TagRendering/TagRenderingMapping.svelte b/UI/Popup/TagRendering/TagRenderingMapping.svelte
index 847df99477..cace921602 100644
--- a/UI/Popup/TagRendering/TagRenderingMapping.svelte
+++ b/UI/Popup/TagRendering/TagRenderingMapping.svelte
@@ -5,6 +5,7 @@
   import type { Feature } from "geojson"
   import { UIEventSource } from "../../../Logic/UIEventSource"
   import LayerConfig from "../../../Models/ThemeConfig/LayerConfig"
+  import { twJoin } from "tailwind-merge"
 
   export let selectedElement: Feature
   export let tags: UIEventSource<Record<string, string>>
@@ -23,12 +24,15 @@
       | "medium-height"
       | "large-height"
   }
-  let iconclass = "mapping-icon-" + mapping.iconClass
 </script>
 
 {#if mapping.icon !== undefined}
   <div class="inline-flex">
-    <img class={iconclass + " mr-1"} src={mapping.icon} />
+    <img
+      class={twJoin(`mapping-icon-${mapping.iconClass}`, "mr-1")}
+      src={mapping.icon}
+      aria-hidden="true"
+      alt="" />
     <SpecialTranslation t={mapping.then} {tags} {state} {layer} feature={selectedElement} />
   </div>
 {:else if mapping.then !== undefined}
diff --git a/UI/Popup/TagRendering/TagRenderingMappingInput.svelte b/UI/Popup/TagRendering/TagRenderingMappingInput.svelte
index c57044dbd9..cc2c71ef26 100644
--- a/UI/Popup/TagRendering/TagRenderingMappingInput.svelte
+++ b/UI/Popup/TagRendering/TagRenderingMappingInput.svelte
@@ -14,6 +14,7 @@
   import { TagsFilter } from "../../../Logic/Tags/TagsFilter"
   import { onDestroy } from "svelte"
   import TagRenderingMapping from "./TagRenderingMapping.svelte"
+  import { twJoin } from "tailwind-merge"
 
   export let selectedElement: Feature
   export let tags: UIEventSource<Record<string, string>>
@@ -82,7 +83,7 @@
 </script>
 
 {#if $matchesTerm && !$mappingIsHidden}
-  <label class={"flex " + (mappingIsSelected ? "checked" : "")}>
+  <label class={twJoin("flex", mappingIsSelected && "checked")}>
     <slot />
     <TagRenderingMapping {mapping} {tags} {state} {selectedElement} {layer} />
   </label>
diff --git a/UI/Popup/TagRendering/TagRenderingQuestion.svelte b/UI/Popup/TagRendering/TagRenderingQuestion.svelte
index 52dad91e2e..4ae48353ca 100644
--- a/UI/Popup/TagRendering/TagRenderingQuestion.svelte
+++ b/UI/Popup/TagRendering/TagRenderingQuestion.svelte
@@ -21,6 +21,7 @@
   import Constants from "../../../Models/Constants"
   import { Unit } from "../../../Models/Unit"
   import UserRelatedState from "../../../Logic/State/UserRelatedState"
+  import { twJoin } from "tailwind-merge"
 
   export let config: TagRenderingConfig
   export let tags: UIEventSource<Record<string, string>>
@@ -276,8 +277,7 @@
         <slot name="save-button" {selectedTags}>
           <button
             on:click={onSave}
-            class={(selectedTags === undefined ? "disabled" : "button-shadow") + " primary"}
-          >
+            class={twJoin(selectedTags === undefined ? "disabled" : "button-shadow", "primary")}>
             <Tr t={Translations.t.general.save} />
           </button>
         </slot>