Merge pull request #45 from RyKilleen/web-search

feat: add web search options for google, duckduckgo, and stack overflow

package.json

@@ -1,6 +1,6 @@
 {
   "name": "brancato",
-  "version": "0.3.2",
+  "version": "0.4.0",
   "private": true,
   "dependencies": {
     "@algolia/autocomplete-js": "^1.5.3",

src-tauri/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "brancato"
-version = "0.3.2"
+version = "0.4.0"
 description = "A tool for stage-managing your life"
 authors = ["Ryan Killeen"]
 license = ""

src-tauri/tauri.conf.json

@@ -1,7 +1,7 @@
 {
   "package": {
     "productName": "brancato",
-    "version": "0.3.2"
+    "version": "0.4.0"
   },
   "build": {
     "distDir": "../build",

src/App.tsx

@@ -1,5 +1,5 @@
 import Config from "./Config";
-import Omnibar from "./Omnibar";
+import Omnibar from "./components/Omnibar/Omnibar";
 
 function App() {
   const settingsPage = window.location.pathname === "/settings";

src/components/Autocomplete.jsx

@@ -12,9 +12,8 @@ export const Action = ({ hit }) => {
           <div className="aa-ItemContentBody">
             <div className="aa-ItemContentTitle">
               <span>{hit.label}</span>
-              {/* {hit.enabled && (
-                <code className="aa-ItemContentTitleNote">Enabled</code>
-              )} */}
+              {hit.description && <div style={{fontSize: '0.8rem', paddingRight: '1rem'}}>{hit.description}</div>}
+
             </div>
           </div>
         </div>

src/components/Omnibar/Omnibar.tsx

@@ -0,0 +1,99 @@
+import { appWindow } from "@tauri-apps/api/window";
+import { useEffect, useState } from "react";
+import { Autocomplete } from "../Autocomplete";
+import { AppEvents, getConfig } from "../../utils";
+import createWorkflowSource from "./workflow-source";
+import createSettingsSource from "./settings-source";
+import createWebSearchSource, { searchEngines } from "./websearch-source";
+
+const focusSearchBar = () => {
+  let input = document.querySelector(".aa-Input") as HTMLElement | null;
+  input?.focus();
+};
+
+function getQueryPattern(query: string, flags = "i") {
+  const pattern = new RegExp(
+    `(${query
+      .trim() // Trim leading and ending whitespace
+      .toLowerCase() // convert to lower case
+      .split(" ") // Split on spaces for multiple commands
+      .map((token) => `^${token}`) // Map over the resulting array and create Regex_
+      .join("|")})`, // Join those expressions with an OR |
+    flags
+  );
+
+  return pattern;
+}
+
+// function highlight(text: string, pattern: RegExp) {
+//   // Split the text based on the pattern
+//   const tokens = text.split(pattern);
+
+//   // Map over the split text and test against the pattern
+//   return tokens.map((token) => {
+//     // If the pattern matches the text, wrap the text in <mark>
+//     if (!pattern.test("") && pattern.test(token)) {
+//       return <mark>{token}</mark>;
+//     }
+
+//     // return the token back to the array
+//     return token;
+//   });
+// }
+
+const Omnibar = () => {
+  const [suggestions, setSuggestions] = useState<string[]>([]);
+  async function setStoredConfigChoices() {
+    let state = await getConfig();
+    setSuggestions(state.workflows.map((wf) => wf.name));
+  }
+  useEffect(() => {
+    const unlisten1 = appWindow.listen(
+      AppEvents.OmnibarFocused,
+      focusSearchBar
+    );
+    const unlisten2 = appWindow.listen(
+      AppEvents.AppStateUpdated,
+      setStoredConfigChoices
+    );
+
+    return () => {
+      unlisten1();
+      unlisten2();
+    };
+  }, []);
+
+  useEffect(() => {
+    setStoredConfigChoices();
+  }, []);
+
+  return (
+    <div style={{ background: "rgb(0 0 0 / 0%)" }}>
+      <form>
+        <Autocomplete
+          placeholder=""
+          openOnFocus
+          autoFocus
+          defaultActiveItemId={0}
+          getSources={({ query }: { query: string }) => {
+            const pattern = getQueryPattern(query);
+            const webSearchSource = createWebSearchSource({ query });
+            const defaultSources = [
+              createWorkflowSource({ suggestions, pattern }),
+              createSettingsSource({ pattern }),
+              webSearchSource,
+            ];
+            const searchEngineCodes = searchEngines.map((se) => se.shortCode);
+            const isWebSearch =
+              query.includes("?") &&
+              searchEngineCodes.some((v: string) => query.includes(v));
+
+            return isWebSearch ? [webSearchSource] : defaultSources;
+          }}
+        />
+      </form>
+    </div>
+  );
+};
+
+export default Omnibar;

src/components/Omnibar/settings-source.tsx

@@ -0,0 +1,40 @@
+import { invoke } from "@tauri-apps/api";
+import { Commands } from "../../utils";
+import { Action } from "../Autocomplete";
+
+const createSettingsSource = ({ pattern }: { pattern: RegExp }) => ({
+  sourceId: "settings",
+  getItemInputValue({ item }: { item: any }) {
+    return item.label;
+  },
+  getItems({ state }: { state: any }) {
+    return [{ label: "Settings", action: Commands.OpenSettings }].filter(
+      ({ label }) => pattern.test(label)
+    );
+    //TODO: add result highlighting
+    // .map((action) => ({
+    //   ...action,
+    //   highlighted: highlight(action.label, pattern),
+    // }));
+  },
+  // Run this code when item is selected
+  onSelect(params: any) {
+    // item is the full item data
+    // setQuery is a hook to set the query state
+    const { item, setQuery } = params;
+
+    invoke(item.action);
+    setQuery("");
+  },
+  // Templates for Header of this source and Items in this source
+  templates: {
+    header() {
+      return <h2>Settings</h2>;
+    },
+    item({ item }: { item: any }) {
+      return <Action hit={item} />;
+    },
+  },
+});
+
+export default createSettingsSource;