implement copy-to-clipboard button component

interim-server/templates/workspaces_single/service_credentials.html

@@ -1,5 +1,9 @@
 {% extends "base.html" %}
 
+{% block head_extras %}
+<script type="module" src="{{ settings.root_path }}/js_dist/copy-source.webc.mjs"></script>
+{% endblock %}
+
 {% block main %}
 <div class="page-grid">
   <div class="page-grid__toolbar">
@@ -39,10 +43,11 @@
         <tr>
           <td>
             <copy-source copy-data="{{ cred.conn_string.expose_secret() }}">
-              <slot><code class="code">{{ cred.conn_string_redacted }}</code></slot>
-              <slot name="fallback">
-                <code class="code">{{ cred.conn_string.expose_secret() }}</code>
-              </slot>
+              <span aria-label="Copy postgresql URL" title="Copy URL">
+                <code class="phono-code">{{ cred.conn_string_redacted }}</code>
+                <i class="ti ti-clipboard"></i>
+              </span>
+              <code class="phono-code" slot="fallback">{{ cred.conn_string.expose_secret() }}</code>
             </copy-source>
           </td>
           <td>

svelte/src/copy-source.webc.svelte

@@ -0,0 +1,33 @@
+<svelte:options
+  customElement={{
+    props: { copy_data: { attribute: "copy-data" } },
+    tag: "copy-source",
+  }}
+/>
+
+<script lang="ts">
+  type Props = {
+    copy_data?: string;
+  };
+
+  let { copy_data }: Props = $props();
+</script>
+
+<button
+  class="click-target"
+  onclick={() => {
+    navigator.clipboard.writeText(copy_data);
+  }}
+  type="button"
+>
+  <slot></slot>
+</button>
+
+<style>
+  .click-target {
+    appearance: none;
+    background: none;
+    border: none;
+    cursor: pointer;
+  }
+</style>