476 lines
12 KiB
TypeScript
476 lines
12 KiB
TypeScript
import { type Mention, commands } from "@/commands.gen";
|
|
import { cn, displayNpub } from "@/commons";
|
|
import { PublishIcon, Spinner } from "@/components";
|
|
import { Note } from "@/components/note";
|
|
import { User } from "@/components/user";
|
|
import { LumeWindow, useEvent } from "@/system";
|
|
import type { Metadata } from "@/types";
|
|
import { CaretDown } from "@phosphor-icons/react";
|
|
import { createLazyFileRoute, useAwaited } from "@tanstack/react-router";
|
|
import { Menu, MenuItem } from "@tauri-apps/api/menu";
|
|
import { getCurrentWindow } from "@tauri-apps/api/window";
|
|
import { message } from "@tauri-apps/plugin-dialog";
|
|
import {
|
|
useCallback,
|
|
useEffect,
|
|
useMemo,
|
|
useRef,
|
|
useState,
|
|
useTransition,
|
|
} from "react";
|
|
import { createPortal } from "react-dom";
|
|
import {
|
|
RichTextarea,
|
|
type RichTextareaHandle,
|
|
createRegexRenderer,
|
|
} from "rich-textarea";
|
|
import { MediaButton } from "./-components/media";
|
|
import { PowButton } from "./-components/pow";
|
|
import { WarningButton } from "./-components/warning";
|
|
|
|
const MENTION_REG = /\B@([\-+\w]*)$/;
|
|
const MAX_LIST_LENGTH = 5;
|
|
|
|
const renderer = createRegexRenderer([
|
|
[
|
|
/https?:\/\/[-_.!~*\'()a-zA-Z0-9;\/?:\@&=+\$,%#]+/g,
|
|
({ children, key, value }) => (
|
|
<a
|
|
key={key}
|
|
href={value}
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
className="text-blue-500 !underline"
|
|
>
|
|
{children}
|
|
</a>
|
|
),
|
|
],
|
|
[
|
|
/(?:^|\W)nostr:(\w+)(?!\w)/g,
|
|
({ children, key }) => (
|
|
<span key={key} className="text-blue-500">
|
|
{children}
|
|
</span>
|
|
),
|
|
],
|
|
[
|
|
/(?:^|\W)#(\w+)(?!\w)/g,
|
|
({ children, key }) => (
|
|
<span key={key} className="text-blue-500">
|
|
{children}
|
|
</span>
|
|
),
|
|
],
|
|
]);
|
|
|
|
export const Route = createLazyFileRoute("/new-post/")({
|
|
component: Screen,
|
|
});
|
|
|
|
function Screen() {
|
|
const { reply_to } = Route.useSearch();
|
|
const { accounts, initialValue } = Route.useRouteContext();
|
|
const { deferMentionList } = Route.useLoaderData();
|
|
const users = useAwaited({ promise: deferMentionList })[0];
|
|
|
|
const [text, setText] = useState("");
|
|
const [currentUser, setCurrentUser] = useState<string | null>(null);
|
|
const [isPublish, setIsPublish] = useState(false);
|
|
const [error, setError] = useState("");
|
|
const [isPending, startTransition] = useTransition();
|
|
const [warning, setWarning] = useState({ enable: false, reason: "" });
|
|
const [difficulty, setDifficulty] = useState({ enable: false, num: 21 });
|
|
const [index, setIndex] = useState<number>(0);
|
|
const [pos, setPos] = useState<{
|
|
top: number;
|
|
left: number;
|
|
caret: number;
|
|
} | null>(null);
|
|
|
|
const ref = useRef<RichTextareaHandle>(null);
|
|
const targetText = pos ? text.slice(0, pos.caret) : text;
|
|
const match = pos && targetText.match(MENTION_REG);
|
|
const name = match?.[1] ?? "";
|
|
const filtered = useMemo(() => {
|
|
if (!users?.length) return [];
|
|
return users
|
|
.filter((u) => u?.name?.toLowerCase().startsWith(name.toLowerCase()))
|
|
.slice(0, MAX_LIST_LENGTH);
|
|
}, [users, name]);
|
|
|
|
const showContextMenu = useCallback(async (e: React.MouseEvent) => {
|
|
e.preventDefault();
|
|
|
|
const list: Promise<MenuItem>[] = [];
|
|
|
|
for (const account of accounts) {
|
|
const res = await commands.getProfile(account);
|
|
let name = "unknown";
|
|
|
|
if (res.status === "ok") {
|
|
const profile: Metadata = JSON.parse(res.data);
|
|
name = profile.display_name ?? profile.name ?? "anon";
|
|
}
|
|
|
|
list.push(
|
|
MenuItem.new({
|
|
text: `Publish as ${name} (${displayNpub(account, 16)})`,
|
|
action: async () => setCurrentUser(account),
|
|
}),
|
|
);
|
|
}
|
|
|
|
const items = await Promise.all(list);
|
|
const menu = await Menu.new({ items });
|
|
|
|
await menu.popup().catch((e) => console.error(e));
|
|
}, []);
|
|
|
|
const insert = (i: number) => {
|
|
if (!ref.current || !pos) return;
|
|
|
|
const selected = filtered[i];
|
|
|
|
ref.current.setRangeText(
|
|
`nostr:${selected.pubkey} `,
|
|
pos.caret - name.length - 1,
|
|
pos.caret,
|
|
"end",
|
|
);
|
|
|
|
setPos(null);
|
|
setIndex(0);
|
|
};
|
|
|
|
const submit = () => {
|
|
startTransition(async () => {
|
|
if (!text.length) return;
|
|
if (!currentUser) return;
|
|
|
|
const signer = await commands.hasSigner(currentUser);
|
|
|
|
if (signer.status === "ok") {
|
|
if (!signer.data) {
|
|
const res = await commands.setSigner(currentUser);
|
|
|
|
if (res.status === "error") {
|
|
await message(res.error, { kind: "error" });
|
|
return;
|
|
}
|
|
}
|
|
|
|
const content = text.trim();
|
|
const warn = warning.enable ? warning.reason : null;
|
|
const diff = difficulty.enable ? difficulty.num : null;
|
|
|
|
if (reply_to?.length) {
|
|
const res = await commands.reply(content, reply_to);
|
|
|
|
if (res.status === "ok") {
|
|
setText("");
|
|
setIsPublish(true);
|
|
|
|
await getCurrentWindow().emit(reply_to, {});
|
|
} else {
|
|
setError(res.error);
|
|
}
|
|
} else {
|
|
const res = await commands.publish(content, warn, diff);
|
|
|
|
if (res.status === "ok") {
|
|
setText("");
|
|
setIsPublish(true);
|
|
|
|
await LumeWindow.openColumn({
|
|
name: "Thread",
|
|
label: res.data.slice(0, 6),
|
|
account: currentUser,
|
|
url: `/columns/events/${res.data}`,
|
|
});
|
|
} else {
|
|
setError(res.error);
|
|
}
|
|
}
|
|
}
|
|
});
|
|
};
|
|
|
|
useEffect(() => {
|
|
if (isPublish) {
|
|
const timer = setTimeout(() => setIsPublish((prev) => !prev), 3000);
|
|
|
|
return () => {
|
|
clearTimeout(timer);
|
|
};
|
|
}
|
|
}, [isPublish]);
|
|
|
|
useEffect(() => {
|
|
if (initialValue?.length) {
|
|
setText(initialValue);
|
|
}
|
|
}, [initialValue]);
|
|
|
|
useEffect(() => {
|
|
if (accounts?.length) {
|
|
setCurrentUser(accounts[0]);
|
|
}
|
|
}, [accounts]);
|
|
|
|
return (
|
|
<div className="flex flex-col w-full h-full">
|
|
<div data-tauri-drag-region className="h-11 shrink-0" />
|
|
<div className="flex flex-col flex-1 overflow-y-auto">
|
|
{error?.length ? (
|
|
<div className="flex flex-col gap-2 px-3.5 py-3 border-b border-black/5 dark:border-white/5">
|
|
<p className="text-sm font-medium text-red-600">Error: {error}</p>
|
|
</div>
|
|
) : null}
|
|
{reply_to?.length ? (
|
|
<div className="flex flex-col gap-2 px-3.5 py-3 border-b border-black/5 dark:border-white/5">
|
|
<span className="text-sm font-semibold">Reply to:</span>
|
|
<EmbedNote id={reply_to} />
|
|
</div>
|
|
) : null}
|
|
<div className="p-4 overflow-y-auto h-full">
|
|
<RichTextarea
|
|
ref={ref}
|
|
value={text}
|
|
placeholder={reply_to ? "Type your reply..." : "What're you up to?"}
|
|
style={{ width: "100%", height: "100%" }}
|
|
className="text-[15px] leading-normal resize-none border-none focus:outline-none focus:ring-0 placeholder:text-neutral-500 placeholder:pt-[1.5px] placeholder:pl-2"
|
|
onChange={(e) => setText(e.target.value)}
|
|
onKeyDown={(e) => {
|
|
if (!pos || !filtered.length) return;
|
|
switch (e.code) {
|
|
case "ArrowUp": {
|
|
e.preventDefault();
|
|
const nextIndex =
|
|
index <= 0 ? filtered.length - 1 : index - 1;
|
|
setIndex(nextIndex);
|
|
break;
|
|
}
|
|
case "ArrowDown": {
|
|
e.preventDefault();
|
|
const prevIndex =
|
|
index >= filtered.length - 1 ? 0 : index + 1;
|
|
setIndex(prevIndex);
|
|
break;
|
|
}
|
|
case "Enter":
|
|
e.preventDefault();
|
|
insert(index);
|
|
break;
|
|
case "Escape":
|
|
e.preventDefault();
|
|
setPos(null);
|
|
setIndex(0);
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
}}
|
|
onSelectionChange={(r) => {
|
|
if (
|
|
r.focused &&
|
|
MENTION_REG.test(text.slice(0, r.selectionStart))
|
|
) {
|
|
setPos({
|
|
top: r.top + r.height,
|
|
left: r.left,
|
|
caret: r.selectionStart,
|
|
});
|
|
setIndex(0);
|
|
} else {
|
|
setPos(null);
|
|
setIndex(0);
|
|
}
|
|
}}
|
|
disabled={isPending}
|
|
>
|
|
{renderer}
|
|
</RichTextarea>
|
|
{pos ? (
|
|
createPortal(
|
|
<MentionPopup
|
|
top={pos.top}
|
|
left={pos.left}
|
|
users={filtered}
|
|
index={index}
|
|
insert={insert}
|
|
/>,
|
|
document.body,
|
|
)
|
|
) : (
|
|
<></>
|
|
)}
|
|
</div>
|
|
</div>
|
|
{warning.enable ? (
|
|
<div className="flex items-center w-full px-4 border-t h-11 shrink-0 border-black/5 dark:border-white/5">
|
|
<span className="text-sm shrink-0 text-black/50 dark:text-white/50">
|
|
Reason:
|
|
</span>
|
|
<input
|
|
type="text"
|
|
placeholder="NSFW..."
|
|
value={warning.reason}
|
|
onChange={(e) =>
|
|
setWarning((prev) => ({ ...prev, reason: e.target.value }))
|
|
}
|
|
className="flex-1 text-sm bg-transparent border-none focus:outline-none focus:ring-0 placeholder:text-black/50 dark:placeholder:text-white/50"
|
|
/>
|
|
</div>
|
|
) : null}
|
|
{difficulty.enable ? (
|
|
<div className="flex items-center w-full px-4 border-t h-11 shrink-0 border-black/5 dark:border-white/5">
|
|
<span className="text-sm shrink-0 text-black/50 dark:text-white/50">
|
|
Difficulty:
|
|
</span>
|
|
<input
|
|
type="text"
|
|
inputMode="numeric"
|
|
pattern="[0-9]"
|
|
onKeyDown={(event) => {
|
|
if (!/[0-9]/.test(event.key)) {
|
|
event.preventDefault();
|
|
}
|
|
}}
|
|
placeholder="21"
|
|
defaultValue={difficulty.num}
|
|
onChange={(e) =>
|
|
setWarning((prev) => ({ ...prev, num: Number(e.target.value) }))
|
|
}
|
|
className="flex-1 text-sm bg-transparent border-none focus:outline-none focus:ring-0 placeholder:text-black/50 dark:placeholder:text-white/50"
|
|
/>
|
|
</div>
|
|
) : null}
|
|
<div
|
|
data-tauri-drag-region
|
|
className="flex items-center w-full h-16 gap-4 px-4 border-t divide-x divide-black/5 dark:divide-white/5 shrink-0 border-black/5 dark:border-white/5"
|
|
>
|
|
<div className="inline-flex items-center gap-3">
|
|
<button
|
|
type="button"
|
|
onClick={() => submit()}
|
|
className={cn(
|
|
"inline-flex items-center justify-center h-8 gap-1 px-2.5 text-sm font-medium rounded-lg w-max",
|
|
isPublish
|
|
? "bg-green-500 hover:bg-green-600 dark:hover:bg-green-400 text-white"
|
|
: "bg-black/10 hover:bg-black/20 dark:bg-white/10 dark:hover:bg-white/20",
|
|
)}
|
|
>
|
|
{isPending ? (
|
|
<Spinner className="size-4" />
|
|
) : (
|
|
<PublishIcon className="size-4" />
|
|
)}
|
|
{isPublish ? "Published" : "Publish"}
|
|
</button>
|
|
{currentUser ? (
|
|
<button
|
|
type="button"
|
|
onClick={(e) => showContextMenu(e)}
|
|
className="inline-flex items-center gap-1.5"
|
|
>
|
|
<User.Provider pubkey={currentUser}>
|
|
<User.Root>
|
|
<User.Avatar className="size-6 rounded-full" />
|
|
</User.Root>
|
|
</User.Provider>
|
|
<CaretDown
|
|
className="mt-px size-3 text-neutral-500"
|
|
weight="bold"
|
|
/>
|
|
</button>
|
|
) : null}
|
|
</div>
|
|
<div className="inline-flex items-center flex-1 gap-2 pl-2">
|
|
<MediaButton setText={setText} />
|
|
<WarningButton setWarning={setWarning} />
|
|
<PowButton setDifficulty={setDifficulty} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function MentionPopup({
|
|
users,
|
|
index,
|
|
top,
|
|
left,
|
|
insert,
|
|
}: {
|
|
users: Mention[];
|
|
index: number;
|
|
top: number;
|
|
left: number;
|
|
insert: (index: number) => void;
|
|
}) {
|
|
return (
|
|
<div
|
|
style={{
|
|
top: top,
|
|
left: left,
|
|
}}
|
|
className="fixed w-[200px] text-sm bg-white dark:bg-black shadow-lg shadow-neutral-500/20 dark:shadow-none dark:ring-1 dark:ring-neutral-700 rounded-lg overflow-hidden"
|
|
>
|
|
{users.map((u, i) => (
|
|
<div
|
|
key={u.pubkey}
|
|
className={cn(
|
|
"flex items-center gap-1.5 p-2",
|
|
index === i ? "bg-neutral-100 dark:bg-neutral-900" : null,
|
|
)}
|
|
onMouseDown={(e) => {
|
|
e.preventDefault();
|
|
insert(i);
|
|
}}
|
|
>
|
|
<div className="size-7 shrink-0">
|
|
{u.avatar?.length ? (
|
|
<img
|
|
src={u.avatar}
|
|
alt=""
|
|
className="size-7 rounded-full outline outline-1 -outline-offset-1 outline-black/15"
|
|
loading="lazy"
|
|
decoding="async"
|
|
/>
|
|
) : (
|
|
<div className="size-7 rounded-full bg-blue-500" />
|
|
)}
|
|
</div>
|
|
{u.name}
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function EmbedNote({ id }: { id: string }) {
|
|
const { isLoading, isError, data } = useEvent(id);
|
|
|
|
if (isLoading) {
|
|
return <Spinner className="size-5" />;
|
|
}
|
|
|
|
if (isError || !data) {
|
|
return <div>Event not found with your current relay set.</div>;
|
|
}
|
|
|
|
return (
|
|
<Note.Provider event={data}>
|
|
<Note.Root className="flex items-center gap-2">
|
|
<User.Provider pubkey={data.pubkey}>
|
|
<User.Root className="shrink-0">
|
|
<User.Avatar className="rounded-full size-7" />
|
|
</User.Root>
|
|
</User.Provider>
|
|
<div className="content-break line-clamp-1 text-sm">{data.content}</div>
|
|
</Note.Root>
|
|
</Note.Provider>
|
|
);
|
|
}
|