feat: new flow (#235)

* feat: redesign initial screen

* feat: improve login process

public/nsec_app.svg

@@ -0,0 +1,3 @@
+<svg width="32" height="36" viewBox="0 0 32 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M28.2711 21.2958C27.1084 21.2958 26.0749 21.8372 25.4037 22.6797L21.8702 20.6405C22.2577 19.8106 22.4755 18.8846 22.4755 17.908C22.4755 16.9314 22.2577 16.0053 21.8702 15.1755L25.3404 13.1742C26.0091 14.0648 27.0704 14.6442 28.2711 14.6442C30.2949 14.6442 31.9363 13.0047 31.9363 10.9831C31.9363 8.96158 30.2949 7.32208 28.2711 7.32208C26.2472 7.32208 24.6058 8.96158 24.6058 10.9831C24.6058 11.4006 24.6793 11.8003 24.8084 12.1748L21.3028 14.1963C20.2338 12.6732 18.5241 11.6333 16.5635 11.4638V7.274C18.3189 7.00076 19.6639 5.49029 19.6639 3.66104C19.6639 1.6395 18.0225 0 15.9987 0C13.9748 0 12.3334 1.6395 12.3334 3.66104C12.3334 5.49029 13.6784 7.00329 15.4338 7.274V11.4638C13.4733 11.6333 11.7635 12.6732 10.6946 14.1963L7.1889 12.1748C7.31808 11.8003 7.39154 11.4006 7.39154 10.9831C7.39154 8.96158 5.75015 7.32208 3.72629 7.32208C1.70242 7.32208 0.0610352 8.96158 0.0610352 10.9831C0.0610352 13.0047 1.70242 14.6442 3.72629 14.6442C4.92693 14.6442 5.98825 14.0648 6.65697 13.1742L10.1272 15.1755C9.73963 16.0053 9.52179 16.9314 9.52179 17.908C9.52179 18.8846 9.73963 19.8106 10.1272 20.643L6.59364 22.6822C5.9224 21.8397 4.88893 21.2983 3.72629 21.2983C1.70242 21.2983 0.0610352 22.9378 0.0610352 24.9593C0.0610352 26.9809 1.70242 28.6204 3.72629 28.6204C5.75015 28.6204 7.39154 26.9809 7.39154 24.9593C7.39154 24.5039 7.30542 24.0687 7.1509 23.6639L10.6946 21.6196C11.3329 22.5279 12.1992 23.2667 13.2098 23.7499V32.3497C13.2098 32.9721 13.5569 33.8551 13.9799 34.3131L15.2286 35.6565C15.6516 36.1145 16.3457 36.1145 16.7712 35.6565L18.02 34.3131C18.443 33.8551 18.79 32.9721 18.79 32.3497V23.7499C19.8007 23.2667 20.667 22.5304 21.3053 21.6196L24.849 23.6639C24.697 24.0662 24.6083 24.5014 24.6083 24.9593C24.6083 26.9809 26.2497 28.6204 28.2736 28.6204C30.2975 28.6204 31.9388 26.9809 31.9388 24.9593C31.9388 22.9378 30.2975 21.2983 28.2736 21.2983L28.2711 21.2958Z" fill="white"/>
+</svg>

src-tauri/src/commands/account.rs

@@ -11,10 +11,7 @@ use std::{
 };
 use tauri::{Emitter, Manager, State};
 
-use crate::{
-    common::{get_user_settings, init_nip65},
-    Nostr, NEWSFEED_NEG_LIMIT, NOTIFICATION_NEG_LIMIT, NOTIFICATION_SUB_ID,
-};
+use crate::{common::init_nip65, Nostr, NOTIFICATION_SUB_ID};
 
 #[derive(Debug, Clone, Serialize, Deserialize, Type)]
 struct Account {
@@ -271,104 +268,138 @@ pub async fn login(
         }
     };
 
-    // Connect to user's relay (NIP-65)
+    // NIP-65: Connect to user's relay list
     init_nip65(client, &public_key).await;
 
+    // Run seperate thread for syncing data
+    let pk = public_key.clone();
     tauri::async_runtime::spawn(async move {
-        let config_dir = handle
-            .path()
-            .app_config_dir()
-            .expect("Error: app config directory not found.");
-
+        let config_dir = handle.path().app_config_dir().unwrap();
         let state = handle.state::<Nostr>();
         let client = &state.client;
 
-        let signer = client.signer().await.unwrap();
-        let public_key = signer.public_key().await.unwrap();
+        // Convert current user to PublicKey
+        let author = PublicKey::from_str(&pk).unwrap();
 
-        let notification_id = SubscriptionId::new(NOTIFICATION_SUB_ID);
-        let notification = Filter::new().pubkey(public_key).kinds(vec![
-            Kind::TextNote,
-            Kind::Repost,
-            Kind::Reaction,
-            Kind::ZapReceipt,
-        ]);
-
-        // Sync notification with negentropy
-        let _ = client
+        // Fetching user's metadata
+        if let Ok(report) = client
             .reconcile(
-                notification.clone().limit(NOTIFICATION_NEG_LIMIT),
+                Filter::new()
+                    .author(author)
+                    .kinds(vec![
+                        Kind::Metadata,
+                        Kind::ContactList,
+                        Kind::MuteList,
+                        Kind::Bookmarks,
+                        Kind::Interests,
+                        Kind::PinList,
+                    ])
+                    .limit(1000),
                 NegentropyOptions::default(),
             )
-            .await;
+            .await
+        {
+            println!("Received: {}", report.received.len())
+        }
 
-        // Subscribing for new notification...
-        if let Err(e) = client
+        // Fetching user's events
+        if let Ok(report) = client
+            .reconcile(
+                Filter::new()
+                    .author(author)
+                    .kinds(vec![Kind::TextNote, Kind::Repost])
+                    .limit(200),
+                NegentropyOptions::default(),
+            )
+            .await
+        {
+            println!("Received: {}", report.received.len())
+        }
+
+        // Fetching user's notification
+        if let Ok(report) = client
+            .reconcile(
+                Filter::new()
+                    .pubkey(author)
+                    .kinds(vec![
+                        Kind::TextNote,
+                        Kind::Repost,
+                        Kind::Reaction,
+                        Kind::ZapReceipt,
+                    ])
+                    .limit(200),
+                NegentropyOptions::default(),
+            )
+            .await
+        {
+            println!("Received: {}", report.received.len())
+        }
+
+        // Subscribe for new notification
+        if let Ok(e) = client
             .subscribe_with_id(
-                notification_id,
-                vec![notification.since(Timestamp::now())],
+                SubscriptionId::new(NOTIFICATION_SUB_ID),
+                vec![Filter::new()
+                    .pubkey(author)
+                    .kinds(vec![
+                        Kind::TextNote,
+                        Kind::Repost,
+                        Kind::Reaction,
+                        Kind::ZapReceipt,
+                    ])
+                    .since(Timestamp::now())],
                 None,
             )
             .await
         {
-            println!("Error: {}", e)
+            println!("Subscribed: {}", e.success.len())
         }
 
-        // Get user's settings
-        if let Ok(settings) = get_user_settings(client).await {
-            state.settings.lock().await.clone_from(&settings);
+        // Get user's contact list
+        let contact_list = {
+            let contacts = client.get_contact_list(None).await.unwrap();
+            // Update app's state
+            state.contact_list.lock().await.clone_from(&contacts);
+            // Return
+            contacts
         };
 
-        let contact_list = client
-            .get_contact_list(Some(Duration::from_secs(5)))
-            .await
-            .unwrap();
-
-        state.contact_list.lock().await.clone_from(&contact_list);
-
-        // Get user's contact list
+        // Get events from contact list
         if !contact_list.is_empty() {
             let authors: Vec<PublicKey> = contact_list.iter().map(|f| f.public_key).collect();
 
-            let metadata = Filter::new()
-                .authors(authors.clone())
-                .kind(Kind::Metadata)
-                .limit(authors.len());
-
+            // Fetching contact's metadata
             if let Ok(report) = client
-                .reconcile(metadata, NegentropyOptions::default())
+                .reconcile(
+                    Filter::new()
+                        .authors(authors.clone())
+                        .kinds(vec![Kind::Metadata, Kind::ContactList, Kind::MuteList])
+                        .limit(3000),
+                    NegentropyOptions::default(),
+                )
                 .await
             {
-                println!("received [metadata]: {}", report.received.len())
+                println!("Received: {}", report.received.len())
             }
 
-            let newsfeed = Filter::new()
-                .authors(authors.clone())
-                .kinds(vec![Kind::TextNote, Kind::Repost])
-                .limit(NEWSFEED_NEG_LIMIT);
-
-            if client
-                .reconcile(newsfeed, NegentropyOptions::default())
+            // Fetching contact's events
+            if let Ok(report) = client
+                .reconcile(
+                    Filter::new()
+                        .authors(authors.clone())
+                        .kinds(vec![Kind::TextNote, Kind::Repost])
+                        .limit(1000),
+                    NegentropyOptions::default(),
+                )
                 .await
-                .is_ok()
             {
-                // Save state
-                let _ = File::create(config_dir.join(public_key.to_bech32().unwrap()));
+                println!("Received: {}", report.received.len());
+
+                // Save the process status
+                let _ = File::create(config_dir.join(author.to_bech32().unwrap()));
                 // Update frontend
                 handle.emit("synchronized", ()).unwrap();
-            }
-
-            let contacts = Filter::new()
-                .authors(authors.clone())
-                .kind(Kind::ContactList)
-                .limit(authors.len() * 1000);
-
-            if let Ok(report) = client
-                .reconcile(contacts, NegentropyOptions::default())
-                .await
-            {
-                println!("received [contact list]: {}", report.received.len())
-            }
+            };
 
             for author in authors.into_iter() {
                 let filter = Filter::new()
@@ -400,7 +431,7 @@ pub async fn login(
             }
         } else {
             handle.emit("synchronized", ()).unwrap();
-        };
+        }
     });
 
     Ok(public_key)

src-tauri/src/main.rs

@@ -478,13 +478,15 @@ fn main() {
                             {
                                 let authors: Vec<PublicKey> =
                                     contact_list.iter().map(|f| f.public_key).collect();
-                                let newsfeed = Filter::new()
-                                    .authors(authors)
-                                    .kinds(vec![Kind::TextNote, Kind::Repost])
-                                    .limit(NEWSFEED_NEG_LIMIT);
 
                                 if client
-                                    .reconcile(newsfeed, NegentropyOptions::default())
+                                    .reconcile(
+                                        Filter::new()
+                                            .authors(authors)
+                                            .kinds(vec![Kind::TextNote, Kind::Repost])
+                                            .limit(NEWSFEED_NEG_LIMIT),
+                                        NegentropyOptions::default(),
+                                    )
                                     .await
                                     .is_ok()
                                 {

src/components/note/buttons/open.tsx

@@ -20,7 +20,7 @@ export function NoteOpenThread() {
 				</Tooltip.Trigger>
 				<Tooltip.Portal>
 					<Tooltip.Content className="inline-flex h-7 select-none text-neutral-50 dark:text-neutral-950 items-center justify-center rounded-md bg-neutral-950 dark:bg-neutral-50 px-3.5 text-sm will-change-[transform,opacity] data-[state=delayed-open]:data-[side=bottom]:animate-slideUpAndFade data-[state=delayed-open]:data-[side=left]:animate-slideRightAndFade data-[state=delayed-open]:data-[side=right]:animate-slideLeftAndFade data-[state=delayed-open]:data-[side=top]:animate-slideDownAndFade">
-						Open
+						View thread
 						<Tooltip.Arrow className="fill-neutral-950 dark:fill-neutral-50" />
 					</Tooltip.Content>
 				</Tooltip.Portal>

src/components/user/avatar.tsx

@@ -15,6 +15,9 @@ export function UserAvatar({ className }: { className?: string }) {
 
 	const picture = useMemo(() => {
 		if (service?.length && user.profile?.picture?.length) {
+			if (user.profile?.picture.includes("_next/")) {
+				return user.profile?.picture;
+			}
 			return `${service}?url=${user.profile?.picture}&w=100&h=100&n=-1&default=${user.profile?.picture}`;
 		} else {
 			return user.profile?.picture;

src/routes/index.lazy.tsx

@@ -2,7 +2,7 @@ import { commands } from "@/commands.gen";
 import { appSettings, displayNpub } from "@/commons";
 import { Frame, Spinner, User } from "@/components";
 import { ArrowRight, DotsThree, GearSix, Plus } from "@phosphor-icons/react";
-import { Link, createLazyFileRoute } from "@tanstack/react-router";
+import { createLazyFileRoute } from "@tanstack/react-router";
 import { Menu, MenuItem } from "@tauri-apps/api/menu";
 import { message } from "@tauri-apps/plugin-dialog";
 import {
@@ -37,6 +37,32 @@ function Screen() {
 	const [password, setPassword] = useState("");
 	const [isPending, startTransition] = useTransition();
 
+	const showContextMenu = useCallback(
+		async (e: React.MouseEvent, account: string) => {
+			e.stopPropagation();
+
+			const menuItems = await Promise.all([
+				MenuItem.new({
+					text: "Reset password",
+					enabled: !account.includes("_nostrconnect"),
+					// @ts-ignore, this is tanstack router bug
+					action: () => navigate({ to: "/reset", search: { account } }),
+				}),
+				MenuItem.new({
+					text: "Delete account",
+					action: async () => await deleteAccount(account),
+				}),
+			]);
+
+			const menu = await Menu.new({
+				items: menuItems,
+			});
+
+			await menu.popup().catch((e) => console.error(e));
+		},
+		[],
+	);
+
 	const deleteAccount = async (account: string) => {
 		const res = await commands.deleteAccount(account);
 
@@ -69,12 +95,14 @@ function Screen() {
 				if (status) {
 					navigate({
 						to: "/$account/home",
+						// @ts-ignore, this is tanstack router bug
 						params: { account: res.data },
 						replace: true,
 					});
 				} else {
 					navigate({
 						to: "/loading",
+						// @ts-ignore, this is tanstack router bug
 						search: { account: res.data },
 						replace: true,
 					});
@@ -86,31 +114,6 @@ function Screen() {
 		});
 	};
 
-	const showContextMenu = useCallback(
-		async (e: React.MouseEvent, account: string) => {
-			e.stopPropagation();
-
-			const menuItems = await Promise.all([
-				MenuItem.new({
-					text: "Reset password",
-					enabled: !account.includes("_nostrconnect"),
-					action: () => navigate({ to: "/reset", search: { account } }),
-				}),
-				MenuItem.new({
-					text: "Delete account",
-					action: async () => await deleteAccount(account),
-				}),
-			]);
-
-			const menu = await Menu.new({
-				items: menuItems,
-			});
-
-			await menu.popup().catch((e) => console.error(e));
-		},
-		[],
-	);
-
 	useEffect(() => {
 		if (autoLogin) {
 			loginWith();
@@ -204,8 +207,8 @@ function Screen() {
 							</div>
 						</div>
 					))}
-					<Link
-						to="/new"
+					<a
+						href="/new"
 						className="flex items-center justify-between hover:bg-black/5 dark:hover:bg-white/5"
 					>
 						<div className="flex items-center gap-2.5 p-3">
@@ -216,17 +219,17 @@ function Screen() {
 								New account
 							</span>
 						</div>
-					</Link>
+					</a>
 				</Frame>
 			</div>
 			<div className="absolute bottom-2 right-2">
-				<Link
-					to="/bootstrap-relays"
+				<a
+					href="/bootstrap-relays"
 					className="h-8 w-max text-xs px-3 inline-flex items-center justify-center gap-1.5 bg-black/5 hover:bg-black/10 dark:bg-white/5 dark:hover:bg-white/10 rounded-full"
 				>
 					<GearSix className="size-4" />
 					Manage Relays
-				</Link>
+				</a>
 			</div>
 		</div>
 	);

src/routes/loading.tsx

@@ -1,4 +1,4 @@
-import { Spinner } from "@/components";
+import { Frame, Spinner } from "@/components";
 import { createFileRoute } from "@tanstack/react-router";
 import { listen } from "@tauri-apps/api/event";
 import { useEffect } from "react";
@@ -24,6 +24,7 @@ function Screen() {
 		const unlisten = listen("synchronized", () => {
 			navigate({
 				to: "/$account/home",
+				// @ts-ignore, this is tanstack router bug
 				params: { account: search.account },
 				replace: true,
 			});
@@ -36,12 +37,15 @@ function Screen() {
 
 	return (
 		<div className="size-full flex items-center justify-center">
-			<div className="flex flex-col gap-2 items-center justify-center text-center">
+			<Frame
+				className="p-6 h-36 flex flex-col gap-2 items-center justify-center text-center rounded-xl overflow-hidden"
+				shadow
+			>
 				<Spinner />
-				<p className="text-sm">
+				<p className="text-sm text-neutral-600 dark:text-neutral-40">
 					Fetching necessary data for the first time login...
 				</p>
-			</div>
+			</Frame>
 		</div>
 	);
 }

src/routes/new.lazy.tsx

@@ -1,6 +1,4 @@
-import { GoBack } from "@/components";
-import { ArrowLeft } from "@phosphor-icons/react";
-import { Link, createLazyFileRoute } from "@tanstack/react-router";
+import { createLazyFileRoute } from "@tanstack/react-router";
 
 export const Route = createLazyFileRoute("/new")({
 	component: Screen,
@@ -10,42 +8,79 @@ function Screen() {
 	return (
 		<div
 			data-tauri-drag-region
-			className="relative size-full flex items-center justify-center"
+			className="bg-white/50 dark:bg-black/50 relative size-full flex items-center justify-center"
 		>
-			<div className="w-[320px] flex flex-col gap-8">
+			<div className="w-[350px] flex flex-col gap-8">
 				<div className="flex flex-col gap-1 text-center">
-					<h1 className="leading-tight text-xl font-semibold">
-						Welcome to Nostr.
+					<h1 className="leading-tight text-lg font-semibold">
+						How would you like to use Lume?
 					</h1>
 				</div>
 				<div className="flex flex-col gap-4">
-					<Link
-						to="/auth/new"
-						className="w-full h-10 bg-blue-500 font-medium hover:bg-blue-600 text-white rounded-lg inline-flex items-center justify-center shadow"
+					<a
+						href="/auth/connect"
+						className="w-full p-4 rounded-xl hover:shadow-lg hover:ring-0 hover:bg-white dark:hover:bg-neutral-900 ring-1 ring-black/5 dark:ring-white/5"
 					>
-						Create a new identity
-					</Link>
-					<div className="w-full h-px bg-black/5 dark:bg-white/5" />
+						<h3 className="mb-1.5 font-medium">Continue with Nostr Connect</h3>
+						<div className="text-sm">
+							<p className="text-neutral-500 dark:text-neutral-600">
+								Your account will be handled by a remote signer. Lume will not
+								store your account keys.
+							</p>
+						</div>
+					</a>
+					<a
+						href="/auth/import"
+						className="w-full p-4 rounded-xl hover:shadow-lg hover:ring-0 hover:bg-white dark:hover:bg-neutral-900 ring-1 ring-black/5 dark:ring-white/5"
+					>
+						<h3 className="mb-1.5 font-medium">Continue with Secret Key</h3>
+						<div className="text-sm">
+							<p className="text-neutral-500 dark:text-neutral-600">
+								Lume will store your keys in secure storage. You can provide a
+								password to add extra security.
+							</p>
+						</div>
+					</a>
+					<div className="flex items-center justify-between gap-2">
+						<div className="flex-1 h-px bg-black/5 dark:bg-white/5" />
+						<div className="shrink-0 text-sm text-neutral-500 dark:text-neutral-400">
+							Do you not have a Nostr account yet?
+						</div>
+						<div className="flex-1 h-px bg-black/5 dark:bg-white/5" />
+					</div>
 					<div className="flex flex-col gap-2">
-						<Link
-							to="/auth/connect"
-							className="w-full h-10 bg-white hover:bg-neutral-100 dark:hover:bg-neutral-100 dark:text-black rounded-lg inline-flex items-center justify-center"
+						<a
+							href="https://nsec.app"
+							target="_blank"
+							rel="noreferrer"
+							className="text-sm bg-black/5 dark:bg-white/5 hover:bg-black/10 dark:hover:bg-white/10 rounded-lg flex items-center gap-1.5 h-9 px-1"
 						>
-							Login with Nostr Connect
-						</Link>
-						<Link
-							to="/auth/import"
-							className="w-full h-10 bg-white hover:bg-neutral-100 dark:hover:bg-neutral-100 dark:text-black rounded-lg inline-flex items-center justify-center"
+							<div className="size-7 rounded-md bg-black inline-flex items-center justify-center">
+								<img src="/nsec_app.svg" alt="nsec.app" className="size-5" />
+							</div>
+							Create one with nsec.app
+						</a>
+						<a
+							href="https://nosta.me"
+							target="_blank"
+							rel="noreferrer"
+							className="text-sm bg-black/5 dark:bg-white/5 hover:bg-black/10 dark:hover:bg-white/10 rounded-lg flex items-center gap-1.5 h-9 px-1"
 						>
-							Login with Private Key
-						</Link>
+							<div className="size-7 rounded-md bg-black overflow-hidden">
+								<img
+									src="/nosta.jpg"
+									alt="nosta"
+									className="size-7 object-cover"
+								/>
+							</div>
+							Create one with nosta.me
+						</a>
+						<p className="text-xs text-neutral-400 dark:text-neutral-600">
+							Or you can create account from other Nostr clients.
+						</p>
 					</div>
 				</div>
 			</div>
-			<GoBack className="fixed top-11 left-2 flex items-center gap-1.5 text-sm font-medium">
-				<ArrowLeft className="size-5" />
-				Back
-			</GoBack>
 		</div>
 	);
 }