nostr/lume
1
0
Fork 0
mirror of https://github.com/luminous-devs/lume.git synced 2024-08-30 18:10:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

wip: rework widget

Browse Source
This commit is contained in:
reya 2023-11-09 18:02:25 +07:00
parent cb9006abb2
commit 0cdf199cb5
31 changed files with 155 additions and 509 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/app.tsx
View File

@ -54,8 +54,8 @@ export default function App() {
{
path: '',
async lazy() {
const { SpaceScreen } = await import('@app/space');
return { Component: SpaceScreen };
const { HomeScreen } = await import('@app/home');
return { Component: HomeScreen };
},
},
{

10
src/app/auth/onboarding/hashtag.tsx
View File

@ -2,16 +2,12 @@ import { message } from '@tauri-apps/plugin-dialog';
import { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { useStorage } from '@libs/storage/provider';
import { ArrowLeftIcon, CheckCircleIcon, LoaderIcon } from '@shared/icons';
import { HASHTAGS, WIDGET_KIND } from '@stores/constants';
import { HASHTAGS } from '@stores/constants';
import { useOnboarding } from '@stores/onboarding';
export function OnboardHashtagScreen() {
const { db } = useStorage();
const [loading, setLoading] = useState(false);
const [tags, setTags] = useState(new Set<string>());
@ -34,10 +30,6 @@ export function OnboardHashtagScreen() {
try {
setLoading(true);
for (const tag of tags) {
await db.createWidget(WIDGET_KIND.global.hashtag, tag, tag.replace('#', ''));
}
setHashtag();
navigate(-1);
} catch (e) {

75
src/app/space/index.tsx → src/app/home/index.tsx
View File

@ -2,34 +2,21 @@ import { useQuery } from '@tanstack/react-query';
import { useCallback, useRef, useState } from 'react';
import { VList, VListHandle } from 'virtua';
import { ToggleWidgetList } from '@app/space/components/toggle';
import { WidgetList } from '@app/space/components/widgetList';
import { useStorage } from '@libs/storage/provider';
import { LoaderIcon } from '@shared/icons';
import {
GlobalArticlesWidget,
GlobalFilesWidget,
GlobalHashtagWidget,
LocalArticlesWidget,
LocalFeedsWidget,
LocalFilesWidget,
LocalThreadWidget,
LocalUserWidget,
NewsfeedWidget,
NotificationWidget,
TrendingAccountsWidget,
TrendingNotesWidget,
XfeedsWidget,
XhashtagWidget,
ToggleWidgetList,
WidgetList,
} from '@shared/widgets';
import { WIDGET_KIND } from '@stores/constants';
import { Widget } from '@utils/types';
export function SpaceScreen() {
export function HomeScreen() {
const ref = useRef<VListHandle>(null);
const [selectedIndex, setSelectedIndex] = useState(-1);
@ -40,16 +27,16 @@ export function SpaceScreen() {
const dbWidgets = await db.getWidgets();
const defaultWidgets = [
{
id: '9998',
title: 'Notification',
content: '',
kind: WIDGET_KIND.local.notification,
},
{
id: '9999',
id: '99999',
title: 'Newsfeed',
content: '',
kind: WIDGET_KIND.local.network,
kind: WIDGET_KIND.newsfeed,
},
{
id: '99998',
title: 'Notification',
content: '',
kind: WIDGET_KIND.notification,
},
];
@ -63,36 +50,12 @@ export function SpaceScreen() {
const renderItem = useCallback((widget: Widget) => {
switch (widget.kind) {
case WIDGET_KIND.local.feeds:
return <LocalFeedsWidget key={widget.id} params={widget} />;
case WIDGET_KIND.local.files:
return <LocalFilesWidget key={widget.id} params={widget} />;
case WIDGET_KIND.local.articles:
return <LocalArticlesWidget key={widget.id} params={widget} />;
case WIDGET_KIND.local.user:
return <LocalUserWidget key={widget.id} params={widget} />;
case WIDGET_KIND.local.thread:
return <LocalThreadWidget key={widget.id} params={widget} />;
case WIDGET_KIND.global.hashtag:
return <GlobalHashtagWidget key={widget.id} params={widget} />;
case WIDGET_KIND.global.articles:
return <GlobalArticlesWidget key={widget.id} params={widget} />;
case WIDGET_KIND.global.files:
return <GlobalFilesWidget key={widget.id} params={widget} />;
case WIDGET_KIND.nostrBand.trendingAccounts:
return <TrendingAccountsWidget key={widget.id} params={widget} />;
case WIDGET_KIND.nostrBand.trendingNotes:
return <TrendingNotesWidget key={widget.id} params={widget} />;
case WIDGET_KIND.tmp.xfeed:
return <XfeedsWidget key={widget.id} params={widget} />;
case WIDGET_KIND.tmp.xhashtag:
return <XhashtagWidget key={widget.id} params={widget} />;
case WIDGET_KIND.tmp.list:
return <WidgetList key={widget.id} params={widget} />;
case WIDGET_KIND.local.notification:
case WIDGET_KIND.notification:
return <NotificationWidget key={widget.id} />;
case WIDGET_KIND.local.network:
case WIDGET_KIND.newsfeed:
return <NewsfeedWidget key={widget.id} />;
case WIDGET_KIND.list:
return <WidgetList key={widget.id} widget={widget} />;
default:
return null;
}
@ -108,14 +71,15 @@ export function SpaceScreen() {
return (
<VList
className="h-full w-full flex-nowrap overflow-x-auto !overflow-y-hidden scrollbar-none focus:outline-none"
horizontal
ref={ref}
className="h-full w-full flex-nowrap overflow-x-auto !overflow-y-hidden scrollbar-none focus:outline-none"
initialItemSize={420}
tabIndex={0}
horizontal
onKeyDown={(e) => {
if (!ref.current) return;
switch (e.code) {
case 'ArrowUp':
case 'ArrowLeft': {
e.preventDefault();
const prevIndex = Math.max(selectedIndex - 1, 0);
@ -126,6 +90,7 @@ export function SpaceScreen() {
});
break;
}
case 'ArrowDown':
case 'ArrowRight': {
e.preventDefault();
const nextIndex = Math.min(selectedIndex + 1, data.length - 1);
@ -136,6 +101,8 @@ export function SpaceScreen() {
});
break;
}
default:
break;
}
}}
>

128
src/app/space/components/widgetList.tsx
View File

@ -1,128 +0,0 @@
import { useCallback } from 'react';
import {
ArticleIcon,
BellIcon,
FileIcon,
FollowsIcon,
GroupFeedsIcon,
HashtagIcon,
ThreadsIcon,
TrendingIcon,
} from '@shared/icons';
import { TitleBar } from '@shared/titleBar';
import { WidgetWrapper } from '@shared/widgets';
import { DEFAULT_WIDGETS, WIDGET_KIND } from '@stores/constants';
import { useWidget } from '@utils/hooks/useWidget';
import { Widget, WidgetGroup, WidgetGroupItem } from '@utils/types';
export function WidgetList({ params }: { params: Widget }) {
const { addWidget, removeWidget } = useWidget();
const open = (item: WidgetGroupItem) => {
addWidget.mutate({
kind: item.kind,
title: item.title,
content: JSON.stringify(item.content),
});
removeWidget.mutate(params.id);
};
const renderIcon = useCallback((kind: number) => {
switch (kind) {
case WIDGET_KIND.tmp.xfeed:
return (
<GroupFeedsIcon className="h-5 w-5 text-neutral-900 dark:text-neutral-100" />
);
case WIDGET_KIND.local.follows:
return <FollowsIcon className="h-5 w-5 text-neutral-900 dark:text-neutral-100" />;
case WIDGET_KIND.local.files:
case WIDGET_KIND.global.files:
return <FileIcon className="h-5 w-5 text-neutral-900 dark:text-neutral-100" />;
case WIDGET_KIND.local.articles:
case WIDGET_KIND.global.articles:
return <ArticleIcon className="h-5 w-5 text-neutral-900 dark:text-neutral-100" />;
case WIDGET_KIND.tmp.xhashtag:
return <HashtagIcon className="h-5 w-5 text-neutral-900 dark:text-neutral-100" />;
case WIDGET_KIND.nostrBand.trendingAccounts:
case WIDGET_KIND.nostrBand.trendingNotes:
return (
<TrendingIcon className="h-5 w-5 text-neutral-900 dark:text-neutral-100" />
);
case WIDGET_KIND.local.notification:
return <BellIcon className="h-5 w-5 text-neutral-900 dark:text-neutral-100" />;
case WIDGET_KIND.other.learnNostr:
return <ThreadsIcon className="h-5 w-5 text-neutral-900 dark:text-neutral-100" />;
default:
return null;
}
}, []);
const renderItem = useCallback((row: WidgetGroup, index: number) => {
return (
<div key={index} className="flex flex-col gap-2">
<h3 className="font-semibold">{row.title}</h3>
<div className="flex flex-col divide-y divide-neutral-200 overflow-hidden rounded-xl bg-neutral-100 dark:divide-neutral-800 dark:bg-neutral-900">
{row.data.map((item, index) => (
<button
onClick={() => open(item)}
key={index}
className="group flex items-center gap-2.5 px-4 hover:bg-neutral-200 dark:hover:bg-neutral-800"
>
{item.icon ? (
<div className="h-10 w-10 shrink-0 rounded-lg">
<img
src={item.icon}
alt={item.title}
className="h-10 w-10 object-cover"
/>
</div>
) : (
<div className="inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-neutral-200 group-hover:bg-neutral-300 dark:bg-neutral-800 dark:group-hover:bg-neutral-700">
{renderIcon(item.kind)}
</div>
)}
<div className="inline-flex h-16 w-full flex-col items-start justify-center">
<h5 className="line-clamp-1 text-sm font-semibold text-neutral-900 dark:text-neutral-100">
{item.title}
</h5>
<p className="line-clamp-1 text-sm text-neutral-600 dark:text-neutral-400">
{item.description}
</p>
</div>
</button>
))}
</div>
</div>
);
}, []);
return (
<WidgetWrapper>
<TitleBar id={params.id} title="Add widget" />
<div className="flex-1 overflow-y-auto pb-10 scrollbar-none">
<div className="flex flex-col gap-6 px-3">
{DEFAULT_WIDGETS.map((row: WidgetGroup, index: number) =>
renderItem(row, index)
)}
<div className="border-t border-neutral-200 pt-6 dark:border-neutral-800">
<button
type="button"
disabled
className="inline-flex h-14 w-full items-center justify-center gap-2.5 rounded-xl bg-neutral-50 text-sm font-medium text-neutral-900 dark:bg-neutral-950 dark:text-neutral-100"
>
Build your own widget{' '}
<div className="-rotate-3 transform-gpu rounded-md border border-neutral-200 bg-neutral-100 px-1.5 py-1 dark:border-neutral-800 dark:bg-neutral-900">
<span className="bg-gradient-to-r from-blue-400 via-red-400 to-orange-500 bg-clip-text text-xs text-transparent dark:from-blue-200 dark:via-red-200 dark:to-orange-300">
Coming soon
</span>
</div>
</button>
</div>
</div>
</div>
</WidgetWrapper>
);
}

2
src/shared/notes/actions.tsx
View File

@ -34,7 +34,7 @@ export function NoteActions({
type="button"
onClick={() =>
addWidget.mutate({
kind: WIDGET_KIND.local.thread,
kind: WIDGET_KIND.thread,
title: 'Thread',
content: id,
})

2
src/shared/notes/mentions/hashtag.tsx
View File

@ -10,7 +10,7 @@ export function Hashtag({ tag }: { tag: string }) {
type="button"
onClick={() =>
addWidget.mutate({
kind: WIDGET_KIND.global.hashtag,
kind: WIDGET_KIND.hashtag,
title: tag,
content: tag.replace('#', ''),
})

2
src/shared/notes/mentions/note.tsx
View File

@ -50,7 +50,7 @@ export const MentionNote = memo(function MentionNote({ id }: { id: string }) {
type="button"
onClick={() =>
addWidget.mutate({
kind: WIDGET_KIND.local.thread,
kind: WIDGET_KIND.thread,
title: 'Thread',
content: data.id,
})

9
src/shared/notes/mentions/user.tsx
View File

@ -14,14 +14,7 @@ export const MentionUser = memo(function MentionUser({ pubkey }: { pubkey: strin
type="button"
onClick={() =>
addWidget.mutate({
kind: WIDGET_KIND.local.user,
title: user?.name || user?.display_name || user?.displayName,
content: pubkey,
})
}
onKeyDown={() =>
addWidget.mutate({
kind: WIDGET_KIND.local.user,
kind: WIDGET_KIND.user,
title: user?.name || user?.display_name || user?.displayName,
content: pubkey,
})

2
src/shared/notes/notify.tsx
View File

@ -91,7 +91,7 @@ export function NotifyNote({ event }: { event: NDKEvent }) {
type="button"
onClick={() =>
addWidget.mutate({
kind: WIDGET_KIND.local.thread,
kind: WIDGET_KIND.thread,
title: 'Thread',
content: data.id,
})

2
src/shared/notes/text.tsx
View File

@ -30,7 +30,7 @@ export function TextNote({ event }: { event: NDKEvent }) {
type="button"
onClick={() =>
addWidget.mutate({
kind: WIDGET_KIND.local.thread,
kind: WIDGET_KIND.thread,
title: 'Thread',
content: thread.rootEventId,
})

30
src/shared/widgets/local/articles.tsx → src/shared/widgets/article.tsx
View File

@ -1,5 +1,6 @@
import { NDKEvent, NDKKind } from '@nostr-dev-kit/ndk';
import { useInfiniteQuery } from '@tanstack/react-query';
import { FetchFilter } from 'nostr-fetch';
import { useMemo } from 'react';
import { VList } from 'virtua';
@ -15,12 +16,12 @@ import { FETCH_LIMIT } from '@stores/constants';
import { Widget } from '@utils/types';
export function LocalArticlesWidget({ params }: { params: Widget }) {
export function ArticleWidget({ widget }: { widget: Widget }) {
const { db } = useStorage();
const { ndk, relayUrls, fetcher } = useNDK();
const { status, data, hasNextPage, isFetchingNextPage, fetchNextPage } =
useInfiniteQuery({
queryKey: ['local-articles'],
queryKey: ['widget-' + widget.id],
initialPageParam: 0,
queryFn: async ({
signal,
@ -29,15 +30,24 @@ export function LocalArticlesWidget({ params }: { params: Widget }) {
signal: AbortSignal;
pageParam: number;
}) => {
const events = await fetcher.fetchLatestEvents(
relayUrls,
{
let filter: FetchFilter;
const content = JSON.parse(widget.content);
if (content.global) {
filter = {
kinds: [NDKKind.Article],
};
} else {
filter = {
kinds: [NDKKind.Article],
authors: db.account.circles,
},
FETCH_LIMIT,
{ asOf: pageParam === 0 ? undefined : pageParam, abortSignal: signal }
);
};
}
const events = await fetcher.fetchLatestEvents(relayUrls, filter, FETCH_LIMIT, {
asOf: pageParam === 0 ? undefined : pageParam,
abortSignal: signal,
});
const ndkEvents = events.map((event) => {
return new NDKEvent(ndk, event);
@ -61,7 +71,7 @@ export function LocalArticlesWidget({ params }: { params: Widget }) {
return (
<WidgetWrapper>
<TitleBar id={params.id} title={params.title} />
<TitleBar id={widget.id} title={widget.title} />
<VList className="flex-1">
{status === 'pending' ? (
<div className="flex h-full w-full items-center justify-center">

30
src/shared/widgets/local/files.tsx → src/shared/widgets/file.tsx
View File

@ -1,5 +1,6 @@
import { NDKEvent } from '@nostr-dev-kit/ndk';
import { useInfiniteQuery } from '@tanstack/react-query';
import { FetchFilter } from 'nostr-fetch';
import { useMemo } from 'react';
import { VList } from 'virtua';
@ -15,12 +16,12 @@ import { FETCH_LIMIT } from '@stores/constants';
import { Widget } from '@utils/types';
export function LocalFilesWidget({ params }: { params: Widget }) {
export function FileWidget({ widget }: { widget: Widget }) {
const { db } = useStorage();
const { ndk, relayUrls, fetcher } = useNDK();
const { status, data, hasNextPage, isFetchingNextPage, fetchNextPage } =
useInfiniteQuery({
queryKey: ['local-files'],
queryKey: ['widget-' + widget.id],
initialPageParam: 0,
queryFn: async ({
signal,
@ -29,15 +30,24 @@ export function LocalFilesWidget({ params }: { params: Widget }) {
signal: AbortSignal;
pageParam: number;
}) => {
const events = await fetcher.fetchLatestEvents(
relayUrls,
{
let filter: FetchFilter;
const content = JSON.parse(widget.content);
if (content.global) {
filter = {
kinds: [1063],
};
} else {
filter = {
kinds: [1063],
authors: db.account.circles,
},
FETCH_LIMIT,
{ asOf: pageParam === 0 ? undefined : pageParam, abortSignal: signal }
);
};
}
const events = await fetcher.fetchLatestEvents(relayUrls, filter, FETCH_LIMIT, {
asOf: pageParam === 0 ? undefined : pageParam,
abortSignal: signal,
});
const ndkEvents = events.map((event) => {
return new NDKEvent(ndk, event);
@ -61,7 +71,7 @@ export function LocalFilesWidget({ params }: { params: Widget }) {
return (
<WidgetWrapper>
<TitleBar id={params.id} title={params.title} />
<TitleBar id={widget.id} title={widget.title} />
<VList className="flex-1">
{status === 'pending' ? (
<div className="flex h-full w-full items-center justify-center">

106
src/shared/widgets/global/articles.tsx
View File

@ -1,106 +0,0 @@
import { NDKEvent, NDKKind } from '@nostr-dev-kit/ndk';
import { useInfiniteQuery } from '@tanstack/react-query';
import { useMemo } from 'react';
import { VList } from 'virtua';
import { useNDK } from '@libs/ndk/provider';
import { ArrowRightCircleIcon, LoaderIcon } from '@shared/icons';
import { MemoizedArticleNote } from '@shared/notes';
import { TitleBar } from '@shared/titleBar';
import { WidgetWrapper } from '@shared/widgets';
import { FETCH_LIMIT } from '@stores/constants';
import { Widget } from '@utils/types';
export function GlobalArticlesWidget({ params }: { params: Widget }) {
const { ndk, relayUrls, fetcher } = useNDK();
const { status, data, hasNextPage, isFetchingNextPage, fetchNextPage } =
useInfiniteQuery({
queryKey: ['global-articles'],
initialPageParam: 0,
queryFn: async ({
signal,
pageParam,
}: {
signal: AbortSignal;
pageParam: number;
}) => {
const events = await fetcher.fetchLatestEvents(
relayUrls,
{
kinds: [NDKKind.Article],
},
FETCH_LIMIT,
{ asOf: pageParam === 0 ? undefined : pageParam, abortSignal: signal }
);
const ndkEvents = events.map((event) => {
return new NDKEvent(ndk, event);
});
return ndkEvents.sort((a, b) => b.created_at - a.created_at);
},
getNextPageParam: (lastPage) => {
const lastEvent = lastPage.at(-1);
if (!lastEvent) return;
return lastEvent.created_at - 1;
},
refetchOnWindowFocus: false,
refetchOnReconnect: false,
});
const allEvents = useMemo(
() => (data ? data.pages.flatMap((page) => page) : []),
[data]
);
return (
<WidgetWrapper>
<TitleBar id={params.id} title={params.title} />
<VList className="flex-1">
{status === 'pending' ? (
<div className="flex h-full w-full items-center justify-center">
<LoaderIcon className="h-5 w-5 animate-spin" />
</div>
) : allEvents.length === 0 ? (
<div className="flex h-full w-full flex-col items-center justify-center px-3">
<div className="flex flex-col items-center gap-4">
<img src="/ghost.png" alt="empty feeds" className="h-16 w-16" />
<div className="text-center">
<h3 className="font-semibold leading-tight text-neutral-900 dark:text-neutral-100">
Oops, it looks like there are no articles.
</h3>
<p className="text-neutral-500 dark:text-neutral-400">
You can close this widget
</p>
</div>
</div>
</div>
) : (
allEvents.map((item) => <MemoizedArticleNote key={item.id} event={item} />)
)}
<div className="flex h-16 items-center justify-center px-3 pb-3">
{hasNextPage ? (
<button
type="button"
onClick={() => fetchNextPage()}
disabled={!hasNextPage || isFetchingNextPage}
className="inline-flex h-10 w-max items-center justify-center gap-2 rounded-full bg-blue-500 px-6 font-medium text-white hover:bg-blue-600 focus:outline-none"
>
{isFetchingNextPage ? (
<LoaderIcon className="h-4 w-4 animate-spin" />
) : (
<>
<ArrowRightCircleIcon className="h-5 w-5" />
Load more
</>
)}
</button>
) : null}
</div>
</VList>
</WidgetWrapper>
);
}

106
src/shared/widgets/global/files.tsx
View File

@ -1,106 +0,0 @@
import { NDKEvent } from '@nostr-dev-kit/ndk';
import { useInfiniteQuery } from '@tanstack/react-query';
import { useMemo } from 'react';
import { VList } from 'virtua';
import { useNDK } from '@libs/ndk/provider';
import { ArrowRightCircleIcon, LoaderIcon } from '@shared/icons';
import { MemoizedFileNote } from '@shared/notes';
import { TitleBar } from '@shared/titleBar';
import { WidgetWrapper } from '@shared/widgets';
import { FETCH_LIMIT } from '@stores/constants';
import { Widget } from '@utils/types';
export function GlobalFilesWidget({ params }: { params: Widget }) {
const { ndk, relayUrls, fetcher } = useNDK();
const { status, data, hasNextPage, isFetchingNextPage, fetchNextPage } =
useInfiniteQuery({
queryKey: ['global-files'],
initialPageParam: 0,
queryFn: async ({
signal,
pageParam,
}: {
signal: AbortSignal;
pageParam: number;
}) => {
const events = await fetcher.fetchLatestEvents(
relayUrls,
{
kinds: [1063],
},
FETCH_LIMIT,
{ asOf: pageParam === 0 ? undefined : pageParam, abortSignal: signal }
);
const ndkEvents = events.map((event) => {
return new NDKEvent(ndk, event);
});
return ndkEvents.sort((a, b) => b.created_at - a.created_at);
},
getNextPageParam: (lastPage) => {
const lastEvent = lastPage.at(-1);
if (!lastEvent) return;
return lastEvent.created_at - 1;
},
refetchOnWindowFocus: false,
refetchOnReconnect: false,
});
const allEvents = useMemo(
() => (data ? data.pages.flatMap((page) => page) : []),
[data]
);
return (
<WidgetWrapper>
<TitleBar id={params.id} title={params.title} />
<VList className="flex-1">
{status === 'pending' ? (
<div className="flex h-full w-full items-center justify-center">
<LoaderIcon className="h-5 w-5 animate-spin" />
</div>
) : allEvents.length === 0 ? (
<div className="flex h-full w-full flex-col items-center justify-center px-3">
<div className="flex flex-col items-center gap-4">
<img src="/ghost.png" alt="empty feeds" className="h-16 w-16" />
<div className="text-center">
<h3 className="font-semibold leading-tight text-neutral-900 dark:text-neutral-100">
Oops, it looks like there are no files.
</h3>
<p className="text-neutral-500 dark:text-neutral-400">
You can close this widget
</p>
</div>
</div>
</div>
) : (
allEvents.map((item) => <MemoizedFileNote key={item.id} event={item} />)
)}
<div className="flex h-16 items-center justify-center px-3 pb-3">
{hasNextPage ? (
<button
type="button"
onClick={() => fetchNextPage()}
disabled={!hasNextPage || isFetchingNextPage}
className="inline-flex h-10 w-max items-center justify-center gap-2 rounded-full bg-blue-500 px-6 font-medium text-white hover:bg-blue-600 focus:outline-none"
>
{isFetchingNextPage ? (
<LoaderIcon className="h-4 w-4 animate-spin" />
) : (
<>
<ArrowRightCircleIcon className="h-5 w-5" />
Load more
</>
)}
</button>
) : null}
</div>
</VList>
</WidgetWrapper>
);
}

9
src/shared/widgets/local/feeds.tsx → src/shared/widgets/group.tsx
View File

@ -19,11 +19,11 @@ import { FETCH_LIMIT } from '@stores/constants';
import { Widget } from '@utils/types';
export function LocalFeedsWidget({ params }: { params: Widget }) {
export function GroupWidget({ widget }: { widget: Widget }) {
const { relayUrls, ndk, fetcher } = useNDK();
const { status, data, hasNextPage, isFetchingNextPage, fetchNextPage } =
useInfiniteQuery({
queryKey: ['group-feeds-' + params.id],
queryKey: ['widget-' + widget.id],
initialPageParam: 0,
queryFn: async ({
signal,
@ -32,11 +32,12 @@ export function LocalFeedsWidget({ params }: { params: Widget }) {
signal: AbortSignal;
pageParam: number;
}) => {
const authors = JSON.parse(widget.content);
const events = await fetcher.fetchLatestEvents(
relayUrls,
{
kinds: [NDKKind.Text, NDKKind.Repost],
authors: JSON.parse(params.content),
authors: authors,
},
FETCH_LIMIT,
{ asOf: pageParam === 0 ? undefined : pageParam, abortSignal: signal }
@ -78,7 +79,7 @@ export function LocalFeedsWidget({ params }: { params: Widget }) {
return (
<WidgetWrapper>
<TitleBar id={params.id} title={params.title} />
<TitleBar id={widget.id} title={widget.title} />
<VList className="flex-1">
{status === 'pending' ? (
<div className="px-3 py-1.5">

10
src/shared/widgets/global/hashtag.tsx → src/shared/widgets/hashtag.tsx
View File

@ -14,11 +14,11 @@ import { FETCH_LIMIT } from '@stores/constants';
import { Widget } from '@utils/types';
export function GlobalHashtagWidget({ params }: { params: Widget }) {
export function HashtagWidget({ widget }: { widget: Widget }) {
const { ndk, relayUrls, fetcher } = useNDK();
const { status, data, hasNextPage, isFetchingNextPage, fetchNextPage } =
useInfiniteQuery({
queryKey: ['hashtag-' + params.title],
queryKey: ['widget-' + widget.id],
initialPageParam: 0,
queryFn: async ({
signal,
@ -31,7 +31,7 @@ export function GlobalHashtagWidget({ params }: { params: Widget }) {
relayUrls,
{
kinds: [NDKKind.Text, NDKKind.Repost],
'#t': [params.content],
'#t': [widget.content],
},
FETCH_LIMIT,
{ asOf: pageParam === 0 ? undefined : pageParam, abortSignal: signal }
@ -74,7 +74,7 @@ export function GlobalHashtagWidget({ params }: { params: Widget }) {
return (
<WidgetWrapper>
<TitleBar id={params.id} title={params.title} />
<TitleBar id={widget.id} title={widget.title} />
<VList className="flex-1">
{status === 'pending' ? (
<div className="flex h-full w-full items-center justify-center">
@ -86,7 +86,7 @@ export function GlobalHashtagWidget({ params }: { params: Widget }) {
<img src="/ghost.png" alt="empty feeds" className="h-16 w-16" />
<div className="text-center">
<h3 className="font-semibold leading-tight text-neutral-900 dark:text-neutral-100">
Oops, it looks like there are no events related to {params.title}.
Oops, it looks like there are no events related to {widget.content}.
</h3>
<p className="text-neutral-500 dark:text-neutral-400">
You can close this widget

26
src/shared/widgets/index.ts
View File

@ -1,17 +1,15 @@
export * from './wrapper';
export * from './local/feeds';
export * from './local/user';
export * from './local/thread';
export * from './local/files';
export * from './local/articles';
export * from './global/articles';
export * from './global/files';
export * from './global/hashtag';
export * from './nostrBand/trendingNotes';
export * from './nostrBand/trendingAccounts';
export * from './tmp/feeds';
export * from './tmp/hashtag';
export * from './newsfeed';
export * from './notification';
export * from './liveUpdater';
export * from './topic';
export * from './user';
export * from './article';
export * from './file';
export * from './hashtag';
export * from './thread';
export * from './group';
export * from './nostrBand/trendingAccounts';
export * from './nostrBand/trendingNotes';
export * from './other/wrapper';
export * from './other/liveUpdater';
export * from './other/toggleWidgetList';
export * from './other/widgetList';

3
src/shared/widgets/newsfeed.tsx
View File

@ -14,8 +14,7 @@ import {
UnknownNote,
} from '@shared/notes';
import { TitleBar } from '@shared/titleBar';
import { WidgetWrapper } from '@shared/widgets';
import { LiveUpdater } from '@shared/widgets';
import { LiveUpdater, WidgetWrapper } from '@shared/widgets';
import { FETCH_LIMIT } from '@stores/constants';

5
src/shared/widgets/nostrBand/trendingAccounts.tsx
View File

@ -4,7 +4,10 @@ import { VList } from 'virtua';
import { LoaderIcon } from '@shared/icons';
import { TitleBar } from '@shared/titleBar';
import { WidgetWrapper } from '@shared/widgets';
import { NostrBandUserProfile, type Profile } from '@shared/widgets/nostrBandUserProfile';
import {
NostrBandUserProfile,
type Profile,
} from '@shared/widgets/other/nostrBandUserProfile';
import { Widget } from '@utils/types';

6
src/shared/widgets/nostrBand/trendingNotes.tsx
View File

@ -13,9 +13,9 @@ interface Response {
notes: Array<{ event: NDKEvent }>;
}
export function TrendingNotesWidget({ params }: { params: Widget }) {
export function TrendingNotesWidget({ widget }: { widget: Widget }) {
const { status, data } = useQuery({
queryKey: ['trending-notes-widget'],
queryKey: ['widget-' + widget.id],
queryFn: async () => {
const res = await fetch('https://api.nostr.band/v0/trending/notes');
if (!res.ok) {
@ -33,7 +33,7 @@ export function TrendingNotesWidget({ params }: { params: Widget }) {
return (
<WidgetWrapper>
<TitleBar id={params.id} title="Trending Notes" />
<TitleBar id={widget.id} title="Trending Notes" />
<VList className="flex-1">
{status === 'pending' ? (
<div className="flex h-full w-full items-center justify-center ">

0
src/shared/widgets/liveUpdater.tsx → src/shared/widgets/other/liveUpdater.tsx
View File

0
src/shared/widgets/nostrBandUserProfile.tsx → src/shared/widgets/other/nostrBandUserProfile.tsx
View File

2
src/app/space/components/toggle.tsx → src/shared/widgets/other/toggleWidgetList.tsx
View File

@ -14,7 +14,7 @@ export function ToggleWidgetList() {
<button
type="button"
onClick={() =>
addWidget.mutate({ kind: WIDGET_KIND.tmp.list, title: '', content: '' })
addWidget.mutate({ kind: WIDGET_KIND.list, title: '', content: '' })
}
className="inline-flex h-9 items-center gap-2 rounded-full bg-neutral-200 px-3 text-neutral-900 hover:bg-neutral-300 dark:bg-neutral-800 dark:text-neutral-100 dark:hover:bg-neutral-700"
>

30
src/shared/widgets/other/widgetList.tsx Normal file
View File

@ -0,0 +1,30 @@
import { TitleBar } from '@shared/titleBar';
import { WidgetWrapper } from '@shared/widgets';
import { Widget } from '@utils/types';
export function WidgetList({ widget }: { widget: Widget }) {
return (
<WidgetWrapper>
<TitleBar id={widget.id} title="Add widgets" />
<div className="flex-1 overflow-y-auto pb-10 scrollbar-none">
<div className="flex flex-col gap-6 px-3">
<div className="border-t border-neutral-200 pt-6 dark:border-neutral-800">
<button
type="button"
disabled
className="inline-flex h-14 w-full items-center justify-center gap-2.5 rounded-xl bg-neutral-50 text-sm font-medium text-neutral-900 dark:bg-neutral-950 dark:text-neutral-100"
>
Build your own widget{' '}
<div className="-rotate-3 transform-gpu rounded-md border border-neutral-200 bg-neutral-100 px-1.5 py-1 dark:border-neutral-800 dark:bg-neutral-900">
<span className="bg-gradient-to-r from-blue-400 via-red-400 to-orange-500 bg-clip-text text-xs text-transparent dark:from-blue-200 dark:via-red-200 dark:to-orange-300">
Coming soon
</span>
</div>
</button>
</div>
</div>
</div>
</WidgetWrapper>
);
}

0
src/shared/widgets/wrapper.tsx → src/shared/widgets/other/wrapper.tsx
View File

8
src/shared/widgets/local/thread.tsx → src/shared/widgets/thread.tsx
View File

@ -18,8 +18,8 @@ import { WidgetWrapper } from '@shared/widgets';
import { useEvent } from '@utils/hooks/useEvent';
import { Widget } from '@utils/types';
export function LocalThreadWidget({ params }: { params: Widget }) {
const { status, data } = useEvent(params.content);
export function ThreadWidget({ widget }: { widget: Widget }) {
const { status, data } = useEvent(widget.content);
const renderKind = useCallback(
(event: NDKEvent) => {
@ -39,7 +39,7 @@ export function LocalThreadWidget({ params }: { params: Widget }) {
return (
<WidgetWrapper>
<TitleBar id={params.id} title={params.title} />
<TitleBar id={widget.id} title={widget.title} />
<WVList className="flex-1 overflow-y-auto px-3 pb-5">
{status === 'pending' ? (
<div className="flex h-16 items-center justify-center rounded-xl bg-neutral-50 px-3 py-3 dark:bg-neutral-950">
@ -52,7 +52,7 @@ export function LocalThreadWidget({ params }: { params: Widget }) {
{renderKind(data)}
<NoteActions id={data.id} pubkey={data.pubkey} />
</div>
<NoteReplyForm eventId={params.content} />
<NoteReplyForm eventId={widget.content} />
<ReplyList eventId={data.id} />
</>
)}

2
src/shared/widgets/tmp/feeds.tsx
View File

@ -28,7 +28,7 @@ export function XfeedsWidget({ params }: { params: Widget }) {
const submit = async () => {
addWidget.mutate({
kind: WIDGET_KIND.local.feeds,
kind: WIDGET_KIND.group,
title: title || 'Group',
content: JSON.stringify(groups),
});

2
src/shared/widgets/tmp/hashtag.tsx
View File

@ -39,7 +39,7 @@ export function XhashtagWidget({ params }: { params: Widget }) {
const onSubmit = async (data: FormValues) => {
try {
addWidget.mutate({
kind: WIDGET_KIND.global.hashtag,
kind: WIDGET_KIND.hashtag,
title: data.hashtag,
content: data.hashtag.replace('#', ''),
});

2
src/shared/widgets/topic.tsx
View File

@ -23,7 +23,7 @@ export function TopicWidget({ widget }: { widget: Widget }) {
const { relayUrls, ndk, fetcher } = useNDK();
const { status, data, hasNextPage, isFetchingNextPage, fetchNextPage } =
useInfiniteQuery({
queryKey: [widget.title],
queryKey: ['widget-' + widget.id],
initialPageParam: 0,
queryFn: async ({
signal,

10
src/shared/widgets/local/user.tsx → src/shared/widgets/user.tsx
View File

@ -18,17 +18,17 @@ import { WidgetWrapper } from '@shared/widgets';
import { nHoursAgo } from '@utils/date';
import { Widget } from '@utils/types';
export function LocalUserWidget({ params }: { params: Widget }) {
export function UserWidget({ widget }: { widget: Widget }) {
const { ndk } = useNDK();
const { status, data } = useQuery({
queryKey: ['user-posts', params.content],
queryKey: ['widget-' + widget.id],
queryFn: async () => {
const rootIds = new Set();
const dedupQueue = new Set();
const events = await ndk.fetchEvents({
kinds: [NDKKind.Text, NDKKind.Repost],
authors: [params.content],
authors: [widget.content],
since: nHoursAgo(24),
});
@ -70,10 +70,10 @@ export function LocalUserWidget({ params }: { params: Widget }) {
return (
<WidgetWrapper>
<TitleBar id={params.id} title={params.title} />
<TitleBar id={widget.id} title={widget.title} />
<WVList className="flex-1 overflow-y-auto">
<div className="px-3 pt-1.5">
<UserProfile pubkey={params.content} />
<UserProfile pubkey={widget.content} />
</div>
<div>
<h3 className="mb-3 mt-4 px-3 text-lg font-semibold text-neutral-900 dark:text-neutral-100">

41
src/stores/constants.ts
View File

@ -42,35 +42,18 @@ export const HASHTAGS = [
];
export const WIDGET_KIND = {
local: {
network: 100,
feeds: 101,
files: 102,
articles: 103,
user: 104,
thread: 105,
follows: 106,
notification: 107,
},
global: {
feeds: 1000,
files: 1001,
articles: 1002,
hashtag: 1003,
topic: 108,
},
nostrBand: {
trendingAccounts: 1,
trendingNotes: 2,
},
other: {
learnNostr: 90000,
},
tmp: {
list: 10000,
xfeed: 10001,
xhashtag: 10002,
},
user: 1,
thread: 2,
group: 3,
article: 4,
file: 5,
trendingNotes: 6,
trendingAccounts: 7,
topic: 8,
hashtag: 9,
notification: 9998,
newsfeed: 9999,
list: 10000,
};
export const TOPICS = [