From 057c57b70f74ca87956c72f856c5f57fc964ab0d Mon Sep 17 00:00:00 2001
From: reya <reya@lume.nu>
Date: Wed, 24 Jan 2024 13:34:27 +0700
Subject: [PATCH] feat: add empty state to search dialog

---
 packages/ark/src/provider.tsx     |  2 +-
 packages/ui/src/search/dialog.tsx | 14 +++++++++++---
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/packages/ark/src/provider.tsx b/packages/ark/src/provider.tsx
index 0606fb45..0ef02734 100644
--- a/packages/ark/src/provider.tsx
+++ b/packages/ark/src/provider.tsx
@@ -107,7 +107,7 @@ export const LumeProvider = ({ children }: PropsWithChildren<object>) => {
 			explicitRelayUrls,
 			outboxRelayUrls,
 			blacklistRelayUrls,
-			enableOutboxModel: false,
+			enableOutboxModel: !storage.settings.lowPower,
 			autoConnectUserRelays: !storage.settings.lowPower,
 			autoFetchUserMutelist: !storage.settings.lowPower,
 			// clientName: "Lume",
diff --git a/packages/ui/src/search/dialog.tsx b/packages/ui/src/search/dialog.tsx
index 8d076d51..c39e2341 100644
--- a/packages/ui/src/search/dialog.tsx
+++ b/packages/ui/src/search/dialog.tsx
@@ -1,5 +1,5 @@
 import { Note, User, useArk, useColumnContext } from "@lume/ark";
-import { LoaderIcon } from "@lume/icons";
+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";
@@ -96,11 +96,11 @@ export function SearchDialog() {
 			</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-12">
+					<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-12 text-sm">
+					<Command.Empty className="flex items-center justify-center h-full text-sm">
 						No results found.
 					</Command.Empty>
 				) : (
@@ -156,6 +156,14 @@ export function SearchDialog() {
 						</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>
 	);