diff --git a/apps/nextjs/src/components/board/items/item-select-modal.tsx b/apps/nextjs/src/components/board/items/item-select-modal.tsx index 27be00279..78cdbf9a2 100644 --- a/apps/nextjs/src/components/board/items/item-select-modal.tsx +++ b/apps/nextjs/src/components/board/items/item-select-modal.tsx @@ -23,6 +23,11 @@ export const ItemSelectModal = createModal(({ actions }) => { const { data: integrationData } = clientApi.integration.all.useQuery(); const settings = useSettings(); + const availableKinds = useMemo( + () => new Set((integrationData ?? []).map((i) => i.kind)), + [integrationData], + ); + const items = useMemo( () => objectEntries(widgetImports) @@ -103,7 +108,12 @@ export const ItemSelectModal = createModal(({ actions }) => { }} > {filteredItems.map((item) => ( - handleAdd(item.kind)} /> + handleAdd(item.kind)} + hasMatchingIntegration={item.supportedIntegrations.some((kind) => availableKinds.has(kind))} + /> ))} {filteredItems.length === 0 && ( @@ -121,6 +131,7 @@ export const ItemSelectModal = createModal(({ actions }) => { const WidgetItem = ({ item, onSelect, + hasMatchingIntegration, }: { item: { kind: WidgetKind; @@ -130,6 +141,7 @@ const WidgetItem = ({ icon: TablerIcon; }; onSelect: () => void; + hasMatchingIntegration: boolean; }) => { const t = useI18n(); @@ -138,7 +150,12 @@ const WidgetItem = ({ h={selectGridCardHeight} withBorder pos="relative" - style={{ overflow: "hidden", "--_hover-opacity": "0" }} + style={{ + overflow: "hidden", + "--_hover-opacity": "0", + borderColor: hasMatchingIntegration ? "var(--mantine-color-blue-6)" : undefined, + borderWidth: hasMatchingIntegration ? 2 : undefined, + }} onMouseEnter={(e) => e.currentTarget.style.setProperty("--_hover-opacity", "1")} onMouseLeave={(e) => e.currentTarget.style.setProperty("--_hover-opacity", "0")} >