mirror of
https://github.com/luminous-devs/lume.git
synced 2024-09-19 11:43:30 +00:00
add user block
This commit is contained in:
parent
7d38fa5d85
commit
100204b267
@ -16,7 +16,7 @@ tauri-build = { version = "1.2", features = [] }
|
|||||||
[dependencies]
|
[dependencies]
|
||||||
serde_json = "1.0"
|
serde_json = "1.0"
|
||||||
serde = { version = "1.0", features = ["derive"] }
|
serde = { version = "1.0", features = ["derive"] }
|
||||||
tauri = { version = "1.2", features = [ "path-all", "fs-read-dir", "fs-read-file", "clipboard-read-text", "clipboard-write-text", "dialog-open", "http-all", "http-multipart", "notification-all", "os-all", "process-relaunch", "shell-open", "system-tray", "updater", "window-close", "window-start-dragging"] }
|
tauri = { version = "1.2", features = [ "window-create", "path-all", "fs-read-dir", "fs-read-file", "clipboard-read-text", "clipboard-write-text", "dialog-open", "http-all", "http-multipart", "notification-all", "os-all", "process-relaunch", "shell-open", "system-tray", "updater", "window-close", "window-start-dragging"] }
|
||||||
tauri-plugin-single-instance = { git = "https://github.com/tauri-apps/plugins-workspace", branch = "v1" }
|
tauri-plugin-single-instance = { git = "https://github.com/tauri-apps/plugins-workspace", branch = "v1" }
|
||||||
tauri-plugin-autostart = { git = "https://github.com/tauri-apps/plugins-workspace", branch = "v1" }
|
tauri-plugin-autostart = { git = "https://github.com/tauri-apps/plugins-workspace", branch = "v1" }
|
||||||
tauri-plugin-stronghold = { git = "https://github.com/tauri-apps/plugins-workspace", branch = "v1" }
|
tauri-plugin-stronghold = { git = "https://github.com/tauri-apps/plugins-workspace", branch = "v1" }
|
||||||
|
@ -62,7 +62,8 @@
|
|||||||
},
|
},
|
||||||
"window": {
|
"window": {
|
||||||
"startDragging": true,
|
"startDragging": true,
|
||||||
"close": true
|
"close": true,
|
||||||
|
"create": true
|
||||||
},
|
},
|
||||||
"process": {
|
"process": {
|
||||||
"all": false,
|
"all": false,
|
||||||
|
@ -3,7 +3,13 @@ import { useMutation, useQueryClient } from '@tanstack/react-query';
|
|||||||
// import { useLiveThread } from '@app/space/hooks/useLiveThread';
|
// import { useLiveThread } from '@app/space/hooks/useLiveThread';
|
||||||
import { removeBlock } from '@libs/storage';
|
import { removeBlock } from '@libs/storage';
|
||||||
|
|
||||||
import { NoteContent, NoteStats, ThreadUser } from '@shared/notes';
|
import {
|
||||||
|
NoteActions,
|
||||||
|
NoteContent,
|
||||||
|
NoteReplyForm,
|
||||||
|
NoteStats,
|
||||||
|
ThreadUser,
|
||||||
|
} from '@shared/notes';
|
||||||
import { RepliesList } from '@shared/notes/replies/list';
|
import { RepliesList } from '@shared/notes/replies/list';
|
||||||
import { NoteSkeleton } from '@shared/notes/skeleton';
|
import { NoteSkeleton } from '@shared/notes/skeleton';
|
||||||
import { TitleBar } from '@shared/titleBar';
|
import { TitleBar } from '@shared/titleBar';
|
||||||
@ -46,12 +52,14 @@ export function ThreadBlock({ params }: { params: Block }) {
|
|||||||
<NoteContent content={data.content} />
|
<NoteContent content={data.content} />
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
|
<NoteActions id={data.id} pubkey={data.pubkey} noOpenThread={true} />
|
||||||
<NoteStats id={data.id} />
|
<NoteStats id={data.id} />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
<div className="px-3">
|
<div className="px-3">
|
||||||
|
<NoteReplyForm id={params.content} />
|
||||||
<RepliesList id={params.content} />
|
<RepliesList id={params.content} />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
141
src/app/space/components/blocks/user.tsx
Normal file
141
src/app/space/components/blocks/user.tsx
Normal file
@ -0,0 +1,141 @@
|
|||||||
|
import { useMutation, useQueryClient } from '@tanstack/react-query';
|
||||||
|
import { useEffect, useState } from 'react';
|
||||||
|
import { Link } from 'react-router-dom';
|
||||||
|
|
||||||
|
import { UserFeed } from '@app/user/components/feed';
|
||||||
|
import { UserMetadata } from '@app/user/components/metadata';
|
||||||
|
|
||||||
|
import { removeBlock } from '@libs/storage';
|
||||||
|
|
||||||
|
import { ZapIcon } from '@shared/icons';
|
||||||
|
import { Image } from '@shared/image';
|
||||||
|
import { TitleBar } from '@shared/titleBar';
|
||||||
|
|
||||||
|
import { DEFAULT_AVATAR } from '@stores/constants';
|
||||||
|
|
||||||
|
import { useProfile } from '@utils/hooks/useProfile';
|
||||||
|
import { useSocial } from '@utils/hooks/useSocial';
|
||||||
|
import { shortenKey } from '@utils/shortenKey';
|
||||||
|
import { Block } from '@utils/types';
|
||||||
|
|
||||||
|
export function UserBlock({ params }: { params: Block }) {
|
||||||
|
const queryClient = useQueryClient();
|
||||||
|
|
||||||
|
const { user } = useProfile(params.content);
|
||||||
|
const { status, userFollows, follow, unfollow } = useSocial();
|
||||||
|
|
||||||
|
const [followed, setFollowed] = useState(false);
|
||||||
|
|
||||||
|
const block = useMutation({
|
||||||
|
mutationFn: (id: string) => {
|
||||||
|
return removeBlock(id);
|
||||||
|
},
|
||||||
|
onSuccess: () => {
|
||||||
|
queryClient.invalidateQueries({ queryKey: ['blocks'] });
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const followUser = (pubkey: string) => {
|
||||||
|
try {
|
||||||
|
follow(pubkey);
|
||||||
|
|
||||||
|
// update state
|
||||||
|
setFollowed(true);
|
||||||
|
} catch (error) {
|
||||||
|
console.log(error);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const unfollowUser = (pubkey: string) => {
|
||||||
|
try {
|
||||||
|
unfollow(pubkey);
|
||||||
|
|
||||||
|
// update state
|
||||||
|
setFollowed(false);
|
||||||
|
} catch (error) {
|
||||||
|
console.log(error);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (status === 'success' && userFollows) {
|
||||||
|
if (userFollows.includes(params.content)) {
|
||||||
|
setFollowed(true);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, [status]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="w-[400px] shrink-0 border-r border-zinc-900">
|
||||||
|
<TitleBar title={params.title} onClick={() => block.mutate(params.id)} />
|
||||||
|
<div className="scrollbar-hide flex h-full w-full flex-col gap-1.5 overflow-y-auto pb-20 pt-1.5">
|
||||||
|
<div className="px-3 pt-1.5">
|
||||||
|
<Image
|
||||||
|
src={user?.picture || user?.image}
|
||||||
|
fallback={DEFAULT_AVATAR}
|
||||||
|
alt={params.content}
|
||||||
|
className="h-14 w-14 rounded-md ring-2 ring-black"
|
||||||
|
/>
|
||||||
|
<div className="mt-2 flex flex-1 flex-col gap-2">
|
||||||
|
<div className="flex flex-col gap-2">
|
||||||
|
<h5 className="text-lg font-semibold leading-none">
|
||||||
|
{user?.displayName || user?.name || 'No name'}
|
||||||
|
</h5>
|
||||||
|
<span className="max-w-[15rem] truncate text-sm leading-none text-zinc-500">
|
||||||
|
{user?.nip05 || shortenKey(params.content)}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-col gap-4">
|
||||||
|
<p className="mt-2 max-w-[500px] select-text break-words text-zinc-100">
|
||||||
|
{user?.about}
|
||||||
|
</p>
|
||||||
|
<UserMetadata pubkey={params.content} />
|
||||||
|
</div>
|
||||||
|
<div className="mt-4 inline-flex items-center gap-2">
|
||||||
|
{status === 'loading' ? (
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="inline-flex h-10 w-36 items-center justify-center rounded-md bg-zinc-900 text-sm font-medium hover:bg-fuchsia-500"
|
||||||
|
>
|
||||||
|
Loading...
|
||||||
|
</button>
|
||||||
|
) : followed ? (
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => unfollowUser(params.content)}
|
||||||
|
className="inline-flex h-10 w-36 items-center justify-center rounded-md bg-zinc-900 text-sm font-medium hover:bg-fuchsia-500"
|
||||||
|
>
|
||||||
|
Unfollow
|
||||||
|
</button>
|
||||||
|
) : (
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => followUser(params.content)}
|
||||||
|
className="inline-flex h-10 w-36 items-center justify-center rounded-md bg-zinc-900 text-sm font-medium hover:bg-fuchsia-500"
|
||||||
|
>
|
||||||
|
Follow
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
<Link
|
||||||
|
to={`/app/chat/${params.content}`}
|
||||||
|
className="inline-flex h-10 w-36 items-center justify-center rounded-md bg-zinc-900 text-sm font-medium hover:bg-fuchsia-500"
|
||||||
|
>
|
||||||
|
Message
|
||||||
|
</Link>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="group inline-flex h-10 w-10 items-center justify-center rounded-md bg-zinc-900 text-sm font-medium hover:bg-orange-500"
|
||||||
|
>
|
||||||
|
<ZapIcon className="h-5 w-5" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 className="mt-2 px-3 text-lg font-semibold text-zinc-300">Timeline</h3>
|
||||||
|
<UserFeed pubkey={params.content} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
@ -1,6 +1,7 @@
|
|||||||
import { useQuery } from '@tanstack/react-query';
|
import { useQuery } from '@tanstack/react-query';
|
||||||
import { useCallback } from 'react';
|
import { useCallback } from 'react';
|
||||||
|
|
||||||
|
import { UserBlock } from '@app/space//components/blocks/user';
|
||||||
import { AddBlock } from '@app/space/components/add';
|
import { AddBlock } from '@app/space/components/add';
|
||||||
import { FeedBlock } from '@app/space/components/blocks/feed';
|
import { FeedBlock } from '@app/space/components/blocks/feed';
|
||||||
import { FollowingBlock } from '@app/space/components/blocks/following';
|
import { FollowingBlock } from '@app/space/components/blocks/following';
|
||||||
@ -43,6 +44,8 @@ export function SpaceScreen() {
|
|||||||
return <ThreadBlock key={block.id} params={block} />;
|
return <ThreadBlock key={block.id} params={block} />;
|
||||||
case 3:
|
case 3:
|
||||||
return <HashtagBlock key={block.id} params={block} />;
|
return <HashtagBlock key={block.id} params={block} />;
|
||||||
|
case 5:
|
||||||
|
return <UserBlock key={block.id} params={block} />;
|
||||||
default:
|
default:
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
|
@ -1,11 +1,17 @@
|
|||||||
import { useQuery } from '@tanstack/react-query';
|
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
|
||||||
|
import { useVirtualizer } from '@tanstack/react-virtual';
|
||||||
|
import { useRef } from 'react';
|
||||||
|
|
||||||
import { useNDK } from '@libs/ndk/provider';
|
import { useNDK } from '@libs/ndk/provider';
|
||||||
|
|
||||||
|
import { NoteKind_1, NoteSkeleton } from '@shared/notes';
|
||||||
|
|
||||||
import { nHoursAgo } from '@utils/date';
|
import { nHoursAgo } from '@utils/date';
|
||||||
import { LumeEvent } from '@utils/types';
|
import { LumeEvent } from '@utils/types';
|
||||||
|
|
||||||
export function UserFeed({ pubkey }: { pubkey: string }) {
|
export function UserFeed({ pubkey }: { pubkey: string }) {
|
||||||
|
const parentRef = useRef();
|
||||||
|
|
||||||
const { fetcher, relayUrls } = useNDK();
|
const { fetcher, relayUrls } = useNDK();
|
||||||
const { status, data } = useQuery(['user-feed', pubkey], async () => {
|
const { status, data } = useQuery(['user-feed', pubkey], async () => {
|
||||||
const events = await fetcher.fetchAllEvents(
|
const events = await fetcher.fetchAllEvents(
|
||||||
@ -17,5 +23,63 @@ export function UserFeed({ pubkey }: { pubkey: string }) {
|
|||||||
return events as unknown as LumeEvent[];
|
return events as unknown as LumeEvent[];
|
||||||
});
|
});
|
||||||
|
|
||||||
return <div className="w-full max-w-[400px] px-2 pb-10"></div>;
|
const rowVirtualizer = useVirtualizer({
|
||||||
|
count: data ? data.length : 0,
|
||||||
|
getScrollElement: () => parentRef.current,
|
||||||
|
estimateSize: () => 400,
|
||||||
|
});
|
||||||
|
|
||||||
|
const itemsVirtualizer = rowVirtualizer.getVirtualItems();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
ref={parentRef}
|
||||||
|
className="scrollbar-hide flex h-full w-full flex-col justify-between gap-1.5 overflow-y-auto pb-20 pt-1.5"
|
||||||
|
style={{ contain: 'strict' }}
|
||||||
|
>
|
||||||
|
{status === 'loading' ? (
|
||||||
|
<div className="px-3 py-1.5">
|
||||||
|
<div className="shadow-input rounded-md bg-zinc-900 px-3 py-3 shadow-black/20">
|
||||||
|
<NoteSkeleton />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
) : itemsVirtualizer.length === 0 ? (
|
||||||
|
<div className="px-3 py-1.5">
|
||||||
|
<div className="rounded-xl border-t border-zinc-800/50 bg-zinc-900 px-3 py-6">
|
||||||
|
<div className="flex flex-col items-center gap-4">
|
||||||
|
<p className="text-center text-sm text-zinc-300">
|
||||||
|
No new posts about this hashtag in 48 hours ago
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div
|
||||||
|
className="relative w-full"
|
||||||
|
style={{
|
||||||
|
height: `${rowVirtualizer.getTotalSize()}px`,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className="absolute left-0 top-0 w-full"
|
||||||
|
style={{
|
||||||
|
transform: `translateY(${
|
||||||
|
itemsVirtualizer[0].start - rowVirtualizer.options.scrollMargin
|
||||||
|
}px)`,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{itemsVirtualizer.map((virtualRow) => (
|
||||||
|
<div
|
||||||
|
key={virtualRow.key}
|
||||||
|
data-index={virtualRow.index}
|
||||||
|
ref={rowVirtualizer.measureElement}
|
||||||
|
>
|
||||||
|
<NoteKind_1 event={data[virtualRow.index]} />
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
@ -19,13 +19,13 @@ export function UserMetadata({ pubkey }: { pubkey: string }) {
|
|||||||
<div className="flex w-full items-center gap-10">
|
<div className="flex w-full items-center gap-10">
|
||||||
<div className="inline-flex flex-col gap-1">
|
<div className="inline-flex flex-col gap-1">
|
||||||
<span className="font-semibold leading-none text-zinc-100">
|
<span className="font-semibold leading-none text-zinc-100">
|
||||||
{data.stats[pubkey].followers_pubkey_count ?? 0}
|
{compactNumber.format(data.stats[pubkey].followers_pubkey_count) ?? 0}
|
||||||
</span>
|
</span>
|
||||||
<span className="text-sm leading-none text-zinc-400">Followers</span>
|
<span className="text-sm leading-none text-zinc-400">Followers</span>
|
||||||
</div>
|
</div>
|
||||||
<div className="inline-flex flex-col gap-1">
|
<div className="inline-flex flex-col gap-1">
|
||||||
<span className="font-semibold leading-none text-zinc-100">
|
<span className="font-semibold leading-none text-zinc-100">
|
||||||
{data.stats[pubkey].pub_following_pubkey_count ?? 0}
|
{compactNumber.format(data.stats[pubkey].pub_following_pubkey_count) ?? 0}
|
||||||
</span>
|
</span>
|
||||||
<span className="text-sm leading-none text-zinc-400">Following</span>
|
<span className="text-sm leading-none text-zinc-400">Following</span>
|
||||||
</div>
|
</div>
|
||||||
|
@ -11,7 +11,15 @@ import { NoteZap } from '@shared/notes/actions/zap';
|
|||||||
|
|
||||||
import { BLOCK_KINDS } from '@stores/constants';
|
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 queryClient = useQueryClient();
|
||||||
|
|
||||||
const block = useMutation({
|
const block = useMutation({
|
||||||
@ -36,24 +44,28 @@ export function NoteActions({ id, pubkey }: { id: string; pubkey: string }) {
|
|||||||
<NoteRepost id={id} pubkey={pubkey} />
|
<NoteRepost id={id} pubkey={pubkey} />
|
||||||
<NoteZap />
|
<NoteZap />
|
||||||
</div>
|
</div>
|
||||||
<div className="mx-2 block h-4 w-px bg-zinc-800" />
|
{!noOpenThread && (
|
||||||
<Tooltip.Root delayDuration={150}>
|
<>
|
||||||
<Tooltip.Trigger asChild>
|
<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>
|
>
|
||||||
</Tooltip.Trigger>
|
<ThreadIcon className="h-5 w-5 text-zinc-300 group-hover:text-fuchsia-400" />
|
||||||
<Tooltip.Portal>
|
</button>
|
||||||
<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">
|
</Tooltip.Trigger>
|
||||||
Open thread
|
<Tooltip.Portal>
|
||||||
<Tooltip.Arrow className="fill-zinc-700" />
|
<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">
|
||||||
</Tooltip.Content>
|
Open thread
|
||||||
</Tooltip.Portal>
|
<Tooltip.Arrow className="fill-zinc-700" />
|
||||||
</Tooltip.Root>
|
</Tooltip.Content>
|
||||||
|
</Tooltip.Portal>
|
||||||
|
</Tooltip.Root>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
</Tooltip.Provider>
|
</Tooltip.Provider>
|
||||||
);
|
);
|
||||||
|
@ -8,6 +8,8 @@ import { createBlock } from '@libs/storage';
|
|||||||
import { MentionUser, NoteSkeleton } from '@shared/notes';
|
import { MentionUser, NoteSkeleton } from '@shared/notes';
|
||||||
import { User } from '@shared/user';
|
import { User } from '@shared/user';
|
||||||
|
|
||||||
|
import { BLOCK_KINDS } from '@stores/constants';
|
||||||
|
|
||||||
import { useEvent } from '@utils/hooks/useEvent';
|
import { useEvent } from '@utils/hooks/useEvent';
|
||||||
|
|
||||||
export const MentionNote = memo(function MentionNote({ id }: { id: string }) {
|
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 queryClient = useQueryClient();
|
||||||
const block = useMutation({
|
const block = useMutation({
|
||||||
mutationFn: (data: any) => {
|
mutationFn: (data: { kind: number; title: string; content: string }) => {
|
||||||
return createBlock(data.kind, data.title, data.content);
|
return createBlock(data.kind, data.title, data.content);
|
||||||
},
|
},
|
||||||
onSuccess: () => {
|
onSuccess: () => {
|
||||||
@ -26,7 +28,7 @@ export const MentionNote = memo(function MentionNote({ id }: { id: string }) {
|
|||||||
const openThread = (event: any, thread: string) => {
|
const openThread = (event: any, thread: string) => {
|
||||||
const selection = window.getSelection();
|
const selection = window.getSelection();
|
||||||
if (selection.toString().length === 0) {
|
if (selection.toString().length === 0) {
|
||||||
block.mutate({ kind: 2, title: 'Thread', content: thread });
|
block.mutate({ kind: BLOCK_KINDS.thread, title: 'Thread', content: thread });
|
||||||
} else {
|
} else {
|
||||||
event.stopPropagation();
|
event.stopPropagation();
|
||||||
}
|
}
|
||||||
|
@ -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 { useProfile } from '@utils/hooks/useProfile';
|
||||||
import { shortenKey } from '@utils/shortenKey';
|
import { shortenKey } from '@utils/shortenKey';
|
||||||
|
|
||||||
export function MentionUser({ pubkey }: { pubkey: string }) {
|
export function MentionUser({ pubkey }: { pubkey: string }) {
|
||||||
const { user } = useProfile(pubkey);
|
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 (
|
return (
|
||||||
<button
|
<button
|
||||||
type="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"
|
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)}
|
||||||
|
@ -3,8 +3,8 @@ import { Image } from '@shared/image';
|
|||||||
import { useOpenGraph } from '@utils/hooks/useOpenGraph';
|
import { useOpenGraph } from '@utils/hooks/useOpenGraph';
|
||||||
|
|
||||||
export function LinkPreview({ urls }: { urls: string[] }) {
|
export function LinkPreview({ urls }: { urls: string[] }) {
|
||||||
const domain = new URL(urls[0]);
|
|
||||||
const { status, data, error } = useOpenGraph(urls[0]);
|
const { status, data, error } = useOpenGraph(urls[0]);
|
||||||
|
const domain = new URL(urls[0]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="mt-3 max-w-[420px] overflow-hidden rounded-lg bg-zinc-800">
|
<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>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
<a
|
<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]}
|
href={urls[0]}
|
||||||
target="_blank"
|
target="_blank"
|
||||||
rel="noreferrer"
|
rel="noreferrer"
|
||||||
@ -34,12 +34,14 @@ export function LinkPreview({ urls }: { urls: string[] }) {
|
|||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
<>
|
<>
|
||||||
<Image
|
{data.images?.[0] && (
|
||||||
src={data.images?.[0] || 'https://void.cat/d/XTmrMkpid8DGLjv1AzdvcW'}
|
<Image
|
||||||
fallback="https://void.cat/d/XTmrMkpid8DGLjv1AzdvcW"
|
src={data.images?.[0] || 'https://void.cat/d/XTmrMkpid8DGLjv1AzdvcW'}
|
||||||
alt={urls[0]}
|
fallback="https://void.cat/d/XTmrMkpid8DGLjv1AzdvcW"
|
||||||
className="h-44 w-full rounded-t-lg object-cover"
|
alt={urls[0]}
|
||||||
/>
|
className="h-44 w-full rounded-t-lg object-cover"
|
||||||
|
/>
|
||||||
|
)}
|
||||||
<div className="flex flex-col gap-2 px-3 py-3">
|
<div className="flex flex-col gap-2 px-3 py-3">
|
||||||
<h5 className="line-clamp-1 font-medium leading-none text-zinc-200">
|
<h5 className="line-clamp-1 font-medium leading-none text-zinc-200">
|
||||||
{data.title}
|
{data.title}
|
||||||
|
@ -1,27 +1,17 @@
|
|||||||
import { useState } from 'react';
|
import { useState } from 'react';
|
||||||
|
|
||||||
import { Button } from '@shared/button';
|
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 { usePublish } from '@utils/hooks/usePublish';
|
||||||
import { shortenKey } from '@utils/shortenKey';
|
|
||||||
|
|
||||||
export function NoteReplyForm({
|
export function NoteReplyForm({ id }: { id: string }) {
|
||||||
rootID,
|
|
||||||
userPubkey,
|
|
||||||
}: {
|
|
||||||
rootID: string;
|
|
||||||
userPubkey: string;
|
|
||||||
}) {
|
|
||||||
const publish = usePublish();
|
const publish = usePublish();
|
||||||
const { status, user } = useProfile(userPubkey);
|
|
||||||
const [value, setValue] = useState('');
|
const [value, setValue] = useState('');
|
||||||
|
|
||||||
const submit = () => {
|
const submit = () => {
|
||||||
const tags = [['e', rootID, FULL_RELAYS[0], 'root']];
|
const tags = [['e', id, FULL_RELAYS[0], 'reply']];
|
||||||
|
|
||||||
// publish event
|
// publish event
|
||||||
publish({ content: value, kind: 1, tags });
|
publish({ content: value, kind: 1, tags });
|
||||||
@ -48,22 +38,6 @@ export function NoteReplyForm({
|
|||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
<div className="flex w-full items-center justify-between">
|
<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">
|
<div className="flex items-center gap-2">
|
||||||
<Button
|
<Button
|
||||||
onClick={() => submit()}
|
onClick={() => submit()}
|
||||||
|
@ -72,7 +72,7 @@ export function User({
|
|||||||
>
|
>
|
||||||
<h5
|
<h5
|
||||||
className={`truncate font-semibold leading-none text-zinc-100 ${
|
className={`truncate font-semibold leading-none text-zinc-100 ${
|
||||||
size === 'small' ? 'max-w-[10rem]' : 'max-w-[18rem]'
|
size === 'small' ? 'max-w-[10rem]' : 'max-w-[15rem]'
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
{user?.nip05?.toLowerCase() ||
|
{user?.nip05?.toLowerCase() ||
|
||||||
|
@ -77,4 +77,5 @@ export const BLOCK_KINDS = {
|
|||||||
thread: 2,
|
thread: 2,
|
||||||
hashtag: 3,
|
hashtag: 3,
|
||||||
exchange_rate: 4,
|
exchange_rate: 4,
|
||||||
|
user: 5,
|
||||||
};
|
};
|
||||||
|
Loading…
Reference in New Issue
Block a user