feat: add crawling settings (#959)

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

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

@@ -1,16 +1,14 @@
 "use client";
 
-import type { ReactNode } from "react";
 import React from "react";
-import type { MantineSpacing } from "@mantine/core";
-import { Card, Group, LoadingOverlay, Stack, Switch, Text, Title, UnstyledButton } from "@mantine/core";
+import { Card, LoadingOverlay, Stack, Title } from "@mantine/core";
 
 import { clientApi } from "@homarr/api/client";
-import type { UseFormReturnType } from "@homarr/form";
 import { useForm } from "@homarr/form";
 import type { defaultServerSettings } from "@homarr/server-settings";
 import { useScopedI18n } from "@homarr/translation/client";
 
+import { SwitchSetting } from "~/app/[locale]/manage/settings/_components/setting-switch";
 import { revalidatePathActionAsync } from "~/app/revalidatePathAction";
 
 interface AnalyticsSettingsProps {
@@ -62,6 +60,7 @@ export const AnalyticsSettings = ({ initialData }: AnalyticsSettingsProps) => {
             ms="xl"
             title={t("integrationData.title")}
             text={t("integrationData.text")}
+            disabled={!form.values.enableGeneral}
           />
           <SwitchSetting
             form={form}
@@ -69,6 +68,7 @@ export const AnalyticsSettings = ({ initialData }: AnalyticsSettingsProps) => {
             ms="xl"
             title={t("widgetData.title")}
             text={t("widgetData.text")}
+            disabled={!form.values.enableGeneral}
           />
           <SwitchSetting
             form={form}
@@ -76,45 +76,10 @@ export const AnalyticsSettings = ({ initialData }: AnalyticsSettingsProps) => {
             ms="xl"
             title={t("usersData.title")}
             text={t("usersData.text")}
+            disabled={!form.values.enableGeneral}
           />
         </Stack>
       </Card>
     </>
   );
 };
-
-const SwitchSetting = ({
-  form,
-  ms,
-  title,
-  text,
-  formKey,
-}: {
-  form: UseFormReturnType<typeof defaultServerSettings.analytics>;
-  formKey: keyof typeof defaultServerSettings.analytics;
-  ms?: MantineSpacing;
-  title: string;
-  text: ReactNode;
-}) => {
-  const disabled = formKey !== "enableGeneral" && !form.values.enableGeneral;
-  const handleClick = React.useCallback(() => {
-    if (disabled) {
-      return;
-    }
-    form.setFieldValue(formKey, !form.values[formKey]);
-  }, [form, formKey, disabled]);
-
-  return (
-    <Group ms={ms} justify="space-between" gap="lg" align="center" wrap="nowrap">
-      <UnstyledButton style={{ flexGrow: 1 }} onClick={handleClick}>
-        <Stack gap={0}>
-          <Text fw="bold">{title}</Text>
-          <Text c="gray.5" fz={{ base: "xs", md: "sm" }}>
-            {text}
-          </Text>
-        </Stack>
-      </UnstyledButton>
-      <Switch disabled={disabled} onClick={handleClick} checked={form.values[formKey] && !disabled} />
-    </Group>
-  );
-};

apps/nextjs/src/app/[locale]/manage/settings/_components/crawling-and-indexing.settings.tsx

@@ -0,0 +1,68 @@
+"use client";
+
+import React from "react";
+import { Card, LoadingOverlay, Stack, Text, Title } from "@mantine/core";
+
+import { clientApi } from "@homarr/api/client";
+import { useForm } from "@homarr/form";
+import type { defaultServerSettings } from "@homarr/server-settings";
+import { useScopedI18n } from "@homarr/translation/client";
+
+import { SwitchSetting } from "~/app/[locale]/manage/settings/_components/setting-switch";
+import { revalidatePathActionAsync } from "~/app/revalidatePathAction";
+
+interface CrawlingAndIndexingSettingsProps {
+  initialData: typeof defaultServerSettings.crawlingAndIndexing;
+}
+
+export const CrawlingAndIndexingSettings = ({ initialData }: CrawlingAndIndexingSettingsProps) => {
+  const t = useScopedI18n("management.page.settings.section.crawlingAndIndexing");
+  const form = useForm({
+    initialValues: initialData,
+    onValuesChange: (updatedValues, _) => {
+      if (!form.isValid()) {
+        return;
+      }
+
+      void mutateAsync({
+        settingsKey: "crawlingAndIndexing",
+        value: updatedValues,
+      });
+    },
+  });
+
+  const { mutateAsync, isPending } = clientApi.serverSettings.saveSettings.useMutation({
+    onSettled: async () => {
+      await revalidatePathActionAsync("/manage/settings");
+    },
+  });
+
+  return (
+    <>
+      <Title order={2}>{t("title")}</Title>
+
+      <Card pos="relative" withBorder>
+        <Text c={"dimmed"} mb={"lg"}>
+          {t("warning")}
+        </Text>
+        <LoadingOverlay visible={isPending} zIndex={1000} overlayProps={{ radius: "sm", blur: 2 }} />
+        <Stack>
+          <SwitchSetting form={form} formKey="noIndex" title={t("noIndex.title")} text={t("noIndex.text")} />
+          <SwitchSetting form={form} formKey="noFollow" title={t("noFollow.title")} text={t("noFollow.text")} />
+          <SwitchSetting
+            form={form}
+            formKey="noTranslate"
+            title={t("noTranslate.title")}
+            text={t("noTranslate.text")}
+          />
+          <SwitchSetting
+            form={form}
+            formKey="noSiteLinksSearchBox"
+            title={t("noSiteLinksSearchBox.title")}
+            text={t("noSiteLinksSearchBox.text")}
+          />
+        </Stack>
+      </Card>
+    </>
+  );
+};

apps/nextjs/src/app/[locale]/manage/settings/_components/setting-switch.tsx

@@ -0,0 +1,46 @@
+import type { ReactNode } from "react";
+import React from "react";
+import type { MantineSpacing } from "@mantine/core";
+import { Group, Stack, Switch, Text, UnstyledButton } from "@mantine/core";
+
+import type { UseFormReturnType } from "@homarr/form";
+
+export const SwitchSetting = <TFormValue extends Record<string, boolean>>({
+  form,
+  ms,
+  title,
+  text,
+  formKey,
+  disabled,
+}: {
+  form: Omit<UseFormReturnType<TFormValue, () => TFormValue>, "setFieldValue"> & {
+    setFieldValue: (key: keyof TFormValue, value: (previous: boolean) => boolean) => void;
+  };
+  formKey: keyof TFormValue;
+  ms?: MantineSpacing;
+  title: string;
+  text: ReactNode;
+  disabled?: boolean;
+}) => {
+  const handleClick = React.useCallback(() => {
+    if (disabled) {
+      return;
+    }
+
+    form.setFieldValue(formKey, (previous) => !previous);
+  }, [form, formKey, disabled]);
+
+  return (
+    <Group ms={ms} justify="space-between" gap="lg" align="center" wrap="nowrap">
+      <UnstyledButton style={{ flexGrow: 1 }} onClick={handleClick}>
+        <Stack gap={0}>
+          <Text fw="bold">{title}</Text>
+          <Text c="gray.5" fz={{ base: "xs", md: "sm" }}>
+            {text}
+          </Text>
+        </Stack>
+      </UnstyledButton>
+      <Switch disabled={disabled} onClick={handleClick} checked={form.values[formKey] && !disabled} />
+    </Group>
+  );
+};