From 0d6bef358ecfc9703ebd732e22eaf5ef867a9c08 Mon Sep 17 00:00:00 2001
From: DanConwayDev <DanConwayDev@protonmail.com>
Date: Mon, 22 Apr 2024 13:45:53 +0100
Subject: [PATCH] feat(ProposalPage): add share button

to copy nostr address, nump or raw event id to clipboard.

fulfills:
http://gitworkshop.dev/repo/gitworkshop/issue/
5a3341dd50779f8a7d79ee938c66498332d28a87096cf3a4e2f729e3c2423549
---
 src/lib/components/CopyField.svelte           | 47 ++++++++++++++++++
 src/lib/components/events/EventWrapper.svelte | 49 +++++++++++++++++++
 2 files changed, 96 insertions(+)
 create mode 100644 src/lib/components/CopyField.svelte

diff --git a/src/lib/components/CopyField.svelte b/src/lib/components/CopyField.svelte
new file mode 100644
index 0000000..efb4f94
--- /dev/null
+++ b/src/lib/components/CopyField.svelte
@@ -0,0 +1,47 @@
+<script lang="ts">
+  import { icons_misc } from './icons'
+
+  export let label: string = ''
+  export let content: string = ''
+  export let border_color = 'primary'
+  let copied = false
+</script>
+
+<!-- eslint-disable-next-line svelte/valid-compile -->
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<div
+  class="group mt-3 cursor-pointer"
+  on:click={async () => {
+    try {
+      await navigator.clipboard.writeText(content)
+      copied = true
+      setTimeout(() => {
+        copied = false
+      }, 2000)
+    } catch {}
+  }}
+>
+  {label}
+  {#if copied}<span class="text-sm text-success opacity-50">
+      (copied to clipboard)</span
+    >{/if}
+  <div
+    class="items mt-1 flex w-full items-center rounded-lg border border-{border_color} p-3 opacity-50"
+    class:text-success={copied}
+  >
+    <div class="flex-auto truncate text-sm">
+      {content}
+    </div>
+    <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:opacity-100={copied}
+      class:fill-success={copied}
+    >
+      {#each icons_misc.copy as d}
+        <path {d} />
+      {/each}
+    </svg>
+  </div>
+</div>
diff --git a/src/lib/components/events/EventWrapper.svelte b/src/lib/components/events/EventWrapper.svelte
index 5281f31..cc79146 100644
--- a/src/lib/components/events/EventWrapper.svelte
+++ b/src/lib/components/events/EventWrapper.svelte
@@ -6,6 +6,7 @@
   import ComposeReply from '$lib/wrappers/ComposeReply.svelte'
   import { logged_in_user } from '$lib/stores/users'
   import type { NDKEvent } from '@nostr-dev-kit/ndk'
+  import CopyField from '../CopyField.svelte'
 
   export let type: 'proposal' | 'issue' = 'proposal'
   export let author: User = { ...user_defaults }
@@ -13,6 +14,7 @@
   export let event: NDKEvent
   let show_compose = false
   let show_raw_json_modal = false
+  let show_share_modal = false
   let created_at_ago = ''
   $: created_at_ago = created_at ? dayjs(created_at * 1000).fromNow() : ''
 
@@ -62,6 +64,53 @@
             </div>
           </div>
         {/if}
+        <div class="tooltip align-middle" data-tip="share">
+          <button
+            on:click={() => {
+              show_share_modal = true
+            }}
+            class="btn btn-xs text-neutral-content"
+          >
+            <!-- https://icon-sets.iconify.design/ph/share-network-bold/ -->
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="16"
+              height="16"
+              viewBox="0 0 256 256"
+              ><path
+                fill="currentColor"
+                d="M176 156a43.78 43.78 0 0 0-29.09 11l-40.81-26.2a44.07 44.07 0 0 0 0-25.6L146.91 89a43.83 43.83 0 1 0-13-20.17L93.09 95a44 44 0 1 0 0 65.94l40.81 26.26A44 44 0 1 0 176 156m0-120a20 20 0 1 1-20 20a20 20 0 0 1 20-20M64 148a20 20 0 1 1 20-20a20 20 0 0 1-20 20m112 72a20 20 0 1 1 20-20a20 20 0 0 1-20 20"
+              /></svg
+            ></button
+          >
+        </div>
+        {#if show_share_modal}
+          <div class="modal" class:modal-open={show_share_modal}>
+            <div class="modal-box max-w-lg text-wrap">
+              <div class="prose"><h3>Share</h3></div>
+              <CopyField
+                label="nostr address"
+                content={`nostr:${event.encode()}`}
+              />
+              <CopyField
+                label="njump"
+                content={`https://njump.me/${event.encode()}`}
+                border_color="secondary"
+              />
+              <CopyField
+                label="raw event id"
+                content={event.id}
+                border_color="neutral-content"
+              />
+              <div class="modal-action">
+                <button
+                  class="btn btn-sm"
+                  on:click={() => (show_share_modal = false)}>Close</button
+                >
+              </div>
+            </div>
+          </div>
+        {/if}
       {/if}
       {#if !show_compose && $logged_in_user}
         <div class="tooltip align-middle" data-tip="reply">