wip: update
This commit is contained in:
@@ -3,6 +3,10 @@ export * from "./user";
|
||||
export * from "./note";
|
||||
export * from "./column";
|
||||
|
||||
// Note Primities
|
||||
export * from "./note/primitives/text";
|
||||
export * from "./note/primitives/repost";
|
||||
|
||||
// Deprecated
|
||||
export * from "./routes/event";
|
||||
export * from "./routes/user";
|
||||
|
||||
@@ -1,34 +1,30 @@
|
||||
import { ReplyIcon } from "@lume/icons";
|
||||
import * as Tooltip from "@radix-ui/react-tooltip";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { useNoteContext } from "../provider";
|
||||
|
||||
export function NoteReply() {
|
||||
const event = useNoteContext();
|
||||
const navigate = useNavigate();
|
||||
const event = useNoteContext();
|
||||
const { t } = useTranslation();
|
||||
|
||||
const { t } = useTranslation();
|
||||
|
||||
return (
|
||||
<Tooltip.Provider>
|
||||
<Tooltip.Root delayDuration={150}>
|
||||
<Tooltip.Trigger asChild>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => navigate(`/events/${event.id}`)}
|
||||
className="inline-flex items-center justify-center group h-7 w-7 text-neutral-600 dark:text-neutral-400"
|
||||
>
|
||||
<ReplyIcon className="size-5 group-hover:text-blue-500" />
|
||||
</button>
|
||||
</Tooltip.Trigger>
|
||||
<Tooltip.Portal>
|
||||
<Tooltip.Content className="inline-flex h-7 select-none text-neutral-50 dark:text-neutral-950 items-center justify-center rounded-md bg-neutral-950 dark:bg-neutral-50 px-3.5 text-sm will-change-[transform,opacity] data-[state=delayed-open]:data-[side=bottom]:animate-slideUpAndFade data-[state=delayed-open]:data-[side=left]:animate-slideRightAndFade data-[state=delayed-open]:data-[side=right]:animate-slideLeftAndFade data-[state=delayed-open]:data-[side=top]:animate-slideDownAndFade">
|
||||
{t("note.menu.viewThread")}
|
||||
<Tooltip.Arrow className="fill-neutral-950 dark:fill-neutral-50" />
|
||||
</Tooltip.Content>
|
||||
</Tooltip.Portal>
|
||||
</Tooltip.Root>
|
||||
</Tooltip.Provider>
|
||||
);
|
||||
return (
|
||||
<Tooltip.Provider>
|
||||
<Tooltip.Root delayDuration={150}>
|
||||
<Tooltip.Trigger asChild>
|
||||
<button
|
||||
type="button"
|
||||
className="group inline-flex h-7 w-7 items-center justify-center text-neutral-600 dark:text-neutral-400"
|
||||
>
|
||||
<ReplyIcon className="size-5 group-hover:text-blue-500" />
|
||||
</button>
|
||||
</Tooltip.Trigger>
|
||||
<Tooltip.Portal>
|
||||
<Tooltip.Content className="data-[state=delayed-open]:data-[side=bottom]:animate-slideUpAndFade data-[state=delayed-open]:data-[side=left]:animate-slideRightAndFade data-[state=delayed-open]:data-[side=right]:animate-slideLeftAndFade data-[state=delayed-open]:data-[side=top]:animate-slideDownAndFade inline-flex h-7 select-none items-center justify-center rounded-md bg-neutral-950 px-3.5 text-sm text-neutral-50 will-change-[transform,opacity] dark:bg-neutral-50 dark:text-neutral-950">
|
||||
{t("note.menu.viewThread")}
|
||||
<Tooltip.Arrow className="fill-neutral-950 dark:fill-neutral-50" />
|
||||
</Tooltip.Content>
|
||||
</Tooltip.Portal>
|
||||
</Tooltip.Root>
|
||||
</Tooltip.Provider>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -2,7 +2,6 @@ import { NOSTR_MENTIONS } from "@lume/utils";
|
||||
import { nanoid } from "nanoid";
|
||||
import { ReactNode, useMemo } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { Link } from "react-router-dom";
|
||||
import reactStringReplace from "react-string-replace";
|
||||
import { User } from "../user";
|
||||
import { Hashtag } from "./mentions/hashtag";
|
||||
@@ -61,15 +60,15 @@ export function NoteChild({
|
||||
(match, i) => {
|
||||
const url = new URL(match);
|
||||
return (
|
||||
<Link
|
||||
<a
|
||||
key={match + i}
|
||||
to={url.toString()}
|
||||
href={url.toString()}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="break-p font-normal text-blue-500 hover:text-blue-600"
|
||||
>
|
||||
{url.toString()}
|
||||
</Link>
|
||||
</a>
|
||||
);
|
||||
},
|
||||
);
|
||||
|
||||
@@ -1,20 +1,19 @@
|
||||
import { useStorage } from "@lume/storage";
|
||||
import { Kind } from "@lume/types";
|
||||
import {
|
||||
AUDIOS,
|
||||
IMAGES,
|
||||
NOSTR_EVENTS,
|
||||
NOSTR_MENTIONS,
|
||||
VIDEOS,
|
||||
canPreview,
|
||||
cn,
|
||||
regionNames,
|
||||
AUDIOS,
|
||||
IMAGES,
|
||||
NOSTR_EVENTS,
|
||||
NOSTR_MENTIONS,
|
||||
VIDEOS,
|
||||
canPreview,
|
||||
cn,
|
||||
regionNames,
|
||||
} from "@lume/utils";
|
||||
import { fetch } from "@tauri-apps/plugin-http";
|
||||
import getUrls from "get-urls";
|
||||
import { nanoid } from "nanoid";
|
||||
import { ReactNode, useMemo, useState } from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
import reactStringReplace from "react-string-replace";
|
||||
import { toast } from "sonner";
|
||||
import { stripHtml } from "string-strip-html";
|
||||
@@ -27,230 +26,226 @@ import { LinkPreview } from "./preview/link";
|
||||
import { VideoPreview } from "./preview/video";
|
||||
import { useNoteContext } from "./provider";
|
||||
|
||||
export function NoteContent({
|
||||
className,
|
||||
}: {
|
||||
className?: string;
|
||||
}) {
|
||||
const storage = useStorage();
|
||||
const event = useNoteContext();
|
||||
export function NoteContent({ className }: { className?: string }) {
|
||||
const storage = useStorage();
|
||||
const event = useNoteContext();
|
||||
|
||||
const [content, setContent] = useState(event.content);
|
||||
const [translate, setTranslate] = useState({
|
||||
translatable: false,
|
||||
translated: false,
|
||||
});
|
||||
const [content, setContent] = useState(event.content);
|
||||
const [translate, setTranslate] = useState({
|
||||
translatable: false,
|
||||
translated: false,
|
||||
});
|
||||
|
||||
const richContent = useMemo(() => {
|
||||
if (event.kind !== Kind.Text) return content;
|
||||
const richContent = useMemo(() => {
|
||||
if (event.kind !== Kind.Text) return content;
|
||||
|
||||
let parsedContent: string | ReactNode[] = stripHtml(
|
||||
content.replace(/\n{2,}\s*/g, "\n"),
|
||||
).result;
|
||||
let linkPreview: string = undefined;
|
||||
let images: string[] = [];
|
||||
let videos: string[] = [];
|
||||
let audios: string[] = [];
|
||||
let events: string[] = [];
|
||||
let parsedContent: string | ReactNode[] = stripHtml(
|
||||
content.replace(/\n{2,}\s*/g, "\n"),
|
||||
).result;
|
||||
let linkPreview: string = undefined;
|
||||
let images: string[] = [];
|
||||
let videos: string[] = [];
|
||||
let audios: string[] = [];
|
||||
let events: string[] = [];
|
||||
|
||||
const text = parsedContent;
|
||||
const words = text.split(/( |\n)/);
|
||||
const urls = [...getUrls(text)];
|
||||
const text = parsedContent;
|
||||
const words = text.split(/( |\n)/);
|
||||
const urls = [...getUrls(text)];
|
||||
|
||||
if (storage.settings.media && !storage.settings.lowPower) {
|
||||
images = urls.filter((word) =>
|
||||
IMAGES.some((el) => {
|
||||
const url = new URL(word);
|
||||
const extension = url.pathname.split(".")[1];
|
||||
if (extension === el) return true;
|
||||
return false;
|
||||
}),
|
||||
);
|
||||
videos = urls.filter((word) =>
|
||||
VIDEOS.some((el) => {
|
||||
const url = new URL(word);
|
||||
const extension = url.pathname.split(".")[1];
|
||||
if (extension === el) return true;
|
||||
return false;
|
||||
}),
|
||||
);
|
||||
audios = urls.filter((word) =>
|
||||
AUDIOS.some((el) => {
|
||||
const url = new URL(word);
|
||||
const extension = url.pathname.split(".")[1];
|
||||
if (extension === el) return true;
|
||||
return false;
|
||||
}),
|
||||
);
|
||||
}
|
||||
if (storage.settings.media && !storage.settings.lowPower) {
|
||||
images = urls.filter((word) =>
|
||||
IMAGES.some((el) => {
|
||||
const url = new URL(word);
|
||||
const extension = url.pathname.split(".")[1];
|
||||
if (extension === el) return true;
|
||||
return false;
|
||||
}),
|
||||
);
|
||||
videos = urls.filter((word) =>
|
||||
VIDEOS.some((el) => {
|
||||
const url = new URL(word);
|
||||
const extension = url.pathname.split(".")[1];
|
||||
if (extension === el) return true;
|
||||
return false;
|
||||
}),
|
||||
);
|
||||
audios = urls.filter((word) =>
|
||||
AUDIOS.some((el) => {
|
||||
const url = new URL(word);
|
||||
const extension = url.pathname.split(".")[1];
|
||||
if (extension === el) return true;
|
||||
return false;
|
||||
}),
|
||||
);
|
||||
}
|
||||
|
||||
events = words.filter((word) =>
|
||||
NOSTR_EVENTS.some((el) => word.startsWith(el)),
|
||||
);
|
||||
events = words.filter((word) =>
|
||||
NOSTR_EVENTS.some((el) => word.startsWith(el)),
|
||||
);
|
||||
|
||||
const hashtags = words.filter((word) => word.startsWith("#"));
|
||||
const mentions = words.filter((word) =>
|
||||
NOSTR_MENTIONS.some((el) => word.startsWith(el)),
|
||||
);
|
||||
const hashtags = words.filter((word) => word.startsWith("#"));
|
||||
const mentions = words.filter((word) =>
|
||||
NOSTR_MENTIONS.some((el) => word.startsWith(el)),
|
||||
);
|
||||
|
||||
try {
|
||||
if (images.length) {
|
||||
for (const image of images) {
|
||||
parsedContent = reactStringReplace(
|
||||
parsedContent,
|
||||
image,
|
||||
(match, i) => <ImagePreview key={match + i} url={match} />,
|
||||
);
|
||||
}
|
||||
}
|
||||
try {
|
||||
if (images.length) {
|
||||
for (const image of images) {
|
||||
parsedContent = reactStringReplace(
|
||||
parsedContent,
|
||||
image,
|
||||
(match, i) => <ImagePreview key={match + i} url={match} />,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
if (videos.length) {
|
||||
for (const video of videos) {
|
||||
parsedContent = reactStringReplace(
|
||||
parsedContent,
|
||||
video,
|
||||
(match, i) => <VideoPreview key={match + i} url={match} />,
|
||||
);
|
||||
}
|
||||
}
|
||||
if (videos.length) {
|
||||
for (const video of videos) {
|
||||
parsedContent = reactStringReplace(
|
||||
parsedContent,
|
||||
video,
|
||||
(match, i) => <VideoPreview key={match + i} url={match} />,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
if (audios.length) {
|
||||
for (const audio of audios) {
|
||||
parsedContent = reactStringReplace(
|
||||
parsedContent,
|
||||
audio,
|
||||
(match, i) => <VideoPreview key={match + i} url={match} />,
|
||||
);
|
||||
}
|
||||
}
|
||||
if (audios.length) {
|
||||
for (const audio of audios) {
|
||||
parsedContent = reactStringReplace(
|
||||
parsedContent,
|
||||
audio,
|
||||
(match, i) => <VideoPreview key={match + i} url={match} />,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
if (hashtags.length) {
|
||||
for (const hashtag of hashtags) {
|
||||
const regex = new RegExp(`(|^)${hashtag}\\b`, "g");
|
||||
parsedContent = reactStringReplace(parsedContent, regex, () => {
|
||||
if (storage.settings.hashtag)
|
||||
return <Hashtag key={nanoid()} tag={hashtag} />;
|
||||
return null;
|
||||
});
|
||||
}
|
||||
}
|
||||
if (hashtags.length) {
|
||||
for (const hashtag of hashtags) {
|
||||
const regex = new RegExp(`(|^)${hashtag}\\b`, "g");
|
||||
parsedContent = reactStringReplace(parsedContent, regex, () => {
|
||||
if (storage.settings.hashtag)
|
||||
return <Hashtag key={nanoid()} tag={hashtag} />;
|
||||
return null;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
if (events.length) {
|
||||
for (const event of events) {
|
||||
parsedContent = reactStringReplace(
|
||||
parsedContent,
|
||||
event,
|
||||
(match, i) => <MentionNote key={match + i} eventId={event} />,
|
||||
);
|
||||
}
|
||||
}
|
||||
if (events.length) {
|
||||
for (const event of events) {
|
||||
parsedContent = reactStringReplace(
|
||||
parsedContent,
|
||||
event,
|
||||
(match, i) => <MentionNote key={match + i} eventId={event} />,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
if (mentions.length) {
|
||||
for (const mention of mentions) {
|
||||
parsedContent = reactStringReplace(
|
||||
parsedContent,
|
||||
mention,
|
||||
(match, i) => <MentionUser key={match + i} pubkey={mention} />,
|
||||
);
|
||||
}
|
||||
}
|
||||
if (mentions.length) {
|
||||
for (const mention of mentions) {
|
||||
parsedContent = reactStringReplace(
|
||||
parsedContent,
|
||||
mention,
|
||||
(match, i) => <MentionUser key={match + i} pubkey={mention} />,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
parsedContent = reactStringReplace(
|
||||
parsedContent,
|
||||
/(https?:\/\/\S+)/g,
|
||||
(match, i) => {
|
||||
const url = new URL(match);
|
||||
parsedContent = reactStringReplace(
|
||||
parsedContent,
|
||||
/(https?:\/\/\S+)/g,
|
||||
(match, i) => {
|
||||
const url = new URL(match);
|
||||
|
||||
if (!linkPreview && canPreview(match)) {
|
||||
linkPreview = match;
|
||||
return <LinkPreview key={match + i} url={url.toString()} />;
|
||||
}
|
||||
if (!linkPreview && canPreview(match)) {
|
||||
linkPreview = match;
|
||||
return <LinkPreview key={match + i} url={url.toString()} />;
|
||||
}
|
||||
|
||||
return (
|
||||
<Link
|
||||
key={match + i}
|
||||
to={url.toString()}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="break-p truncate inline-block w-full font-normal text-blue-500 hover:text-blue-600"
|
||||
>
|
||||
{url.toString()}
|
||||
</Link>
|
||||
);
|
||||
},
|
||||
);
|
||||
return (
|
||||
<a
|
||||
key={match + i}
|
||||
href={url.toString()}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="break-p inline-block w-full truncate font-normal text-blue-500 hover:text-blue-600"
|
||||
>
|
||||
{url.toString()}
|
||||
</a>
|
||||
);
|
||||
},
|
||||
);
|
||||
|
||||
parsedContent = reactStringReplace(parsedContent, "\n", () => {
|
||||
return <div key={nanoid()} className="h-3" />;
|
||||
});
|
||||
parsedContent = reactStringReplace(parsedContent, "\n", () => {
|
||||
return <div key={nanoid()} className="h-3" />;
|
||||
});
|
||||
|
||||
if (typeof parsedContent[0] === "string") {
|
||||
parsedContent[0] = parsedContent[0].trimStart();
|
||||
}
|
||||
if (typeof parsedContent[0] === "string") {
|
||||
parsedContent[0] = parsedContent[0].trimStart();
|
||||
}
|
||||
|
||||
return parsedContent;
|
||||
} catch (e) {
|
||||
console.warn(event.id, `[parser] parse failed: ${e}`);
|
||||
return parsedContent;
|
||||
}
|
||||
}, [content]);
|
||||
return parsedContent;
|
||||
} catch (e) {
|
||||
console.warn(event.id, `[parser] parse failed: ${e}`);
|
||||
return parsedContent;
|
||||
}
|
||||
}, [content]);
|
||||
|
||||
const translateContent = async () => {
|
||||
try {
|
||||
if (!translate.translatable) return;
|
||||
const translateContent = async () => {
|
||||
try {
|
||||
if (!translate.translatable) return;
|
||||
|
||||
const res = await fetch("https://translate.nostr.wine/translate", {
|
||||
method: "POST",
|
||||
body: JSON.stringify({
|
||||
q: event.content,
|
||||
target: storage.locale.slice(0, 2),
|
||||
api_key: storage.settings.translateApiKey,
|
||||
}),
|
||||
headers: { "Content-Type": "application/json" },
|
||||
});
|
||||
const res = await fetch("https://translate.nostr.wine/translate", {
|
||||
method: "POST",
|
||||
body: JSON.stringify({
|
||||
q: event.content,
|
||||
target: storage.locale.slice(0, 2),
|
||||
api_key: storage.settings.translateApiKey,
|
||||
}),
|
||||
headers: { "Content-Type": "application/json" },
|
||||
});
|
||||
|
||||
if (!res.ok)
|
||||
toast.error(
|
||||
"Cannot connect to translate service, please try again later.",
|
||||
);
|
||||
if (!res.ok)
|
||||
toast.error(
|
||||
"Cannot connect to translate service, please try again later.",
|
||||
);
|
||||
|
||||
const data = await res.json();
|
||||
const data = await res.json();
|
||||
|
||||
setContent(data.translatedText);
|
||||
setTranslate((state) => ({ ...state, translated: true }));
|
||||
} catch (e) {
|
||||
console.error("translate api: ", String(e));
|
||||
}
|
||||
};
|
||||
setContent(data.translatedText);
|
||||
setTranslate((state) => ({ ...state, translated: true }));
|
||||
} catch (e) {
|
||||
console.error("translate api: ", String(e));
|
||||
}
|
||||
};
|
||||
|
||||
if (event.kind !== Kind.Text) {
|
||||
return <NIP89 className={className} />;
|
||||
}
|
||||
if (event.kind !== Kind.Text) {
|
||||
return <NIP89 className={className} />;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={cn(className)}>
|
||||
<div className="break-p select-text text-balance leading-normal whitespace-pre-line">
|
||||
{richContent}
|
||||
</div>
|
||||
{storage.settings.translation && translate.translatable ? (
|
||||
translate.translated ? (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setContent(event.content)}
|
||||
className="mt-3 text-sm text-blue-500 hover:text-blue-600 border-none shadow-none focus:outline-none"
|
||||
>
|
||||
Show original content
|
||||
</button>
|
||||
) : (
|
||||
<button
|
||||
type="button"
|
||||
onClick={translateContent}
|
||||
className="mt-3 text-sm text-blue-500 hover:text-blue-600 border-none shadow-none focus:outline-none"
|
||||
>
|
||||
Translate to {regionNames.of(storage.locale)}
|
||||
</button>
|
||||
)
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
return (
|
||||
<div className={cn(className)}>
|
||||
<div className="break-p select-text whitespace-pre-line text-balance leading-normal">
|
||||
{richContent}
|
||||
</div>
|
||||
{storage.settings.translation && translate.translatable ? (
|
||||
translate.translated ? (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setContent(event.content)}
|
||||
className="mt-3 border-none text-sm text-blue-500 shadow-none hover:text-blue-600 focus:outline-none"
|
||||
>
|
||||
Show original content
|
||||
</button>
|
||||
) : (
|
||||
<button
|
||||
type="button"
|
||||
onClick={translateContent}
|
||||
className="mt-3 border-none text-sm text-blue-500 shadow-none hover:text-blue-600 focus:outline-none"
|
||||
>
|
||||
Translate to {regionNames.of(storage.locale)}
|
||||
</button>
|
||||
)
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -2,7 +2,6 @@ import { PinIcon } from "@lume/icons";
|
||||
import { NOSTR_MENTIONS } from "@lume/utils";
|
||||
import { ReactNode, useMemo } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { Link } from "react-router-dom";
|
||||
import reactStringReplace from "react-string-replace";
|
||||
import { User } from "../../user";
|
||||
import { Hashtag } from "./hashtag";
|
||||
@@ -64,15 +63,15 @@ export function MentionNote({
|
||||
(match, i) => {
|
||||
const url = new URL(match);
|
||||
return (
|
||||
<Link
|
||||
<a
|
||||
key={match + i}
|
||||
to={url.toString()}
|
||||
href={url.toString()}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="break-p inline-block w-full truncate font-normal text-blue-500 hover:text-blue-600"
|
||||
>
|
||||
{url.toString()}
|
||||
</Link>
|
||||
</a>
|
||||
);
|
||||
},
|
||||
);
|
||||
@@ -126,12 +125,12 @@ export function MentionNote({
|
||||
</div>
|
||||
{openable ? (
|
||||
<div className="flex h-10 items-center justify-between px-3">
|
||||
<Link
|
||||
to={`/events/${data.id}`}
|
||||
<a
|
||||
href={`/events/${data.id}`}
|
||||
className="text-sm text-blue-500 hover:text-blue-600"
|
||||
>
|
||||
{t("note.showMore")}
|
||||
</Link>
|
||||
</a>
|
||||
<button
|
||||
type="button"
|
||||
className="inline-flex size-6 items-center justify-center rounded-md bg-neutral-200 text-neutral-600 hover:bg-neutral-300 dark:bg-neutral-800 dark:text-neutral-400 dark:hover:bg-neutral-700"
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
import { useProfile } from "@lume/ark";
|
||||
import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { Link } from "react-router-dom";
|
||||
|
||||
export function MentionUser({ pubkey }: { pubkey: string }) {
|
||||
const { isLoading, isError, user } = useProfile(pubkey);
|
||||
@@ -18,12 +17,12 @@ export function MentionUser({ pubkey }: { pubkey: string }) {
|
||||
</DropdownMenu.Trigger>
|
||||
<DropdownMenu.Content className="flex w-[200px] flex-col overflow-hidden rounded-2xl bg-white/50 p-2 ring-1 ring-black/10 backdrop-blur-2xl focus:outline-none dark:bg-black/50 dark:ring-white/10">
|
||||
<DropdownMenu.Item asChild>
|
||||
<Link
|
||||
to={`/users/${pubkey}`}
|
||||
<a
|
||||
href={`/users/${pubkey}`}
|
||||
className="inline-flex h-9 items-center gap-3 rounded-lg px-3 text-sm font-medium text-black/70 hover:bg-black/10 hover:text-black focus:outline-none dark:text-white/70 dark:hover:bg-white/10 dark:hover:text-white"
|
||||
>
|
||||
{t("note.buttons.viewProfile")}
|
||||
</Link>
|
||||
</a>
|
||||
</DropdownMenu.Item>
|
||||
<DropdownMenu.Item asChild>
|
||||
<button
|
||||
|
||||
@@ -2,14 +2,12 @@ import { HorizontalDotsIcon } from "@lume/icons";
|
||||
import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
|
||||
import { writeText } from "@tauri-apps/plugin-clipboard-manager";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { Link, useNavigate } from "react-router-dom";
|
||||
import { useNoteContext } from "./provider";
|
||||
import { useArk } from "@lume/ark";
|
||||
|
||||
export function NoteMenu() {
|
||||
const ark = useArk();
|
||||
const event = useNoteContext();
|
||||
const navigate = useNavigate();
|
||||
|
||||
const { t } = useTranslation();
|
||||
|
||||
@@ -55,7 +53,6 @@ export function NoteMenu() {
|
||||
<DropdownMenu.Item asChild>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => navigate(`/events/${event.id}`)}
|
||||
className="inline-flex h-9 items-center gap-3 rounded-lg px-3 text-sm font-medium text-black/70 hover:bg-black/10 hover:text-black focus:outline-none dark:text-white/70 dark:hover:bg-white/10 dark:hover:text-white"
|
||||
>
|
||||
{t("note.menu.copyLink")}
|
||||
@@ -80,12 +77,12 @@ export function NoteMenu() {
|
||||
</button>
|
||||
</DropdownMenu.Item>
|
||||
<DropdownMenu.Item asChild>
|
||||
<Link
|
||||
to={`/users/${event.pubkey}`}
|
||||
<a
|
||||
href={`/users/${event.pubkey}`}
|
||||
className="inline-flex h-9 items-center gap-3 rounded-lg px-3 text-sm font-medium text-black/70 hover:bg-black/10 hover:text-black focus:outline-none dark:text-white/70 dark:hover:bg-white/10 dark:hover:text-white"
|
||||
>
|
||||
{t("note.menu.viewAuthor")}
|
||||
</Link>
|
||||
</a>
|
||||
</DropdownMenu.Item>
|
||||
<DropdownMenu.Item asChild>
|
||||
<button
|
||||
|
||||
@@ -3,32 +3,35 @@ import { cn } from "@lume/utils";
|
||||
import { Note } from "..";
|
||||
|
||||
export function TextNote({
|
||||
event,
|
||||
className,
|
||||
}: { event: Event; className?: string }) {
|
||||
return (
|
||||
<Note.Provider event={event}>
|
||||
<Note.Root
|
||||
className={cn(
|
||||
"flex flex-col rounded-xl bg-neutral-50 dark:bg-neutral-950",
|
||||
className,
|
||||
)}
|
||||
>
|
||||
<div className="flex items-center justify-between px-3 h-14">
|
||||
<Note.User className="flex-1 pr-2" />
|
||||
<Note.Menu />
|
||||
</div>
|
||||
<Note.Thread className="mb-2" />
|
||||
<Note.Content className="min-w-0 px-3" />
|
||||
<div className="flex items-center justify-between px-3 h-14">
|
||||
<Note.Pin />
|
||||
<div className="inline-flex items-center gap-4">
|
||||
<Note.Reply />
|
||||
<Note.Repost />
|
||||
<Note.Zap />
|
||||
</div>
|
||||
</div>
|
||||
</Note.Root>
|
||||
</Note.Provider>
|
||||
);
|
||||
event,
|
||||
className,
|
||||
}: {
|
||||
event: Event;
|
||||
className?: string;
|
||||
}) {
|
||||
return (
|
||||
<Note.Provider event={event}>
|
||||
<Note.Root className={cn("flex flex-col", className)}>
|
||||
<div className="flex h-14 items-center justify-between px-3">
|
||||
<Note.User className="flex-1 pr-2" />
|
||||
<Note.Menu />
|
||||
</div>
|
||||
<div className="flex gap-3">
|
||||
<div className="size-10 shrink-0" />
|
||||
<div className="flex-1">
|
||||
<Note.Thread className="mb-2" />
|
||||
<Note.Content className="min-w-0 px-3" />
|
||||
<div className="flex h-14 items-center justify-between px-3">
|
||||
<Note.Pin />
|
||||
<div className="inline-flex items-center gap-4">
|
||||
<Note.Reply />
|
||||
<Note.Repost />
|
||||
<Note.Zap />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Note.Root>
|
||||
</Note.Provider>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
import { PinIcon } from "@lume/icons";
|
||||
import { cn } from "@lume/utils";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { Link } from "react-router-dom";
|
||||
import { Note } from ".";
|
||||
import { useNoteContext } from "./provider";
|
||||
import { useArk } from "@lume/ark";
|
||||
@@ -28,12 +27,12 @@ export function NoteThread({ className }: { className?: string }) {
|
||||
<Note.Child eventId={thread.replyEventId} />
|
||||
) : null}
|
||||
<div className="inline-flex items-center justify-between">
|
||||
<Link
|
||||
to={`/events/${thread?.rootEventId || thread?.replyEventId}`}
|
||||
<a
|
||||
href={`/events/${thread?.rootEventId || thread?.replyEventId}`}
|
||||
className="self-start text-blue-500 hover:text-blue-600"
|
||||
>
|
||||
{t("note.showThread")}
|
||||
</Link>
|
||||
</a>
|
||||
<button
|
||||
type="button"
|
||||
className="inline-flex size-6 items-center justify-center rounded-md bg-neutral-200 text-neutral-600 hover:bg-neutral-300 dark:bg-neutral-800 dark:text-neutral-400 dark:hover:bg-neutral-700"
|
||||
|
||||
@@ -9,17 +9,22 @@ export function NoteUser({ className }: { className?: string }) {
|
||||
return (
|
||||
<User.Provider pubkey={event.pubkey}>
|
||||
<HoverCard.Root>
|
||||
<User.Root className={cn("flex items-center gap-3", className)}>
|
||||
<HoverCard.Trigger>
|
||||
<User.Avatar className="size-9 shrink-0 rounded-lg object-cover ring-1 ring-neutral-200/50 dark:ring-neutral-800/50" />
|
||||
</HoverCard.Trigger>
|
||||
<div className="flex h-6 flex-1 items-start justify-between gap-2">
|
||||
<User.Name className="font-semibold text-neutral-950 dark:text-neutral-50" />
|
||||
<User.Time
|
||||
time={event.created_at}
|
||||
className="text-neutral-500 dark:text-neutral-400"
|
||||
/>
|
||||
<User.Root
|
||||
className={cn("flex items-center justify-between", className)}
|
||||
>
|
||||
<div className="flex gap-3">
|
||||
<HoverCard.Trigger>
|
||||
<User.Avatar className="size-11 shrink-0 rounded-xl object-cover ring-1 ring-neutral-200/50 dark:ring-neutral-800/50" />
|
||||
</HoverCard.Trigger>
|
||||
<div>
|
||||
<User.Name className="font-semibold text-neutral-950 dark:text-neutral-50" />
|
||||
<User.NIP05 className="text-neutral-600 dark:text-neutral-400" />
|
||||
</div>
|
||||
</div>
|
||||
<User.Time
|
||||
time={event.created_at}
|
||||
className="text-neutral-500 dark:text-neutral-400"
|
||||
/>
|
||||
</User.Root>
|
||||
<HoverCard.Portal>
|
||||
<HoverCard.Content
|
||||
|
||||
@@ -2,43 +2,46 @@ import { VerifiedIcon } from "@lume/icons";
|
||||
import { cn, displayNpub } from "@lume/utils";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { useUserContext } from "./provider";
|
||||
import { useArk } from "@lume/ark";
|
||||
|
||||
export function UserNip05({ className }: { className?: string }) {
|
||||
const user = useUserContext();
|
||||
const ark = useArk();
|
||||
const user = useUserContext();
|
||||
|
||||
const { isLoading, data: verified } = useQuery({
|
||||
queryKey: ["nip05", user?.profile.nip05],
|
||||
queryFn: async () => {
|
||||
if (!user) return false;
|
||||
if (!user.profile.nip05) return false;
|
||||
return false;
|
||||
},
|
||||
enabled: !!user,
|
||||
});
|
||||
const { isLoading, data: verified } = useQuery({
|
||||
queryKey: ["nip05", user?.profile.nip05],
|
||||
queryFn: async () => {
|
||||
if (!user.profile?.nip05) return false;
|
||||
|
||||
if (!user.profile) {
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
"h-4 w-20 bg-black/20 dark:bg-white/20 rounded animate-pulse",
|
||||
className,
|
||||
)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
const verify = await ark.verify_nip05(user.pubkey, user.profile?.nip05);
|
||||
return verify;
|
||||
},
|
||||
enabled: !!user.profile,
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="inline-flex items-center gap-1">
|
||||
<p className={cn("text-sm", className)}>
|
||||
{!user?.profile.nip05
|
||||
? displayNpub(user.pubkey, 16)
|
||||
: user?.profile.nip05?.startsWith("_@")
|
||||
? user?.profile.nip05?.replace("_@", "")
|
||||
: user?.profile.nip05}
|
||||
</p>
|
||||
{!isLoading && verified ? (
|
||||
<VerifiedIcon className="text-teal-500 size-4" />
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
if (!user.profile) {
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
"h-4 w-20 animate-pulse rounded bg-black/20 dark:bg-white/20",
|
||||
className,
|
||||
)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="inline-flex items-center gap-1">
|
||||
<p className={cn("text-sm", className)}>
|
||||
{!user?.profile?.nip05
|
||||
? displayNpub(user.pubkey, 16)
|
||||
: user?.profile?.nip05?.startsWith("_@")
|
||||
? user?.profile?.nip05?.replace("_@", "")
|
||||
: user?.profile?.nip05}
|
||||
</p>
|
||||
{!isLoading && verified ? (
|
||||
<VerifiedIcon className="size-4 text-teal-500" />
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user