Simple search

packages/app/src/Icons/Spinner.tsx

@@ -2,7 +2,13 @@ import IconProps from "./IconProps";
 import "./Spinner.css";
 
 const Spinner = (props: IconProps) => (
-  <svg width="20" height="20" stroke="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" {...props}>
+  <svg
+    width={props.width ?? 20}
+    height={props.height ?? 20}
+    stroke="currentColor"
+    viewBox="0 0 20 20"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}>
     <g className="spinner_V8m1">
       <circle cx="10" cy="10" r="7.5" fill="none" strokeWidth="3"></circle>
     </g>

packages/app/src/Pages/Layout.tsx

@@ -19,6 +19,9 @@ import Avatar from "Element/Avatar";
 import { profileLink } from "SnortUtils";
 import { getCurrentSubscription } from "Subscription";
 import Toaster from "Toaster";
+import Spinner from "Icons/Spinner";
+import { NostrPrefix, createNostrLink, tryParseNostrLink } from "@snort/system";
+import { fetchNip05Pubkey } from "Nip05/Verifier";
 
 export default function Layout() {
   const location = useLocation();
@@ -143,6 +146,31 @@ const AccountHeader = () => {
 
   const { publicKey, latestNotification, readNotifications } = useLogin();
   const profile = useUserProfile(publicKey);
+  const [search, setSearch] = useState("");
+  const [searching, setSearching] = useState(false);
+
+  async function searchThing() {
+    try {
+      setSearching(true);
+      const link = tryParseNostrLink(search);
+      if (link) {
+        navigate(`/${link.encode()}`);
+        return;
+      }
+      if (search.includes("@")) {
+        const [handle, domain] = search.split("@");
+        const pk = await fetchNip05Pubkey(handle, domain);
+        if (pk) {
+          navigate(`/${createNostrLink(NostrPrefix.PublicKey, pk).encode()}`);
+          return;
+        }
+      }
+      navigate(`/search/${encodeURIComponent(search)}`);
+    } finally {
+      setSearch("");
+      setSearching(false);
+    }
+  }
 
   const hasNotifications = useMemo(
     () => latestNotification > readNotifications,
@@ -166,10 +194,27 @@ const AccountHeader = () => {
 
   return (
     <div className="header-actions">
-      <div className="search">
+      {!location.pathname.startsWith("/search") && (
-        <input type="text" placeholder={formatMessage({ defaultMessage: "Search" })} className="w-max" />
+        <div className="search">
-        <Icon name="search" size={24} />
+          <input
-      </div>
+            type="text"
+            placeholder={formatMessage({ defaultMessage: "Search" })}
+            className="w-max"
+            value={search}
+            onChange={e => setSearch(e.target.value)}
+            onKeyDown={async e => {
+              if (e.key === "Enter") {
+                await searchThing();
+              }
+            }}
+          />
+          {searching ? (
+            <Spinner width={24} height={24} />
+          ) : (
+            <Icon name="search" size={24} onClick={() => navigate("/search")} />
+          )}
+        </div>
+      )}
       <Link className="btn" to="/messages">
         <Icon name="mail" size={24} />
         {unreadDms > 0 && <span className="has-unread"></span>}

packages/app/src/Pages/SearchPage.tsx

@@ -92,7 +92,7 @@ const SearchPage = () => {
   }
 
   return (
-    <div className="main-content">
+    <div className="main-content p">
       <h2>
         <FormattedMessage defaultMessage="Search" />
       </h2>