Merge pull request #145 from luminous-devs/feat/search

feat: add search based on NIP-50

apps/desktop/src/routes/home/index.tsx

@@ -11,20 +11,18 @@ import {
 	ArrowLeftIcon,
 	ArrowRightIcon,
 	NewColumnIcon,
-	PlusIcon,
 	PlusSquareIcon,
 } from "@lume/icons";
 import { IColumn } from "@lume/types";
 import { TutorialModal } from "@lume/ui/src/tutorial/modal";
 import { COL_TYPES } from "@lume/utils";
 import * as Tooltip from "@radix-ui/react-tooltip";
-import { useRef, useState } from "react";
-import { VList, VListHandle } from "virtua";
+import { useState } from "react";
+import { VList } from "virtua";
 
 export function HomeScreen() {
-	const ref = useRef<VListHandle>(null);
+	const { columns, vlistRef, addColumn } = useColumnContext();
 	const [selectedIndex, setSelectedIndex] = useState(-1);
-	const { columns, addColumn } = useColumnContext();
 
 	const renderItem = (column: IColumn) => {
 		switch (column.kind) {
@@ -52,20 +50,20 @@ export function HomeScreen() {
 	return (
 		<div className="relative w-full h-full">
 			<VList
-				ref={ref}
+				ref={vlistRef}
 				className="h-full w-full flex-nowrap overflow-x-auto !overflow-y-hidden scrollbar-none focus:outline-none"
 				itemSize={420}
 				tabIndex={0}
 				horizontal
 				onKeyDown={(e) => {
-					if (!ref.current) return;
+					if (!vlistRef.current) return;
 					switch (e.code) {
 						case "ArrowUp":
 						case "ArrowLeft": {
 							e.preventDefault();
 							const prevIndex = Math.max(selectedIndex - 1, 0);
 							setSelectedIndex(prevIndex);
-							ref.current.scrollToIndex(prevIndex, {
+							vlistRef.current.scrollToIndex(prevIndex, {
 								align: "center",
 								smooth: true,
 							});
@@ -76,7 +74,7 @@ export function HomeScreen() {
 							e.preventDefault();
 							const nextIndex = Math.min(selectedIndex + 1, columns.length - 1);
 							setSelectedIndex(nextIndex);
-							ref.current.scrollToIndex(nextIndex, {
+							vlistRef.current.scrollToIndex(nextIndex, {
 								align: "center",
 								smooth: true,
 							});
@@ -114,7 +112,7 @@ export function HomeScreen() {
 									onClick={() => {
 										const prevIndex = Math.max(selectedIndex - 1, 0);
 										setSelectedIndex(prevIndex);
-										ref.current.scrollToIndex(prevIndex, {
+										vlistRef.current.scrollToIndex(prevIndex, {
 											align: "center",
 											smooth: true,
 										});
@@ -141,7 +139,7 @@ export function HomeScreen() {
 											columns.length - 1,
 										);
 										setSelectedIndex(nextIndex);
-										ref.current.scrollToIndex(nextIndex, {
+										vlistRef.current.scrollToIndex(nextIndex, {
 											align: "center",
 											smooth: true,
 										});

packages/ark/package.json

@@ -37,7 +37,8 @@
 		"sonner": "^1.3.1",
 		"string-strip-html": "^13.4.5",
 		"tippy.js": "^6.3.7",
-		"use-context-selector": "^1.4.1"
+		"use-context-selector": "^1.4.1",
+		"virtua": "^0.20.5"
 	},
 	"devDependencies": {
 		"@lume/tailwindcss": "workspace:^",

packages/ark/src/ark.ts

@@ -266,6 +266,12 @@ export class Ark {
 		return event;
 	}
 
+	public async getEvents(filter: NDKFilter) {
+		const events = await this.ndk.fetchEvents(filter);
+		if (!events) return [];
+		return [...events];
+	}
+
 	public getEventThread({
 		content,
 		tags,

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

@@ -2,17 +2,21 @@ import { useStorage } from "@lume/storage";
 import { IColumn } from "@lume/types";
 import { COL_TYPES } from "@lume/utils";
 import {
-	ReactNode,
+	type MutableRefObject,
+	type ReactNode,
 	createContext,
 	useCallback,
 	useContext,
 	useEffect,
+	useRef,
 	useState,
 } from "react";
 import { toast } from "sonner";
+import { type VListHandle } from "virtua";
 
 type ColumnContext = {
 	columns: IColumn[];
+	vlistRef: MutableRefObject<VListHandle>;
 	addColumn: (column: IColumn) => Promise<void>;
 	removeColumn: (id: number) => Promise<void>;
 	moveColumn: (id: number, position: "left" | "right") => void;
@@ -24,6 +28,8 @@ const ColumnContext = createContext<ColumnContext>(null);
 
 export function ColumnProvider({ children }: { children: ReactNode }) {
 	const storage = useStorage();
+	const vlistRef = useRef<VListHandle>(null);
+
 	const [columns, setColumns] = useState<IColumn[]>([
 		{
 			id: 9999,
@@ -112,6 +118,7 @@ export function ColumnProvider({ children }: { children: ReactNode }) {
 		<ColumnContext.Provider
 			value={{
 				columns,
+				vlistRef,
 				addColumn,
 				removeColumn,
 				moveColumn,

packages/ark/src/components/note/child.tsx

@@ -109,7 +109,7 @@ export function NoteChild({
 				<User.Root>
 					<User.Avatar className="size-10 shrink-0 rounded-lg object-cover" />
 					<div className="absolute left-2 top-2 inline-flex items-center gap-1.5 font-semibold leading-tight">
-						<User.Name />
+						<User.Name className="max-w-[10rem] truncate" />
 						<div className="font-normal text-neutral-700 dark:text-neutral-300">
 							{isRoot ? "posted:" : "replied:"}
 						</div>

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

@@ -38,10 +38,12 @@ export function UserNip05({
 
 	return (
 		<div className="inline-flex items-center gap-1">
-			<p className={cn("text-sm font-medium", className)}>
-				{user?.nip05?.startsWith("_@")
-					? user?.nip05?.replace("_@", "")
-					: displayNpub(pubkey, 16)}
+			<p className={cn("text-sm", className)}>
+				{!user?.nip05
+					? displayNpub(pubkey, 16)
+					: user?.nip05?.startsWith("_@")
+					  ? user?.nip05?.replace("_@", "")
+					  : user?.nip05}
 			</p>
 			{!isLoading && verified ? (
 				<VerifiedIcon className="size-4 text-teal-500" />

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

@@ -8,16 +8,20 @@ const UserContext = createContext<NDKUserProfile>(null);
 export function UserProvider({
 	pubkey,
 	children,
-}: { pubkey: string; children: ReactNode }) {
+	embed,
+}: { pubkey: string; children: ReactNode; embed?: string }) {
 	const ark = useArk();
 	const { data: user } = useQuery({
 		queryKey: ["user", pubkey],
 		queryFn: async () => {
+			if (embed) return JSON.parse(embed) as NDKUserProfile;
+
 			const profile = await ark.getUserProfile(pubkey);
 			if (!profile)
 				throw new Error(
 					`Cannot get metadata for ${pubkey}, will be retry after 10 seconds`,
 				);
+
 			return profile;
 		},
 		refetchOnMount: false,

packages/ark/src/provider.tsx

@@ -88,7 +88,6 @@ export const LumeProvider = ({ children }: PropsWithChildren<object>) => {
 	async function initNDK() {
 		const explicitRelayUrls = normalizeRelayUrlSet([
 			"wss://bostr.nokotaro.com/",
-			"wss://nostr.mutinywallet.com/",
 		]);
 
 		// #TODO: user should config outbox relays
@@ -111,7 +110,7 @@ export const LumeProvider = ({ children }: PropsWithChildren<object>) => {
 			enableOutboxModel: !storage.settings.lowPower,
 			autoConnectUserRelays: !storage.settings.lowPower,
 			autoFetchUserMutelist: !storage.settings.lowPower,
-			clientName: "Lume",
+			// clientName: "Lume",
 			// clientNip89: '',
 		});
 

packages/icons/index.ts

@@ -110,3 +110,4 @@ export * from "./src/bellFilled";
 export * from "./src/foryou";
 export * from "./src/editInterest";
 export * from "./src/newColumn";
+export * from "./src/searchFilled";

packages/icons/src/searchFilled.tsx

@@ -0,0 +1,17 @@
+export function SearchFilledIcon(props: JSX.IntrinsicElements["svg"]) {
+	return (
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			width="24"
+			height="24"
+			fill="none"
+			viewBox="0 0 24 24"
+			{...props}
+		>
+			<path
+				fill="currentColor"
+				d="M11.5 2a9.5 9.5 0 105.973 16.887l2.82 2.82a1 1 0 001.414-1.414l-2.82-2.82A9.5 9.5 0 0011.5 2z"
+			/>
+		</svg>
+	);
+}

packages/storage/src/storage.ts

@@ -442,14 +442,13 @@ export class LumeStorage {
 	}
 
 	public async logout() {
-		const res = await this.#db.execute(
+		await this.createSetting("nsecbunker", "0");
+		await this.#db.execute(
 			"UPDATE accounts SET is_active = '0' WHERE id = $1;",
 			[this.currentUser.id],
 		);
 
-		if (res) {
-			this.currentUser = null;
-			this.nwc = null;
-		}
+		this.currentUser = null;
+		this.nwc = null;
 	}
 }

packages/ui/package.json

@@ -31,6 +31,7 @@
 		"slate-react": "^0.101.5",
 		"sonner": "^1.3.1",
 		"uqr": "^0.1.2",
+		"use-debounce": "^10.0.0",
 		"virtua": "^0.20.5"
 	},
 	"devDependencies": {

packages/ui/src/cmdk/command-score.ts

@@ -0,0 +1,176 @@
+// The scores are arranged so that a continuous match of characters will
+// result in a total score of 1.
+//
+// The best case, this character is a match, and either this is the start
+// of the string, or the previous character was also a match.
+var SCORE_CONTINUE_MATCH = 1,
+	// A new match at the start of a word scores better than a new match
+	// elsewhere as it's more likely that the user will type the starts
+	// of fragments.
+	// NOTE: We score word jumps between spaces slightly higher than slashes, brackets
+	// hyphens, etc.
+	SCORE_SPACE_WORD_JUMP = 0.9,
+	SCORE_NON_SPACE_WORD_JUMP = 0.8,
+	// Any other match isn't ideal, but we include it for completeness.
+	SCORE_CHARACTER_JUMP = 0.17,
+	// If the user transposed two letters, it should be significantly penalized.
+	//
+	// i.e. "ouch" is more likely than "curtain" when "uc" is typed.
+	SCORE_TRANSPOSITION = 0.1,
+	// The goodness of a match should decay slightly with each missing
+	// character.
+	//
+	// i.e. "bad" is more likely than "bard" when "bd" is typed.
+	//
+	// This will not change the order of suggestions based on SCORE_* until
+	// 100 characters are inserted between matches.
+	PENALTY_SKIPPED = 0.999,
+	// The goodness of an exact-case match should be higher than a
+	// case-insensitive match by a small amount.
+	//
+	// i.e. "HTML" is more likely than "haml" when "HM" is typed.
+	//
+	// This will not change the order of suggestions based on SCORE_* until
+	// 1000 characters are inserted between matches.
+	PENALTY_CASE_MISMATCH = 0.9999,
+	// Match higher for letters closer to the beginning of the word
+	PENALTY_DISTANCE_FROM_START = 0.9,
+	// If the word has more characters than the user typed, it should
+	// be penalised slightly.
+	//
+	// i.e. "html" is more likely than "html5" if I type "html".
+	//
+	// However, it may well be the case that there's a sensible secondary
+	// ordering (like alphabetical) that it makes sense to rely on when
+	// there are many prefix matches, so we don't make the penalty increase
+	// with the number of tokens.
+	PENALTY_NOT_COMPLETE = 0.99;
+
+var IS_GAP_REGEXP = /[\\\/_+.#"@\[\(\{&]/,
+	COUNT_GAPS_REGEXP = /[\\\/_+.#"@\[\(\{&]/g,
+	IS_SPACE_REGEXP = /[\s-]/,
+	COUNT_SPACE_REGEXP = /[\s-]/g;
+
+function commandScoreInner(
+	string,
+	abbreviation,
+	lowerString,
+	lowerAbbreviation,
+	stringIndex,
+	abbreviationIndex,
+	memoizedResults,
+) {
+	if (abbreviationIndex === abbreviation.length) {
+		if (stringIndex === string.length) {
+			return SCORE_CONTINUE_MATCH;
+		}
+		return PENALTY_NOT_COMPLETE;
+	}
+
+	var memoizeKey = `${stringIndex},${abbreviationIndex}`;
+	if (memoizedResults[memoizeKey] !== undefined) {
+		return memoizedResults[memoizeKey];
+	}
+
+	var abbreviationChar = lowerAbbreviation.charAt(abbreviationIndex);
+	var index = lowerString.indexOf(abbreviationChar, stringIndex);
+	var highScore = 0;
+
+	var score, transposedScore, wordBreaks, spaceBreaks;
+
+	while (index >= 0) {
+		score = commandScoreInner(
+			string,
+			abbreviation,
+			lowerString,
+			lowerAbbreviation,
+			index + 1,
+			abbreviationIndex + 1,
+			memoizedResults,
+		);
+		if (score > highScore) {
+			if (index === stringIndex) {
+				score *= SCORE_CONTINUE_MATCH;
+			} else if (IS_GAP_REGEXP.test(string.charAt(index - 1))) {
+				score *= SCORE_NON_SPACE_WORD_JUMP;
+				wordBreaks = string
+					.slice(stringIndex, index - 1)
+					.match(COUNT_GAPS_REGEXP);
+				if (wordBreaks && stringIndex > 0) {
+					score *= Math.pow(PENALTY_SKIPPED, wordBreaks.length);
+				}
+			} else if (IS_SPACE_REGEXP.test(string.charAt(index - 1))) {
+				score *= SCORE_SPACE_WORD_JUMP;
+				spaceBreaks = string
+					.slice(stringIndex, index - 1)
+					.match(COUNT_SPACE_REGEXP);
+				if (spaceBreaks && stringIndex > 0) {
+					score *= Math.pow(PENALTY_SKIPPED, spaceBreaks.length);
+				}
+			} else {
+				score *= SCORE_CHARACTER_JUMP;
+				if (stringIndex > 0) {
+					score *= Math.pow(PENALTY_SKIPPED, index - stringIndex);
+				}
+			}
+
+			if (string.charAt(index) !== abbreviation.charAt(abbreviationIndex)) {
+				score *= PENALTY_CASE_MISMATCH;
+			}
+		}
+
+		if (
+			(score < SCORE_TRANSPOSITION &&
+				lowerString.charAt(index - 1) ===
+					lowerAbbreviation.charAt(abbreviationIndex + 1)) ||
+			(lowerAbbreviation.charAt(abbreviationIndex + 1) ===
+				lowerAbbreviation.charAt(abbreviationIndex) && // allow duplicate letters. Ref #7428
+				lowerString.charAt(index - 1) !==
+					lowerAbbreviation.charAt(abbreviationIndex))
+		) {
+			transposedScore = commandScoreInner(
+				string,
+				abbreviation,
+				lowerString,
+				lowerAbbreviation,
+				index + 1,
+				abbreviationIndex + 2,
+				memoizedResults,
+			);
+
+			if (transposedScore * SCORE_TRANSPOSITION > score) {
+				score = transposedScore * SCORE_TRANSPOSITION;
+			}
+		}
+
+		if (score > highScore) {
+			highScore = score;
+		}
+
+		index = lowerString.indexOf(abbreviationChar, index + 1);
+	}
+
+	memoizedResults[memoizeKey] = highScore;
+	return highScore;
+}
+
+function formatInput(string) {
+	// convert all valid space characters to space so they match each other
+	return string.toLowerCase().replace(COUNT_SPACE_REGEXP, " ");
+}
+
+export function commandScore(string: string, abbreviation: string): number {
+	/* NOTE:
+	 * in the original, we used to do the lower-casing on each recursive call, but this meant that toLowerCase()
+	 * was the dominating cost in the algorithm, passing both is a little ugly, but considerably faster.
+	 */
+	return commandScoreInner(
+		string,
+		abbreviation,
+		formatInput(string),
+		formatInput(abbreviation),
+		0,
+		0,
+		{},
+	);
+}

packages/ui/src/layouts/app.tsx

@@ -3,6 +3,7 @@ import { type Platform } from "@tauri-apps/plugin-os";
 import { Outlet } from "react-router-dom";
 import { Editor } from "../editor/column";
 import { Navigation } from "../navigation";
+import { SearchDialog } from "../search/dialog";
 import { WindowTitleBar } from "../titlebar";
 
 export function AppLayout({ platform }: { platform: Platform }) {
@@ -21,6 +22,7 @@ export function AppLayout({ platform }: { platform: Platform }) {
 			<div className="flex w-full h-full min-h-0">
 				<Navigation />
 				<Editor />
+				<SearchDialog />
 				<div className="flex-1 h-full px-1 pb-1">
 					<Outlet />
 				</div>

packages/ui/src/navigation.tsx

@@ -7,10 +7,12 @@ import {
 	DepotIcon,
 	HomeFilledIcon,
 	HomeIcon,
+	SearchFilledIcon,
+	SearchIcon,
 	SettingsFilledIcon,
 	SettingsIcon,
 } from "@lume/icons";
-import { cn, editorAtom } from "@lume/utils";
+import { cn, editorAtom, searchAtom } from "@lume/utils";
 import { useAtom } from "jotai";
 import { useHotkeys } from "react-hotkeys-hook";
 import { NavLink } from "react-router-dom";
@@ -19,6 +21,9 @@ import { UnreadActivity } from "./unread";
 
 export function Navigation() {
 	const [isEditorOpen, setIsEditorOpen] = useAtom(editorAtom);
+	const [search, setSearch] = useAtom(searchAtom);
+
+	// shortcut for editor
 	useHotkeys("meta+n", () => setIsEditorOpen((state) => !state), []);
 
 	return (
@@ -117,7 +122,27 @@ export function Navigation() {
 					</NavLink>
 				</div>
 			</div>
-			<div className="flex flex-col">
+			<div className="flex flex-col gap-2">
+				<button
+					type="button"
+					onClick={() => setSearch((open) => !open)}
+					className="inline-flex flex-col items-center justify-center"
+				>
+					<div
+						className={cn(
+							"inline-flex aspect-square h-auto w-full items-center justify-center rounded-xl",
+							search
+								? "bg-black/10 text-black dark:bg-white/10 dark:text-white"
+								: "text-black/50 dark:text-neutral-400",
+						)}
+					>
+						{search ? (
+							<SearchFilledIcon className="size-6" />
+						) : (
+							<SearchIcon className="size-6" />
+						)}
+					</div>
+				</button>
 				<NavLink
 					to="/settings/"
 					preventScrollReset={true}

packages/ui/src/search/dialog.tsx

@@ -0,0 +1,170 @@
+import { Note, User, useArk, useColumnContext } from "@lume/ark";
+import { LoaderIcon, SearchIcon } from "@lume/icons";
+import { COL_TYPES, searchAtom } from "@lume/utils";
+import { type NDKEvent, NDKKind } from "@nostr-dev-kit/ndk";
+import { useAtom } from "jotai";
+import { useEffect, useState } from "react";
+import { useDebounce } from "use-debounce";
+import { Command } from "../cmdk";
+
+export function SearchDialog() {
+	const [open, setOpen] = useAtom(searchAtom);
+	const [loading, setLoading] = useState(false);
+	const [events, setEvents] = useState<NDKEvent[]>([]);
+	const [search, setSearch] = useState("");
+	const [value] = useDebounce(search, 1200);
+
+	const ark = useArk();
+	const { vlistRef, columns, addColumn } = useColumnContext();
+
+	const searchEvents = async () => {
+		if (!value.length) return;
+
+		// start loading
+		setLoading(true);
+
+		// search events, require nostr.band relay
+		const events = await ark.getEvents({
+			kinds: [NDKKind.Text, NDKKind.Metadata],
+			search: value,
+			limit: 20,
+		});
+
+		// update state
+		setLoading(false);
+		setEvents(events);
+	};
+
+	const selectEvent = (kind: NDKKind, value: string) => {
+		if (!value.length) return;
+
+		if (kind === NDKKind.Metadata) {
+			// add new column
+			addColumn({
+				kind: COL_TYPES.user,
+				title: "User",
+				content: value,
+			});
+		} else {
+			// add new column
+			addColumn({
+				kind: COL_TYPES.thread,
+				title: "",
+				content: value,
+			});
+		}
+
+		// update state
+		setOpen(false);
+		vlistRef?.current.scrollToIndex(columns.length);
+	};
+
+	useEffect(() => {
+		searchEvents();
+	}, [value]);
+
+	// Toggle the menu when ⌘K is pressed
+	useEffect(() => {
+		const down = (e) => {
+			if (e.key === "k" && (e.metaKey || e.ctrlKey)) {
+				e.preventDefault();
+				setOpen((open) => !open);
+			}
+		};
+
+		document.addEventListener("keydown", down);
+		return () => document.removeEventListener("keydown", down);
+	}, []);
+
+	return (
+		<Command.Dialog
+			open={open}
+			onOpenChange={setOpen}
+			shouldFilter={false}
+			label="Search"
+			overlayClassName="fixed inset-0 z-50 bg-black/10 backdrop-blur-sm dark:bg-white/10"
+			contentClassName="fixed inset-0 z-50 flex items-center justify-center min-h-full"
+			className="relative w-full max-w-xl bg-white h-min rounded-xl dark:bg-black"
+		>
+			<div className="px-3 pt-3">
+				<Command.Input
+					value={search}
+					onValueChange={setSearch}
+					placeholder="Type something to search..."
+					className="w-full h-12 bg-neutral-100 dark:bg-neutral-900 rounded-xl border-none focus:outline-none focus:ring-0 placeholder:text-neutral-500 dark:placeholder:text-neutral-600"
+				/>
+			</div>
+			<Command.List className="mt-4 h-[500px] px-3 overflow-y-auto w-full flex flex-col">
+				{loading ? (
+					<Command.Loading className="flex items-center justify-center h-full">
+						<LoaderIcon className="size-5 animate-spin" />
+					</Command.Loading>
+				) : !events.length ? (
+					<Command.Empty className="flex items-center justify-center h-full text-sm">
+						No results found.
+					</Command.Empty>
+				) : (
+					<>
+						<Command.Group heading="Users">
+							{events
+								.filter((ev) => ev.kind === NDKKind.Metadata)
+								.map((event) => (
+									<Command.Item
+										key={event.id}
+										value={event.pubkey}
+										onSelect={(value) => selectEvent(event.kind, value)}
+										className="py-3 px-3 bg-neutral-50 dark:bg-neutral-950 rounded-xl my-3 focus:ring-1 focus:ring-blue-500"
+									>
+										<User.Provider pubkey={event.pubkey} embed={event.content}>
+											<User.Root className="flex items-center justify-between">
+												<div className="flex items-center gap-2">
+													<User.Avatar className="size-11 rounded-lg shrink-0 ring-1 ring-neutral-100 dark:ring-neutral-900" />
+													<div>
+														<User.Name className="font-semibold" />
+														<User.NIP05 pubkey={event.pubkey} />
+													</div>
+												</div>
+												<User.Button
+													target={event.pubkey}
+													className="inline-flex items-center justify-center w-20 font-medium text-sm 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"
+												/>
+											</User.Root>
+										</User.Provider>
+									</Command.Item>
+								))}
+						</Command.Group>
+						<Command.Group heading="Notes">
+							{events
+								.filter((ev) => ev.kind === NDKKind.Text)
+								.map((event) => (
+									<Command.Item
+										key={event.id}
+										value={event.id}
+										onSelect={(value) => selectEvent(event.kind, value)}
+										className="py-3 px-3 bg-neutral-50 dark:bg-neutral-950 rounded-xl my-3"
+									>
+										<Note.Provider event={event}>
+											<Note.Root>
+												<Note.User />
+												<div className="select-text mt-2 leading-normal line-clamp-3 text-balance">
+													{event.content}
+												</div>
+											</Note.Root>
+										</Note.Provider>
+									</Command.Item>
+								))}
+						</Command.Group>
+					</>
+				)}
+				{!loading ? (
+					<div className="h-full flex items-center justify-center flex-col gap-3">
+						<div className="size-16 bg-blue-100 dark:bg-blue-900 rounded-full inline-flex items-center justify-center text-blue-500">
+							<SearchIcon className="size-6" />
+						</div>
+						Try searching for people, notes, or keywords
+					</div>
+				) : null}
+			</Command.List>
+		</Command.Dialog>
+	);
+}

packages/utils/src/state.ts

@@ -22,3 +22,6 @@ export const activityUnreadAtom = atom(0);
 
 // Tutorial
 export const tutorialAtom = atomWithStorage("tutorial", true);
+
+// Search
+export const searchAtom = atom(false);

pnpm-lock.yaml

@@ -374,6 +374,9 @@ importers:
       use-context-selector:
         specifier: ^1.4.1
         version: 1.4.1(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)
+      virtua:
+        specifier: ^0.20.5
+        version: 0.20.5(react-dom@18.2.0)(react@18.2.0)
     devDependencies:
       '@lume/tailwindcss':
         specifier: workspace:^
@@ -1051,6 +1054,9 @@ importers:
       uqr:
         specifier: ^0.1.2
         version: 0.1.2
+      use-debounce:
+        specifier: ^10.0.0
+        version: 10.0.0(react@18.2.0)
       virtua:
         specifier: ^0.20.5
         version: 0.20.5(react-dom@18.2.0)(react@18.2.0)
@@ -8373,6 +8379,15 @@ packages:
       scheduler: 0.23.0
     dev: false
 
+  /use-debounce@10.0.0(react@18.2.0):
+    resolution: {integrity: sha512-XRjvlvCB46bah9IBXVnq/ACP2lxqXyZj0D9hj4K5OzNroMDpTEBg8Anuh1/UfRTRs7pLhQ+RiNxxwZu9+MVl1A==}
+    engines: {node: '>= 16.0.0'}
+    peerDependencies:
+      react: '>=16.8.0'
+    dependencies:
+      react: 18.2.0
+    dev: false
+
   /use-sidecar@1.1.2(@types/react@18.2.48)(react@18.2.0):
     resolution: {integrity: sha512-epTbsLuzZ7lPClpz2TyryBfztm7m+28DlEv2ZCQ3MDr5ssiwyOwGH/e5F9CkfWjJ1t4clvI58yF822/GUkjjhw==}
     engines: {node: '>=10'}