feat: add search window (NIP-50) (#181)

* feat: add search window
* chore: improve search ui

packages/ark/package.json

@@ -14,7 +14,7 @@
 		"@radix-ui/react-hover-card": "^1.0.7",
 		"@radix-ui/react-popover": "^1.0.7",
 		"@radix-ui/react-tooltip": "^1.0.7",
-		"@tanstack/react-query": "^5.29.2",
+		"@tanstack/react-query": "^5.31.0",
 		"@tanstack/react-router": "^1.29.2",
 		"get-urls": "^12.1.0",
 		"media-chrome": "^3.2.1",
@@ -28,7 +28,7 @@
 		"react-string-replace": "^1.1.1",
 		"sonner": "^1.4.41",
 		"string-strip-html": "^13.4.8",
-		"virtua": "^0.30.1"
+		"virtua": "^0.30.2"
 	},
 	"devDependencies": {
 		"@lume/tailwindcss": "workspace:^",

packages/ark/src/ark.ts

@@ -139,6 +139,22 @@ export class Ark {
 		}
 	}
 
+	public async search(content: string, limit: number) {
+		try {
+			if (content.length < 1) return [];
+
+			const events: Event[] = await invoke("search", {
+				content: content.trim(),
+				limit,
+			});
+
+			return events;
+		} catch (e) {
+			console.info(String(e));
+			return [];
+		}
+	}
+
 	public async get_events(
 		limit: number,
 		asOf?: number,
@@ -722,7 +738,6 @@ export class Ark {
 				minHeight: 800,
 				width: 500,
 				height: 800,
-				hiddenTitle: true,
 				titleBarStyle: "overlay",
 				center: false,
 			});
@@ -742,7 +757,6 @@ export class Ark {
 				minHeight: 800,
 				width: 500,
 				height: 800,
-				hiddenTitle: true,
 				titleBarStyle: "overlay",
 			});
 
@@ -807,7 +821,6 @@ export class Ark {
 				minHeight: 500,
 				width: 400,
 				height: 500,
-				hiddenTitle: true,
 				titleBarStyle: "overlay",
 			});
 
@@ -826,7 +839,24 @@ export class Ark {
 				minHeight: 500,
 				width: 800,
 				height: 500,
-				hiddenTitle: true,
+				titleBarStyle: "overlay",
+			});
+
+			this.windows.push(window);
+		} catch (e) {
+			throw new Error(String(e));
+		}
+	}
+
+	public open_search() {
+		try {
+			const window = new WebviewWindow("search", {
+				title: "Search",
+				url: "/search",
+				width: 750,
+				height: 470,
+				minimizable: false,
+				resizable: false,
 				titleBarStyle: "overlay",
 			});
 

packages/ark/src/hooks/useProfile.ts

@@ -2,7 +2,7 @@ import { useQuery } from "@tanstack/react-query";
 import { Metadata } from "@lume/types";
 import { invoke } from "@tauri-apps/api/core";
 
-export function useProfile(pubkey: string) {
+export function useProfile(pubkey: string, embed?: string) {
 	const {
 		isLoading,
 		isError,
@@ -11,8 +11,14 @@ export function useProfile(pubkey: string) {
 		queryKey: ["user", pubkey],
 		queryFn: async () => {
 			try {
+				if (embed) {
+					const profile: Metadata = JSON.parse(embed);
+					return profile;
+				}
+
 				const id = pubkey.replace("nostr:", "").replace(/[^\w\s]/gi, "");
 				const cmd: Metadata = await invoke("get_profile", { id });
+
 				return cmd;
 			} catch (e) {
 				throw new Error(e);

packages/icons/src/search.tsx

@@ -1,18 +1,13 @@
-export function SearchIcon(props: JSX.IntrinsicElements['svg']) {
+export function SearchIcon(props: JSX.IntrinsicElements["svg"]) {
   return (
-    <svg
-      {...props}
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 24 24"
-      width="24"
-      height="24"
-      fill="none"
-      stroke="currentColor"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      strokeWidth="2"
-    >
-      <path d="m21 21-3.49-3.49m0 0A8.5 8.5 0 1 0 5.49 5.49a8.5 8.5 0 0 0 12.02 12.02Z" />
+    <svg width="24" height="24" fill="none" viewBox="0 0 24 24" {...props}>
+      <path
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="1.5"
+        d="m20 20-3.873-3.873m0 0A7.25 7.25 0 1 0 5.873 5.873a7.25 7.25 0 0 0 10.253 10.253Z"
+      />
     </svg>
   );
 }

packages/ui/package.json

@@ -18,7 +18,7 @@
 		"@radix-ui/react-hover-card": "^1.0.7",
 		"@radix-ui/react-popover": "^1.0.7",
 		"@radix-ui/react-tooltip": "^1.0.7",
-		"@tanstack/react-query": "^5.29.2",
+		"@tanstack/react-query": "^5.31.0",
 		"@tanstack/react-router": "^1.29.2",
 		"framer-motion": "^11.1.7",
 		"get-urls": "^12.1.0",
@@ -40,7 +40,7 @@
 		"string-strip-html": "^13.4.8",
 		"uqr": "^0.1.2",
 		"use-debounce": "^10.0.0",
-		"virtua": "^0.30.1"
+		"virtua": "^0.30.2"
 	},
 	"devDependencies": {
 		"@lume/tailwindcss": "workspace:^",

packages/ui/src/user/provider.tsx

@@ -12,11 +12,13 @@ const UserContext = createContext<{
 export function UserProvider({
   pubkey,
   children,
+  embedProfile,
 }: {
   pubkey: string;
   children: ReactNode;
+  embedProfile?: string;
 }) {
-  const { isLoading, isError, profile } = useProfile(pubkey);
+  const { isLoading, isError, profile } = useProfile(pubkey, embedProfile);
 
   return (
     <UserContext.Provider value={{ pubkey, isError, isLoading, profile }}>

packages/utils/package.json

@@ -8,7 +8,7 @@
 		"access": "public"
 	},
 	"dependencies": {
-		"@tanstack/react-query": "^5.29.2",
+		"@tanstack/react-query": "^5.31.0",
 		"bitcoin-units": "^1.0.0",
 		"clsx": "^2.1.0",
 		"dayjs": "^1.11.10",