refactor(widgets): replace beszelSystem option with generic integrationSelect

packages/widgets/src/_inputs/widget-integration-select-input.tsx

@@ -0,0 +1,49 @@
+"use client";
+
+import { Select, Text } from "@mantine/core";
+
+import { useScopedI18n } from "@homarr/translation/client";
+
+import type { CommonWidgetInputProps } from "./common";
+import { useWidgetInputTranslation } from "./common";
+import { useFormContext } from "./form";
+
+const useIntegrationSelectTranslation = () =>
+  useScopedI18n("widget.integrationSelect");
+
+export const WidgetIntegrationSelectInput = ({
+  property,
+  kind,
+  options,
+}: CommonWidgetInputProps<"integrationSelect">) => {
+  const t = useIntegrationSelectTranslation();
+  const tInput = useWidgetInputTranslation(kind, property);
+  const form = useFormContext();
+
+  const integrationIds = form.values.integrationIds as string[];
+
+  const { data: selectData = [], isPending, isError } = options.useOptions(integrationIds);
+
+  if (integrationIds.length === 0) {
+    return (
+      <Text size="sm" c="dimmed">
+        {t("configureIntegrationFirst")}
+      </Text>
+    );
+  }
+
+  return (
+    <Select
+      label={tInput("label")}
+      description={options.withDescription ? tInput("description") : undefined}
+      placeholder={(isPending && t("loading")) || t("placeholder")}
+      clearable={options.clearable}
+      searchable={options.searchable}
+      nothingFoundMessage={t("noResults")}
+      data={selectData}
+      disabled={isError}
+      error={(isError && t("loadError")) || undefined}
+      {...form.getInputProps(`options.${property}`)}
+    />
+  );
+};