mirror of
https://github.com/luminous-devs/lume.git
synced 2024-09-18 11:13:30 +00:00
add more actions to note
This commit is contained in:
parent
ac50cd1373
commit
4c7826bbb3
@ -18,12 +18,16 @@
|
|||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@headlessui/react": "^1.7.16",
|
"@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-dev-kit/ndk": "^0.8.1",
|
||||||
"@nostr-fetch/adapter-ndk": "^0.11.0",
|
"@nostr-fetch/adapter-ndk": "^0.11.0",
|
||||||
"@radix-ui/react-collapsible": "^1.0.3",
|
"@radix-ui/react-collapsible": "^1.0.3",
|
||||||
"@radix-ui/react-dialog": "^1.0.4",
|
"@radix-ui/react-dialog": "^1.0.4",
|
||||||
"@radix-ui/react-popover": "^1.0.6",
|
"@radix-ui/react-popover": "^1.0.6",
|
||||||
"@radix-ui/react-tooltip": "^1.0.6",
|
"@radix-ui/react-tooltip": "^1.0.6",
|
||||||
|
"@scure/base": "^1.1.1",
|
||||||
"@tanstack/react-query": "^4.32.1",
|
"@tanstack/react-query": "^4.32.1",
|
||||||
"@tanstack/react-query-devtools": "^4.32.1",
|
"@tanstack/react-query-devtools": "^4.32.1",
|
||||||
"@tanstack/react-virtual": "3.0.0-beta.54",
|
"@tanstack/react-virtual": "3.0.0-beta.54",
|
||||||
|
@ -4,6 +4,15 @@ dependencies:
|
|||||||
'@headlessui/react':
|
'@headlessui/react':
|
||||||
specifier: ^1.7.16
|
specifier: ^1.7.16
|
||||||
version: 1.7.16(react-dom@18.2.0)(react@18.2.0)
|
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':
|
'@nostr-dev-kit/ndk':
|
||||||
specifier: ^0.8.1
|
specifier: ^0.8.1
|
||||||
version: 0.8.1(typescript@4.9.5)
|
version: 0.8.1(typescript@4.9.5)
|
||||||
@ -22,6 +31,9 @@ dependencies:
|
|||||||
'@radix-ui/react-tooltip':
|
'@radix-ui/react-tooltip':
|
||||||
specifier: ^1.0.6
|
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)
|
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':
|
'@tanstack/react-query':
|
||||||
specifier: ^4.32.1
|
specifier: ^4.32.1
|
||||||
version: 4.32.1(react-dom@18.2.0)(react@18.2.0)
|
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/resolve-uri': 3.1.0
|
||||||
'@jridgewell/sourcemap-codec': 1.4.14
|
'@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:
|
/@noble/curves@1.1.0:
|
||||||
resolution: {integrity: sha512-091oBExgENk/kGj3AZmtBDMpxQPDtxQABR2B9lb1JbVTs6ytdzZNwvhxQ4MWasRNEzlbEH8jCWFCwhF/Obj5AA==}
|
resolution: {integrity: sha512-091oBExgENk/kGj3AZmtBDMpxQPDtxQABR2B9lb1JbVTs6ytdzZNwvhxQ4MWasRNEzlbEH8jCWFCwhF/Obj5AA==}
|
||||||
dependencies:
|
dependencies:
|
||||||
|
BIN
public/clapping_hands.png
Normal file
BIN
public/clapping_hands.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 398 KiB |
BIN
public/clown_face.png
Normal file
BIN
public/clown_face.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 1.2 MiB |
BIN
public/crying_face.png
Normal file
BIN
public/crying_face.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 1.4 MiB |
BIN
public/face_with_open_mouth.png
Normal file
BIN
public/face_with_open_mouth.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 1.1 MiB |
BIN
public/face_with_tongue.png
Normal file
BIN
public/face_with_tongue.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 986 KiB |
44
src/libs/nip44.ts
Normal file
44
src/libs/nip44.ts
Normal file
@ -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;
|
||||||
|
}
|
28
src/shared/icons/horizontalDots.tsx
Normal file
28
src/shared/icons/horizontalDots.tsx
Normal file
@ -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>
|
||||||
|
);
|
||||||
|
}
|
@ -47,4 +47,5 @@ export * from './reaction';
|
|||||||
export * from './thread';
|
export * from './thread';
|
||||||
export * from './strangers';
|
export * from './strangers';
|
||||||
export * from './download';
|
export * from './download';
|
||||||
|
export * from './horizontalDots';
|
||||||
// @endindex
|
// @endindex
|
||||||
|
@ -1,6 +1,7 @@
|
|||||||
import * as Tooltip from '@radix-ui/react-tooltip';
|
import * as Tooltip from '@radix-ui/react-tooltip';
|
||||||
|
|
||||||
import { ThreadIcon } from '@shared/icons';
|
import { ThreadIcon } from '@shared/icons';
|
||||||
|
import { MoreActions } from '@shared/notes/actions/more';
|
||||||
import { NoteReaction } from '@shared/notes/actions/reaction';
|
import { NoteReaction } from '@shared/notes/actions/reaction';
|
||||||
import { NoteReply } from '@shared/notes/actions/reply';
|
import { NoteReply } from '@shared/notes/actions/reply';
|
||||||
import { NoteRepost } from '@shared/notes/actions/repost';
|
import { NoteRepost } from '@shared/notes/actions/repost';
|
||||||
@ -62,6 +63,7 @@ export function NoteActions({
|
|||||||
</Tooltip.Root>
|
</Tooltip.Root>
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
|
<MoreActions id={id} pubkey={pubkey} />
|
||||||
</div>
|
</div>
|
||||||
</Tooltip.Provider>
|
</Tooltip.Provider>
|
||||||
);
|
);
|
||||||
|
76
src/shared/notes/actions/more.tsx
Normal file
76
src/shared/notes/actions/more.tsx
Normal file
@ -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>
|
||||||
|
);
|
||||||
|
}
|
@ -1,5 +1,5 @@
|
|||||||
import * as Popover from '@radix-ui/react-popover';
|
import * as Popover from '@radix-ui/react-popover';
|
||||||
import { useCallback, useEffect, useState } from 'react';
|
import { useState } from 'react';
|
||||||
|
|
||||||
import { ReactionIcon } from '@shared/icons';
|
import { ReactionIcon } from '@shared/icons';
|
||||||
|
|
||||||
@ -8,23 +8,23 @@ import { usePublish } from '@utils/hooks/usePublish';
|
|||||||
const REACTIONS = [
|
const REACTIONS = [
|
||||||
{
|
{
|
||||||
content: '👏',
|
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: '🤪',
|
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: '😮',
|
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: '😢',
|
content: '😢',
|
||||||
img: 'https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Smilies/Crying%20Face.png',
|
img: '/public/crying_face.png',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
content: '🤡',
|
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"
|
className="inline-flex h-8 w-8 items-center justify-center rounded hover:bg-white/10"
|
||||||
>
|
>
|
||||||
<img
|
<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"
|
alt="Clapping Hands"
|
||||||
className="h-6 w-6"
|
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"
|
className="inline-flex h-7 w-7 items-center justify-center rounded hover:bg-white/10"
|
||||||
>
|
>
|
||||||
<img
|
<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"
|
alt="Face with Tongue"
|
||||||
className="h-6 w-6"
|
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"
|
className="inline-flex h-7 w-7 items-center justify-center rounded hover:bg-white/10"
|
||||||
>
|
>
|
||||||
<img
|
<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"
|
alt="Face with Open Mouth"
|
||||||
className="h-6 w-6"
|
className="h-6 w-6"
|
||||||
/>
|
/>
|
||||||
@ -115,22 +115,14 @@ export function NoteReaction({ id, pubkey }: { id: string; pubkey: string }) {
|
|||||||
onClick={() => react('😢')}
|
onClick={() => react('😢')}
|
||||||
className="inline-flex h-7 w-7 items-center justify-center rounded hover:bg-white/10"
|
className="inline-flex h-7 w-7 items-center justify-center rounded hover:bg-white/10"
|
||||||
>
|
>
|
||||||
<img
|
<img src="/public/crying_face.png" alt="Crying Face" className="h-6 w-6" />
|
||||||
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"
|
|
||||||
/>
|
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
onClick={() => react('🤡')}
|
onClick={() => react('🤡')}
|
||||||
className="inline-flex h-7 w-7 items-center justify-center rounded hover:bg-white/10"
|
className="inline-flex h-7 w-7 items-center justify-center rounded hover:bg-white/10"
|
||||||
>
|
>
|
||||||
<img
|
<img src="/public/clown_face.png" alt="Clown Face" className="h-6 w-6" />
|
||||||
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"
|
|
||||||
/>
|
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<Popover.Arrow className="fill-black" />
|
<Popover.Arrow className="fill-black" />
|
||||||
|
Loading…
Reference in New Issue
Block a user