feat(overlay): add integration avatars back to WidgetHoverOverlay

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}
           </Text>
         </div>
+
+        {connectedIntegrations.length > 0 && (
+          <Avatar.Group spacing="xs" className={classes.integrations}>
+            {connectedIntegrations.map((integration) => (
+              <Tooltip key={integration.id} label={integration.name} withArrow position="top">
+                <Avatar src={getIconUrl(integration.kind)} size={18} radius="sm" className={classes.integrationAvatar} />
+              </Tooltip>
+            ))}
+          </Avatar.Group>
+        )}
       </div>
     </div>
   );

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" && <WidgetHoverOverlay item={item} />}
+      {item.type === "item" && item.kind !== "app" && <WidgetHoverOverlay item={item} integrations={integrations} />}
       {item.type === "item" ? <BoardItemContent item={item} /> : <BoardDynamicSection section={item} />}
     </GridStackItem>
   );