mirror of
https://github.com/luminous-devs/lume.git
synced 2024-09-30 00:41:00 +00:00
feat(columns): update timeline column
This commit is contained in:
parent
b4dac2d477
commit
ed538c91c6
@ -6,11 +6,13 @@
|
|||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@lume/ark": "workspace:^",
|
"@lume/ark": "workspace:^",
|
||||||
"@lume/icons": "workspace:^",
|
"@lume/icons": "workspace:^",
|
||||||
|
"@lume/ui": "workspace:^",
|
||||||
"@lume/utils": "workspace:^",
|
"@lume/utils": "workspace:^",
|
||||||
"@nostr-dev-kit/ndk": "^2.3.1",
|
"@nostr-dev-kit/ndk": "^2.3.1",
|
||||||
"@tanstack/react-query": "^5.14.2",
|
"@tanstack/react-query": "^5.14.2",
|
||||||
"react": "^18.2.0",
|
"react": "^18.2.0",
|
||||||
"react-router-dom": "^6.21.0",
|
"react-router-dom": "^6.21.0",
|
||||||
|
"sonner": "^1.2.4",
|
||||||
"virtua": "^0.18.0"
|
"virtua": "^0.18.0"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
|
@ -87,9 +87,8 @@ export function HomeRoute({ colKey }: { colKey: string }) {
|
|||||||
<div className="w-full h-full">
|
<div className="w-full h-full">
|
||||||
<VList ref={ref} cache={cache} overscan={2} className="flex-1 px-3">
|
<VList ref={ref} cache={cache} overscan={2} className="flex-1 px-3">
|
||||||
{isLoading ? (
|
{isLoading ? (
|
||||||
<div className="inline-flex h-16 items-center justify-center gap-2 px-3 py-1.5">
|
<div className="w-full flex h-16 items-center justify-center gap-2 px-3 py-1.5">
|
||||||
<LoaderIcon className="size-5" />
|
<LoaderIcon className="size-5 animate-spin" />
|
||||||
Loading
|
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
allEvents.map((item) => renderItem(item))
|
allEvents.map((item) => renderItem(item))
|
||||||
|
@ -1,7 +1,213 @@
|
|||||||
import { useParams } from "react-router-dom";
|
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() {
|
export function UserRoute() {
|
||||||
const { id } = useParams();
|
const ark = useArk();
|
||||||
|
const storage = useStorage();
|
||||||
|
const navigate = useNavigate();
|
||||||
|
|
||||||
return <div>{id}</div>;
|
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>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
@ -41,7 +41,7 @@ export function ColumnLiveWidget({
|
|||||||
className="inline-flex h-9 w-max items-center justify-center gap-1 rounded-full bg-blue-500 px-2.5 text-sm font-semibold text-white hover:bg-blue-600"
|
className="inline-flex h-9 w-max items-center justify-center gap-1 rounded-full bg-blue-500 px-2.5 text-sm font-semibold text-white hover:bg-blue-600"
|
||||||
>
|
>
|
||||||
<ChevronUpIcon className="h-4 w-4" />
|
<ChevronUpIcon className="h-4 w-4" />
|
||||||
{events.length} {events.length === 1 ? "event" : "events"}
|
{events.length} {events.length === 1 ? "new event" : "new events"}
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
@ -7,10 +7,10 @@ export function ChildReply({
|
|||||||
}: { event: NDKEvent; rootEventId?: string }) {
|
}: { event: NDKEvent; rootEventId?: string }) {
|
||||||
return (
|
return (
|
||||||
<Note.Provider event={event}>
|
<Note.Provider event={event}>
|
||||||
<Note.Root>
|
<Note.Root className="pl-4 gap-2 mb-5">
|
||||||
<Note.User />
|
<Note.User />
|
||||||
<Note.TextContent content={event.content} className="min-w-0" />
|
<Note.TextContent content={event.content} className="min-w-0" />
|
||||||
<div className="-ml-1 flex h-14 items-center gap-10">
|
<div className="-ml-1 flex items-center gap-10">
|
||||||
<Note.Reply rootEventId={rootEventId} />
|
<Note.Reply rootEventId={rootEventId} />
|
||||||
<Note.Reaction />
|
<Note.Reaction />
|
||||||
<Note.Repost />
|
<Note.Repost />
|
||||||
|
@ -39,23 +39,21 @@ export const MentionNote = memo(function MentionNote({
|
|||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Note.Root className="my-2 flex w-full cursor-default flex-col gap-1 rounded-lg bg-neutral-100 dark:bg-neutral-900">
|
<Note.Provider event={data}>
|
||||||
<div className="mt-3 px-3">
|
<Note.Root className="my-2 flex w-full cursor-default flex-col gap-1 rounded-lg bg-neutral-100 dark:bg-neutral-900">
|
||||||
<Note.User
|
<div className="mt-3 px-3">
|
||||||
pubkey={data.pubkey}
|
<Note.User variant="mention" />
|
||||||
time={data.created_at}
|
</div>
|
||||||
variant="mention"
|
<div className="mt-1 px-3 pb-3">
|
||||||
/>
|
{renderKind(data)}
|
||||||
</div>
|
<Link
|
||||||
<div className="mt-1 px-3 pb-3">
|
to={`/events/${data.id}`}
|
||||||
{renderKind(data)}
|
className="mt-2 text-blue-500 hover:text-blue-600"
|
||||||
<Link
|
>
|
||||||
to={`/events/${data.id}`}
|
Show more
|
||||||
className="mt-2 text-blue-500 hover:text-blue-600"
|
</Link>
|
||||||
>
|
</div>
|
||||||
Show more
|
</Note.Root>
|
||||||
</Link>
|
</Note.Provider>
|
||||||
</div>
|
|
||||||
</Note.Root>
|
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
@ -1,5 +1,7 @@
|
|||||||
import { WIDGET_KIND } from "@lume/utils";
|
import { WIDGET_KIND } from "@lume/utils";
|
||||||
|
import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
|
||||||
import { memo } from "react";
|
import { memo } from "react";
|
||||||
|
import { Link } from "react-router-dom";
|
||||||
import { useProfile } from "../../../hooks/useProfile";
|
import { useProfile } from "../../../hooks/useProfile";
|
||||||
import { useWidget } from "../../../hooks/useWidget";
|
import { useWidget } from "../../../hooks/useWidget";
|
||||||
|
|
||||||
@ -10,18 +12,35 @@ export const MentionUser = memo(function MentionUser({
|
|||||||
const { addWidget } = useWidget();
|
const { addWidget } = useWidget();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<button
|
<DropdownMenu.Root>
|
||||||
type="button"
|
<DropdownMenu.Trigger className="break-words text-blue-500 hover:text-blue-600">
|
||||||
onClick={() =>
|
{`@${user?.name || user?.displayName || user?.username || "anon"}`}
|
||||||
addWidget.mutate({
|
</DropdownMenu.Trigger>
|
||||||
kind: WIDGET_KIND.user,
|
<DropdownMenu.Content className="left-[50px] z-50 relative flex w-[200px] flex-col overflow-hidden rounded-xl border border-neutral-200 bg-neutral-950 focus:outline-none dark:border-neutral-900">
|
||||||
title: user?.name || user?.display_name || user?.displayName,
|
<DropdownMenu.Item asChild>
|
||||||
content: pubkey,
|
<Link
|
||||||
})
|
to={`/users/${pubkey}`}
|
||||||
}
|
className="inline-flex h-10 items-center px-4 text-sm text-white hover:bg-neutral-900 focus:outline-none"
|
||||||
className="break-words text-blue-500 hover:text-blue-600"
|
>
|
||||||
>
|
View profile
|
||||||
{`@${user?.name || user?.displayName || user?.username || "unknown"}`}
|
</Link>
|
||||||
</button>
|
</DropdownMenu.Item>
|
||||||
|
<DropdownMenu.Item asChild>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() =>
|
||||||
|
addWidget.mutate({
|
||||||
|
kind: WIDGET_KIND.user,
|
||||||
|
title: user?.name || user?.displayName || "",
|
||||||
|
content: pubkey,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
className="inline-flex h-10 items-center px-4 text-sm text-white hover:bg-neutral-900 focus:outline-none"
|
||||||
|
>
|
||||||
|
Pin
|
||||||
|
</button>
|
||||||
|
</DropdownMenu.Item>
|
||||||
|
</DropdownMenu.Content>
|
||||||
|
</DropdownMenu.Root>
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
@ -63,7 +63,7 @@ export function NoteUser({
|
|||||||
<Avatar.Image
|
<Avatar.Image
|
||||||
src={user?.picture || user?.image}
|
src={user?.picture || user?.image}
|
||||||
alt={event.pubkey}
|
alt={event.pubkey}
|
||||||
loading="lazy"
|
loading="eager"
|
||||||
decoding="async"
|
decoding="async"
|
||||||
className="h-6 w-6 rounded-md"
|
className="h-6 w-6 rounded-md"
|
||||||
/>
|
/>
|
||||||
@ -94,12 +94,12 @@ export function NoteUser({
|
|||||||
if (variant === "repost") {
|
if (variant === "repost") {
|
||||||
if (isLoading) {
|
if (isLoading) {
|
||||||
return (
|
return (
|
||||||
<div className={twMerge("flex gap-3", className)}>
|
<div className={twMerge("flex gap-2 px-3", className)}>
|
||||||
<div className="inline-flex w-10 items-center justify-center">
|
<div className="inline-flex shrink-0 w-10 items-center justify-center">
|
||||||
<RepostIcon className="h-5 w-5 text-blue-500" />
|
<RepostIcon className="h-5 w-5 text-blue-500" />
|
||||||
</div>
|
</div>
|
||||||
<div className="inline-flex items-center gap-2">
|
<div className="inline-flex items-center gap-2">
|
||||||
<div className="h-6 w-6 animate-pulse rounded bg-neutral-300 dark:bg-neutral-700" />
|
<div className="h-6 w-6 shrink-0 animate-pulse rounded bg-neutral-300 dark:bg-neutral-700" />
|
||||||
<div className="h-4 w-24 animate-pulse rounded bg-neutral-300 dark:bg-neutral-700" />
|
<div className="h-4 w-24 animate-pulse rounded bg-neutral-300 dark:bg-neutral-700" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -107,8 +107,8 @@ export function NoteUser({
|
|||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={twMerge("flex gap-2", className)}>
|
<div className={twMerge("flex gap-2 px-3", className)}>
|
||||||
<div className="inline-flex w-10 items-center justify-center">
|
<div className="inline-flex shrink-0 w-10 items-center justify-center">
|
||||||
<RepostIcon className="h-5 w-5 text-blue-500" />
|
<RepostIcon className="h-5 w-5 text-blue-500" />
|
||||||
</div>
|
</div>
|
||||||
<div className="inline-flex items-center gap-2">
|
<div className="inline-flex items-center gap-2">
|
||||||
@ -116,7 +116,7 @@ export function NoteUser({
|
|||||||
<Avatar.Image
|
<Avatar.Image
|
||||||
src={user?.picture || user?.image}
|
src={user?.picture || user?.image}
|
||||||
alt={event.pubkey}
|
alt={event.pubkey}
|
||||||
loading="lazy"
|
loading="eager"
|
||||||
decoding="async"
|
decoding="async"
|
||||||
className="h-6 w-6 rounded object-cover"
|
className="h-6 w-6 rounded object-cover"
|
||||||
/>
|
/>
|
||||||
@ -161,7 +161,7 @@ export function NoteUser({
|
|||||||
<Avatar.Image
|
<Avatar.Image
|
||||||
src={user?.picture || user?.image}
|
src={user?.picture || user?.image}
|
||||||
alt={event.pubkey}
|
alt={event.pubkey}
|
||||||
loading="lazy"
|
loading="eager"
|
||||||
decoding="async"
|
decoding="async"
|
||||||
className="h-10 w-10 rounded-lg object-cover ring-1 ring-neutral-200/50 dark:ring-neutral-800/50"
|
className="h-10 w-10 rounded-lg object-cover ring-1 ring-neutral-200/50 dark:ring-neutral-800/50"
|
||||||
/>
|
/>
|
||||||
@ -212,7 +212,7 @@ export function NoteUser({
|
|||||||
<Avatar.Image
|
<Avatar.Image
|
||||||
src={user?.picture || user?.image}
|
src={user?.picture || user?.image}
|
||||||
alt={event.pubkey}
|
alt={event.pubkey}
|
||||||
loading="lazy"
|
loading="eager"
|
||||||
decoding="async"
|
decoding="async"
|
||||||
className="h-9 w-9 rounded-lg bg-white object-cover ring-1 ring-neutral-200/50 dark:ring-neutral-800/50"
|
className="h-9 w-9 rounded-lg bg-white object-cover ring-1 ring-neutral-200/50 dark:ring-neutral-800/50"
|
||||||
/>
|
/>
|
||||||
|
@ -1,3 +1,4 @@
|
|||||||
|
import { nanoid } from "nanoid";
|
||||||
import { nip19 } from "nostr-tools";
|
import { nip19 } from "nostr-tools";
|
||||||
import { ReactNode } from "react";
|
import { ReactNode } from "react";
|
||||||
import { Link } from "react-router-dom";
|
import { Link } from "react-router-dom";
|
||||||
@ -172,7 +173,6 @@ export function useRichContent(content: string, textmode = false) {
|
|||||||
/(https?:\/\/\S+)/g,
|
/(https?:\/\/\S+)/g,
|
||||||
(match, i) => {
|
(match, i) => {
|
||||||
const url = new URL(match);
|
const url = new URL(match);
|
||||||
url.search = "";
|
|
||||||
|
|
||||||
if (!linkPreview && !textmode) {
|
if (!linkPreview && !textmode) {
|
||||||
linkPreview = match;
|
linkPreview = match;
|
||||||
@ -194,7 +194,7 @@ export function useRichContent(content: string, textmode = false) {
|
|||||||
);
|
);
|
||||||
|
|
||||||
parsedContent = reactStringReplace(parsedContent, "\n", () => {
|
parsedContent = reactStringReplace(parsedContent, "\n", () => {
|
||||||
return null;
|
return <div key={nanoid()} className="h-3" />;
|
||||||
});
|
});
|
||||||
|
|
||||||
if (typeof parsedContent[0] === "string") {
|
if (typeof parsedContent[0] === "string") {
|
||||||
|
@ -1,78 +0,0 @@
|
|||||||
import { MentionOptions } from "@tiptap/extension-mention";
|
|
||||||
import { ReactRenderer } from "@tiptap/react";
|
|
||||||
import tippy from "tippy.js";
|
|
||||||
import { MentionList } from "../components/mentions";
|
|
||||||
import { useStorage } from "../provider";
|
|
||||||
|
|
||||||
export function useSuggestion() {
|
|
||||||
const storage = useStorage();
|
|
||||||
|
|
||||||
const suggestion: MentionOptions["suggestion"] = {
|
|
||||||
items: async ({ query }) => {
|
|
||||||
const users = await storage.getAllCacheUsers();
|
|
||||||
return users
|
|
||||||
.filter((item) => {
|
|
||||||
if (item.name)
|
|
||||||
return item.name.toLowerCase().startsWith(query.toLowerCase());
|
|
||||||
return item.displayName.toLowerCase().startsWith(query.toLowerCase());
|
|
||||||
})
|
|
||||||
.slice(0, 5);
|
|
||||||
},
|
|
||||||
render: () => {
|
|
||||||
let component;
|
|
||||||
let popup;
|
|
||||||
|
|
||||||
return {
|
|
||||||
onStart: (props) => {
|
|
||||||
component = new ReactRenderer(MentionList, {
|
|
||||||
props,
|
|
||||||
editor: props.editor,
|
|
||||||
});
|
|
||||||
|
|
||||||
if (!props.clientRect) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
popup = tippy("body", {
|
|
||||||
getReferenceClientRect: props.clientRect,
|
|
||||||
appendTo: () => document.body,
|
|
||||||
content: component.element,
|
|
||||||
showOnCreate: true,
|
|
||||||
interactive: true,
|
|
||||||
trigger: "manual",
|
|
||||||
placement: "bottom-start",
|
|
||||||
});
|
|
||||||
},
|
|
||||||
|
|
||||||
onUpdate(props) {
|
|
||||||
component.updateProps(props);
|
|
||||||
|
|
||||||
if (!props.clientRect) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
popup[0].setProps({
|
|
||||||
getReferenceClientRect: props.clientRect,
|
|
||||||
});
|
|
||||||
},
|
|
||||||
|
|
||||||
onKeyDown(props) {
|
|
||||||
if (props.event.key === "Escape") {
|
|
||||||
popup[0].hide();
|
|
||||||
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
|
|
||||||
return component.ref?.onKeyDown(props);
|
|
||||||
},
|
|
||||||
|
|
||||||
onExit() {
|
|
||||||
popup[0].destroy();
|
|
||||||
component.destroy();
|
|
||||||
},
|
|
||||||
};
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
return { suggestion };
|
|
||||||
}
|
|
@ -6,5 +6,4 @@ export * from "./hooks/useWidget";
|
|||||||
export * from "./hooks/useRichContent";
|
export * from "./hooks/useRichContent";
|
||||||
export * from "./hooks/useEvent";
|
export * from "./hooks/useEvent";
|
||||||
export * from "./hooks/useProfile";
|
export * from "./hooks/useProfile";
|
||||||
export * from "./hooks/useSuggestion";
|
|
||||||
export * from "./hooks/useRelay";
|
export * from "./hooks/useRelay";
|
||||||
|
@ -10,3 +10,4 @@ export * from "./layouts/auth";
|
|||||||
export * from "./layouts/composer";
|
export * from "./layouts/composer";
|
||||||
export * from "./layouts/home";
|
export * from "./layouts/home";
|
||||||
export * from "./layouts/settings";
|
export * from "./layouts/settings";
|
||||||
|
export * from "./mentions";
|
||||||
|
@ -371,6 +371,9 @@ importers:
|
|||||||
'@lume/icons':
|
'@lume/icons':
|
||||||
specifier: workspace:^
|
specifier: workspace:^
|
||||||
version: link:../../icons
|
version: link:../../icons
|
||||||
|
'@lume/ui':
|
||||||
|
specifier: workspace:^
|
||||||
|
version: link:../../ui
|
||||||
'@lume/utils':
|
'@lume/utils':
|
||||||
specifier: workspace:^
|
specifier: workspace:^
|
||||||
version: link:../../utils
|
version: link:../../utils
|
||||||
@ -386,6 +389,9 @@ importers:
|
|||||||
react-router-dom:
|
react-router-dom:
|
||||||
specifier: ^6.21.0
|
specifier: ^6.21.0
|
||||||
version: 6.21.0(react-dom@18.2.0)(react@18.2.0)
|
version: 6.21.0(react-dom@18.2.0)(react@18.2.0)
|
||||||
|
sonner:
|
||||||
|
specifier: ^1.2.4
|
||||||
|
version: 1.2.4(react-dom@18.2.0)(react@18.2.0)
|
||||||
virtua:
|
virtua:
|
||||||
specifier: ^0.18.0
|
specifier: ^0.18.0
|
||||||
version: 0.18.0(react-dom@18.2.0)(react@18.2.0)
|
version: 0.18.0(react-dom@18.2.0)(react@18.2.0)
|
||||||
|
Loading…
Reference in New Issue
Block a user