reya/lume
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add user block

Browse Source
This commit is contained in:
Ren Amamiya
2023-07-17 17:00:01 +07:00
parent 7d38fa5d85
commit 100204b267
14 changed files with 299 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -11,7 +11,15 @@ import { NoteZap } from '@shared/notes/actions/zap';
import { BLOCK_KINDS } from '@stores/constants';
export function NoteActions({ id, pubkey }: { id: string; pubkey: string }) {
export function NoteActions({
id,
pubkey,
noOpenThread,
}: {
id: string;
pubkey: string;
noOpenThread?: boolean;
}) {
const queryClient = useQueryClient();
const block = useMutation({
@@ -36,24 +44,28 @@ export function NoteActions({ id, pubkey }: { id: string; pubkey: string }) {
<NoteRepost id={id} pubkey={pubkey} />
<NoteZap />
</div>
<div className="mx-2 block h-4 w-px bg-zinc-800" />
<Tooltip.Root delayDuration={150}>
<Tooltip.Trigger asChild>
<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>
</Tooltip.Trigger>
<Tooltip.Portal>
<Tooltip.Content className="-left-10 select-none rounded-md border-t border-zinc-600/50 bg-zinc-700 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">
Open thread
<Tooltip.Arrow className="fill-zinc-700" />
</Tooltip.Content>
</Tooltip.Portal>
</Tooltip.Root>
{!noOpenThread && (
<>
<div className="mx-2 block h-4 w-px bg-zinc-800" />
<Tooltip.Root delayDuration={150}>
<Tooltip.Trigger asChild>
<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>
</Tooltip.Trigger>
<Tooltip.Portal>
<Tooltip.Content className="-left-10 select-none rounded-md border-t border-zinc-600/50 bg-zinc-700 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">
Open thread
<Tooltip.Arrow className="fill-zinc-700" />
</Tooltip.Content>
</Tooltip.Portal>
</Tooltip.Root>
</>
)}
</div>
</Tooltip.Provider>
);

6
src/shared/notes/mentions/note.tsx
View File

@@ -8,6 +8,8 @@ import { createBlock } from '@libs/storage';
import { MentionUser, NoteSkeleton } from '@shared/notes';
import { User } from '@shared/user';
import { BLOCK_KINDS } from '@stores/constants';
import { useEvent } from '@utils/hooks/useEvent';
export const MentionNote = memo(function MentionNote({ id }: { id: string }) {
@@ -15,7 +17,7 @@ export const MentionNote = memo(function MentionNote({ id }: { id: string }) {
const queryClient = useQueryClient();
const block = useMutation({
mutationFn: (data: any) => {
mutationFn: (data: { kind: number; title: string; content: string }) => {
return createBlock(data.kind, data.title, data.content);
},
onSuccess: () => {
@@ -26,7 +28,7 @@ export const MentionNote = memo(function MentionNote({ id }: { id: string }) {
const openThread = (event: any, thread: string) => {
const selection = window.getSelection();
if (selection.toString().length === 0) {
block.mutate({ kind: 2, title: 'Thread', content: thread });
block.mutate({ kind: BLOCK_KINDS.thread, title: 'Thread', content: thread });
} else {
event.stopPropagation();
}

25
src/shared/notes/mentions/user.tsx
View File

@@ -1,12 +1,37 @@
import { useMutation, useQueryClient } from '@tanstack/react-query';
import { createBlock } from '@libs/storage';
import { BLOCK_KINDS } from '@stores/constants';
import { useProfile } from '@utils/hooks/useProfile';
import { shortenKey } from '@utils/shortenKey';
export function MentionUser({ pubkey }: { pubkey: string }) {
const { user } = useProfile(pubkey);
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 openBlock = () => {
block.mutate({
kind: BLOCK_KINDS.user,
title: user?.name || user?.displayNam,
content: pubkey,
});
};
return (
<button
type="button"
onClick={() => openBlock()}
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)}

18
src/shared/notes/preview/link.tsx
View File

@@ -3,8 +3,8 @@ import { Image } from '@shared/image';
import { useOpenGraph } from '@utils/hooks/useOpenGraph';
export function LinkPreview({ urls }: { urls: string[] }) {
const domain = new URL(urls[0]);
const { status, data, error } = useOpenGraph(urls[0]);
const domain = new URL(urls[0]);
return (
<div className="mt-3 max-w-[420px] overflow-hidden rounded-lg bg-zinc-800">
@@ -21,7 +21,7 @@ export function LinkPreview({ urls }: { urls: string[] }) {
</div>
) : (
<a
className="flex flex-col rounded-lg border border-zinc-800/50"
className="flex flex-col rounded-lg border-t border-zinc-700/50"
href={urls[0]}
target="_blank"
rel="noreferrer"
@@ -34,12 +34,14 @@ export function LinkPreview({ urls }: { urls: string[] }) {
</div>
) : (
<>
<Image
src={data.images?.[0] || 'https://void.cat/d/XTmrMkpid8DGLjv1AzdvcW'}
fallback="https://void.cat/d/XTmrMkpid8DGLjv1AzdvcW"
alt={urls[0]}
className="h-44 w-full rounded-t-lg object-cover"
/>
{data.images?.[0] && (
<Image
src={data.images?.[0] || 'https://void.cat/d/XTmrMkpid8DGLjv1AzdvcW'}
fallback="https://void.cat/d/XTmrMkpid8DGLjv1AzdvcW"
alt={urls[0]}
className="h-44 w-full rounded-t-lg object-cover"
/>
)}
<div className="flex flex-col gap-2 px-3 py-3">
<h5 className="line-clamp-1 font-medium leading-none text-zinc-200">
{data.title}

32
src/shared/notes/replies/form.tsx
View File

@@ -1,27 +1,17 @@
import { useState } from 'react';
import { Button } from '@shared/button';
import { Image } from '@shared/image';
import { DEFAULT_AVATAR, FULL_RELAYS } from '@stores/constants';
import { FULL_RELAYS } from '@stores/constants';
import { useProfile } from '@utils/hooks/useProfile';
import { usePublish } from '@utils/hooks/usePublish';
import { shortenKey } from '@utils/shortenKey';
export function NoteReplyForm({
rootID,
userPubkey,
}: {
rootID: string;
userPubkey: string;
}) {
export function NoteReplyForm({ id }: { id: string }) {
const publish = usePublish();
const { status, user } = useProfile(userPubkey);
const [value, setValue] = useState('');
const submit = () => {
const tags = [['e', rootID, FULL_RELAYS[0], 'root']];
const tags = [['e', id, FULL_RELAYS[0], 'reply']];
// publish event
publish({ content: value, kind: 1, tags });
@@ -48,22 +38,6 @@ export function NoteReplyForm({
</div>
) : (
<div className="flex w-full items-center justify-between">
<div className="inline-flex items-center gap-2">
<div className="relative h-9 w-9 shrink-0 rounded">
<Image
src={user.image}
fallback={DEFAULT_AVATAR}
alt={userPubkey}
className="h-9 w-9 rounded-md bg-white object-cover"
/>
</div>
<div>
<p className="mb-px text-sm leading-none text-zinc-400">Reply as</p>
<p className="text-sm font-medium leading-none text-zinc-100">
{user.nip05 || user.name || shortenKey(userPubkey)}
</p>
</div>
</div>
<div className="flex items-center gap-2">
<Button
onClick={() => submit()}