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

apps/nextjs/src/app/[locale]/manage/apps/page.tsx

@@ -105,7 +105,7 @@ const AppNoResults = async () => {
         <Text fw={500} size="lg">
           {t("app.page.list.noResults.title")}
         </Text>
-        <Anchor href="/manage/apps/new">{t("app.page.list.noResults.description")}</Anchor>
+        <Anchor href="/manage/apps/new">{t("app.page.list.noResults.action")}</Anchor>
       </Stack>
     </Card>
   );

apps/nextjs/src/app/[locale]/manage/layout.tsx

@@ -15,6 +15,7 @@ import {
   IconPlug,
   IconQuestionMark,
   IconReport,
+  IconSearch,
   IconSettings,
   IconTool,
   IconUser,
@@ -53,6 +54,11 @@ export default async function ManageLayout({ children }: PropsWithChildren) {
       href: "/manage/integrations",
       label: t("items.integrations"),
     },
+    {
+      icon: IconSearch,
+      href: "/manage/search-engines",
+      label: t("items.searchEngies"),
+    },
     {
       icon: IconUser,
       label: t("items.users.label"),

apps/nextjs/src/app/[locale]/manage/search-engines/_form.tsx

@@ -0,0 +1,73 @@
+"use client";
+
+import Link from "next/link";
+import { Button, Grid, Group, Stack, Textarea, TextInput } from "@mantine/core";
+
+import { useZodForm } from "@homarr/form";
+import type { TranslationFunction } from "@homarr/translation";
+import { useI18n } from "@homarr/translation/client";
+import type { z } from "@homarr/validation";
+import { validation } from "@homarr/validation";
+
+import { IconPicker } from "~/components/icons/picker/icon-picker";
+
+type FormType = z.infer<typeof validation.searchEngine.manage>;
+
+interface SearchEngineFormProps {
+  submitButtonTranslation: (t: TranslationFunction) => string;
+  initialValues?: FormType;
+  handleSubmit: (values: FormType) => void;
+  isPending: boolean;
+  disableShort?: boolean;
+}
+
+export const SearchEngineForm = (props: SearchEngineFormProps) => {
+  const { submitButtonTranslation, handleSubmit, initialValues, isPending, disableShort } = props;
+  const t = useI18n();
+
+  const form = useZodForm(validation.searchEngine.manage, {
+    initialValues: initialValues ?? {
+      name: "",
+      short: "",
+      iconUrl: "",
+      urlTemplate: "",
+      description: "",
+    },
+  });
+
+  return (
+    <form onSubmit={form.onSubmit(handleSubmit)}>
+      <Stack>
+        <Grid>
+          <Grid.Col span={{ base: 12, md: 8, lg: 9, xl: 10 }}>
+            <TextInput {...form.getInputProps("name")} withAsterisk label={t("search.engine.field.name.label")} />
+          </Grid.Col>
+          <Grid.Col span={{ base: 12, md: 4, lg: 3, xl: 2 }}>
+            <TextInput
+              {...form.getInputProps("short")}
+              disabled={disableShort}
+              withAsterisk
+              label={t("search.engine.field.short.label")}
+            />
+          </Grid.Col>
+        </Grid>
+        <IconPicker initialValue={initialValues?.iconUrl} {...form.getInputProps("iconUrl")} />
+        <TextInput
+          {...form.getInputProps("urlTemplate")}
+          withAsterisk
+          label={t("search.engine.field.urlTemplate.label")}
+        />
+        <Textarea {...form.getInputProps("description")} label={t("search.engine.field.description.label")} />
+
+        <Group justify="end">
+          <Button variant="default" component={Link} href="/manage/search-engines">
+            {t("common.action.backToOverview")}
+          </Button>
+          <Button type="submit" loading={isPending}>
+            {submitButtonTranslation(t)}
+          </Button>
+        </Group>
+      </Stack>
+    </form>
+  );
+};

apps/nextjs/src/app/[locale]/manage/search-engines/_search-engine-delete-button.tsx

@@ -0,0 +1,55 @@
+"use client";
+
+import { useCallback } from "react";
+import { ActionIcon } from "@mantine/core";
+import { IconTrash } from "@tabler/icons-react";
+
+import type { RouterOutputs } from "@homarr/api";
+import { clientApi } from "@homarr/api/client";
+import { revalidatePathActionAsync } from "@homarr/common/client";
+import { useConfirmModal } from "@homarr/modals";
+import { showErrorNotification, showSuccessNotification } from "@homarr/notifications";
+import { useScopedI18n } from "@homarr/translation/client";
+
+interface SearchEngineDeleteButtonProps {
+  searchEngine: RouterOutputs["searchEngine"]["getPaginated"]["items"][number];
+}
+
+export const SearchEngineDeleteButton = ({ searchEngine }: SearchEngineDeleteButtonProps) => {
+  const t = useScopedI18n("search.engine.page.delete");
+  const { openConfirmModal } = useConfirmModal();
+  const { mutate, isPending } = clientApi.searchEngine.delete.useMutation();
+
+  const onClick = useCallback(() => {
+    openConfirmModal({
+      title: t("title"),
+      children: t("message", searchEngine),
+      onConfirm: () => {
+        mutate(
+          { id: searchEngine.id },
+          {
+            onSuccess: () => {
+              showSuccessNotification({
+                title: t("notification.success.title"),
+                message: t("notification.success.message"),
+              });
+              void revalidatePathActionAsync("/manage/search-engines");
+            },
+            onError: () => {
+              showErrorNotification({
+                title: t("notification.error.title"),
+                message: t("notification.error.message"),
+              });
+            },
+          },
+        );
+      },
+    });
+  }, [searchEngine, mutate, t, openConfirmModal]);
+
+  return (
+    <ActionIcon loading={isPending} variant="subtle" color="red" onClick={onClick} aria-label={t("title")}>
+      <IconTrash color="red" size={16} stroke={1.5} />
+    </ActionIcon>
+  );
+};

apps/nextjs/src/app/[locale]/manage/search-engines/edit/[id]/_search-engine-edit-form.tsx

@@ -0,0 +1,63 @@
+"use client";
+
+import { useCallback } from "react";
+import { useRouter } from "next/navigation";
+
+import type { RouterOutputs } from "@homarr/api";
+import { clientApi } from "@homarr/api/client";
+import { revalidatePathActionAsync } from "@homarr/common/client";
+import { showErrorNotification, showSuccessNotification } from "@homarr/notifications";
+import type { TranslationFunction } from "@homarr/translation";
+import { useScopedI18n } from "@homarr/translation/client";
+import type { validation, z } from "@homarr/validation";
+
+import { SearchEngineForm } from "../../_form";
+
+interface SearchEngineEditFormProps {
+  searchEngine: RouterOutputs["searchEngine"]["byId"];
+}
+
+export const SearchEngineEditForm = ({ searchEngine }: SearchEngineEditFormProps) => {
+  const t = useScopedI18n("search.engine.page.edit.notification");
+  const router = useRouter();
+
+  const { mutate, isPending } = clientApi.searchEngine.update.useMutation({
+    onSuccess: () => {
+      showSuccessNotification({
+        title: t("success.title"),
+        message: t("success.message"),
+      });
+      void revalidatePathActionAsync("/manage/search-engines").then(() => {
+        router.push("/manage/search-engines");
+      });
+    },
+    onError: () => {
+      showErrorNotification({
+        title: t("error.title"),
+        message: t("error.message"),
+      });
+    },
+  });
+
+  const handleSubmit = useCallback(
+    (values: z.infer<typeof validation.searchEngine.manage>) => {
+      mutate({
+        id: searchEngine.id,
+        ...values,
+      });
+    },
+    [mutate, searchEngine.id],
+  );
+
+  const submitButtonTranslation = useCallback((t: TranslationFunction) => t("common.action.save"), []);
+
+  return (
+    <SearchEngineForm
+      submitButtonTranslation={submitButtonTranslation}
+      initialValues={searchEngine}
+      handleSubmit={handleSubmit}
+      isPending={isPending}
+      disableShort
+    />
+  );
+};

apps/nextjs/src/app/[locale]/manage/search-engines/edit/[id]/page.tsx

@@ -0,0 +1,27 @@
+import { Stack, Title } from "@mantine/core";
+
+import { api } from "@homarr/api/server";
+import { getI18n } from "@homarr/translation/server";
+
+import { ManageContainer } from "~/components/manage/manage-container";
+import { DynamicBreadcrumb } from "~/components/navigation/dynamic-breadcrumb";
+import { SearchEngineEditForm } from "./_search-engine-edit-form";
+
+interface SearchEngineEditPageProps {
+  params: { id: string };
+}
+
+export default async function SearchEngineEditPage({ params }: SearchEngineEditPageProps) {
+  const searchEngine = await api.searchEngine.byId({ id: params.id });
+  const t = await getI18n();
+
+  return (
+    <ManageContainer>
+      <DynamicBreadcrumb dynamicMappings={new Map([[params.id, searchEngine.name]])} nonInteractable={["edit"]} />
+      <Stack>
+        <Title>{t("search.engine.page.edit.title")}</Title>
+        <SearchEngineEditForm searchEngine={searchEngine} />
+      </Stack>
+    </ManageContainer>
+  );
+}

apps/nextjs/src/app/[locale]/manage/search-engines/new/_search-engine-new-form.tsx

@@ -0,0 +1,52 @@
+"use client";
+
+import { useCallback } from "react";
+import { useRouter } from "next/navigation";
+
+import { clientApi } from "@homarr/api/client";
+import { revalidatePathActionAsync } from "@homarr/common/client";
+import { showErrorNotification, showSuccessNotification } from "@homarr/notifications";
+import type { TranslationFunction } from "@homarr/translation";
+import { useScopedI18n } from "@homarr/translation/client";
+import type { validation, z } from "@homarr/validation";
+
+import { SearchEngineForm } from "../_form";
+
+export const SearchEngineNewForm = () => {
+  const t = useScopedI18n("search.engine.page.create.notification");
+  const router = useRouter();
+
+  const { mutate, isPending } = clientApi.searchEngine.create.useMutation({
+    onSuccess: async () => {
+      showSuccessNotification({
+        title: t("success.title"),
+        message: t("success.message"),
+      });
+      await revalidatePathActionAsync("/manage/search-engines");
+      router.push("/manage/search-engines");
+    },
+    onError: () => {
+      showErrorNotification({
+        title: t("error.title"),
+        message: t("error.message"),
+      });
+    },
+  });
+
+  const handleSubmit = useCallback(
+    (values: z.infer<typeof validation.searchEngine.manage>) => {
+      mutate(values);
+    },
+    [mutate],
+  );
+
+  const submitButtonTranslation = useCallback((t: TranslationFunction) => t("common.action.create"), []);
+
+  return (
+    <SearchEngineForm
+      submitButtonTranslation={submitButtonTranslation}
+      handleSubmit={handleSubmit}
+      isPending={isPending}
+    />
+  );
+};

apps/nextjs/src/app/[locale]/manage/search-engines/new/page.tsx

@@ -0,0 +1,21 @@
+import { Stack, Title } from "@mantine/core";
+
+import { getI18n } from "@homarr/translation/server";
+
+import { ManageContainer } from "~/components/manage/manage-container";
+import { DynamicBreadcrumb } from "~/components/navigation/dynamic-breadcrumb";
+import { SearchEngineNewForm } from "./_search-engine-new-form";
+
+export default async function SearchEngineNewPage() {
+  const t = await getI18n();
+
+  return (
+    <ManageContainer>
+      <DynamicBreadcrumb />
+      <Stack>
+        <Title>{t("search.engine.page.create.title")}</Title>
+        <SearchEngineNewForm />
+      </Stack>
+    </ManageContainer>
+  );
+}