From 4db147ddf332a310c29e7374839c2ed15b3bb16d Mon Sep 17 00:00:00 2001
From: Gigi <dergigi@pm.me>
Date: Thu, 2 Oct 2025 11:02:43 +0200
Subject: [PATCH] feat(ui): add copy-to-clipboard icons for event id and author
 pubkey

---
 src/components/BookmarkItem.tsx | 22 +++++++++++++++++++---
 1 file changed, 19 insertions(+), 3 deletions(-)

diff --git a/src/components/BookmarkItem.tsx b/src/components/BookmarkItem.tsx
index 6b47fc04..0b46561c 100644
--- a/src/components/BookmarkItem.tsx
+++ b/src/components/BookmarkItem.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faLock, faGlobe } from '@fortawesome/free-solid-svg-icons'
+import { faLock, faGlobe, faCopy } from '@fortawesome/free-solid-svg-icons'
 import { IndividualBookmark } from '../types/bookmarks'
 import { formatDate, renderParsedContent } from '../utils/bookmarkUtils'
 
@@ -10,6 +10,12 @@ interface BookmarkItemProps {
 }
 
 export const BookmarkItem: React.FC<BookmarkItemProps> = ({ bookmark, index }) => {
+  const copy = async (text: string) => {
+    try { await navigator.clipboard.writeText(text) } catch {}
+  }
+
+  const short = (v: string) => `${v.slice(0, 8)}...${v.slice(-8)}`
+
   return (
     <div key={`${bookmark.id}-${index}`} className={`individual-bookmark ${bookmark.isPrivate ? 'private-bookmark' : ''}`}>
       <div className="bookmark-header">
@@ -17,7 +23,12 @@ export const BookmarkItem: React.FC<BookmarkItemProps> = ({ bookmark, index }) =
           <FontAwesomeIcon icon={bookmark.isPrivate ? faLock : faGlobe} className={`bookmark-visibility ${bookmark.isPrivate ? 'private' : 'public'}`} />
           <span className="bookmark-type-label">{bookmark.type}</span>
         </span>
-        <span className="bookmark-id">{bookmark.id.slice(0, 8)}...{bookmark.id.slice(-8)}</span>
+        <span className="bookmark-id">
+          {short(bookmark.id)}
+          <button className="copy-btn" onClick={() => copy(bookmark.id)} title="Copy event id">
+            <FontAwesomeIcon icon={faCopy} />
+          </button>
+        </span>
         <span className="bookmark-date">{formatDate(bookmark.created_at)}</span>
       </div>
       
@@ -33,7 +44,12 @@ export const BookmarkItem: React.FC<BookmarkItemProps> = ({ bookmark, index }) =
       
       <div className="bookmark-meta">
         <span>Kind: {bookmark.kind}</span>
-        <span>Author: {bookmark.pubkey.slice(0, 8)}...{bookmark.pubkey.slice(-8)}</span>
+        <span>
+          Author: {short(bookmark.pubkey)}
+          <button className="copy-btn" onClick={() => copy(bookmark.pubkey)} title="Copy author pubkey">
+            <FontAwesomeIcon icon={faCopy} />
+          </button>
+        </span>
       </div>
     </div>
   )