feat: support dropdown to switch search type

Author: Binlogo

raycast-extension/src/index.tsx

@@ -3,9 +3,33 @@ import { useState, useEffect } from "react";
 import { initHeadlessOmnibox } from "./headless.js";
 import { HeadlessOmnibox } from "omnibox-js";
 
+type SearchType = { id: string; name: string, prefixQueryEvent: string };
+
+function SearchTypeDropdown(props: { searchTypes: SearchType[]; onSearchTypeChange: (newValue: string) => void }) {
+  const { searchTypes, onSearchTypeChange } = props;
+  return (
+    <List.Dropdown
+      tooltip="Select Search Type"
+      storeValue={true}
+      onChange={(newValue) => {
+        onSearchTypeChange(newValue);
+      }}
+    >
+      <List.Dropdown.Section>
+        {searchTypes.map((searchType) => (
+          <List.Dropdown.Item key={searchType.id} title={searchType.name} value={searchType.prefixQueryEvent} />
+        ))}
+      </List.Dropdown.Section>
+    </List.Dropdown>
+  );
+}
+
 export default function Command() {
+  const [searchText, setSearchText] = useState("");
   const [searchResults, setSearchResults] = useState<SearchResult[]>([]);
   const [isLoading, setIsLoading] = useState(true);
+
+  const [prefixQueryEvent, setPrefixQueryEvent] = useState("");
   const [headless, setHeadless] = useState<HeadlessOmnibox | null>(null);
 
   useEffect(() => {
@@ -18,6 +42,8 @@ export default function Command() {
   }, []);
 
   const handleSearch = async (text: string) => {
+    setSearchText(text);
+
     if (!headless) return;
 
     if (text.length === 0) {
@@ -26,7 +52,12 @@ export default function Command() {
     }
 
     setIsLoading(true);
-    const { results } = await headless.search(text);
+    const { results } = await headless.search(prefixQueryEvent + text);
+    // Remove pagination tip from the first result
+    const paginationTipRegex = /\s\|\sPage\s\[\d+\/\d+\],\sappend\s'.+?'\sto\s?page\sdown/;
+    if (results.length > 0) {
+      results[0].description = results[0].description.replace(paginationTipRegex, "");
+    }
     setSearchResults(
       results.map((result) => ({
         name: result.content,
@@ -37,8 +68,26 @@ export default function Command() {
     setIsLoading(false);
   };
 
+  const searchTypes: SearchType[] = [
+    { id: "1", name: "Std", prefixQueryEvent: "" },
+    { id: "2", name: "Docs", prefixQueryEvent: "!" },
+    { id: "3", name: "Crates", prefixQueryEvent: "!!" },
+    { id: "4", name: "Repository", prefixQueryEvent: "!!!" },
+  ];
+  const onSearchTypeChange = (newValue: string) => {
+    setPrefixQueryEvent(newValue);
+    handleSearch(searchText);
+  };
+
   return (
-    <List isLoading={isLoading} onSearchTextChange={handleSearch} searchBarPlaceholder="Search..." throttle>
+    <List
+      isLoading={isLoading}
+      searchText={searchText}
+      onSearchTextChange={handleSearch}
+      searchBarPlaceholder="Search..."
+      searchBarAccessory={<SearchTypeDropdown searchTypes={searchTypes} onSearchTypeChange={onSearchTypeChange} />}
+      throttle
+    >
       {searchResults.map((searchResult) => (
         <SearchListItem key={searchResult.url} searchResult={searchResult} />
       ))}