feat: supporting hash of github actions cache

packages/ui/package.json

@@ -17,9 +17,9 @@
 		"@radix-ui/react-dropdown-menu": "^2.0.6",
 		"@radix-ui/react-hover-card": "^1.0.7",
 		"@radix-ui/react-popover": "^1.0.7",
-		"@tanstack/react-query": "^5.17.15",
+		"@tanstack/react-query": "^5.17.19",
 		"framer-motion": "^10.18.0",
-		"jotai": "^2.6.2",
+		"jotai": "^2.6.3",
 		"minidenticons": "^4.2.0",
 		"nostr-tools": "~1.17.0",
 		"react": "^18.2.0",
@@ -28,18 +28,18 @@
 		"react-hotkeys-hook": "^4.4.4",
 		"react-router-dom": "^6.21.3",
 		"slate": "^0.101.5",
-		"slate-react": "^0.101.5",
+		"slate-react": "^0.101.6",
 		"sonner": "^1.3.1",
 		"uqr": "^0.1.2",
 		"use-debounce": "^10.0.0",
-		"virtua": "^0.20.5"
+		"virtua": "^0.21.1"
 	},
 	"devDependencies": {
 		"@lume/tailwindcss": "workspace:^",
 		"@lume/tsconfig": "workspace:^",
 		"@lume/types": "workspace:^",
 		"@types/react": "^18.2.48",
-		"tailwind-merge": "^2.2.0",
+		"tailwind-merge": "^2.2.1",
 		"tailwindcss": "^3.4.1",
 		"typescript": "^5.3.3"
 	}

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

packages/ui/src/navigation.tsx

@@ -2,11 +2,11 @@ import {
 	BellFilledIcon,
 	BellIcon,
 	ComposeFilledIcon,
-	ComposeIcon,
 	DepotFilledIcon,
 	DepotIcon,
 	HomeFilledIcon,
 	HomeIcon,
+	PlusIcon,
 	SearchFilledIcon,
 	SearchIcon,
 	SettingsFilledIcon,
@@ -44,11 +44,7 @@ export function Navigation() {
 								: "bg-black/5 hover:bg-blue-500 dark:bg-white/5 dark:hover:bg-blue-500",
 						)}
 					>
-						{isEditorOpen ? (
-							<ComposeFilledIcon className="size-5" />
-						) : (
-							<ComposeIcon className="size-5" />
-						)}
+						<PlusIcon className="size-5" />
 					</button>
 				</div>
 				<div className="my-5 w-2/3 mx-auto h-px bg-black/10 dark:bg-white/10" />

packages/ui/src/onboarding/interest.tsx

@@ -57,8 +57,8 @@ export function OnboardingInterestScreen() {
 			<div className="w-full flex-1 min-h-0 flex flex-col justify-between">
 				<div className="flex-1 min-h-0 overflow-y-auto px-8 py-8">
 					<div className="flex flex-col gap-8">
-						{TOPICS.map((topic, index) => (
-							<div key={topic.title + index} className="flex flex-col gap-4">
+						{TOPICS.map((topic) => (
+							<div key={topic.title} className="flex flex-col gap-4">
 								<div className="w-full flex items-center justify-between">
 									<div className="inline-flex items-center gap-2.5">
 										<img
@@ -79,6 +79,7 @@ export function OnboardingInterestScreen() {
 								<div className="flex flex-wrap items-center gap-3">
 									{topic.content.map((hashtag) => (
 										<button
+											key={hashtag}
 											type="button"
 											onClick={() => toggleHashtag(hashtag)}
 											className={cn(

packages/ui/src/onboarding/profile.tsx

@@ -35,19 +35,17 @@ export function OnboardingProfileScreen() {
 				navigate("/interests");
 			}
 
-			const oldProfile = await ark.getUserProfile();
-
-			const profile: NDKUserProfile = {
+			const prevProfile = await ark.getUserProfile();
+			const newProfile: NDKUserProfile = {
 				...data,
-				lud16: "", // temporary remove lud16
-				nip05: oldProfile?.nip05 || "",
+				nip05: prevProfile?.nip05 || "",
 				bio: data.about,
 				image: picture,
 				picture: picture,
 			};
 
 			const publish = await ark.createEvent({
-				content: JSON.stringify(profile),
+				content: JSON.stringify(newProfile),
 				kind: NDKKind.Metadata,
 				tags: [],
 			});
@@ -57,7 +55,7 @@ export function OnboardingProfileScreen() {
 				await storage.clearProfileCache(ark.account.pubkey);
 				await queryClient.setQueryData(
 					["user", ark.account.pubkey],
-					() => profile,
+					() => newProfile,
 				);
 
 				setLoading(false);

packages/ui/src/routes/event.tsx

@@ -11,7 +11,7 @@ export function EventRoute() {
 	return (
 		<div className="pb-5 overflow-y-auto">
 			<WindowVirtualizer>
-				<div className="h-11 bg-neutral-50 dark:bg-neutral-950 border-b flex items-center justify-start gap-2 px-3 border-neutral-100 dark:border-neutral-900 mb-3">
+				<div className="relative z-50 h-11 bg-neutral-50 dark:bg-neutral-950 border-b flex items-center justify-start gap-2 px-3 border-neutral-100 dark:border-neutral-900 mb-3">
 					<button
 						type="button"
 						className="size-9 hover:bg-neutral-100 hover:text-blue-500 dark:hover:bg-neutral-900 rounded-lg inline-flex items-center justify-center"

packages/ui/src/routes/suggest.tsx

@@ -114,11 +114,11 @@ export function SuggestRoute({ queryKey }: { queryKey: string[] }) {
 					</div>
 					<div className="flex flex-col divide-y divide-neutral-100 dark:divide-neutral-900">
 						{isLoading ? (
-							<div className="flex h-full w-full items-center justify-center">
+							<div className="flex h-44 w-full items-center justify-center">
 								<LoaderIcon className="size-4 animate-spin" />
 							</div>
 						) : isError ? (
-							<div className="flex h-full w-full items-center justify-center">
+							<div className="flex h-44 w-full items-center justify-center">
 								Error. Cannot get trending users
 							</div>
 						) : (
@@ -171,9 +171,9 @@ export function SuggestRoute({ queryKey }: { queryKey: string[] }) {
 							type="button"
 							onClick={submit}
 							disabled={loading}
-							className="inline-flex items-center justify-center gap-2 px-6 font-medium text-white transform bg-blue-500 rounded-full active:translate-y-1 w-36 h-11 hover:bg-blue-600 focus:outline-none disabled:cursor-not-allowed"
+							className="inline-flex items-center justify-center gap-2 px-6 font-medium shadow-xl shadow-neutral-500/50 text-white transform bg-blue-500 rounded-full active:translate-y-1 w-36 h-11 hover:bg-blue-600 focus:outline-none disabled:cursor-not-allowed"
 						>
-							Save
+							Save & Go Back
 						</button>
 					</div>
 				</div>

packages/ui/src/translateRegisterModal.tsx

@@ -68,9 +68,9 @@ export function TranslateRegisterModal({ setAPIKey }) {
 						<div className="flex-1 min-h-0 flex flex-col justify-between px-8 py-8">
 							<div className="flex flex-col gap-1.5">
 								<p className="text-sm text-neutral-500">
-									Translate Service is provided by{" "}
-									<span className="text-blue-500">nostr.wine</span>, you need to
-									deposit at least 2,500 sats to use translate 50,000 characters
+									Translation Service is provided by{" "}
+									<span className="text-blue-500">nostr.wine</span>. Prices
+									start at 2,500 sats for 50,000 characters of translated text.
 								</p>
 								<p className="text-sm text-neutral-500">
 									You can learn more about nostr.wine{" "}

packages/ui/src/tutorial/manageColumn.tsx

@@ -5,13 +5,9 @@ export function TutorialManageColumnScreen() {
 		<div className="px-5 h-full flex flex-col justify-between">
 			<div className="h-full min-h-0 flex flex-col gap-2">
 				<p>
-					Lume is also provide simple way to customize column after creation.
+					Once a new column is created, you can click on the title in its header
+					to find options to <span className="font-semibold">customize</span> it
 				</p>
-				<p>
-					<span className="font-semibold">To customize each column,</span> you
-					can go to header of each column
-				</p>
-				<p>Click to "Three Dots" icon</p>
 				<img
 					src="/tutorial-3.gif"
 					alt="tutorial-3"

packages/ui/src/tutorial/newColumn.tsx

@@ -4,10 +4,10 @@ export function TutorialNewColumnScreen() {
 	return (
 		<div className="px-5 h-full flex flex-col justify-between">
 			<div className="h-full min-h-0 flex flex-col gap-2">
-				<p>Lume is column based, each column is each experience</p>
+				<p>Lume is column based, each column is its own experience.</p>
 				<p>
-					<span className="font-semibold">To create new column,</span> you can
-					look into bottom right part of screen
+					<span className="font-semibold">To create a new column</span>, you can
+					click on the "Plus" icon at bottom right corner of this window.
 				</p>
 				<p>Click to "Plus" icon</p>
 				<img