diff --git a/apps/nextjs/src/components/board/items/widget-hover-overlay.tsx b/apps/nextjs/src/components/board/items/widget-hover-overlay.tsx
index f30d91f67..4a67e06c5 100644
--- a/apps/nextjs/src/components/board/items/widget-hover-overlay.tsx
+++ b/apps/nextjs/src/components/board/items/widget-hover-overlay.tsx
@@ -1,8 +1,10 @@
"use client";
-import { Text } from "@mantine/core";
+import { Avatar, Text, Tooltip } from "@mantine/core";
+import type { RouterOutputs } from "@homarr/api";
import { useEditMode } from "@homarr/boards/edit-mode";
+import { getIconUrl } from "@homarr/definitions";
import { useI18n } from "@homarr/translation/client";
import { widgetImports } from "@homarr/widgets";
@@ -11,9 +13,10 @@ import classes from "./widget-hover-overlay.module.css";
interface WidgetHoverOverlayProps {
item: SectionItem;
+ integrations: RouterOutputs["integration"]["all"] | undefined;
}
-export const WidgetHoverOverlay = ({ item }: WidgetHoverOverlayProps) => {
+export const WidgetHoverOverlay = ({ item, integrations }: WidgetHoverOverlayProps) => {
const [isEditMode] = useEditMode();
const t = useI18n();
const { definition } = widgetImports[item.kind];
@@ -21,6 +24,10 @@ export const WidgetHoverOverlay = ({ item }: WidgetHoverOverlayProps) => {
const displayName = item.advancedOptions.title?.trim() || t(`widget.${item.kind}.name`);
+ const connectedIntegrations = (integrations ?? []).filter((integration) =>
+ item.integrationIds.includes(integration.id),
+ );
+
if (!isEditMode) {
return null;
}
@@ -34,6 +41,16 @@ export const WidgetHoverOverlay = ({ item }: WidgetHoverOverlayProps) => {
{displayName}
+
+ {connectedIntegrations.length > 0 && (
+
+ {connectedIntegrations.map((integration) => (
+
+
+
+ ))}
+
+ )}
);
diff --git a/apps/nextjs/src/components/board/sections/content.tsx b/apps/nextjs/src/components/board/sections/content.tsx
index 6c7669514..ced30c796 100644
--- a/apps/nextjs/src/components/board/sections/content.tsx
+++ b/apps/nextjs/src/components/board/sections/content.tsx
@@ -64,7 +64,7 @@ const Item = ({ item, innerRef, integrations }: ItemProps) => {
minWidth={minWidth}
minHeight={minHeight}
>
- {item.type === "item" && item.kind !== "app" && }
+ {item.type === "item" && item.kind !== "app" && }
{item.type === "item" ? : }
);