From 78741bed0592079b473828db8b1ef338f765f20b Mon Sep 17 00:00:00 2001
From: DanConwayDev <DanConwayDev@protonmail.com>
Date: Tue, 12 Mar 2024 12:35:59 +0000
Subject: [PATCH] feat(repo-details): improve copy to clipboard UI

* add icon and hover background and pointer
* rename copied ~> copied to clipboard
---
 src/lib/components/icons.ts                |  5 +++++
 src/lib/components/repo/RepoDetails.svelte | 20 +++++++++++++++++---
 2 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/src/lib/components/icons.ts b/src/lib/components/icons.ts
index 65dd727..4881519 100644
--- a/src/lib/components/icons.ts
+++ b/src/lib/components/icons.ts
@@ -5,4 +5,9 @@ export const icons_misc = {
   chevron_up: [
     'M6 4c-.2 0-.4.1-.5.2L2.2 7.5c-.3.3-.3.8 0 1.1c.3.3.8.3 1.1 0L6 5.9l2.7 2.7c.3.3.8.3 1.1 0c.3-.3.3-.8 0-1.1L6.6 4.3C6.4 4.1 6.2 4 6 4',
   ],
+  // https://icon-sets.iconify.design/octicon/copy-16/
+  copy: [
+    'M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 0 1 0 1.5h-1.5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-1.5a.75.75 0 0 1 1.5 0v1.5A1.75 1.75 0 0 1 9.25 16h-7.5A1.75 1.75 0 0 1 0 14.25Z',
+    'M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0 1 14.25 11h-7.5A1.75 1.75 0 0 1 5 9.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z',
+  ],
 }
diff --git a/src/lib/components/repo/RepoDetails.svelte b/src/lib/components/repo/RepoDetails.svelte
index 323b45b..1ffeee7 100644
--- a/src/lib/components/repo/RepoDetails.svelte
+++ b/src/lib/components/repo/RepoDetails.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
   import UserHeader from '$lib/components/users/UserHeader.svelte'
+  import { icons_misc } from '../icons'
   import { event_defaults } from './type'
 
   export let {
@@ -181,11 +182,24 @@
           }, 2000)
         } catch {}
       }}
+      class="group -m-3 mt-3 cursor-pointer rounded-md p-3 hover:bg-base-300"
     >
-      <h4>
+      <h4 class="mt-0 pt-0">
         naddr
-        {#if naddr_copied}<span class="text-success opacity-50">
-            (copied)</span
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 16 16"
+          class="ml-1 inline h-4 w-4 flex-none fill-base-content opacity-50 group-hover:opacity-100"
+          class:fill-base-content={!naddr_copied}
+          class:fill-success={naddr_copied}
+        >
+          {#each icons_misc.copy as d}
+            <path {d} />
+          {/each}
+        </svg>
+
+        {#if naddr_copied}<span class="text-sm text-success opacity-50">
+            (copied to clipboard)</span
           >{/if}
       </h4>
       <p class="my-2 break-words text-xs">{naddr}</p>