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

updated newsfeed note ui

Browse Source
This commit is contained in:
Ren Amamiya
2023-04-17 14:01:09 +07:00
parent 8b67253c0a
commit dfe5e4533e
14 changed files with 75 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/app/newsfeed/following/page.tsx
View File

@@ -73,9 +73,9 @@ export default function Page() {
const result: any = await getLatestNotes({ date: dateToUnix(now.current) });
// update data
if (Array.isArray(result)) {
setData((data) => [...data, ...result]);
setData((data) => [...result, ...data]);
} else {
setData((data) => [...data, result]);
setData((data) => [result, ...data]);
}
// hide newer trigger
setHasNewerNote(false);

5
src/assets/global.css
View File

@@ -20,11 +20,6 @@
scrollbar-width: none; /* Firefox */
}
.bg-gradient-radial-page {
background: radial-gradient(52.56% 52.56% at 50% 117.61%, #1c1c21 0, rgba(28, 28, 33, 0) 100%),
radial-gradient(63.94% 63.94% at 50% 0, #1c1c21 0, rgba(28, 28, 33, 0) 78.13%), #07070d;
}
.border {
background-clip: padding-box;
}

8
src/components/note/base.tsx
View File

@@ -44,12 +44,8 @@ export const NoteBase = memo(function NoteBase({ event }: { event: any }) {
<div onClick={(e) => openUserPage(e)}>
<UserExtend pubkey={event.pubkey} time={event.createdAt || event.created_at} />
</div>
<div className="-mt-5 pl-[52px]">
<div className="flex flex-col gap-2">
<div className="prose prose-zinc max-w-none whitespace-pre-line break-words text-[15px] leading-tight dark:prose-invert prose-p:m-0 prose-p:text-[15px] prose-p:leading-tight prose-a:font-normal prose-a:text-fuchsia-500 prose-a:no-underline prose-img:m-0 prose-video:m-0">
{content}
</div>
</div>
<div className="mt-1 pl-[52px]">
<div className="whitespace-pre-line break-words text-[15px] leading-tight text-zinc-100">{content}</div>
</div>
<div onClick={(e) => e.stopPropagation()} className="mt-5 pl-[52px]">
<NoteMetadata

4
src/components/note/meta/comment.tsx
View File

@@ -6,7 +6,7 @@ import { dateToUnix } from '@utils/getDate';
import * as Dialog from '@radix-ui/react-dialog';
import useLocalStorage from '@rehooks/local-storage';
import { MultiBubble, OpenNewWindow } from 'iconoir-react';
import { ChatLines, OpenNewWindow } from 'iconoir-react';
import { useRouter } from 'next/navigation';
import { getEventHash, signEvent } from 'nostr-tools';
import { useContext, useState } from 'react';
@@ -57,7 +57,7 @@ export const NoteComment = ({
<Dialog.Trigger asChild>
<button className="group flex w-16 items-center gap-1 text-sm text-zinc-500">
<div className="rounded-md p-1 group-hover:bg-zinc-800">
<MultiBubble width={20} height={20} className="text-zinc-500" />
<ChatLines width={20} height={20} className="text-zinc-500" />
</div>
<span>{count}</span>
</button>

8
src/components/note/parent.tsx
View File

@@ -82,12 +82,8 @@ export const NoteParent = memo(function NoteParent({ id }: { id: string }) {
<div className="absolute left-[21px] top-0 h-full w-0.5 bg-gradient-to-t from-zinc-800 to-zinc-600"></div>
<div className="relative z-10 flex flex-col">
<UserExtend pubkey={event.pubkey} time={event.createdAt || event.created_at} />
<div className="-mt-5 pl-[52px]">
<div className="flex flex-col gap-2">
<div className="prose prose-zinc max-w-none whitespace-pre-line break-words text-[15px] leading-tight dark:prose-invert prose-p:m-0 prose-p:text-[15px] prose-p:leading-tight prose-a:font-normal prose-a:text-fuchsia-500 prose-a:no-underline prose-img:m-0 prose-video:m-0">
{content}
</div>
</div>
<div className="mt-1 pl-[52px]">
<div className="whitespace-pre-line break-words text-[15px] leading-tight text-zinc-100">{content}</div>
</div>
<div onClick={(e) => e.stopPropagation()} className="mt-5 pl-[52px]">
<NoteMetadata

4
src/components/note/preview/image.tsx
View File

@@ -4,7 +4,9 @@ import { memo } from 'react';
export const ImagePreview = memo(function ImagePreview({ url, size }: { url: string; size: string }) {
return (
<div
className={`relative h-full ${size === 'large' ? 'w-full' : 'w-2/3'} rounded-lg border border-zinc-800 xl:w-2/3`}
className={`relative h-full ${
size === 'large' ? 'w-full' : 'w-2/3'
} mt-2 rounded-lg border border-zinc-800 xl:w-2/3`}
>
<Image
src={url}

2
src/components/note/preview/video.tsx
View File

@@ -3,7 +3,7 @@ import ReactPlayer from 'react-player/lazy';
export const VideoPreview = memo(function VideoPreview({ url }: { url: string }) {
return (
<div onClick={(e) => e.stopPropagation()} className="relative flex flex-col overflow-hidden rounded-lg">
<div onClick={(e) => e.stopPropagation()} className="relative mt-2 flex flex-col overflow-hidden rounded-lg">
<ReactPlayer
url={url}
controls={true}

8
src/components/note/quote.tsx
View File

@@ -81,12 +81,8 @@ export const NoteQuote = memo(function NoteQuote({ id }: { id: string }) {
<div className="relative mb-2 mt-3 rounded-lg border border-zinc-700 bg-zinc-800 p-2 py-3">
<div className="relative z-10 flex flex-col">
<UserExtend pubkey={event.pubkey} time={event.createdAt || event.created_at} />
<div className="-mt-5 pl-[52px]">
<div className="flex flex-col gap-2">
<div className="prose prose-zinc max-w-none whitespace-pre-line break-words text-[15px] leading-tight dark:prose-invert prose-p:m-0 prose-p:text-[15px] prose-p:leading-tight prose-a:font-normal prose-a:text-fuchsia-500 prose-a:no-underline prose-img:m-0 prose-video:m-0">
{content}
</div>
</div>
<div className="mt-1 pl-[52px]">
<div className="whitespace-pre-line break-words text-[15px] leading-tight text-zinc-100">{content}</div>
</div>
</div>
</div>

8
src/components/note/rootNote.tsx
View File

@@ -69,12 +69,8 @@ export const RootNote = memo(function RootNote({ event }: { event: any }) {
<div onClick={(e) => openUserPage(e)}>
<UserExtend pubkey={data.pubkey} time={data.created_at} />
</div>
<div className="-mt-5 pl-[52px]">
<div className="flex flex-col gap-2">
<div className="prose prose-zinc max-w-none whitespace-pre-line break-words text-[15px] leading-tight dark:prose-invert prose-p:m-0 prose-p:text-[15px] prose-p:leading-tight prose-a:font-normal prose-a:text-fuchsia-500 prose-a:no-underline prose-img:m-0 prose-video:m-0">
{content}
</div>
</div>
<div className="mt-1 pl-[52px]">
<div className="whitespace-pre-line break-words text-[15px] leading-tight text-zinc-100">{content}</div>
</div>
<div onClick={(e) => e.stopPropagation()} className="mt-5 pl-[52px]">
<NoteMetadata

26
src/components/user/extend.tsx
View File

@@ -3,11 +3,10 @@ import { ImageWithFallback } from '@components/imageWithFallback';
import { DEFAULT_AVATAR } from '@stores/constants';
import { useProfileMetadata } from '@utils/hooks/useProfileMetadata';
import { truncate } from '@utils/truncate';
import { shortenKey } from '@utils/shortenKey';
import dayjs from 'dayjs';
import relativeTime from 'dayjs/plugin/relativeTime';
import { MoreHoriz } from 'iconoir-react';
dayjs.extend(relativeTime);
@@ -15,7 +14,7 @@ export const UserExtend = ({ pubkey, time }: { pubkey: string; time: number }) =
const profile = useProfileMetadata(pubkey);
return (
<div className="group flex items-start gap-2">
<div className="group flex h-11 items-center gap-2">
<div className="relative h-11 w-11 shrink overflow-hidden rounded-md bg-white">
<ImageWithFallback
src={profile?.picture || DEFAULT_AVATAR}
@@ -25,19 +24,16 @@ export const UserExtend = ({ pubkey, time }: { pubkey: string; time: number }) =
/>
</div>
<div className="flex w-full flex-1 items-start justify-between">
<div className="flex w-full justify-between">
<div className="flex items-baseline gap-2 text-sm">
<span className="font-bold leading-tight group-hover:underline">
{profile?.display_name || profile?.name || truncate(pubkey, 16, ' .... ')}
</span>
<span className="leading-tight text-zinc-500">·</span>
<span className="text-zinc-500">{dayjs().to(dayjs.unix(time))}</span>
</div>
<div>
<button className="inline-flex h-5 w-5 items-center justify-center rounded hover:bg-zinc-800">
<MoreHoriz width={12} height={12} className="text-zinc-500" />
</button>
<div className="flex flex-col gap-1">
<div className="flex items-baseline gap-2">
<h5 className="text-sm font-semibold leading-none group-hover:underline">
{profile?.display_name || profile?.name || shortenKey(pubkey)}
</h5>
<span className="text-sm leading-none text-zinc-700"></span>
</div>
<span className="text-sm leading-none text-zinc-500">
{profile?.nip05 || shortenKey(pubkey)} • {dayjs().to(dayjs.unix(time))}
</span>
</div>
</div>
</div>

8
src/utils/parser.tsx
View File

@@ -7,7 +7,7 @@ import destr from 'destr';
import reactStringReplace from 'react-string-replace';
export const contentParser = (noteContent, noteTags) => {
let parsedContent = noteContent;
let parsedContent = noteContent.trim();
// get data tags
const tags = destr(noteTags);
@@ -24,7 +24,7 @@ export const contentParser = (noteContent, noteTags) => {
return <VideoPreview key={match + i} url={match} />;
} else {
return (
<a key={match + i} href={match} target="_blank" rel="noreferrer">
<a key={match + i} href={match} className="cursor-pointer text-fuchsia-500" target="_blank" rel="noreferrer">
{match}
</a>
);
@@ -55,7 +55,7 @@ export const contentParser = (noteContent, noteTags) => {
};
export const messageParser = (noteContent) => {
let parsedContent = noteContent;
let parsedContent = noteContent.trim();
// handle urls
parsedContent = reactStringReplace(parsedContent, /(https?:\/\/\S+)/g, (match, i) => {
@@ -70,7 +70,7 @@ export const messageParser = (noteContent) => {
return <VideoPreview key={match + i} url={match} />;
} else {
return (
<a key={match + i} href={match} target="_blank" rel="noreferrer">
<a key={match + i} href={match} className="cursor-pointer text-fuchsia-500" target="_blank" rel="noreferrer">
{match}
</a>
);

6
src/utils/shortenKey.tsx Normal file
View File

@@ -0,0 +1,6 @@
import { nip19 } from 'nostr-tools';
export const shortenKey = (pubkey: string) => {
const npub = nip19.npubEncode(pubkey);
return npub.substring(0, 16).concat('...');
};