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

polish

Browse Source
This commit is contained in:
Ren Amamiya
2023-08-06 15:11:58 +07:00
parent 71338b3b07
commit 02ff9e3b68
34 changed files with 321 additions and 320 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/app/auth/import/step-3.tsx
View File

@@ -1,3 +1,4 @@
import { useQueryClient } from '@tanstack/react-query';
import { useState } from 'react';
import { useNavigate } from 'react-router-dom';
@@ -13,6 +14,7 @@ import { useNostr } from '@utils/hooks/useNostr';
export function ImportStep3Screen() {
const navigate = useNavigate();
const queryClient = useQueryClient();
const [loading, setLoading] = useState(false);
@@ -29,6 +31,8 @@ export function ImportStep3Screen() {
await fetchChats();
await updateLastLogin(now);
queryClient.invalidateQueries(['currentAccount']);
navigate('/', { replace: true });
} catch (e) {
console.log('error: ', e);

2
src/app/chats/components/list.tsx
View File

@@ -23,7 +23,7 @@ export function ChatsList() {
const renderItem = useCallback(
(item: Chats) => {
if (account.pubkey !== item.sender_pubkey) {
if (account?.pubkey !== item.sender_pubkey) {
return <ChatsListItem key={item.sender_pubkey} data={item} />;
}
},

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

@@ -34,6 +34,7 @@ export function FeedBlock({ params }: { params: Block }) {
});
const itemsVirtualizer = rowVirtualizer.getVirtualItems();
const totalSize = rowVirtualizer.getTotalSize();
useEffect(() => {
const [lastItem] = [...rowVirtualizer.getVirtualItems()].reverse();
@@ -113,12 +114,9 @@ export function FeedBlock({ params }: { params: Block }) {
);
return (
<div
ref={parentRef}
className="scrollbar-hide relative h-full w-[400px] shrink-0 overflow-y-auto bg-white/10 pb-20"
>
<div className="relative w-[400px] shrink-0 bg-white/10">
<TitleBar id={params.id} title={params.title} />
<div className="h-full">
<div ref={parentRef} className="scrollbar-hide h-full overflow-y-auto pb-20">
{status === 'loading' ? (
<div className="px-3 py-1.5">
<div className="rounded-xl bg-white/10 px-3 py-3">
@@ -139,7 +137,7 @@ export function FeedBlock({ params }: { params: Block }) {
<div
className="relative w-full"
style={{
height: `${rowVirtualizer.getTotalSize()}px`,
height: `${totalSize}px`,
}}
>
<div

20
src/app/space/components/blocks/hashtag.tsx
View File

@@ -16,7 +16,7 @@ export function HashtagBlock({ params }: { params: Block }) {
const events = (await fetcher.fetchAllEvents(
relayUrls,
{ kinds: [1], '#t': [params.content] },
{ since: nHoursAgo(48) }
{ since: nHoursAgo(24) }
)) as unknown as LumeEvent[];
return events;
});
@@ -29,17 +29,15 @@ export function HashtagBlock({ params }: { params: Block }) {
});
const itemsVirtualizer = rowVirtualizer.getVirtualItems();
const totalSize = rowVirtualizer.getTotalSize();
return (
<div
ref={parentRef}
className="scrollbar-hide relative h-full w-[400px] shrink-0 overflow-y-auto bg-white/10 pb-20"
>
<TitleBar id={params.id} title={params.title + ' in 48 hours ago'} />
<div className="h-full">
<div className="relative w-[400px] shrink-0 bg-white/10">
<TitleBar id={params.id} title={params.title + ' in 24 hours ago'} />
<div ref={parentRef} className="scrollbar-hide h-full overflow-y-auto pb-20">
{status === 'loading' ? (
<div className="px-3 py-1.5">
<div className="rounded-xl bg-white/10 px-3 pt-3">
<div className="rounded-xl bg-white/10 px-3 py-3">
<NoteSkeleton />
</div>
</div>
@@ -47,8 +45,8 @@ export function HashtagBlock({ params }: { params: Block }) {
<div className="px-3 py-1.5">
<div className="rounded-xl bg-white/10 px-3 py-6">
<div className="flex flex-col items-center gap-4">
<p className="text-center text-sm text-white">
No new posts about this hashtag in 48 hours ago
<p className="text-center text-sm font-medium text-white">
No new posts about this hashtag in 24 hours ago
</p>
</div>
</div>
@@ -57,7 +55,7 @@ export function HashtagBlock({ params }: { params: Block }) {
<div
className="relative w-full"
style={{
height: `${rowVirtualizer.getTotalSize()}px`,
height: `${totalSize}px`,
}}
>
<div

6
src/app/space/components/blocks/image.tsx
View File

@@ -1,13 +1,13 @@
import { CancelIcon } from '@shared/icons';
import { Image } from '@shared/image';
import { useBlocks } from '@stores/blocks';
import { DEFAULT_AVATAR } from '@stores/constants';
import { useBlock } from '@utils/hooks/useBlock';
import { Block } from '@utils/types';
export function ImageBlock({ params }: { params: Block }) {
const { remove } = useBlock();
const removeBlock = useBlocks((state) => state.removeBlock);
return (
<div className="flex h-full w-[400px] shrink-0 flex-col justify-between">
@@ -17,7 +17,7 @@ export function ImageBlock({ params }: { params: Block }) {
<h3 className="font-medium text-white drop-shadow-lg">{params.title}</h3>
<button
type="button"
onClick={() => remove.mutate(params.id)}
onClick={() => removeBlock(params.id)}
className="inline-flex h-7 w-7 items-center justify-center rounded-md bg-white/30 backdrop-blur-lg"
>
<CancelIcon width={16} height={16} className="text-white" />

7
src/app/space/components/blocks/network.tsx
View File

@@ -126,12 +126,9 @@ export function NetworkBlock() {
);
return (
<div
ref={parentRef}
className="scrollbar-hide relative h-full w-[400px] shrink-0 overflow-y-auto bg-white/10 pb-20"
>
<div className="relative w-[400px] shrink-0 bg-white/10">
<TitleBar title="Network" />
<div className="h-full">
<div ref={parentRef} className="scrollbar-hide h-full overflow-y-auto pb-20">
{status === 'loading' ? (
<div className="px-3 py-1.5">
<div className="rounded-xl bg-white/10 px-3 py-3">

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

@@ -46,7 +46,7 @@ export function ThreadBlock({ params }: { params: Block }) {
</div>
)}
<div className="px-3">
<NoteReplyForm id={params.content} pubkey={account.pubkey} />
{account && <NoteReplyForm id={params.content} pubkey={account.pubkey} />}
<RepliesList id={params.content} />
</div>
</div>

7
src/app/space/components/blocks/user.tsx
View File

@@ -35,12 +35,9 @@ export function UserBlock({ params }: { params: Block }) {
const itemsVirtualizer = rowVirtualizer.getVirtualItems();
return (
<div
ref={parentRef}
className="scrollbar-hide h-full w-[400px] shrink-0 overflow-y-auto bg-white/10 pb-20"
>
<div className="relative w-[400px] shrink-0 bg-white/10">
<TitleBar id={params.id} title={params.title} />
<div className="h-full">
<div ref={parentRef} className="scrollbar-hide h-full overflow-y-auto pb-20">
<div className="px-3 pt-1.5">
<UserProfile pubkey={params.content} />
</div>

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

@@ -1,5 +1,4 @@
import { useQuery } from '@tanstack/react-query';
import { useCallback } from 'react';
import { useCallback, useEffect } from 'react';
import { FeedBlock } from '@app/space/components/blocks/feed';
import { HashtagBlock } from '@app/space/components/blocks/hashtag';
@@ -11,25 +10,14 @@ import { FeedModal } from '@app/space/components/modals/feed';
import { HashtagModal } from '@app/space/components/modals/hashtag';
import { ImageModal } from '@app/space/components/modals/image';
import { getBlocks } from '@libs/storage';
import { LoaderIcon } from '@shared/icons';
import { useBlocks } from '@stores/blocks';
import { Block } from '@utils/types';
export function SpaceScreen() {
const { status, data: blocks } = useQuery(
['blocks'],
async () => {
return await getBlocks();
},
{
staleTime: Infinity,
refetchOnMount: false,
refetchOnReconnect: false,
refetchOnWindowFocus: false,
}
);
const [blocks, fetchBlocks] = useBlocks((state) => [state.blocks, state.fetchBlocks]);
const renderBlock = useCallback(
(block: Block) => {
@@ -51,10 +39,14 @@ export function SpaceScreen() {
[blocks]
);
useEffect(() => {
fetchBlocks();
}, [fetchBlocks]);
return (
<div className="scrollbar-hide flex h-full w-full flex-nowrap divide-x divide-white/5 overflow-x-auto overflow-y-hidden">
<NetworkBlock />
{status === 'loading' ? (
{!blocks ? (
<div className="flex w-[350px] shrink-0 flex-col">
<div className="flex w-full flex-1 items-center justify-center p-3">
<LoaderIcon className="h-5 w-5 animate-spin text-white/10" />

14
src/app/users/components/profile.tsx
View File

@@ -52,7 +52,7 @@ export function UserProfile({ pubkey }: { pubkey: string }) {
return (
<>
<div className="h-56 w-full bg-zinc-100">
<div className="h-56 w-full bg-white">
<Image
src={user?.banner}
fallback="https://void.cat/d/QY1myro5tkHVs2nY7dy74b.jpg"
@@ -65,7 +65,7 @@ export function UserProfile({ pubkey }: { pubkey: string }) {
src={user?.picture || user?.image}
fallback={DEFAULT_AVATAR}
alt={pubkey}
className="h-14 w-14 rounded-md ring-2 ring-black"
className="h-14 w-14 rounded-md ring-2 ring-white/50"
/>
<div className="mt-2 flex flex-1 flex-col gap-4">
<div className="flex items-center gap-16">
@@ -81,7 +81,7 @@ export function UserProfile({ pubkey }: { pubkey: string }) {
{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"
className="inline-flex h-10 w-36 items-center justify-center rounded-md bg-white/10 text-sm font-medium hover:bg-fuchsia-500"
>
Loading...
</button>
@@ -89,7 +89,7 @@ export function UserProfile({ pubkey }: { pubkey: string }) {
<button
type="button"
onClick={() => unfollowUser(pubkey)}
className="inline-flex h-10 w-36 items-center justify-center rounded-md bg-zinc-900 text-sm font-medium hover:bg-fuchsia-500"
className="inline-flex h-10 w-36 items-center justify-center rounded-md bg-white/10 text-sm font-medium hover:bg-fuchsia-500"
>
Unfollow
</button>
@@ -97,18 +97,18 @@ export function UserProfile({ pubkey }: { pubkey: string }) {
<button
type="button"
onClick={() => followUser(pubkey)}
className="inline-flex h-10 w-36 items-center justify-center rounded-md bg-zinc-900 text-sm font-medium hover:bg-fuchsia-500"
className="inline-flex h-10 w-36 items-center justify-center rounded-md bg-white/10 text-sm font-medium hover:bg-fuchsia-500"
>
Follow
</button>
)}
<Link
to={`/chats/${pubkey}`}
className="inline-flex h-10 w-36 items-center justify-center rounded-md bg-zinc-900 text-sm font-medium hover:bg-fuchsia-500"
className="inline-flex h-10 w-36 items-center justify-center rounded-md bg-white/10 text-sm font-medium hover:bg-fuchsia-500"
>
Message
</Link>
<span className="mx-2 inline-flex h-4 w-px bg-zinc-900" />
<span className="mx-2 inline-flex h-4 w-px bg-white/10" />
{account && account.pubkey === pubkey && <EditProfileModal />}
</div>
</div>

22
src/app/users/index.tsx
View File

@@ -36,30 +36,30 @@ export function UserScreen() {
const itemsVirtualizer = rowVirtualizer.getVirtualItems();
return (
<div ref={parentRef} className="scrollbar-hide h-full w-full overflow-y-auto">
<div
data-tauri-drag-region
className="flex h-11 w-full items-center border-b border-zinc-900 px-3"
/>
<div
ref={parentRef}
className="scrollbar-hide relative h-full w-full overflow-y-auto bg-white/10"
>
<div data-tauri-drag-region className="absolute left-0 top-0 h-11 w-full" />
<UserProfile pubkey={pubkey} />
<div className="mt-8 h-full w-full border-t border-zinc-900">
<div className="mt-8 h-full w-full border-t border-white/5 px-1.5">
<div className="flex flex-col justify-start gap-1 px-3 pt-4 text-start">
<p className="text-lg font-semibold leading-none text-zinc-200">Latest posts</p>
<p className="text-lg font-semibold leading-none text-white">Latest posts</p>
<span className="text-sm leading-none text-white/50">48 hours ago</span>
</div>
<div className="flex h-full max-w-[400px] flex-col justify-between gap-1.5 pb-4 pt-1.5">
{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">
<div className="shadow-input rounded-xl bg-white/10">
<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="rounded-xl bg-white/10 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 className="text-center text-sm font-medium text-zinc-300">
No new posts in 48 hours ago
</p>
</div>
</div>