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" ? : } );