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

rename some files and add nip 94 widget

Browse Source
This commit is contained in:
Ren Amamiya
2023-08-23 15:18:59 +07:00
parent c97c685149
commit 3455eb701f
34 changed files with 145 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/space/components/widgets/article.tsx
View File

@@ -47,7 +47,7 @@ export function ArticleWidget({ params }: { params: Widget }) {
);
return (
<div className="relative w-[400px] shrink-0 bg-white/10">
<div className="relative shrink-0 grow-0 basis-[400px] bg-white/10">
<TitleBar id={params.id} title={params.title} />
<div ref={parentRef} className="scrollbar-hide h-full overflow-y-auto pb-20">
{status === 'loading' ? (

2
src/app/space/components/widgets/feed.tsx
View File

@@ -116,7 +116,7 @@ export function FeedWidget({ params }: { params: Widget }) {
);
return (
<div className="relative w-[400px] shrink-0 bg-white/10">
<div className="relative shrink-0 grow-0 basis-[400px] bg-white/10">
<TitleBar id={params.id} title={params.title} />
<div ref={parentRef} className="scrollbar-hide h-full overflow-y-auto pb-20">
{status === 'loading' ? (

90
src/app/space/components/widgets/file.tsx Normal file
View File

@@ -0,0 +1,90 @@
import { NDKEvent } from '@nostr-dev-kit/ndk';
import { useQuery } from '@tanstack/react-query';
import { useVirtualizer } from '@tanstack/react-virtual';
import { useCallback, useRef } from 'react';
import { useNDK } from '@libs/ndk/provider';
import { FileNote, NoteSkeleton, NoteWrapper } from '@shared/notes';
import { TitleBar } from '@shared/titleBar';
import { Widget } from '@utils/types';
export function FileWidget({ params }: { params: Widget }) {
const { ndk } = useNDK();
const { status, data } = useQuery(['file-widget', params.content], async () => {
const events = await ndk.fetchEvents({
kinds: [1063],
limit: 100,
});
return [...events] as unknown as NDKEvent[];
});
const parentRef = useRef<HTMLDivElement>(null);
const virtualizer = useVirtualizer({
count: data ? data.length : 0,
getScrollElement: () => parentRef.current,
estimateSize: () => 650,
overscan: 4,
});
const items = virtualizer.getVirtualItems();
// render event match event kind
const renderItem = useCallback(
(index: string | number) => {
const event: NDKEvent = data[index];
if (!event) return;
return (
<div key={event.id} data-index={index} ref={virtualizer.measureElement}>
<NoteWrapper event={event}>
<FileNote event={event} />
</NoteWrapper>
</div>
);
},
[data]
);
return (
<div className="relative shrink-0 grow-0 basis-[400px] bg-white/10">
<TitleBar id={params.id} title={params.title} />
<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">
<NoteSkeleton />
</div>
</div>
) : items.length === 0 ? (
<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 font-medium text-white">
There have been no new files in the last 24 hours.
</p>
</div>
</div>
</div>
) : (
<div
style={{
position: 'relative',
width: '100%',
height: `${virtualizer.getTotalSize()}px`,
}}
>
<div
className="absolute left-0 top-0 w-full"
style={{
transform: `translateY(${items[0].start}px)`,
}}
>
{items.map((item) => renderItem(item.index))}
</div>
</div>
)}
</div>
</div>
);
}

2
src/app/space/components/widgets/hashtag.tsx
View File

@@ -109,7 +109,7 @@ export function HashtagWidget({ params }: { params: Widget }) {
);
return (
<div className="relative w-[400px] shrink-0 bg-white/10">
<div className="relative shrink-0 grow-0 basis-[400px] 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' ? (

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

@@ -41,7 +41,7 @@ export function ThreadBlock({ params }: { params: Widget }) {
);
return (
<div className="scrollbar-hide h-full w-[400px] shrink-0 overflow-y-auto bg-white/10">
<div className="scrollbar-hide relative shrink-0 grow-0 basis-[400px] overflow-y-auto bg-white/10">
<TitleBar id={params.id} title={params.title} />
<div className="h-full">
{status === 'loading' ? (

2
src/app/space/components/widgets/trendingNotes.tsx
View File

@@ -31,7 +31,7 @@ export function TrendingNotesWidget({ params }: { params: Widget }) {
);
return (
<div className="scrollbar-hide relative h-full w-[400px] shrink-0 overflow-y-auto bg-white/10 pb-20">
<div className="scrollbar-hide relative shrink-0 grow-0 basis-[400px] overflow-y-auto bg-white/10">
<TitleBar id={params.id} title={params.title} />
<div className="h-full">
{status === 'loading' ? (

2
src/app/space/components/widgets/trendingProfile.tsx
View File

@@ -32,7 +32,7 @@ export function TrendingProfilesWidget({ params }: { params: Widget }) {
);
return (
<div className="scrollbar-hide relative h-full w-[400px] shrink-0 overflow-y-auto bg-white/10 pb-20">
<div className="scrollbar-hide relative shrink-0 grow-0 basis-[400px] overflow-y-auto bg-white/10">
<TitleBar id={params.id} title={params.title} />
<div className="h-full">
{status === 'loading' ? (

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

@@ -5,6 +5,7 @@ import { FeedWidgetForm } from '@app/space/components/forms/feed';
import { HashTagWidgetForm } from '@app/space/components/forms/hashtag';
import { ArticleWidget } from '@app/space/components/widgets/article';
import { FeedWidget } from '@app/space/components/widgets/feed';
import { FileWidget } from '@app/space/components/widgets/file';
import { HashtagWidget } from '@app/space/components/widgets/hashtag';
import { NetworkWidget } from '@app/space/components/widgets/network';
import { ThreadBlock } from '@app/space/components/widgets/thread';
@@ -48,6 +49,8 @@ export function SpaceScreen() {
return <NetworkWidget key={widget.id} />;
case WidgetKinds.article:
return <ArticleWidget key={widget.id} params={widget} />;
case WidgetKinds.file:
return <FileWidget key={widget.id} params={widget} />;
case WidgetKinds.xhashtag:
return <HashTagWidgetForm key={widget.id} params={widget} />;
case WidgetKinds.xfeed: