Add search spotlight with registration hook (#82)

* wip: add spotlight

* feat: add spotlight with registration hook and group chips

* chore: address pull request feedback

* docs: add documentation for usage of spotlight actions

* fix: deepsource issue JS-0415

* feat: add support for dependencies of spotlight actions

* fix: lockfile broken

* feat: add hover effect for spotlight action

* docs: Add documentation about dependency array

* refactor: remove test spotlight actions, disallow all as group for actions

* fix: type issues

* chore: address pull request feedback

apps/nextjs/src/components/layout/header/search.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { spotlight } from "@homarr/spotlight";
+import { openSpotlight } from "@homarr/spotlight";
 import { useScopedI18n } from "@homarr/translation/client";
 import { IconSearch, TextInput, UnstyledButton } from "@homarr/ui";
 
@@ -17,7 +17,7 @@ export const DesktopSearchInput = () => {
       w={400}
       size="sm"
       leftSection={<IconSearch size={20} stroke={1.5} />}
-      onClick={spotlight.open}
+      onClick={openSpotlight}
     >
       {t("placeholder")}
     </TextInput>
@@ -26,7 +26,7 @@ export const DesktopSearchInput = () => {
 
 export const MobileSearchButton = () => {
   return (
-    <HeaderButton onClick={spotlight.open} className={classes.mobileSearch}>
+    <HeaderButton onClick={openSpotlight} className={classes.mobileSearch}>
       <IconSearch size={20} stroke={1.5} />
     </HeaderButton>
   );

apps/nextjs/src/components/layout/header/spotlight.tsx

@@ -1,22 +0,0 @@
-"use client";
-
-import { Spotlight } from "@homarr/spotlight";
-import { useScopedI18n } from "@homarr/translation/client";
-import { IconSearch } from "@homarr/ui";
-
-export const ClientSpotlight = () => {
-  const t = useScopedI18n("common.search");
-
-  return (
-    <Spotlight
-      actions={[]}
-      nothingFound={t("nothingFound")}
-      highlightQuery
-      searchProps={{
-        leftSection: <IconSearch size={20} stroke={1.5} />,
-        placeholder: `${t("placeholder")}`,
-      }}
-      yOffset={12}
-    />
-  );
-};