feat(spotlight): add default search engine (#1807)

apps/nextjs/src/app/[locale]/manage/settings/_components/search-settings-form.tsx

@@ -0,0 +1,29 @@
+"use client";
+
+import { Select } from "@mantine/core";
+
+import { clientApi } from "@homarr/api/client";
+import type { ServerSettings } from "@homarr/server-settings";
+import { useScopedI18n } from "@homarr/translation/client";
+
+import { CommonSettingsForm } from "./common-form";
+
+export const SearchSettingsForm = ({ defaultValues }: { defaultValues: ServerSettings["search"] }) => {
+  const tSearch = useScopedI18n("management.page.settings.section.search");
+  const [selectableSearchEngines] = clientApi.searchEngine.getSelectable.useSuspenseQuery({ withIntegrations: false });
+
+  return (
+    <CommonSettingsForm settingKey="search" defaultValues={defaultValues}>
+      {(form) => (
+        <>
+          <Select
+            label={tSearch("defaultSearchEngine.label")}
+            description={tSearch("defaultSearchEngine.description")}
+            data={selectableSearchEngines}
+            {...form.getInputProps("defaultSearchEngineId")}
+          />
+        </>
+      )}
+    </CommonSettingsForm>
+  );
+};

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

@@ -11,6 +11,7 @@ import { AnalyticsSettings } from "./_components/analytics.settings";
 import { AppearanceSettingsForm } from "./_components/appearance-settings-form";
 import { BoardSettingsForm } from "./_components/board-settings-form";
 import { CultureSettingsForm } from "./_components/culture-settings-form";
+import { SearchSettingsForm } from "./_components/search-settings-form";
 
 export async function generateMetadata() {
   const t = await getScopedI18n("management");
@@ -41,6 +42,10 @@ export default async function SettingsPage() {
           <Title order={2}>{tSettings("section.board.title")}</Title>
           <BoardSettingsForm defaultValues={serverSettings.board} />
         </Stack>
+        <Stack>
+          <Title order={2}>{tSettings("section.search.title")}</Title>
+          <SearchSettingsForm defaultValues={serverSettings.search} />
+        </Stack>
         <Stack>
           <Title order={2}>{tSettings("section.appearance.title")}</Title>
           <AppearanceSettingsForm defaultValues={serverSettings.appearance} />

apps/nextjs/src/app/[locale]/manage/users/[userId]/general/_components/_change-default-search-engine.tsx

@@ -0,0 +1,67 @@
+"use client";
+
+import { Button, Group, Select, Stack } from "@mantine/core";
+
+import type { RouterOutputs } from "@homarr/api";
+import { clientApi } from "@homarr/api/client";
+import { revalidatePathActionAsync } from "@homarr/common/client";
+import { useZodForm } from "@homarr/form";
+import { showErrorNotification, showSuccessNotification } from "@homarr/notifications";
+import { useI18n } from "@homarr/translation/client";
+import type { z } from "@homarr/validation";
+import { validation } from "@homarr/validation";
+
+interface ChangeDefaultSearchEngineFormProps {
+  user: RouterOutputs["user"]["getById"];
+  searchEnginesData: { value: string; label: string }[];
+}
+
+export const ChangeDefaultSearchEngineForm = ({ user, searchEnginesData }: ChangeDefaultSearchEngineFormProps) => {
+  const t = useI18n();
+  const { mutate, isPending } = clientApi.user.changeDefaultSearchEngine.useMutation({
+    async onSettled() {
+      await revalidatePathActionAsync(`/manage/users/${user.id}`);
+    },
+    onSuccess(_, variables) {
+      form.setInitialValues({
+        defaultSearchEngineId: variables.defaultSearchEngineId,
+      });
+      showSuccessNotification({
+        message: t("user.action.changeDefaultSearchEngine.notification.success.message"),
+      });
+    },
+    onError() {
+      showErrorNotification({
+        message: t("user.action.changeDefaultSearchEngine.notification.error.message"),
+      });
+    },
+  });
+  const form = useZodForm(validation.user.changeDefaultSearchEngine, {
+    initialValues: {
+      defaultSearchEngineId: user.defaultSearchEngineId ?? "",
+    },
+  });
+
+  const handleSubmit = (values: FormType) => {
+    mutate({
+      userId: user.id,
+      ...values,
+    });
+  };
+
+  return (
+    <form onSubmit={form.onSubmit(handleSubmit)}>
+      <Stack gap="md">
+        <Select w="100%" data={searchEnginesData} {...form.getInputProps("defaultSearchEngineId")} />
+
+        <Group justify="end">
+          <Button type="submit" color="teal" loading={isPending}>
+            {t("common.action.save")}
+          </Button>
+        </Group>
+      </Stack>
+    </form>
+  );
+};
+
+type FormType = z.infer<typeof validation.user.changeDefaultSearchEngine>;

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

@@ -11,6 +11,7 @@ import { DangerZoneItem, DangerZoneRoot } from "~/components/manage/danger-zone"
 import { catchTrpcNotFound } from "~/errors/trpc-catch-error";
 import { createMetaTitle } from "~/metadata";
 import { canAccessUserEditPage } from "../access";
+import { ChangeDefaultSearchEngineForm } from "./_components/_change-default-search-engine";
 import { ChangeHomeBoardForm } from "./_components/_change-home-board";
 import { DeleteUserButton } from "./_components/_delete-user-button";
 import { FirstDayOfWeek } from "./_components/_first-day-of-week";
@@ -60,6 +61,7 @@ export default async function EditUserPage(props: Props) {
   }
 
   const boards = await api.board.getAllBoards();
+  const searchEngines = await api.searchEngine.getSelectable();
 
   const isCredentialsUser = user.provider === "credentials";
 
@@ -97,6 +99,11 @@ export default async function EditUserPage(props: Props) {
         />
       </Stack>
 
+      <Stack mb="lg">
+        <Title order={2}>{tGeneral("item.defaultSearchEngine")}</Title>
+        <ChangeDefaultSearchEngineForm user={user} searchEnginesData={searchEngines} />
+      </Stack>
+
       <Stack mb="lg">
         <Title order={2}>{tGeneral("item.firstDayOfWeek")}</Title>
         <FirstDayOfWeek user={user} />