feat: #1047 add overseerr search (#1411)

Co-authored-by: Meier Lukas <meierschlumpf@gmail.com>

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

@@ -1,8 +1,12 @@
 "use client";
 
 import Link from "next/link";
-import { Button, Grid, Group, Stack, Textarea, TextInput } from "@mantine/core";
+import type { SegmentedControlItem } from "@mantine/core";
+import { Button, Fieldset, Grid, Group, SegmentedControl, Stack, Textarea, TextInput } from "@mantine/core";
+import { WidgetIntegrationSelect } from "node_modules/@homarr/widgets/src/widget-integration-select";
 
+import { clientApi } from "@homarr/api/client";
+import { searchEngineTypes } from "@homarr/definitions";
 import { useZodForm } from "@homarr/form";
 import type { TranslationFunction } from "@homarr/translation";
 import { useI18n } from "@homarr/translation/client";
@@ -25,6 +29,8 @@ export const SearchEngineForm = (props: SearchEngineFormProps) => {
   const { submitButtonTranslation, handleSubmit, initialValues, isPending, disableShort } = props;
   const t = useI18n();
 
+  const [integrationData] = clientApi.integration.allThatSupportSearch.useSuspenseQuery();
+
   const form = useZodForm(validation.searchEngine.manage, {
     initialValues: initialValues ?? {
       name: "",
@@ -32,6 +38,7 @@ export const SearchEngineForm = (props: SearchEngineFormProps) => {
       iconUrl: "",
       urlTemplate: "",
       description: "",
+      type: "generic",
     },
   });
 
@@ -52,11 +59,40 @@ export const SearchEngineForm = (props: SearchEngineFormProps) => {
           </Grid.Col>
         </Grid>
         <IconPicker initialValue={initialValues?.iconUrl} {...form.getInputProps("iconUrl")} />
-        <TextInput
-          {...form.getInputProps("urlTemplate")}
-          withAsterisk
-          label={t("search.engine.field.urlTemplate.label")}
-        />
+
+        <Fieldset legend={t("search.engine.page.edit.configControl")}>
+          <SegmentedControl
+            data={searchEngineTypes.map(
+              (type) =>
+                ({
+                  label: t(`search.engine.page.edit.searchEngineType.${type}`),
+                  value: type,
+                }) satisfies SegmentedControlItem,
+            )}
+            {...form.getInputProps("type")}
+            fullWidth
+          />
+
+          {form.values.type === "generic" && (
+            <TextInput
+              {...form.getInputProps("urlTemplate")}
+              withAsterisk
+              label={t("search.engine.field.urlTemplate.label")}
+            />
+          )}
+
+          {form.values.type === "fromIntegration" && (
+            <WidgetIntegrationSelect
+              label="Integration"
+              data={integrationData}
+              canSelectMultiple={false}
+              onChange={(value) => form.setFieldValue("integrationId", value[0])}
+              value={form.values.integrationId !== undefined ? [form.values.integrationId] : []}
+              withAsterisk
+            />
+          )}
+        </Fieldset>
+
         <Textarea {...form.getInputProps("description")} label={t("search.engine.field.description.label")} />
 
         <Group justify="end">

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

@@ -91,9 +91,16 @@ const SearchEngineCard = async ({ searchEngine }: SearchEngineCardProps) => {
                 {searchEngine.description}
               </Text>
             )}
-            <Anchor href={searchEngine.urlTemplate.replace("%s", "test")} lineClamp={1} size="sm">
-              {searchEngine.urlTemplate}
-            </Anchor>
+            {searchEngine.type === "generic" && searchEngine.urlTemplate !== null && (
+              <Anchor href={searchEngine.urlTemplate.replace("%s", "test")} lineClamp={1} size="sm">
+                {searchEngine.urlTemplate}
+              </Anchor>
+            )}
+            {searchEngine.type === "fromIntegration" && searchEngine.integrationId !== null && (
+              <Text c="dimmed" size="sm">
+                {t("page.list.interactive")}
+              </Text>
+            )}
           </Stack>
         </Group>
         <Group>