feat: 💨

src/components/SearchBar/index.tsx

@@ -12,7 +12,7 @@ import { useSecondaryPage } from '@/PageManager'
 import { useScreenSize } from '@/providers/ScreenSizeProvider'
 import modalManager from '@/services/modal-manager.service'
 import { TProfile, TSearchParams } from '@/types'
-import { Hash, Notebook, Server, UserRound } from 'lucide-react'
+import { Hash, Notebook, Search, Server, UserRound } from 'lucide-react'
 import { nip19 } from 'nostr-tools'
 import {
   forwardRef,
@@ -82,10 +82,6 @@ const SearchBar = forwardRef<
     searchInputRef.current?.blur()
   }
 
-  const startSearch = () => {
-    setSearching(true)
-  }
-
   const list = useMemo(() => {
     const search = input.trim()
     if (!search) return null
@@ -167,21 +163,19 @@ const SearchBar = forwardRef<
     )
   }, [input, debouncedInput, profiles])
 
-  const showList = useMemo(() => searching && !!list, [searching, list])
-
   useEffect(() => {
-    if (showList) {
+    if (searching) {
       modalManager.register(id, () => {
         blur()
       })
     } else {
       modalManager.unregister(id)
     }
-  }, [showList])
+  }, [searching])
 
   return (
     <div className="relative flex gap-1 items-center h-full w-full">
-      {showList && (
+      {searching && (
         <>
           <div
             className={cn(
@@ -193,7 +187,13 @@ const SearchBar = forwardRef<
             )}
             onMouseDown={(e) => e.preventDefault()}
           >
-            <ScrollArea className="h-[60vh]">{list}</ScrollArea>
+            {list ? (
+              <ScrollArea className="h-[60vh]">{list}</ScrollArea>
+            ) : (
+              <div className="p-4 text-muted-foreground text-center h-20">
+                {t('Type searching for people, keywords, or relays')}
+              </div>
+            )}
           </div>
           <div className="fixed inset-0 w-full h-full" onClick={() => blur()} />
         </>
@@ -206,7 +206,8 @@ const SearchBar = forwardRef<
         )}
         value={input}
         onChange={(e) => setInput(e.target.value)}
-        onFocus={() => startSearch()}
+        onFocus={() => setSearching(true)}
+        onBlur={() => setSearching(false)}
       />
     </div>
   )
@@ -222,7 +223,7 @@ export type TSearchBarRef = {
 function NormalItem({ search, onClick }: { search: string; onClick?: () => void }) {
   return (
     <Item onClick={onClick}>
-      <Notebook className="text-muted-foreground" />
+      <Search className="text-muted-foreground" />
       <div className="font-semibold truncate">{search}</div>
     </Item>
   )

src/components/SearchInput/index.tsx

@@ -41,6 +41,7 @@ const SearchInput = forwardRef<HTMLInputElement, ComponentProps<'input'>>(
           <button
             type="button"
             className="rounded-full bg-foreground/40 hover:bg-foreground transition-opacity size-5 shrink-0 flex flex-col items-center justify-center"
+            onMouseDown={(e) => e.preventDefault()}
             onClick={() => onChange?.({ target: { value: '' } } as any)}
           >
             <X className="!size-3 shrink-0 text-background" strokeWidth={4} />