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-19 15:27:10 +07:00
parent 08e3a66ece
commit bac70b19ec
20 changed files with 117 additions and 142 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/app/auth/unlock.tsx
View File

@@ -74,17 +74,17 @@ export function UnlockScreen() {
<div className="mb-6 text-center">
<h1 className="text-2xl font-semibold text-white">Enter password to unlock</h1>
</div>
<div className="mb-4 w-full rounded-xl bg-white/5 p-4">
<User pubkey={db.account.pubkey} />
</div>
<form onSubmit={handleSubmit(onSubmit)} className="mb-0 flex flex-col gap-3">
<div className="flex flex-col gap-1">
<form onSubmit={handleSubmit(onSubmit)} className="mb-0 flex flex-col gap-1">
<div className="flex flex-col rounded-lg bg-white/5">
<div className="w-full rounded-t-lg border-b border-white/10 bg-white/5 p-4">
<User pubkey={db.account.pubkey} />
</div>
<div className="relative">
<input
{...register('password', { required: true, minLength: 4 })}
type={'password'}
placeholder="Password"
className="relative h-12 w-full rounded-lg bg-white/10 py-1 text-center text-white !outline-none placeholder:text-white/50"
className="relative h-12 w-full rounded-b-lg bg-white/10 py-1 text-center text-white !outline-none placeholder:text-white/50"
/>
<button
type="button"
@@ -98,11 +98,11 @@ export function UnlockScreen() {
)}
</button>
</div>
<span className="text-sm text-red-400">
{errors.password && <p>{errors.password.message}</p>}
</span>
</div>
<div className="flex flex-col items-center justify-center">
<span className="mb-3 text-sm text-red-400">
{errors.password && <p>{errors.password.message}</p>}
</span>
<button
type="submit"
disabled={!isDirty || !isValid}

4
src/app/error.tsx
View File

@@ -33,8 +33,8 @@ export function ErrorScreen() {
}, []);
return (
<div className="flex h-full w-full items-center justify-center bg-black/90">
<div className="flex flex-col gap-4">
<div className="flex h-full items-center justify-center bg-black/90">
<div className="flex max-w-lg flex-col gap-4">
<div className="flex flex-col">
<h1 className="mb-1 text-2xl font-semibold text-white">
Sorry, an unexpected error has occurred.

7
src/app/trending/components/profile.tsx → src/app/space/components/userProfile.tsx
View File

@@ -8,7 +8,12 @@ import { useSocial } from '@utils/hooks/useSocial';
import { compactNumber } from '@utils/number';
import { shortenKey } from '@utils/shortenKey';
export function Profile({ data }: { data: any }) {
export interface Profile {
pubkey: string;
profile: { content: string };
}
export function UserProfile({ data }: { data: Profile }) {
const { status: socialStatus, userFollows, follow, unfollow } = useSocial();
const { status, data: userStats } = useQuery(
['user-stats', data.pubkey],

4
src/app/space/components/widgets/thread.tsx
View File

@@ -15,11 +15,11 @@ import { useEvent } from '@utils/hooks/useEvent';
import { Widget } from '@utils/types';
export function ThreadBlock({ params }: { params: Widget }) {
const { status, data } = useEvent(params.content);
const { db } = useStorage();
const { status, data } = useEvent(params.content);
return (
<div className="scrollbar-hide h-full w-[400px] shrink-0 overflow-y-auto bg-white/10 pb-20">
<div className="scrollbar-hide h-full w-[400px] shrink-0 overflow-y-auto bg-white/10">
<TitleBar id={params.id} title={params.title} />
<div className="h-full">
{status === 'loading' ? (

19
src/app/trending/components/trendingNotes.tsx → src/app/space/components/widgets/trendingNotes.tsx
View File

@@ -1,20 +1,21 @@
import { NDKEvent } from '@nostr-dev-kit/ndk';
import { useQuery } from '@tanstack/react-query';
import { NoteKind_1 } from '@shared/notes';
import { NoteSkeleton } from '@shared/notes/skeleton';
import { TitleBar } from '@shared/titleBar';
import { LumeEvent } from '@utils/types';
import { Widget } from '@utils/types';
interface Response {
notes: Array<{ event: LumeEvent }>;
notes: Array<{ event: NDKEvent }>;
}
export function TrendingNotes() {
export function TrendingNotesWidget({ params }: { params: Widget }) {
const { status, data } = useQuery(
['trending-notes'],
async () => {
const res = await fetch('https://api.nostr.band/v0/trending/notes');
const res = await fetch(params.content);
if (!res.ok) {
throw new Error('failed to fecht trending notes');
}
@@ -32,7 +33,7 @@ export function TrendingNotes() {
return (
<div className="scrollbar-hide relative h-full w-[400px] shrink-0 overflow-y-auto bg-white/10 pb-20">
<TitleBar title="Trending Posts" />
<TitleBar title={params.title} />
<div className="h-full">
{status === 'loading' ? (
<div className="px-3 py-1.5">
@@ -41,7 +42,13 @@ export function TrendingNotes() {
</div>
</div>
) : status === 'error' ? (
<p>Failed to fetch</p>
<div className="px-3 py-1.5">
<div className="rounded-xl bg-white/10 px-3 py-3">
<p className="text-center text-sm font-medium text-white">
Sorry, an unexpected error has occurred.
</p>
</div>
</div>
) : (
<div className="relative flex w-full flex-col">
{data.map((item) => (

24
src/app/trending/components/trendingProfiles.tsx → src/app/space/components/widgets/trendingProfile.tsx
View File

@@ -1,24 +1,26 @@
import { useQuery } from '@tanstack/react-query';
import { Profile } from '@app/trending/components/profile';
import { type Profile, UserProfile } from '@app/space/components/userProfile';
import { NoteSkeleton } from '@shared/notes/skeleton';
import { TitleBar } from '@shared/titleBar';
import { Widget } from '@utils/types';
interface Response {
profiles: Array<{ pubkey: string }>;
}
export function TrendingProfiles() {
export function TrendingProfilesWidget({ params }: { params: Widget }) {
const { status, data } = useQuery(
['trending-profiles'],
async () => {
const res = await fetch('https://api.nostr.band/v0/trending/profiles');
const res = await fetch(params.content);
if (!res.ok) {
throw new Error('Error');
}
const json: Response = await res.json();
if (!json.profiles) return null;
if (!json.profiles) return [];
return json.profiles;
},
{
@@ -31,7 +33,7 @@ export function TrendingProfiles() {
return (
<div className="scrollbar-hide relative h-full w-[400px] shrink-0 overflow-y-auto bg-white/10 pb-20">
<TitleBar title="Trending Profiles" />
<TitleBar title={params.title} />
<div className="h-full">
{status === 'loading' ? (
<div className="px-3 py-1.5">
@@ -40,11 +42,17 @@ export function TrendingProfiles() {
</div>
</div>
) : status === 'error' ? (
<p>Failed to fetch</p>
<div className="px-3 py-1.5">
<div className="rounded-xl bg-white/10 px-3 py-3">
<p className="text-center text-sm font-medium text-white">
Sorry, an unexpected error has occurred.
</p>
</div>
</div>
) : (
<div className="relative flex w-full flex-col gap-3 px-3 pt-1.5">
{data.map((item) => (
<Profile key={item.pubkey} data={item} />
{data.map((item: Profile) => (
<UserProfile key={item.pubkey} data={item} />
))}
</div>
)}

15
src/app/space/components/widgets/user.tsx
View File

@@ -11,7 +11,7 @@ import { TitleBar } from '@shared/titleBar';
import { UserProfile } from '@shared/userProfile';
import { nHoursAgo } from '@utils/date';
import { DBEvent, Widget } from '@utils/types';
import { Widget } from '@utils/types';
export function UserWidget({ params }: { params: Widget }) {
const { ndk } = useNDK();
@@ -19,13 +19,18 @@ export function UserWidget({ params }: { params: Widget }) {
['user-widget', params.content],
async () => {
const events = await ndk.fetchEvents({
kinds: [1],
kinds: [1, 6],
authors: [params.content],
since: nHoursAgo(24),
});
return [...events] as unknown as DBEvent[];
return [...events] as unknown as NDKEvent[];
},
{ refetchOnMount: false, refetchOnReconnect: false, refetchOnWindowFocus: false }
{
staleTime: Infinity,
refetchOnMount: false,
refetchOnReconnect: false,
refetchOnWindowFocus: false,
}
);
const parentRef = useRef<HTMLDivElement>(null);
@@ -87,7 +92,7 @@ export function UserWidget({ params }: { params: Widget }) {
<div className="flex h-full w-full flex-col justify-between gap-1.5 pb-10">
{status === 'loading' ? (
<div className="px-3 py-1.5">
<div className="rounded-md bg-white/10 px-3 py-3">
<div className="rounded-xl bg-white/10 px-3 py-3">
<NoteSkeleton />
</div>
</div>

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

@@ -68,7 +68,7 @@ export function SpaceScreen() {
<HashtagModal />
</div>
</div>
<div className="w-[150px] shrink-0" />
<div className="w-[250px] shrink-0" />
</div>
);
}

11
src/app/trending/index.tsx
View File

@@ -1,11 +0,0 @@
import { TrendingNotes } from '@app/trending/components/trendingNotes';
import { TrendingProfiles } from '@app/trending/components/trendingProfiles';
export function TrendingScreen() {
return (
<div className="scrollbar-hide flex h-full w-full flex-nowrap divide-x divide-white/5 overflow-x-auto overflow-y-hidden">
<TrendingProfiles />
<TrendingNotes />
</div>
);
}