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

refactor: add event and user routes to default ui

Browse Source
This commit is contained in:
reya
2024-01-08 09:30:04 +07:00
parent c04ca3a1ab
commit aa80301778
36 changed files with 527 additions and 1765 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
packages/ark/src/provider.tsx
View File

@@ -51,7 +51,7 @@ const LumeProvider = ({ children }: PropsWithChildren<object>) => {
// NIP-46 Signer
if (nsecbunker) {
const localSignerPrivkey = await storage.loadPrivkey(
`${storage.account.id}-nsecbunker`,
storage.account.pubkey,
);
if (!localSignerPrivkey) return null;
@@ -63,7 +63,7 @@ const LumeProvider = ({ children }: PropsWithChildren<object>) => {
"wss://nostr.vulpem.com/",
]),
});
await bunker.connect(3000);
await bunker.connect(2000);
const remoteSigner = new NDKNip46Signer(
bunker,
@@ -91,7 +91,7 @@ const LumeProvider = ({ children }: PropsWithChildren<object>) => {
async function init() {
const platformName = await platform();
const sqliteAdapter = await Database.load("sqlite:lume_v2.db");
const sqliteAdapter = await Database.load("sqlite:lume_v3.db");
const storage = new LumeStorage(sqliteAdapter, platformName);
await storage.init();

29
packages/lume-column-antenas/src/event.tsx
View File

@@ -1,29 +0,0 @@
import { ThreadNote } from "@lume/ark";
import { ArrowLeftIcon } from "@lume/icons";
import { ReplyList } from "@lume/ui";
import { useNavigate, useParams } from "react-router-dom";
import { WVList } from "virtua";
export function EventRoute() {
const { id } = useParams();
const navigate = useNavigate();
return (
<WVList className="pb-5 overflow-y-auto">
<div className="flex items-center px-3 mb-3 border-b h-11 bg-neutral-50 dark:bg-neutral-950 border-neutral-100 dark:border-neutral-900">
<button
type="button"
className="inline-flex items-center gap-2.5 text-sm font-medium"
onClick={() => navigate(-1)}
>
<ArrowLeftIcon className="size-4" />
Back
</button>
</div>
<div className="px-3">
<ThreadNote eventId={id} />
<ReplyList eventId={id} title="All replies" className="mt-5" />
</div>
</WVList>
);
}

3
packages/lume-column-antenas/src/index.tsx
View File

@@ -2,9 +2,8 @@ import { Column } from "@lume/ark";
import { GroupFeedsIcon } from "@lume/icons";
import { IColumn } from "@lume/types";
import { AntenasForm } from "./components/form";
import { EventRoute } from "./event";
import { HomeRoute } from "./home";
import { UserRoute } from "./user";
import { EventRoute, UserRoute } from "@lume/ui";
export function Antenas({ column }: { column: IColumn }) {
const colKey = `antenas-${column.id}`;

213
packages/lume-column-antenas/src/user.tsx
View File

@@ -1,213 +0,0 @@
import {
RepostNote,
TextNote,
useArk,
useProfile,
useStorage,
} from "@lume/ark";
import { ArrowLeftIcon, ArrowRightCircleIcon, LoaderIcon } from "@lume/icons";
import { NIP05 } from "@lume/ui";
import { FETCH_LIMIT, displayNpub } from "@lume/utils";
import { NDKEvent, NDKKind } from "@nostr-dev-kit/ndk";
import { useInfiniteQuery } from "@tanstack/react-query";
import { useEffect, useMemo, useState } from "react";
import { Link, useNavigate, useParams } from "react-router-dom";
import { toast } from "sonner";
import { WVList } from "virtua";
export function UserRoute() {
const ark = useArk();
const storage = useStorage();
const navigate = useNavigate();
const { id } = useParams();
const { user } = useProfile(id);
const { data, hasNextPage, isLoading, isFetchingNextPage, fetchNextPage } =
useInfiniteQuery({
queryKey: ["user-posts", id],
initialPageParam: 0,
queryFn: async ({
signal,
pageParam,
}: {
signal: AbortSignal;
pageParam: number;
}) => {
const events = await ark.getInfiniteEvents({
filter: {
kinds: [NDKKind.Text, NDKKind.Repost],
authors: [id],
},
limit: FETCH_LIMIT,
pageParam,
signal,
});
return events;
},
getNextPageParam: (lastPage) => {
const lastEvent = lastPage.at(-1);
if (!lastEvent) return;
return lastEvent.created_at - 1;
},
refetchOnWindowFocus: false,
});
const [followed, setFollowed] = useState(false);
const allEvents = useMemo(
() => (data ? data.pages.flatMap((page) => page) : []),
[data],
);
const follow = async (pubkey: string) => {
try {
const add = await ark.createContact({ pubkey });
if (add) {
setFollowed(true);
} else {
toast.success("You already follow this user");
}
} catch (error) {
console.log(error);
}
};
const unfollow = async (pubkey: string) => {
try {
const remove = await ark.deleteContact({ pubkey });
if (remove) {
setFollowed(false);
}
} catch (error) {
console.log(error);
}
};
const renderItem = (event: NDKEvent) => {
switch (event.kind) {
case NDKKind.Text:
return <TextNote key={event.id} event={event} className="mt-3" />;
case NDKKind.Repost:
return <RepostNote key={event.id} event={event} className="mt-3" />;
default:
return <TextNote key={event.id} event={event} className="mt-3" />;
}
};
useEffect(() => {
if (storage.account.contacts.includes(id)) {
setFollowed(true);
}
}, []);
return (
<WVList className="pb-5 overflow-y-auto">
<div className="h-11 bg-neutral-50 dark:bg-neutral-950 border-b flex items-center px-3 border-neutral-100 dark:border-neutral-900 mb-3">
<button
type="button"
className="inline-flex items-center gap-2.5 text-sm font-medium"
onClick={() => navigate(-1)}
>
<ArrowLeftIcon className="size-4" />
Back
</button>
</div>
<div className="px-3">
<div className="flex flex-col gap-2">
<div className="flex items-center justify-between">
<img
src={user?.picture || user?.image}
alt={id}
className="h-12 w-12 shrink-0 rounded-lg object-cover"
loading="lazy"
decoding="async"
/>
<div className="inline-flex items-center gap-2">
{followed ? (
<button
type="button"
onClick={() => unfollow(id)}
className="inline-flex h-9 w-28 items-center justify-center rounded-lg bg-neutral-200 text-sm font-medium hover:bg-blue-500 hover:text-white dark:bg-neutral-800"
>
Unfollow
</button>
) : (
<button
type="button"
onClick={() => follow(id)}
className="inline-flex h-9 w-28 items-center justify-center rounded-lg bg-neutral-200 text-sm font-medium hover:bg-blue-500 hover:text-white dark:bg-neutral-800"
>
Follow
</button>
)}
<Link
to={`/chats/${id}`}
className="inline-flex h-9 w-28 items-center justify-center rounded-lg bg-neutral-200 text-sm font-medium hover:bg-blue-500 hover:text-white dark:bg-neutral-800"
>
Message
</Link>
</div>
</div>
<div className="flex flex-1 flex-col gap-1.5">
<div className="flex flex-col">
<h5 className="text-lg font-semibold">
{user?.name ||
user?.display_name ||
user?.displayName ||
"Anon"}
</h5>
{user?.nip05 ? (
<NIP05
pubkey={id}
nip05={user?.nip05}
className="max-w-[15rem] truncate text-sm text-neutral-600 dark:text-neutral-400"
/>
) : (
<span className="max-w-[15rem] truncate text-sm text-neutral-600 dark:text-neutral-400">
{displayNpub(id, 16)}
</span>
)}
</div>
<div className="max-w-[500px] select-text break-words text-neutral-900 dark:text-neutral-100">
{user?.about}
</div>
</div>
</div>
<div className="pt-2 mt-2 border-t border-neutral-100 dark:border-neutral-900">
<h3 className="text-lg font-semibold text-neutral-900 dark:text-neutral-100">
Latest posts
</h3>
<div className="flex h-full w-full flex-col justify-between gap-1.5 pb-10">
{isLoading ? (
<div className="flex items-center justify-center">
<LoaderIcon className="h-4 w-4 animate-spin" />
</div>
) : (
allEvents.map((item) => renderItem(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>
</div>
</div>
</div>
</WVList>
);
}

29
packages/lume-column-group/src/event.tsx
View File

@@ -1,29 +0,0 @@
import { ThreadNote } from "@lume/ark";
import { ArrowLeftIcon } from "@lume/icons";
import { ReplyList } from "@lume/ui";
import { useNavigate, useParams } from "react-router-dom";
import { WVList } from "virtua";
export function EventRoute() {
const { id } = useParams();
const navigate = useNavigate();
return (
<WVList className="pb-5 overflow-y-auto">
<div className="h-11 bg-neutral-50 dark:bg-neutral-950 border-b flex items-center px-3 border-neutral-100 dark:border-neutral-900 mb-3">
<button
type="button"
className="inline-flex items-center gap-2.5 text-sm font-medium"
onClick={() => navigate(-1)}
>
<ArrowLeftIcon className="size-4" />
Back
</button>
</div>
<div className="px-3">
<ThreadNote eventId={id} />
<ReplyList eventId={id} title="All replies" className="mt-5" />
</div>
</WVList>
);
}

3
packages/lume-column-group/src/index.tsx
View File

@@ -2,9 +2,8 @@ import { Column } from "@lume/ark";
import { GroupFeedsIcon } from "@lume/icons";
import { IColumn } from "@lume/types";
import { GroupForm } from "./components/form";
import { EventRoute } from "./event";
import { HomeRoute } from "./home";
import { UserRoute } from "./user";
import { EventRoute, UserRoute } from "@lume/ui";
export function Group({ column }: { column: IColumn }) {
const colKey = `group-${column.id}`;

213
packages/lume-column-group/src/user.tsx
View File

@@ -1,213 +0,0 @@
import {
RepostNote,
TextNote,
useArk,
useProfile,
useStorage,
} from "@lume/ark";
import { ArrowLeftIcon, ArrowRightCircleIcon, LoaderIcon } from "@lume/icons";
import { NIP05 } from "@lume/ui";
import { FETCH_LIMIT, displayNpub } from "@lume/utils";
import { NDKEvent, NDKKind } from "@nostr-dev-kit/ndk";
import { useInfiniteQuery } from "@tanstack/react-query";
import { useEffect, useMemo, useState } from "react";
import { Link, useNavigate, useParams } from "react-router-dom";
import { toast } from "sonner";
import { WVList } from "virtua";
export function UserRoute() {
const ark = useArk();
const storage = useStorage();
const navigate = useNavigate();
const { id } = useParams();
const { user } = useProfile(id);
const { data, hasNextPage, isLoading, isFetchingNextPage, fetchNextPage } =
useInfiniteQuery({
queryKey: ["user-posts", id],
initialPageParam: 0,
queryFn: async ({
signal,
pageParam,
}: {
signal: AbortSignal;
pageParam: number;
}) => {
const events = await ark.getInfiniteEvents({
filter: {
kinds: [NDKKind.Text, NDKKind.Repost],
authors: [id],
},
limit: FETCH_LIMIT,
pageParam,
signal,
});
return events;
},
getNextPageParam: (lastPage) => {
const lastEvent = lastPage.at(-1);
if (!lastEvent) return;
return lastEvent.created_at - 1;
},
refetchOnWindowFocus: false,
});
const [followed, setFollowed] = useState(false);
const allEvents = useMemo(
() => (data ? data.pages.flatMap((page) => page) : []),
[data],
);
const follow = async (pubkey: string) => {
try {
const add = await ark.createContact({ pubkey });
if (add) {
setFollowed(true);
} else {
toast.success("You already follow this user");
}
} catch (error) {
console.log(error);
}
};
const unfollow = async (pubkey: string) => {
try {
const remove = await ark.deleteContact({ pubkey });
if (remove) {
setFollowed(false);
}
} catch (error) {
console.log(error);
}
};
const renderItem = (event: NDKEvent) => {
switch (event.kind) {
case NDKKind.Text:
return <TextNote key={event.id} event={event} className="mt-3" />;
case NDKKind.Repost:
return <RepostNote key={event.id} event={event} className="mt-3" />;
default:
return <TextNote key={event.id} event={event} className="mt-3" />;
}
};
useEffect(() => {
if (storage.account.contacts.includes(id)) {
setFollowed(true);
}
}, []);
return (
<WVList className="pb-5 overflow-y-auto">
<div className="h-11 bg-neutral-50 dark:bg-neutral-950 border-b flex items-center px-3 border-neutral-100 dark:border-neutral-900 mb-3">
<button
type="button"
className="inline-flex items-center gap-2.5 text-sm font-medium"
onClick={() => navigate(-1)}
>
<ArrowLeftIcon className="size-4" />
Back
</button>
</div>
<div className="px-3">
<div className="flex flex-col gap-2">
<div className="flex items-center justify-between">
<img
src={user?.picture || user?.image}
alt={id}
className="h-12 w-12 shrink-0 rounded-lg object-cover"
loading="lazy"
decoding="async"
/>
<div className="inline-flex items-center gap-2">
{followed ? (
<button
type="button"
onClick={() => unfollow(id)}
className="inline-flex h-9 w-28 items-center justify-center rounded-lg bg-neutral-200 text-sm font-medium hover:bg-blue-500 hover:text-white dark:bg-neutral-800"
>
Unfollow
</button>
) : (
<button
type="button"
onClick={() => follow(id)}
className="inline-flex h-9 w-28 items-center justify-center rounded-lg bg-neutral-200 text-sm font-medium hover:bg-blue-500 hover:text-white dark:bg-neutral-800"
>
Follow
</button>
)}
<Link
to={`/chats/${id}`}
className="inline-flex h-9 w-28 items-center justify-center rounded-lg bg-neutral-200 text-sm font-medium hover:bg-blue-500 hover:text-white dark:bg-neutral-800"
>
Message
</Link>
</div>
</div>
<div className="flex flex-1 flex-col gap-1.5">
<div className="flex flex-col">
<h5 className="text-lg font-semibold">
{user?.name ||
user?.display_name ||
user?.displayName ||
"Anon"}
</h5>
{user?.nip05 ? (
<NIP05
pubkey={id}
nip05={user?.nip05}
className="max-w-[15rem] truncate text-sm text-neutral-600 dark:text-neutral-400"
/>
) : (
<span className="max-w-[15rem] truncate text-sm text-neutral-600 dark:text-neutral-400">
{displayNpub(id, 16)}
</span>
)}
</div>
<div className="max-w-[500px] select-text break-words text-neutral-900 dark:text-neutral-100">
{user?.about}
</div>
</div>
</div>
<div className="pt-2 mt-2 border-t border-neutral-100 dark:border-neutral-900">
<h3 className="text-lg font-semibold text-neutral-900 dark:text-neutral-100">
Latest posts
</h3>
<div className="flex h-full w-full flex-col justify-between gap-1.5 pb-10">
{isLoading ? (
<div className="flex items-center justify-center">
<LoaderIcon className="h-4 w-4 animate-spin" />
</div>
) : (
allEvents.map((item) => renderItem(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>
</div>
</div>
</div>
</WVList>
);
}

29
packages/lume-column-hashtag/src/event.tsx
View File

@@ -1,29 +0,0 @@
import { ThreadNote } from "@lume/ark";
import { ArrowLeftIcon } from "@lume/icons";
import { ReplyList } from "@lume/ui";
import { useNavigate, useParams } from "react-router-dom";
import { WVList } from "virtua";
export function EventRoute() {
const { id } = useParams();
const navigate = useNavigate();
return (
<WVList className="pb-5 overflow-y-auto">
<div className="h-11 bg-neutral-50 dark:bg-neutral-950 border-b flex items-center px-3 border-neutral-100 dark:border-neutral-900 mb-3">
<button
type="button"
className="inline-flex items-center gap-2.5 text-sm font-medium"
onClick={() => navigate(-1)}
>
<ArrowLeftIcon className="size-4" />
Back
</button>
</div>
<div className="px-3">
<ThreadNote eventId={id} />
<ReplyList eventId={id} title="All replies" className="mt-5" />
</div>
</WVList>
);
}

3
packages/lume-column-hashtag/src/index.tsx
View File

@@ -1,9 +1,8 @@
import { Column } from "@lume/ark";
import { HashtagIcon } from "@lume/icons";
import { IColumn } from "@lume/types";
import { EventRoute } from "./event";
import { HomeRoute } from "./home";
import { UserRoute } from "./user";
import { EventRoute, UserRoute } from "@lume/ui";
export function Hashtag({ column }: { column: IColumn }) {
const colKey = `hashtag-${column.id}`;

213
packages/lume-column-hashtag/src/user.tsx
View File

@@ -1,213 +0,0 @@
import {
RepostNote,
TextNote,
useArk,
useProfile,
useStorage,
} from "@lume/ark";
import { ArrowLeftIcon, ArrowRightCircleIcon, LoaderIcon } from "@lume/icons";
import { NIP05 } from "@lume/ui";
import { FETCH_LIMIT, displayNpub } from "@lume/utils";
import { NDKEvent, NDKKind } from "@nostr-dev-kit/ndk";
import { useInfiniteQuery } from "@tanstack/react-query";
import { useEffect, useMemo, useState } from "react";
import { Link, useNavigate, useParams } from "react-router-dom";
import { toast } from "sonner";
import { WVList } from "virtua";
export function UserRoute() {
const ark = useArk();
const storage = useStorage();
const navigate = useNavigate();
const { id } = useParams();
const { user } = useProfile(id);
const { data, hasNextPage, isLoading, isFetchingNextPage, fetchNextPage } =
useInfiniteQuery({
queryKey: ["user-posts", id],
initialPageParam: 0,
queryFn: async ({
signal,
pageParam,
}: {
signal: AbortSignal;
pageParam: number;
}) => {
const events = await ark.getInfiniteEvents({
filter: {
kinds: [NDKKind.Text, NDKKind.Repost],
authors: [id],
},
limit: FETCH_LIMIT,
pageParam,
signal,
});
return events;
},
getNextPageParam: (lastPage) => {
const lastEvent = lastPage.at(-1);
if (!lastEvent) return;
return lastEvent.created_at - 1;
},
refetchOnWindowFocus: false,
});
const [followed, setFollowed] = useState(false);
const allEvents = useMemo(
() => (data ? data.pages.flatMap((page) => page) : []),
[data],
);
const follow = async (pubkey: string) => {
try {
const add = await ark.createContact({ pubkey });
if (add) {
setFollowed(true);
} else {
toast.success("You already follow this user");
}
} catch (error) {
console.log(error);
}
};
const unfollow = async (pubkey: string) => {
try {
const remove = await ark.deleteContact({ pubkey });
if (remove) {
setFollowed(false);
}
} catch (error) {
console.log(error);
}
};
const renderItem = (event: NDKEvent) => {
switch (event.kind) {
case NDKKind.Text:
return <TextNote key={event.id} event={event} className="mt-3" />;
case NDKKind.Repost:
return <RepostNote key={event.id} event={event} className="mt-3" />;
default:
return <TextNote key={event.id} event={event} className="mt-3" />;
}
};
useEffect(() => {
if (storage.account.contacts.includes(id)) {
setFollowed(true);
}
}, []);
return (
<WVList className="pb-5 overflow-y-auto">
<div className="h-11 bg-neutral-50 dark:bg-neutral-950 border-b flex items-center px-3 border-neutral-100 dark:border-neutral-900 mb-3">
<button
type="button"
className="inline-flex items-center gap-2.5 text-sm font-medium"
onClick={() => navigate(-1)}
>
<ArrowLeftIcon className="size-4" />
Back
</button>
</div>
<div className="px-3">
<div className="flex flex-col gap-2">
<div className="flex items-center justify-between">
<img
src={user?.picture || user?.image}
alt={id}
className="h-12 w-12 shrink-0 rounded-lg object-cover"
loading="lazy"
decoding="async"
/>
<div className="inline-flex items-center gap-2">
{followed ? (
<button
type="button"
onClick={() => unfollow(id)}
className="inline-flex h-9 w-28 items-center justify-center rounded-lg bg-neutral-200 text-sm font-medium hover:bg-blue-500 hover:text-white dark:bg-neutral-800"
>
Unfollow
</button>
) : (
<button
type="button"
onClick={() => follow(id)}
className="inline-flex h-9 w-28 items-center justify-center rounded-lg bg-neutral-200 text-sm font-medium hover:bg-blue-500 hover:text-white dark:bg-neutral-800"
>
Follow
</button>
)}
<Link
to={`/chats/${id}`}
className="inline-flex h-9 w-28 items-center justify-center rounded-lg bg-neutral-200 text-sm font-medium hover:bg-blue-500 hover:text-white dark:bg-neutral-800"
>
Message
</Link>
</div>
</div>
<div className="flex flex-1 flex-col gap-1.5">
<div className="flex flex-col">
<h5 className="text-lg font-semibold">
{user?.name ||
user?.display_name ||
user?.displayName ||
"Anon"}
</h5>
{user?.nip05 ? (
<NIP05
pubkey={id}
nip05={user?.nip05}
className="max-w-[15rem] truncate text-sm text-neutral-600 dark:text-neutral-400"
/>
) : (
<span className="max-w-[15rem] truncate text-sm text-neutral-600 dark:text-neutral-400">
{displayNpub(id, 16)}
</span>
)}
</div>
<div className="max-w-[500px] select-text break-words text-neutral-900 dark:text-neutral-100">
{user?.about}
</div>
</div>
</div>
<div className="pt-2 mt-2 border-t border-neutral-100 dark:border-neutral-900">
<h3 className="text-lg font-semibold text-neutral-900 dark:text-neutral-100">
Latest posts
</h3>
<div className="flex h-full w-full flex-col justify-between gap-1.5 pb-10">
{isLoading ? (
<div className="flex items-center justify-center">
<LoaderIcon className="h-4 w-4 animate-spin" />
</div>
) : (
allEvents.map((item) => renderItem(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>
</div>
</div>
</div>
</WVList>
);
}

29
packages/lume-column-thread/src/event.tsx
View File

@@ -1,29 +0,0 @@
import { ThreadNote } from "@lume/ark";
import { ArrowLeftIcon } from "@lume/icons";
import { ReplyList } from "@lume/ui";
import { useNavigate, useParams } from "react-router-dom";
import { WVList } from "virtua";
export function EventRoute() {
const { id } = useParams();
const navigate = useNavigate();
return (
<WVList className="pb-5 overflow-y-auto">
<div className="h-11 bg-neutral-50 dark:bg-neutral-950 border-b flex items-center px-3 border-neutral-100 dark:border-neutral-900 mb-3">
<button
type="button"
className="inline-flex items-center gap-2.5 text-sm font-medium"
onClick={() => navigate(-1)}
>
<ArrowLeftIcon className="size-4" />
Back
</button>
</div>
<div className="px-3">
<ThreadNote eventId={id} />
<ReplyList eventId={id} title="All replies" className="mt-5" />
</div>
</WVList>
);
}

18
packages/lume-column-thread/src/home.tsx
View File

@@ -1,14 +1,16 @@
import { Note, ThreadNote } from "@lume/ark";
import { ThreadNote } from "@lume/ark";
import { ReplyList } from "@lume/ui";
import { WVList } from "virtua";
import { WindowVirtualizer } from "virtua";
export function HomeRoute({ id }: { id: string }) {
return (
<WVList className="pb-5 overflow-y-auto">
<div className="px-3">
<ThreadNote eventId={id} />
<ReplyList eventId={id} title="All replies" className="mt-5" />
</div>
</WVList>
<div className="pb-5 overflow-y-auto">
<WindowVirtualizer>
<div className="px-3">
<ThreadNote eventId={id} />
<ReplyList eventId={id} title="All replies" className="mt-5" />
</div>
</WindowVirtualizer>
</div>
);
}

3
packages/lume-column-thread/src/index.tsx
View File

@@ -1,8 +1,7 @@
import { Column } from "@lume/ark";
import { IColumn } from "@lume/types";
import { EventRoute } from "./event";
import { HomeRoute } from "./home";
import { UserRoute } from "./user";
import { EventRoute, UserRoute } from "@lume/ui";
export function Thread({ column }: { column: IColumn }) {
return (

213
packages/lume-column-thread/src/user.tsx
View File

@@ -1,213 +0,0 @@
import {
RepostNote,
TextNote,
useArk,
useProfile,
useStorage,
} from "@lume/ark";
import { ArrowLeftIcon, ArrowRightCircleIcon, LoaderIcon } from "@lume/icons";
import { NIP05 } from "@lume/ui";
import { FETCH_LIMIT, displayNpub } from "@lume/utils";
import { NDKEvent, NDKKind } from "@nostr-dev-kit/ndk";
import { useInfiniteQuery } from "@tanstack/react-query";
import { useEffect, useMemo, useState } from "react";
import { Link, useNavigate, useParams } from "react-router-dom";
import { toast } from "sonner";
import { WVList } from "virtua";
export function UserRoute() {
const ark = useArk();
const storage = useStorage();
const navigate = useNavigate();
const { id } = useParams();
const { user } = useProfile(id);
const { data, hasNextPage, isLoading, isFetchingNextPage, fetchNextPage } =
useInfiniteQuery({
queryKey: ["user-posts", id],
initialPageParam: 0,
queryFn: async ({
signal,
pageParam,
}: {
signal: AbortSignal;
pageParam: number;
}) => {
const events = await ark.getInfiniteEvents({
filter: {
kinds: [NDKKind.Text, NDKKind.Repost],
authors: [id],
},
limit: FETCH_LIMIT,
pageParam,
signal,
});
return events;
},
getNextPageParam: (lastPage) => {
const lastEvent = lastPage.at(-1);
if (!lastEvent) return;
return lastEvent.created_at - 1;
},
refetchOnWindowFocus: false,
});
const [followed, setFollowed] = useState(false);
const allEvents = useMemo(
() => (data ? data.pages.flatMap((page) => page) : []),
[data],
);
const follow = async (pubkey: string) => {
try {
const add = await ark.createContact({ pubkey });
if (add) {
setFollowed(true);
} else {
toast.success("You already follow this user");
}
} catch (error) {
console.log(error);
}
};
const unfollow = async (pubkey: string) => {
try {
const remove = await ark.deleteContact({ pubkey });
if (remove) {
setFollowed(false);
}
} catch (error) {
console.log(error);
}
};
const renderItem = (event: NDKEvent) => {
switch (event.kind) {
case NDKKind.Text:
return <TextNote key={event.id} event={event} className="mt-3" />;
case NDKKind.Repost:
return <RepostNote key={event.id} event={event} className="mt-3" />;
default:
return <TextNote key={event.id} event={event} className="mt-3" />;
}
};
useEffect(() => {
if (storage.account.contacts.includes(id)) {
setFollowed(true);
}
}, []);
return (
<WVList className="pb-5 overflow-y-auto">
<div className="h-11 bg-neutral-50 dark:bg-neutral-950 border-b flex items-center px-3 border-neutral-100 dark:border-neutral-900 mb-3">
<button
type="button"
className="inline-flex items-center gap-2.5 text-sm font-medium"
onClick={() => navigate(-1)}
>
<ArrowLeftIcon className="size-4" />
Back
</button>
</div>
<div className="px-3">
<div className="flex flex-col gap-2">
<div className="flex items-center justify-between">
<img
src={user?.picture || user?.image}
alt={id}
className="h-12 w-12 shrink-0 rounded-lg object-cover"
loading="lazy"
decoding="async"
/>
<div className="inline-flex items-center gap-2">
{followed ? (
<button
type="button"
onClick={() => unfollow(id)}
className="inline-flex h-9 w-28 items-center justify-center rounded-lg bg-neutral-200 text-sm font-medium hover:bg-blue-500 hover:text-white dark:bg-neutral-800"
>
Unfollow
</button>
) : (
<button
type="button"
onClick={() => follow(id)}
className="inline-flex h-9 w-28 items-center justify-center rounded-lg bg-neutral-200 text-sm font-medium hover:bg-blue-500 hover:text-white dark:bg-neutral-800"
>
Follow
</button>
)}
<Link
to={`/chats/${id}`}
className="inline-flex h-9 w-28 items-center justify-center rounded-lg bg-neutral-200 text-sm font-medium hover:bg-blue-500 hover:text-white dark:bg-neutral-800"
>
Message
</Link>
</div>
</div>
<div className="flex flex-1 flex-col gap-1.5">
<div className="flex flex-col">
<h5 className="text-lg font-semibold">
{user?.name ||
user?.display_name ||
user?.displayName ||
"Anon"}
</h5>
{user?.nip05 ? (
<NIP05
pubkey={id}
nip05={user?.nip05}
className="max-w-[15rem] truncate text-sm text-neutral-600 dark:text-neutral-400"
/>
) : (
<span className="max-w-[15rem] truncate text-sm text-neutral-600 dark:text-neutral-400">
{displayNpub(id, 16)}
</span>
)}
</div>
<div className="max-w-[500px] select-text break-words text-neutral-900 dark:text-neutral-100">
{user?.about}
</div>
</div>
</div>
<div className="pt-2 mt-2 border-t border-neutral-100 dark:border-neutral-900">
<h3 className="text-lg font-semibold text-neutral-900 dark:text-neutral-100">
Latest posts
</h3>
<div className="flex h-full w-full flex-col justify-between gap-1.5 pb-10">
{isLoading ? (
<div className="flex items-center justify-center">
<LoaderIcon className="h-4 w-4 animate-spin" />
</div>
) : (
allEvents.map((item) => renderItem(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>
</div>
</div>
</div>
</WVList>
);
}

29
packages/lume-column-timeline/src/event.tsx
View File

@@ -1,29 +0,0 @@
import { ThreadNote } from "@lume/ark";
import { ArrowLeftIcon } from "@lume/icons";
import { ReplyList } from "@lume/ui";
import { useNavigate, useParams } from "react-router-dom";
import { WVList } from "virtua";
export function EventRoute() {
const { id } = useParams();
const navigate = useNavigate();
return (
<WVList className="pb-5 overflow-y-auto">
<div className="h-11 bg-neutral-50 dark:bg-neutral-950 border-b flex items-center px-3 border-neutral-100 dark:border-neutral-900 mb-3">
<button
type="button"
className="inline-flex items-center gap-2.5 text-sm font-medium"
onClick={() => navigate(-1)}
>
<ArrowLeftIcon className="size-4" />
Back
</button>
</div>
<div className="px-3">
<ThreadNote eventId={id} />
<ReplyList eventId={id} title="All replies" className="mt-5" />
</div>
</WVList>
);
}

3
packages/lume-column-timeline/src/index.tsx
View File

@@ -4,9 +4,8 @@ import { IColumn } from "@lume/types";
import { NDKEvent, NDKKind } from "@nostr-dev-kit/ndk";
import { useQueryClient } from "@tanstack/react-query";
import { useRef } from "react";
import { EventRoute } from "./event";
import { HomeRoute } from "./home";
import { UserRoute } from "./user";
import { EventRoute, UserRoute } from "@lume/ui";
export function Timeline({ column }: { column: IColumn }) {
const colKey = `timeline-${column.id}`;

213
packages/lume-column-timeline/src/user.tsx
View File

@@ -1,213 +0,0 @@
import {
RepostNote,
TextNote,
useArk,
useProfile,
useStorage,
} from "@lume/ark";
import { ArrowLeftIcon, ArrowRightCircleIcon, LoaderIcon } from "@lume/icons";
import { NIP05 } from "@lume/ui";
import { FETCH_LIMIT, displayNpub } from "@lume/utils";
import { NDKEvent, NDKKind } from "@nostr-dev-kit/ndk";
import { useInfiniteQuery } from "@tanstack/react-query";
import { useEffect, useMemo, useState } from "react";
import { Link, useNavigate, useParams } from "react-router-dom";
import { toast } from "sonner";
import { WVList } from "virtua";
export function UserRoute() {
const ark = useArk();
const storage = useStorage();
const navigate = useNavigate();
const { id } = useParams();
const { user } = useProfile(id);
const { data, hasNextPage, isLoading, isFetchingNextPage, fetchNextPage } =
useInfiniteQuery({
queryKey: ["user-posts", id],
initialPageParam: 0,
queryFn: async ({
signal,
pageParam,
}: {
signal: AbortSignal;
pageParam: number;
}) => {
const events = await ark.getInfiniteEvents({
filter: {
kinds: [NDKKind.Text, NDKKind.Repost],
authors: [id],
},
limit: FETCH_LIMIT,
pageParam,
signal,
});
return events;
},
getNextPageParam: (lastPage) => {
const lastEvent = lastPage.at(-1);
if (!lastEvent) return;
return lastEvent.created_at - 1;
},
refetchOnWindowFocus: false,
});
const [followed, setFollowed] = useState(false);
const allEvents = useMemo(
() => (data ? data.pages.flatMap((page) => page) : []),
[data],
);
const follow = async (pubkey: string) => {
try {
const add = await ark.createContact({ pubkey });
if (add) {
setFollowed(true);
} else {
toast.success("You already follow this user");
}
} catch (error) {
console.log(error);
}
};
const unfollow = async (pubkey: string) => {
try {
const remove = await ark.deleteContact({ pubkey });
if (remove) {
setFollowed(false);
}
} catch (error) {
console.log(error);
}
};
const renderItem = (event: NDKEvent) => {
switch (event.kind) {
case NDKKind.Text:
return <TextNote key={event.id} event={event} className="mt-3" />;
case NDKKind.Repost:
return <RepostNote key={event.id} event={event} className="mt-3" />;
default:
return <TextNote key={event.id} event={event} className="mt-3" />;
}
};
useEffect(() => {
if (storage.account.contacts.includes(id)) {
setFollowed(true);
}
}, []);
return (
<WVList className="pb-5 overflow-y-auto">
<div className="h-11 bg-neutral-50 dark:bg-neutral-950 border-b flex items-center px-3 border-neutral-100 dark:border-neutral-900 mb-3">
<button
type="button"
className="inline-flex items-center gap-2.5 text-sm font-medium"
onClick={() => navigate(-1)}
>
<ArrowLeftIcon className="size-4" />
Back
</button>
</div>
<div className="px-3">
<div className="flex flex-col gap-2">
<div className="flex items-center justify-between">
<img
src={user?.picture || user?.image}
alt={id}
className="h-12 w-12 shrink-0 rounded-lg object-cover"
loading="lazy"
decoding="async"
/>
<div className="inline-flex items-center gap-2">
{followed ? (
<button
type="button"
onClick={() => unfollow(id)}
className="inline-flex h-9 w-28 items-center justify-center rounded-lg bg-neutral-200 text-sm font-medium hover:bg-blue-500 hover:text-white dark:bg-neutral-800"
>
Unfollow
</button>
) : (
<button
type="button"
onClick={() => follow(id)}
className="inline-flex h-9 w-28 items-center justify-center rounded-lg bg-neutral-200 text-sm font-medium hover:bg-blue-500 hover:text-white dark:bg-neutral-800"
>
Follow
</button>
)}
<Link
to={`/chats/${id}`}
className="inline-flex h-9 w-28 items-center justify-center rounded-lg bg-neutral-200 text-sm font-medium hover:bg-blue-500 hover:text-white dark:bg-neutral-800"
>
Message
</Link>
</div>
</div>
<div className="flex flex-1 flex-col gap-1.5">
<div className="flex flex-col">
<h5 className="text-lg font-semibold">
{user?.name ||
user?.display_name ||
user?.displayName ||
"Anon"}
</h5>
{user?.nip05 ? (
<NIP05
pubkey={id}
nip05={user?.nip05}
className="max-w-[15rem] truncate text-sm text-neutral-600 dark:text-neutral-400"
/>
) : (
<span className="max-w-[15rem] truncate text-sm text-neutral-600 dark:text-neutral-400">
{displayNpub(id, 16)}
</span>
)}
</div>
<div className="max-w-[500px] select-text break-words text-neutral-900 dark:text-neutral-100">
{user?.about}
</div>
</div>
</div>
<div className="pt-2 mt-2 border-t border-neutral-100 dark:border-neutral-900">
<h3 className="text-lg font-semibold text-neutral-900 dark:text-neutral-100">
Latest posts
</h3>
<div className="flex h-full w-full flex-col justify-between gap-1.5 pb-10">
{isLoading ? (
<div className="flex items-center justify-center">
<LoaderIcon className="h-4 w-4 animate-spin" />
</div>
) : (
allEvents.map((item) => renderItem(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>
</div>
</div>
</div>
</WVList>
);
}

29
packages/lume-column-user/src/event.tsx
View File

@@ -1,29 +0,0 @@
import { ThreadNote } from "@lume/ark";
import { ArrowLeftIcon } from "@lume/icons";
import { ReplyList } from "@lume/ui";
import { useNavigate, useParams } from "react-router-dom";
import { WVList } from "virtua";
export function EventRoute() {
const { id } = useParams();
const navigate = useNavigate();
return (
<WVList className="pb-5 overflow-y-auto">
<div className="h-11 bg-neutral-50 dark:bg-neutral-950 border-b flex items-center px-3 border-neutral-100 dark:border-neutral-900 mb-3">
<button
type="button"
className="inline-flex items-center gap-2.5 text-sm font-medium"
onClick={() => navigate(-1)}
>
<ArrowLeftIcon className="size-4" />
Back
</button>
</div>
<div className="px-3">
<ThreadNote eventId={id} />
<ReplyList eventId={id} title="All replies" className="mt-5" />
</div>
</WVList>
);
}

186
packages/lume-column-user/src/home.tsx
View File

@@ -13,7 +13,7 @@ import { useInfiniteQuery } from "@tanstack/react-query";
import { useEffect, useMemo, useState } from "react";
import { Link } from "react-router-dom";
import { toast } from "sonner";
import { WVList } from "virtua";
import { WindowVirtualizer } from "virtua";
export function HomeRoute({ id }: { id: string }) {
const ark = useArk();
@@ -100,102 +100,104 @@ export function HomeRoute({ id }: { id: string }) {
}, []);
return (
<WVList className="py-5 overflow-y-auto">
<div className="px-3">
<div className="flex flex-col gap-2">
<div className="flex items-center justify-between">
<img
src={user?.picture || user?.image}
alt={id}
className="object-cover w-12 h-12 rounded-lg shrink-0"
loading="lazy"
decoding="async"
/>
<div className="inline-flex items-center gap-2">
{followed ? (
<button
type="button"
onClick={() => unfollow(id)}
<div className="py-5 overflow-y-auto">
<WindowVirtualizer>
<div className="px-3">
<div className="flex flex-col gap-2">
<div className="flex items-center justify-between">
<img
src={user?.picture || user?.image}
alt={id}
className="object-cover w-12 h-12 rounded-lg shrink-0"
loading="lazy"
decoding="async"
/>
<div className="inline-flex items-center gap-2">
{followed ? (
<button
type="button"
onClick={() => unfollow(id)}
className="inline-flex items-center justify-center text-sm font-medium rounded-lg h-9 w-28 bg-neutral-200 hover:bg-blue-500 hover:text-white dark:bg-neutral-800"
>
Unfollow
</button>
) : (
<button
type="button"
onClick={() => follow(id)}
className="inline-flex items-center justify-center text-sm font-medium rounded-lg h-9 w-28 bg-neutral-200 hover:bg-blue-500 hover:text-white dark:bg-neutral-800"
>
Follow
</button>
)}
<Link
to={`/chats/${id}`}
className="inline-flex items-center justify-center text-sm font-medium rounded-lg h-9 w-28 bg-neutral-200 hover:bg-blue-500 hover:text-white dark:bg-neutral-800"
>
Unfollow
</button>
) : (
<button
type="button"
onClick={() => follow(id)}
className="inline-flex items-center justify-center text-sm font-medium rounded-lg h-9 w-28 bg-neutral-200 hover:bg-blue-500 hover:text-white dark:bg-neutral-800"
>
Follow
</button>
)}
<Link
to={`/chats/${id}`}
className="inline-flex items-center justify-center text-sm font-medium rounded-lg h-9 w-28 bg-neutral-200 hover:bg-blue-500 hover:text-white dark:bg-neutral-800"
>
Message
</Link>
</div>
</div>
<div className="flex flex-1 flex-col gap-1.5">
<div className="flex flex-col">
<h5 className="text-lg font-semibold">
{user?.name ||
user?.display_name ||
user?.displayName ||
"Anon"}
</h5>
{user?.nip05 ? (
<NIP05
pubkey={id}
nip05={user?.nip05}
className="max-w-[15rem] truncate text-sm text-neutral-600 dark:text-neutral-400"
/>
) : (
<span className="max-w-[15rem] truncate text-sm text-neutral-600 dark:text-neutral-400">
{displayNpub(id, 16)}
</span>
)}
</div>
<div className="max-w-[500px] select-text break-words text-neutral-900 dark:text-neutral-100">
{user?.about}
</div>
</div>
</div>
<div className="pt-2 mt-2 border-t border-neutral-100 dark:border-neutral-900">
<h3 className="text-lg font-semibold text-neutral-900 dark:text-neutral-100">
Latest posts
</h3>
<div className="flex h-full w-full flex-col justify-between gap-1.5 pb-10">
{isLoading ? (
<div className="flex items-center justify-center">
<LoaderIcon className="w-4 h-4 animate-spin" />
Message
</Link>
</div>
</div>
<div className="flex flex-1 flex-col gap-1.5">
<div className="flex flex-col">
<h5 className="text-lg font-semibold">
{user?.name ||
user?.display_name ||
user?.displayName ||
"Anon"}
</h5>
{user?.nip05 ? (
<NIP05
pubkey={id}
nip05={user?.nip05}
className="max-w-[15rem] truncate text-sm text-neutral-600 dark:text-neutral-400"
/>
) : (
<span className="max-w-[15rem] truncate text-sm text-neutral-600 dark:text-neutral-400">
{displayNpub(id, 16)}
</span>
)}
</div>
<div className="max-w-[500px] select-text break-words text-neutral-900 dark:text-neutral-100">
{user?.about}
</div>
</div>
</div>
<div className="pt-2 mt-2 border-t border-neutral-100 dark:border-neutral-900">
<h3 className="text-lg font-semibold text-neutral-900 dark:text-neutral-100">
Latest posts
</h3>
<div className="flex h-full w-full flex-col justify-between gap-1.5 pb-10">
{isLoading ? (
<div className="flex items-center justify-center">
<LoaderIcon className="w-4 h-4 animate-spin" />
</div>
) : (
allEvents.map((item) => renderItem(item))
)}
<div className="flex items-center justify-center h-16 px-3 pb-3">
{hasNextPage ? (
<button
type="button"
onClick={() => fetchNextPage()}
disabled={!hasNextPage || isFetchingNextPage}
className="inline-flex items-center justify-center h-10 gap-2 px-6 font-medium text-white bg-blue-500 rounded-full w-max hover:bg-blue-600 focus:outline-none"
>
{isFetchingNextPage ? (
<LoaderIcon className="w-4 h-4 animate-spin" />
) : (
<>
<ArrowRightCircleIcon className="w-5 h-5" />
Load more
</>
)}
</button>
) : null}
</div>
) : (
allEvents.map((item) => renderItem(item))
)}
<div className="flex items-center justify-center h-16 px-3 pb-3">
{hasNextPage ? (
<button
type="button"
onClick={() => fetchNextPage()}
disabled={!hasNextPage || isFetchingNextPage}
className="inline-flex items-center justify-center h-10 gap-2 px-6 font-medium text-white bg-blue-500 rounded-full w-max hover:bg-blue-600 focus:outline-none"
>
{isFetchingNextPage ? (
<LoaderIcon className="w-4 h-4 animate-spin" />
) : (
<>
<ArrowRightCircleIcon className="w-5 h-5" />
Load more
</>
)}
</button>
) : null}
</div>
</div>
</div>
</div>
</WVList>
</WindowVirtualizer>
</div>
);
}

3
packages/lume-column-user/src/index.tsx
View File

@@ -1,9 +1,8 @@
import { Column } from "@lume/ark";
import { UserIcon } from "@lume/icons";
import { IColumn } from "@lume/types";
import { EventRoute } from "./event";
import { HomeRoute } from "./home";
import { UserRoute } from "./user";
import { EventRoute, UserRoute } from "@lume/ui";
export function User({ column }: { column: IColumn }) {
return (

213
packages/lume-column-user/src/user.tsx
View File

@@ -1,213 +0,0 @@
import {
RepostNote,
TextNote,
useArk,
useProfile,
useStorage,
} from "@lume/ark";
import { ArrowLeftIcon, ArrowRightCircleIcon, LoaderIcon } from "@lume/icons";
import { NIP05 } from "@lume/ui";
import { FETCH_LIMIT, displayNpub } from "@lume/utils";
import { NDKEvent, NDKKind } from "@nostr-dev-kit/ndk";
import { useInfiniteQuery } from "@tanstack/react-query";
import { useEffect, useMemo, useState } from "react";
import { Link, useNavigate, useParams } from "react-router-dom";
import { toast } from "sonner";
import { WVList } from "virtua";
export function UserRoute() {
const ark = useArk();
const storage = useStorage();
const navigate = useNavigate();
const { id } = useParams();
const { user } = useProfile(id);
const { data, hasNextPage, isLoading, isFetchingNextPage, fetchNextPage } =
useInfiniteQuery({
queryKey: ["user-posts", id],
initialPageParam: 0,
queryFn: async ({
signal,
pageParam,
}: {
signal: AbortSignal;
pageParam: number;
}) => {
const events = await ark.getInfiniteEvents({
filter: {
kinds: [NDKKind.Text, NDKKind.Repost],
authors: [id],
},
limit: FETCH_LIMIT,
pageParam,
signal,
});
return events;
},
getNextPageParam: (lastPage) => {
const lastEvent = lastPage.at(-1);
if (!lastEvent) return;
return lastEvent.created_at - 1;
},
refetchOnWindowFocus: false,
});
const [followed, setFollowed] = useState(false);
const allEvents = useMemo(
() => (data ? data.pages.flatMap((page) => page) : []),
[data],
);
const follow = async (pubkey: string) => {
try {
const add = await ark.createContact({ pubkey });
if (add) {
setFollowed(true);
} else {
toast.success("You already follow this user");
}
} catch (error) {
console.log(error);
}
};
const unfollow = async (pubkey: string) => {
try {
const remove = await ark.deleteContact({ pubkey });
if (remove) {
setFollowed(false);
}
} catch (error) {
console.log(error);
}
};
const renderItem = (event: NDKEvent) => {
switch (event.kind) {
case NDKKind.Text:
return <TextNote key={event.id} event={event} className="mt-3" />;
case NDKKind.Repost:
return <RepostNote key={event.id} event={event} className="mt-3" />;
default:
return <TextNote key={event.id} event={event} className="mt-3" />;
}
};
useEffect(() => {
if (storage.account.contacts.includes(id)) {
setFollowed(true);
}
}, []);
return (
<WVList className="pb-5 overflow-y-auto">
<div className="h-11 bg-neutral-50 dark:bg-neutral-950 border-b flex items-center px-3 border-neutral-100 dark:border-neutral-900 mb-3">
<button
type="button"
className="inline-flex items-center gap-2.5 text-sm font-medium"
onClick={() => navigate(-1)}
>
<ArrowLeftIcon className="size-4" />
Back
</button>
</div>
<div className="px-3">
<div className="flex flex-col gap-2">
<div className="flex items-center justify-between">
<img
src={user?.picture || user?.image}
alt={id}
className="h-12 w-12 shrink-0 rounded-lg object-cover"
loading="lazy"
decoding="async"
/>
<div className="inline-flex items-center gap-2">
{followed ? (
<button
type="button"
onClick={() => unfollow(id)}
className="inline-flex h-9 w-28 items-center justify-center rounded-lg bg-neutral-200 text-sm font-medium hover:bg-blue-500 hover:text-white dark:bg-neutral-800"
>
Unfollow
</button>
) : (
<button
type="button"
onClick={() => follow(id)}
className="inline-flex h-9 w-28 items-center justify-center rounded-lg bg-neutral-200 text-sm font-medium hover:bg-blue-500 hover:text-white dark:bg-neutral-800"
>
Follow
</button>
)}
<Link
to={`/chats/${id}`}
className="inline-flex h-9 w-28 items-center justify-center rounded-lg bg-neutral-200 text-sm font-medium hover:bg-blue-500 hover:text-white dark:bg-neutral-800"
>
Message
</Link>
</div>
</div>
<div className="flex flex-1 flex-col gap-1.5">
<div className="flex flex-col">
<h5 className="text-lg font-semibold">
{user?.name ||
user?.display_name ||
user?.displayName ||
"Anon"}
</h5>
{user?.nip05 ? (
<NIP05
pubkey={id}
nip05={user?.nip05}
className="max-w-[15rem] truncate text-sm text-neutral-600 dark:text-neutral-400"
/>
) : (
<span className="max-w-[15rem] truncate text-sm text-neutral-600 dark:text-neutral-400">
{displayNpub(id, 16)}
</span>
)}
</div>
<div className="max-w-[500px] select-text break-words text-neutral-900 dark:text-neutral-100">
{user?.about}
</div>
</div>
</div>
<div className="pt-2 mt-2 border-t border-neutral-100 dark:border-neutral-900">
<h3 className="text-lg font-semibold text-neutral-900 dark:text-neutral-100">
Latest posts
</h3>
<div className="flex h-full w-full flex-col justify-between gap-1.5 pb-10">
{isLoading ? (
<div className="flex items-center justify-center">
<LoaderIcon className="h-4 w-4 animate-spin" />
</div>
) : (
allEvents.map((item) => renderItem(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>
</div>
</div>
</div>
</WVList>
);
}

6
packages/storage/index.ts
View File

@@ -254,11 +254,9 @@ export class LumeStorage {
}
public async createAccount({
id,
pubkey,
privkey,
}: {
id: string;
pubkey: string;
privkey?: string;
}) {
@@ -274,8 +272,8 @@ export class LumeStorage {
);
} else {
await this.#db.execute(
"INSERT OR IGNORE INTO accounts (id, pubkey, is_active) VALUES ($1, $2, $3);",
[id, pubkey, 1],
"INSERT OR IGNORE INTO accounts (pubkey, is_active) VALUES ($1, $2);",
[pubkey, 1],
);
if (privkey) await this.#keyring_save(pubkey, privkey);

3
packages/ui/package.json
View File

@@ -28,7 +28,8 @@
"react-router-dom": "^6.21.1",
"slate": "^0.101.5",
"slate-react": "^0.101.5",
"sonner": "^1.3.1"
"sonner": "^1.3.1",
"virtua": "^0.20.0"
},
"devDependencies": {
"@lume/tailwindcss": "workspace:^",

2
packages/ui/src/index.ts
View File

@@ -11,3 +11,5 @@ export * from "./layouts/home";
export * from "./layouts/settings";
export * from "./mentions";
export * from "./replyList";
export * from "./routes/event";
export * from "./routes/user";

31
packages/ui/src/routes/event.tsx Normal file
View File

@@ -0,0 +1,31 @@
import { ThreadNote } from "@lume/ark";
import { ArrowLeftIcon } from "@lume/icons";
import { useNavigate, useParams } from "react-router-dom";
import { WindowVirtualizer } from "virtua";
import { ReplyList } from "../replyList";
export function EventRoute() {
const { id } = useParams();
const navigate = useNavigate();
return (
<div className="pb-5 overflow-y-auto">
<WindowVirtualizer>
<div className="h-11 bg-neutral-50 dark:bg-neutral-950 border-b flex items-center px-3 border-neutral-100 dark:border-neutral-900 mb-3">
<button
type="button"
className="inline-flex items-center gap-2.5 text-sm font-medium"
onClick={() => navigate(-1)}
>
<ArrowLeftIcon className="size-4" />
Back
</button>
</div>
<div className="px-3">
<ThreadNote eventId={id} />
<ReplyList eventId={id} title="All replies" className="mt-5" />
</div>
</WindowVirtualizer>
</div>
);
}

215
packages/ui/src/routes/user.tsx Normal file
View File

@@ -0,0 +1,215 @@
import {
RepostNote,
TextNote,
useArk,
useProfile,
useStorage,
} from "@lume/ark";
import { ArrowLeftIcon, ArrowRightCircleIcon, LoaderIcon } from "@lume/icons";
import { FETCH_LIMIT, displayNpub } from "@lume/utils";
import { NDKEvent, NDKKind } from "@nostr-dev-kit/ndk";
import { useInfiniteQuery } from "@tanstack/react-query";
import { useEffect, useMemo, useState } from "react";
import { Link, useNavigate, useParams } from "react-router-dom";
import { toast } from "sonner";
import { WindowVirtualizer } from "virtua";
import { NIP05 } from "../nip05";
export function UserRoute() {
const ark = useArk();
const storage = useStorage();
const navigate = useNavigate();
const { id } = useParams();
const { user } = useProfile(id);
const { data, hasNextPage, isLoading, isFetchingNextPage, fetchNextPage } =
useInfiniteQuery({
queryKey: ["user-posts", id],
initialPageParam: 0,
queryFn: async ({
signal,
pageParam,
}: {
signal: AbortSignal;
pageParam: number;
}) => {
const events = await ark.getInfiniteEvents({
filter: {
kinds: [NDKKind.Text, NDKKind.Repost],
authors: [id],
},
limit: FETCH_LIMIT,
pageParam,
signal,
});
return events;
},
getNextPageParam: (lastPage) => {
const lastEvent = lastPage.at(-1);
if (!lastEvent) return;
return lastEvent.created_at - 1;
},
refetchOnWindowFocus: false,
});
const [followed, setFollowed] = useState(false);
const allEvents = useMemo(
() => (data ? data.pages.flatMap((page) => page) : []),
[data],
);
const follow = async (pubkey: string) => {
try {
const add = await ark.createContact({ pubkey });
if (add) {
setFollowed(true);
} else {
toast.success("You already follow this user");
}
} catch (error) {
console.log(error);
}
};
const unfollow = async (pubkey: string) => {
try {
const remove = await ark.deleteContact({ pubkey });
if (remove) {
setFollowed(false);
}
} catch (error) {
console.log(error);
}
};
const renderItem = (event: NDKEvent) => {
switch (event.kind) {
case NDKKind.Text:
return <TextNote key={event.id} event={event} className="mt-3" />;
case NDKKind.Repost:
return <RepostNote key={event.id} event={event} className="mt-3" />;
default:
return <TextNote key={event.id} event={event} className="mt-3" />;
}
};
useEffect(() => {
if (storage.account.contacts.includes(id)) {
setFollowed(true);
}
}, []);
return (
<div className="pb-5 overflow-y-auto">
<WindowVirtualizer>
<div className="h-11 bg-neutral-50 dark:bg-neutral-950 border-b flex items-center px-3 border-neutral-100 dark:border-neutral-900 mb-3">
<button
type="button"
className="inline-flex items-center gap-2.5 text-sm font-medium"
onClick={() => navigate(-1)}
>
<ArrowLeftIcon className="size-4" />
Back
</button>
</div>
<div className="px-3">
<div className="flex flex-col gap-2">
<div className="flex items-center justify-between">
<img
src={user?.picture || user?.image}
alt={id}
className="h-12 w-12 shrink-0 rounded-lg object-cover"
loading="lazy"
decoding="async"
/>
<div className="inline-flex items-center gap-2">
{followed ? (
<button
type="button"
onClick={() => unfollow(id)}
className="inline-flex h-9 w-28 items-center justify-center rounded-lg bg-neutral-200 text-sm font-medium hover:bg-blue-500 hover:text-white dark:bg-neutral-800"
>
Unfollow
</button>
) : (
<button
type="button"
onClick={() => follow(id)}
className="inline-flex h-9 w-28 items-center justify-center rounded-lg bg-neutral-200 text-sm font-medium hover:bg-blue-500 hover:text-white dark:bg-neutral-800"
>
Follow
</button>
)}
<Link
to={`/chats/${id}`}
className="inline-flex h-9 w-28 items-center justify-center rounded-lg bg-neutral-200 text-sm font-medium hover:bg-blue-500 hover:text-white dark:bg-neutral-800"
>
Message
</Link>
</div>
</div>
<div className="flex flex-1 flex-col gap-1.5">
<div className="flex flex-col">
<h5 className="text-lg font-semibold">
{user?.name ||
user?.display_name ||
user?.displayName ||
"Anon"}
</h5>
{user?.nip05 ? (
<NIP05
pubkey={id}
nip05={user?.nip05}
className="max-w-[15rem] truncate text-sm text-neutral-600 dark:text-neutral-400"
/>
) : (
<span className="max-w-[15rem] truncate text-sm text-neutral-600 dark:text-neutral-400">
{displayNpub(id, 16)}
</span>
)}
</div>
<div className="max-w-[500px] select-text break-words text-neutral-900 dark:text-neutral-100">
{user?.about}
</div>
</div>
</div>
<div className="pt-2 mt-2 border-t border-neutral-100 dark:border-neutral-900">
<h3 className="text-lg font-semibold text-neutral-900 dark:text-neutral-100">
Latest posts
</h3>
<div className="flex h-full w-full flex-col justify-between gap-1.5 pb-10">
{isLoading ? (
<div className="flex items-center justify-center">
<LoaderIcon className="h-4 w-4 animate-spin" />
</div>
) : (
allEvents.map((item) => renderItem(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>
</div>
</div>
</div>
</WindowVirtualizer>
</div>
);
}