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 aedf5c7f3..15e5daab4 100644 --- a/apps/nextjs/src/components/board/items/widget-hover-overlay.tsx +++ b/apps/nextjs/src/components/board/items/widget-hover-overlay.tsx @@ -1,66 +1,35 @@ "use client"; -import { useEffect, useRef, useState } from "react"; -import { Avatar, Group, Text, Tooltip } from "@mantine/core"; +import { Text } from "@mantine/core"; -import type { RouterOutputs } from "@homarr/api"; import { useEditMode } from "@homarr/boards/edit-mode"; -import { getIconUrl } from "@homarr/definitions"; import { useSettings } from "@homarr/settings"; import { useI18n } from "@homarr/translation/client"; import { widgetImports } from "@homarr/widgets"; import type { SectionItem } from "~/app/[locale]/boards/_types"; -import type { Translator } from "./widget-hover-metadata"; -import { collectWidgetHoverMetadata, resolveWidgetDisplayName } from "./widget-hover-metadata"; +import { resolveWidgetDisplayName } from "./widget-hover-metadata"; import classes from "./widget-hover-overlay.module.css"; interface WidgetHoverOverlayProps { item: SectionItem; - integrations: RouterOutputs["integration"]["all"] | undefined; } -export const WidgetHoverOverlay = ({ item, integrations }: WidgetHoverOverlayProps) => { +export const WidgetHoverOverlay = ({ item }: WidgetHoverOverlayProps) => { const [isEditMode] = useEditMode(); const settings = useSettings(); const t = useI18n(); const { definition } = widgetImports[item.kind]; const WidgetIcon = definition.icon; - const wrapperRef = useRef(null); - const [isCompact, setIsCompact] = useState(false); - - useEffect(() => { - const el = wrapperRef.current?.parentElement; - if (!el) return; - const observer = new ResizeObserver(([entry]) => { - setIsCompact((entry?.contentRect.width ?? 999) < 220); - }); - observer.observe(el); - return () => observer.disconnect(); - }, []); - - const translate = ((key: string) => t(key as never)) as Translator; - const displayName = resolveWidgetDisplayName(item, settings, translate); - - const connectedIntegrations = (integrations ?? []).filter((integration) => - item.integrationIds.includes(integration.id), - ); - const metadataItems = collectWidgetHoverMetadata( - item, - settings, - connectedIntegrations.map((integration) => integration.kind), - translate, - ); - const hasIntegrations = connectedIntegrations.length > 0; - const hasMetadata = metadataItems.length > 0; + const displayName = resolveWidgetDisplayName(item, settings, (key) => t(key as never)); if (!isEditMode) { return null; } return ( -
+
@@ -68,32 +37,6 @@ export const WidgetHoverOverlay = ({ item, integrations }: WidgetHoverOverlayPro {displayName}
- - {!isCompact && hasIntegrations && ( - - {connectedIntegrations.map((integration) => ( - - - - ))} - - )} - - {!isCompact && hasMetadata && ( - - {metadataItems.map((metadataItem) => ( -
- {metadataItem.label} - {metadataItem.value} -
- ))} -
- )}
); diff --git a/apps/nextjs/src/components/board/sections/content.tsx b/apps/nextjs/src/components/board/sections/content.tsx index ced30c796..6c7669514 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" ? : } );