mirror of
https://github.com/luminous-devs/lume.git
synced 2024-09-19 19:46:34 +00:00
add reaction
This commit is contained in:
parent
abc53a0d9a
commit
5ce9fa515a
10
package.json
10
package.json
@ -17,18 +17,18 @@
|
|||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@headlessui/react": "^1.7.15",
|
"@headlessui/react": "^1.7.15",
|
||||||
"@nostr-dev-kit/ndk": "^0.7.6",
|
"@nostr-dev-kit/ndk": "^0.7.7",
|
||||||
"@nostr-fetch/adapter-ndk": "^0.11.0",
|
"@nostr-fetch/adapter-ndk": "^0.11.0",
|
||||||
"@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",
|
||||||
"@tanstack/react-query": "^4.29.19",
|
"@tanstack/react-query": "^4.29.25",
|
||||||
"@tanstack/react-query-devtools": "^4.29.19",
|
"@tanstack/react-query-devtools": "^4.29.25",
|
||||||
"@tanstack/react-virtual": "3.0.0-beta.54",
|
"@tanstack/react-virtual": "3.0.0-beta.54",
|
||||||
"@tauri-apps/api": "^1.4.0",
|
"@tauri-apps/api": "^1.4.0",
|
||||||
"cheerio": "1.0.0-rc.12",
|
"cheerio": "1.0.0-rc.12",
|
||||||
"dayjs": "^1.11.9",
|
"dayjs": "^1.11.9",
|
||||||
"destr": "^1.2.2",
|
"destr": "^1.2.2",
|
||||||
"framer-motion": "^10.12.20",
|
"framer-motion": "^10.12.21",
|
||||||
"get-urls": "^11.0.0",
|
"get-urls": "^11.0.0",
|
||||||
"immer": "^10.0.2",
|
"immer": "^10.0.2",
|
||||||
"light-bolt11-decoder": "^3.0.0",
|
"light-bolt11-decoder": "^3.0.0",
|
||||||
@ -68,7 +68,7 @@
|
|||||||
"cross-env": "^7.0.3",
|
"cross-env": "^7.0.3",
|
||||||
"csstype": "^3.1.2",
|
"csstype": "^3.1.2",
|
||||||
"encoding": "^0.1.13",
|
"encoding": "^0.1.13",
|
||||||
"eslint": "^8.44.0",
|
"eslint": "^8.45.0",
|
||||||
"eslint-config-prettier": "^8.8.0",
|
"eslint-config-prettier": "^8.8.0",
|
||||||
"eslint-plugin-jsx-a11y": "^6.7.1",
|
"eslint-plugin-jsx-a11y": "^6.7.1",
|
||||||
"eslint-plugin-react": "^7.32.2",
|
"eslint-plugin-react": "^7.32.2",
|
||||||
|
396
pnpm-lock.yaml
396
pnpm-lock.yaml
File diff suppressed because it is too large
Load Diff
@ -30,18 +30,31 @@ export function NoteActions({ id, pubkey }: { id: string; pubkey: string }) {
|
|||||||
<div className="-ml-1 mt-4 inline-flex w-full items-center">
|
<div className="-ml-1 mt-4 inline-flex w-full items-center">
|
||||||
<div className="inline-flex items-center gap-2">
|
<div className="inline-flex items-center gap-2">
|
||||||
<NoteReply id={id} pubkey={pubkey} />
|
<NoteReply id={id} pubkey={pubkey} />
|
||||||
|
<NoteReaction id={id} pubkey={pubkey} />
|
||||||
<NoteRepost id={id} pubkey={pubkey} />
|
<NoteRepost id={id} pubkey={pubkey} />
|
||||||
<NoteReaction />
|
|
||||||
<NoteZap />
|
<NoteZap />
|
||||||
</div>
|
</div>
|
||||||
<div className="mx-2 block h-4 w-px bg-zinc-800" />
|
<div className="mx-2 block h-4 w-px bg-zinc-800" />
|
||||||
<button
|
<Tooltip.Root delayDuration={150}>
|
||||||
type="button"
|
<Tooltip.Trigger asChild>
|
||||||
onClick={() => openThread(id)}
|
<button
|
||||||
className="group inline-flex h-7 w-7 items-center justify-center"
|
type="button"
|
||||||
>
|
onClick={() => openThread(id)}
|
||||||
<ThreadIcon className="h-5 w-5 text-zinc-300 group-hover:text-fuchsia-400" />
|
className="group inline-flex h-7 w-7 items-center justify-center"
|
||||||
</button>
|
>
|
||||||
|
<ThreadIcon className="h-5 w-5 text-zinc-300 group-hover:text-fuchsia-400" />
|
||||||
|
</button>
|
||||||
|
</Tooltip.Trigger>
|
||||||
|
<Tooltip.Portal>
|
||||||
|
<Tooltip.Content
|
||||||
|
className="-left-10 select-none rounded-md bg-zinc-800/80 px-3.5 py-1.5 text-sm leading-none text-zinc-100 backdrop-blur-lg 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"
|
||||||
|
sideOffset={5}
|
||||||
|
>
|
||||||
|
Open thread
|
||||||
|
<Tooltip.Arrow className="fill-zinc-800/80 backdrop-blur-lg" />
|
||||||
|
</Tooltip.Content>
|
||||||
|
</Tooltip.Portal>
|
||||||
|
</Tooltip.Root>
|
||||||
</div>
|
</div>
|
||||||
</Tooltip.Provider>
|
</Tooltip.Provider>
|
||||||
);
|
);
|
||||||
|
@ -1,32 +1,141 @@
|
|||||||
import * as Tooltip from '@radix-ui/react-tooltip';
|
import * as Popover from '@radix-ui/react-popover';
|
||||||
|
import { useCallback, useEffect, useState } from 'react';
|
||||||
|
|
||||||
import { ReactionIcon } from '@shared/icons';
|
import { ReactionIcon } from '@shared/icons';
|
||||||
|
|
||||||
export function NoteReaction() {
|
import { usePublish } from '@utils/hooks/usePublish';
|
||||||
const submit = async () => {
|
|
||||||
console.log('todo');
|
const REACTIONS = [
|
||||||
|
{
|
||||||
|
content: '👏',
|
||||||
|
img: 'https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Hand%20gestures/Clapping%20Hands.png',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
content: '🤪',
|
||||||
|
img: 'https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Smilies/Face%20with%20Tongue.png',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
content: '😮',
|
||||||
|
img: 'https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Smilies/Face%20with%20Open%20Mouth.png',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
content: '😢',
|
||||||
|
img: 'https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Smilies/Crying%20Face.png',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
content: '🤡',
|
||||||
|
img: 'https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Smilies/Clown%20Face.png',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
export function NoteReaction({ id, pubkey }: { id: string; pubkey: string }) {
|
||||||
|
const [open, setOpen] = useState(false);
|
||||||
|
const [reaction, setReaction] = useState<string | null>(null);
|
||||||
|
|
||||||
|
const publish = usePublish();
|
||||||
|
|
||||||
|
const getReactionImage = (content: string) => {
|
||||||
|
const reaction: { img: string } = REACTIONS.find((el) => el.content === content);
|
||||||
|
return reaction.img;
|
||||||
|
};
|
||||||
|
|
||||||
|
const react = async (content: string) => {
|
||||||
|
setReaction(content);
|
||||||
|
|
||||||
|
const event = await publish({
|
||||||
|
content: content,
|
||||||
|
kind: 7,
|
||||||
|
tags: [
|
||||||
|
['e', id],
|
||||||
|
['p', pubkey],
|
||||||
|
],
|
||||||
|
});
|
||||||
|
|
||||||
|
if (event) {
|
||||||
|
setOpen(false);
|
||||||
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Tooltip.Root delayDuration={150}>
|
<Popover.Root open={open} onOpenChange={setOpen}>
|
||||||
<Tooltip.Trigger asChild>
|
<Popover.Trigger asChild>
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
onClick={() => submit()}
|
|
||||||
className="group inline-flex h-7 w-7 items-center justify-center"
|
className="group inline-flex h-7 w-7 items-center justify-center"
|
||||||
>
|
>
|
||||||
<ReactionIcon className="h-5 w-5 text-zinc-300 group-hover:text-red-400" />
|
{reaction ? (
|
||||||
|
<img src={getReactionImage(reaction)} alt={reaction} className="h-6 w-6" />
|
||||||
|
) : (
|
||||||
|
<ReactionIcon className="h-5 w-5 text-zinc-300 group-hover:text-red-400" />
|
||||||
|
)}
|
||||||
</button>
|
</button>
|
||||||
</Tooltip.Trigger>
|
</Popover.Trigger>
|
||||||
<Tooltip.Portal>
|
<Popover.Portal>
|
||||||
<Tooltip.Content
|
<Popover.Content
|
||||||
className="-left-10 select-none rounded-md bg-zinc-800/80 px-3.5 py-1.5 text-sm leading-none text-zinc-100 backdrop-blur-lg 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"
|
className="select-none rounded-md bg-zinc-800/80 px-1 py-1 text-sm leading-none text-zinc-100 backdrop-blur-lg will-change-[transform,opacity] data-[state=open]:data-[side=bottom]:animate-slideUpAndFade data-[state=open]:data-[side=left]:animate-slideRightAndFade data-[state=open]:data-[side=right]:animate-slideLeftAndFade data-[state=open]:data-[side=top]:animate-slideDownAndFade"
|
||||||
sideOffset={5}
|
sideOffset={5}
|
||||||
|
side="top"
|
||||||
>
|
>
|
||||||
Reaction
|
<div className="flex items-center gap-2">
|
||||||
<Tooltip.Arrow className="fill-zinc-800/80 backdrop-blur-lg" />
|
<button
|
||||||
</Tooltip.Content>
|
type="button"
|
||||||
</Tooltip.Portal>
|
onClick={() => react('👏')}
|
||||||
</Tooltip.Root>
|
className="inline-flex h-8 w-8 items-center justify-center rounded hover:bg-zinc-600"
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Hand%20gestures/Clapping%20Hands.png"
|
||||||
|
alt="Clapping Hands"
|
||||||
|
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-zinc-600"
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Smilies/Face%20with%20Tongue.png"
|
||||||
|
alt="Face with Tongue"
|
||||||
|
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-zinc-600"
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Smilies/Face%20with%20Open%20Mouth.png"
|
||||||
|
alt="Face with Open Mouth"
|
||||||
|
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-zinc-600"
|
||||||
|
>
|
||||||
|
<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"
|
||||||
|
/>
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => react('🤡')}
|
||||||
|
className="inline-flex h-7 w-7 items-center justify-center rounded hover:bg-zinc-600"
|
||||||
|
>
|
||||||
|
<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"
|
||||||
|
/>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<Popover.Arrow className="fill-zinc-800" />
|
||||||
|
</Popover.Content>
|
||||||
|
</Popover.Portal>
|
||||||
|
</Popover.Root>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -34,7 +34,7 @@ export function NoteContent({
|
|||||||
return (
|
return (
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
className="rounded bg-zinc-800 px-2 py-px text-sm font-normal text-orange-400 no-underline hover:bg-orange-100 hover:text-orange-500"
|
className="rounded bg-zinc-800 px-2 py-px text-sm font-normal text-orange-400 no-underline hover:bg-zinc-700 hover:text-orange-500"
|
||||||
>
|
>
|
||||||
{key.slice(3)}
|
{key.slice(3)}
|
||||||
</button>
|
</button>
|
||||||
|
@ -7,7 +7,7 @@ export function MentionUser({ pubkey }: { pubkey: string }) {
|
|||||||
return (
|
return (
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
className="break-words rounded bg-zinc-800 px-2 py-px text-sm font-normal text-blue-400 no-underline hover:bg-blue-100 hover:text-blue-500"
|
className="break-words rounded bg-zinc-800 px-2 py-px text-sm font-normal text-blue-400 no-underline hover:bg-zinc-700 hover:text-blue-500"
|
||||||
>
|
>
|
||||||
@{user?.name || user?.displayName || shortenKey(pubkey)}
|
@{user?.name || user?.displayName || shortenKey(pubkey)}
|
||||||
</button>
|
</button>
|
||||||
|
Loading…
Reference in New Issue
Block a user