feat: redesign navigation bar

packages/ui/src/account/active.tsx

@@ -17,33 +17,30 @@ export function ActiveAccount() {
 	)}`;
 
 	return (
-		<div className="flex flex-col gap-1 rounded-xl bg-black/10 p-1 ring-1 ring-transparent hover:bg-black/20 hover:ring-blue-500 dark:bg-white/10 dark:hover:bg-white/20">
-			<Link to="/settings/" className="relative inline-block">
-				<Avatar.Root>
-					<Avatar.Image
-						src={user?.picture || user?.image}
-						alt={storage.account.pubkey}
-						loading="lazy"
-						decoding="async"
-						style={{ contentVisibility: "auto" }}
-						className="aspect-square h-auto w-full rounded-lg object-cover"
-					/>
-					<Avatar.Fallback delayMs={150}>
-						<img
-							src={svgURI}
-							alt={storage.account.pubkey}
-							className="aspect-square h-auto w-full rounded-lg bg-black dark:bg-white"
-						/>
-					</Avatar.Fallback>
-				</Avatar.Root>
-				<span
-					className={twMerge(
-						"absolute bottom-0 right-0 block h-2 w-2 rounded-full ring-2 ring-neutral-100 dark:ring-neutral-900",
-						isOnline ? "bg-teal-500" : "bg-red-500",
-					)}
+		<Link to="/settings/" className="relative inline-block">
+			<Avatar.Root>
+				<Avatar.Image
+					src={user?.picture || user?.image}
+					alt={storage.account.pubkey}
+					loading="lazy"
+					decoding="async"
+					style={{ contentVisibility: "auto" }}
+					className="aspect-square h-auto w-full rounded-xl object-cover"
 				/>
-			</Link>
-			<AccountMoreActions />
-		</div>
+				<Avatar.Fallback delayMs={150}>
+					<img
+						src={svgURI}
+						alt={storage.account.pubkey}
+						className="aspect-square h-auto w-full rounded-xl bg-black dark:bg-white"
+					/>
+				</Avatar.Fallback>
+			</Avatar.Root>
+			<span
+				className={twMerge(
+					"absolute bottom-0 right-0 block h-2 w-2 rounded-full ring-2 ring-neutral-100 dark:ring-neutral-900",
+					isOnline ? "bg-teal-500" : "bg-red-500",
+				)}
+			/>
+		</Link>
 	);
 }

packages/ui/src/editor/form.tsx

@@ -1,7 +1,7 @@
-import { MentionNote, useArk, useStorage } from "@lume/ark";
-import { TrashIcon } from "@lume/icons";
+import { MentionNote, useArk, useColumnContext, useStorage } from "@lume/ark";
+import { LoaderIcon, TrashIcon } from "@lume/icons";
 import { NDKCacheUserProfile } from "@lume/types";
-import { cn, editorValueAtom } from "@lume/utils";
+import { COL_TYPES, cn, editorValueAtom } from "@lume/utils";
 import { NDKEvent, NDKKind } from "@nostr-dev-kit/ndk";
 import { useAtom } from "jotai";
 import { useEffect, useRef, useState } from "react";
@@ -195,10 +195,13 @@ export function EditorForm() {
 	const [target, setTarget] = useState<Range | undefined>();
 	const [index, setIndex] = useState(0);
 	const [search, setSearch] = useState("");
+	const [loading, setLoading] = useState(false);
 	const [editor] = useState(() =>
 		withMentions(withNostrEvent(withImages(withReact(createEditor())))),
 	);
 
+	const { addColumn } = useColumnContext();
+
 	const filters = contacts
 		?.filter((c) => c?.name?.toLowerCase().startsWith(search.toLowerCase()))
 		?.slice(0, 10);
@@ -234,19 +237,35 @@ export function EditorForm() {
 	};
 
 	const submit = async () => {
-		const event = new NDKEvent(ark.ndk);
-		event.kind = NDKKind.Text;
-		event.content = serialize(editor.children);
+		try {
+			setLoading(true);
 
-		const publish = await event.publish();
+			const event = new NDKEvent(ark.ndk);
+			event.kind = NDKKind.Text;
+			event.content = serialize(editor.children);
 
-		if (!publish) toast.error("Failed to publish event, try again later.");
+			const publish = await event.publish();
 
-		toast.success(
-			`Event has been published successfully to ${publish.size} relays.`,
-		);
+			if (publish) {
+				toast.success(
+					`Event has been published successfully to ${publish.size} relays.`,
+				);
 
-		reset();
+				// add current post as column thread
+				addColumn({
+					kind: COL_TYPES.thread,
+					content: event.id,
+					title: "Thread",
+				});
+
+				setLoading(false);
+
+				return reset();
+			}
+		} catch (e) {
+			setLoading(false);
+			toast.error(String(e));
+		}
 	};
 
 	useEffect(() => {
@@ -300,7 +319,31 @@ export function EditorForm() {
 					setTarget(null);
 				}}
 			>
-				<div className="py-6 overflow-y-auto px-7">
+				<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>
+						<h3 className="font-semibold text-neutral-700 dark:text-neutral-500">
+							New Post
+						</h3>
+					</div>
+					<div className="flex items-center">
+						<div className="inline-flex items-center gap-2">
+							<EditorAddMedia />
+						</div>
+						<div className="w-px h-6 mx-3 bg-neutral-200 dark:bg-neutral-800" />
+						<button
+							type="button"
+							onClick={submit}
+							className="inline-flex items-center justify-center w-20 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" />
+							) : (
+								"Post"
+							)}
+						</button>
+					</div>
+				</div>
+				<div className="py-6 h-full overflow-y-auto px-7">
 					<Editable
 						key={JSON.stringify(editorValue)}
 						autoFocus={false}
@@ -335,22 +378,6 @@ export function EditorForm() {
 						</Portal>
 					)}
 				</div>
-				<div className="flex items-center justify-between h-16 px-3 border-t shrink-0 border-neutral-100 dark:border-neutral-900 bg-neutral-50 dark:bg-neutral-950">
-					<div />
-					<div className="flex items-center">
-						<div className="inline-flex items-center gap-2">
-							<EditorAddMedia />
-						</div>
-						<div className="w-px h-6 mx-3 bg-neutral-200 dark:bg-neutral-800" />
-						<button
-							type="button"
-							onClick={submit}
-							className="inline-flex items-center justify-center w-20 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"
-						>
-							Post
-						</button>
-					</div>
-				</div>
 			</Slate>
 		</div>
 	);

packages/ui/src/layouts/home.tsx

@@ -1,14 +1,13 @@
-import { ColumnProvider } from "@lume/ark";
 import { Outlet } from "react-router-dom";
 import { OnboardingModal } from "../onboarding/modal";
 
 export function HomeLayout() {
 	return (
-		<ColumnProvider>
+		<>
 			<OnboardingModal />
 			<div className="h-full w-full rounded-xl overflow-hidden bg-white shadow-[rgba(50,_50,_105,_0.15)_0px_2px_5px_0px,_rgba(0,_0,_0,_0.05)_0px_1px_1px_0px] dark:bg-black dark:shadow-[inset_0_0_0.5px_1px_hsla(0,0%,100%,0.075),0_0_0_1px_hsla(0,0%,0%,0.05),0_0.3px_0.4px_hsla(0,0%,0%,0.02),0_0.9px_1.5px_hsla(0,0%,0%,0.045),0_3.5px_6px_hsla(0,0%,0%,0.09)]">
 				<Outlet />
 			</div>
-		</ColumnProvider>
+		</>
 	);
 }

packages/ui/src/navigation.tsx

@@ -1,34 +1,52 @@
 import {
+	ComposeFilledIcon,
+	ComposeIcon,
 	DepotFilledIcon,
 	DepotIcon,
 	HomeFilledIcon,
 	HomeIcon,
 	NwcFilledIcon,
 	NwcIcon,
-	PlusIcon,
 	RelayFilledIcon,
 	RelayIcon,
+	SettingsFilledIcon,
+	SettingsIcon,
 } from "@lume/icons";
 import { cn, editorAtom } from "@lume/utils";
-import { useSetAtom } from "jotai";
+import { useAtom } from "jotai";
 import { useHotkeys } from "react-hotkeys-hook";
 import { NavLink } from "react-router-dom";
 import { ActiveAccount } from "./account/active";
 
 export function Navigation() {
-	const setIsEditorOpen = useSetAtom(editorAtom);
+	const [isEditorOpen, setIsEditorOpen] = useAtom(editorAtom);
 	useHotkeys("meta+n", () => setIsEditorOpen((state) => !state), []);
 
 	return (
 		<div className="flex flex-col justify-between w-20 h-full px-4 py-3 shrink-0">
-			<div className="flex flex-col flex-1 gap-5">
-				<NavLink
-					to="/"
-					preventScrollReset={true}
-					className="inline-flex flex-col items-center justify-center"
-				>
-					{({ isActive }) => (
-						<>
+			<div className="flex flex-col flex-1">
+				<div className="flex flex-col gap-3">
+					<ActiveAccount />
+					<button
+						type="button"
+						onClick={() => setIsEditorOpen((prev) => !prev)}
+						className="flex items-center justify-center h-auto w-full text-black aspect-square rounded-xl bg-black/5 hover:bg-blue-500 hover:text-white dark:bg-white/5 dark:text-white dark:hover:bg-blue-500"
+					>
+						{isEditorOpen ? (
+							<ComposeFilledIcon className="size-5" />
+						) : (
+							<ComposeIcon className="size-5" />
+						)}
+					</button>
+				</div>
+				<div className="my-5 w-2/3 mx-auto h-px bg-black/10 dark:bg-white/10" />
+				<div className="flex flex-col gap-2">
+					<NavLink
+						to="/"
+						preventScrollReset={true}
+						className="inline-flex flex-col items-center justify-center"
+					>
+						{({ isActive }) => (
 							<div
 								className={cn(
 									"inline-flex aspect-square h-auto w-full items-center justify-center rounded-xl",
@@ -38,31 +56,19 @@ export function Navigation() {
 								)}
 							>
 								{isActive ? (
-									<HomeFilledIcon className="text-black size-6 dark:text-white" />
+									<HomeFilledIcon className="size-6" />
 								) : (
 									<HomeIcon className="size-6" />
 								)}
 							</div>
-							<div
-								className={cn(
-									"text-sm",
-									isActive
-										? "font-semibold text-black dark:text-white"
-										: "font-medium text-black/50 dark:text-white/50",
-								)}
-							>
-								Home
-							</div>
-						</>
-					)}
-				</NavLink>
-				<NavLink
-					to="/relays"
-					preventScrollReset={true}
-					className="inline-flex flex-col items-center justify-center"
-				>
-					{({ isActive }) => (
-						<>
+						)}
+					</NavLink>
+					<NavLink
+						to="/relays"
+						preventScrollReset={true}
+						className="inline-flex flex-col items-center justify-center"
+					>
+						{({ isActive }) => (
 							<div
 								className={cn(
 									"inline-flex aspect-square h-auto w-full items-center justify-center rounded-xl",
@@ -77,26 +83,14 @@ export function Navigation() {
 									<RelayIcon className="size-6" />
 								)}
 							</div>
-							<div
-								className={cn(
-									"text-sm",
-									isActive
-										? "font-semibold text-black dark:text-white"
-										: "font-medium text-black/50 dark:text-white/50",
-								)}
-							>
-								Relays
-							</div>
-						</>
-					)}
-				</NavLink>
-				<NavLink
-					to="/depot"
-					preventScrollReset={true}
-					className="inline-flex flex-col items-center justify-center"
-				>
-					{({ isActive }) => (
-						<>
+						)}
+					</NavLink>
+					<NavLink
+						to="/depot"
+						preventScrollReset={true}
+						className="inline-flex flex-col items-center justify-center"
+					>
+						{({ isActive }) => (
 							<div
 								className={cn(
 									"inline-flex aspect-square h-auto w-full items-center justify-center rounded-xl",
@@ -111,26 +105,14 @@ export function Navigation() {
 									<DepotIcon className="size-6" />
 								)}
 							</div>
-							<div
-								className={cn(
-									"text-sm",
-									isActive
-										? "font-semibold text-black dark:text-white"
-										: "font-medium text-black/50 dark:text-white/50",
-								)}
-							>
-								Depot
-							</div>
-						</>
-					)}
-				</NavLink>
-				<NavLink
-					to="/nwc"
-					preventScrollReset={true}
-					className="inline-flex flex-col items-center justify-center"
-				>
-					{({ isActive }) => (
-						<>
+						)}
+					</NavLink>
+					<NavLink
+						to="/nwc"
+						preventScrollReset={true}
+						className="inline-flex flex-col items-center justify-center"
+					>
+						{({ isActive }) => (
 							<div
 								className={cn(
 									"inline-flex aspect-square h-auto w-full items-center justify-center rounded-xl",
@@ -139,36 +121,36 @@ export function Navigation() {
 										: "text-black/50 dark:text-neutral-400",
 								)}
 							>
-								{isActive ? (
-									<NwcFilledIcon className="text-black size-6 dark:text-white" />
-								) : (
-									<NwcIcon className="size-6" />
-								)}
+								<NwcIcon className="size-6" />
 							</div>
-							<div
-								className={cn(
-									"text-sm",
-									isActive
-										? "font-semibold text-black dark:text-white"
-										: "font-medium text-black/50 dark:text-white/50",
-								)}
-							>
-								Wallet
-							</div>
-						</>
+						)}
+					</NavLink>
+				</div>
+			</div>
+			<div className="flex flex-col">
+				<NavLink
+					to="/settings"
+					preventScrollReset={true}
+					className="inline-flex flex-col items-center justify-center"
+				>
+					{({ isActive }) => (
+						<div
+							className={cn(
+								"inline-flex aspect-square h-auto w-full items-center justify-center rounded-xl",
+								isActive
+									? "bg-black/10 text-black dark:bg-white/10 dark:text-white"
+									: "text-black/50 dark:text-neutral-400",
+							)}
+						>
+							{isActive ? (
+								<SettingsFilledIcon className="size-6" />
+							) : (
+								<SettingsIcon className="size-6" />
+							)}
+						</div>
 					)}
 				</NavLink>
 			</div>
-			<div className="flex flex-col gap-3 p-1 shrink-0">
-				<button
-					type="button"
-					onClick={() => setIsEditorOpen((prev) => !prev)}
-					className="flex items-center justify-center w-full h-auto text-black aspect-square rounded-xl bg-black/10 hover:bg-blue-500 hover:text-white dark:bg-white/10 dark:text-white dark:hover:bg-blue-500"
-				>
-					<PlusIcon className="w-5 h-5" />
-				</button>
-				<ActiveAccount />
-			</div>
 		</div>
 	);
 }

packages/ui/src/onboarding/finish.tsx

@@ -1,21 +1,33 @@
-import { CheckIcon } from "@lume/icons";
+import { useStorage } from "@lume/ark";
+import { CheckIcon, LoaderIcon } from "@lume/icons";
 import { onboardingAtom } from "@lume/utils";
 import { useQueryClient } from "@tanstack/react-query";
 import { motion } from "framer-motion";
 import { useSetAtom } from "jotai";
+import { useState } from "react";
 
 export function OnboardingFinishScreen() {
+	const storage = useStorage();
 	const queryClient = useQueryClient();
 	const setOnboarding = useSetAtom(onboardingAtom);
 
+	const [loading, setLoading] = useState(false);
+
 	const finish = async () => {
+		setLoading(true);
+
 		const queryCache = queryClient.getQueryCache();
 		const queryKeys = queryCache.getAll().map((cache) => cache.queryKey);
 
+		await queryClient.refetchQueries({
+			queryKey: ["user", storage.account.pubkey],
+		});
+
 		for (const key of queryKeys) {
 			await queryClient.refetchQueries({ queryKey: key });
 		}
 
+		setLoading(false);
 		setOnboarding(false);
 	};
 
@@ -39,7 +51,7 @@ export function OnboardingFinishScreen() {
 					onClick={finish}
 					className="inline-flex items-center justify-center gap-2 w-44 font-medium h-11 rounded-xl bg-blue-100 text-blue-500 hover:bg-blue-200 dark:bg-blue-900 dark:text-blue-500 dark:hover:bg-blue-800"
 				>
-					Close
+					{loading ? <LoaderIcon className="size-4 animate-spin" /> : "Close"}
 				</button>
 				<a
 					href="https://github.com/luminous-devs/lume/issues"

packages/ui/src/onboarding/follow.tsx

@@ -82,7 +82,7 @@ export function OnboardingFollowScreen() {
 			}
 		} catch (e) {
 			setLoading(false);
-			toast.error(e);
+			toast.error(String(e));
 		}
 	};
 

packages/ui/src/onboarding/profileSettings.tsx

@@ -56,8 +56,7 @@ export function OnboardingProfileSettingsScreen() {
 			}
 		} catch (e) {
 			setLoading(false);
-			console.log(e);
-			toast.error("Cannot publish your profile, please try again later.");
+			toast.error(String(e));
 		}
 	};