diff --git a/packages/widgets/src/wud/component.tsx b/packages/widgets/src/wud/component.tsx
index 1c744d2cd..0895aeb2b 100644
--- a/packages/widgets/src/wud/component.tsx
+++ b/packages/widgets/src/wud/component.tsx
@@ -11,36 +11,49 @@ import type { WudContainerUpdate } from "@homarr/integrations";
import { useScopedI18n } from "@homarr/translation/client";
import { WidgetEmptyState } from "../common/empty-state";
+import { getSafeApplicationUrl, SAFE_NEW_TAB_REL } from "../common/application-url";
+import { WidgetQueryErrorIndicator } from "../common/query-state-indicator";
import type { WidgetComponentProps } from "../definition";
import classes from "./component.module.css";
-export default function WudWidget({ integrationIds, options, width }: WidgetComponentProps<"wud">) {
+export default function WudWidget({ integrationIds, options, width, displayMode }: WidgetComponentProps<"wud">) {
const integrationId = integrationIds[0];
if (!integrationId) return null;
- return ;
+ return (
+
+ );
}
const WudWidgetContent = ({
integrationId,
options,
width,
+ isAdvanced,
}: {
integrationId: string;
options: WidgetComponentProps<"wud">["options"];
width: number;
+ isAdvanced: boolean;
}) => {
const t = useScopedI18n("widget.wud");
- const [data] = clientApi.widget.wud.getStats.useSuspenseQuery({ integrationId });
+ const [data, statsQuery] = clientApi.widget.wud.getStats.useSuspenseQuery({ integrationId });
const board = useRequiredBoard();
- const isTiny = width < 256;
+ const isTiny = !isAdvanced && width < 256;
const stats = data.stats;
if (stats.totalContainers === 0) return ;
const updatePercentage = Math.round((stats.updatesAvailable / stats.totalContainers) * 100);
const badgeColor = stats.updatesAvailable === 0 ? "green" : progressColor(updatePercentage);
- const showUpdateList = options.showUpdateList && stats.updates.length > 0;
+ const showTitle = isAdvanced || options.showTitle;
+ const showRing = isAdvanced || options.showRing;
+ const showUpdateList = (isAdvanced || options.showUpdateList) && stats.updates.length > 0;
const ring = (
);
- const tinyContent = options.showRing ? (
+ const tinyContent = showRing ? (
@@ -102,7 +115,12 @@ const WudWidgetContent = ({
return (
- {options.showTitle && !isTiny && (
+ {Boolean(statsQuery.error) && (
+
+
+
+ )}
+ {showTitle && !isTiny && (
@@ -122,12 +140,12 @@ const WudWidgetContent = ({
tinyContent
) : options.layout === "horizontal" ? (
- {options.showRing && ring}
+ {showRing && ring}
{summary}
) : (
- {options.showRing && ring}
+ {showRing && ring}
{summary}
)}
@@ -181,6 +199,7 @@ const UpdateCard = ({
className: string | undefined;
}) => {
const t = useScopedI18n("widget.wud");
+ const href = getSafeApplicationUrl(update.link);
const isDigestUpdate = isDigestVersion(update.newVersion);
const fullVersionText = buildVersionText(update.currentVersion, update.newVersion);
const versionText = isDigestUpdate
@@ -201,12 +220,12 @@ const UpdateCard = ({
{showVersionTooltip ? {versionBadge} : versionBadge}
- {update.link && (
+ {href && (