small copy button for nsec

Author: arcbtc

src/routes/settings/+page.svelte

@@ -24,6 +24,7 @@
 
   let newRelay = 'wss://';
   let copiedPublicKey = false;
+  let copiedPrivateKey = false;
   let connectionName = 'Connect another Nostr app';
   let connections: Array<PomegranateProfile & { bunker: string }> = [];
   let connectionError = '';
@@ -78,6 +79,21 @@
     setTimeout(() => (copiedPublicKey = false), 1400);
   }
 
+  async function copyPrivateKey() {
+    if ($session?.mode !== 'private-key' || !$session.secret) return;
+    const nsec = nsecFromHex($session.secret);
+    if (!nsec) return;
+    await navigator.clipboard.writeText(nsec);
+    copiedPrivateKey = true;
+    setTimeout(() => (copiedPrivateKey = false), 1400);
+  }
+
+  function nsecFromHex(hex: string) {
+    if (!/^[0-9a-f]{64}$/i.test(hex)) return '';
+    const bytes = new Uint8Array(hex.match(/.{1,2}/g)?.map((byte) => parseInt(byte, 16)) ?? []);
+    return nip19.nsecEncode(bytes);
+  }
+
   async function refreshConnections() {
     connectionError = '';
     loadingConnections = true;
@@ -182,7 +198,14 @@
       <div class="setting-grid">
         <div class="account-field">
           <span>Signed in with</span>
-          <strong>{sessionLabel($session.mode)}</strong>
+          <span class="session-label-row">
+            <strong>{sessionLabel($session.mode)}</strong>
+            {#if $session.mode === 'private-key' && $session.secret}
+              <button class="icon-button small local-key-copy" on:click={copyPrivateKey} aria-label="Copy private key">
+                {#if copiedPrivateKey}<Check size={15} />{:else}<Copy size={15} />{/if}
+              </button>
+            {/if}
+          </span>
         </div>
         <div class="account-field">
           <span>Public key</span>

src/styles.css

@@ -2722,6 +2722,19 @@ label span, label strong { color: var(--text); }
   color: var(--text);
   overflow-wrap: anywhere;
 }
+.session-label-row {
+  min-width: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 7px;
+}
+.local-key-copy {
+  color: var(--muted);
+}
+.local-key-copy:hover {
+  color: var(--accent);
+}
 .public-key-copy {
   max-width: 100%;
   min-height: 0;