feat: add onboarding modal

apps/desktop/package.json

@@ -47,6 +47,7 @@
 		"@tauri-apps/plugin-upload": "2.0.0-alpha.5",
 		"@vidstack/react": "^1.9.8",
 		"framer-motion": "^10.17.9",
+		"jotai": "^2.6.1",
 		"minidenticons": "^4.2.0",
 		"nanoid": "^5.0.4",
 		"nostr-fetch": "^0.15.0",

apps/desktop/src/routes/auth/components/avatarUploader.tsx

@@ -1,50 +0,0 @@
-import { useArk } from "@lume/ark";
-import { LoaderIcon } from "@lume/icons";
-import { message } from "@tauri-apps/plugin-dialog";
-import { Dispatch, SetStateAction, useState } from "react";
-
-export function AvatarUploader({
-	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) {
-			// stop loading
-			setLoading(false);
-			await message(`Upload failed, error: ${e}`, {
-				title: "Lume",
-				type: "error",
-			});
-		}
-	};
-
-	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="h-4 w-4 animate-spin" />
-			) : (
-				"Change avatar"
-			)}
-		</button>
-	);
-}

apps/desktop/src/routes/auth/create.tsx

@@ -1,5 +1,6 @@
 import { useArk, useStorage } from "@lume/ark";
 import { CheckIcon, ChevronDownIcon, LoaderIcon } from "@lume/icons";
+import { onboardingAtom } from "@lume/utils";
 import NDK, {
 	NDKEvent,
 	NDKKind,
@@ -11,6 +12,7 @@ import { downloadDir } from "@tauri-apps/api/path";
 import { Window } from "@tauri-apps/api/window";
 import { save } from "@tauri-apps/plugin-dialog";
 import { writeTextFile } from "@tauri-apps/plugin-fs";
+import { useSetAtom } from "jotai";
 import { getPublicKey, nip19 } from "nostr-tools";
 import { useState } from "react";
 import { useForm } from "react-hook-form";
@@ -38,6 +40,7 @@ export function CreateAccountScreen() {
 	const storage = useStorage();
 	const navigate = useNavigate();
 	const services = useLoaderData() as NDKEvent[];
+	const setOnboarding = useSetAtom(onboardingAtom);
 
 	const [serviceId, setServiceId] = useState(services?.[0]?.id);
 	const [loading, setIsLoading] = useState(false);
@@ -80,6 +83,8 @@ export function CreateAccountScreen() {
 			privkey: signer.privateKey,
 		});
 
+		setOnboarding(true);
+
 		return navigate("/auth/onboarding");
 	};
 
@@ -142,9 +147,11 @@ export function CreateAccountScreen() {
 
 		ark.updateNostrSigner({ signer: remoteSigner });
 
-		authWindow.close();
+		setOnboarding(true);
 		setIsLoading(false);
 
+		authWindow.close();
+
 		return navigate("/auth/onboarding");
 	};
 

apps/desktop/src/routes/auth/follows.tsx

@@ -1,6 +1,5 @@
 import { useArk } from "@lume/ark";
 import {
-	ArrowLeftIcon,
 	ArrowRightIcon,
 	CancelIcon,
 	ChevronDownIcon,
@@ -40,11 +39,11 @@ export function FollowsScreen() {
 	const navigate = useNavigate();
 
 	const { status, data } = useQuery({
-		queryKey: ["trending-profiles-widget"],
+		queryKey: ["trending-users"],
 		queryFn: async () => {
 			const res = await fetch("https://api.nostr.band/v0/trending/profiles");
 			if (!res.ok) {
-				throw new Error("Error");
+				throw new Error("Failed to fetch trending users from nostr.band API.");
 			}
 			return res.json();
 		},

apps/desktop/src/routes/error.tsx

@@ -51,7 +51,7 @@ export function ErrorScreen() {
 	return (
 		<div
 			data-tauri-drag-region
-			className="relative flex h-screen w-screen items-center justify-center bg-blue-600"
+			className="relative flex h-screen w-screen items-center justify-center bg-blue-600 overflow-hidden rounded-t-xl"
 		>
 			<div className="flex w-full max-w-2xl flex-col items-start gap-8">
 				<div className="flex flex-col">