feat: improve search

apps/desktop2/src/routes/search.tsx

@@ -3,6 +3,7 @@ import { type Event, Kind } from "@lume/types";
 import { Note, Spinner, User } from "@lume/ui";
 import { createFileRoute } from "@tanstack/react-router";
 import { useEffect, useState } from "react";
+import { toast } from "sonner";
 import { useDebounce } from "use-debounce";
 
 export const Route = createFileRoute("/search")({
@@ -10,43 +11,39 @@ export const Route = createFileRoute("/search")({
 });
 
 function Screen() {
-	const { ark } = Route.useRouteContext();
-
   const [loading, setLoading] = useState(false);
   const [events, setEvents] = useState<Event[]>([]);
   const [search, setSearch] = useState("");
-	const [value] = useDebounce(search, 500);
+  const [searchValue] = useDebounce(search, 500);
 
   const searchEvents = async () => {
-		if (!value.length) return;
+    try {
-
-		// start loading
       setLoading(true);
 
-		const data = await ark.search(value, 100);
+      const query = `https://api.nostr.wine/search?query=${searchValue}&kind=0,1`;
+      const res = await fetch(query);
+      const content = await res.json();
+      const events = content.data as Event[];
+      const sorted = events.sort((a, b) => b.created_at - a.created_at);
 
-		// update state
       setLoading(false);
-		setEvents(data);
+      setEvents(sorted);
+    } catch (e) {
+      setLoading(false);
+      toast.error(String(e));
+    }
   };
 
   useEffect(() => {
+    if (searchValue.length >= 3 && searchValue.length < 500) {
       searchEvents();
-	}, [value]);
+    }
+  }, [searchValue]);
 
   return (
-		<div
+    <div data-tauri-drag-region className="flex flex-col w-full h-full">
-			data-tauri-drag-region
+      <div className="relative h-24 shrink-0 flex flex-col border-b border-black/5 dark:border-white/5">
-			className="flex flex-col w-full h-full bg-gradient-to-tr from-neutral-200 to-neutral-100 dark:from-neutral-950 dark:to-neutral-900"
+        <div data-tauri-drag-region className="w-full h-4 shrink-0" />
-		>
-			<div
-				data-tauri-drag-region
-				className="relative h-24 shrink-0 flex items-end border-neutral-300 border-b dark:border-neutral-700"
-			>
-				<div
-					data-tauri-drag-region
-					className="absolute top-0 left-0 w-full h-4"
-				/>
         <input
           value={search}
           onChange={(e) => setSearch(e.target.value)}
@@ -54,7 +51,7 @@ function Screen() {
             if (e.key === "Enter") searchEvents();
           }}
           placeholder="Search anything..."
-					className="z-10 w-full h-20 pt-10 px-6 text-lg bg-transparent border-none focus:outline-none focus:ring-0 placeholder:text-neutral-500 dark:placeholder:text-neutral-600"
+          className="w-full h-20 pt-10 px-3 text-lg bg-transparent border-none focus:outline-none focus:ring-0 placeholder:text-neutral-500 dark:placeholder:text-neutral-600"
         />
       </div>
       <div className="flex-1 p-3 overflow-y-auto scrollbar-none">
@@ -62,21 +59,17 @@ function Screen() {
           <div className="w-full h-full flex items-center justify-center">
             <Spinner />
           </div>
-				) : !events.length ? (
+        ) : events.length ? (
-					<div className="flex items-center justify-center h-full text-sm">
-						Empty
-					</div>
-				) : (
           <div className="flex flex-col gap-5">
             <div className="flex flex-col gap-1.5">
               <div className="text-sm font-medium text-neutral-700 dark:text-neutral-300 shrink-0">
                 Users
               </div>
-							<div className="flex-1 flex flex-col gap-3">
+              <div className="flex-1 flex flex-col gap-1">
                 {events
                   .filter((ev) => ev.kind === Kind.Metadata)
-									.map((event) => (
+                  .map((event, index) => (
-										<SearchUser key={event.id} event={event} />
+                    <SearchUser key={event.pubkey + index} event={event} />
                   ))}
               </div>
             </div>
@@ -93,10 +86,10 @@ function Screen() {
               </div>
             </div>
           </div>
-				)}
+        ) : null}
         {!loading && !events.length ? (
           <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">
+            <div className="size-16 bg-black/10 dark:bg-white/10 rounded-full inline-flex items-center justify-center">
               <SearchIcon className="size-6" />
             </div>
             Try searching for people, notes, or keywords
@@ -115,12 +108,12 @@ function SearchUser({ event }: { event: Event }) {
       key={event.id}
       type="button"
       onClick={() => ark.open_profile(event.pubkey)}
-			className="p-3 hover:bg-black/10 dark:hover:bg-white/10 rounded-lg"
+      className="col-span-1 p-2 hover:bg-black/10 dark:hover:bg-white/10 rounded-lg"
     >
       <User.Provider pubkey={event.pubkey} embedProfile={event.content}>
         <User.Root className="flex items-center gap-2">
-					<User.Avatar className="size-11 rounded-full shrink-0" />
+          <User.Avatar className="size-9 rounded-full shrink-0" />
-					<div>
+          <div className="inline-flex items-center gap-1.5">
             <User.Name className="font-semibold" />
             <User.NIP05 />
           </div>
@@ -131,20 +124,17 @@ function SearchUser({ event }: { event: Event }) {
 }
 
 function SearchNote({ event }: { event: Event }) {
-	const { ark } = Route.useRouteContext();
-
   return (
-		<div
+    <div className="bg-white dark:bg-black/20 backdrop-blur-lg rounded-xl shadow-primary dark:ring-1 ring-neutral-800/50">
-			key={event.id}
-			onClick={() => ark.open_event(event)}
-			onKeyDown={() => ark.open_event(event)}
-			className="p-3 bg-white rounded-lg dark:bg-black"
-		>
       <Note.Provider event={event}>
         <Note.Root>
+          <div className="px-3 h-14 flex items-center justify-between">
             <Note.User />
-					<div className="select-text mt-2.5 leading-normal line-clamp-5 text-balance">
+            <Note.Menu />
-						{event.content}
+          </div>
+          <Note.Content className="px-3" quote={false} mention={false} />
+          <div className="mt-3 flex items-center gap-4 h-14 px-3">
+            <Note.Open />
           </div>
         </Note.Root>
       </Note.Provider>

apps/desktop2/src/routes/settings/user.tsx

@@ -88,7 +88,6 @@ function Screen() {
             <input
               name="display_name"
               {...register("display_name", { required: true, minLength: 1 })}
-							value={profile.display_name}
               spellCheck={false}
               className="h-9 w-full rounded-lg border-neutral-300 bg-transparent px-3 placeholder:text-neutral-500 focus:border-blue-500 focus:ring focus:ring-blue-200 dark:border-neutral-700 dark:placeholder:text-neutral-400 dark:focus:ring-blue-800"
             />
@@ -104,7 +103,6 @@ function Screen() {
               name="name"
               {...register("name")}
               spellCheck={false}
-							value={profile.name}
               className="h-9 w-full rounded-lg border-neutral-300 bg-transparent px-3 placeholder:text-neutral-500 focus:border-blue-500 focus:ring focus:ring-blue-200 dark:border-neutral-700 dark:placeholder:text-neutral-400 dark:focus:ring-blue-800"
             />
           </div>
@@ -120,7 +118,6 @@ function Screen() {
               type="url"
               {...register("website")}
               spellCheck={false}
-							value={profile.website}
               className="h-9 w-full rounded-lg border-neutral-300 bg-transparent px-3 placeholder:text-neutral-500 focus:border-blue-500 focus:ring focus:ring-blue-200 dark:border-neutral-700 dark:placeholder:text-neutral-400 dark:focus:ring-blue-800"
             />
           </div>
@@ -136,7 +133,6 @@ function Screen() {
               type="url"
               {...register("banner")}
               spellCheck={false}
-							value={profile.banner}
               className="h-9 w-full rounded-lg border-neutral-300 bg-transparent px-3 placeholder:text-neutral-500 focus:border-blue-500 focus:ring focus:ring-blue-200 dark:border-neutral-700 dark:placeholder:text-neutral-400 dark:focus:ring-blue-800"
             />
           </div>
@@ -152,7 +148,6 @@ function Screen() {
               type="email"
               {...register("nip05")}
               spellCheck={false}
-							value={profile.nip05}
               className="h-9 w-full rounded-lg border-neutral-300 bg-transparent px-3 placeholder:text-neutral-500 focus:border-blue-500 focus:ring focus:ring-blue-200 dark:border-neutral-700 dark:placeholder:text-neutral-400 dark:focus:ring-blue-800"
             />
           </div>
@@ -167,7 +162,6 @@ function Screen() {
               name="lnaddress"
               type="email"
               {...register("lud16")}
-							value={profile.lud16}
               className="h-9 w-full rounded-lg border-neutral-300 bg-transparent px-3 placeholder:text-neutral-500 focus:border-blue-500 focus:ring focus:ring-blue-200 dark:border-neutral-700 dark:placeholder:text-neutral-400 dark:focus:ring-blue-800"
             />
           </div>

packages/ark/src/ark.ts

@@ -899,8 +899,8 @@ export class Ark {
         label,
         title: "Search",
         url: "/search",
-				width: 750,
+        width: 400,
-				height: 470,
+        height: 600,
       });
     } catch (e) {
       throw new Error(String(e));

packages/ui/src/user/avatar.tsx

@@ -23,7 +23,7 @@ export function UserAvatar({ className }: { className?: string }) {
         alt={user.pubkey}
         loading="eager"
         decoding="async"
-				className={cn("ring-1 ring-black/5 dark:ring-white/5", className)}
+        className={cn("outline-[.5px] outline-black/5", className)}
       />
       <Avatar.Fallback delayMs={120}>
         <img

src-tauri/src/main.rs

@@ -50,20 +50,22 @@ fn main() {
           Err(_) => ClientBuilder::default().build(),
         };
 
-        // Add some bootstrap relays
+        // Add bootstrap relays
-        // #TODO: Pull bootstrap relays from user's settings
         client
           .add_relay("wss://relay.nostr.net")
           .await
           .expect("Cannot connect to relay.nostr.net, please try again later.");
         client
-          .add_relay("wss://bostr.nokotaro.work/")
+          .add_relay("wss://relay.damus.io")
           .await
-          .expect("Cannot connect to bostr.nokotaro.work, please try again later.");
+          .expect("Cannot connect to relay.damus.io, please try again later.");
         client
-          .add_relay("wss://purplepag.es/")
+          .add_relay_with_opts(
+            "wss://directory.yabu.me/",
+            RelayOptions::new().read(true).write(false),
+          )
           .await
-          .expect("Cannot connect to purplepag.es, please try again later.");
+          .expect("Cannot connect to directory.yabu.me, please try again later.");
 
         // Connect
         client.connect().await;

src-tauri/src/tray.rs

@@ -97,10 +97,9 @@ pub fn create_tray<R: Runtime>(app: &tauri::AppHandle<R>) -> tauri::Result<()> {
       } else {
         #[cfg(target_os = "macos")]
         let _ = WebviewWindowBuilder::new(app, "search", WebviewUrl::App(PathBuf::from("search")))
-          .title("Editor")
+          .title("Search")
-          .inner_size(750., 470.)
+          .inner_size(400., 600.)
           .minimizable(false)
-          .resizable(false)
           .title_bar_style(TitleBarStyle::Overlay)
           .transparent(true)
           .effects(WindowEffectsConfig {