feat(spotlight): add support for custom search-engines (#1200)

* feat(spotlight): add search settings link

* feat(search-engine): add to manage pages

* feat(spotlight): add children option for external search engines

* chore: revert search settings

* fix: deepsource issue

* fix: inconsistent breadcrum placement

* chore: address pull request feedback

packages/spotlight/src/components/actions/group-actions.tsx

@@ -1,4 +1,5 @@
 import { Center, Loader } from "@mantine/core";
+import { useWindowEvent } from "@mantine/hooks";
 
 import type { TranslationObject } from "@homarr/translation";
 import { useI18n } from "@homarr/translation/client";
@@ -27,6 +28,11 @@ export const SpotlightGroupActions = <TOption extends Record<string, unknown>>({
   const options = useOptions(query);
   const t = useI18n();
 
+  useWindowEvent("keydown", (event) => {
+    const optionsArray = Array.isArray(options) ? options : (options.data ?? []);
+    group.onKeyDown?.(event, optionsArray, query, { setChildrenOptions });
+  });
+
   if (Array.isArray(options)) {
     const filteredOptions = options
       .filter((option) => ("filter" in group ? group.filter(query, option) : false))

packages/spotlight/src/components/actions/groups/action-group.tsx

@@ -15,18 +15,13 @@ interface SpotlightActionGroupsProps {
   setChildrenOptions: (options: inferSearchInteractionOptions<"children">) => void;
 }
 
-export const SpotlightActionGroups = ({ groups, query, setMode, setChildrenOptions }: SpotlightActionGroupsProps) => {
+export const SpotlightActionGroups = ({ groups, ...others }: SpotlightActionGroupsProps) => {
   const t = useI18n();
 
   return groups.map((group) => (
     <Spotlight.ActionsGroup key={translateIfNecessary(t, group.title)} label={translateIfNecessary(t, group.title)}>
       {/*eslint-disable-next-line @typescript-eslint/no-explicit-any */}
-      <SpotlightGroupActions<any>
-        group={group}
-        query={query}
-        setMode={setMode}
-        setChildrenOptions={setChildrenOptions}
-      />
+      <SpotlightGroupActions<any> group={group} {...others} />
     </Spotlight.ActionsGroup>
   ));
 };

packages/spotlight/src/components/spotlight.tsx

@@ -111,8 +111,11 @@ export const Spotlight = () => {
             }}
             setChildrenOptions={(options) => {
               setChildrenOptions(options);
-              setQuery("");
-              setTimeout(() => selectAction(0, spotlightStore));
+
+              setTimeout(() => {
+                setQuery("");
+                selectAction(0, spotlightStore);
+              });
             }}
             query={query}
             groups={activeMode.groups}