Studio: improvements after user test

src/UI/Studio/EditItemButton.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+  import { UIEventSource } from "../../Logic/UIEventSource";
+  import { OsmConnection } from "../../Logic/Osm/OsmConnection";
+  import Marker from "../Map/Marker.svelte";
+  import NextButton from "../Base/NextButton.svelte";
+  import { AllKnownLayouts } from "../../Customizations/AllKnownLayouts";
+  import { AllSharedLayers } from "../../Customizations/AllSharedLayers";
+  import { createEventDispatcher } from "svelte";
+
+  export let info: { id: string, owner: number };
+  export let category: "layers" | "themes";
+  export let osmConnection: OsmConnection;
+
+  let displayName = UIEventSource.FromPromise(osmConnection.getInformationAboutUser(info.owner)).mapD(response => response.display_name);
+
+  let selfId = osmConnection.userDetails.mapD(ud => ud.uid)
+  function fetchIconDescription(layerId): any {
+    if (category === "themes") {
+      return AllKnownLayouts.allKnownLayouts.get(layerId).icon;
+    }
+    return AllSharedLayers.getSharedLayersConfigs().get(layerId)?._layerIcon;
+  }
+
+  const dispatch = createEventDispatcher<{ layerSelected: string }>();
+
+</script>
+
+<NextButton clss="small" on:click={() => dispatch("layerSelected", info)}>
+  <div class="w-4 h-4 mr-1">
+    <Marker icons={fetchIconDescription(info.id)} />
+  </div>
+  <b class="px-1">  {info.id}</b>
+  {#if info.owner && info.owner !== $selfId}
+    (made by {$displayName ?? info.owner})
+  {/if}
+</NextButton>