179f22c Make IDs copyable by clicking anywhere in the body — radicle-explorer

modified 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>

modified 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>

added 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>

modified 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>

modified 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>

modified 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>

modified 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>

modified 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} />