Show radicle id if available

Signed-off-by: Alexis Sellier <self@cloudhead.io>

src/Profile.svelte

@@ -19,6 +19,7 @@
   import Projects from '@app/base/orgs/View/Projects.svelte';
   import { NotFoundError } from '@app/error';
   import NotFound from '@app/NotFound.svelte';
+  import RadicleUrn from '@app/RadicleUrn.svelte';
 
   export let config: Config;
   export let addressOrName: string;
@@ -220,6 +221,16 @@
     </header>
 
     <div class="fields">
+      <!-- ID -->
+      {#if profile.id}
+        <div class="label">ID</div>
+        <RadicleUrn urn={profile.id} />
+      {/if}
+      <!-- Seed Address -->
+      {#if profile.seed && profile.seed.valid}
+        <div class="label">Seed</div>
+        <SeedAddress seed={profile.seed} port={config.seed.link.port} />
+      {/if}
       <!-- Address -->
       <div class="label">Address</div>
       <div class="desktop"><Address {config} {profile} address={profile.address} /></div>
@@ -260,11 +271,6 @@
           <div class="desktop" />
         {/if}
       {/if}
-      <!-- Seed Address -->
-      {#if profile.seed && profile.seed.valid}
-        <div class="label">Seed</div>
-        <SeedAddress seed={profile.seed} port={config.seed.link.port} />
-      {/if}
       <!-- Org Name/Profile -->
       <div class="label">Profile</div>
       {#if profile.org}

src/RadicleUrn.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">
+  import { parseRadicleId, toClipboard } from "./utils";
+
+  export let urn: string;
+
+  let copied = false;
+
+  const copy = () => {
+    return () => toClipboard(urn).then(() => {
+      copied = true;
+      setTimeout(() => {
+        copied = false;
+      }, 3000);
+    });
+  };
+</script>
+
+<style>
+  .urn {
+    display: inline-flex;
+    font-size: 1rem;
+    line-height: 2rem;
+    color: var(--color-foreground-90);
+    vertical-align: middle;
+  }
+  .icon {
+    width: 1rem;
+    margin-right: 0.5rem;
+  }
+  .urn > * {
+    vertical-align: middle;
+  }
+</style>
+
+
+<div class="desktop">
+  <div class="urn">
+    <span class="icon">🌱</span>
+    <span class="faded">rad:git:</span>
+    <span>{parseRadicleId(urn)}</span>
+  </div>
+</div>
+<div>
+  <button class="tiny faded" disabled={copied} on:click={copy()}>
+    {#if copied}
+      Copy ✓
+    {:else}
+      Copy
+    {/if}
+  </button>
+</div>