feat: polish

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>

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>

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>

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 = (