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

polish

Browse Source
This commit is contained in:
reya
2023-10-19 08:59:50 +07:00
parent 823fb0f239
commit 0de72eb009
39 changed files with 1882 additions and 4272 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/shared/notes/actions.tsx
+2 -4
View File
@@ -1,10 +1,8 @@
import * as Tooltip from '@radix-ui/react-tooltip';
import { Link } from 'react-router-dom';
import { useStorage } from '@libs/storage/provider';
import { FocusIcon, ThreadIcon } from '@shared/icons';
import { MoreActions } from '@shared/notes/actions/more';
import { FocusIcon } from '@shared/icons';
import { NoteReaction } from '@shared/notes/actions/reaction';
import { NoteReply } from '@shared/notes/actions/reply';
import { NoteRepost } from '@shared/notes/actions/repost';
@@ -50,7 +48,7 @@ export function NoteActions({
}
className="group inline-flex h-7 w-7 items-center justify-center text-neutral-500 dark:text-neutral-300"
>
<ThreadIcon className="h-5 w-5 group-hover:text-blue-500" />
<FocusIcon className="h-5 w-5 group-hover:text-blue-500" />
</button>
</Tooltip.Trigger>
<Tooltip.Portal>
src/shared/notes/actions/more.tsx
+2 -2
View File
@@ -25,8 +25,8 @@ export function MoreActions({ id, pubkey }: { id: string; pubkey: string }) {
return (
<DropdownMenu.Root open={open} onOpenChange={setOpen}>
<DropdownMenu.Trigger asChild>
<button type="button" className="inline-flex h-7 w-7 items-center justify-center">
<HorizontalDotsIcon className="h-5 w-5 text-neutral-800 hover:text-blue-500 dark:text-neutral-200" />
<button type="button" className="inline-flex h-6 w-6 items-center justify-center">
<HorizontalDotsIcon className="h-4 w-4 text-neutral-800 hover:text-blue-500 dark:text-neutral-200" />
</button>
</DropdownMenu.Trigger>
<DropdownMenu.Portal>
src/shared/notes/actions/repost.tsx
+2 -2
View File
@@ -65,12 +65,12 @@ export function NoteRepost({ id, pubkey }: { id: string; pubkey: string }) {
<AlertDialog.Portal>
<AlertDialog.Overlay className="fixed inset-0 z-50 bg-black/80 backdrop-blur-2xl" />
<AlertDialog.Content className="fixed inset-0 z-50 flex min-h-full items-center justify-center">
<div className="relative h-min w-full max-w-md rounded-xl bg-white/10 backdrop-blur-xl">
<div className="relative h-min w-full max-w-md rounded-xl bg-neutral-400 dark:bg-neutral-600">
<div className="flex flex-col gap-2 border-b border-white/5 px-5 py-4">
<AlertDialog.Title className="text-lg font-semibold leading-none text-white">
Confirm repost this post?
</AlertDialog.Title>
<AlertDialog.Description className="text-sm leading-tight text-white/50">
<AlertDialog.Description className="text-sm leading-tight text-neutral-600 dark:text-neutral-400">
Reposted post will be visible to your followers, and you cannot undo this
action.
</AlertDialog.Description>
src/shared/notes/actions/zap.tsx
+8 -8
View File
@@ -107,14 +107,14 @@ export function NoteZap({ id, pubkey }: { id: string; pubkey: string }) {
<Dialog.Portal>
<Dialog.Overlay className="fixed inset-0 z-50 bg-black" />
<Dialog.Content className="fixed inset-0 z-50 flex min-h-full items-center justify-center">
<div className="relative h-min w-full max-w-xl rounded-xl bg-white/10 backdrop-blur-xl">
<div className="relative h-min w-full max-w-xl rounded-xl bg-neutral-400 dark:bg-neutral-600">
<div className="inline-flex w-full shrink-0 items-center justify-between px-5 py-3">
<div className="w-6" />
<Dialog.Title className="text-center text-sm font-semibold leading-none text-white">
Send tip to {user?.name || user?.display_name || user?.displayName}
</Dialog.Title>
<Dialog.Close className="inline-flex h-6 w-6 items-center justify-center rounded-md backdrop-blur-xl hover:bg-white/10">
<CancelIcon className="h-4 w-4 text-white/50" />
<CancelIcon className="h-4 w-4 text-neutral-600 dark:text-neutral-400" />
</Dialog.Close>
</div>
<div className="overflow-y-auto overflow-x-hidden px-5 pb-5">
@@ -131,9 +131,9 @@ export function NoteZap({ id, pubkey }: { id: string; pubkey: string }) {
max={10000} // 1M sats
maxLength={10000} // 1M sats
onValueChange={(value) => setAmount(value)}
className="w-full flex-1 bg-transparent text-right text-4xl font-semibold text-white placeholder:text-white/50 focus:outline-none"
className="w-full flex-1 bg-transparent text-right text-4xl font-semibold text-white placeholder:text-neutral-600 focus:outline-none dark:text-neutral-400"
/>
<span className="w-full flex-1 text-left text-4xl font-semibold text-white/50">
<span className="w-full flex-1 text-left text-4xl font-semibold text-neutral-600 dark:text-neutral-400">
sats
</span>
</div>
@@ -185,7 +185,7 @@ export function NoteZap({ id, pubkey }: { id: string; pubkey: string }) {
autoCorrect="off"
autoCapitalize="off"
placeholder="Enter message (optional)"
className="relative min-h-[56px] w-full resize-none rounded-lg bg-white/10 px-3 py-2 !outline-none backdrop-blur-xl placeholder:text-white/50"
className="relative min-h-[56px] w-full resize-none rounded-lg bg-white/10 px-3 py-2 !outline-none backdrop-blur-xl placeholder:text-neutral-600 dark:text-neutral-400"
/>
<div className="flex flex-col gap-2">
{walletConnectURL ? (
@@ -199,14 +199,14 @@ export function NoteZap({ id, pubkey }: { id: string; pubkey: string }) {
) : isLoading ? (
<span className="flex flex-col">
<p className="mb-px leading-none">Waiting for approval</p>
<p className="text-xs leading-none text-white/70">
<p className="text-xs leading-none text-neutral-600 dark:text-neutral-400">
Go to your wallet and approve payment request
</p>
</span>
) : (
<span className="flex flex-col">
<p className="mb-px leading-none">Send tip</p>
<p className="text-xs leading-none text-white/70">
<p className="text-xs leading-none text-neutral-600 dark:text-neutral-400">
You&apos;re using nostr wallet connect
</p>
</span>
@@ -233,7 +233,7 @@ export function NoteZap({ id, pubkey }: { id: string; pubkey: string }) {
<h3 className="text-lg font-medium leading-none text-white">
Scan to pay
</h3>
<span className="text-center text-sm text-white/50">
<span className="text-center text-sm text-neutral-600 dark:text-neutral-400">
You must use Bitcoin wallet which support Lightning
<br />
such as: Blue Wallet, Bitkit, Phoenix,...
src/shared/notes/kinds/file.tsx
+1 -1
View File
@@ -36,7 +36,7 @@ export function FileNote(props: { event?: NDKEvent }) {
if (type === 'video') {
return (
<div className="mb-2 mt-3">
<MediaController key={url} className="aspect-video">
<MediaController key={url} className="aspect-video overflow-hidden rounded-lg">
<video
slot="media"
src={url}
src/shared/notes/metadata.tsx
+3 -3
View File
@@ -100,12 +100,12 @@ export function NoteMetadata({ id }: { id: string }) {
content: id,
})
}
className="text-white/50"
className="text-neutral-600 dark:text-neutral-400"
>
<span className="font-semibold text-white">{data.replies}</span> replies
</button>
<span className="text-white/50">·</span>
<p className="text-white/50">
<span className="text-neutral-600 dark:text-neutral-400">·</span>
<p className="text-neutral-600 dark:text-neutral-400">
<span className="font-semibold text-white">
{compactNumber.format(data.zap)}
</span>{' '}
src/shared/notes/preview/link.tsx
+6 -6
View File
@@ -10,11 +10,11 @@ export function LinkPreview({ urls }: { urls: string[] }) {
<div className="my-2">
{status === 'loading' ? (
<div className="flex flex-col bg-neutral-200 dark:bg-neutral-800">
<div className="h-44 w-full animate-pulse bg-white/10 backdrop-blur-xl" />
<div className="h-44 w-full animate-pulse bg-neutral-400 dark:bg-neutral-600" />
<div className="flex flex-col gap-2 px-3 py-3">
<div className="h-3 w-2/3 animate-pulse rounded bg-white/10 backdrop-blur-xl" />
<div className="h-3 w-3/4 animate-pulse rounded bg-white/10 backdrop-blur-xl" />
<span className="mt-2.5 text-sm leading-none text-white/50">
<div className="h-3 w-2/3 animate-pulse rounded bg-neutral-400 dark:bg-neutral-600" />
<div className="h-3 w-3/4 animate-pulse rounded bg-neutral-400 dark:bg-neutral-600" />
<span className="mt-2.5 text-sm leading-none text-neutral-600 dark:text-neutral-400">
{domain.hostname}
</span>
</div>
@@ -24,11 +24,11 @@ export function LinkPreview({ urls }: { urls: string[] }) {
to={urls[0]}
target="_blank"
rel="noreferrer"
className="flex flex-col rounded-lg bg-neutral-200 dark:bg-neutral-800"
className="flex flex-col rounded-lg border border-neutral-300 bg-neutral-200 dark:border-neutral-700 dark:bg-neutral-800"
>
{error ? (
<div className="flex flex-col gap-2 px-3 py-3">
<p className="text-sm text-white/50">
<p className="text-sm text-neutral-600 dark:text-neutral-400">
Can&apos;t fetch open graph, click to open webpage
</p>
<span className="text-sm leading-none text-neutral-900 dark:text-neutral-100">
src/shared/notes/replies/item.tsx
+4 -7
View File
@@ -1,4 +1,4 @@
import { NoteActions, SubReply, TextNote } from '@shared/notes';
import { MemoizedTextNote, NoteActions, SubReply } from '@shared/notes';
import { User } from '@shared/user';
import { NDKEventWithReplies } from '@utils/types';
@@ -6,16 +6,13 @@ import { NDKEventWithReplies } from '@utils/types';
export function Reply({ event, root }: { event: NDKEventWithReplies; root?: string }) {
return (
<div className="relative h-min w-full">
{event?.replies?.length > 0 && (
<div className="absolute -left-3 top-0 h-[calc(100%-1.2rem)] w-px bg-gradient-to-t from-blue-200 via-red-200 to-orange-300" />
)}
<div className="relative z-10">
<div className="relative flex flex-col">
<User pubkey={event.pubkey} time={event.created_at} />
<div className="-mt-5 flex items-start gap-3">
<User pubkey={event.pubkey} time={event.created_at} eventId={event.id} />
<div className="-mt-4 flex items-start gap-3">
<div className="w-10 shrink-0" />
<div className="flex-1">
<TextNote content={event.content} />
<MemoizedTextNote content={event.content} />
<NoteActions
id={event.id}
pubkey={event.pubkey}
src/shared/notes/replies/list.tsx
+8 -8
View File
@@ -37,10 +37,8 @@ export function RepliesList({ id }: { id: string }) {
if (!data) {
return (
<div className="mt-5 pb-10">
<div className="flex flex-col">
<div className="rounded-xl bg-white/10 px-3 py-3 backdrop-blur-xl">
<NoteSkeleton />
</div>
<div className="rounded-xl bg-neutral-100 px-3 py-3 dark:bg-neutral-900">
<NoteSkeleton />
</div>
</div>
);
@@ -48,15 +46,17 @@ export function RepliesList({ id }: { id: string }) {
return (
<div className="mt-5 pb-10">
<h5 className="mb-2 text-lg font-semibold text-white">
<h5 className="mb-2 text-lg font-semibold text-neutral-900 dark:text-neutral-100">
{data?.length || 0} replies
</h5>
<div className="flex flex-col gap-5">
<div className="flex flex-col gap-2">
{data?.length === 0 ? (
<div className="mt-2 flex w-full items-center justify-center rounded-xl bg-white/10 backdrop-blur-xl">
<div className="mt-2 flex w-full items-center justify-center rounded-xl bg-neutral-400 dark:bg-neutral-600">
<div className="flex flex-col items-center justify-center gap-2 py-6">
<h3 className="text-3xl">👋</h3>
<p className="leading-none text-white/50">Share your thought on it...</p>
<p className="leading-none text-neutral-600 dark:text-neutral-400">
Share your thought on it...
</p>
</div>
</div>
) : (
src/shared/notes/replies/sub.tsx
+4 -4
View File
@@ -1,16 +1,16 @@
import { NDKEvent } from '@nostr-dev-kit/ndk';
import { NoteActions, TextNote } from '@shared/notes';
import { MemoizedTextNote, NoteActions } from '@shared/notes';
import { User } from '@shared/user';
export function SubReply({ event }: { event: NDKEvent }) {
return (
<div className="relative z-10 mb-3 mt-5 flex flex-col">
<User pubkey={event.pubkey} time={event.created_at} />
<div className="-mt-5 flex items-start gap-3">
<User pubkey={event.pubkey} time={event.created_at} eventId={event.id} />
<div className="-mt-4 flex items-start gap-3">
<div className="w-10 shrink-0" />
<div className="flex-1">
<TextNote content={event.content} />
<MemoizedTextNote content={event.content} />
<NoteActions id={event.id} pubkey={event.pubkey} extraButtons={false} />
</div>
</div>
src/shared/notes/skeleton.tsx
+5 -5
View File
@@ -2,15 +2,15 @@ export function NoteSkeleton() {
return (
<div className="flex h-min flex-col">
<div className="flex items-start gap-3">
<div className="relative h-11 w-11 shrink overflow-hidden rounded-lg bg-white/10 backdrop-blur-xl" />
<div className="h-3 w-20 rounded bg-white/10 backdrop-blur-xl" />
<div className="relative h-11 w-11 shrink overflow-hidden rounded-lg bg-neutral-400 dark:bg-neutral-600" />
<div className="h-3 w-20 rounded bg-neutral-400 dark:bg-neutral-600" />
</div>
<div className="-mt-5 flex animate-pulse gap-3">
<div className="w-10 shrink-0" />
<div className="flex flex-col gap-1">
<div className="h-3 w-full rounded bg-white/10 backdrop-blur-xl" />
<div className="h-3 w-2/3 rounded bg-white/10 backdrop-blur-xl" />
<div className="h-3 w-1/2 rounded bg-white/10 backdrop-blur-xl" />
<div className="h-3 w-full rounded bg-neutral-400 dark:bg-neutral-600" />
<div className="h-3 w-2/3 rounded bg-neutral-400 dark:bg-neutral-600" />
<div className="h-3 w-1/2 rounded bg-neutral-400 dark:bg-neutral-600" />
</div>
</div>
</div>