feat: add web search engines (#290)

packages/spotlight/src/component.tsx

@@ -25,8 +25,10 @@ import classes from "./component.module.css";
 import { actionsAtomRead, groupsAtomRead } from "./data-store";
 import { setSelectedAction, spotlightStore } from "./spotlight-store";
 import type { SpotlightActionData } from "./type";
+import { useWebSearchEngines } from "./web-search-engines";
 
 export const Spotlight = () => {
+  useWebSearchEngines();
   const [query, setQuery] = useState("");
   const [group, setGroup] = useState("all");
   const groups = useAtomValue(groupsAtomRead);
@@ -46,7 +48,11 @@ export const Spotlight = () => {
       const renderRoot =
         item.type === "link"
           ? (props: Record<string, unknown>) => (
-              <Link href={prepareHref(item.href, query)} {...props} />
+              <Link
+                href={prepareHref(item.href, query)}
+                target={item.openInNewTab ? "_blank" : undefined}
+                {...props}
+              />
             )
           : undefined;
 

packages/spotlight/src/index.ts

@@ -3,6 +3,7 @@
 import { spotlightActions } from "./spotlight-store";
 
 export { Spotlight } from "./component";
+export { useRegisterSpotlightActions } from "./data-store";
+export { openSpotlight };
 
 const openSpotlight = spotlightActions.open;
-export { openSpotlight };

packages/spotlight/src/type.ts

@@ -19,6 +19,7 @@ interface BaseSpotlightAction {
 interface SpotlightActionLink extends BaseSpotlightAction {
   type: "link";
   href: string;
+  openInNewTab?: boolean;
 }
 
 type MaybePromise<T> = T | Promise<T>;

packages/spotlight/src/web-search-engines.ts

@@ -0,0 +1,63 @@
+import { IconDownload } from "@homarr/ui";
+
+import { useRegisterSpotlightActions } from "./data-store";
+
+export const useWebSearchEngines = () => {
+  useRegisterSpotlightActions("web-search-engines", [
+    {
+      id: "google",
+      title: "Google",
+      description: "Search the web with Google",
+      icon: "https://www.google.com/favicon.ico",
+      href: "https://www.google.com/search?q=%s",
+      group: "web",
+      type: "link",
+      ignoreSearchAndOnlyShowInGroup: true,
+      openInNewTab: true,
+    },
+    {
+      id: "bing",
+      title: "Bing",
+      description: "Search the web with Bing",
+      icon: "https://www.bing.com/favicon.ico",
+      href: "https://www.bing.com/search?q=%s",
+      group: "web",
+      type: "link",
+      ignoreSearchAndOnlyShowInGroup: true,
+      openInNewTab: true,
+    },
+    {
+      id: "duckduckgo",
+      title: "DuckDuckGo",
+      description: "Search the web with DuckDuckGo",
+      icon: "https://duckduckgo.com/favicon.ico",
+      href: "https://duckduckgo.com/?q=%s",
+      group: "web",
+      type: "link",
+      ignoreSearchAndOnlyShowInGroup: true,
+      openInNewTab: true,
+    },
+    {
+      id: "torrent",
+      title: "Torrents",
+      description: "Search for torrents on torrentdownloads.pro",
+      icon: IconDownload,
+      href: "https://www.torrentdownloads.pro/search/?search=%s",
+      group: "web",
+      type: "link",
+      ignoreSearchAndOnlyShowInGroup: true,
+      openInNewTab: true,
+    },
+    {
+      id: "youtube",
+      title: "YouTube",
+      description: "Search for videos on YouTube",
+      icon: "https://www.youtube.com/favicon.ico",
+      href: "https://www.youtube.com/results?search_query=%s",
+      group: "web",
+      type: "link",
+      ignoreSearchAndOnlyShowInGroup: true,
+      openInNewTab: true,
+    },
+  ]);
+};