feat(search): improve search result navigation and keyboard interaction

Author: ComputelessComputer

apps/desktop/src/components/main/body/advanced-search/index.tsx

@@ -1,6 +1,5 @@
 import { SearchIcon } from "lucide-react";
 import { useCallback } from "react";
-import { useShallow } from "zustand/shallow";
 
 import { type Tab, useTabs } from "../../../../store/zustand/tabs";
 import { StandardTabWrapper } from "../index";
@@ -48,11 +47,7 @@ export function TabContentSearch({
 
 function SearchView({ tab }: { tab: Extract<Tab, { type: "search" }> }) {
   const updateSearchTabState = useTabs((state) => state.updateSearchTabState);
-  const { openCurrent } = useTabs(
-    useShallow((state) => ({
-      openCurrent: state.openCurrent,
-    })),
-  );
+  const openNew = useTabs((state) => state.openNew);
 
   const { selectedTypes } = tab.state;
 
@@ -69,20 +64,20 @@ function SearchView({ tab }: { tab: Extract<Tab, { type: "search" }> }) {
   const handleResultClick = useCallback(
     (type: string, id: string) => {
       if (type === "session") {
-        openCurrent({ type: "sessions", id });
+        openNew({ type: "sessions", id });
       } else if (type === "human") {
-        openCurrent({
+        openNew({
           type: "contacts",
           state: { selectedPerson: id, selectedOrganization: null },
         });
       } else if (type === "organization") {
-        openCurrent({
+        openNew({
           type: "contacts",
           state: { selectedOrganization: id, selectedPerson: null },
         });
       }
     },
-    [openCurrent],
+    [openNew],
   );
 
   return (

apps/desktop/src/components/main/body/advanced-search/result-item.tsx

@@ -13,18 +13,21 @@ const TYPE_ICONS = {
 interface ResultItemProps {
   result: SearchResult;
   onClick: () => void;
+  isSelected?: boolean;
 }
 
-export function ResultItem({ result, onClick }: ResultItemProps) {
+export function ResultItem({ result, onClick, isSelected }: ResultItemProps) {
   const Icon = TYPE_ICONS[result.type] || FileTextIcon;
 
   return (
     <button
+      data-result-id={result.id}
       onClick={onClick}
       className={cn([
         "w-full flex items-start gap-3 p-3",
         "rounded-lg text-left",
         "hover:bg-neutral-100 transition-colors",
+        isSelected && "bg-neutral-100",
       ])}
     >
       <div className="mt-0.5 shrink-0">

apps/desktop/src/components/main/body/advanced-search/view.tsx

@@ -154,6 +154,34 @@ export function AdvancedSearchView({
     };
   }, [results, selectedTypes]);
 
+  const [selectedIndex, setSelectedIndex] = useState(-1);
+
+  const flatResults = useMemo(() => {
+    if (!filteredResults) return [];
+    return filteredResults.groups.flatMap((g) => g.results);
+  }, [filteredResults]);
+
+  useEffect(() => {
+    setSelectedIndex(-1);
+  }, [filteredResults]);
+
+  const selectedId =
+    selectedIndex >= 0 && selectedIndex < flatResults.length
+      ? flatResults[selectedIndex].id
+      : null;
+
+  const resultsRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!selectedId || !resultsRef.current) return;
+    const el = resultsRef.current.querySelector(
+      `[data-result-id="${selectedId}"]`,
+    );
+    if (el) {
+      el.scrollIntoView({ block: "nearest" });
+    }
+  }, [selectedId]);
+
   const showLoading = isSearching || isIndexing;
   const hasQuery = query.trim().length > 0;
   const hasResults = filteredResults && filteredResults.totalResults > 0;
@@ -173,6 +201,34 @@ export function AdvancedSearchView({
             placeholder="Try 'budget', '@john', or '#design'"
             value={localQuery}
             onChange={(e) => setLocalQuery(e.target.value)}
+            onKeyDown={(e) => {
+              if (e.key === "Escape") {
+                if (localQuery.trim()) {
+                  setLocalQuery("");
+                } else {
+                  e.currentTarget.blur();
+                }
+              }
+              if (e.key === "ArrowDown" && flatResults.length > 0) {
+                e.preventDefault();
+                setSelectedIndex(
+                  Math.min(selectedIndex + 1, flatResults.length - 1),
+                );
+              }
+              if (e.key === "ArrowUp" && flatResults.length > 0) {
+                e.preventDefault();
+                setSelectedIndex(Math.max(selectedIndex - 1, -1));
+              }
+              if (
+                e.key === "Enter" &&
+                selectedIndex >= 0 &&
+                selectedIndex < flatResults.length
+              ) {
+                e.preventDefault();
+                const item = flatResults[selectedIndex];
+                onResultClick(item.type, item.id);
+              }
+            }}
             className={cn([
               "w-full pl-[38px] pr-8 py-2",
               "text-base placeholder:text-neutral-400",
@@ -234,16 +290,18 @@ export function AdvancedSearchView({
         </div>
       </div>
 
-      <div className="flex-1 overflow-y-auto">
+      <div ref={resultsRef} className="flex-1 overflow-y-auto">
         {!hasQuery ? (
           <SuggestionsView
             results={filteredResults}
             onResultClick={onResultClick}
+            selectedId={selectedId}
           />
         ) : hasResults ? (
           <SearchResultsView
             results={filteredResults!}
             onResultClick={onResultClick}
+            selectedId={selectedId}
           />
         ) : (
           <NoResultsView query={query} />
@@ -256,9 +314,11 @@ export function AdvancedSearchView({
 function SuggestionsView({
   results,
   onResultClick,
+  selectedId,
 }: {
   results: GroupedSearchResults | null;
   onResultClick: (type: string, id: string) => void;
+  selectedId: string | null;
 }) {
   return (
     <div className="pl-[14px] pr-3 pt-3">
@@ -274,6 +334,7 @@ function SuggestionsView({
                     key={result.id}
                     result={result}
                     onClick={() => onResultClick(result.type, result.id)}
+                    isSelected={result.id === selectedId}
                   />
                 )),
             )}
@@ -291,9 +352,11 @@ function SuggestionsView({
 function SearchResultsView({
   results,
   onResultClick,
+  selectedId,
 }: {
   results: GroupedSearchResults;
   onResultClick: (type: string, id: string) => void;
+  selectedId: string | null;
 }) {
   return (
     <div className="pl-[14px] pr-3 pt-3">
@@ -308,6 +371,7 @@ function SearchResultsView({
                 key={result.id}
                 result={result}
                 onClick={() => onResultClick(result.type, result.id)}
+                isSelected={result.id === selectedId}
               />
             ))}
           </div>

apps/desktop/src/components/main/body/search.tsx

@@ -154,7 +154,12 @@ function ExpandedSearch({
           onChange={(e) => setQuery(e.target.value)}
           onKeyDown={(e) => {
             if (e.key === "Escape") {
-              e.currentTarget.blur();
+              if (query.trim()) {
+                setQuery("");
+                setSelectedIndex(-1);
+              } else {
+                e.currentTarget.blur();
+              }
             }
             if (e.key === "Enter" && (e.metaKey || e.ctrlKey) && query.trim()) {
               e.preventDefault();
@@ -206,7 +211,6 @@ function ExpandedSearch({
                   },
                 });
               }
-              setQuery("");
               e.currentTarget.blur();
             }
           }}

apps/desktop/src/contexts/search/ui.tsx

@@ -195,6 +195,20 @@ export function SearchUIProvider({ children }: { children: React.ReactNode }) {
     enableOnContentEditable: true,
   });
 
+  useHotkeys(
+    "Escape",
+    () => {
+      if (query.trim()) {
+        setQuery("");
+        setSelectedIndex(-1);
+      }
+    },
+    {
+      enableOnFormTags: true,
+      enableOnContentEditable: true,
+    },
+  );
+
   const resetSearchState = useCallback(() => {
     setSearchHits([]);
     setSearchQuery("");