nostr/lume
1
0
Fork 0
mirror of https://github.com/luminous-devs/lume.git synced 2024-09-18 11:13:30 +00:00
Code Issues Packages Projects Releases Wiki Activity

update note actions component

Browse Source
This commit is contained in:
Ren Amamiya 2023-07-16 14:24:19 +07:00
parent e0a14ce6cf
commit abc53a0d9a
15 changed files with 64 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/index.css
View File

@ -15,7 +15,7 @@ button {
}
.markdown {
@apply prose prose-zinc max-w-none select-text break-words dark:prose-invert prose-p:mb-2 prose-p:mt-0 prose-p:last:mb-0 prose-a:break-words prose-a:font-normal prose-a:leading-tight prose-a:text-fuchsia-400 hover:prose-a:text-fuchsia-500 prose-blockquote:m-0 prose-ol:m-0 prose-ol:mb-1 prose-ul:mb-1 prose-li:leading-tight prose-hr:mx-0 prose-hr:my-2;
@apply prose prose-zinc max-w-none select-text break-words dark:prose-invert prose-p:mb-2 prose-p:mt-0 prose-p:last:mb-0 prose-a:break-all prose-a:font-normal prose-a:leading-tight prose-a:text-fuchsia-400 hover:prose-a:text-fuchsia-500 prose-blockquote:m-0 prose-ol:m-0 prose-ol:mb-1 prose-ul:mb-1 prose-li:leading-tight prose-hr:mx-0 prose-hr:my-2;
}
/* For Webkit-based browsers (Chrome, Safari and Opera) */

16
src/shared/composer/types/post.tsx
View File

@ -87,18 +87,10 @@ export function Post() {
let tags: string[][] = [];
if (reply.id && reply.pubkey) {
if (reply.root && reply.root !== reply.id) {
tags = [
['e', reply.id, FULL_RELAYS[0], 'root'],
['e', reply.root, FULL_RELAYS[0], 'reply'],
['p', reply.pubkey],
];
} else {
tags = [
['e', reply.id, FULL_RELAYS[0], 'root'],
['p', reply.pubkey],
];
}
tags = [
['e', reply.id, FULL_RELAYS[0], 'reply'],
['p', reply.pubkey],
];
} else {
tags = [];
}

1
src/shared/icons/index.tsx
View File

@ -44,4 +44,5 @@ export * from './logout';
export * from './follow';
export * from './unfollow';
export * from './reaction';
export * from './thread';
// @endindex

9
src/shared/icons/thread.tsx
View File

@ -11,12 +11,9 @@ export function ThreadIcon(props: JSX.IntrinsicAttributes & SVGProps<SVGSVGEleme
{...props}
>
<path
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="1.5"
d="M2.75 12h18.5M2.75 5.75h18.5m-18.5 12.5h8.75"
/>
fill="currentColor"
d="M12 19.25V20a.75.75 0 00.75-.75H12zm8.5-9a.75.75 0 001.5 0h-1.5zm-.75 3.5a.75.75 0 00-1.5 0h1.5zm-1.5 6.5a.75.75 0 001.5 0h-1.5zm-2.5-4a.75.75 0 000 1.5v-1.5zm6.5 1.5a.75.75 0 000-1.5v1.5zm-18.75.5V5.75H2v12.5h1.5zm8.5.25H3.75V20H12v-1.5zm8.5-12.75v4.5H22v-4.5h-1.5zM3.75 5.5H12V4H3.75v1.5zm8.25 0h8.25V4H12v1.5zm.75 13.75V4.75h-1.5v14.5h1.5zm5.5-5.5V17h1.5v-3.25h-1.5zm0 3.25v3.25h1.5V17h-1.5zm-2.5.75H19v-1.5h-3.25v1.5zm3.25 0h3.25v-1.5H19v1.5zm3-12A1.75 1.75 0 0020.25 4v1.5a.25.25 0 01.25.25H22zm-18.5 0a.25.25 0 01.25-.25V4A1.75 1.75 0 002 5.75h1.5zM2 18.25c0 .966.784 1.75 1.75 1.75v-1.5a.25.25 0 01-.25-.25H2z"
></path>
</svg>
);
}

43
src/shared/notes/actions.tsx
View File

@ -1,28 +1,47 @@
import * as Tooltip from '@radix-ui/react-tooltip';
import { useMutation, useQueryClient } from '@tanstack/react-query';
import { createBlock } from '@libs/storage';
import { ThreadIcon } from '@shared/icons';
import { NoteReaction } from '@shared/notes/actions/reaction';
import { NoteReply } from '@shared/notes/actions/reply';
import { NoteRepost } from '@shared/notes/actions/repost';
import { NoteZap } from '@shared/notes/actions/zap';
export function NoteActions({
id,
rootID,
eventPubkey,
}: {
id: string;
rootID?: string;
eventPubkey: string;
}) {
export function NoteActions({ id, pubkey }: { id: string; pubkey: string }) {
const queryClient = useQueryClient();
const block = useMutation({
mutationFn: (data: { kind: number; title: string; content: string }) => {
return createBlock(data.kind, data.title, data.content);
},
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ['blocks'] });
},
});
const openThread = (thread: string) => {
block.mutate({ kind: 2, title: 'Thread', content: thread });
};
return (
<Tooltip.Provider>
<div className="-ml-1 mt-4 inline-flex w-full items-center justify-between">
<div className="-ml-1 mt-4 inline-flex w-full items-center">
<div className="inline-flex items-center gap-2">
<NoteReply id={id} pubkey={pubkey} />
<NoteRepost id={id} pubkey={pubkey} />
<NoteReaction />
<NoteZap />
<NoteRepost id={id} pubkey={eventPubkey} />
<NoteReply id={id} rootID={rootID} pubkey={eventPubkey} />
</div>
<div className="mx-2 block h-4 w-px bg-zinc-800" />
<button
type="button"
onClick={() => openThread(id)}
className="group inline-flex h-7 w-7 items-center justify-center"
>
<ThreadIcon className="h-5 w-5 text-zinc-300 group-hover:text-fuchsia-400" />
</button>
</div>
</Tooltip.Provider>
);

12
src/shared/notes/actions/reply.tsx
View File

@ -4,15 +4,7 @@ import { ReplyIcon } from '@shared/icons';
import { useComposer } from '@stores/composer';
export function NoteReply({
id,
rootID,
pubkey,
}: {
id: string;
rootID?: string;
pubkey: string;
}) {
export function NoteReply({ id, pubkey }: { id: string; pubkey: string }) {
const setReply = useComposer((state) => state.setReply);
return (
@ -20,7 +12,7 @@ export function NoteReply({
<Tooltip.Trigger asChild>
<button
type="button"
onClick={() => setReply(id, rootID, pubkey)}
onClick={() => setReply(id, pubkey)}
className="group inline-flex h-7 w-7 items-center justify-center"
>
<ReplyIcon className="h-5 w-5 text-zinc-300 group-hover:text-green-500" />

6
src/shared/notes/kinds/kind1.tsx
View File

@ -24,11 +24,7 @@ export function NoteKind_1({
<div className="w-11 shrink-0" />
<div className="flex-1">
<NoteContent content={content} />
<NoteActions
id={event.event_id}
rootID={event.parent_id}
eventPubkey={event.pubkey}
/>
<NoteActions id={event.event_id} pubkey={event.pubkey} />
</div>
</div>
{!skipMetadata ? (

6
src/shared/notes/kinds/kind1063.tsx
View File

@ -27,11 +27,7 @@ export function NoteKind_1063({ event }: { event: LumeEvent }) {
className="h-auto w-full rounded-lg object-cover"
/>
)}
<NoteActions
id={event.event_id}
rootID={event.parent_id}
eventPubkey={event.pubkey}
/>
<NoteActions id={event.event_id} pubkey={event.pubkey} />
</div>
</div>
<NoteMetadata id={event.event_id} />

6
src/shared/notes/kinds/repost.tsx
View File

@ -43,11 +43,7 @@ export function Repost({ event }: { event: LumeEvent }) {
<div className="w-11 shrink-0" />
<div className="flex-1">
<NoteContent content={data.content} />
<NoteActions
id={event.event_id}
rootID={event.parent_id}
eventPubkey={event.pubkey}
/>
<NoteActions id={event.event_id} pubkey={event.pubkey} />
</div>
</div>
<NoteMetadata id={event.event_id} />

2
src/shared/notes/kinds/sub.tsx
View File

@ -31,7 +31,7 @@ export function SubNote({ id }: { id: string }) {
<div className="w-11 shrink-0" />
<div className="flex-1">
<NoteContent content={data.content} />
<NoteActions id={data.id} eventPubkey={data.pubkey} />
<NoteActions id={data.event_id} pubkey={data.pubkey} />
</div>
</div>
</div>

6
src/shared/notes/kinds/thread.tsx
View File

@ -28,11 +28,7 @@ export function NoteThread({
<div className="w-11 shrink-0" />
<div className="flex-1">
<NoteContent content={content} />
<NoteActions
id={event.event_id}
rootID={event.parent_id}
eventPubkey={event.pubkey}
/>
<NoteActions id={event.event_id} pubkey={event.pubkey} />
</div>
</div>
<NoteMetadata id={event.event_id} />

6
src/shared/notes/kinds/unsupport.tsx
View File

@ -25,11 +25,7 @@ export function NoteKindUnsupport({ event }: { event: LumeEvent }) {
<p>{event.content.toString()}</p>
</div>
</div>
<NoteActions
id={event.event_id}
rootID={event.parent_id}
eventPubkey={event.pubkey}
/>
<NoteActions id={event.event_id} pubkey={event.pubkey} />
</div>
</div>
<NoteMetadata id={event.event_id} />

2
src/shared/notes/metadata.tsx
View File

@ -63,7 +63,7 @@ export function NoteMetadata({ id }: { id: string }) {
);
const block = useMutation({
mutationFn: (data: any) => {
mutationFn: (data: { kind: number; title: string; content: string }) => {
return createBlock(data.kind, data.title, data.content);
},
onSuccess: () => {

11
src/shared/user.tsx
View File

@ -2,6 +2,7 @@ import { Popover, Transition } from '@headlessui/react';
import { Fragment } from 'react';
import { Link } from 'react-router-dom';
import { ChevronDownIcon, VerticalDotsIcon } from '@shared/icons';
import { Image } from '@shared/image';
import { DEFAULT_AVATAR } from '@stores/constants';
@ -79,7 +80,15 @@ export function User({
user?.display_name ||
shortenKey(pubkey)}
</h5>
<span className="leading-none text-zinc-500">{createdAt}</span>
<div className="inline-flex items-center gap-2">
<span className="leading-none text-zinc-500">{createdAt}</span>
<button
type="button"
className="inline-flex h-5 w-max items-center justify-center rounded px-1 hover:bg-zinc-800"
>
<VerticalDotsIcon className="h-4 w-4 rotate-90 transform text-zinc-200" />
</button>
</div>
</div>
<Transition
as={Fragment}

10
src/stores/composer.tsx
View File

@ -2,9 +2,9 @@ import { create } from 'zustand';
interface ComposerState {
open: boolean;
reply: { id: string; root: string; pubkey: string };
reply: { id: string; pubkey: string };
toggleModal: (status: boolean) => void;
setReply: (id: string, root: string, pubkey: string) => void;
setReply: (id: string, pubkey: string) => void;
clearReply: () => void;
}
@ -14,11 +14,11 @@ export const useComposer = create<ComposerState>((set) => ({
toggleModal: (status: boolean) => {
set({ open: status });
},
setReply: (id: string, root: string, pubkey: string) => {
set({ reply: { id: id, root: root, pubkey: pubkey } });
setReply: (id: string, pubkey: string) => {
set({ reply: { id: id, pubkey: pubkey } });
set({ open: true });
},
clearReply: () => {
set({ reply: { id: null, root: null, pubkey: null } });
set({ reply: { id: null, pubkey: null } });
},
}));