feat: add onboarding modal

2024-01-08 20:18:07 +07:00
parent aa80301778
commit c172c0f80f
22 changed files with 693 additions and 49 deletions
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -9,6 +9,7 @@
 		"@lume/icons": "workspace:^",
 		"@lume/utils": "workspace:^",
 		"@nostr-dev-kit/ndk": "^2.3.2",
+		"@radix-ui/react-accordion": "^1.1.2",
 		"@radix-ui/react-alert-dialog": "^1.0.5",
 		"@radix-ui/react-avatar": "^1.0.4",
 		"@radix-ui/react-dialog": "^1.0.5",
@@ -24,6 +25,7 @@
 		"nostr-tools": "~1.17.0",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
+		"react-hook-form": "^7.49.2",
 		"react-hotkeys-hook": "^4.4.3",
 		"react-router-dom": "^6.21.1",
 		"slate": "^0.101.5",
--- a/packages/ui/src/avatarUploadButton.tsx
+++ b/packages/ui/src/avatarUploadButton.tsx
@@ -0,0 +1,46 @@
+import { useArk } from "@lume/ark";
+import { LoaderIcon } from "@lume/icons";
+import { Dispatch, SetStateAction, useState } from "react";
+import { toast } from "sonner";
+
+export function AvatarUploadButton({
+	setPicture,
+}: {
+	setPicture: Dispatch<SetStateAction<string>>;
+}) {
+	const ark = useArk();
+	const [loading, setLoading] = useState(false);
+
+	const uploadAvatar = async () => {
+		try {
+			// start loading
+			setLoading(true);
+
+			const image = await ark.upload({});
+
+			if (image) {
+				setPicture(image);
+				setLoading(false);
+			}
+
+			return;
+		} catch (e) {
+			setLoading(false);
+			toast.error(e);
+		}
+	};
+
+	return (
+		<button
+			type="button"
+			onClick={() => uploadAvatar()}
+			className="inline-flex items-center justify-center rounded-lg border border-blue-200 bg-blue-100 px-2 py-1.5 text-sm font-medium text-blue-500 hover:border-blue-300 hover:bg-blue-200 dark:border-blue-800 dark:bg-blue-900 dark:text-blue-500 dark:hover:border-blue-800 dark:hover:bg-blue-800"
+		>
+			{loading ? (
+				<LoaderIcon className="size-4 animate-spin" />
+			) : (
+				"Change avatar"
+			)}
+		</button>
+	);
+}
--- a/packages/ui/src/emptyFeed.tsx
+++ b/packages/ui/src/emptyFeed.tsx
@@ -0,0 +1,27 @@
+import { InfoIcon } from "@lume/icons";
+import { cn } from "@lume/utils";
+
+export function EmptyFeed({
+	text,
+	subtext,
+	className,
+}: { text?: string; subtext?: string; className?: string }) {
+	return (
+		<div
+			className={cn(
+				"w-full py-5 flex items-center justify-center flex-col gap-2 rounded-xl bg-neutral-50 dark:bg-neutral-950",
+				className,
+			)}
+		>
+			<InfoIcon className="size-8 text-blue-500" />
+			<div className="text-center">
+				<p className="font-semibold text-lg">{text ? text : "No events yet"}</p>
+				<p className="leading-tight text-sm">
+					{subtext
+						? subtext
+						: "You can follow more users to build up your timeline"}
+				</p>
+			</div>
+		</div>
+	);
+}
--- a/packages/ui/src/index.ts
+++ b/packages/ui/src/index.ts
@@ -11,5 +11,6 @@ export * from "./layouts/home";
 export * from "./layouts/settings";
 export * from "./mentions";
 export * from "./replyList";
+export * from "./emptyFeed";
 export * from "./routes/event";
 export * from "./routes/user";
--- a/packages/ui/src/layouts/home.tsx
+++ b/packages/ui/src/layouts/home.tsx
@@ -1,9 +1,11 @@
 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>
--- a/packages/ui/src/onboarding/finish.tsx
+++ b/packages/ui/src/onboarding/finish.tsx
@@ -0,0 +1,42 @@
+import { CheckIcon } from "@lume/icons";
+import { onboardingAtom } from "@lume/utils";
+import { motion } from "framer-motion";
+import { useSetAtom } from "jotai";
+
+export function OnboardingFinishScreen() {
+	const setOnboarding = useSetAtom(onboardingAtom);
+
+	return (
+		<motion.div
+			initial={{ opacity: 0, x: -20 }}
+			animate={{ opacity: 1, x: 0 }}
+			exit={{ opacity: 0, x: -20 }}
+			className="w-full h-full flex flex-col gap-2 items-center justify-center"
+		>
+			<CheckIcon className="size-12 text-teal-500" />
+			<div className="text-center">
+				<p className="text-lg font-medium">Profile setup complete!</p>
+				<p className="leading-tight text-neutral-600 dark:text-neutral-400">
+					You can exit the setup here and start using Lume.
+				</p>
+			</div>
+			<div className="mt-4 flex flex-col gap-2 items-center">
+				<button
+					type="button"
+					onClick={() => setOnboarding(false)}
+					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
+				</button>
+				<a
+					href="https://github.com/luminous-devs/lume/issues"
+					target="_blank"
+					className="inline-flex items-center justify-center gap-2 w-44 px-5 font-medium h-11 rounded-xl hover:bg-neutral-100 dark:hover:bg-neutral-900 text-neutral-700 dark:text-neutral-600"
+					rel="noreferrer"
+				>
+					Report a issue
+				</a>
+			</div>
+		</motion.div>
+	);
+}
--- a/packages/ui/src/onboarding/follow.tsx
+++ b/packages/ui/src/onboarding/follow.tsx
@@ -0,0 +1,277 @@
+import { useArk } from "@lume/ark";
+import {
+	ArrowLeftIcon,
+	CancelIcon,
+	ChevronDownIcon,
+	LoaderIcon,
+	PlusIcon,
+} from "@lume/icons";
+import { cn } from "@lume/utils";
+import * as Accordion from "@radix-ui/react-accordion";
+import { useQuery } from "@tanstack/react-query";
+import { motion } from "framer-motion";
+import { nip19 } from "nostr-tools";
+import { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { toast } from "sonner";
+import { User } from "../user";
+
+const POPULAR_USERS = [
+	"npub180cvv07tjdrrgpa0j7j7tmnyl2yr6yr7l8j4s3evf6u64th6gkwsyjh6w6",
+	"npub1sg6plzptd64u62a878hep2kev88swjh3tw00gjsfl8f237lmu63q0uf63m",
+	"npub1xtscya34g58tk0z605fvr788k263gsu6cy9x0mhnm87echrgufzsevkk5s",
+	"npub1gcxzte5zlkncx26j68ez60fzkvtkm9e0vrwdcvsjakxf9mu9qewqlfnj5z",
+	"npub1az9xj85cmxv8e9j9y80lvqp97crsqdu2fpu3srwthd99qfu9qsgstam8y8",
+	"npub1a2cww4kn9wqte4ry70vyfwqyqvpswksna27rtxd8vty6c74era8sdcw83a",
+	"npub168ghgug469n4r2tuyw05dmqhqv5jcwm7nxytn67afmz8qkc4a4zqsu2dlc",
+	"npub133vj8ycevdle0cq8mtgddq0xtn34kxkwxvak983dx0u5vhqnycyqj6tcza",
+	"npub18ams6ewn5aj2n3wt2qawzglx9mr4nzksxhvrdc4gzrecw7n5tvjqctp424",
+	"npub1r0rs5q2gk0e3dk3nlc7gnu378ec6cnlenqp8a3cjhyzu6f8k5sgs4sq9ac",
+	"npub1prya33fnqerq0fljwjtp77ehtu7jlsjt5ydhwveuwmqdsdm6k8esk42xcv",
+	"npub19mduaf5569jx9xz555jcx3v06mvktvtpu0zgk47n4lcpjsz43zzqhj6vzk",
+];
+
+const LUME_USERS = [
+	"npub1zfss807aer0j26mwp2la0ume0jqde3823rmu97ra6sgyyg956e0s6xw445",
+];
+
+export function OnboardingFollowScreen() {
+	const ark = useArk();
+	const navigate = useNavigate();
+
+	const { isLoading, isError, data } = useQuery({
+		queryKey: ["trending-users"],
+		queryFn: async ({ signal }: { signal: AbortSignal }) => {
+			const res = await fetch("https://api.nostr.band/v0/trending/profiles", {
+				signal,
+			});
+			if (!res.ok) {
+				throw new Error("Failed to fetch trending users from nostr.band API.");
+			}
+			return res.json();
+		},
+	});
+
+	const [loading, setLoading] = useState(false);
+	const [follows, setFollows] = useState<string[]>([]);
+
+	// toggle follow state
+	const toggleFollow = (pubkey: string) => {
+		const arr = follows.includes(pubkey)
+			? follows.filter((i) => i !== pubkey)
+			: [...follows, pubkey];
+		setFollows(arr);
+	};
+
+	const submit = async () => {
+		try {
+			setLoading(true);
+			if (!follows.length) return navigate("/finish");
+
+			const publish = await ark.newContactList({
+				tags: follows.map((item) => {
+					if (item.startsWith("npub1"))
+						return ["p", nip19.decode(item).data as string];
+					return ["p", item];
+				}),
+			});
+
+			if (publish) {
+				setLoading(false);
+				return navigate("/finish");
+			}
+		} catch (e) {
+			setLoading(false);
+			toast.error(e);
+		}
+	};
+
+	return (
+		<motion.div className="w-full h-full flex flex-col">
+			<div className="h-12 shrink-0 px-8 border-b border-neutral-100 dark:border-neutral-900 flex font-medium text-neutral-700 dark:text-neutral-600 w-full items-center">
+				Dive into the nostrverse
+			</div>
+			<div className="w-full flex-1 mb-0 min-h-0 flex flex-col justify-between h-full">
+				<motion.div
+					initial={{ opacity: 0, x: -20 }}
+					animate={{ opacity: 1, x: 0 }}
+					exit={{ opacity: 0, x: -20 }}
+					className="flex-1 overflow-y-auto px-8"
+				>
+					<p className="leading-snug text-neutral-700 dark:text-neutral-500 my-4">
+						Nostr is fun when we are together. Try following some users that
+						interest you to build up your timeline.
+					</p>
+					<Accordion.Root type="single" defaultValue="recommended" collapsible>
+						<Accordion.Item
+							value="recommended"
+							className="mb-3 overflow-hidden rounded-xl"
+						>
+							<Accordion.Trigger className="flex h-11 w-full items-center justify-between px-3 rounded-t-xl font-medium bg-neutral-50 dark:bg-neutral-950">
+								Recommended
+								<ChevronDownIcon className="size-4" />
+							</Accordion.Trigger>
+							<Accordion.Content>
+								<div className="flex w-full flex-col overflow-y-auto rounded-b-xl px-3 bg-neutral-100 dark:bg-neutral-900">
+									{POPULAR_USERS.map((pubkey) => (
+										<div
+											key={pubkey}
+											className="flex h-max w-full shrink-0 flex-col my-3 gap-4 overflow-hidden rounded-lg bg-white dark:bg-black"
+										>
+											<User pubkey={pubkey} variant="large" />
+											<div className="h-16 shrink-0 px-3 flex items-center border-t border-neutral-100 dark:border-neutral-900">
+												<button
+													type="button"
+													onClick={() => toggleFollow(pubkey)}
+													className={cn(
+														"inline-flex h-9 shrink-0 w-28 items-center justify-center gap-1 rounded-lg font-medium",
+														follows.includes(pubkey)
+															? "text-red-500 bg-red-100 hover:text-white hover:bg-red-500"
+															: "text-blue-500 bg-blue-100 hover:text-white hover:bg-blue-500",
+													)}
+												>
+													{follows.includes(pubkey) ? (
+														<>
+															<CancelIcon className="size-4" />
+															Unfollow
+														</>
+													) : (
+														<>
+															<PlusIcon className="size-4" />
+															Follow
+														</>
+													)}
+												</button>
+											</div>
+										</div>
+									))}
+								</div>
+							</Accordion.Content>
+						</Accordion.Item>
+						<Accordion.Item
+							value="trending"
+							className="mb-3 overflow-hidden rounded-xl"
+						>
+							<Accordion.Trigger className="flex h-11 w-full items-center justify-between px-3 rounded-t-xl font-medium bg-neutral-50 dark:bg-neutral-950">
+								Trending users
+								<ChevronDownIcon className="size-4" />
+							</Accordion.Trigger>
+							<Accordion.Content>
+								<div className="flex w-full flex-col overflow-y-auto rounded-b-xl px-3 bg-neutral-100 dark:bg-neutral-900">
+									{isLoading ? (
+										<div className="flex h-full 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">
+											Error. Cannot get trending users
+										</div>
+									) : (
+										data?.profiles.map((item: { pubkey: string }) => (
+											<div
+												key={item.pubkey}
+												className="flex h-max w-full shrink-0 flex-col my-3 gap-4 overflow-hidden rounded-lg bg-white dark:bg-black"
+											>
+												<User pubkey={item.pubkey} variant="large" />
+												<div className="h-16 shrink-0 px-3 flex items-center border-t border-neutral-100 dark:border-neutral-900">
+													<button
+														type="button"
+														onClick={() => toggleFollow(item.pubkey)}
+														className={cn(
+															"inline-flex h-9 shrink-0 w-28 items-center justify-center gap-1 rounded-lg font-medium",
+															follows.includes(item.pubkey)
+																? "text-red-500 bg-red-100 hover:text-white hover:bg-red-500"
+																: "text-blue-500 bg-blue-100 hover:text-white hover:bg-blue-500",
+														)}
+													>
+														{follows.includes(item.pubkey) ? (
+															<>
+																<CancelIcon className="size-4" />
+																Unfollow
+															</>
+														) : (
+															<>
+																<PlusIcon className="size-4" />
+																Follow
+															</>
+														)}
+													</button>
+												</div>
+											</div>
+										))
+									)}
+								</div>
+							</Accordion.Content>
+						</Accordion.Item>
+						<Accordion.Item
+							value="lume"
+							className="mb-3 overflow-hidden rounded-xl"
+						>
+							<Accordion.Trigger className="flex h-11 w-full items-center justify-between px-3 rounded-t-xl font-medium bg-neutral-50 dark:bg-neutral-950">
+								Lume HQ
+								<ChevronDownIcon className="size-4" />
+							</Accordion.Trigger>
+							<Accordion.Content>
+								<div className="flex w-full flex-col overflow-y-auto rounded-b-xl px-3 bg-neutral-100 dark:bg-neutral-900">
+									{LUME_USERS.map((pubkey) => (
+										<div
+											key={pubkey}
+											className="flex h-max w-full shrink-0 flex-col my-3 gap-4 overflow-hidden rounded-lg bg-white dark:bg-black"
+										>
+											<User pubkey={pubkey} variant="large" />
+											<div className="h-16 shrink-0 px-3 flex items-center border-t border-neutral-100 dark:border-neutral-900">
+												<button
+													type="button"
+													onClick={() => toggleFollow(pubkey)}
+													className={cn(
+														"inline-flex h-9 shrink-0 w-28 items-center justify-center gap-1 rounded-lg font-medium",
+														follows.includes(pubkey)
+															? "text-red-500 bg-red-100 hover:text-white hover:bg-red-500"
+															: "text-blue-500 bg-blue-100 hover:text-white hover:bg-blue-500",
+													)}
+												>
+													{follows.includes(pubkey) ? (
+														<>
+															<CancelIcon className="size-4" />
+															Unfollow
+														</>
+													) : (
+														<>
+															<PlusIcon className="size-4" />
+															Follow
+														</>
+													)}
+												</button>
+											</div>
+										</div>
+									))}
+								</div>
+							</Accordion.Content>
+						</Accordion.Item>
+					</Accordion.Root>
+				</motion.div>
+				<div className="h-16 w-full shrink-0 flex items-center px-8 justify-center gap-2 border-t border-neutral-100 dark:border-neutral-900 bg-neutral-50 dark:bg-neutral-950">
+					<button
+						type="button"
+						onClick={() => navigate(-1)}
+						className="inline-flex h-9 flex-1 gap-2 shrink-0 items-center justify-center rounded-lg bg-neutral-100 font-medium dark:bg-neutral-900 dark:hover:bg-neutral-800 hover:bg-blue-200"
+					>
+						<ArrowLeftIcon className="size-4" />
+						Back
+					</button>
+					<button
+						type="button"
+						onClick={() => submit()}
+						className="inline-flex h-9 flex-1 shrink-0 items-center justify-center rounded-lg bg-blue-500 font-semibold text-white hover:bg-blue-600 disabled:opacity-50"
+					>
+						{loading ? (
+							<LoaderIcon className="size-4 animate-spin" />
+						) : (
+							"Continue"
+						)}
+					</button>
+				</div>
+			</div>
+		</motion.div>
+	);
+}
--- a/packages/ui/src/onboarding/home.tsx
+++ b/packages/ui/src/onboarding/home.tsx
@@ -0,0 +1,46 @@
+import { ArrowRightIcon, PopperFilledIcon } from "@lume/icons";
+import { onboardingAtom } from "@lume/utils";
+import { motion } from "framer-motion";
+import { useSetAtom } from "jotai";
+import { useNavigate } from "react-router-dom";
+
+export function OnboardingHomeScreen() {
+	const navigate = useNavigate();
+	const setOnboarding = useSetAtom(onboardingAtom);
+
+	return (
+		<motion.div
+			initial={{ opacity: 0, x: -20 }}
+			animate={{ opacity: 1, x: 0 }}
+			exit={{ opacity: 0, x: -20 }}
+			className="w-full h-full flex flex-col gap-2 items-center justify-center"
+		>
+			<PopperFilledIcon className="size-12 text-blue-500" />
+			<div className="text-center">
+				<p className="text-lg font-medium">
+					Your account was successfully created!
+				</p>
+				<p className="leading-tight text-neutral-600 dark:text-neutral-400">
+					For starters, let's set up your profile.
+				</p>
+			</div>
+			<div className="mt-4 flex flex-col gap-2 items-center">
+				<button
+					type="button"
+					onClick={() => navigate("/profile-settings")}
+					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"
+				>
+					Profile Settings
+					<ArrowRightIcon className="size-4" />
+				</button>
+				<button
+					type="button"
+					onClick={() => setOnboarding(false)}
+					className="inline-flex items-center justify-center gap-2 w-44 px-5 font-medium h-11 rounded-xl hover:bg-neutral-100 dark:hover:bg-neutral-900 text-neutral-700 dark:text-neutral-600"
+				>
+					Skip
+				</button>
+			</div>
+		</motion.div>
+	);
+}
--- a/packages/ui/src/onboarding/modal.tsx
+++ b/packages/ui/src/onboarding/modal.tsx
@@ -0,0 +1,21 @@
+import { onboardingAtom } from "@lume/utils";
+import * as Dialog from "@radix-ui/react-dialog";
+import { useAtomValue } from "jotai";
+import { OnboardingRouter } from "./router";
+
+export function OnboardingModal() {
+	const onboarding = useAtomValue(onboardingAtom);
+
+	return (
+		<Dialog.Root open={onboarding}>
+			<Dialog.Portal>
+				<Dialog.Overlay className="fixed inset-0 z-50 bg-black/20 backdrop-blur-xl dark:bg-white/20" />
+				<Dialog.Content className="fixed inset-0 z-50 flex items-center justify-center min-h-full">
+					<div className="relative w-full max-w-lg bg-white h-[500px] rounded-xl dark:bg-black overflow-hidden">
+						<OnboardingRouter />
+					</div>
+				</Dialog.Content>
+			</Dialog.Portal>
+		</Dialog.Root>
+	);
+}
--- a/packages/ui/src/onboarding/profileSettings.tsx
+++ b/packages/ui/src/onboarding/profileSettings.tsx
@@ -0,0 +1,147 @@
+import { useArk, useStorage } from "@lume/ark";
+import { ArrowLeftIcon, LoaderIcon } from "@lume/icons";
+import { NDKKind } from "@nostr-dev-kit/ndk";
+import { motion } from "framer-motion";
+import { minidenticon } from "minidenticons";
+import { useState } from "react";
+import { useForm } from "react-hook-form";
+import { useNavigate } from "react-router-dom";
+import { toast } from "sonner";
+import { AvatarUploadButton } from "../avatarUploadButton";
+
+export function OnboardingProfileSettingsScreen() {
+	const [picture, setPicture] = useState("");
+	const [loading, setLoading] = useState(false);
+
+	const ark = useArk();
+	const storage = useStorage();
+	const navigate = useNavigate();
+
+	const { register, handleSubmit } = useForm();
+
+	const svgURI = `data:image/svg+xml;utf8,${encodeURIComponent(
+		minidenticon("lume new account", 90, 50),
+	)}`;
+
+	const onSubmit = async (data: { name: string; about: string }) => {
+		try {
+			setLoading(true);
+
+			if (!data.name.length && !data.about.length) {
+				setLoading(false);
+				navigate("/follow");
+			}
+
+			const oldProfile = await ark.getUserProfile({
+				pubkey: storage.account.pubkey,
+			});
+			const ensureOldProfile = oldProfile ? oldProfile : {};
+
+			const profile = {
+				...data,
+				...ensureOldProfile,
+				display_name: data.name,
+				bio: data.about,
+				picture: picture,
+				avatar: picture,
+			};
+
+			const publish = await ark.createEvent({
+				content: JSON.stringify(profile),
+				kind: NDKKind.Metadata,
+				tags: [],
+			});
+
+			if (publish) {
+				setLoading(false);
+				navigate("/follow");
+			} else {
+				toast.error("Cannot publish your profile, please try again later.");
+				setLoading(false);
+			}
+		} catch (e) {
+			return toast.error(e);
+		}
+	};
+
+	return (
+		<div className="w-full h-full flex flex-col gap-4">
+			<div className="h-12 shrink-0 px-8 border-b border-neutral-100 dark:border-neutral-900 flex font-medium text-neutral-700 dark:text-neutral-600 w-full items-center">
+				Profile Settings
+			</div>
+			<form
+				onSubmit={handleSubmit(onSubmit)}
+				className="w-full flex-1 mb-0 flex flex-col justify-between"
+			>
+				<input type={"hidden"} {...register("picture")} value={picture} />
+				<motion.div
+					initial={{ opacity: 0, x: -20 }}
+					animate={{ opacity: 1, x: 0 }}
+					exit={{ opacity: 0, x: -20 }}
+					className="flex flex-col px-8 gap-4"
+				>
+					<div className="flex flex-col gap-1">
+						<span className="font-medium">Avatar</span>
+						<div className="flex h-36 w-full flex-col items-center justify-center gap-3 rounded-lg bg-neutral-100 dark:bg-neutral-950">
+							{picture.length ? (
+								<img
+									src={picture}
+									alt="user's avatar"
+									className="size-16 rounded-xl object-cover"
+								/>
+							) : (
+								<img
+									src={svgURI}
+									alt="user's avatar"
+									className="size-16 rounded-xl bg-black dark:bg-white"
+								/>
+							)}
+							<AvatarUploadButton setPicture={setPicture} />
+						</div>
+					</div>
+					<div className="flex flex-col gap-1">
+						<label htmlFor="name" className="font-medium">
+							Name *
+						</label>
+						<input
+							type={"text"}
+							{...register("name")}
+							spellCheck={false}
+							className="h-11 rounded-lg border-transparent bg-neutral-100 px-3 placeholder:text-neutral-500 focus:border-blue-500 focus:ring focus:ring-blue-200 dark:bg-neutral-950 dark:placeholder:text-neutral-400 dark:focus:ring-blue-800"
+						/>
+					</div>
+					<div className="flex flex-col gap-1">
+						<label htmlFor="about" className="font-medium">
+							Bio
+						</label>
+						<textarea
+							{...register("about")}
+							spellCheck={false}
+							className="relative h-24 w-full resize-none rounded-lg border-transparent bg-neutral-100 px-3 py-2 !outline-none placeholder:text-neutral-500 focus:border-blue-500 focus:ring focus:ring-blue-200 dark:bg-neutral-950 dark:placeholder:text-neutral-400 dark:focus:ring-blue-800"
+						/>
+					</div>
+				</motion.div>
+				<div className="h-16 w-full flex items-center px-8 justify-center gap-2 border-t border-neutral-100 dark:border-neutral-900 bg-neutral-50 dark:bg-neutral-950">
+					<button
+						type="button"
+						onClick={() => navigate(-1)}
+						className="inline-flex h-9 flex-1 gap-2 shrink-0 items-center justify-center rounded-lg bg-neutral-100 font-medium dark:bg-neutral-900 dark:hover:bg-neutral-800 hover:bg-blue-200"
+					>
+						<ArrowLeftIcon className="size-4" />
+						Back
+					</button>
+					<button
+						type="submit"
+						className="inline-flex h-9 flex-1 shrink-0 items-center justify-center rounded-lg bg-blue-500 font-semibold text-white hover:bg-blue-600 disabled:opacity-50"
+					>
+						{loading ? (
+							<LoaderIcon className="h-4 w-4 animate-spin" />
+						) : (
+							"Continue"
+						)}
+					</button>
+				</div>
+			</form>
+		</div>
+	);
+}
--- a/packages/ui/src/onboarding/router.tsx
+++ b/packages/ui/src/onboarding/router.tsx
@@ -0,0 +1,31 @@
+import { AnimatePresence } from "framer-motion";
+import {
+	MemoryRouter,
+	Route,
+	Routes,
+	UNSAFE_LocationContext,
+} from "react-router-dom";
+import { OnboardingFinishScreen } from "./finish";
+import { OnboardingFollowScreen } from "./follow";
+import { OnboardingHomeScreen } from "./home";
+import { OnboardingProfileSettingsScreen } from "./profileSettings";
+
+export function OnboardingRouter() {
+	return (
+		<UNSAFE_LocationContext.Provider value={null}>
+			<MemoryRouter future={{ v7_startTransition: true }}>
+				<AnimatePresence>
+					<Routes>
+						<Route path="/" element={<OnboardingHomeScreen />} />
+						<Route
+							path="/profile-settings"
+							element={<OnboardingProfileSettingsScreen />}
+						/>
+						<Route path="/follow" element={<OnboardingFollowScreen />} />
+						<Route path="/finish" element={<OnboardingFinishScreen />} />
+					</Routes>
+				</AnimatePresence>
+			</MemoryRouter>
+		</UNSAFE_LocationContext.Provider>
+	);
+}
--- a/packages/ui/src/user.tsx
+++ b/packages/ui/src/user.tsx
@@ -165,30 +165,40 @@ export const User = memo(function User({
 		}

 		return (
-			<div className="flex h-full w-full flex-col gap-2.5">
-				<Avatar.Root className="shrink-0">
-					<Avatar.Image
-						src={user?.picture || user?.image}
-						alt={pubkey}
-						loading="lazy"
-						decoding="async"
-						className="h-11 w-11 rounded-lg object-cover"
-					/>
-					<Avatar.Fallback delayMs={300}>
+			<div>
+				<div className="h-20 bg-gray-200 dark:bg-gray-800 rounded-t-lg">
+					{user?.banner ? (
 						<img
-							src={fallbackAvatar}
-							alt={pubkey}
-							className="h-11 w-11 rounded-lg bg-black dark:bg-white"
+							src={user.banner}
+							alt="banner"
+							className="w-full h-full object-cover"
 						/>
-					</Avatar.Fallback>
-				</Avatar.Root>
-				<div className="flex flex-col items-start text-start gap-1">
-					<p className="max-w-[15rem] truncate text-lg font-semibold leadning-tight">
-						{user?.name || user?.display_name || user?.displayName}
-					</p>
-					<p className="break-p text-neutral-500 max-w-none select-text whitespace-pre-line">
-						{user?.about || user?.bio || "No bio"}
-					</p>
+					) : null}
+				</div>
+				<div className="flex h-full w-full flex-col gap-2.5 px-3 -mt-6">
+					<Avatar.Root className="shrink-0">
+						<Avatar.Image
+							src={user?.picture || user?.image}
+							alt={pubkey}
+							decoding="async"
+							className="size-11 rounded-lg object-cover"
+						/>
+						<Avatar.Fallback delayMs={300}>
+							<img
+								src={fallbackAvatar}
+								alt={pubkey}
+								className="size-11 rounded-lg bg-black dark:bg-white"
+							/>
+						</Avatar.Fallback>
+					</Avatar.Root>
+					<div className="flex flex-col items-start text-start">
+						<p className="max-w-[15rem] truncate text-lg font-semibold leadning-tight">
+							{user?.name || user?.display_name || user?.displayName}
+						</p>
+						<p className="break-p text-neutral-700 dark:text-neutral-600 max-w-none select-text whitespace-pre-line">
+							{user?.about || user?.bio || "No bio"}
+						</p>
+					</div>
 				</div>
 			</div>
 		);