feat: rework multi account
This commit is contained in:
reya
+3
-16
@@ -1,5 +1,4 @@
|
||||
import { events } from "@/commands.gen";
|
||||
import { appSettings } from "@/commons";
|
||||
import { Spinner } from "@/components";
|
||||
import type { QueryClient } from "@tanstack/react-query";
|
||||
import { Outlet, createRootRouteWithContext } from "@tanstack/react-router";
|
||||
@@ -20,24 +19,12 @@ export const Route = createRootRouteWithContext<RouterContext>()({
|
||||
function Screen() {
|
||||
const { queryClient } = Route.useRouteContext();
|
||||
|
||||
/*
|
||||
useEffect(() => {
|
||||
const unlisten = events.newSettings.listen((data) => {
|
||||
appSettings.setState((state) => {
|
||||
return { ...state, ...data.payload };
|
||||
});
|
||||
});
|
||||
|
||||
return () => {
|
||||
unlisten.then((f) => f());
|
||||
};
|
||||
}, []);
|
||||
*/
|
||||
|
||||
useEffect(() => {
|
||||
const unlisten = events.negentropyEvent.listen(async (data) => {
|
||||
const queryKey = [data.payload.kind.toLowerCase()];
|
||||
await queryClient.invalidateQueries({ queryKey });
|
||||
console.info("invalidate: ", queryKey);
|
||||
|
||||
await queryClient.refetchQueries({ queryKey });
|
||||
});
|
||||
|
||||
return () => {
|
||||
|
||||
@@ -1,17 +1,22 @@
|
||||
import { commands } from "@/commands.gen";
|
||||
import { cn } from "@/commons";
|
||||
import { appColumns, cn } from "@/commons";
|
||||
import { PublishIcon } from "@/components";
|
||||
import { User } from "@/components/user";
|
||||
import { LumeWindow } from "@/system";
|
||||
import { MagnifyingGlass, Plus } from "@phosphor-icons/react";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { Link, Outlet, createLazyFileRoute } from "@tanstack/react-router";
|
||||
import {
|
||||
Link,
|
||||
Outlet,
|
||||
createLazyFileRoute,
|
||||
useRouter,
|
||||
} from "@tanstack/react-router";
|
||||
import { listen } from "@tauri-apps/api/event";
|
||||
import { Menu, MenuItem, PredefinedMenuItem } from "@tauri-apps/api/menu";
|
||||
import { writeText } from "@tauri-apps/plugin-clipboard-manager";
|
||||
import { useCallback, useEffect } from "react";
|
||||
|
||||
export const Route = createLazyFileRoute("/_layout")({
|
||||
export const Route = createLazyFileRoute("/_app")({
|
||||
component: Layout,
|
||||
});
|
||||
|
||||
@@ -83,6 +88,7 @@ function Topbar() {
|
||||
function Account({ pubkey }: { pubkey: string }) {
|
||||
const navigate = Route.useNavigate();
|
||||
const context = Route.useRouteContext();
|
||||
const router = useRouter();
|
||||
|
||||
const { data: isActive } = useQuery({
|
||||
queryKey: ["signer", pubkey],
|
||||
@@ -103,10 +109,9 @@ function Account({ pubkey }: { pubkey: string }) {
|
||||
|
||||
const items = await Promise.all([
|
||||
MenuItem.new({
|
||||
text: "Unlock",
|
||||
text: "Activate",
|
||||
enabled: !isActive || true,
|
||||
action: () =>
|
||||
LumeWindow.openPopup(`/set-signer/${pubkey}`, undefined, false),
|
||||
action: async () => await commands.setSigner(pubkey),
|
||||
}),
|
||||
PredefinedMenuItem.new({ item: "Separator" }),
|
||||
MenuItem.new({
|
||||
@@ -124,17 +129,28 @@ function Account({ pubkey }: { pubkey: string }) {
|
||||
}),
|
||||
PredefinedMenuItem.new({ item: "Separator" }),
|
||||
MenuItem.new({
|
||||
text: "Logout",
|
||||
text: "Delete Account",
|
||||
action: async () => {
|
||||
const res = await commands.deleteAccount(pubkey);
|
||||
|
||||
if (res.status === "ok") {
|
||||
router.invalidate();
|
||||
|
||||
// Delete column associate with this account
|
||||
appColumns.setState((prev) =>
|
||||
prev.filter((col) =>
|
||||
col.account ? col.account !== pubkey : col,
|
||||
),
|
||||
);
|
||||
|
||||
// Check remain account
|
||||
const newAccounts = context.accounts.filter(
|
||||
(account) => account !== pubkey,
|
||||
);
|
||||
|
||||
// Redirect to new account screen
|
||||
if (newAccounts.length < 1) {
|
||||
navigate({ to: "/", replace: true });
|
||||
navigate({ to: "/new", replace: true });
|
||||
}
|
||||
}
|
||||
},
|
||||
@@ -0,0 +1,14 @@
|
||||
import { commands } from '@/commands.gen'
|
||||
import { createFileRoute, redirect } from '@tanstack/react-router'
|
||||
|
||||
export const Route = createFileRoute('/_app')({
|
||||
beforeLoad: async () => {
|
||||
const accounts = await commands.getAccounts()
|
||||
|
||||
if (!accounts.length) {
|
||||
throw redirect({ to: '/new', replace: true })
|
||||
}
|
||||
|
||||
return { accounts }
|
||||
},
|
||||
})
|
||||
@@ -6,9 +6,7 @@ import { ArrowLeft, ArrowRight, Plus, StackPlus } from "@phosphor-icons/react";
|
||||
import { createLazyFileRoute } from "@tanstack/react-router";
|
||||
import { useStore } from "@tanstack/react-store";
|
||||
import { listen } from "@tauri-apps/api/event";
|
||||
import { resolveResource } from "@tauri-apps/api/path";
|
||||
import { getCurrentWindow } from "@tauri-apps/api/window";
|
||||
import { readTextFile } from "@tauri-apps/plugin-fs";
|
||||
import useEmblaCarousel from "embla-carousel-react";
|
||||
import { nanoid } from "nanoid";
|
||||
import {
|
||||
@@ -21,12 +19,12 @@ import {
|
||||
import { createPortal } from "react-dom";
|
||||
import { useDebouncedCallback } from "use-debounce";
|
||||
|
||||
export const Route = createLazyFileRoute("/_layout/")({
|
||||
export const Route = createLazyFileRoute("/_app/")({
|
||||
component: Screen,
|
||||
});
|
||||
|
||||
function Screen() {
|
||||
const { accounts } = Route.useRouteContext();
|
||||
const initialAppColumns = Route.useLoaderData();
|
||||
const columns = useStore(appColumns, (state) => state);
|
||||
|
||||
const [emblaRef, emblaApi] = useEmblaCarousel({
|
||||
@@ -43,7 +41,7 @@ function Screen() {
|
||||
}, [emblaApi]);
|
||||
|
||||
const emitScrollEvent = useCallback(() => {
|
||||
getCurrentWindow().emit("column_scroll", {});
|
||||
getCurrentWindow().emit("scrolling", {});
|
||||
}, []);
|
||||
|
||||
const add = useDebouncedCallback((column: LumeColumn) => {
|
||||
@@ -62,16 +60,18 @@ function Screen() {
|
||||
const move = useDebouncedCallback(
|
||||
(label: string, direction: "left" | "right") => {
|
||||
const newCols = [...columns];
|
||||
const existColumn = newCols.find((el) => el.label === label);
|
||||
|
||||
const col = newCols.find((el) => el.label === label);
|
||||
const colIndex = newCols.findIndex((el) => el.label === label);
|
||||
if (existColumn) {
|
||||
const colIndex = newCols.findIndex((el) => el.label === label);
|
||||
|
||||
newCols.splice(colIndex, 1);
|
||||
newCols.splice(colIndex, 1);
|
||||
|
||||
if (direction === "left") newCols.splice(colIndex - 1, 0, col);
|
||||
if (direction === "right") newCols.splice(colIndex + 1, 0, col);
|
||||
if (direction === "left") newCols.splice(colIndex - 1, 0, existColumn);
|
||||
if (direction === "right") newCols.splice(colIndex + 1, 0, existColumn);
|
||||
|
||||
appColumns.setState(() => newCols);
|
||||
appColumns.setState(() => newCols);
|
||||
}
|
||||
},
|
||||
150,
|
||||
);
|
||||
@@ -90,23 +90,6 @@ function Screen() {
|
||||
|
||||
const reset = useDebouncedCallback(() => appColumns.setState(() => []), 150);
|
||||
|
||||
const handleKeyDown = useDebouncedCallback((event) => {
|
||||
if (event.defaultPrevented) return;
|
||||
|
||||
switch (event.code) {
|
||||
case "ArrowLeft":
|
||||
if (emblaApi) emblaApi.scrollPrev();
|
||||
break;
|
||||
case "ArrowRight":
|
||||
if (emblaApi) emblaApi.scrollNext();
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
|
||||
event.preventDefault();
|
||||
}, 150);
|
||||
|
||||
useEffect(() => {
|
||||
if (emblaApi) {
|
||||
emblaApi.on("scroll", emitScrollEvent);
|
||||
@@ -119,16 +102,6 @@ function Screen() {
|
||||
};
|
||||
}, [emblaApi, emitScrollEvent]);
|
||||
|
||||
// Listen for keyboard event
|
||||
useEffect(() => {
|
||||
window.addEventListener("keydown", handleKeyDown);
|
||||
|
||||
return () => {
|
||||
window.removeEventListener("keydown", handleKeyDown);
|
||||
};
|
||||
}, [handleKeyDown]);
|
||||
|
||||
// Listen for columns event
|
||||
useEffect(() => {
|
||||
const unlisten = listen<ColumnEvent>("columns", (data) => {
|
||||
if (data.payload.type === "reset") reset();
|
||||
@@ -146,31 +119,14 @@ function Screen() {
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
async function getSystemColumns() {
|
||||
const systemPath = "resources/columns.json";
|
||||
const resourcePath = await resolveResource(systemPath);
|
||||
const resourceFile = await readTextFile(resourcePath);
|
||||
const cols: LumeColumn[] = JSON.parse(resourceFile);
|
||||
|
||||
appColumns.setState(() => cols.filter((col) => col.default));
|
||||
if (initialAppColumns) {
|
||||
appColumns.setState(() => initialAppColumns);
|
||||
}
|
||||
}, [initialAppColumns]);
|
||||
|
||||
if (!columns.length) {
|
||||
const prevColumns = window.localStorage.getItem("columns");
|
||||
|
||||
if (!prevColumns) {
|
||||
getSystemColumns();
|
||||
} else {
|
||||
const parsed: LumeColumn[] = JSON.parse(prevColumns);
|
||||
const fil = parsed.filter((item) =>
|
||||
item.account ? accounts.includes(item.account) : item,
|
||||
);
|
||||
appColumns.setState(() => fil);
|
||||
}
|
||||
} else {
|
||||
window.localStorage.setItem("columns", JSON.stringify(columns));
|
||||
}
|
||||
}, [columns.length]);
|
||||
useEffect(() => {
|
||||
window.localStorage.setItem("columns", JSON.stringify(columns));
|
||||
}, [columns]);
|
||||
|
||||
return (
|
||||
<div className="size-full">
|
||||
@@ -0,0 +1,26 @@
|
||||
import type { LumeColumn } from '@/types'
|
||||
import { createFileRoute } from '@tanstack/react-router'
|
||||
import { resolveResource } from '@tauri-apps/api/path'
|
||||
import { readTextFile } from '@tauri-apps/plugin-fs'
|
||||
|
||||
export const Route = createFileRoute('/_app/')({
|
||||
loader: async ({ context }) => {
|
||||
const prevColumns = window.localStorage.getItem('columns')
|
||||
|
||||
if (!prevColumns) {
|
||||
const resourcePath = await resolveResource('resources/columns.json')
|
||||
const resourceFile = await readTextFile(resourcePath)
|
||||
const content: LumeColumn[] = JSON.parse(resourceFile)
|
||||
const initialAppColumns = content.filter((col) => col.default)
|
||||
|
||||
return initialAppColumns
|
||||
} else {
|
||||
const parsed: LumeColumn[] = JSON.parse(prevColumns)
|
||||
const initialAppColumns = parsed.filter((item) =>
|
||||
item.account ? context.accounts.includes(item.account) : item,
|
||||
)
|
||||
|
||||
return initialAppColumns
|
||||
}
|
||||
},
|
||||
})
|
||||
@@ -1,14 +0,0 @@
|
||||
import { commands } from "@/commands.gen";
|
||||
import { createFileRoute, redirect } from "@tanstack/react-router";
|
||||
|
||||
export const Route = createFileRoute("/_layout")({
|
||||
beforeLoad: async () => {
|
||||
const accounts = await commands.getAccounts();
|
||||
|
||||
if (!accounts.length) {
|
||||
throw redirect({ to: "/new", replace: true });
|
||||
}
|
||||
|
||||
return { accounts };
|
||||
},
|
||||
});
|
||||
@@ -1,3 +0,0 @@
|
||||
import { createFileRoute } from "@tanstack/react-router";
|
||||
|
||||
export const Route = createFileRoute("/_layout/")();
|
||||
@@ -1,8 +1,7 @@
|
||||
import { commands } from "@/commands.gen";
|
||||
import { appSettings } from "@/commons";
|
||||
import { Outlet, createFileRoute } from "@tanstack/react-router";
|
||||
|
||||
export interface RouteSearch {
|
||||
account?: string;
|
||||
label?: string;
|
||||
name?: string;
|
||||
redirect?: string;
|
||||
@@ -11,21 +10,11 @@ export interface RouteSearch {
|
||||
export const Route = createFileRoute("/columns/_layout")({
|
||||
validateSearch: (search: Record<string, string>): RouteSearch => {
|
||||
return {
|
||||
account: search.account,
|
||||
label: search.label,
|
||||
name: search.name,
|
||||
};
|
||||
},
|
||||
beforeLoad: async () => {
|
||||
const res = await commands.getUserSettings();
|
||||
|
||||
if (res.status === "ok") {
|
||||
appSettings.setState((state) => {
|
||||
return { ...state, ...res.data };
|
||||
});
|
||||
} else {
|
||||
throw new Error(res.error);
|
||||
}
|
||||
},
|
||||
component: Layout,
|
||||
});
|
||||
|
||||
|
||||
@@ -5,7 +5,7 @@ import { readText } from "@tauri-apps/plugin-clipboard-manager";
|
||||
import { message } from "@tauri-apps/plugin-dialog";
|
||||
import { useState, useTransition } from "react";
|
||||
|
||||
export const Route = createLazyFileRoute("/auth/connect")({
|
||||
export const Route = createLazyFileRoute("/new-account/connect")({
|
||||
component: Screen,
|
||||
});
|
||||
|
||||
@@ -6,7 +6,7 @@ import { readText } from "@tauri-apps/plugin-clipboard-manager";
|
||||
import { message } from "@tauri-apps/plugin-dialog";
|
||||
import { useState, useTransition } from "react";
|
||||
|
||||
export const Route = createLazyFileRoute("/auth/import")({
|
||||
export const Route = createLazyFileRoute("/new-account/import")({
|
||||
component: Screen,
|
||||
});
|
||||
|
||||
@@ -6,7 +6,7 @@ import { readText } from "@tauri-apps/plugin-clipboard-manager";
|
||||
import { message } from "@tauri-apps/plugin-dialog";
|
||||
import { useState, useTransition } from "react";
|
||||
|
||||
export const Route = createLazyFileRoute("/auth/watch")({
|
||||
export const Route = createLazyFileRoute("/new-account/watch")({
|
||||
component: Screen,
|
||||
});
|
||||
|
||||
@@ -0,0 +1,459 @@
|
||||
import { type Mention, type Result, 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 { 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 { 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 ?? "unknown";
|
||||
}
|
||||
|
||||
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;
|
||||
|
||||
let res: Result<string, string>;
|
||||
|
||||
if (reply_to?.length) {
|
||||
res = await commands.reply(content, reply_to, null);
|
||||
} else {
|
||||
res = await commands.publish(content, warn, diff);
|
||||
}
|
||||
|
||||
if (res.status === "ok") {
|
||||
setText("");
|
||||
setIsPublish(true);
|
||||
} 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">
|
||||
{reply_to?.length ? (
|
||||
<div className="flex flex-col gap-2 px-3.5 pb-3 border-b border-black/5 dark:border-white/5">
|
||||
<span className="text-sm font-semibold">Reply to:</span>
|
||||
<EmbedNote id={reply_to} />
|
||||
</div>
|
||||
) : error?.length ? (
|
||||
<div className="flex flex-col gap-2 px-3.5 pb-3 border-b border-black/5 dark:border-white/5">
|
||||
<p className="text-sm font-medium text-red-600">{error}</p>
|
||||
</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>
|
||||
);
|
||||
}
|
||||
@@ -1,74 +1,13 @@
|
||||
import { type Mention, type Result, 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 { createFileRoute } from "@tanstack/react-router";
|
||||
import { Menu, MenuItem } from "@tauri-apps/api/menu";
|
||||
import type { Window } from "@tauri-apps/api/window";
|
||||
import { type Mention, commands } from "@/commands.gen";
|
||||
import { createFileRoute, defer } from "@tanstack/react-router";
|
||||
import { invoke } from "@tauri-apps/api/core";
|
||||
import { nip19 } from "nostr-tools";
|
||||
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";
|
||||
|
||||
type EditorSearch = {
|
||||
reply_to: string;
|
||||
quote: string;
|
||||
};
|
||||
|
||||
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 = createFileRoute("/new-post/")({
|
||||
validateSearch: (search: Record<string, string>): EditorSearch => {
|
||||
return {
|
||||
@@ -77,7 +16,6 @@ export const Route = createFileRoute("/new-post/")({
|
||||
};
|
||||
},
|
||||
beforeLoad: async ({ search }) => {
|
||||
let users: Mention[] = [];
|
||||
let initialValue: string;
|
||||
|
||||
if (search?.quote?.length) {
|
||||
@@ -86,426 +24,12 @@ export const Route = createFileRoute("/new-post/")({
|
||||
initialValue = "";
|
||||
}
|
||||
|
||||
const res = await commands.getAllProfiles();
|
||||
const accounts = await commands.getAccounts();
|
||||
|
||||
if (res.status === "ok") {
|
||||
users = res.data;
|
||||
}
|
||||
|
||||
return { accounts, users, initialValue };
|
||||
return { accounts, initialValue };
|
||||
},
|
||||
loader: async () => {
|
||||
const query: Promise<Array<Mention>> = invoke("get_all_profiles");
|
||||
return { deferMentionList: defer(query) };
|
||||
},
|
||||
component: Screen,
|
||||
});
|
||||
|
||||
function Screen() {
|
||||
const { reply_to } = Route.useSearch();
|
||||
const { accounts, users, initialValue } = Route.useRouteContext();
|
||||
|
||||
const [text, setText] = useState("");
|
||||
const [currentUser, setCurrentUser] = useState<string>(null);
|
||||
const [popup, setPopup] = useState<Window>(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(
|
||||
() =>
|
||||
users
|
||||
.filter((u) => u.name.toLowerCase().startsWith(name.toLowerCase()))
|
||||
.slice(0, MAX_LIST_LENGTH),
|
||||
[name],
|
||||
);
|
||||
|
||||
const showContextMenu = useCallback(async (e: React.MouseEvent) => {
|
||||
e.preventDefault();
|
||||
|
||||
const list = [];
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
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 publish = () => {
|
||||
startTransition(async () => {
|
||||
const content = text.trim();
|
||||
const warn = warning.enable ? warning.reason : undefined;
|
||||
const diff = difficulty.enable ? difficulty.num : undefined;
|
||||
|
||||
let res: Result<string, string>;
|
||||
|
||||
if (reply_to?.length) {
|
||||
res = await commands.reply(content, reply_to, undefined);
|
||||
} else {
|
||||
res = await commands.publish(content, warn, diff);
|
||||
}
|
||||
|
||||
if (res.status === "ok") {
|
||||
setText("");
|
||||
setIsPublish(true);
|
||||
} else {
|
||||
setError(res.error);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const submit = async () => {
|
||||
if (!text.length) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (currentUser) {
|
||||
const signer = await commands.hasSigner(currentUser);
|
||||
|
||||
if (signer.status === "ok") {
|
||||
if (!signer.data) {
|
||||
const newPopup = await LumeWindow.openPopup(
|
||||
`/set-signer/${currentUser}`,
|
||||
undefined,
|
||||
false,
|
||||
);
|
||||
|
||||
setPopup(newPopup);
|
||||
return;
|
||||
}
|
||||
|
||||
publish();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (!popup) return;
|
||||
|
||||
const unlisten = popup.listen("signer-updated", () => {
|
||||
publish();
|
||||
});
|
||||
|
||||
return () => {
|
||||
unlisten.then((f) => f());
|
||||
};
|
||||
}, [popup]);
|
||||
|
||||
useEffect(() => {
|
||||
if (isPublish) {
|
||||
const timer = setTimeout(() => setIsPublish((prev) => !prev), 5000);
|
||||
|
||||
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">
|
||||
{reply_to?.length ? (
|
||||
<div className="flex flex-col gap-2 px-3.5 pb-3 border-b border-black/5 dark:border-white/5">
|
||||
<span className="text-sm font-semibold">Reply to:</span>
|
||||
<EmbedNote id={reply_to} />
|
||||
</div>
|
||||
) : error?.length ? (
|
||||
<div className="flex flex-col gap-2 px-3.5 pb-3 border-b border-black/5 dark:border-white/5">
|
||||
<p className="text-sm font-medium text-red-600">{error}</p>
|
||||
</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>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -18,7 +18,7 @@ function Screen() {
|
||||
</div>
|
||||
<div className="flex flex-col gap-4">
|
||||
<a
|
||||
href="/auth/connect"
|
||||
href="/new-account/connect"
|
||||
className="w-full p-4 rounded-xl hover:shadow-lg hover:ring-0 hover:bg-white dark:hover:bg-neutral-800 ring-1 ring-black/5 dark:ring-white/5"
|
||||
>
|
||||
<h3 className="mb-1 font-medium">Continue with Nostr Connect</h3>
|
||||
@@ -28,7 +28,7 @@ function Screen() {
|
||||
</p>
|
||||
</a>
|
||||
<a
|
||||
href="/auth/import"
|
||||
href="/new-account/import"
|
||||
className="w-full p-4 rounded-xl hover:shadow-lg hover:ring-0 hover:bg-white dark:hover:bg-neutral-800 ring-1 ring-black/5 dark:ring-white/5"
|
||||
>
|
||||
<h3 className="mb-1 font-medium">Continue with Secret Key</h3>
|
||||
@@ -38,7 +38,7 @@ function Screen() {
|
||||
</p>
|
||||
</a>
|
||||
<a
|
||||
href="/auth/watch"
|
||||
href="/new-account/watch"
|
||||
className="w-full p-4 rounded-xl hover:shadow-lg hover:ring-0 hover:bg-white dark:hover:bg-neutral-800 ring-1 ring-black/5 dark:ring-white/5"
|
||||
>
|
||||
<h3 className="mb-1 font-medium">
|
||||
|
||||
@@ -1,130 +0,0 @@
|
||||
import { commands } from "@/commands.gen";
|
||||
import { Frame, GoBack, Spinner } from "@/components";
|
||||
import { createLazyFileRoute } from "@tanstack/react-router";
|
||||
import { readText } from "@tauri-apps/plugin-clipboard-manager";
|
||||
import { message } from "@tauri-apps/plugin-dialog";
|
||||
import { useState, useTransition } from "react";
|
||||
|
||||
export const Route = createLazyFileRoute("/reset")({
|
||||
component: Screen,
|
||||
});
|
||||
|
||||
function Screen() {
|
||||
const navigate = Route.useNavigate();
|
||||
|
||||
const [key, setKey] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
const [isPending, startTransition] = useTransition();
|
||||
|
||||
const pasteFromClipboard = async () => {
|
||||
const val = await readText();
|
||||
setKey(val);
|
||||
};
|
||||
|
||||
const submit = () => {
|
||||
startTransition(async () => {
|
||||
if (!key.startsWith("nsec1")) {
|
||||
await message(
|
||||
"You need to enter a valid private key starts with nsec",
|
||||
{ title: "Reset Password", kind: "info" },
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
if (!password.length) {
|
||||
await message("You must set password to secure your key", {
|
||||
title: "Reset Password",
|
||||
kind: "info",
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
const res = await commands.resetPassword(key, password);
|
||||
|
||||
if (res.status === "ok") {
|
||||
navigate({ to: "/", replace: true });
|
||||
} else {
|
||||
await message(res.error, {
|
||||
title: "Import Private Ket",
|
||||
kind: "error",
|
||||
});
|
||||
return;
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
data-tauri-drag-region
|
||||
className="size-full flex items-center justify-center"
|
||||
>
|
||||
<div className="w-[320px] flex flex-col gap-8">
|
||||
<div className="flex flex-col gap-1 text-center">
|
||||
<h1 className="leading-tight text-xl font-semibold">
|
||||
Reset password
|
||||
</h1>
|
||||
</div>
|
||||
<div className="flex flex-col gap-3">
|
||||
<Frame
|
||||
className="flex flex-col gap-3 p-3 rounded-xl overflow-hidden"
|
||||
shadow
|
||||
>
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<label
|
||||
htmlFor="key"
|
||||
className="text-sm font-medium text-neutral-800 dark:text-neutral-200"
|
||||
>
|
||||
Private Key
|
||||
</label>
|
||||
<div className="relative">
|
||||
<input
|
||||
name="key"
|
||||
type="password"
|
||||
placeholder="nsec..."
|
||||
value={key}
|
||||
onChange={(e) => setKey(e.target.value)}
|
||||
className="pl-3 pr-12 rounded-lg w-full h-10 bg-transparent border border-neutral-200 dark:border-neutral-500 focus:border-blue-500 focus:outline-none placeholder:text-neutral-400 dark:placeholder:text-neutral-600"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => pasteFromClipboard()}
|
||||
className="absolute uppercase top-1/2 right-2 transform -translate-y-1/2 text-xs font-semibold text-blue-500"
|
||||
>
|
||||
Paste
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-1">
|
||||
<label
|
||||
htmlFor="password"
|
||||
className="text-sm font-medium text-neutral-800 dark:text-neutral-200"
|
||||
>
|
||||
Set a new password
|
||||
</label>
|
||||
<input
|
||||
name="password"
|
||||
type="password"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
className="px-3 rounded-lg h-10 bg-transparent border border-neutral-200 dark:border-neutral-500 focus:border-blue-500 focus:outline-none"
|
||||
/>
|
||||
</div>
|
||||
</Frame>
|
||||
<div className="flex flex-col items-center gap-1">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => submit()}
|
||||
disabled={isPending}
|
||||
className="inline-flex items-center justify-center w-full h-9 text-sm font-semibold text-white bg-blue-500 rounded-lg shrink-0 hover:bg-blue-600 disabled:opacity-50"
|
||||
>
|
||||
{isPending ? <Spinner /> : "Continue"}
|
||||
</button>
|
||||
<GoBack className="mt-2 w-full text-sm text-neutral-600 dark:text-neutral-400 inline-flex items-center justify-center">
|
||||
Go back to previous screen
|
||||
</GoBack>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -40,6 +40,22 @@ function Screen() {
|
||||
|
||||
const submit = () => {
|
||||
startTransition(async () => {
|
||||
const signer = await commands.hasSigner(account);
|
||||
|
||||
if (signer.status === "ok") {
|
||||
if (!signer.data) {
|
||||
const res = await commands.setSigner(account);
|
||||
|
||||
if (res.status === "error") {
|
||||
await message(res.error, { kind: "error" });
|
||||
return;
|
||||
}
|
||||
}
|
||||
} else {
|
||||
await message(signer.error, { kind: "error" });
|
||||
return;
|
||||
}
|
||||
|
||||
const res = await commands.setGroup(title, null, null, users);
|
||||
|
||||
if (res.status === "ok") {
|
||||
|
||||
@@ -52,9 +52,26 @@ function Screen() {
|
||||
|
||||
const submit = () => {
|
||||
startTransition(async () => {
|
||||
const signer = await commands.hasSigner(account);
|
||||
|
||||
if (signer.status === "ok") {
|
||||
if (!signer.data) {
|
||||
const res = await commands.setSigner(account);
|
||||
|
||||
if (res.status === "error") {
|
||||
await message(res.error, { kind: "error" });
|
||||
return;
|
||||
}
|
||||
}
|
||||
} else {
|
||||
await message(signer.error, { kind: "error" });
|
||||
return;
|
||||
}
|
||||
|
||||
const content = hashtags.map((tag) =>
|
||||
tag.toLowerCase().replace(" ", "-").replace("#", ""),
|
||||
);
|
||||
|
||||
const res = await commands.setInterest(title, null, null, content);
|
||||
|
||||
if (res.status === "ok") {
|
||||
|
||||
@@ -1,92 +0,0 @@
|
||||
import { commands } from "@/commands.gen";
|
||||
import { Spinner, User } from "@/components";
|
||||
import { Lock } from "@phosphor-icons/react";
|
||||
import { createLazyFileRoute } from "@tanstack/react-router";
|
||||
import { getCurrentWindow } from "@tauri-apps/api/window";
|
||||
import { message } from "@tauri-apps/plugin-dialog";
|
||||
import { useState, useTransition } from "react";
|
||||
|
||||
export const Route = createLazyFileRoute("/set-signer/$id")({
|
||||
component: Screen,
|
||||
});
|
||||
|
||||
function Screen() {
|
||||
const { id } = Route.useParams();
|
||||
|
||||
const [password, setPassword] = useState("");
|
||||
const [isPending, startTransition] = useTransition();
|
||||
|
||||
const unlock = () => {
|
||||
startTransition(async () => {
|
||||
if (!password.length) {
|
||||
await message("Password is required", { kind: "info" });
|
||||
return;
|
||||
}
|
||||
|
||||
const window = getCurrentWindow();
|
||||
const res = await commands.setSigner(id, password);
|
||||
|
||||
if (res.status === "ok") {
|
||||
await window.close();
|
||||
} else {
|
||||
await message(res.error, { kind: "error" });
|
||||
return;
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
data-tauri-drag-region
|
||||
className="size-full flex flex-col items-center justify-between gap-6 p-3"
|
||||
>
|
||||
<div
|
||||
data-tauri-drag-region
|
||||
className="flex-1 w-full px-10 flex flex-col gap-6 items-center justify-center"
|
||||
>
|
||||
<User.Provider pubkey={id}>
|
||||
<User.Root className="flex flex-col text-center gap-2">
|
||||
<User.Avatar className="size-12 rounded-full" />
|
||||
<User.Name className="font-semibold" />
|
||||
</User.Root>
|
||||
</User.Provider>
|
||||
<div className="w-full flex flex-col gap-2 items-center justify-center">
|
||||
<input
|
||||
name="password"
|
||||
type="password"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter") unlock();
|
||||
}}
|
||||
disabled={isPending}
|
||||
placeholder="Enter password to unlock"
|
||||
className="px-3 w-full rounded-lg h-10 text-center bg-transparent border border-black/10 dark:border-white/10 focus:border-blue-500 focus:outline-none placeholder:text-neutral-400"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => unlock()}
|
||||
disabled={isPending}
|
||||
className="shrink-0 h-9 w-full rounded-lg inline-flex items-center justify-center gap-2 bg-blue-500 hover:bg-blue-600 dark:hover:bg-blue-400 text-white text-sm font-medium"
|
||||
>
|
||||
{isPending ? (
|
||||
<Spinner className="size-4" />
|
||||
) : (
|
||||
<Lock className="size-4" weight="bold" />
|
||||
)}
|
||||
Unlock
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-auto">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => getCurrentWindow().close()}
|
||||
className="text-sm font-medium text-red-500"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
+28
-42
@@ -1,12 +1,11 @@
|
||||
import { commands } from "@/commands.gen";
|
||||
import { displayNpub } from "@/commons";
|
||||
import { User } from "@/components";
|
||||
import { LumeWindow } from "@/system";
|
||||
import type { Metadata } from "@/types";
|
||||
import { CaretDown } from "@phosphor-icons/react";
|
||||
import { createLazyFileRoute } from "@tanstack/react-router";
|
||||
import { Menu, MenuItem } from "@tauri-apps/api/menu";
|
||||
import { type Window, getCurrentWindow } from "@tauri-apps/api/window";
|
||||
import { getCurrentWindow } from "@tauri-apps/api/window";
|
||||
import { message } from "@tauri-apps/plugin-dialog";
|
||||
import { useCallback, useEffect, useState, useTransition } from "react";
|
||||
import CurrencyInput from "react-currency-input-field";
|
||||
@@ -20,8 +19,7 @@ export const Route = createLazyFileRoute("/zap/$id")({
|
||||
function Screen() {
|
||||
const { accounts, event } = Route.useRouteContext();
|
||||
|
||||
const [currentUser, setCurrentUser] = useState<string>(null);
|
||||
const [popup, setPopup] = useState<Window>(null);
|
||||
const [currentUser, setCurrentUser] = useState<string | null>(null);
|
||||
const [amount, setAmount] = useState(21);
|
||||
const [content, setContent] = useState<string>("");
|
||||
const [isCompleted, setIsCompleted] = useState(false);
|
||||
@@ -30,7 +28,7 @@ function Screen() {
|
||||
const showContextMenu = useCallback(async (e: React.MouseEvent) => {
|
||||
e.preventDefault();
|
||||
|
||||
const list = [];
|
||||
const list: Promise<MenuItem>[] = [];
|
||||
|
||||
for (const account of accounts) {
|
||||
const res = await commands.getProfile(account);
|
||||
@@ -38,7 +36,7 @@ function Screen() {
|
||||
|
||||
if (res.status === "ok") {
|
||||
const profile: Metadata = JSON.parse(res.data);
|
||||
name = profile.display_name ?? profile.name;
|
||||
name = profile.display_name ?? profile.name ?? "unknown";
|
||||
}
|
||||
|
||||
list.push(
|
||||
@@ -57,51 +55,39 @@ function Screen() {
|
||||
|
||||
const zap = () => {
|
||||
startTransition(async () => {
|
||||
const res = await commands.zapEvent(event.id, amount.toString(), content);
|
||||
if (!currentUser) return;
|
||||
|
||||
if (res.status === "ok") {
|
||||
setIsCompleted(true);
|
||||
// close current window
|
||||
await getCurrentWindow().close();
|
||||
} else {
|
||||
await message(res.error, { kind: "error" });
|
||||
return;
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const submit = async () => {
|
||||
if (currentUser) {
|
||||
const signer = await commands.hasSigner(currentUser);
|
||||
|
||||
if (signer.status === "ok") {
|
||||
if (!signer.data) {
|
||||
const newPopup = await LumeWindow.openPopup(
|
||||
`/set-signer/${currentUser}`,
|
||||
undefined,
|
||||
false,
|
||||
);
|
||||
const res = await commands.setSigner(currentUser);
|
||||
|
||||
setPopup(newPopup);
|
||||
return;
|
||||
if (res.status === "error") {
|
||||
await message(res.error, { kind: "error" });
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
zap();
|
||||
const res = await commands.zapEvent(
|
||||
event.id,
|
||||
amount.toString(),
|
||||
content,
|
||||
);
|
||||
|
||||
if (res.status === "ok") {
|
||||
setIsCompleted(true);
|
||||
// close current window
|
||||
await getCurrentWindow().close();
|
||||
} else {
|
||||
await message(res.error, { kind: "error" });
|
||||
return;
|
||||
}
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (!popup) return;
|
||||
|
||||
const unlisten = popup.listen("signer-updated", () => {
|
||||
zap();
|
||||
});
|
||||
|
||||
return () => {
|
||||
unlisten.then((f) => f());
|
||||
};
|
||||
}, [popup]);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (accounts?.length) {
|
||||
@@ -170,7 +156,7 @@ function Screen() {
|
||||
<div className="inline-flex items-center gap-3">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => submit()}
|
||||
onClick={() => zap()}
|
||||
className="inline-flex items-center justify-center w-full h-9 text-sm font-semibold rounded-lg bg-blue-500 text-white hover:bg-blue-600 dark:hover:bg-blue-400"
|
||||
>
|
||||
{isCompleted ? "Zapped" : isPending ? "Processing..." : "Zap"}
|
||||
|
||||
Reference in New Issue
Block a user