wip: tired...

packages/ui/src/note/buttons/pin.tsx

@@ -0,0 +1,31 @@
+import { PinIcon } from "@lume/icons";
+import * as Tooltip from "@radix-ui/react-tooltip";
+import { useTranslation } from "react-i18next";
+import { useNoteContext } from "../provider";
+
+export function NotePin() {
+	const event = useNoteContext();
+	const { t } = useTranslation();
+
+	return (
+		<Tooltip.Provider>
+			<Tooltip.Root delayDuration={150}>
+				<Tooltip.Trigger asChild>
+					<button
+						type="button"
+						className="inline-flex items-center justify-center gap-2 pl-2 pr-3 text-sm font-medium rounded-full h-7 w-max bg-neutral-100 hover:bg-neutral-200 dark:hover:bg-neutral-800 dark:bg-neutral-900"
+					>
+						<PinIcon className="size-4" />
+						{t("note.buttons.pin")}
+					</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.buttons.pinTooltip")}
+						<Tooltip.Arrow className="fill-neutral-950 dark:fill-neutral-50" />
+					</Tooltip.Content>
+				</Tooltip.Portal>
+			</Tooltip.Root>
+		</Tooltip.Provider>
+	);
+}

packages/ui/src/note/buttons/reaction.tsx

@@ -0,0 +1,137 @@
+import { ReactionIcon } from "@lume/icons";
+import * as HoverCard from "@radix-ui/react-hover-card";
+import { useState } from "react";
+import { useNoteContext } from "../provider";
+
+const REACTIONS = [
+	{
+		content: "👏",
+		img: "/clapping_hands.png",
+	},
+	{
+		content: "🤪",
+		img: "/face_with_tongue.png",
+	},
+	{
+		content: "😮",
+		img: "/face_with_open_mouth.png",
+	},
+	{
+		content: "😢",
+		img: "/crying_face.png",
+	},
+	{
+		content: "🤡",
+		img: "/clown_face.png",
+	},
+];
+
+export function NoteReaction() {
+	const event = useNoteContext();
+
+	const [open, setOpen] = useState(false);
+	const [reaction, setReaction] = useState<string | null>(null);
+
+	const getReactionImage = (content: string) => {
+		const reaction: { img: string } = REACTIONS.find(
+			(el) => el.content === content,
+		);
+		return reaction.img;
+	};
+
+	const react = async (content: string) => {
+		try {
+			setReaction(content);
+
+			// react
+			await event.react(content);
+
+			setOpen(false);
+		} catch (e) {
+			console.error(e);
+		}
+	};
+
+	return (
+		<HoverCard.Root open={open} onOpenChange={setOpen}>
+			<HoverCard.Trigger asChild>
+				<button
+					type="button"
+					className="inline-flex items-center justify-center group h-7 w-7 text-neutral-600 dark:text-neutral-400"
+				>
+					{reaction ? (
+						<img
+							src={getReactionImage(reaction)}
+							alt={reaction}
+							className="size-6"
+						/>
+					) : (
+						<ReactionIcon className="size-5 group-hover:text-blue-500" />
+					)}
+				</button>
+			</HoverCard.Trigger>
+			<HoverCard.Portal>
+				<HoverCard.Content
+					className="select-none rounded-lg bg-neutral-950 dark:bg-neutral-50 px-1 py-1 text-sm will-change-[transform,opacity] data-[state=open]:data-[side=bottom]:animate-slideUpAndFade data-[state=open]:data-[side=left]:animate-slideRightAndFade data-[state=open]:data-[side=right]:animate-slideLeftAndFade data-[state=open]:data-[side=top]:animate-slideDownAndFade"
+					sideOffset={0}
+					side="top"
+				>
+					<div className="flex items-center gap-2">
+						<button
+							type="button"
+							onClick={() => react("👏")}
+							className="inline-flex items-center justify-center w-8 h-8 rounded-md backdrop-blur-xl hover:bg-white/10 dark:hover:bg-black/10"
+						>
+							<img
+								src="/clapping_hands.png"
+								alt="Clapping Hands"
+								className="size-6"
+							/>
+						</button>
+						<button
+							type="button"
+							onClick={() => react("🤪")}
+							className="inline-flex items-center justify-center w-8 h-8 rounded-md backdrop-blur-xl hover:bg-white/10 dark:hover:bg-black/10"
+						>
+							<img
+								src="/face_with_tongue.png"
+								alt="Face with Tongue"
+								className="size-6"
+							/>
+						</button>
+						<button
+							type="button"
+							onClick={() => react("😮")}
+							className="inline-flex items-center justify-center w-8 h-8 rounded-md backdrop-blur-xl hover:bg-white/10 dark:hover:bg-black/10"
+						>
+							<img
+								src="/face_with_open_mouth.png"
+								alt="Face with Open Mouth"
+								className="size-6"
+							/>
+						</button>
+						<button
+							type="button"
+							onClick={() => react("😢")}
+							className="inline-flex items-center justify-center w-8 h-8 rounded-md backdrop-blur-xl hover:bg-white/10 dark:hover:bg-black/10"
+						>
+							<img
+								src="/crying_face.png"
+								alt="Crying Face"
+								className="size-6"
+							/>
+						</button>
+						<button
+							type="button"
+							onClick={() => react("🤡")}
+							className="inline-flex items-center justify-center w-8 h-8 rounded-md backdrop-blur-xl hover:bg-white/10 dark:hover:bg-black/10"
+						>
+							<img src="/clown_face.png" alt="Clown Face" className="size-6" />
+						</button>
+					</div>
+					<HoverCard.Arrow className="fill-neutral-950 dark:fill-neutral-50" />
+				</HoverCard.Content>
+			</HoverCard.Portal>
+		</HoverCard.Root>
+	);
+}

packages/ui/src/note/buttons/reply.tsx

@@ -0,0 +1,34 @@
+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 { 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>
+	);
+}

packages/ui/src/note/buttons/repost.tsx

@@ -0,0 +1,117 @@
+import { LoaderIcon, ReplyIcon, RepostIcon } from "@lume/icons";
+import { cn, editorAtom, editorValueAtom } from "@lume/utils";
+import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
+import * as Tooltip from "@radix-ui/react-tooltip";
+import { useSetAtom } from "jotai";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { toast } from "sonner";
+import { useNoteContext } from "../provider";
+
+export function NoteRepost() {
+	const event = useNoteContext();
+	const setEditorValue = useSetAtom(editorValueAtom);
+	const setIsEditorOpen = useSetAtom(editorAtom);
+
+	const [t] = useTranslation();
+	const [loading, setLoading] = useState(false);
+	const [isRepost, setIsRepost] = useState(false);
+	const [open, setOpen] = useState(false);
+
+	const repost = async () => {
+		try {
+			setLoading(true);
+
+			// repost
+			await event.repost(true);
+
+			// update state
+			setLoading(false);
+			setIsRepost(true);
+
+			// notify
+			toast.success("You've reposted this post successfully");
+		} catch (e) {
+			setLoading(false);
+			toast.error("Repost failed, try again later");
+		}
+	};
+
+	const quote = () => {
+		setEditorValue([
+			{
+				type: "paragraph",
+				children: [{ text: "" }],
+			},
+			{
+				type: "event",
+				// @ts-expect-error, useless
+				eventId: `nostr:${nip19.noteEncode(event.id)}`,
+				children: [{ text: "" }],
+			},
+			{
+				type: "paragraph",
+				children: [{ text: "" }],
+			},
+		]);
+		setIsEditorOpen(true);
+	};
+
+	return (
+		<DropdownMenu.Root open={open} onOpenChange={setOpen}>
+			<Tooltip.Provider>
+				<Tooltip.Root delayDuration={150}>
+					<DropdownMenu.Trigger asChild>
+						<Tooltip.Trigger asChild>
+							<button
+								type="button"
+								className="inline-flex items-center justify-center group h-7 w-7 text-neutral-600 dark:text-neutral-400"
+							>
+								{loading ? (
+									<LoaderIcon className="size-4 animate-spin" />
+								) : (
+									<RepostIcon
+										className={cn(
+											"size-5 group-hover:text-blue-600",
+											isRepost ? "text-blue-500" : "",
+										)}
+									/>
+								)}
+							</button>
+						</Tooltip.Trigger>
+					</DropdownMenu.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.buttons.repost")}
+							<Tooltip.Arrow className="fill-neutral-950 dark:fill-neutral-50" />
+						</Tooltip.Content>
+					</Tooltip.Portal>
+				</Tooltip.Root>
+			</Tooltip.Provider>
+			<DropdownMenu.Portal>
+				<DropdownMenu.Content className="flex w-[200px] p-2 flex-col overflow-hidden rounded-2xl bg-white/50 dark:bg-black/50 ring-1 ring-black/10 dark:ring-white/10 backdrop-blur-2xl focus:outline-none">
+					<DropdownMenu.Item asChild>
+						<button
+							type="button"
+							onClick={repost}
+							className="inline-flex items-center gap-3 px-3 text-sm font-medium rounded-lg h-9 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"
+						>
+							<RepostIcon className="size-4" />
+							{t("note.buttons.repost")}
+						</button>
+					</DropdownMenu.Item>
+					<DropdownMenu.Item asChild>
+						<button
+							type="button"
+							onClick={quote}
+							className="inline-flex items-center gap-3 px-3 text-sm font-medium rounded-lg h-9 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"
+						>
+							<ReplyIcon className="size-4" />
+							{t("note.buttons.quote")}
+						</button>
+					</DropdownMenu.Item>
+				</DropdownMenu.Content>
+			</DropdownMenu.Portal>
+		</DropdownMenu.Root>
+	);
+}

packages/ui/src/note/buttons/zap.tsx

@@ -0,0 +1,260 @@
+import { webln } from "@getalby/sdk";
+import { type SendPaymentResponse } from "@getalby/sdk/dist/types";
+import { CancelIcon, LoaderIcon, ZapIcon } from "@lume/icons";
+import { useStorage } from "@lume/storage";
+import { cn, compactNumber, displayNpub } from "@lume/utils";
+import * as Dialog from "@radix-ui/react-dialog";
+import * as Tooltip from "@radix-ui/react-tooltip";
+import { QRCodeSVG } from "qrcode.react";
+import { useState } from "react";
+import CurrencyInput from "react-currency-input-field";
+import { useTranslation } from "react-i18next";
+import { toast } from "sonner";
+import { useNoteContext } from "../provider";
+import { useProfile } from "@lume/ark";
+
+export function NoteZap() {
+  const storage = useStorage();
+  const event = useNoteContext();
+
+  const [amount, setAmount] = useState<string>("21");
+  const [zapMessage, setZapMessage] = useState<string>("");
+  const [isOpen, setIsOpen] = useState(false);
+  const [isCompleted, setIsCompleted] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+  const [invoice, setInvoice] = useState<string>(null);
+
+  const { t } = useTranslation();
+  const { user } = useProfile(event.pubkey);
+
+  const createZapRequest = async (instant?: boolean) => {
+    if (instant && !storage.nwc) return;
+
+    let nwc: webln.NostrWebLNProvider = undefined;
+
+    try {
+      // start loading
+      setIsLoading(true);
+
+      const zapAmount = parseInt(amount) * 1000;
+      const res = await event.zap(zapAmount, zapMessage);
+
+      if (!storage.nwc) return setInvoice(res);
+
+      // user connect nwc
+      nwc = new webln.NostrWebLNProvider({
+        nostrWalletConnectUrl: storage.nwc,
+      });
+      await nwc.enable();
+
+      // send payment via nwc
+      const send: SendPaymentResponse = await nwc.sendPayment(res);
+
+      if (send) {
+        toast.success(
+          `You've zapped ${compactNumber.format(send.amount)} sats to ${
+            user?.name || user?.displayName || "anon"
+          }`,
+        );
+
+        // reset after 1.5 secs
+        if (!instant) {
+          const timeout = setTimeout(() => setIsCompleted(false), 1500);
+          clearTimeout(timeout);
+        }
+      }
+
+      // eose
+      nwc.close();
+
+      // update state
+      setIsCompleted(true);
+      setIsLoading(false);
+    } catch (e) {
+      nwc?.close();
+      setIsLoading(false);
+      toast.error(String(e));
+    }
+  };
+
+  if (storage.settings.instantZap) {
+    return (
+      <Tooltip.Provider>
+        <Tooltip.Root delayDuration={150}>
+          <Tooltip.Trigger asChild>
+            <button
+              type="button"
+              onClick={() => createZapRequest(true)}
+              className="group inline-flex size-7 items-center justify-center text-neutral-600 dark:text-neutral-400"
+            >
+              {isLoading ? (
+                <LoaderIcon className="size-4 animate-spin" />
+              ) : (
+                <ZapIcon
+                  className={cn(
+                    "size-5 group-hover:text-blue-500",
+                    isCompleted ? "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.zap.tooltip")}
+              <Tooltip.Arrow className="fill-neutral-950 dark:fill-neutral-50" />
+            </Tooltip.Content>
+          </Tooltip.Portal>
+        </Tooltip.Root>
+      </Tooltip.Provider>
+    );
+  }
+
+  return (
+    <Dialog.Root open={isOpen} onOpenChange={setIsOpen}>
+      <Tooltip.Provider>
+        <Tooltip.Root delayDuration={150}>
+          <Dialog.Trigger asChild>
+            <Tooltip.Trigger asChild>
+              <button
+                type="button"
+                className="group inline-flex size-7 items-center justify-center text-neutral-600 dark:text-neutral-400"
+              >
+                <ZapIcon className="size-5 group-hover:text-blue-500" />
+              </button>
+            </Tooltip.Trigger>
+          </Dialog.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.zap.tooltip")}
+              <Tooltip.Arrow className="fill-neutral-950 dark:fill-neutral-50" />
+            </Tooltip.Content>
+          </Tooltip.Portal>
+        </Tooltip.Root>
+      </Tooltip.Provider>
+      <Dialog.Portal>
+        <Dialog.Overlay className="fixed inset-0 z-50 bg-black/20 backdrop-blur-sm dark:bg-white/20" />
+        <Dialog.Content className="fixed inset-0 z-50 flex min-h-full items-center justify-center">
+          <Dialog.Close className="absolute right-5 top-5 z-50">
+            <div className="flex flex-col gap-1.5">
+              <div className="inline-flex size-10 items-center justify-center rounded-lg bg-white dark:bg-black">
+                <CancelIcon className="size-5" />
+              </div>
+              <span className="text-sm font-medium">Esc</span>
+            </div>
+          </Dialog.Close>
+          <div className="relative h-min w-full max-w-xl rounded-xl bg-white dark:bg-black">
+            <div className="inline-flex w-full shrink-0 items-center justify-center px-5 py-3">
+              <div className="w-6" />
+              <Dialog.Title className="text-center font-semibold">
+                {t("note.zap.modalTitle")}{" "}
+                {user?.name ||
+                  user?.displayName ||
+                  displayNpub(event.pubkey, 16)}
+              </Dialog.Title>
+            </div>
+            {!invoice ? (
+              <div className="overflow-y-auto overflow-x-hidden px-5 pb-5">
+                <div className="relative flex h-36 flex-col">
+                  <div className="inline-flex h-full flex-1 items-center justify-center gap-1">
+                    <CurrencyInput
+                      placeholder="0"
+                      defaultValue={"21"}
+                      value={amount}
+                      decimalsLimit={2}
+                      min={0} // 0 sats
+                      max={10000} // 1M sats
+                      maxLength={10000} // 1M sats
+                      onValueChange={(value) => setAmount(value)}
+                      className="w-full flex-1 border-none bg-transparent text-right text-4xl font-semibold placeholder:text-neutral-600 focus:outline-none focus:ring-0 dark:text-neutral-400"
+                    />
+                    <span className="w-full flex-1 text-left text-4xl font-semibold text-neutral-500 dark:text-neutral-400">
+                      sats
+                    </span>
+                  </div>
+                  <div className="inline-flex items-center justify-center gap-2">
+                    <button
+                      type="button"
+                      onClick={() => setAmount("69")}
+                      className="w-max rounded-full bg-neutral-100 px-2.5 py-1 text-sm font-medium hover:bg-neutral-200 dark:bg-neutral-900 dark:hover:bg-neutral-800"
+                    >
+                      69 sats
+                    </button>
+                    <button
+                      type="button"
+                      onClick={() => setAmount("100")}
+                      className="w-max rounded-full bg-neutral-100 px-2.5 py-1 text-sm font-medium hover:bg-neutral-200 dark:bg-neutral-900 dark:hover:bg-neutral-800"
+                    >
+                      100 sats
+                    </button>
+                    <button
+                      type="button"
+                      onClick={() => setAmount("200")}
+                      className="w-max rounded-full bg-neutral-100 px-2.5 py-1 text-sm font-medium hover:bg-neutral-200 dark:bg-neutral-900 dark:hover:bg-neutral-800"
+                    >
+                      200 sats
+                    </button>
+                    <button
+                      type="button"
+                      onClick={() => setAmount("500")}
+                      className="w-max rounded-full bg-neutral-100 px-2.5 py-1 text-sm font-medium hover:bg-neutral-200 dark:bg-neutral-900 dark:hover:bg-neutral-800"
+                    >
+                      500 sats
+                    </button>
+                    <button
+                      type="button"
+                      onClick={() => setAmount("1000")}
+                      className="w-max rounded-full bg-neutral-100 px-2.5 py-1 text-sm font-medium hover:bg-neutral-200 dark:bg-neutral-900 dark:hover:bg-neutral-800"
+                    >
+                      1K sats
+                    </button>
+                  </div>
+                </div>
+                <div className="mt-4 flex w-full flex-col gap-2">
+                  <input
+                    name="zapMessage"
+                    value={zapMessage}
+                    onChange={(e) => setZapMessage(e.target.value)}
+                    spellCheck={false}
+                    autoComplete="off"
+                    autoCorrect="off"
+                    autoCapitalize="off"
+                    placeholder={t("note.zap.messagePlaceholder")}
+                    className="w-full resize-none rounded-lg border-transparent bg-neutral-100 px-3 py-3 !outline-none placeholder:text-neutral-600 focus:border-blue-500 focus:ring focus:ring-blue-200 dark:bg-neutral-950 dark:text-neutral-400"
+                  />
+                  <div className="flex flex-col gap-2">
+                    <button
+                      type="button"
+                      onClick={() => createZapRequest()}
+                      className="inline-flex h-9 w-full items-center justify-center rounded-lg border-t border-neutral-900 bg-neutral-950 pb-[2px] font-semibold text-neutral-50 hover:bg-neutral-900 dark:border-neutral-800 dark:bg-neutral-900 dark:hover:bg-neutral-800"
+                    >
+                      {isCompleted
+                        ? t("note.zap.buttonFinish")
+                        : isLoading
+                          ? t("note.zap.buttonLoading")
+                          : t("note.zap.zap")}
+                    </button>
+                  </div>
+                </div>
+              </div>
+            ) : (
+              <div className="flex flex-col items-center justify-center gap-4 px-5 pb-5">
+                <div className="rounded-lg bg-neutral-100 p-3 dark:bg-neutral-900">
+                  <QRCodeSVG value={invoice} size={256} />
+                </div>
+                <div className="flex flex-col items-center gap-1">
+                  <h3 className="text-lg font-medium">
+                    {t("note.zap.invoiceButton")}
+                  </h3>
+                  <span className="text-center text-sm text-neutral-600 dark:text-neutral-400">
+                    {t("note.zap.invoiceFooter")}
+                  </span>
+                </div>
+              </div>
+            )}
+          </div>
+        </Dialog.Content>
+      </Dialog.Portal>
+    </Dialog.Root>
+  );
+}