Refactoring: move all code files into a src directory

src/UI/BigComponents/UserProfile.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+  import UserDetails, { OsmConnection } from "../../Logic/Osm/OsmConnection"
+  import { UIEventSource } from "../../Logic/UIEventSource"
+  import { PencilAltIcon, UserCircleIcon } from "@rgossiaux/svelte-heroicons/solid"
+  import { onDestroy } from "svelte"
+  import Showdown from "showdown"
+  import FromHtml from "../Base/FromHtml.svelte"
+  import Tr from "../Base/Tr.svelte"
+  import Translations from "../i18n/Translations.js"
+
+  /**
+   * This panel shows information about the logged-in user, showing account name, profile pick, description and an edit-button
+   */
+  export let osmConnection: OsmConnection
+  let userdetails: UIEventSource<UserDetails> = osmConnection.userDetails
+  let description: string
+  onDestroy(
+    userdetails.addCallbackAndRunD((userdetails) => {
+      description = new Showdown.Converter()
+        .makeHtml(userdetails.description)
+        ?.replace(/&gt;/g, ">")
+        ?.replace(/&lt;/g, "<")
+    })
+  )
+</script>
+
+<div class="link-underline m-1 flex rounded-md border border-dashed border-gray-600 p-1">
+  {#if $userdetails.img}
+    <img src={$userdetails.img} class="m-4 h-12 w-12 rounded-full" />
+  {:else}
+    <UserCircleIcon class="h-12 w-12" />
+  {/if}
+  <div class="flex flex-col">
+    <h3>{$userdetails.name}</h3>
+    {#if description}
+      <FromHtml src={description} />
+      <a
+        href={osmConnection.Backend() + "/profile/edit"}
+        target="_blank"
+        class="link-no-underline flex items-center self-end"
+      >
+        <PencilAltIcon slot="image" class="h-8 w-8 p-2" />
+        <Tr slot="message" t={Translations.t.userinfo.editDescription} />
+      </a>
+    {:else}
+      <Tr t={Translations.t.userinfo.noDescription} />
+      <a href={osmConnection.Backend() + "/profile/edit"} target="_blank" class="flex items-center">
+        <PencilAltIcon slot="image" class="h-8 w-8 p-2" />
+        <Tr slot="message" t={Translations.t.userinfo.noDescriptionCallToAction} />
+      </a>
+    {/if}
+  </div>
+</div>