add more actions to note
This commit is contained in:
Ren Amamiya
@@ -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>
|
||||
);
|
||||
|
||||
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 { 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" />
|
||||
|
||||
Reference in New Issue
Block a user