add more actions to note

package.json

@@ -18,12 +18,16 @@
   },
   "dependencies": {
     "@headlessui/react": "^1.7.16",
+    "@noble/ciphers": "^0.2.0",
+    "@noble/curves": "^1.1.0",
+    "@noble/hashes": "^1.3.1",
     "@nostr-dev-kit/ndk": "^0.8.1",
     "@nostr-fetch/adapter-ndk": "^0.11.0",
     "@radix-ui/react-collapsible": "^1.0.3",
     "@radix-ui/react-dialog": "^1.0.4",
     "@radix-ui/react-popover": "^1.0.6",
     "@radix-ui/react-tooltip": "^1.0.6",
+    "@scure/base": "^1.1.1",
     "@tanstack/react-query": "^4.32.1",
     "@tanstack/react-query-devtools": "^4.32.1",
     "@tanstack/react-virtual": "3.0.0-beta.54",

pnpm-lock.yaml

@@ -4,6 +4,15 @@ dependencies:
   '@headlessui/react':
     specifier: ^1.7.16
     version: 1.7.16(react-dom@18.2.0)(react@18.2.0)
+  '@noble/ciphers':
+    specifier: ^0.2.0
+    version: 0.2.0
+  '@noble/curves':
+    specifier: ^1.1.0
+    version: 1.1.0
+  '@noble/hashes':
+    specifier: ^1.3.1
+    version: 1.3.1
   '@nostr-dev-kit/ndk':
     specifier: ^0.8.1
     version: 0.8.1(typescript@4.9.5)
@@ -22,6 +31,9 @@ dependencies:
   '@radix-ui/react-tooltip':
     specifier: ^1.0.6
     version: 1.0.6(@types/react-dom@18.2.7)(@types/react@18.2.18)(react-dom@18.2.0)(react@18.2.0)
+  '@scure/base':
+    specifier: ^1.1.1
+    version: 1.1.1
   '@tanstack/react-query':
     specifier: ^4.32.1
     version: 4.32.1(react-dom@18.2.0)(react@18.2.0)
@@ -1097,6 +1109,10 @@ packages:
       '@jridgewell/resolve-uri': 3.1.0
       '@jridgewell/sourcemap-codec': 1.4.14
 
+  /@noble/ciphers@0.2.0:
+    resolution: {integrity: sha512-6YBxJDAapHSdd3bLDv6x2wRPwq4QFMUaB3HvljNBUTThDd12eSm7/3F+2lnfzx2jvM+S6Nsy0jEt9QbPqSwqRw==}
+    dev: false
+
   /@noble/curves@1.1.0:
     resolution: {integrity: sha512-091oBExgENk/kGj3AZmtBDMpxQPDtxQABR2B9lb1JbVTs6ytdzZNwvhxQ4MWasRNEzlbEH8jCWFCwhF/Obj5AA==}
     dependencies:

src/libs/nip44.ts

@@ -0,0 +1,44 @@
+// source: https://github.com/nbd-wtf/nostr-tools/blob/b1fc8ab401b8074f53e6a05a1a6a13422fb01b2d/nip44.ts
+import { xchacha20 } from '@noble/ciphers/chacha';
+import { secp256k1 } from '@noble/curves/secp256k1';
+import { sha256 } from '@noble/hashes/sha256';
+import { randomBytes } from '@noble/hashes/utils';
+import { base64 } from '@scure/base';
+
+export function getConversationKey(privkeyA: string, pubkeyB: string) {
+  const key = secp256k1.getSharedSecret(privkeyA, '02' + pubkeyB);
+  return sha256(key.slice(1, 33));
+}
+
+export function nip44Encrypt(
+  privkey: string,
+  pubkey: string,
+  text: string,
+  ver = 1
+): string {
+  if (ver !== 1) throw new Error('NIP44: unknown encryption version');
+
+  const key = getConversationKey(privkey, pubkey);
+  const nonce = randomBytes(24);
+  const plaintext = new TextEncoder().encode(text);
+  const ciphertext = xchacha20(key, nonce, plaintext, plaintext);
+  const ctb64 = base64.encode(ciphertext);
+  const nonceb64 = base64.encode(nonce);
+
+  return JSON.stringify({ ciphertext: ctb64, nonce: nonceb64, v: 1 });
+}
+
+export function nip44Decrypt(privkey: string, pubkey: string, data: string): string {
+  const dt = JSON.parse(data);
+  if (dt.v !== 1) throw new Error('NIP44: unknown encryption version');
+
+  let { ciphertext, nonce } = dt;
+  ciphertext = base64.decode(ciphertext);
+  nonce = base64.decode(nonce);
+
+  const key = getConversationKey(privkey, pubkey);
+  const plaintext = xchacha20(key, nonce, ciphertext, ciphertext);
+  const text = new TextDecoder('utf-8').decode(plaintext);
+
+  return text;
+}

src/shared/icons/horizontalDots.tsx

@@ -0,0 +1,28 @@
+import { SVGProps } from 'react';
+
+export function HorizontalDotsIcon(
+  props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>
+) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      fill="none"
+      viewBox="0 0 24 24"
+      {...props}
+    >
+      <path
+        fill="currentColor"
+        d="M12 13a1 1 0 100-2 1 1 0 000 2zM20.25 13a1 1 0 100-2 1 1 0 000 2zM3.75 13a1 1 0 100-2 1 1 0 000 2z"
+      />
+      <path
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="1.5"
+        d="M12 13a1 1 0 100-2 1 1 0 000 2zM20.25 13a1 1 0 100-2 1 1 0 000 2zM3.75 13a1 1 0 100-2 1 1 0 000 2z"
+      />
+    </svg>
+  );
+}

src/shared/icons/index.tsx

@@ -47,4 +47,5 @@ export * from './reaction';
 export * from './thread';
 export * from './strangers';
 export * from './download';
+export * from './horizontalDots';
 // @endindex

src/shared/notes/actions.tsx

@@ -1,6 +1,7 @@
 import * as Tooltip from '@radix-ui/react-tooltip';
 
 import { ThreadIcon } from '@shared/icons';
+import { MoreActions } from '@shared/notes/actions/more';
 import { NoteReaction } from '@shared/notes/actions/reaction';
 import { NoteReply } from '@shared/notes/actions/reply';
 import { NoteRepost } from '@shared/notes/actions/repost';
@@ -62,6 +63,7 @@ export function NoteActions({
             </Tooltip.Root>
           </>
         )}
+        <MoreActions id={id} pubkey={pubkey} />
       </div>
     </Tooltip.Provider>
   );

src/shared/notes/actions/more.tsx

@@ -0,0 +1,76 @@
+import * as Popover from '@radix-ui/react-popover';
+import * as Tooltip from '@radix-ui/react-tooltip';
+import { writeText } from '@tauri-apps/plugin-clipboard-manager';
+import { nip19 } from 'nostr-tools';
+import { EventPointer } from 'nostr-tools/lib/nip19';
+import { Link } from 'react-router-dom';
+
+import { HorizontalDotsIcon } from '@shared/icons';
+
+export function MoreActions({ id, pubkey }: { id: string; pubkey: string }) {
+  const nevent = nip19.neventEncode(id as unknown as EventPointer);
+
+  const copyID = async () => {
+    await writeText(nevent);
+  };
+
+  const copyLink = async () => {
+    await writeText('https://nostr.com/' + nevent);
+  };
+
+  return (
+    <Popover.Root>
+      <Tooltip.Root delayDuration={150}>
+        <Tooltip.Trigger asChild>
+          <Popover.Trigger asChild>
+            <button
+              type="button"
+              className="group ml-auto inline-flex h-7 w-7 items-center justify-center"
+            >
+              <HorizontalDotsIcon className="h-5 w-5 text-white group-hover:text-fuchsia-400" />
+            </button>
+          </Popover.Trigger>
+        </Tooltip.Trigger>
+        <Tooltip.Portal>
+          <Tooltip.Content className="-left-10 select-none rounded-md bg-black px-3.5 py-1.5 text-sm leading-none text-white will-change-[transform,opacity] data-[state=delayed-open]:data-[side=bottom]:animate-slideUpAndFade data-[state=delayed-open]:data-[side=left]:animate-slideRightAndFade data-[state=delayed-open]:data-[side=right]:animate-slideLeftAndFade data-[state=delayed-open]:data-[side=top]:animate-slideDownAndFade">
+            More
+            <Tooltip.Arrow className="fill-black" />
+          </Tooltip.Content>
+        </Tooltip.Portal>
+      </Tooltip.Root>
+      <Popover.Portal>
+        <Popover.Content className="w-[200px] overflow-hidden rounded-md bg-white/10 backdrop-blur-xl focus:outline-none">
+          <div className="flex flex-col p-2">
+            <button
+              type="button"
+              className="inline-flex h-10 items-center rounded-md px-2 text-sm font-medium text-white hover:bg-white/10"
+            >
+              Open as new screen
+            </button>
+            <button
+              type="button"
+              onClick={() => copyLink()}
+              className="inline-flex h-10 items-center rounded-md px-2 text-sm font-medium text-white hover:bg-white/10"
+            >
+              Copy shareable link
+            </button>
+            <button
+              type="button"
+              onClick={() => copyID()}
+              className="inline-flex h-10 items-center rounded-md px-2 text-sm font-medium text-white hover:bg-white/10"
+            >
+              Copy ID
+            </button>
+            <Link
+              type="button"
+              to={`/app/users/${pubkey}`}
+              className="inline-flex h-10 items-center rounded-md px-2 text-sm font-medium text-white hover:bg-white/10"
+            >
+              View profile
+            </Link>
+          </div>
+        </Popover.Content>
+      </Popover.Portal>
+    </Popover.Root>
+  );
+}

src/shared/notes/actions/reaction.tsx

@@ -1,5 +1,5 @@
 import * as Popover from '@radix-ui/react-popover';
-import { useCallback, useEffect, useState } from 'react';
+import { useState } from 'react';
 
 import { ReactionIcon } from '@shared/icons';
 
@@ -8,23 +8,23 @@ import { usePublish } from '@utils/hooks/usePublish';
 const REACTIONS = [
   {
     content: '👏',
-    img: 'https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Hand%20gestures/Clapping%20Hands.png',
+    img: '/public/clapping_hands.png',
   },
   {
     content: '🤪',
-    img: 'https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Smilies/Face%20with%20Tongue.png',
+    img: '/public/face_with_tongue.png',
   },
   {
     content: '😮',
-    img: 'https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Smilies/Face%20with%20Open%20Mouth.png',
+    img: '/public/face_with_open_mouth.png',
   },
   {
     content: '😢',
-    img: 'https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Smilies/Crying%20Face.png',
+    img: '/public/crying_face.png',
   },
   {
     content: '🤡',
-    img: 'https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Smilies/Clown%20Face.png',
+    img: '/public/clown_face.png',
   },
 ];
 
@@ -83,7 +83,7 @@ export function NoteReaction({ id, pubkey }: { id: string; pubkey: string }) {
               className="inline-flex h-8 w-8 items-center justify-center rounded hover:bg-white/10"
             >
               <img
-                src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Hand%20gestures/Clapping%20Hands.png"
+                src="/public/clapping_hands.png"
                 alt="Clapping Hands"
                 className="h-6 w-6"
               />
@@ -94,7 +94,7 @@ export function NoteReaction({ id, pubkey }: { id: string; pubkey: string }) {
               className="inline-flex h-7 w-7 items-center justify-center rounded hover:bg-white/10"
             >
               <img
-                src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Smilies/Face%20with%20Tongue.png"
+                src="/public/face_with_tongue.png"
                 alt="Face with Tongue"
                 className="h-6 w-6"
               />
@@ -105,7 +105,7 @@ export function NoteReaction({ id, pubkey }: { id: string; pubkey: string }) {
               className="inline-flex h-7 w-7 items-center justify-center rounded hover:bg-white/10"
             >
               <img
-                src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Smilies/Face%20with%20Open%20Mouth.png"
+                src="/public/face_with_open_mouth.png"
                 alt="Face with Open Mouth"
                 className="h-6 w-6"
               />
@@ -115,22 +115,14 @@ export function NoteReaction({ id, pubkey }: { id: string; pubkey: string }) {
               onClick={() => react('😢')}
               className="inline-flex h-7 w-7 items-center justify-center rounded hover:bg-white/10"
             >
-              <img
-                src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Smilies/Crying%20Face.png"
-                alt="Crying Face"
-                className="h-6 w-6"
-              />
+              <img src="/public/crying_face.png" alt="Crying Face" className="h-6 w-6" />
             </button>
             <button
               type="button"
               onClick={() => react('🤡')}
               className="inline-flex h-7 w-7 items-center justify-center rounded hover:bg-white/10"
             >
-              <img
-                src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Smilies/Clown%20Face.png"
-                alt="Clown Face"
-                className="h-6 w-6"
-              />
+              <img src="/public/clown_face.png" alt="Clown Face" className="h-6 w-6" />
             </button>
           </div>
           <Popover.Arrow className="fill-black" />