feat: add suggest screen

packages/ark/src/components/column/header.tsx

@@ -9,6 +9,7 @@ import {
 import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
 import { useQueryClient } from "@tanstack/react-query";
 import { ReactNode } from "react";
+import { InterestModal } from "./interestModal";
 import { useColumnContext } from "./provider";
 
 export function ColumnHeader({
@@ -71,6 +72,11 @@ export function ColumnHeader({
 									Refresh
 								</button>
 							</DropdownMenu.Item>
+							{queryKey[0] === "foryou-9998" ? (
+								<DropdownMenu.Item asChild>
+									<InterestModal queryKey={queryKey} />
+								</DropdownMenu.Item>
+							) : null}
 							<DropdownMenu.Item asChild>
 								<button
 									type="button"

packages/ark/src/components/column/interestModal.tsx

@@ -0,0 +1,157 @@
+import { ArrowLeftIcon, EditInterestIcon, LoaderIcon } from "@lume/icons";
+import { useStorage } from "@lume/storage";
+import { TOPICS, cn } from "@lume/utils";
+import * as Dialog from "@radix-ui/react-dialog";
+import { useQueryClient } from "@tanstack/react-query";
+import { ReactNode, useState } from "react";
+import { toast } from "sonner";
+
+export function InterestModal({
+	queryKey,
+	className,
+	children,
+}: { queryKey: string[]; className?: string; children?: ReactNode }) {
+	const storage = useStorage();
+	const queryClient = useQueryClient();
+
+	const [open, setOpen] = useState(false);
+	const [loading, setLoading] = useState(false);
+	const [hashtags, setHashtags] = useState(storage.interests?.hashtags || []);
+
+	const toggleHashtag = (item: string) => {
+		const arr = hashtags.includes(item)
+			? hashtags.filter((i) => i !== item)
+			: [...hashtags, item];
+		setHashtags(arr);
+	};
+
+	const toggleAll = (item: string[]) => {
+		const sets = new Set([...hashtags, ...item]);
+		setHashtags([...sets]);
+	};
+
+	const submit = async () => {
+		try {
+			setLoading(true);
+
+			const save = await storage.createSetting(
+				"interests",
+				JSON.stringify({ hashtags }),
+			);
+
+			if (save) {
+				storage.interests.hashtags = hashtags;
+				await queryClient.refetchQueries({ queryKey });
+			}
+
+			setLoading(false);
+			setOpen(false);
+		} catch (e) {
+			setLoading(false);
+			toast.error(String(e));
+		}
+	};
+
+	return (
+		<Dialog.Root open={open} onOpenChange={setOpen}>
+			<Dialog.Trigger
+				className={cn(
+					"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,
+				)}
+			>
+				{children ? (
+					children
+				) : (
+					<>
+						<EditInterestIcon className="size-5" />
+						Edit interest
+					</>
+				)}
+			</Dialog.Trigger>
+			<Dialog.Portal>
+				<Dialog.Overlay className="fixed inset-0 z-50 bg-black/10 backdrop-blur-sm dark:bg-white/10" />
+				<Dialog.Content className="fixed inset-0 z-50 flex items-center justify-center min-h-full">
+					<div
+						data-tauri-drag-region
+						className="h-20 absolute top-0 left-0 w-full"
+					/>
+					<div className="relative w-full max-w-xl xl:max-w-2xl bg-white h-[600px] xl:h-[700px] rounded-xl dark:bg-black overflow-hidden">
+						<div className="w-full h-full flex flex-col">
+							<div className="h-16 shrink-0 px-8 border-b border-neutral-100 dark:border-neutral-900 flex w-full items-center justify-between">
+								<div className="flex flex-col">
+									<h3 className="font-semibold">Edit Interest</h3>
+								</div>
+							</div>
+							<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"
+											>
+												<div className="w-full flex items-center justify-between">
+													<div className="inline-flex items-center gap-2.5">
+														<img
+															src={topic.icon}
+															alt={topic.title}
+															className="size-8 object-cover rounded-lg"
+														/>
+														<h3 className="text-lg font-semibold">
+															{topic.title}
+														</h3>
+													</div>
+													<button
+														type="button"
+														onClick={() => toggleAll(topic.content)}
+														className="text-sm font-medium text-blue-500"
+													>
+														Follow All
+													</button>
+												</div>
+												<div className="flex flex-wrap items-center gap-3">
+													{topic.content.map((hashtag) => (
+														<button
+															type="button"
+															onClick={() => toggleHashtag(hashtag)}
+															className={cn(
+																"inline-flex items-center rounded-full bg-neutral-100 dark:bg-neutral-900 border border-transparent px-2 py-1 text-sm font-medium",
+																hashtags.includes(hashtag)
+																	? "border-blue-500 text-blue-500"
+																	: "",
+															)}
+														>
+															{hashtag}
+														</button>
+													))}
+												</div>
+											</div>
+										))}
+									</div>
+								</div>
+								<div className="h-16 shrink-0 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">
+									<Dialog.Close 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" />
+										Cancel
+									</Dialog.Close>
+									<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" />
+										) : (
+											"Save"
+										)}
+									</button>
+								</div>
+							</div>
+						</div>
+					</div>
+				</Dialog.Content>
+			</Dialog.Portal>
+		</Dialog.Root>
+	);
+}

packages/ark/src/components/user/about.tsx

@@ -31,7 +31,7 @@ export function UserAbout({ className }: { className?: string }) {
 
 	return (
 		<div className={cn("select-text break-p", className)}>
-			{user.about || user.bio}
+			{user.about?.trim() || user.bio?.trim() || "No bio"}
 		</div>
 	);
 }

packages/icons/index.ts

@@ -108,3 +108,4 @@ export * from "./src/composeFilled";
 export * from "./src/settingsFilled";
 export * from "./src/bellFilled";
 export * from "./src/foryou";
+export * from "./src/editInterest";

packages/icons/src/editInterest.tsx

@@ -0,0 +1,24 @@
+import { SVGProps } from "react";
+
+export function EditInterestIcon(
+	props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>,
+) {
+	return (
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			width="24"
+			height="24"
+			fill="none"
+			viewBox="0 0 24 24"
+			{...props}
+		>
+			<path
+				stroke="currentColor"
+				strokeLinecap="round"
+				strokeLinejoin="round"
+				strokeWidth="2"
+				d="M15 22h.001M3 20.995L5.727 21c.39 0 .584 0 .767-.043.163-.04.318-.104.46-.191.161-.1.299-.237.574-.514l12.973-13.03c.53-.533.662-1.356.258-2.006a6.321 6.321 0 00-1.932-1.965 1.569 1.569 0 00-1.964.212L3.81 16.573c-.266.267-.398.4-.495.555-.085.138-.149.288-.19.445-.045.177-.05.365-.059.742L3 20.995zM19 15c-.637 1.616-1.34 2.345-3 3 1.66.655 2.363 1.384 3 3 .637-1.616 1.34-2.345 3-3-1.66-.655-2.363-1.384-3-3z"
+			/>
+		</svg>
+	);
+}

packages/lume-column-foryou/src/home.tsx

@@ -1,6 +1,8 @@
 import { TextNote, useArk } from "@lume/ark";
-import { ArrowRightCircleIcon, LoaderIcon } from "@lume/icons";
+import { InterestModal } from "@lume/ark/src/components/column/interestModal";
+import { ArrowRightCircleIcon, ForyouIcon, LoaderIcon } from "@lume/icons";
 import { useStorage } from "@lume/storage";
+import { EmptyFeed } from "@lume/ui";
 import { FETCH_LIMIT } from "@lume/utils";
 import { NDKEvent, NDKKind } from "@nostr-dev-kit/ndk";
 import { useInfiniteQuery, useQueryClient } from "@tanstack/react-query";
@@ -31,10 +33,14 @@ export function HomeRoute({ colKey }: { colKey: string }) {
 				signal: AbortSignal;
 				pageParam: number;
 			}) => {
+				if (!storage.interests?.hashtags) return [];
+
 				const events = await ark.getInfiniteEvents({
 					filter: {
 						kinds: [NDKKind.Text],
-						"#t": storage.interests.hashtags,
+						"#t": storage.interests.hashtags.map((item: string) =>
+							item.replace("#", "").toLowerCase(),
+						),
 					},
 					limit: FETCH_LIMIT,
 					pageParam,
@@ -81,6 +87,21 @@ export function HomeRoute({ colKey }: { colKey: string }) {
 		};
 	}, []);
 
+	if (!storage.interests?.hashtags?.length) {
+		return (
+			<div className="px-3 mt-3">
+				<EmptyFeed subtext="You can more interests to build up your timeline" />
+				<InterestModal
+					queryKey={[colKey]}
+					className="mt-3 w-full inline-flex items-center justify-center rounded-lg h-9 bg-blue-500 hover:bg-blue-600 text-white"
+				>
+					<ForyouIcon className="size-5" />
+					Add interest
+				</InterestModal>
+			</div>
+		);
+	}
+
 	return (
 		<div className="w-full h-full">
 			<VList ref={ref} cache={cache} overscan={2} className="flex-1 px-3">

packages/lume-column-foryou/src/index.tsx

@@ -33,14 +33,18 @@ export function ForYou({ column }: { column: IColumn }) {
 				title="For You"
 				icon={<ForyouIcon className="size-4" />}
 			/>
-			<Column.Live
+			{storage.interests?.hashtags ? (
-				filter={{
+				<Column.Live
-					kinds: [NDKKind.Text],
+					filter={{
-					"#t": storage.interests.hashtags,
+						kinds: [NDKKind.Text],
-					since: since.current,
+						"#t": storage.interests.hashtags.map((item: string) =>
-				}}
+							item.replace("#", "").toLowerCase(),
-				onClick={refresh}
+						),
-			/>
+						since: since.current,
+					}}
+					onClick={refresh}
+				/>
+			) : null}
 			<Column.Content>
 				<Column.Route path="/" element={<HomeRoute colKey={colKey} />} />
 				<Column.Route path="/events/:id" element={<EventRoute />} />

packages/lume-column-timeline/src/home.tsx

@@ -1,10 +1,11 @@
 import { RepostNote, TextNote, useArk } from "@lume/ark";
-import { ArrowRightCircleIcon, LoaderIcon } from "@lume/icons";
+import { ArrowRightCircleIcon, LoaderIcon, SearchIcon } from "@lume/icons";
 import { EmptyFeed } from "@lume/ui";
 import { FETCH_LIMIT } from "@lume/utils";
 import { NDKEvent, NDKKind } from "@nostr-dev-kit/ndk";
 import { useInfiniteQuery, useQueryClient } from "@tanstack/react-query";
 import { useEffect, useMemo, useRef } from "react";
+import { Link } from "react-router-dom";
 import { CacheSnapshot, VList, VListHandle } from "virtua";
 
 export function HomeRoute({ colKey }: { colKey: string }) {
@@ -30,6 +31,8 @@ export function HomeRoute({ colKey }: { colKey: string }) {
 				signal: AbortSignal;
 				pageParam: number;
 			}) => {
+				if (!ark.account.contacts.length) return [];
+
 				const events = await ark.getInfiniteEvents({
 					filter: {
 						kinds: [NDKKind.Text, NDKKind.Repost],
@@ -94,6 +97,13 @@ export function HomeRoute({ colKey }: { colKey: string }) {
 		return (
 			<div className="px-3 mt-3">
 				<EmptyFeed />
+				<Link
+					to="/suggest"
+					className="mt-3 w-full inline-flex items-center justify-center rounded-lg h-9 bg-blue-500 hover:bg-blue-600 text-white"
+				>
+					<SearchIcon className="size-5" />
+					Find accounts to follow
+				</Link>
 			</div>
 		);
 	}

packages/lume-column-timeline/src/index.tsx

@@ -1,7 +1,7 @@
 import { Column, useArk } from "@lume/ark";
 import { TimelineIcon } from "@lume/icons";
 import { IColumn } from "@lume/types";
-import { EventRoute, UserRoute } from "@lume/ui";
+import { EventRoute, SuggestRoute, UserRoute } from "@lume/ui";
 import { NDKEvent, NDKKind } from "@nostr-dev-kit/ndk";
 import { useQueryClient } from "@tanstack/react-query";
 import { useRef } from "react";
@@ -32,20 +32,24 @@ export function Timeline({ column }: { column: IColumn }) {
 				title="Timeline"
 				icon={<TimelineIcon className="size-4" />}
 			/>
-			<Column.Live
+			{ark.account.contacts.length ? (
-				filter={{
+				<Column.Live
-					kinds: [NDKKind.Text, NDKKind.Repost],
+					filter={{
-					authors: !ark.account.contacts.length
+						kinds: [NDKKind.Text, NDKKind.Repost],
-						? [ark.account.pubkey]
+						authors: ark.account.contacts,
-						: ark.account.contacts,
+						since: since.current,
-					since: since.current,
+					}}
-				}}
+					onClick={refresh}
-				onClick={refresh}
+				/>
-			/>
+			) : null}
 			<Column.Content>
 				<Column.Route path="/" element={<HomeRoute colKey={colKey} />} />
 				<Column.Route path="/events/:id" element={<EventRoute />} />
 				<Column.Route path="/users/:id" element={<UserRoute />} />
+				<Column.Route
+					path="/suggest"
+					element={<SuggestRoute queryKey={[colKey]} />}
+				/>
 			</Column.Content>
 		</Column.Root>
 	);

packages/storage/src/storage.ts

@@ -57,6 +57,12 @@ export class LumeStorage {
 
 	public async init() {
 		const settings = await this.getAllSettings();
+		const account = await this.getActiveAccount();
+
+		if (account) {
+			this.currentUser = account;
+			this.interests = await this.getInterests();
+		}
 
 		for (const item of settings) {
 			if (item.value.length > 10) {
@@ -65,20 +71,6 @@ export class LumeStorage {
 				this.settings[item.key] = !!parseInt(item.value);
 			}
 		}
-
-		const account = await this.getActiveAccount();
-
-		if (account) {
-			this.currentUser = account;
-
-			const interests = await this.getInterests();
-			if (interests) {
-				interests.hashtags = interests.hashtags.map((item: string) =>
-					item.replace("#", "").toLowerCase(),
-				);
-				this.interests = interests;
-			}
-		}
 	}
 
 	async #keyring_save(key: string, value: string) {
@@ -430,7 +422,10 @@ export class LumeStorage {
 		const results: { key: string; value: string }[] = await this.#db.select(
 			"SELECT * FROM settings WHERE key = 'interests' ORDER BY id DESC LIMIT 1;",
 		);
+
 		if (!results.length) return null;
+		if (!results[0].value.length) return null;
+
 		return JSON.parse(results[0].value) as Interests;
 	}
 

packages/ui/src/emptyFeed.tsx

@@ -15,7 +15,9 @@ export function EmptyFeed({
 		>
 			<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="font-semibold text-lg">
+					{text ? text : "This feed is empty"}
+				</p>
 				<p className="leading-tight text-sm">
 					{subtext
 						? subtext

packages/ui/src/index.ts

@@ -11,5 +11,6 @@ export * from "./replyList";
 export * from "./emptyFeed";
 export * from "./routes/event";
 export * from "./routes/user";
+export * from "./routes/suggest";
 export * from "./translateRegisterModal";
 export * from "./user";

packages/ui/src/onboarding/finish.tsx

@@ -18,7 +18,7 @@ export function OnboardingFinishScreen() {
 		await queryClient.refetchQueries({ queryKey: ["timeline-9999"] });
 
 		setLoading(false);
-		setOnboarding(false);
+		setOnboarding({ open: false, newUser: false });
 	};
 
 	return (

packages/ui/src/routes/suggest.tsx

@@ -0,0 +1,183 @@
+import { User, useArk } from "@lume/ark";
+import {
+	ArrowLeftIcon,
+	ArrowRightIcon,
+	CancelIcon,
+	LoaderIcon,
+	PlusIcon,
+} from "@lume/icons";
+import { cn } from "@lume/utils";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { nip19 } from "nostr-tools";
+import { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { toast } from "sonner";
+import { WindowVirtualizer } from "virtua";
+
+const POPULAR_USERS = [
+	"npub180cvv07tjdrrgpa0j7j7tmnyl2yr6yr7l8j4s3evf6u64th6gkwsyjh6w6",
+	"npub1sg6plzptd64u62a878hep2kev88swjh3tw00gjsfl8f237lmu63q0uf63m",
+	"npub1xtscya34g58tk0z605fvr788k263gsu6cy9x0mhnm87echrgufzsevkk5s",
+	"npub1gcxzte5zlkncx26j68ez60fzkvtkm9e0vrwdcvsjakxf9mu9qewqlfnj5z",
+	"npub1az9xj85cmxv8e9j9y80lvqp97crsqdu2fpu3srwthd99qfu9qsgstam8y8",
+	"npub1a2cww4kn9wqte4ry70vyfwqyqvpswksna27rtxd8vty6c74era8sdcw83a",
+	"npub168ghgug469n4r2tuyw05dmqhqv5jcwm7nxytn67afmz8qkc4a4zqsu2dlc",
+	"npub133vj8ycevdle0cq8mtgddq0xtn34kxkwxvak983dx0u5vhqnycyqj6tcza",
+	"npub18ams6ewn5aj2n3wt2qawzglx9mr4nzksxhvrdc4gzrecw7n5tvjqctp424",
+	"npub1r0rs5q2gk0e3dk3nlc7gnu378ec6cnlenqp8a3cjhyzu6f8k5sgs4sq9ac",
+	"npub1prya33fnqerq0fljwjtp77ehtu7jlsjt5ydhwveuwmqdsdm6k8esk42xcv",
+	"npub19mduaf5569jx9xz555jcx3v06mvktvtpu0zgk47n4lcpjsz43zzqhj6vzk",
+];
+
+const LUME_USERS = [
+	"npub1zfss807aer0j26mwp2la0ume0jqde3823rmu97ra6sgyyg956e0s6xw445",
+];
+
+export function SuggestRoute({ queryKey }: { queryKey: string[] }) {
+	const ark = useArk();
+	const queryClient = useQueryClient();
+	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("/");
+
+			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) {
+				await queryClient.refetchQueries({ queryKey: ["timeline-9999"] });
+			}
+
+			setLoading(false);
+
+			return navigate("/");
+		} catch (e) {
+			setLoading(false);
+			toast.error(String(e));
+		}
+	};
+
+	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">
+					<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"
+						onClick={() => navigate(-1)}
+					>
+						<ArrowLeftIcon className="size-5" />
+					</button>
+					<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"
+						onClick={() => navigate(1)}
+					>
+						<ArrowRightIcon className="size-5" />
+					</button>
+				</div>
+				<div className="relative px-3">
+					<div className="flex items-center h-16">
+						<h3 className="font-semibold text-xl">Suggested Follows</h3>
+					</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">
+								<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="py-5 h-max w-full overflow-hidden"
+								>
+									<User.Provider pubkey={item.pubkey}>
+										<User.Root>
+											<div className="flex h-full w-full flex-col gap-2">
+												<div className="flex items-center justify-between">
+													<div className="flex items-center gap-2.5">
+														<User.Avatar className="size-10 shrink-0 rounded-lg" />
+														<User.Name className="max-w-[15rem] truncate font-semibold leadning-tight" />
+													</div>
+													<button
+														type="button"
+														onClick={() => toggleFollow(item.pubkey)}
+														className={cn(
+															"inline-flex h-8 shrink-0 pl-2 pr-2.5 items-center justify-center gap-1 rounded-lg text-sm 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>
+												<User.About className="break-p text-neutral-800 dark:text-neutral-400 max-w-none select-text whitespace-pre-line" />
+											</div>
+										</User.Root>
+									</User.Provider>
+								</div>
+							))
+						)}
+					</div>
+					<div className="sticky z-10 flex items-center justify-center w-full bottom-0">
+						<button
+							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"
+						>
+							Save
+						</button>
+					</div>
+				</div>
+			</WindowVirtualizer>
+		</div>
+	);
+}