feat: add improved search (#1051)

* feat: add improved search

* wip: add support for sorting, rename use-options to use-query-options, add use-options for local usage, add pages search group

* feat: add help links from manage layout to help search mode

* feat: add additional search engines

* feat: add group search details

* refactor: improve users search group type

* feat: add apps search group, add disabled search interaction

* feat: add integrations and boards for search

* wip: hook issue with react

* fix: hook issue regarding actions and interactions

* chore: address pull request feedback

* fix: format issues

* feat: add additional global actions to search

* chore: remove unused code

* fix: search engine short key

* fix: typecheck issues

* fix: deepsource issues

* fix: eslint issue

* fix: lint issues

* fix: unordered dependencies

* chore: address pull request feedback

packages/modals-collection/src/boards/add-board-modal.tsx

@@ -3,18 +3,14 @@ import { useDebouncedValue } from "@mantine/hooks";
 import { IconAlertTriangle, IconCircleCheck } from "@tabler/icons-react";
 
 import { clientApi } from "@homarr/api/client";
-import type { MaybePromise } from "@homarr/common/types";
+import { revalidatePathActionAsync } from "@homarr/common/client";
 import { useZodForm } from "@homarr/form";
 import { createModal } from "@homarr/modals";
 import { showErrorNotification, showSuccessNotification } from "@homarr/notifications";
 import { useI18n } from "@homarr/translation/client";
 import { validation } from "@homarr/validation";
 
-interface InnerProps {
-  onSettled: () => MaybePromise<void>;
-}
-
-export const AddBoardModal = createModal<InnerProps>(({ actions, innerProps }) => {
+export const AddBoardModal = createModal(({ actions }) => {
   const t = useI18n();
   const form = useZodForm(validation.board.create, {
     mode: "controlled",
@@ -25,7 +21,9 @@ export const AddBoardModal = createModal<InnerProps>(({ actions, innerProps }) =
     },
   });
   const { mutate, isPending } = clientApi.board.createBoard.useMutation({
-    onSettled: innerProps.onSettled,
+    onSettled: async () => {
+      await revalidatePathActionAsync("/manage/boards");
+    },
   });
 
   const boardNameStatus = useBoardNameStatus(form.values.name);

packages/modals-collection/src/groups/add-group-modal.tsx

@@ -0,0 +1,56 @@
+import { Button, Group, Stack, TextInput } from "@mantine/core";
+
+import { clientApi } from "@homarr/api/client";
+import { revalidatePathActionAsync } from "@homarr/common/client";
+import { useZodForm } from "@homarr/form";
+import { createModal } from "@homarr/modals";
+import { showErrorNotification, showSuccessNotification } from "@homarr/notifications";
+import { useI18n } from "@homarr/translation/client";
+import { validation } from "@homarr/validation";
+
+export const AddGroupModal = createModal<void>(({ actions }) => {
+  const t = useI18n();
+  const { mutate, isPending } = clientApi.group.createGroup.useMutation();
+  const form = useZodForm(validation.group.create, {
+    initialValues: {
+      name: "",
+    },
+  });
+
+  return (
+    <form
+      onSubmit={form.onSubmit((values) => {
+        mutate(values, {
+          onSuccess() {
+            actions.closeModal();
+            void revalidatePathActionAsync("/manage/users/groups");
+            showSuccessNotification({
+              title: t("common.notification.create.success"),
+              message: t("group.action.create.notification.success.message"),
+            });
+          },
+          onError() {
+            showErrorNotification({
+              title: t("common.notification.create.error"),
+              message: t("group.action.create.notification.error.message"),
+            });
+          },
+        });
+      })}
+    >
+      <Stack>
+        <TextInput label={t("group.field.name")} data-autofocus {...form.getInputProps("name")} />
+        <Group justify="right">
+          <Button onClick={actions.closeModal} variant="subtle" color="gray">
+            {t("common.action.cancel")}
+          </Button>
+          <Button loading={isPending} type="submit" color="teal">
+            {t("common.action.create")}
+          </Button>
+        </Group>
+      </Stack>
+    </form>
+  );
+}).withOptions({
+  defaultTitle: (t) => t("group.action.create.label"),
+});

packages/modals-collection/src/groups/index.ts

@@ -0,0 +1 @@
+export { AddGroupModal } from "./add-group-modal";

packages/modals-collection/src/index.ts

@@ -1,2 +1,3 @@
 export * from "./boards";
 export * from "./invites";
+export * from "./groups";