feat: highlight widgets with available integrations in add-item modal

apps/nextjs/src/components/board/items/item-select-modal.tsx

@@ -23,6 +23,11 @@ export const ItemSelectModal = createModal<void>(({ 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<void>(({ actions }) => {
       }}
     >
       {filteredItems.map((item) => (
-        <WidgetItem key={item.kind} item={item} onSelect={() => handleAdd(item.kind)} />
+        <WidgetItem
+          key={item.kind}
+          item={item}
+          onSelect={() => handleAdd(item.kind)}
+          hasMatchingIntegration={item.supportedIntegrations.some((kind) => availableKinds.has(kind))}
+        />
       ))}
 
       {filteredItems.length === 0 && (
@@ -121,6 +131,7 @@ export const ItemSelectModal = createModal<void>(({ 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")}
     >