From b0a443c002a43a5b0ef0ba1f38e71177e85a0043 Mon Sep 17 00:00:00 2001
From: reya <reya@lume.nu>
Date: Fri, 26 Jan 2024 14:15:25 +0700
Subject: [PATCH] feat: polish

---
 apps/desktop/src/routes/settings/backup.tsx   |  2 +-
 apps/desktop/src/routes/settings/profile.tsx  |  8 +++-
 packages/ark/src/components/column/header.tsx | 10 ++---
 .../src/components/column/interestModal.tsx   |  1 +
 .../ark/src/components/note/buttons/zap.tsx   | 21 ++++++----
 packages/ark/src/components/note/menu.tsx     | 25 +++++++++--
 .../components/note/primitives/childReply.tsx |  2 +-
 .../src/components/note/primitives/reply.tsx  |  2 +-
 .../src/components/note/primitives/repost.tsx |  2 +-
 .../src/components/note/primitives/text.tsx   |  2 +-
 packages/ark/src/provider.tsx                 | 17 +-------
 packages/icons/src/logout.tsx                 |  2 +-
 packages/icons/src/user.tsx                   | 41 ++++++++++---------
 packages/ui/src/account/active.tsx            | 20 ++++++---
 packages/ui/src/account/logout.tsx            |  4 +-
 packages/ui/src/editor/form.tsx               | 18 ++++----
 packages/ui/src/editor/utils.ts               | 17 ++++++--
 17 files changed, 114 insertions(+), 80 deletions(-)

diff --git a/apps/desktop/src/routes/settings/backup.tsx b/apps/desktop/src/routes/settings/backup.tsx
index 67ba9763..129d46bc 100644
--- a/apps/desktop/src/routes/settings/backup.tsx
+++ b/apps/desktop/src/routes/settings/backup.tsx
@@ -48,7 +48,7 @@ export function BackupSettingScreen() {
 						<button
 							type="button"
 							onClick={() => removePrivkey()}
-							className="mt-2 inline-flex h-11 w-full items-center justify-center gap-2 rounded-lg bg-red-200 px-6 font-medium text-red-500 hover:bg-red-500 hover:text-white focus:outline-none dark:hover:text-white"
+							className="mt-2 inline-flex h-11 w-full items-center justify-center gap-2 rounded-lg bg-red-200 dark:bg-red-800 px-6 font-medium text-red-500 hover:bg-red-500 hover:text-white focus:outline-none dark:hover:text-white"
 						>
 							Remove private key
 						</button>
diff --git a/apps/desktop/src/routes/settings/profile.tsx b/apps/desktop/src/routes/settings/profile.tsx
index 82b31d10..00b224c1 100644
--- a/apps/desktop/src/routes/settings/profile.tsx
+++ b/apps/desktop/src/routes/settings/profile.tsx
@@ -10,6 +10,7 @@ import { NDKKind, NDKUserProfile } from "@nostr-dev-kit/ndk";
 import { useQueryClient } from "@tanstack/react-query";
 import { useState } from "react";
 import { useForm } from "react-hook-form";
+import { toast } from "sonner";
 import { AvatarUpload } from "./components/avatarUpload";
 import { CoverUpload } from "./components/coverUpload";
 
@@ -92,6 +93,9 @@ export function ProfileSettingScreen() {
 				return content;
 			});
 
+			// notify
+			toast.success("You've updated profile successfully.");
+
 			// reset state
 			setPicture(null);
 			setBanner(null);
@@ -112,7 +116,7 @@ export function ProfileSettingScreen() {
 								className="h-full w-full rounded-t-xl object-cover"
 							/>
 						) : (
-							<div className="h-full w-full rounded-t-xl bg-neutral-200 dark:bg-neutral-900" />
+							<div className="h-full w-full rounded-t-xl bg-neutral-200 dark:bg-neutral-800" />
 						)}
 						<div className="absolute right-4 top-4">
 							<CoverUpload setBanner={setBanner} />
@@ -236,7 +240,7 @@ export function ProfileSettingScreen() {
 						<button
 							type="submit"
 							disabled={!isValid || loading}
-							className="mx-auto inline-flex h-10 w-24 transform items-center justify-center gap-1 rounded-lg bg-blue-500 font-medium text-white hover:bg-blue-600 focus:outline-none active:translate-y-1 disabled:pointer-events-none disabled:opacity-50"
+							className="inline-flex items-center justify-center w-24 pb-[2px] font-semibold border-t rounded-lg border-neutral-900 dark:border-neutral-800 h-9 bg-neutral-950 text-neutral-50 dark:bg-neutral-900 hover:bg-neutral-900 dark:hover:bg-neutral-800"
 						>
 							{loading ? (
 								<LoaderIcon className="size-4 animate-spin" />
diff --git a/packages/ark/src/components/column/header.tsx b/packages/ark/src/components/column/header.tsx
index c7334123..dbfd7173 100644
--- a/packages/ark/src/components/column/header.tsx
+++ b/packages/ark/src/components/column/header.tsx
@@ -46,11 +46,9 @@ export function ColumnHeader({
 		<DropdownMenu.Root>
 			<div className="flex items-center justify-center gap-2 px-3 w-full border-b h-11 shrink-0 border-neutral-100 dark:border-neutral-900">
 				<DropdownMenu.Trigger asChild>
-					<div className="inline-flex items-center gap-3">
-						<div className="inline-flex items-center gap-2">
-							<div className="text-[13px] font-medium">{title}</div>
-							<ChevronDownIcon className="size-5 mt-px" />
-						</div>
+					<div className="inline-flex items-center gap-1.5">
+						<div className="text-[13px] font-medium">{title}</div>
+						<ChevronDownIcon className="size-5" />
 					</div>
 				</DropdownMenu.Trigger>
 				<DropdownMenu.Portal>
@@ -96,7 +94,7 @@ export function ColumnHeader({
 								Move right
 							</button>
 						</DropdownMenu.Item>
-						<DropdownMenu.Separator className="h-px my-1 bg-white/10 dark:bg-black/10" />
+						<DropdownMenu.Separator className="h-px my-1 bg-black/10 dark:bg-white/10" />
 						<DropdownMenu.Item asChild>
 							<button
 								type="button"
diff --git a/packages/ark/src/components/column/interestModal.tsx b/packages/ark/src/components/column/interestModal.tsx
index e0a81691..66e9a583 100644
--- a/packages/ark/src/components/column/interestModal.tsx
+++ b/packages/ark/src/components/column/interestModal.tsx
@@ -110,6 +110,7 @@ export function InterestModal({
 												<div className="flex flex-wrap items-center gap-3">
 													{topic.content.map((hashtag) => (
 														<button
+															key={hashtag}
 															type="button"
 															onClick={() => toggleHashtag(hashtag)}
 															className={cn(
diff --git a/packages/ark/src/components/note/buttons/zap.tsx b/packages/ark/src/components/note/buttons/zap.tsx
index 3523cc24..90073c6e 100644
--- a/packages/ark/src/components/note/buttons/zap.tsx
+++ b/packages/ark/src/components/note/buttons/zap.tsx
@@ -131,10 +131,18 @@ export function NoteZap() {
 				</Tooltip.Root>
 			</Tooltip.Provider>
 			<Dialog.Portal>
-				<Dialog.Overlay className="fixed inset-0 z-50 bg-black/10 backdrop-blur-sm dark:bg-white/10" />
+				<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 items-center justify-center min-h-full">
+					<Dialog.Close className="absolute top-5 right-5 z-50">
+						<div className="flex flex-col gap-1.5">
+							<div className="inline-flex items-center justify-center size-10 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 w-full max-w-xl bg-white h-min rounded-xl dark:bg-black">
-						<div className="inline-flex items-center justify-between w-full px-5 py-3 shrink-0">
+						<div className="inline-flex items-center justify-center w-full px-5 py-3 shrink-0">
 							<div className="w-6" />
 							<Dialog.Title className="font-semibold text-center">
 								Send zap to{" "}
@@ -142,13 +150,10 @@ export function NoteZap() {
 									user?.displayName ||
 									displayNpub(event.pubkey, 16)}
 							</Dialog.Title>
-							<Dialog.Close className="inline-flex items-center justify-center w-6 h-6 rounded-md bg-neutral-100 dark:bg-neutral-900">
-								<CancelIcon className="w-4 h-4" />
-							</Dialog.Close>
 						</div>
 						{!invoice ? (
 							<div className="px-5 pb-5 overflow-x-hidden overflow-y-auto">
-								<div className="relative flex flex-col h-40">
+								<div className="relative flex flex-col h-36">
 									<div className="inline-flex items-center justify-center flex-1 h-full gap-1">
 										<CurrencyInput
 											placeholder="0"
@@ -213,13 +218,13 @@ export function NoteZap() {
 										autoCorrect="off"
 										autoCapitalize="off"
 										placeholder="Enter message (optional)"
-										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-900 dark:text-neutral-400"
+										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 items-center justify-center w-full px-4 font-medium text-white bg-blue-500 rounded-lg h-11 hover:bg-blue-600"
+											className="inline-flex items-center justify-center w-full pb-[2px] font-semibold border-t rounded-lg border-neutral-900 dark:border-neutral-800 h-9 bg-neutral-950 text-neutral-50 dark:bg-neutral-900 hover:bg-neutral-900 dark:hover:bg-neutral-800"
 										>
 											{isCompleted
 												? "Zapped"
diff --git a/packages/ark/src/components/note/menu.tsx b/packages/ark/src/components/note/menu.tsx
index e3c87655..5f7fd79f 100644
--- a/packages/ark/src/components/note/menu.tsx
+++ b/packages/ark/src/components/note/menu.tsx
@@ -1,4 +1,5 @@
 import { HorizontalDotsIcon } from "@lume/icons";
+import { COL_TYPES } from "@lume/utils";
 import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
 import { writeText } from "@tauri-apps/plugin-clipboard-manager";
 import { nip19 } from "nostr-tools";
@@ -6,12 +7,13 @@ import { type EventPointer } from "nostr-tools/lib/types/nip19";
 import { useState } from "react";
 import { Link, useNavigate } from "react-router-dom";
 import { toast } from "sonner";
+import { useColumnContext } from "../column/provider";
 import { useNoteContext } from "./provider";
 
 export function NoteMenu() {
 	const event = useNoteContext();
 	const navigate = useNavigate();
-
+	const { addColumn } = useColumnContext();
 	const [open, setOpen] = useState(false);
 
 	const copyID = async () => {
@@ -52,9 +54,9 @@ export function NoteMenu() {
 			<DropdownMenu.Trigger asChild>
 				<button
 					type="button"
-					className="inline-flex items-center justify-center w-6 h-6"
+					className="inline-flex items-center justify-center size-6"
 				>
-					<HorizontalDotsIcon className="w-4 h-4 text-neutral-800 hover:text-blue-500 dark:text-neutral-200" />
+					<HorizontalDotsIcon className="size-4 hover:text-blue-500 dark:text-neutral-200" />
 				</button>
 			</DropdownMenu.Trigger>
 			<DropdownMenu.Portal>
@@ -100,9 +102,24 @@ export function NoteMenu() {
 							to={`/users/${event.pubkey}`}
 							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"
 						>
-							View profile
+							View author
 						</Link>
 					</DropdownMenu.Item>
+					<DropdownMenu.Item asChild>
+						<button
+							type="button"
+							onClick={() =>
+								addColumn({
+									kind: COL_TYPES.user,
+									title: "User",
+									content: event.pubkey,
+								})
+							}
+							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"
+						>
+							Pin author
+						</button>
+					</DropdownMenu.Item>
 					<DropdownMenu.Separator className="h-px my-1 bg-black/10 dark:bg-white/10" />
 					<DropdownMenu.Item asChild>
 						<button
diff --git a/packages/ark/src/components/note/primitives/childReply.tsx b/packages/ark/src/components/note/primitives/childReply.tsx
index 850c0a6b..4ecfc9a8 100644
--- a/packages/ark/src/components/note/primitives/childReply.tsx
+++ b/packages/ark/src/components/note/primitives/childReply.tsx
@@ -8,7 +8,7 @@ export function ChildReply({
 		<Note.Provider event={event}>
 			<Note.Root className="py-2">
 				<div className="flex items-center justify-between h-14">
-					<Note.User className="flex-1" />
+					<Note.User className="flex-1 pr-2" />
 					<Note.Menu />
 				</div>
 				<Note.Content />
diff --git a/packages/ark/src/components/note/primitives/reply.tsx b/packages/ark/src/components/note/primitives/reply.tsx
index 0ff655db..a1b5e461 100644
--- a/packages/ark/src/components/note/primitives/reply.tsx
+++ b/packages/ark/src/components/note/primitives/reply.tsx
@@ -18,7 +18,7 @@ export function Reply({
 			<Note.Provider event={event}>
 				<Note.Root className="pt-2">
 					<div className="flex items-center justify-between h-14">
-						<Note.User className="flex-1 pr-1" />
+						<Note.User className="flex-1 pr-2" />
 						<Note.Menu />
 					</div>
 					<Note.Content />
diff --git a/packages/ark/src/components/note/primitives/repost.tsx b/packages/ark/src/components/note/primitives/repost.tsx
index 041e23cc..4d95a018 100644
--- a/packages/ark/src/components/note/primitives/repost.tsx
+++ b/packages/ark/src/components/note/primitives/repost.tsx
@@ -93,7 +93,7 @@ export function RepostNote({
 			<Note.Provider event={repostEvent}>
 				<div className="relative flex flex-col gap-2 px-3">
 					<div className="flex items-center justify-between">
-						<Note.User className="flex-1 pr-1" />
+						<Note.User className="flex-1 pr-2" />
 						<Note.Menu />
 					</div>
 					<Note.Content />
diff --git a/packages/ark/src/components/note/primitives/text.tsx b/packages/ark/src/components/note/primitives/text.tsx
index 75ae3ead..88b41db5 100644
--- a/packages/ark/src/components/note/primitives/text.tsx
+++ b/packages/ark/src/components/note/primitives/text.tsx
@@ -15,7 +15,7 @@ export function TextNote({
 				)}
 			>
 				<div className="flex items-center justify-between px-3 h-14">
-					<Note.User className="flex-1 pr-1" />
+					<Note.User className="flex-1 pr-2" />
 					<Note.Menu />
 				</div>
 				<Note.Thread className="mb-2" />
diff --git a/packages/ark/src/provider.tsx b/packages/ark/src/provider.tsx
index 0ef02734..24817ce9 100644
--- a/packages/ark/src/provider.tsx
+++ b/packages/ark/src/provider.tsx
@@ -87,31 +87,18 @@ export const LumeProvider = ({ children }: PropsWithChildren<object>) => {
 
 	async function initNDK() {
 		const explicitRelayUrls = normalizeRelayUrlSet([
+			"wss://nostr.mutinywallet.com/",
 			"wss://bostr.nokotaro.com/",
 		]);
 
-		// #TODO: user should config outbox relays
-		const outboxRelayUrls = normalizeRelayUrlSet(["wss://purplepag.es/"]);
-
-		// #TODO: user should config blacklist relays
-		// Skip connect depot tunnel url
-		const blacklistRelayUrls = normalizeRelayUrlSet(
-			storage.settings.tunnelUrl.length
-				? [storage.settings.tunnelUrl, "wss://brb.io/"]
-				: ["wss://brb.io/"],
-		);
-
 		const tauriCache = new NDKCacheAdapterTauri(storage);
 		const ndk = new NDK({
 			cacheAdapter: tauriCache,
 			explicitRelayUrls,
-			outboxRelayUrls,
-			blacklistRelayUrls,
 			enableOutboxModel: !storage.settings.lowPower,
 			autoConnectUserRelays: !storage.settings.lowPower,
 			autoFetchUserMutelist: !storage.settings.lowPower,
-			// clientName: "Lume",
-			// clientNip89: '',
+			clientName: "Lume",
 		});
 
 		// use tauri fetch
diff --git a/packages/icons/src/logout.tsx b/packages/icons/src/logout.tsx
index 0ea480b7..da92eab0 100644
--- a/packages/icons/src/logout.tsx
+++ b/packages/icons/src/logout.tsx
@@ -17,7 +17,7 @@ export function LogoutIcon(
 				strokeLinecap="round"
 				strokeLinejoin="round"
 				strokeWidth="2"
-				d="M18.189 9a15 15 0 012.654 2.556c.105.13.157.287.157.444m-2.811 3a14.998 14.998 0 002.654-2.556A.704.704 0 0021 12m0 0H8m5-7.472A6 6 0 003 9v6a6 6 0 0010 4.472"
+				d="M5.812 9a15.001 15.001 0 00-2.655 2.556A.703.703 0 003 12m2.812 3a15 15 0 01-2.655-2.556A.703.703 0 013 12m0 0h13m-5-7.472A6 6 0 0121 9v6a6 6 0 01-10 4.472"
 			/>
 		</svg>
 	);
diff --git a/packages/icons/src/user.tsx b/packages/icons/src/user.tsx
index 7bb9eb67..1295d333 100644
--- a/packages/icons/src/user.tsx
+++ b/packages/icons/src/user.tsx
@@ -1,21 +1,24 @@
-import { SVGProps } from 'react';
+import { SVGProps } from "react";
 
-export function UserIcon(props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>) {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="24"
-      height="24"
-      fill="none"
-      viewBox="0 0 24 24"
-      {...props}
-    >
-      <path
-        stroke="currentColor"
-        strokeLinejoin="round"
-        strokeWidth="1.5"
-        d="M5.857 18.916C7.171 16.996 9.332 15.75 12 15.75c2.668 0 4.83 1.247 6.143 3.166m-12.286 0A9.215 9.215 0 0012 21.25c2.358 0 4.51-.882 6.143-2.334m-12.286 0a9.25 9.25 0 1112.286 0M15.25 10a3.25 3.25 0 11-6.5 0 3.25 3.25 0 016.5 0z"
-      ></path>
-    </svg>
-  );
+export function UserIcon(
+	props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>,
+) {
+	return (
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			width="24"
+			height="24"
+			fill="none"
+			viewBox="0 0 24 24"
+			{...props}
+		>
+			<path
+				stroke="currentColor"
+				strokeLinecap="round"
+				strokeLinejoin="round"
+				strokeWidth="2"
+				d="M18.995 19.147C18.893 17.393 17.367 16 15.5 16h-7c-1.867 0-3.393 1.393-3.495 3.147m13.99 0A9.97 9.97 0 0022 12c0-5.523-4.477-10-10-10S2 6.477 2 12a9.97 9.97 0 003.005 7.147m13.99 0A9.967 9.967 0 0112 22a9.967 9.967 0 01-6.995-2.853M15 10a3 3 0 11-6 0 3 3 0 016 0z"
+			/>
+		</svg>
+	);
 }
diff --git a/packages/ui/src/account/active.tsx b/packages/ui/src/account/active.tsx
index d89559a6..30a4fb8b 100644
--- a/packages/ui/src/account/active.tsx
+++ b/packages/ui/src/account/active.tsx
@@ -1,5 +1,5 @@
 import { useArk, useProfile } from "@lume/ark";
-import { SettingsIcon } from "@lume/icons";
+import { SettingsIcon, UserIcon } from "@lume/icons";
 import { cn, useNetworkStatus } from "@lume/utils";
 import * as Avatar from "@radix-ui/react-avatar";
 import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
@@ -54,17 +54,27 @@ export function ActiveAccount() {
 				<DropdownMenu.Content
 					side="right"
 					sideOffset={5}
-					className="flex w-[200px] p-2 flex-col overflow-hidden rounded-2xl bg-black/70 dark:bg-white/10 backdrop-blur-xl focus:outline-none"
+					className="relative top-5 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>
 						<Link
-							to="/settings/"
-							className="inline-flex items-center gap-2 px-3 text-sm font-medium rounded-lg h-9 text-white/50 hover:bg-black/10 hover:text-white focus:outline-none dark:text-white/50 dark:hover:bg-white/10 dark:hover:text-white"
+							to="/settings/profile"
+							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"
 						>
-							<SettingsIcon className="size-5" />
+							<UserIcon className="size-4" />
+							Edit profile
+						</Link>
+					</DropdownMenu.Item>
+					<DropdownMenu.Item asChild>
+						<Link
+							to="/settings/"
+							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"
+						>
+							<SettingsIcon className="size-4" />
 							Settings
 						</Link>
 					</DropdownMenu.Item>
+					<DropdownMenu.Separator className="h-px my-1 bg-black/10 dark:bg-white/10" />
 					<Logout />
 				</DropdownMenu.Content>
 			</DropdownMenu.Portal>
diff --git a/packages/ui/src/account/logout.tsx b/packages/ui/src/account/logout.tsx
index 964e3daf..0b06132b 100644
--- a/packages/ui/src/account/logout.tsx
+++ b/packages/ui/src/account/logout.tsx
@@ -35,9 +35,9 @@ export function Logout() {
 			<AlertDialog.Trigger asChild>
 				<button
 					type="button"
-					className="inline-flex items-center gap-2 px-3 text-sm font-medium rounded-lg h-9 text-white/50 hover:bg-black/10 hover:text-white focus:outline-none dark:text-white/50 dark:hover:bg-white/10 dark:hover:text-white"
+					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"
 				>
-					<LogoutIcon className="size-5" />
+					<LogoutIcon className="size-4" />
 					Logout
 				</button>
 			</AlertDialog.Trigger>
diff --git a/packages/ui/src/editor/form.tsx b/packages/ui/src/editor/form.tsx
index 5233e9d7..91c4d272 100644
--- a/packages/ui/src/editor/form.tsx
+++ b/packages/ui/src/editor/form.tsx
@@ -106,7 +106,7 @@ const Image = ({ attributes, children, element }) => {
 	return (
 		<div {...attributes}>
 			{children}
-			<div contentEditable={false} className="relative">
+			<div contentEditable={false} className="relative my-2">
 				<img
 					src={element.url}
 					alt={element.url}
@@ -155,7 +155,7 @@ const Event = ({ attributes, element, children }) => {
 			<div
 				contentEditable={false}
 				onClick={() => Transforms.removeNodes(editor, { at: path })}
-				className="relative user-select-none"
+				className="relative user-select-none my-2"
 			>
 				<MentionNote
 					eventId={element.eventId.replace("nostr:", "")}
@@ -319,11 +319,9 @@ export function EditorForm() {
 					setTarget(null);
 				}}
 			>
-				<div className="flex items-center justify-between h-16 px-3 border-b shrink-0 border-neutral-100 dark:border-neutral-900 bg-neutral-50 dark:bg-neutral-950">
+				<div className="flex items-center justify-between h-16 pl-7 pr-3 border-b shrink-0 border-neutral-100 dark:border-neutral-900 bg-neutral-50 dark:bg-neutral-950">
 					<div>
-						<h3 className="font-semibold text-neutral-700 dark:text-neutral-500">
-							New Post
-						</h3>
+						<h3 className="font-medium">New Post</h3>
 					</div>
 					<div className="flex items-center">
 						<div className="inline-flex items-center gap-2">
@@ -346,7 +344,7 @@ export function EditorForm() {
 				<div className="py-6 h-full overflow-y-auto px-7">
 					<Editable
 						key={JSON.stringify(editorValue)}
-						autoFocus={false}
+						autoFocus={true}
 						autoCapitalize="none"
 						autoCorrect="none"
 						spellCheck={false}
@@ -361,9 +359,9 @@ export function EditorForm() {
 								className="top-[-9999px] left-[-9999px] absolute z-10 w-[250px] p-1 bg-white border border-neutral-50 dark:border-neutral-900 dark:bg-neutral-950 rounded-lg shadow-lg"
 							>
 								{filters.map((contact, i) => (
-									// biome-ignore lint/a11y/useKeyWithClickEvents: <explanation>
-									<div
+									<button
 										key={contact.npub}
+										type="button"
 										onClick={() => {
 											Transforms.select(editor, target);
 											insertMention(editor, contact);
@@ -379,7 +377,7 @@ export function EditorForm() {
 												</div>
 											</User.Root>
 										</User.Provider>
-									</div>
+									</button>
 								))}
 							</div>
 						</Portal>
diff --git a/packages/ui/src/editor/utils.ts b/packages/ui/src/editor/utils.ts
index 8c9f7164..66bf33ee 100644
--- a/packages/ui/src/editor/utils.ts
+++ b/packages/ui/src/editor/utils.ts
@@ -2,7 +2,7 @@ import { NDKCacheUserProfile } from "@lume/types";
 import { ReactNode } from "react";
 import ReactDOM from "react-dom";
 import { BaseEditor, Transforms } from "slate";
-import { type ReactEditor } from "slate-react";
+import { ReactEditor } from "slate-react";
 
 export const Portal = ({ children }: { children?: ReactNode }) => {
 	return typeof document === "object"
@@ -36,6 +36,8 @@ export const insertImage = (editor: ReactEditor | BaseEditor, url: string) => {
 		},
 	];
 
+	// @ts-ignore, idk
+	ReactEditor.focus(editor);
 	Transforms.insertNodes(editor, image);
 	Transforms.insertNodes(editor, extraText);
 };
@@ -44,15 +46,24 @@ export const insertMention = (
 	editor: ReactEditor | BaseEditor,
 	contact: NDKCacheUserProfile,
 ) => {
+	const text = { text: "" };
 	const mention = {
 		type: "mention",
 		npub: `nostr:${contact.npub}`,
 		name: contact.name || contact.displayName || "anon",
-		children: [{ text: "" }],
+		children: [text],
 	};
+	const extraText = [
+		{
+			type: "paragraph",
+			children: [text],
+		},
+	];
 
+	// @ts-ignore, idk
+	ReactEditor.focus(editor);
 	Transforms.insertNodes(editor, mention);
-	Transforms.move(editor);
+	Transforms.insertNodes(editor, extraText);
 };
 
 export const insertNostrEvent = (