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/board/sections/content.tsx

@@ -34,26 +34,28 @@ interface Props {
 export const SectionContent = ({ items, refs }: Props) => {
   return (
     <>
-      {items.map((item) => (
-        <div
-          key={item.id}
-          className="grid-stack-item"
-          data-id={item.id}
-          gs-x={item.xOffset}
-          gs-y={item.yOffset}
-          gs-w={item.width}
-          gs-h={item.height}
-          gs-min-w={1}
-          gs-min-h={1}
-          gs-max-w={4}
-          gs-max-h={4}
-          ref={refs.items.current[item.id] as RefObject<HTMLDivElement>}
-        >
-          <Card className="grid-stack-item-content" withBorder>
-            <BoardItem item={item} />
-          </Card>
-        </div>
-      ))}
+      {items.map((item) => {
+        return (
+          <div
+            key={item.id}
+            className="grid-stack-item"
+            data-id={item.id}
+            gs-x={item.xOffset}
+            gs-y={item.yOffset}
+            gs-w={item.width}
+            gs-h={item.height}
+            gs-min-w={1}
+            gs-min-h={1}
+            gs-max-w={4}
+            gs-max-h={4}
+            ref={refs.items.current[item.id] as RefObject<HTMLDivElement>}
+          >
+            <Card className="grid-stack-item-content" withBorder>
+              <BoardItem item={item} />
+            </Card>
+          </div>
+        );
+      })}
     </>
   );
 };

apps/nextjs/src/components/board/sections/gridstack/use-gridstack.ts

@@ -107,7 +107,7 @@ export const useGridstack = ({
 
     // Add listener for moving items in config from one wrapper to another
     currentGrid?.on("added", (_, nodes) => {
-      nodes.forEach((node) => onAdd(node));
+      nodes.forEach(onAdd);
     });
 
     return () => {
@@ -192,8 +192,6 @@ const useCssVariableConfiguration = ({
     const widgetWidth = mainRef.current.clientWidth / sectionColumnCount;
     // widget width is used to define sizes of gridstack items within global.scss
     root?.style.setProperty("--gridstack-widget-width", widgetWidth.toString());
-    console.log("widgetWidth", widgetWidth);
-    console.log(gridRef.current);
     gridRef.current?.cellHeight(widgetWidth);
     // gridRef.current is required otherwise the cellheight is run on production as undefined
     // eslint-disable-next-line react-hooks/exhaustive-deps

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

@@ -1,11 +1,11 @@
 import type { ReactNode } from "react";
 import Link from "next/link";
 
+import { Spotlight } from "@homarr/spotlight";
 import { AppShellHeader, Group, UnstyledButton } from "@homarr/ui";
 
 import { ClientBurger } from "./header/burger";
 import { DesktopSearchInput, MobileSearchButton } from "./header/search";
-import { ClientSpotlight } from "./header/spotlight";
 import { UserButton } from "./header/user";
 import { HomarrLogoWithTitle } from "./logo/homarr-logo";
 
@@ -38,7 +38,7 @@ export const MainHeader = ({ logo, actions, hasNavigation = true }: Props) => {
           <UserButton />
         </Group>
       </Group>
-      <ClientSpotlight />
+      <Spotlight />
     </AppShellHeader>
   );
 };

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}
-    />
-  );
-};