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

ready for alpha

Browse Source
This commit is contained in:
reya 2023-10-26 09:29:33 +07:00
parent 50f81a7d0b
commit 0c8dcef937
35 changed files with 426 additions and 320 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/app/auth/import.tsx
View File

@ -85,6 +85,9 @@ export function ImportAccountScreen() {
try { try {
const privkey = nip19.decode(nsec).data as string; const privkey = nip19.decode(nsec).data as string;
await db.secureSave(pubkey, privkey); await db.secureSave(pubkey, privkey);
ndk.signer = new NDKPrivateKeySigner(privkey);
setSavedPrivkey(true); setSavedPrivkey(true);
} catch (e) { } catch (e) {
return toast(`nsec invalid: ${e}`); return toast(`nsec invalid: ${e}`);

8
src/app/chats/index.tsx
View File

@ -36,7 +36,7 @@ export function ChatsScreen() {
<div className="col-span-1 h-full overflow-y-auto border-r border-neutral-200 scrollbar-none dark:border-neutral-800"> <div className="col-span-1 h-full overflow-y-auto border-r border-neutral-200 scrollbar-none dark:border-neutral-800">
<div <div
data-tauri-drag-region data-tauri-drag-region
className="flex h-11 w-full shrink-0 items-center border-b border-neutral-200 px-3 dark:border-neutral-800" className="flex h-11 w-full shrink-0 items-center border-b border-neutral-100 px-3 dark:border-neutral-900"
> >
<h3 className="font-semibold text-neutral-950 dark:text-neutral-50"> <h3 className="font-semibold text-neutral-950 dark:text-neutral-50">
All chats All chats
@ -52,6 +52,12 @@ export function ChatsScreen() {
</h5> </h5>
</div> </div>
</div> </div>
) : data.length < 1 ? (
<div className="flex h-full w-full items-center justify-center pb-16">
<div className="inline-flex flex-col items-center justify-center gap-2">
<h5 className="text-neutral-900 dark:text-neutral-100">No message</h5>
</div>
</div>
) : ( ) : (
data.map((item) => renderItem(item)) data.map((item) => renderItem(item))
)} )}

141
src/app/notes/article.tsx
View File

@ -1,22 +1,12 @@
import { NDKEvent, NDKKind } from '@nostr-dev-kit/ndk';
import { writeText } from '@tauri-apps/plugin-clipboard-manager'; import { writeText } from '@tauri-apps/plugin-clipboard-manager';
import { nip19 } from 'nostr-tools'; import { nip19 } from 'nostr-tools';
import { AddressPointer, EventPointer } from 'nostr-tools/lib/types/nip19'; import { AddressPointer, EventPointer } from 'nostr-tools/lib/types/nip19';
import { useRef, useState } from 'react'; import { useRef, useState } from 'react';
import { useNavigate, useParams } from 'react-router-dom'; import { useNavigate, useParams } from 'react-router-dom';
import { useStorage } from '@libs/storage/provider';
import { ArrowLeftIcon, CheckCircleIcon, ReplyIcon, ShareIcon } from '@shared/icons'; import { ArrowLeftIcon, CheckCircleIcon, ReplyIcon, ShareIcon } from '@shared/icons';
import { import { ArticleDetailNote, NoteActions, NoteReplyForm } from '@shared/notes';
ArticleDetailNote,
NoteActions,
NoteReplyForm,
NoteStats,
UnknownNote,
} from '@shared/notes';
import { ReplyList } from '@shared/notes/replies/list'; import { ReplyList } from '@shared/notes/replies/list';
import { NoteSkeleton } from '@shared/notes/skeleton';
import { User } from '@shared/user'; import { User } from '@shared/user';
import { useEvent } from '@utils/hooks/useEvent'; import { useEvent } from '@utils/hooks/useEvent';
@ -26,7 +16,6 @@ export function ArticleNoteScreen() {
const replyRef = useRef(null); const replyRef = useRef(null);
const { id } = useParams(); const { id } = useParams();
const { db } = useStorage();
const naddr = id.startsWith('naddr') ? (nip19.decode(id).data as AddressPointer) : null; const naddr = id.startsWith('naddr') ? (nip19.decode(id).data as AddressPointer) : null;
const { status, data } = useEvent(id, naddr); const { status, data } = useEvent(id, naddr);
@ -48,83 +37,65 @@ export function ArticleNoteScreen() {
replyRef.current.scrollIntoView(); replyRef.current.scrollIntoView();
}; };
const renderKind = (event: NDKEvent) => {
switch (event.kind) {
case NDKKind.Article:
return <ArticleDetailNote event={event} />;
default:
return <UnknownNote event={event} />;
}
};
return ( return (
<div className="h-full w-full overflow-y-auto scroll-smooth scrollbar-none"> <div className="container mx-auto grid grid-cols-8 scroll-smooth px-4">
<div className="container mx-auto px-4 pt-16 sm:px-6 lg:px-8"> <div className="col-span-1">
<div className="grid grid-cols-5"> <div className="flex flex-col items-end gap-4">
<div className="col-span-1 pr-8"> <button
<div className="sticky top-16 flex flex-col items-end gap-4"> type="button"
<button onClick={() => navigate(-1)}
type="button" className="inline-flex h-12 w-12 items-center justify-center rounded-xl bg-neutral-100 dark:bg-neutral-900"
onClick={() => navigate(-1)} >
className="inline-flex h-12 w-12 items-center justify-center rounded-xl bg-neutral-200 dark:bg-neutral-800" <ArrowLeftIcon className="h-5 w-5" />
> </button>
<ArrowLeftIcon className="h-5 w-5" /> <div className="flex flex-col divide-y divide-neutral-200 rounded-xl bg-neutral-100 dark:divide-neutral-800 dark:bg-neutral-900">
</button> <button
<div className="flex flex-col divide-y divide-neutral-300 rounded-xl bg-neutral-200 dark:divide-neutral-700 dark:bg-neutral-800"> type="button"
<button onClick={share}
type="button" className="inline-flex h-12 w-12 items-center justify-center rounded-t-xl"
onClick={share} >
className="sticky top-16 inline-flex h-12 w-12 items-center justify-center rounded-t-xl" {isCopy ? (
> <CheckCircleIcon className="h-5 w-5 text-teal-500" />
{isCopy ? ( ) : (
<CheckCircleIcon className="h-5 w-5 text-teal-500" /> <ShareIcon className="h-5 w-5" />
) : ( )}
<ShareIcon className="h-5 w-5" /> </button>
)} <button
</button> type="button"
<button onClick={scrollToReply}
type="button" className="inline-flex h-12 w-12 items-center justify-center rounded-b-xl"
onClick={scrollToReply} >
className="sticky top-16 inline-flex h-12 w-12 items-center justify-center rounded-b-xl" <ReplyIcon className="h-5 w-5" />
> </button>
<ReplyIcon className="h-5 w-5" />
</button>
</div>
</div>
</div> </div>
<div className="col-span-3 flex flex-col gap-1.5">
{status === 'loading' ? (
<div className="px-3 py-1.5">
<div className="rounded-xl bg-white/10 px-3 py-3 backdrop-blur-xl">
<NoteSkeleton />
</div>
</div>
) : (
<>
<div className="flex h-min w-full flex-col gap-1 px-3">
<div>
<User pubkey={data.pubkey} time={data.created_at} variant="thread" />
<div className="mt-2">{renderKind(data)}</div>
<div className="mb-3 mt-3">
<NoteActions
id={data.id}
pubkey={data.pubkey}
extraButtons={false}
/>
</div>
</div>
<NoteStats id={data.id} />
</div>
<div ref={replyRef} className="px-3">
<NoteReplyForm id={data.id} pubkey={db.account.pubkey} />
<ReplyList id={data.id} />
</div>
</>
)}
</div>
<div className="col-span-1" />
</div> </div>
</div> </div>
<div className="relative col-span-6 flex flex-col overflow-y-auto">
<div className="mx-auto w-full max-w-2xl">
{status === 'loading' ? (
<div className="px-3 py-1.5">Loading...</div>
) : (
<div className="flex h-min w-full flex-col px-3">
<div className="mb-3 border-b border-neutral-100 pb-3 dark:border-neutral-900">
<User pubkey={data.pubkey} time={data.created_at} variant="thread" />
<div className="mt-3">
<ArticleDetailNote event={data} />
</div>
<div className="mt-3">
<NoteActions id={id} pubkey={data.pubkey} extraButtons={false} />
</div>
</div>
</div>
)}
<div ref={replyRef} className="px-3">
<div className="mb-3 border-b border-neutral-100 pb-3 dark:border-neutral-900">
<NoteReplyForm id={id} />
</div>
<ReplyList id={id} />
</div>
</div>
</div>
<div className="col-span-1" />
</div> </div>
); );
} }

124
src/app/notes/text.tsx
View File

@ -5,15 +5,12 @@ import { EventPointer } from 'nostr-tools/lib/types/nip19';
import { useRef, useState } from 'react'; import { useRef, useState } from 'react';
import { useNavigate, useParams } from 'react-router-dom'; import { useNavigate, useParams } from 'react-router-dom';
import { useStorage } from '@libs/storage/provider';
import { ArrowLeftIcon, CheckCircleIcon, ReplyIcon, ShareIcon } from '@shared/icons'; import { ArrowLeftIcon, CheckCircleIcon, ReplyIcon, ShareIcon } from '@shared/icons';
import { import {
ArticleNote, ArticleNote,
FileNote, FileNote,
NoteActions, NoteActions,
NoteReplyForm, NoteReplyForm,
NoteStats,
TextNote, TextNote,
UnknownNote, UnknownNote,
} from '@shared/notes'; } from '@shared/notes';
@ -23,16 +20,12 @@ import { User } from '@shared/user';
import { useEvent } from '@utils/hooks/useEvent'; import { useEvent } from '@utils/hooks/useEvent';
export function TextNoteScreen() { export function TextNoteScreen() {
const { id } = useParams();
const { status, data } = useEvent(id);
const navigate = useNavigate(); const navigate = useNavigate();
const replyRef = useRef(null); const replyRef = useRef(null);
const { id } = useParams();
console.log(id);
const { db } = useStorage();
const { status, data } = useEvent(id);
const [isCopy, setIsCopy] = useState(false); const [isCopy, setIsCopy] = useState(false);
const share = async () => { const share = async () => {
@ -64,67 +57,62 @@ export function TextNoteScreen() {
}; };
return ( return (
<div className="h-full w-full overflow-y-auto scroll-smooth scrollbar-none"> <div className="container mx-auto grid grid-cols-8 scroll-smooth px-4">
<div className="container mx-auto px-4 pt-16 sm:px-6 lg:px-8"> <div className="col-span-1">
<div className="grid grid-cols-5"> <div className="flex flex-col items-end gap-4">
<div className="col-span-1 pr-8"> <button
<div className="sticky top-16 flex flex-col items-end gap-4"> type="button"
<button onClick={() => navigate(-1)}
type="button" className="inline-flex h-12 w-12 items-center justify-center rounded-xl bg-neutral-100 dark:bg-neutral-900"
onClick={() => navigate(-1)} >
className="inline-flex h-12 w-12 items-center justify-center rounded-xl bg-neutral-200 dark:bg-neutral-800" <ArrowLeftIcon className="h-5 w-5" />
> </button>
<ArrowLeftIcon className="h-5 w-5" /> <div className="flex flex-col divide-y divide-neutral-200 rounded-xl bg-neutral-100 dark:divide-neutral-800 dark:bg-neutral-900">
</button> <button
<div className="flex flex-col divide-y divide-neutral-300 rounded-xl bg-neutral-200 dark:divide-neutral-700 dark:bg-neutral-800"> type="button"
<button onClick={share}
type="button" className="inline-flex h-12 w-12 items-center justify-center rounded-t-xl"
onClick={share} >
className="sticky top-16 inline-flex h-12 w-12 items-center justify-center rounded-t-xl" {isCopy ? (
> <CheckCircleIcon className="h-5 w-5 text-teal-500" />
{isCopy ? ( ) : (
<CheckCircleIcon className="h-5 w-5 text-teal-500" /> <ShareIcon className="h-5 w-5" />
) : ( )}
<ShareIcon className="h-5 w-5" /> </button>
)} <button
</button> type="button"
<button onClick={scrollToReply}
type="button" className="inline-flex h-12 w-12 items-center justify-center rounded-b-xl"
onClick={scrollToReply} >
className="sticky top-16 inline-flex h-12 w-12 items-center justify-center rounded-b-xl" <ReplyIcon className="h-5 w-5" />
> </button>
<ReplyIcon className="h-5 w-5" />
</button>
</div>
</div>
</div> </div>
<div className="col-span-3 flex flex-col gap-1.5">
{status === 'loading' ? (
<div className="px-3 py-1.5">
<div className="rounded-xl bg-neutral-100 px-3 py-3 dark:bg-neutral-900">
Loading...
</div>
</div>
) : (
<div className="flex h-min w-full flex-col px-3">
<div className="rounded-xl bg-neutral-100 px-3 pt-3 dark:bg-neutral-900">
<User pubkey={data.pubkey} time={data.created_at} variant="thread" />
<div className="mt-2">{renderKind(data)}</div>
<div className="mb-3">
<NoteActions id={id} pubkey={data.pubkey} extraButtons={false} />
</div>
</div>
<NoteStats id={id} />
</div>
)}
<div ref={replyRef} className="px-3">
<NoteReplyForm id={id} pubkey={db.account.pubkey} />
<ReplyList id={id} />
</div>
</div>
<div className="col-span-1" />
</div> </div>
</div> </div>
<div className="relative col-span-6 flex flex-col overflow-y-auto">
<div className="mx-auto w-full max-w-2xl">
{status === 'loading' ? (
<div className="px-3 py-1.5">Loading...</div>
) : (
<div className="flex h-min w-full flex-col px-3">
<div className="mb-3 border-b border-neutral-100 pb-3 dark:border-neutral-900">
<User pubkey={data.pubkey} time={data.created_at} variant="thread" />
<div className="mt-3">{renderKind(data)}</div>
<div className="mt-3">
<NoteActions id={id} pubkey={data.pubkey} extraButtons={false} />
</div>
</div>
</div>
)}
<div ref={replyRef} className="px-3">
<div className="mb-3 border-b border-neutral-100 pb-3 dark:border-neutral-900">
<NoteReplyForm id={id} />
</div>
<ReplyList id={id} />
</div>
</div>
</div>
<div className="col-span-1" />
</div> </div>
); );
} }

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

@ -4,6 +4,7 @@ import { useStorage } from '@libs/storage/provider';
import { import {
ArticleIcon, ArticleIcon,
BellIcon,
FileIcon, FileIcon,
FollowsIcon, FollowsIcon,
GroupFeedsIcon, GroupFeedsIcon,
@ -50,16 +51,18 @@ export function WidgetList({ params }: { params: Widget }) {
); );
case WidgetKinds.tmp.xhashtag: case WidgetKinds.tmp.xhashtag:
return ( return (
<HashtagIcon className="h-5 w-4 text-neutral-900 dark:text-neutral-100" /> <HashtagIcon className="h-5 w-5 text-neutral-900 dark:text-neutral-100" />
); );
case WidgetKinds.nostrBand.trendingAccounts: case WidgetKinds.nostrBand.trendingAccounts:
case WidgetKinds.nostrBand.trendingNotes: case WidgetKinds.nostrBand.trendingNotes:
return ( return (
<TrendingIcon className="h-5 w-4 text-neutral-900 dark:text-neutral-100" /> <TrendingIcon className="h-5 w-5 text-neutral-900 dark:text-neutral-100" />
); );
case WidgetKinds.local.notification:
return <BellIcon className="h-5 w-5 text-neutral-900 dark:text-neutral-100" />;
case WidgetKinds.other.learnNostr: case WidgetKinds.other.learnNostr:
return ( return (
<ThreadsIcon className="h-5 w-4 text-neutral-900 dark:text-neutral-100" /> <ThreadsIcon className="h-5 w-5 text-neutral-900 dark:text-neutral-100" />
); );
default: default:
return null; return null;
@ -75,7 +78,7 @@ export function WidgetList({ params }: { params: Widget }) {
<h3 className="text-sm font-semibold text-neutral-500 dark:text-neutral-300"> <h3 className="text-sm font-semibold text-neutral-500 dark:text-neutral-300">
{row.title} {row.title}
</h3> </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"> <div className="flex flex-col divide-y divide-neutral-100 overflow-hidden rounded-xl bg-neutral-50 dark:divide-neutral-900 dark:bg-neutral-950">
{row.data.map((item, index) => ( {row.data.map((item, index) => (
<button <button
onClick={() => openWidget(item)} onClick={() => openWidget(item)}

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

@ -90,9 +90,12 @@ export function SpaceScreen() {
return ( return (
<VList <VList
className="h-full w-full flex-nowrap overflow-x-auto !overflow-y-hidden scrollbar-none" className="h-full w-full flex-nowrap overflow-x-auto !overflow-y-hidden scrollbar-none focus:outline-none"
horizontal horizontal
ref={vlistRef} ref={vlistRef}
initialItemSize={420}
aria-current="step"
tabIndex={0}
> >
{!widgets ? ( {!widgets ? (
<div className="flex h-full w-[420px] flex-col items-center justify-center"> <div className="flex h-full w-[420px] flex-col items-center justify-center">

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

@ -2,7 +2,6 @@ import { NDKEvent, NDKKind } from '@nostr-dev-kit/ndk';
import { useQuery } from '@tanstack/react-query'; import { useQuery } from '@tanstack/react-query';
import { useCallback } from 'react'; import { useCallback } from 'react';
import { useParams } from 'react-router-dom'; import { useParams } from 'react-router-dom';
import { WVList } from 'virtua';
import { UserProfile } from '@app/users/components/profile'; import { UserProfile } from '@app/users/components/profile';
@ -11,15 +10,12 @@ import { useNDK } from '@libs/ndk/provider';
import { import {
ArticleNote, ArticleNote,
FileNote, FileNote,
NoteSkeleton,
NoteWrapper, NoteWrapper,
Repost, Repost,
TextNote, TextNote,
UnknownNote, UnknownNote,
} from '@shared/notes'; } from '@shared/notes';
import { nHoursAgo } from '@utils/date';
export function UserScreen() { export function UserScreen() {
const { pubkey } = useParams(); const { pubkey } = useParams();
const { ndk } = useNDK(); const { ndk } = useNDK();
@ -27,9 +23,10 @@ export function UserScreen() {
const events = await ndk.fetchEvents({ const events = await ndk.fetchEvents({
kinds: [NDKKind.Text, NDKKind.Repost, NDKKind.Article], kinds: [NDKKind.Text, NDKKind.Repost, NDKKind.Article],
authors: [pubkey], authors: [pubkey],
since: nHoursAgo(48), limit: 50,
}); });
return [...events] as unknown as NDKEvent[]; const sorted = [...events].sort((a, b) => b.created_at - a.created_at);
return sorted;
}); });
// render event match event kind // render event match event kind
@ -68,20 +65,16 @@ export function UserScreen() {
); );
return ( return (
<div className="relative h-full w-full overflow-y-auto scrollbar-none"> <div className="relative h-full w-full overflow-y-auto">
<div data-tauri-drag-region className="absolute left-0 top-0 h-11 w-full" /> <div data-tauri-drag-region className="absolute left-0 top-0 h-11 w-full" />
<UserProfile pubkey={pubkey} /> <UserProfile pubkey={pubkey} />
<div className="mt-6 h-full w-full border-t border-white/5 px-1.5"> <div className="mt-6 h-full w-full border-t border-neutral-100 px-1.5 dark:border-neutral-900">
<h3 className="mb-2 pt-4 text-center text-lg font-semibold leading-none text-white"> <h3 className="mb-2 pt-4 text-center text-lg font-semibold leading-none text-neutral-900 dark:text-neutral-100">
Latest posts Latest posts
</h3> </h3>
<div className="mx-auto flex h-full max-w-[500px] flex-col justify-between gap-1.5 pb-4 pt-1.5"> <div className="mx-auto flex h-full max-w-[500px] flex-col justify-between gap-1.5 pb-4 pt-1.5">
{status === 'loading' ? ( {status === 'loading' ? (
<div className="px-3 py-1.5"> <div>Loading...</div>
<div className="rounded-xl bg-white/10 px-3 py-3 backdrop-blur-xl">
<NoteSkeleton />
</div>
</div>
) : data.length === 0 ? ( ) : data.length === 0 ? (
<div className="px-3 py-1.5"> <div className="px-3 py-1.5">
<div className="rounded-xl bg-neutral-100 px-3 py-6 dark:bg-neutral-900"> <div className="rounded-xl bg-neutral-100 px-3 py-6 dark:bg-neutral-900">
@ -93,10 +86,7 @@ export function UserScreen() {
</div> </div>
</div> </div>
) : ( ) : (
<WVList> data.map((item) => renderItem(item))
{data.map((item) => renderItem(item))}
<div className="h-16" />
</WVList>
)} )}
</div> </div>
</div> </div>

34
src/libs/ndk/instance.ts
View File

@ -55,8 +55,10 @@ export const NDKInstance = () => {
async function getSigner(instance: NDK) { async function getSigner(instance: NDK) {
if (!db.account) return null; if (!db.account) return null;
// NIP-46 Signer
const localSignerPrivkey = await db.secureLoad(db.account.pubkey + '-bunker'); const localSignerPrivkey = await db.secureLoad(db.account.pubkey + '-bunker');
const userPrivkey = await db.secureLoad(db.account.pubkey);
// NIP-46 Signer
if (localSignerPrivkey) { if (localSignerPrivkey) {
const localSigner = new NDKPrivateKeySigner(localSignerPrivkey); const localSigner = new NDKPrivateKeySigner(localSignerPrivkey);
const remoteSigner = new NDKNip46Signer(instance, db.account.id, localSigner); const remoteSigner = new NDKNip46Signer(instance, db.account.id, localSigner);
@ -66,8 +68,9 @@ export const NDKInstance = () => {
} }
// Privkey Signer // Privkey Signer
const userPrivkey = await db.secureLoad(db.account.pubkey); if (userPrivkey) {
if (userPrivkey) return new NDKPrivateKeySigner(userPrivkey); return new NDKPrivateKeySigner(userPrivkey);
}
} }
async function initNDK() { async function initNDK() {
@ -91,7 +94,30 @@ export const NDKInstance = () => {
instance.signer = signer; instance.signer = signer;
// update account's metadata // update account's metadata
// todo if (db.account) {
const circleSetting = await db.getSettingValue('circles');
const user = instance.getUser({ hexpubkey: db.account.pubkey });
const follows = await user.follows();
const relayList = await user.relayList();
const followsAsArr = [];
follows.forEach((user) => {
followsAsArr.push(user.pubkey);
});
// update user's follows
await db.updateAccount('follows', JSON.stringify(followsAsArr));
if (circleSetting !== '1')
await db.updateAccount('circles', JSON.stringify(followsAsArr));
// update user's relay list
if (relayList) {
for (const relay of relayList.relays) {
await db.createRelay(relay);
}
}
}
} catch (error) { } catch (error) {
await message(`NDK instance init failed: ${error}`, { await message(`NDK instance init failed: ${error}`, {
title: 'Lume', title: 'Lume',

31
src/shared/accounts/active.tsx
View File

@ -2,7 +2,7 @@ import { NDKFilter, NDKKind } from '@nostr-dev-kit/ndk';
import * as Avatar from '@radix-ui/react-avatar'; import * as Avatar from '@radix-ui/react-avatar';
import { minidenticon } from 'minidenticons'; import { minidenticon } from 'minidenticons';
import { useEffect } from 'react'; import { useEffect } from 'react';
import { Link } from 'react-router-dom'; import { Link, useLocation } from 'react-router-dom';
import { useNDK } from '@libs/ndk/provider'; import { useNDK } from '@libs/ndk/provider';
import { useStorage } from '@libs/storage/provider'; import { useStorage } from '@libs/storage/provider';
@ -22,14 +22,23 @@ export function ActiveAccount() {
const { status, user } = useProfile(db.account.pubkey); const { status, user } = useProfile(db.account.pubkey);
const { sub } = useNostr(); const { sub } = useNostr();
const location = useLocation();
const addActivity = useActivities((state) => state.addActivity); const addActivity = useActivities((state) => state.addActivity);
const addNewMessage = useActivities((state) => state.addNewMessage);
const svgURI = const svgURI =
'data:image/svg+xml;utf8,' + 'data:image/svg+xml;utf8,' +
encodeURIComponent(minidenticon(db.account.pubkey, 90, 50)); encodeURIComponent(minidenticon(db.account.pubkey, 90, 50));
useEffect(() => { useEffect(() => {
const filter: NDKFilter = { const filter: NDKFilter = {
kinds: [NDKKind.Text, NDKKind.Repost, NDKKind.Reaction, NDKKind.Zap], kinds: [
NDKKind.Text,
NDKKind.EncryptedDirectMessage,
NDKKind.Repost,
NDKKind.Reaction,
NDKKind.Zap,
],
since: Math.floor(Date.now() / 1000), since: Math.floor(Date.now() / 1000),
'#p': [db.account.pubkey], '#p': [db.account.pubkey],
}; };
@ -37,7 +46,11 @@ export function ActiveAccount() {
sub( sub(
filter, filter,
async (event) => { async (event) => {
addActivity(event); console.log('receive event: ', event.id);
if (event.kind !== NDKKind.EncryptedDirectMessage) {
addActivity(event);
}
const user = ndk.getUser({ hexpubkey: event.pubkey }); const user = ndk.getUser({ hexpubkey: event.pubkey });
await user.fetchProfile(); await user.fetchProfile();
@ -47,6 +60,18 @@ export function ActiveAccount() {
return await sendNativeNotification( return await sendNativeNotification(
`${user.profile.displayName || user.profile.name} has replied to your note` `${user.profile.displayName || user.profile.name} has replied to your note`
); );
case NDKKind.EncryptedDirectMessage: {
if (location.pathname !== '/chats') {
addNewMessage();
return await sendNativeNotification(
`${
user.profile.displayName || user.profile.name
} has send you a encrypted message`
);
} else {
break;
}
}
case NDKKind.Repost: case NDKKind.Repost:
return await sendNativeNotification( return await sendNativeNotification(
`${user.profile.displayName || user.profile.name} has reposted to your note` `${user.profile.displayName || user.profile.name} has reposted to your note`

13
src/shared/navigation.tsx
View File

@ -11,7 +11,13 @@ import {
RelayIcon, RelayIcon,
} from '@shared/icons'; } from '@shared/icons';
import { useActivities } from '@stores/activities';
import { compactNumber } from '@utils/number';
export function Navigation() { export function Navigation() {
const newMessages = useActivities((state) => state.newMessages);
return ( return (
<div className="flex h-full w-full flex-col justify-between p-3"> <div className="flex h-full w-full flex-col justify-between p-3">
<div className="flex flex-1 flex-col gap-5"> <div className="flex flex-1 flex-col gap-5">
@ -45,13 +51,18 @@ export function Navigation() {
<> <>
<div <div
className={twMerge( className={twMerge(
'inline-flex aspect-square h-auto w-full items-center justify-center rounded-lg', 'relative inline-flex aspect-square h-auto w-full items-center justify-center rounded-lg',
isActive isActive
? 'bg-black/10 text-black dark:bg-white/10 dark:text-white' ? 'bg-black/10 text-black dark:bg-white/10 dark:text-white'
: 'text-black/50 dark:text-neutral-400' : 'text-black/50 dark:text-neutral-400'
)} )}
> >
<ChatsIcon className="h-6 w-6" /> <ChatsIcon className="h-6 w-6" />
{newMessages > 0 ? (
<div className="absolute right-0 top-0 inline-flex h-5 w-5 items-center justify-center rounded-full bg-blue-500 text-[9px] font-medium text-white">
{compactNumber.format(newMessages)}
</div>
) : null}
</div> </div>
<div className="text-sm font-medium text-black dark:text-white">Chats</div> <div className="text-sm font-medium text-black dark:text-white">Chats</div>
</> </>

1
src/shared/notes/index.ts
View File

@ -27,3 +27,4 @@ export * from './mentions/invoice';
export * from './stats'; export * from './stats';
export * from './wrapper'; export * from './wrapper';
export * from './actions/more'; export * from './actions/more';
export * from './replies/replyMediaUploader';

2
src/shared/notes/kinds/articleDetail.tsx
View File

@ -30,7 +30,7 @@ export function ArticleDetailNote({ event }: { event: NDKEvent }) {
return ( return (
<ReactMarkdown <ReactMarkdown
className="prose prose-neutral max-w-none select-text whitespace-pre-line leading-normal dark:prose-invert prose-headings:mb-1 prose-headings:mt-3 prose-p:mb-0 prose-p:mt-0 prose-p:last:mb-1 prose-a:font-normal prose-a:text-blue-500 prose-blockquote:mb-1 prose-blockquote:mt-1 prose-blockquote:border-l-[2px] prose-blockquote:border-blue-500 prose-blockquote:pl-2 prose-pre:whitespace-pre-wrap prose-pre:break-words prose-pre:break-all prose-pre:bg-white/10 prose-ol:m-0 prose-ol:mb-1 prose-ul:mb-1 prose-ul:mt-1 prose-img:mb-2 prose-img:mt-3 prose-hr:mx-0 prose-hr:my-2 hover:prose-a:text-blue-500" className="break-p prose prose-neutral max-w-none select-text whitespace-pre-line leading-normal dark:prose-invert prose-headings:mb-1 prose-headings:mt-3 prose-p:mb-0 prose-p:mt-0 prose-p:last:mb-1 prose-a:font-normal prose-a:text-blue-500 prose-blockquote:mb-1 prose-blockquote:mt-1 prose-blockquote:border-l-[2px] prose-blockquote:border-blue-500 prose-blockquote:pl-2 prose-pre:whitespace-pre-wrap prose-pre:bg-white/10 prose-ol:m-0 prose-ol:mb-1 prose-ul:mb-1 prose-ul:mt-1 prose-img:mb-2 prose-img:mt-3 prose-hr:mx-0 prose-hr:my-2 hover:prose-a:text-blue-500"
remarkPlugins={[remarkGfm]} remarkPlugins={[remarkGfm]}
components={{ components={{
a: ({ href }) => { a: ({ href }) => {

7
src/shared/notes/kinds/file.tsx
View File

@ -13,8 +13,6 @@ import {
import { memo } from 'react'; import { memo } from 'react';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import { Image } from '@shared/image';
import { fileType } from '@utils/nip94'; import { fileType } from '@utils/nip94';
export function FileNote(props: { event?: NDKEvent }) { export function FileNote(props: { event?: NDKEvent }) {
@ -24,10 +22,13 @@ export function FileNote(props: { event?: NDKEvent }) {
if (type === 'image') { if (type === 'image') {
return ( return (
<div className="mb-2 mt-3"> <div className="mb-2 mt-3">
<Image <img
src={url} src={url}
alt={props.event.content} alt={props.event.content}
className="h-auto w-full rounded-lg object-cover" className="h-auto w-full rounded-lg object-cover"
loading="lazy"
decoding="async"
style={{ contentVisibility: 'auto' }}
/> />
</div> </div>
); );

43
src/shared/notes/replies/form.tsx
View File

@ -1,25 +1,33 @@
import { NDKEvent, NDKKind } from '@nostr-dev-kit/ndk';
import { useState } from 'react'; import { useState } from 'react';
import { toast } from 'sonner';
import { useNDK } from '@libs/ndk/provider';
import { useStorage } from '@libs/storage/provider'; import { useStorage } from '@libs/storage/provider';
import { ReplyMediaUploader } from '@shared/notes';
import { User } from '@shared/user'; import { User } from '@shared/user';
import { useNostr } from '@utils/hooks/useNostr';
export function NoteReplyForm({ id }: { id: string }) { export function NoteReplyForm({ id }: { id: string }) {
const { publish } = useNostr();
const { db } = useStorage(); const { db } = useStorage();
const { ndk, relayUrls } = useNDK();
const [value, setValue] = useState(''); const [value, setValue] = useState('');
const submit = () => { const submit = async () => {
const tags = [['e', id, '', 'reply']]; const tags = [['e', id, relayUrls[0], 'root']];
// publish event // publish event
publish({ content: value, kind: 1, tags }); const event = new NDKEvent(ndk);
event.content = value;
event.kind = NDKKind.Text;
event.tags = tags;
// reset form const publishedRelays = await event.publish();
setValue(''); if (publishedRelays) {
toast.success(`Broadcasted to ${publishedRelays.size} relays successfully.`);
setValue('');
}
}; };
return ( return (
@ -30,16 +38,19 @@ export function NoteReplyForm({ id }: { id: string }) {
value={value} value={value}
onChange={(e) => setValue(e.target.value)} onChange={(e) => setValue(e.target.value)}
placeholder="Reply to this thread..." placeholder="Reply to this thread..."
className="relative h-24 w-full resize-none bg-transparent p-3 text-base text-neutral-900 !outline-none placeholder:text-neutral-600 dark:text-neutral-100 dark:placeholder:text-neutral-400" className="relative h-36 w-full resize-none bg-transparent px-5 py-4 text-neutral-900 !outline-none placeholder:text-neutral-600 dark:text-neutral-100 dark:placeholder:text-neutral-400"
spellCheck={false} spellCheck={false}
/> />
<button <div className="inline-flex items-center justify-end gap-2 rounded-b-xl border-t border-neutral-200 p-2 dark:border-neutral-800">
onClick={() => submit()} <ReplyMediaUploader setValue={setValue} />
disabled={value.length === 0 ? true : false} <button
className="mb-2 ml-auto mr-2 h-9 w-20 rounded-lg bg-blue-500 text-white hover:bg-blue-600 disabled:opacity-50" onClick={() => submit()}
> disabled={value.length === 0 ? true : false}
Reply className="h-9 w-20 rounded-lg bg-blue-500 text-white hover:bg-blue-600 disabled:opacity-50"
</button> >
Reply
</button>
</div>
</div> </div>
</div> </div>
); );

2
src/shared/notes/replies/item.tsx
View File

@ -17,7 +17,7 @@ export function Reply({ event, root }: { event: NDKEventWithReplies; root?: stri
<User pubkey={event.pubkey} time={event.created_at} eventId={event.id} /> <User pubkey={event.pubkey} time={event.created_at} eventId={event.id} />
<div className="-mt-4 flex items-start gap-3"> <div className="-mt-4 flex items-start gap-3">
<div className="w-10 shrink-0" /> <div className="w-10 shrink-0" />
<div className="flex-1"> <div className="relative z-10 flex-1">
<MemoizedTextNote content={event.content} /> <MemoizedTextNote content={event.content} />
<NoteActions <NoteActions
id={event.id} id={event.id}

2
src/shared/notes/replies/list.tsx
View File

@ -48,7 +48,7 @@ export function ReplyList({ id }: { id: string }) {
return ( return (
<div className="mt-3 flex flex-col gap-5"> <div className="mt-3 flex flex-col gap-5">
{data?.length === 0 ? ( {data?.length === 0 ? (
<div className="mt-2 flex w-full items-center justify-center rounded-xl bg-neutral-400 dark:bg-neutral-600"> <div className="mt-2 flex w-full items-center justify-center">
<div className="flex flex-col items-center justify-center gap-2 py-6"> <div className="flex flex-col items-center justify-center gap-2 py-6">
<h3 className="text-3xl">👋</h3> <h3 className="text-3xl">👋</h3>
<p className="leading-none text-neutral-600 dark:text-neutral-400"> <p className="leading-none text-neutral-600 dark:text-neutral-400">

79
src/shared/notes/replies/replyMediaUploader.tsx Normal file
View File

@ -0,0 +1,79 @@
import { message, open } from '@tauri-apps/plugin-dialog';
import { readBinaryFile } from '@tauri-apps/plugin-fs';
import { useState } from 'react';
import { MediaIcon } from '@shared/icons';
export function ReplyMediaUploader({ setValue }) {
const [loading, setLoading] = useState(false);
const uploadToNostrBuild = async () => {
try {
// start loading
setLoading(true);
const selected = await open({
multiple: false,
filters: [
{
name: 'Media',
extensions: [
'png',
'jpeg',
'jpg',
'gif',
'mp4',
'mp3',
'webm',
'mkv',
'avi',
'mov',
],
},
],
});
if (!selected) {
setLoading(false);
return;
}
const file = await readBinaryFile(selected.path);
const blob = new Blob([file]);
const data = new FormData();
data.append('fileToUpload', blob);
data.append('submit', 'Upload Image');
const res = await fetch('https://nostr.build/api/v2/upload/files', {
method: 'POST',
body: data,
});
if (res.ok) {
const json = await res.json();
const content = json.data[0];
setValue((prev) => prev + ' ' + content.url);
// stop loading
setLoading(false);
}
} catch (e) {
// stop loading
setLoading(false);
await message(`Upload failed, error: ${e}`, { title: 'Lume', type: 'error' });
}
};
return (
<button
type="button"
onClick={() => uploadToNostrBuild()}
className="inline-flex h-9 w-max items-center justify-center gap-1.5 rounded-lg bg-neutral-100 px-2 text-sm font-medium text-neutral-900 hover:bg-neutral-200 dark:bg-neutral-900 dark:text-neutral-100 dark:hover:bg-neutral-800"
>
<MediaIcon className="h-5 w-5" />
{loading ? 'Uploading...' : 'Add media'}
</button>
);
}

80
src/shared/notification/notifyNote.tsx
View File

@ -1,33 +1,38 @@
import { NDKEvent, NDKKind } from '@nostr-dev-kit/ndk'; import { NDKEvent, NDKKind } from '@nostr-dev-kit/ndk';
import { useStorage } from '@libs/storage/provider';
import { import {
ArticleNote, ArticleNote,
FileNote, FileNote,
NoteActions,
NoteSkeleton, NoteSkeleton,
TextNote, TextNote,
UnknownNote, UnknownNote,
} from '@shared/notes'; } from '@shared/notes';
import { User } from '@shared/user'; import { User } from '@shared/user';
import { WidgetKinds, useWidgets } from '@stores/widgets';
import { formatCreatedAt } from '@utils/createdAt'; import { formatCreatedAt } from '@utils/createdAt';
import { useEvent } from '@utils/hooks/useEvent'; import { useEvent } from '@utils/hooks/useEvent';
export function NotifyNote({ export function NotifyNote({ event }: { event: NDKEvent }) {
id, const createdAt = formatCreatedAt(event.created_at, false);
user, const rootEventId = event.tags.find((el) => el[0] === 'e')?.[1];
content,
kind, const { db } = useStorage();
time, const { status, data } = useEvent(rootEventId);
}: {
id: string; const setWidget = useWidgets((state) => state.setWidget);
user: string;
content: string; const openThread = (event, thread: string) => {
kind: NDKKind | number; const selection = window.getSelection();
time: number; if (selection.toString().length === 0) {
}) { setWidget(db, { kind: WidgetKinds.local.thread, title: 'Thread', content: thread });
const createdAt = formatCreatedAt(time, false); } else {
const { status, data } = useEvent(id); event.stopPropagation();
}
};
const renderKind = (event: NDKEvent) => { const renderKind = (event: NDKEvent) => {
switch (event.kind) { switch (event.kind) {
@ -47,7 +52,7 @@ export function NotifyNote({
case NDKKind.Text: case NDKKind.Text:
return 'replied'; return 'replied';
case NDKKind.Reaction: case NDKKind.Reaction:
return `reacted ${content}`; return `reacted ${event.content}`;
case NDKKind.Repost: case NDKKind.Repost:
return 'reposted'; return 'reposted';
case NDKKind.Zap: case NDKKind.Zap:
@ -68,28 +73,29 @@ export function NotifyNote({
} }
return ( return (
<div className="mb-5 flex h-min w-full flex-col gap-2 px-3 pb-3"> <div className="h-min w-full px-3 pb-3">
<div className="flex items-center justify-between"> <div className="flex flex-col gap-2 rounded-xl bg-neutral-100 p-3 dark:bg-neutral-900">
<div className="flex items-center gap-1.5"> <div className="flex flex-col gap-2">
<User pubkey={user} variant="notify" /> <div className="flex items-center justify-between">
<p className="font-medium text-neutral-600 dark:text-neutral-400"> <div className="flex items-center gap-1.5">
{renderText(kind)} <User pubkey={event.pubkey} variant="notify" />
</p> <p className="font-medium text-neutral-600 dark:text-neutral-400">
</div> {renderText(event.kind)}
<span className="font-medium text-neutral-600 dark:text-neutral-400"> </p>
{createdAt}
</span>
</div>
<div className="relative overflow-hidden rounded-xl bg-neutral-100 px-3 py-4 dark:bg-neutral-900">
<div className="relative flex flex-col">
<User pubkey={data.pubkey} time={data.created_at} eventId={data.id} />
<div className="-mt-4 flex items-start gap-3">
<div className="w-10 shrink-0" />
<div className="relative z-20 flex-1">
{renderKind(data)}
<NoteActions id={data.id} pubkey={data.pubkey} />
</div> </div>
<span className="text-neutral-500 dark:text-neutral-400">{createdAt}</span>
</div> </div>
{event.kind === 1 ? <TextNote content={event.content} /> : null}
</div>
<div
onClick={(e) => openThread(e, data.id)}
onKeyDown={(e) => openThread(e, data.id)}
role="button"
tabIndex={0}
className="cursor-default rounded-lg border border-neutral-300 bg-neutral-200 p-3 dark:border-neutral-700 dark:bg-neutral-800"
>
<User pubkey={data.pubkey} time={data.created_at} variant="mention" />
<div className="mt-1">{renderKind(data)}</div>
</div> </div>
</div> </div>
</div> </div>

16
src/shared/user.tsx
View File

@ -115,13 +115,13 @@ export const User = memo(function User({
loading="lazy" loading="lazy"
decoding="async" decoding="async"
style={{ contentVisibility: 'auto' }} style={{ contentVisibility: 'auto' }}
className="h-8 w-8 rounded-lg" className="h-8 w-8 rounded-md"
/> />
<Avatar.Fallback delayMs={300}> <Avatar.Fallback delayMs={300}>
<img <img
src={svgURI} src={svgURI}
alt={pubkey} alt={pubkey}
className="h-8 w-8 rounded-lg bg-black dark:bg-white" className="h-8 w-8 rounded-md bg-black dark:bg-white"
/> />
</Avatar.Fallback> </Avatar.Fallback>
</Avatar.Root> </Avatar.Root>
@ -416,10 +416,10 @@ export const User = memo(function User({
</div> </div>
<HoverCard.Portal> <HoverCard.Portal>
<HoverCard.Content <HoverCard.Content
className="w-[300px] overflow-hidden rounded-xl border border-white/10 bg-white/10 backdrop-blur-3xl data-[side=bottom]:animate-slideUpAndFade data-[side=left]:animate-slideRightAndFade data-[side=right]:animate-slideLeftAndFade data-[side=top]:animate-slideDownAndFade data-[state=open]:transition-all focus:outline-none" className="ml-4 w-[300px] overflow-hidden rounded-xl border border-neutral-200 bg-neutral-100 shadow-lg data-[side=bottom]:animate-slideUpAndFade data-[side=left]:animate-slideRightAndFade data-[side=right]:animate-slideLeftAndFade data-[side=top]:animate-slideDownAndFade data-[state=open]:transition-all focus:outline-none dark:border-neutral-800 dark:bg-neutral-900"
sideOffset={5} sideOffset={5}
> >
<div className="flex gap-2.5 border-b border-white/5 px-3 py-3"> <div className="flex gap-2.5 border-b border-neutral-200 px-3 py-3 dark:border-neutral-800">
<Avatar.Root className="shrink-0"> <Avatar.Root className="shrink-0">
<Avatar.Image <Avatar.Image
src={user?.picture || user?.image} src={user?.picture || user?.image}
@ -427,13 +427,13 @@ export const User = memo(function User({
loading="lazy" loading="lazy"
decoding="async" decoding="async"
style={{ contentVisibility: 'auto' }} style={{ contentVisibility: 'auto' }}
className="h-10 w-10 rounded-lg border border-white/5" className="h-10 w-10 rounded-lg"
/> />
<Avatar.Fallback delayMs={300}> <Avatar.Fallback delayMs={300}>
<img <img
src={svgURI} src={svgURI}
alt={pubkey} alt={pubkey}
className="h-10 w-10 rounded-lg border border-white/5 bg-black dark:bg-white" className="h-10 w-10 rounded-lg bg-black dark:bg-white"
/> />
</Avatar.Fallback> </Avatar.Fallback>
</Avatar.Root> </Avatar.Root>
@ -467,13 +467,13 @@ export const User = memo(function User({
<div className="flex items-center gap-2 px-3 py-3"> <div className="flex items-center gap-2 px-3 py-3">
<Link <Link
to={`/users/${pubkey}`} to={`/users/${pubkey}`}
className="inline-flex h-10 flex-1 items-center justify-center rounded-md bg-white/10 text-sm font-semibold backdrop-blur-xl hover:bg-blue-600" className="inline-flex h-9 flex-1 items-center justify-center rounded-lg bg-neutral-200 text-sm font-semibold hover:bg-blue-500 hover:text-white dark:bg-neutral-800"
> >
View profile View profile
</Link> </Link>
<Link <Link
to={`/chats/${pubkey}`} to={`/chats/${pubkey}`}
className="inline-flex h-10 flex-1 items-center justify-center rounded-md bg-white/10 text-sm font-semibold backdrop-blur-xl hover:bg-blue-600" className="inline-flex h-9 flex-1 items-center justify-center rounded-lg bg-neutral-200 text-sm font-semibold hover:bg-blue-500 hover:text-white dark:bg-neutral-800"
> >
Message Message
</Link> </Link>

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

@ -67,9 +67,9 @@ export function GlobalArticlesWidget({ params }: { params: Widget }) {
</div> </div>
</div> </div>
) : ( ) : (
<VList className="h-full scrollbar-none"> <VList className="h-full" style={{ contentVisibility: 'auto' }}>
{data.map((item) => renderItem(item))} {data.map((item) => renderItem(item))}
<div className="h-16" /> <div className="h-14" />
</VList> </VList>
)} )}
</div> </div>

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

@ -69,9 +69,9 @@ export function GlobalFilesWidget({ params }: { params: Widget }) {
</div> </div>
</div> </div>
) : ( ) : (
<VList className="h-full scrollbar-none"> <VList className="h-full" style={{ contentVisibility: 'auto' }}>
{data.map((item) => renderItem(item))} {data.map((item) => renderItem(item))}
<div className="h-16" /> <div className="h-14" />
</VList> </VList>
)} )}
</div> </div>

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

@ -99,7 +99,7 @@ export function GlobalHashtagWidget({ params }: { params: Widget }) {
</div> </div>
</div> </div>
) : ( ) : (
<VList className="h-full scrollbar-none"> <VList className="h-full" style={{ contentVisibility: 'auto' }}>
{data.map((item) => renderItem(item))} {data.map((item) => renderItem(item))}
<div className="h-16" /> <div className="h-16" />
</VList> </VList>

4
src/shared/widgets/local/articles.tsx
View File

@ -69,7 +69,7 @@ export function LocalArticlesWidget({ params }: { params: Widget }) {
</div> </div>
</div> </div>
) : ( ) : (
<VList className="h-full scrollbar-none"> <VList className="h-full" style={{ contentVisibility: 'auto' }}>
{dbEvents.map((item) => renderItem(item))} {dbEvents.map((item) => renderItem(item))}
<div className="flex items-center justify-center px-3 py-1.5"> <div className="flex items-center justify-center px-3 py-1.5">
{dbEvents.length > 0 ? ( {dbEvents.length > 0 ? (
@ -97,7 +97,7 @@ export function LocalArticlesWidget({ params }: { params: Widget }) {
</button> </button>
) : null} ) : null}
</div> </div>
<div className="h-16" /> <div className="h-14" />
</VList> </VList>
)} )}
</div> </div>

4
src/shared/widgets/local/feeds.tsx
View File

@ -105,7 +105,7 @@ export function LocalFeedsWidget({ params }: { params: Widget }) {
</div> </div>
</div> </div>
) : ( ) : (
<VList className="h-full scrollbar-none"> <VList className="h-full" style={{ contentVisibility: 'auto' }}>
{dbEvents.map((item) => renderItem(item))} {dbEvents.map((item) => renderItem(item))}
<div className="flex items-center justify-center px-3 py-1.5"> <div className="flex items-center justify-center px-3 py-1.5">
{dbEvents.length > 0 ? ( {dbEvents.length > 0 ? (
@ -133,7 +133,7 @@ export function LocalFeedsWidget({ params }: { params: Widget }) {
</button> </button>
) : null} ) : null}
</div> </div>
<div className="h-16" /> <div className="h-14" />
</VList> </VList>
)} )}
</div> </div>

4
src/shared/widgets/local/files.tsx
View File

@ -69,7 +69,7 @@ export function LocalFilesWidget({ params }: { params: Widget }) {
</div> </div>
</div> </div>
) : ( ) : (
<VList className="h-full scrollbar-none"> <VList className="h-full" style={{ contentVisibility: 'auto' }}>
{dbEvents.map((item) => renderItem(item))} {dbEvents.map((item) => renderItem(item))}
<div className="flex items-center justify-center px-3 py-1.5"> <div className="flex items-center justify-center px-3 py-1.5">
{dbEvents.length > 0 ? ( {dbEvents.length > 0 ? (
@ -97,7 +97,7 @@ export function LocalFilesWidget({ params }: { params: Widget }) {
</button> </button>
) : null} ) : null}
</div> </div>
<div className="h-16" /> <div className="h-14" />
</VList> </VList>
)} )}
</div> </div>

4
src/shared/widgets/local/follows.tsx
View File

@ -104,7 +104,7 @@ export function LocalFollowsWidget({ params }: { params: Widget }) {
</div> </div>
</div> </div>
) : ( ) : (
<VList className="h-full scrollbar-none"> <VList className="h-full" style={{ contentVisibility: 'auto' }}>
{dbEvents.map((item) => renderItem(item))} {dbEvents.map((item) => renderItem(item))}
<div className="flex items-center justify-center px-3 py-1.5"> <div className="flex items-center justify-center px-3 py-1.5">
{dbEvents.length > 0 ? ( {dbEvents.length > 0 ? (
@ -132,7 +132,7 @@ export function LocalFollowsWidget({ params }: { params: Widget }) {
</button> </button>
) : null} ) : null}
</div> </div>
<div className="h-16" /> <div className="h-14" />
</VList> </VList>
)} )}
</div> </div>

2
src/shared/widgets/local/network.tsx
View File

@ -145,7 +145,7 @@ export function LocalNetworkWidget() {
) : dbEvents.length === 0 ? ( ) : dbEvents.length === 0 ? (
<EventLoader firstTime={true} /> <EventLoader firstTime={true} />
) : ( ) : (
<VList className="h-full scrollbar-none"> <VList className="h-full" style={{ contentVisibility: 'auto' }}>
{!isFetched ? <EventLoader firstTime={false} /> : null} {!isFetched ? <EventLoader firstTime={false} /> : null}
{dbEvents.map((item) => renderItem(item))} {dbEvents.map((item) => renderItem(item))}
<div className="flex items-center justify-center px-3 py-1.5"> <div className="flex items-center justify-center px-3 py-1.5">

17
src/shared/widgets/local/notification.tsx
View File

@ -25,18 +25,8 @@ export function LocalNotificationWidget({ params }: { params: Widget }) {
const renderEvent = useCallback( const renderEvent = useCallback(
(event: NDKEvent) => { (event: NDKEvent) => {
const rootEventId = event.tags.find((el) => el[0] === 'e')?.[1];
if (!rootEventId) return null;
if (event.pubkey === db.account.pubkey) return null; if (event.pubkey === db.account.pubkey) return null;
return ( return <NotifyNote key={event.id} event={event} />;
<NotifyNote
id={rootEventId}
user={event.pubkey}
content={event.content}
kind={event.kind}
time={event.created_at}
/>
);
}, },
[activities] [activities]
); );
@ -53,7 +43,7 @@ export function LocalNotificationWidget({ params }: { params: Widget }) {
return ( return (
<WidgetWrapper> <WidgetWrapper>
<TitleBar id={params.id} title={params.title} /> <TitleBar id={params.id} title={params.title} />
<div className="h-full px-3"> <div className="flex-1">
{!activities ? ( {!activities ? (
<div className="flex h-full w-full items-center justify-center"> <div className="flex h-full w-full items-center justify-center">
<div className="flex flex-col items-center gap-1.5"> <div className="flex flex-col items-center gap-1.5">
@ -71,8 +61,9 @@ export function LocalNotificationWidget({ params }: { params: Widget }) {
</p> </p>
</div> </div>
) : ( ) : (
<VList className="h-full overflow-y-auto scrollbar-none"> <VList className="h-full" style={{ contentVisibility: 'auto' }}>
{activities.map((event) => renderEvent(event))} {activities.map((event) => renderEvent(event))}
<div className="h-14" />
</VList> </VList>
)} )}
</div> </div>

5
src/shared/widgets/local/thread.tsx
View File

@ -1,5 +1,6 @@
import { NDKEvent, NDKKind } from '@nostr-dev-kit/ndk'; import { NDKEvent, NDKKind } from '@nostr-dev-kit/ndk';
import { useCallback } from 'react'; import { useCallback } from 'react';
import { WVList } from 'virtua';
import { LoaderIcon } from '@shared/icons'; import { LoaderIcon } from '@shared/icons';
import { import {
@ -41,7 +42,7 @@ export function LocalThreadWidget({ params }: { params: Widget }) {
return ( return (
<WidgetWrapper> <WidgetWrapper>
<TitleBar id={params.id} title={params.title} /> <TitleBar id={params.id} title={params.title} />
<div className="h-full overflow-y-auto px-3 scrollbar-none"> <WVList className="flex-1 overflow-y-auto px-3">
{status === 'loading' ? ( {status === 'loading' ? (
<div className="flex h-16 items-center justify-center rounded-xl bg-neutral-100 px-3 py-3 dark:bg-neutral-900"> <div className="flex h-16 items-center justify-center rounded-xl bg-neutral-100 px-3 py-3 dark:bg-neutral-900">
<LoaderIcon className="h-5 w-5 animate-spin" /> <LoaderIcon className="h-5 w-5 animate-spin" />
@ -58,7 +59,7 @@ export function LocalThreadWidget({ params }: { params: Widget }) {
<NoteReplyForm id={params.content} /> <NoteReplyForm id={params.content} />
<ReplyList id={params.content} /> <ReplyList id={params.content} />
<div className="h-10" /> <div className="h-10" />
</div> </WVList>
</WidgetWrapper> </WidgetWrapper>
); );
} }

6
src/shared/widgets/local/user.tsx
View File

@ -81,7 +81,7 @@ export function LocalUserWidget({ params }: { params: Widget }) {
return ( return (
<WidgetWrapper> <WidgetWrapper>
<TitleBar id={params.id} title={params.title} /> <TitleBar id={params.id} title={params.title} />
<div className="h-full overflow-y-auto scrollbar-none"> <WVList className="flex-1 overflow-y-auto">
<div className="px-3 pt-1.5"> <div className="px-3 pt-1.5">
<UserProfile pubkey={params.content} /> <UserProfile pubkey={params.content} />
</div> </div>
@ -107,11 +107,11 @@ export function LocalUserWidget({ params }: { params: Widget }) {
</div> </div>
</div> </div>
) : ( ) : (
<WVList>{data.map((item) => renderItem(item))}</WVList> data.map((item) => renderItem(item))
)} )}
</div> </div>
</div> </div>
</div> </WVList>
</WidgetWrapper> </WidgetWrapper>
); );
} }

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

@ -57,7 +57,7 @@ export function TrendingAccountsWidget({ params }: { params: Widget }) {
</div> </div>
</div> </div>
) : ( ) : (
<VList className="h-full scrollbar-none"> <VList className="h-full">
{data.map((item: Profile) => ( {data.map((item: Profile) => (
<NostrBandUserProfile key={item.pubkey} data={item} /> <NostrBandUserProfile key={item.pubkey} data={item} />
))} ))}

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

@ -58,7 +58,7 @@ export function TrendingNotesWidget({ params }: { params: Widget }) {
</div> </div>
</div> </div>
) : ( ) : (
<VList className="h-full scrollbar-none"> <VList className="h-full">
{data.map((item) => ( {data.map((item) => (
<NoteWrapper key={item.event.id} event={item.event}> <NoteWrapper key={item.event.id} event={item.event}>
<TextNote content={item.event.content} /> <TextNote content={item.event.content} />

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

@ -21,7 +21,7 @@ export function WidgetWrapper({
minWidth={420} minWidth={420}
maxWidth={600} maxWidth={600}
className={twMerge( className={twMerge(
'flex flex-col border-r border-neutral-100 dark:border-neutral-900', 'flex flex-col border-r-2 border-neutral-50 hover:border-neutral-100 dark:border-neutral-950 dark:hover:border-neutral-900',
className className
)} )}
enable={{ right: true }} enable={{ right: true }}

10
src/stores/activities.ts
View File

@ -3,12 +3,16 @@ import { create } from 'zustand';
interface ActivitiesState { interface ActivitiesState {
activities: Array<NDKEvent>; activities: Array<NDKEvent>;
newMessages: number;
setActivities: (events: NDKEvent[]) => void; setActivities: (events: NDKEvent[]) => void;
addActivity: (event: NDKEvent) => void; addActivity: (event: NDKEvent) => void;
addNewMessage: () => void;
clearNewMessage: () => void;
} }
export const useActivities = create<ActivitiesState>((set) => ({ export const useActivities = create<ActivitiesState>((set) => ({
activities: null, activities: null,
newMessages: 0,
setActivities: (events: NDKEvent[]) => { setActivities: (events: NDKEvent[]) => {
set(() => ({ set(() => ({
activities: events, activities: events,
@ -19,4 +23,10 @@ export const useActivities = create<ActivitiesState>((set) => ({
activities: state.activities ? [event, ...state.activities] : [event], activities: state.activities ? [event, ...state.activities] : [event],
})); }));
}, },
addNewMessage: () => {
set((state) => ({ newMessages: state.newMessages + 1 }));
},
clearNewMessage: () => {
set(() => ({ newMessages: 0 }));
},
})); }));

46
src/utils/hooks/useNostr.ts
View File

@ -30,17 +30,20 @@ export function useNostr() {
) => { ) => {
if (!ndk) throw new Error('NDK instance not found'); if (!ndk) throw new Error('NDK instance not found');
const subEvent = ndk.subscribe(filter, { const key = JSON.stringify(filter);
closeOnEose: false, if (!subManager.get(key)) {
groupable: groupable ?? true, const subEvent = ndk.subscribe(filter, {
}); closeOnEose: false,
groupable: groupable ?? true,
});
subEvent.addListener('event', (event: NDKEvent) => { subEvent.addListener('event', (event: NDKEvent) => {
callback(event); callback(event);
}); });
subManager.set(JSON.stringify(filter), subEvent); subManager.set(JSON.stringify(filter), subEvent);
console.log('current active sub: ', subManager.size); console.log('sub: ', key);
}
}; };
const addContact = async (pubkey: string) => { const addContact = async (pubkey: string) => {
@ -68,7 +71,7 @@ export function useNostr() {
const events = await ndk.fetchEvents({ const events = await ndk.fetchEvents({
kinds: [NDKKind.Text, NDKKind.Repost, NDKKind.Reaction, NDKKind.Zap], kinds: [NDKKind.Text, NDKKind.Repost, NDKKind.Reaction, NDKKind.Zap],
'#p': [db.account.pubkey], '#p': [db.account.pubkey],
limit: limit ?? 100, limit: limit ?? 50,
}); });
return [...events]; return [...events];
@ -179,31 +182,8 @@ export function useNostr() {
const getAllEventsSinceLastLogin = async (customSince?: number) => { const getAllEventsSinceLastLogin = async (customSince?: number) => {
try { try {
const dbEventsEmpty = await db.isEventsEmpty(); const dbEventsEmpty = await db.isEventsEmpty();
const circleSetting = await db.getSettingValue('circles');
const user = ndk.getUser({ hexpubkey: db.account.pubkey });
const follows = await user.follows();
const relayList = await user.relayList();
const followsAsArr = [];
follows.forEach((user) => {
followsAsArr.push(user.pubkey);
});
// update user's follows
await db.updateAccount('follows', JSON.stringify(followsAsArr));
if (circleSetting !== '1')
await db.updateAccount('circles', JSON.stringify(followsAsArr));
// update user's relay list
if (relayList) {
for (const relay of relayList.relays) {
await db.createRelay(relay);
}
}
let since: number; let since: number;
if (!customSince) { if (!customSince) {
if (dbEventsEmpty || db.account.last_login_at === 0) { if (dbEventsEmpty || db.account.last_login_at === 0) {
since = db.account.circles.length > 500 ? nHoursAgo(12) : nHoursAgo(24); since = db.account.circles.length > 500 ? nHoursAgo(12) : nHoursAgo(24);