diff --git a/packages/translation/src/lang/en.ts b/packages/translation/src/lang/en.ts
index 24a149631..8aecc2fb2 100644
--- a/packages/translation/src/lang/en.ts
+++ b/packages/translation/src/lang/en.ts
@@ -576,6 +576,7 @@ export default {
tryAgain: "Try again",
loading: "Loading",
},
+ here: "here",
iconPicker: {
label: "Icon URL",
header: "Type name or objects to filter for icons... Homarr will search through {countIcons} icons for you.",
@@ -1157,6 +1158,14 @@ export default {
},
},
},
+ integration: {
+ noData: "No integration found",
+ description: "Click {here} to create a new integration",
+ },
+ app: {
+ noData: "No app found",
+ description: "Click {here} to create a new app",
+ },
error: {
action: {
logs: "Check logs for more details",
diff --git a/packages/widgets/src/_inputs/widget-app-input.tsx b/packages/widgets/src/_inputs/widget-app-input.tsx
index 04a85d468..ee22b08da 100644
--- a/packages/widgets/src/_inputs/widget-app-input.tsx
+++ b/packages/widgets/src/_inputs/widget-app-input.tsx
@@ -1,19 +1,22 @@
"use client";
import { memo, useMemo } from "react";
+import Link from "next/link";
import type { SelectProps } from "@mantine/core";
-import { Group, Loader, Select } from "@mantine/core";
+import { Anchor, Group, Loader, Select, Text } from "@mantine/core";
import { IconCheck } from "@tabler/icons-react";
import type { RouterOutputs } from "@homarr/api";
import { clientApi } from "@homarr/api/client";
+import { useI18n } from "@homarr/translation/client";
import type { CommonWidgetInputProps } from "./common";
import { useWidgetInputTranslation } from "./common";
import { useFormContext } from "./form";
-export const WidgetAppInput = ({ property, kind, options }: CommonWidgetInputProps<"app">) => {
- const t = useWidgetInputTranslation(kind, property);
+export const WidgetAppInput = ({ property, kind }: CommonWidgetInputProps<"app">) => {
+ const t = useI18n();
+ const tInput = useWidgetInputTranslation(kind, property);
const form = useFormContext();
const { data: apps, isPending } = clientApi.app.selectable.useQuery();
@@ -24,10 +27,11 @@ export const WidgetAppInput = ({ property, kind, options }: CommonWidgetInputPro
return (
}
+ nothingFoundMessage={t("widget.common.app.noData")}
renderOption={renderSelectOption}
data={
apps?.map((app) => ({
@@ -36,7 +40,18 @@ export const WidgetAppInput = ({ property, kind, options }: CommonWidgetInputPro
iconUrl: app.iconUrl,
})) ?? []
}
- description={options.withDescription ? t("description") : undefined}
+ inputWrapperOrder={["label", "input", "description", "error"]}
+ description={
+
+ {t("widget.common.app.description", {
+ here: (
+
+ {t("common.here")}
+
+ ),
+ })}
+
+ }
{...form.getInputProps(`options.${property}`)}
/>
);
diff --git a/packages/widgets/src/options.ts b/packages/widgets/src/options.ts
index abe108dfb..91d547c5c 100644
--- a/packages/widgets/src/options.ts
+++ b/packages/widgets/src/options.ts
@@ -104,10 +104,10 @@ const optionsFactory = {
values: [] as string[],
validate: input?.validate,
}),
- app: (input?: Omit, "defaultValue">) => ({
+ app: () => ({
type: "app" as const,
defaultValue: "",
- withDescription: input?.withDescription ?? false,
+ withDescription: false,
}),
};
diff --git a/packages/widgets/src/widget-integration-select.tsx b/packages/widgets/src/widget-integration-select.tsx
index 39bef4d2d..3aa27fcd6 100644
--- a/packages/widgets/src/widget-integration-select.tsx
+++ b/packages/widgets/src/widget-integration-select.tsx
@@ -1,7 +1,9 @@
"use client";
import type { FocusEventHandler } from "react";
+import Link from "next/link";
import {
+ Anchor,
Avatar,
CheckIcon,
CloseButton,
@@ -86,7 +88,23 @@ export const WidgetIntegrationSelect = ({
return (
- combobox.toggleDropdown()} {...props}>
+
+ {t("widget.common.integration.description", {
+ here: (
+
+ {t("common.here")}
+
+ ),
+ })}
+
+ }
+ pointer
+ onClick={() => combobox.toggleDropdown()}
+ {...props}
+ >
{values.length > 0 ? values : {t("common.multiSelect.placeholder")}}
@@ -108,7 +126,15 @@ export const WidgetIntegrationSelect = ({
- {options}
+
+ {options.length >= 1 ? (
+ options
+ ) : (
+
+ {t("widget.common.integration.noData")}
+
+ )}
+
);