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

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src-tauri/Cargo.toml
View File

@ -16,7 +16,7 @@ tauri-build = { version = "1.2", features = [] }
[dependencies]
serde_json = "1.0"
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-autostart = { git = "https://github.com/tauri-apps/plugins-workspace", branch = "v1" }
tauri-plugin-stronghold = { git = "https://github.com/tauri-apps/plugins-workspace", branch = "v1" }

3
src-tauri/tauri.conf.json
View File

@ -62,7 +62,8 @@
},
"window": {
"startDragging": true,
"close": true
"close": true,
"create": true
},
"process": {
"all": false,

10
src/app/space/components/blocks/thread.tsx
View File

@ -3,7 +3,13 @@ import { useMutation, useQueryClient } from '@tanstack/react-query';
// import { useLiveThread } from '@app/space/hooks/useLiveThread';
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 { NoteSkeleton } from '@shared/notes/skeleton';
import { TitleBar } from '@shared/titleBar';
@ -46,12 +52,14 @@ export function ThreadBlock({ params }: { params: Block }) {
<NoteContent content={data.content} />
</div>
<div>
<NoteActions id={data.id} pubkey={data.pubkey} noOpenThread={true} />
<NoteStats id={data.id} />
</div>
</div>
</div>
)}
<div className="px-3">
<NoteReplyForm id={params.content} />
<RepliesList id={params.content} />
</div>
</div>

141
src/app/space/components/blocks/user.tsx Normal file
View 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>
);
}

3
src/app/space/index.tsx
View File

@ -1,6 +1,7 @@
import { useQuery } from '@tanstack/react-query';
import { useCallback } from 'react';
import { UserBlock } from '@app/space//components/blocks/user';
import { AddBlock } from '@app/space/components/add';
import { FeedBlock } from '@app/space/components/blocks/feed';
import { FollowingBlock } from '@app/space/components/blocks/following';
@ -43,6 +44,8 @@ export function SpaceScreen() {
return <ThreadBlock key={block.id} params={block} />;
case 3:
return <HashtagBlock key={block.id} params={block} />;
case 5:
return <UserBlock key={block.id} params={block} />;
default:
break;
}

68
src/app/user/components/feed.tsx
View File

@ -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 { NoteKind_1, NoteSkeleton } from '@shared/notes';
import { nHoursAgo } from '@utils/date';
import { LumeEvent } from '@utils/types';
export function UserFeed({ pubkey }: { pubkey: string }) {
const parentRef = useRef();
const { fetcher, relayUrls } = useNDK();
const { status, data } = useQuery(['user-feed', pubkey], async () => {
const events = await fetcher.fetchAllEvents(
@ -17,5 +23,63 @@ export function UserFeed({ pubkey }: { pubkey: string }) {
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>
);
}

4
src/app/user/components/metadata.tsx
View File

@ -19,13 +19,13 @@ export function UserMetadata({ pubkey }: { pubkey: string }) {
<div className="flex w-full items-center gap-10">
<div className="inline-flex flex-col gap-1">
<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 className="text-sm leading-none text-zinc-400">Followers</span>
</div>
<div className="inline-flex flex-col gap-1">
<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 className="text-sm leading-none text-zinc-400">Following</span>
</div>

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()}

2
src/shared/user.tsx
View File

@ -72,7 +72,7 @@ export function User({
>
<h5
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() ||

1
src/stores/constants.tsx
View File

@ -77,4 +77,5 @@ export const BLOCK_KINDS = {
thread: 2,
hashtag: 3,
exchange_rate: 4,
user: 5,
};