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

packages/spotlight/src/chip-group.tsx

@@ -0,0 +1,54 @@
+import { useScopedI18n } from "@homarr/translation/client";
+import { Chip } from "@homarr/ui";
+
+import {
+  selectNextAction,
+  selectPreviousAction,
+  spotlightStore,
+  triggerSelectedAction,
+} from "./spotlight-store";
+import type { SpotlightActionGroup } from "./type";
+
+const disableArrowUpAndDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+  if (e.key === "ArrowDown") {
+    selectNextAction(spotlightStore);
+    e.preventDefault();
+  } else if (e.key === "ArrowUp") {
+    selectPreviousAction(spotlightStore);
+    e.preventDefault();
+  } else if (e.key === "Enter") {
+    triggerSelectedAction(spotlightStore);
+  }
+};
+
+const focusActiveByDefault = (e: React.FocusEvent<HTMLInputElement>) => {
+  const relatedTarget = e.relatedTarget;
+
+  const isPreviousTargetRadio =
+    relatedTarget && "type" in relatedTarget && relatedTarget.type === "radio";
+  if (isPreviousTargetRadio) return;
+
+  const group = e.currentTarget.parentElement?.parentElement;
+  if (!group) return;
+  const label = group.querySelector<HTMLLabelElement>("label[data-checked]");
+  if (!label) return;
+  label.focus();
+};
+
+interface Props {
+  group: SpotlightActionGroup;
+}
+
+export const GroupChip = ({ group }: Props) => {
+  const t = useScopedI18n("common.search.group");
+  return (
+    <Chip
+      key={group}
+      value={group}
+      onFocus={focusActiveByDefault}
+      onKeyDown={disableArrowUpAndDown}
+    >
+      {t(group)}
+    </Chip>
+  );
+};