Make IDs copyable by clicking anywhere in the body

src/components/Clipboard.svelte

@@ -6,11 +6,9 @@
 
   import { toClipboard } from "@app/lib/utils";
 
-  import Icon from "@app/components/Icon.svelte";
   import IconSmall from "@app/components/IconSmall.svelte";
 
   export let text: string;
-  export let small = false;
   export let tooltip: string | undefined = undefined;
 
   const dispatch = createEventDispatcher<{ copied: null }>();
@@ -31,18 +29,14 @@
 
 <style>
   .clipboard {
-    width: 2rem;
-    height: 2rem;
+    width: 1.5rem;
+    height: 1.5rem;
     cursor: pointer;
     display: inline-flex;
     justify-content: center;
     align-items: center;
     user-select: none;
   }
-  .small {
-    width: 1.5rem;
-    height: 1.5rem;
-  }
 </style>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
@@ -51,11 +45,6 @@
   tabindex="0"
   title={tooltip}
   class="clipboard"
-  class:small
   on:click|stopPropagation={copy}>
-  {#if small}
-    <IconSmall name={icon} />
-  {:else}
-    <Icon name={icon} />
-  {/if}
+  <IconSmall name={icon} />
 </span>

src/components/Command.svelte

@@ -66,7 +66,7 @@
     {#if showPrompt}${/if}
     {command}
     <div class="clipboard">
-      <Clipboard bind:this={clipboard} small text={command} />
+      <Clipboard bind:this={clipboard} text={command} />
     </div>
   </div>
 </div>

src/components/CopyableId.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+  import type { SvelteComponent } from "svelte";
+  import Clipboard from "@app/components/Clipboard.svelte";
+
+  export let id: string;
+  let clipboard: SvelteComponent;
+</script>
+
+<style>
+  .id {
+    cursor: pointer;
+    color: var(--color-fill-secondary);
+    overflow-wrap: anywhere;
+    display: flex;
+    align-items: center;
+    gap: 0.125rem;
+    width: fit-content;
+  }
+</style>
+
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<div
+  role="button"
+  tabindex="0"
+  on:click={() => {
+    clipboard.copy();
+  }}
+  class="id">
+  <span class="txt-overflow global-hash">
+    <slot>{id}</slot>
+  </span>
+  <Clipboard bind:this={clipboard} text={id} />
+</div>

src/components/NodeId.svelte

@@ -3,7 +3,7 @@
 
   import Avatar from "./Avatar.svelte";
   import HoverPopover from "./HoverPopover.svelte";
-  import Clipboard from "./Clipboard.svelte";
+  import CopyableId from "./CopyableId.svelte";
 
   export let nodeId: string;
   export let alias: string | undefined = undefined;
@@ -29,13 +29,6 @@
     height: 1.25rem;
     gap: 0.5rem;
   }
-  .node-id {
-    height: 2.5rem;
-    padding: 0 0.5rem 0 0.75rem;
-    display: flex;
-    align-items: center;
-    white-space: nowrap;
-  }
 </style>
 
 <HoverPopover
@@ -51,10 +44,9 @@
     {/if}
   </div>
 
-  <div slot="popover" class="node-id">
-    <span class="global-hash">{formatNodeId(nodeId)}</span>
-    <span style:color="var(--color-fill-secondary)">
-      <Clipboard small text={nodeId} />
-    </span>
+  <div style:padding="0.5rem 0.5rem 0.5rem 0.75rem" slot="popover">
+    <CopyableId id={nodeId}>
+      {formatNodeId(nodeId)}
+    </CopyableId>
   </div>
 </HoverPopover>

src/views/nodes/View.svelte

@@ -5,12 +5,12 @@
   import { isLocal, truncateId } from "@app/lib/utils";
   import { loadProjects } from "@app/views/nodes/router";
 
-  import Clipboard from "@app/components/Clipboard.svelte";
   import ErrorMessage from "@app/components/ErrorMessage.svelte";
   import Link from "@app/components/Link.svelte";
   import Loading from "@app/components/Loading.svelte";
   import ProjectCard from "@app/components/ProjectCard.svelte";
   import Button from "@app/components/Button.svelte";
+  import CopyableId from "@app/components/CopyableId.svelte";
 
   export let baseUrl: BaseUrl;
   export let nid: string;
@@ -74,11 +74,6 @@
     font-size: var(--font-size-x-large);
     font-weight: var(--font-weight-bold);
   }
-  .address {
-    color: var(--color-fill-secondary);
-    font-family: var(--font-family-monospace);
-    display: flex;
-  }
   .info {
     display: flex;
     justify-content: space-between;
@@ -86,6 +81,7 @@
   .version {
     color: var(--color-fill-gray);
     font-family: var(--font-family-monospace);
+    font-size: var(--font-size-small);
   }
   .projects {
     display: flex;
@@ -111,18 +107,19 @@
           {#each externalAddresses as address}
             <!-- If there are externalAddresses this is probably a remote node -->
             <!-- in that case, we show all the defined externalAddresses as a listing -->
-            <div class="address">
+            <CopyableId id={`${nid}@${address}`}>
               {truncateId(nid)}@{address}
-              <Clipboard small text={`${nid}@${address}`} />
-            </div>
+            </CopyableId>
           {:else}
             <!-- else this is probably a local node -->
             <!-- So we show only the nid -->
-            <div class="address layout-desktop">
-              {nid}<Clipboard small text={nid} />
+            <div class="layout-desktop">
+              <CopyableId id={nid} />
             </div>
-            <div class="address layout-mobile">
-              {truncateId(nid)}<Clipboard small text={nid} />
+            <div class="layout-mobile">
+              <CopyableId id={nid}>
+                {truncateId(nid)}
+              </CopyableId>
             </div>
           {/each}
         </div>

src/views/projects/Cob/Embeds.svelte

@@ -32,9 +32,7 @@
     {#each embeds as embed}
       <Badge variant="neutral">
         <span class="txt-overflow">{embed.name}</span>
-        <Clipboard
-          text={`![${embed.name}](${embed.content.substring(4)})`}
-          small />
+        <Clipboard text={`![${embed.name}](${embed.content.substring(4)})`} />
       </Badge>
     {:else}
       <div class="txt-missing">No attachments</div>

src/views/projects/Commit.svelte

@@ -4,10 +4,10 @@
   import { formatCommit } from "@app/lib/utils";
 
   import Changeset from "@app/views/projects/Changeset.svelte";
-  import Clipboard from "@app/components/Clipboard.svelte";
   import CommitAuthorship from "@app/views/projects/Commit/CommitAuthorship.svelte";
   import InlineMarkdown from "@app/components/InlineMarkdown.svelte";
   import Layout from "./Layout.svelte";
+  import CopyableId from "@app/components/CopyableId.svelte";
 
   export let baseUrl: BaseUrl;
   export let commit: Commit;
@@ -49,12 +49,12 @@
         <InlineMarkdown fontSize="medium" content={header.summary} />
       </div>
       <div class="layout-desktop-flex txt-monospace sha1">
-        <span>{header.id}</span>
-        <Clipboard small text={header.id} />
+        <CopyableId id={header.id} />
       </div>
       <div class="layout-mobile-flex txt-monospace sha1 txt-small">
-        {formatCommit(header.id)}
-        <Clipboard small text={header.id} />
+        <CopyableId id={header.id}>
+          {formatCommit(header.id)}
+        </CopyableId>
       </div>
     </div>
     <pre class="description txt-small">{header.description}</pre>

src/views/projects/Layout.svelte

@@ -8,12 +8,12 @@
   import { twemoji, isLocal } from "@app/lib/utils";
 
   import Button from "@app/components/Button.svelte";
-  import Clipboard from "@app/components/Clipboard.svelte";
   import CloneButton from "@app/views/projects/Header/CloneButton.svelte";
   import Link from "@app/components/Link.svelte";
 
   import Header from "./Header.svelte";
   import TrackButton from "./Header/TrackButton.svelte";
+  import CopyableId from "@app/components/CopyableId.svelte";
 
   export let activeTab: ActiveTab = undefined;
   export let baseUrl: BaseUrl;
@@ -45,23 +45,9 @@
   .project-name:hover {
     color: inherit;
   }
-  .id {
-    color: var(--color-fill-secondary);
-    overflow-wrap: anywhere;
-    display: flex;
-    justify-content: left;
-    align-items: center;
-    gap: 0.125rem;
-    margin: 1rem 0 3rem 0;
-  }
   .description :global(a) {
     border-bottom: 1px solid var(--color-foreground-contrast);
   }
-  .truncate {
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    overflow-x: hidden;
-  }
   .content {
     width: 100%;
     max-width: var(--content-max-width);
@@ -91,7 +77,7 @@
 
 <div class="header">
   <div class="title">
-    <span class="truncate">
+    <span class="txt-overflow">
       <Link
         route={{
           resource: "project.source",
@@ -131,9 +117,8 @@
     {@html render(project.description)}
   </div>
 
-  <div class="id">
-    <span class="truncate global-hash">{project.id}</span>
-    <Clipboard small text={project.id} />
+  <div style:margin-bottom="3rem">
+    <CopyableId id={project.id} />
   </div>
 
   <Header {project} {activeTab} {baseUrl} />