CrateSidebar: Show Package URL in "Metadata" section

Author: Turbo87

app/components/crate-sidebar.hbs

@@ -6,6 +6,18 @@
   <div local-class="metadata">
     <h2 local-class="heading">Metadata</h2>
 
+    <div local-class="purl" data-test-purl>
+      {{svg-jar "link"}}
+      <CopyButton
+        @copyText={{@version.purl}}
+        class="button-reset"
+        local-class="purl-copy-button"
+      >
+        <span local-class="purl-text">{{@version.purl}}</span>
+        <Tooltip local-class="purl-tooltip"><strong>Package URL:</strong> {{@version.purl}} <small>(click to copy)</small></Tooltip>
+      </CopyButton>
+    </div>
+
     <time
       datetime={{date-format-iso @version.created_at}}
       local-class="date"

app/components/crate-sidebar.js

@@ -1,3 +1,4 @@
+import { action } from '@ember/object';
 import { service } from '@ember/service';
 import Component from '@glimmer/component';
 
@@ -6,6 +7,7 @@ import { didCancel } from 'ember-concurrency';
 import { simplifyUrl } from './crate-sidebar/link';
 
 export default class CrateSidebar extends Component {
+  @service notifications;
   @service playground;
   @service sentry;
 
@@ -39,4 +41,14 @@ export default class CrateSidebar extends Component {
       }
     });
   }
+
+  @action
+  async copyToClipboard(text) {
+    try {
+      await navigator.clipboard.writeText(text);
+      this.notifications.success('Copied to clipboard!');
+    } catch {
+      this.notifications.error('Copy to clipboard failed!');
+    }
+  }
 }

app/components/crate-sidebar.module.css

@@ -22,7 +22,8 @@
 .msrv,
 .edition,
 .license,
-.bytes {
+.bytes,
+.purl {
     display: flex;
     align-items: center;
 
@@ -52,6 +53,40 @@
     font-variant-numeric: tabular-nums;
 }
 
+.purl {
+    align-items: flex-start;
+}
+
+.purl-copy-button {
+    text-align: left;
+    width: 100%;
+    min-width: 0;
+    cursor: pointer;
+
+    &:focus {
+        outline: 2px solid var(--yellow500);
+        outline-offset: 1px;
+        border-radius: var(--space-3xs);
+    }
+}
+
+.purl-text {
+    word-break: break-all;
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    display: block;
+}
+
+.purl-tooltip {
+    word-break: break-all;
+
+    > small {
+        word-break: normal;
+    }
+}
+
 .links {
     > * + * {
         margin-top: var(--space-m);