feat(onboarding): enhance integration setup with Docker discovery and URL templating (#5607)

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

@@ -1,11 +1,11 @@
 import { useCallback, useRef } from "react";
-import { Button, Grid, Group, NumberInput, Stack } from "@mantine/core";
+import { Grid, NumberInput, Stack } from "@mantine/core";
 import { z } from "zod/v4";
 
 import { useZodForm } from "@homarr/form";
 import type { GridStack } from "@homarr/gridstack";
-import { createModal } from "@homarr/modals";
-import { useI18n, useScopedI18n } from "@homarr/translation/client";
+import { createModal, ModalFormFooter, modalSizeForm } from "@homarr/modals";
+import { useI18n } from "@homarr/translation/client";
 
 import type { Item, SectionItem } from "~/app/[locale]/boards/_types";
 
@@ -16,9 +16,7 @@ interface InnerProps {
 }
 
 export const ItemMoveModal = createModal<InnerProps>(({ actions, innerProps }) => {
-  const tCommon = useScopedI18n("common");
   const t = useI18n();
-  // Keep track of the maximum width based on the x offset
   const maxWidthRef = useRef(innerProps.columnCount - innerProps.item.xOffset);
   const form = useZodForm(
     z.object({
@@ -38,7 +36,6 @@ export const ItemMoveModal = createModal<InnerProps>(({ actions, innerProps }) =
         height: innerProps.item.height,
       },
       onValuesChange(values, previous) {
-        // Update the maximum width when the x offset changes
         if (values.xOffset !== previous.xOffset) {
           maxWidthRef.current = innerProps.columnCount - values.xOffset;
         }
@@ -70,6 +67,7 @@ export const ItemMoveModal = createModal<InnerProps>(({ actions, innerProps }) =
           <Grid.Col span={{ base: 12, md: 6 }}>
             <NumberInput
               label={t("item.moveResize.field.xOffset.label")}
+              data-autofocus
               min={0}
               max={innerProps.columnCount - 1}
               {...form.getInputProps("xOffset")}
@@ -93,12 +91,7 @@ export const ItemMoveModal = createModal<InnerProps>(({ actions, innerProps }) =
             <NumberInput label={t("item.moveResize.field.height.label")} min={1} {...form.getInputProps("height")} />
           </Grid.Col>
         </Grid>
-        <Group justify="end">
-          <Button variant="subtle" onClick={actions.closeModal}>
-            {tCommon("action.cancel")}
-          </Button>
-          <Button type="submit">{tCommon("action.saveChanges")}</Button>
-        </Group>
+        <ModalFormFooter onCancel={actions.closeModal} />
       </Stack>
     </form>
   );
@@ -106,5 +99,5 @@ export const ItemMoveModal = createModal<InnerProps>(({ actions, innerProps }) =
   defaultTitle(t) {
     return t("item.moveResize.title");
   },
-  size: "lg",
+  size: modalSizeForm,
 });

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

@@ -1,14 +1,14 @@
 import { useMemo, useState } from "react";
-import { Avatar, Button, Card, Center, Grid, Group, Input, Stack, Text, Tooltip } from "@mantine/core";
-import { IconSearch } from "@tabler/icons-react";
+import { Avatar, Box, Button, Card, Center, Group, Stack, Text, Tooltip } from "@mantine/core";
 
 import { clientApi } from "@homarr/api/client";
 import { createId, objectEntries } from "@homarr/common";
 import { getIconUrl, getIntegrationName } from "@homarr/definitions";
 import type { IntegrationKind, WidgetKind } from "@homarr/definitions";
-import { createModal, useModalAction } from "@homarr/modals";
+import { createModal, modalSizeSelect, useModalAction } from "@homarr/modals";
 import { useSettings } from "@homarr/settings";
 import { useI18n } from "@homarr/translation/client";
+import { SelectGridLayout, selectGridCardHeight } from "@homarr/ui";
 import type { TablerIcon } from "@homarr/ui";
 import { reduceWidgetOptionsWithDefaultValues, widgetImports } from "@homarr/widgets";
 import { WidgetEditModal } from "@homarr/widgets/modals";
@@ -86,32 +86,31 @@ export const ItemSelectModal = createModal<void>(({ actions }) => {
   };
 
   return (
-    <Stack>
-      <Input
-        value={search}
-        onChange={(event) => setSearch(event.currentTarget.value)}
-        leftSection={<IconSearch />}
-        placeholder={`${t("item.create.search")}...`}
-        data-autofocus
-        onKeyDown={(event) => {
-          // Add item if there is only one item in the list and user presses Enter
-          if (event.key === "Enter" && filteredItems.length === 1) {
-            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-            handleAdd(filteredItems[0]!.kind);
-          }
-        }}
-      />
+    <SelectGridLayout
+      search={search}
+      onSearchChange={setSearch}
+      placeholder={`${t("item.create.search")}...`}
+      onSearchKeyDown={(event) => {
+        if (event.key === "Enter" && filteredItems.length === 1) {
+          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+          handleAdd(filteredItems[0]!.kind);
+        }
+      }}
+    >
+      {filteredItems.map((item) => (
+        <WidgetItem key={item.kind} item={item} onSelect={() => handleAdd(item.kind)} />
+      ))}
 
-      <Grid>
-        {filteredItems.map((item) => (
-          <WidgetItem key={item.kind} item={item} onSelect={() => handleAdd(item.kind)} />
-        ))}
-      </Grid>
-    </Stack>
+      {filteredItems.length === 0 && (
+        <Center p="xl">
+          <Text c="dimmed">{t("common.noResults")}</Text>
+        </Center>
+      )}
+    </SelectGridLayout>
   );
 }).withOptions({
   defaultTitle: (t) => t("item.create.title"),
-  size: "xl",
+  size: modalSizeSelect,
 });
 
 const WidgetItem = ({
@@ -130,46 +129,58 @@ const WidgetItem = ({
   const t = useI18n();
 
   return (
-    <Grid.Col span={{ xs: 12, sm: 4, md: 3 }}>
-      <Card h="100%">
-        <Stack justify="space-between" h="100%">
-          <Stack gap="xs">
-            <Center>
-              <item.icon />
-            </Center>
-            <Text lh={1.2} style={{ whiteSpace: "normal" }} ta="center">
-              {item.name}
-            </Text>
-            <Text lh={1.2} style={{ whiteSpace: "normal" }} size="xs" ta="center" c="dimmed">
-              {item.description}
-            </Text>
-          </Stack>
-          <SupportedIntegrations mt="auto" integrations={item.supportedIntegrations} />
-          <Button onClick={onSelect} variant="light" size="xs" fullWidth>
-            {t(`item.create.addToBoard`)}
-          </Button>
-        </Stack>
-      </Card>
-    </Grid.Col>
+    <Card
+      h={selectGridCardHeight}
+      withBorder
+      pos="relative"
+      style={{ overflow: "hidden", "--_hover-opacity": "0" }}
+      onMouseEnter={(e) => e.currentTarget.style.setProperty("--_hover-opacity", "1")}
+      onMouseLeave={(e) => e.currentTarget.style.setProperty("--_hover-opacity", "0")}
+    >
+      <Stack h="100%" gap="xs">
+        <Group gap="sm" wrap="nowrap" align="flex-start">
+          <item.icon size={22} style={{ flexShrink: 0, marginTop: 2 }} />
+          <Text lh={1.2} style={{ whiteSpace: "normal" }} fw={500} size="sm" lineClamp={2}>
+            {item.name}
+          </Text>
+        </Group>
+        <Tooltip label={item.description} multiline w={250} disabled={!item.description}>
+          <Text lh={1.2} style={{ whiteSpace: "normal" }} size="xs" c="dimmed" lineClamp={1}>
+            {item.description}
+          </Text>
+        </Tooltip>
+        <SupportedIntegrations integrations={item.supportedIntegrations} />
+      </Stack>
+      <Box
+        pos="absolute"
+        bottom={0}
+        left={0}
+        right={0}
+        p="xs"
+        style={{
+          opacity: "var(--_hover-opacity)",
+          transition: "opacity 150ms ease",
+          background: "linear-gradient(transparent, var(--mantine-color-body) 30%)",
+        }}
+      >
+        <Button onClick={onSelect} variant="light" size="xs" fullWidth>
+          {t(`item.create.addToBoard`)}
+        </Button>
+      </Box>
+    </Card>
   );
 };
 
-interface SupportedIntegrationsProps {
-  integrations: IntegrationKind[];
-  mt: string;
-}
-
-const SupportedIntegrations = ({ integrations, mt }: SupportedIntegrationsProps) => {
+const SupportedIntegrations = ({ integrations }: { integrations: IntegrationKind[] }) => {
   if (integrations.length === 0) {
     return null;
   }
 
-  // When there are 8 or more integrations, we show 6 and a "+X" avatar. Otherwise, we show all integrations.
   const countToShow = integrations.length >= 8 ? 6 : 7;
   const moreCount = integrations.length - countToShow;
 
   return (
-    <Center mt={mt}>
+    <Group gap={2} mt="auto">
       <Tooltip.Group closeDelay={100}>
         <Group gap={2}>
           {integrations.slice(0, countToShow).map((integration) => (
@@ -195,6 +206,6 @@ const SupportedIntegrations = ({ integrations, mt }: SupportedIntegrationsProps)
           )}
         </Group>
       </Tooltip.Group>
-    </Center>
+    </Group>
   );
 };

apps/nextjs/src/components/board/sections/category/category-edit-modal.tsx

@@ -1,8 +1,8 @@
-import { Button, Group, Stack, TextInput } from "@mantine/core";
+import { Stack, TextInput } from "@mantine/core";
 import { z } from "zod/v4";
 
 import { useZodForm } from "@homarr/form";
-import { createModal } from "@homarr/modals";
+import { createModal, ModalFormFooter, modalSizeForm } from "@homarr/modals";
 import { useI18n } from "@homarr/translation/client";
 
 interface Category {
@@ -36,13 +36,10 @@ export const CategoryEditModal = createModal<InnerProps>(({ actions, innerProps
     >
       <Stack>
         <TextInput label={t("section.category.field.name.label")} data-autofocus {...form.getInputProps("name")} />
-        <Group justify="right">
-          <Button onClick={actions.closeModal} variant="subtle" color="gray">
-            {t("common.action.cancel")}
-          </Button>
-          <Button type="submit">{innerProps.submitLabel}</Button>
-        </Group>
+        <ModalFormFooter onCancel={actions.closeModal} submitLabel={innerProps.submitLabel} />
       </Stack>
     </form>
   );
-}).withOptions({});
+}).withOptions({
+  size: modalSizeForm,
+});

apps/nextjs/src/components/board/sections/dynamic/dynamic-edit-modal.tsx

@@ -1,10 +1,10 @@
 "use client";
 
-import { Button, CloseButton, ColorInput, Group, Stack, TextInput, useMantineTheme } from "@mantine/core";
+import { CloseButton, ColorInput, Stack, TextInput, useMantineTheme } from "@mantine/core";
 import type { z } from "zod/v4";
 
 import { useZodForm } from "@homarr/form";
-import { createModal } from "@homarr/modals";
+import { createModal, ModalFormFooter, modalSizeForm } from "@homarr/modals";
 import { useI18n } from "@homarr/translation/client";
 import { TextMultiSelect } from "@homarr/ui";
 import { dynamicSectionOptionsSchema } from "@homarr/validation/shared";
@@ -31,7 +31,7 @@ export const DynamicSectionEditModal = createModal<ModalProps>(({ actions, inner
       })}
     >
       <Stack>
-        <TextInput label={t("section.dynamic.option.title.label")} {...form.getInputProps("title")} />
+        <TextInput label={t("section.dynamic.option.title.label")} data-autofocus {...form.getInputProps("title")} />
         <TextMultiSelect
           label={t("section.dynamic.option.customCssClasses.label")}
           {...form.getInputProps("customCssClasses")}
@@ -48,14 +48,7 @@ export const DynamicSectionEditModal = createModal<ModalProps>(({ actions, inner
           }
           {...form.getInputProps("borderColor")}
         />
-        <Group justify="end">
-          <Group justify="end" w={{ base: "100%", xs: "auto" }}>
-            <Button onClick={actions.closeModal} variant="subtle" color="gray">
-              {t("common.action.cancel")}
-            </Button>
-            <Button type="submit">{t("common.action.saveChanges")}</Button>
-          </Group>
-        </Group>
+        <ModalFormFooter onCancel={actions.closeModal} />
       </Stack>
     </form>
   );
@@ -63,5 +56,5 @@ export const DynamicSectionEditModal = createModal<ModalProps>(({ actions, inner
   defaultTitle(t) {
     return t("item.edit.title");
   },
-  size: "lg",
+  size: modalSizeForm,
 });

apps/nextjs/src/components/integration/integration-grid-shared.ts

@@ -0,0 +1,95 @@
+import { objectEntries } from "@homarr/common";
+import type { IntegrationKind, WidgetKind } from "@homarr/definitions";
+import {
+  featuredIntegrations,
+  getIntegrationName,
+  hiddenFromOnboarding,
+  integrationDefs,
+  integrationKinds,
+} from "@homarr/definitions";
+import { widgetImports } from "@homarr/widgets";
+
+const buildWidgetsByIntegration = () => {
+  const map = Object.fromEntries(integrationKinds.map((kind) => [kind, [] as WidgetKind[]])) as Record<
+    IntegrationKind,
+    WidgetKind[]
+  >;
+
+  for (const [widgetKind, widget] of objectEntries(widgetImports)) {
+    const supported =
+      "supportedIntegrations" in widget.definition
+        ? (widget.definition.supportedIntegrations as IntegrationKind[])
+        : [];
+    for (const kind of supported) {
+      if (kind in map) {
+        map[kind].push(widgetKind);
+      }
+    }
+  }
+  return map;
+};
+
+export const widgetsByIntegration = buildWidgetsByIntegration();
+
+export const categoryTranslationKeys: Record<string, string> = {
+  dnsHole: "integration.category.dnsHole",
+  mediaService: "integration.category.mediaService",
+  calendar: "integration.category.calendar",
+  mediaSearch: "integration.category.mediaSearch",
+  mediaRelease: "integration.category.mediaRelease",
+  mediaRequest: "integration.category.mediaRequest",
+  downloadClient: "integration.category.downloadClient",
+  usenet: "integration.category.usenet",
+  torrent: "integration.category.torrent",
+  miscellaneous: "integration.category.miscellaneous",
+  smartHomeServer: "integration.category.smartHomeServer",
+  indexerManager: "integration.category.indexerManager",
+  healthMonitoring: "integration.category.healthMonitoring",
+  search: "integration.category.search",
+  mediaTranscoding: "integration.category.mediaTranscoding",
+  networkController: "integration.category.networkController",
+  releasesProvider: "integration.category.releasesProvider",
+  notifications: "integration.category.notifications",
+  firewall: "integration.category.firewall",
+  timetable: "integration.category.timetable",
+  photoService: "integration.category.photoService",
+  notes: "integration.category.notes",
+  mediaMonitoring: "integration.category.mediaMonitoring",
+  speedtest: "integration.category.speedtest",
+  analytics: "integration.category.analytics",
+};
+
+export interface IntegrationGridItem {
+  kind: IntegrationKind;
+  name: string;
+  categories: string[];
+  widgets: WidgetKind[];
+}
+
+export const buildSortedIntegrations = (
+  options: { enableMockIntegration?: boolean; onboarding?: boolean } = {},
+): IntegrationGridItem[] =>
+  integrationKinds
+    .filter((kind) => {
+      if (options.onboarding && hiddenFromOnboarding.has(kind)) return false;
+      if (options.onboarding && widgetsByIntegration[kind].length === 0) return false;
+      if (!options.enableMockIntegration && kind === "mock") return false;
+      return true;
+    })
+    .map((kind) => ({
+      kind,
+      name: getIntegrationName(kind),
+      categories: [...new Set(integrationDefs[kind].category.flat())] as string[],
+      widgets: widgetsByIntegration[kind],
+    }))
+    .sort((left, right) => {
+      const leftIdx = featuredIntegrations.indexOf(left.kind);
+      const rightIdx = featuredIntegrations.indexOf(right.kind);
+      if (leftIdx !== -1 && rightIdx !== -1) return leftIdx - rightIdx;
+      if (leftIdx !== -1) return -1;
+      if (rightIdx !== -1) return 1;
+      return right.widgets.length - left.widgets.length || left.name.localeCompare(right.name);
+    });
+
+export const filterIntegrations = (items: IntegrationGridItem[], search: string) =>
+  items.filter((i) => i.name.toLowerCase().includes(search.toLowerCase().trim()));

apps/nextjs/src/components/integration/integration-multi-select-grid.tsx

@@ -0,0 +1,140 @@
+"use client";
+
+import { useCallback, useMemo, useState } from "react";
+import { Badge, Card, Center, Group, Stack, Text, Tooltip } from "@mantine/core";
+import { IconBrandDocker, IconCheck, IconPuzzle } from "@tabler/icons-react";
+
+import type { IntegrationKind } from "@homarr/definitions";
+import { useI18n } from "@homarr/translation/client";
+import { IntegrationAvatar, SelectGridLayout, selectGridCardHeight } from "@homarr/ui";
+
+import { buildSortedIntegrations, categoryTranslationKeys, filterIntegrations } from "./integration-grid-shared";
+
+interface IntegrationMultiSelectGridProps {
+  selectedKinds: IntegrationKind[];
+  onSelectionChange: (kinds: IntegrationKind[]) => void;
+  enableMockIntegration?: boolean;
+  onboarding?: boolean;
+  detectedKinds?: Set<IntegrationKind>;
+}
+
+export const IntegrationMultiSelectGrid = ({
+  selectedKinds: selectedKindsArray,
+  onSelectionChange,
+  enableMockIntegration = false,
+  onboarding = false,
+  detectedKinds,
+}: IntegrationMultiSelectGridProps) => {
+  const [search, setSearch] = useState("");
+  const selectedKinds = useMemo(() => new Set(selectedKindsArray), [selectedKindsArray]);
+  const t = useI18n();
+
+  const toggleKind = useCallback(
+    (kind: IntegrationKind) => {
+      const current = new Set(selectedKindsArray);
+      if (current.has(kind)) {
+        current.delete(kind);
+      } else {
+        current.add(kind);
+      }
+      onSelectionChange(Array.from(current));
+    },
+    [selectedKindsArray, onSelectionChange],
+  );
+
+  const integrations = useMemo(
+    () => buildSortedIntegrations({ enableMockIntegration, onboarding }),
+    [enableMockIntegration, onboarding],
+  );
+
+  const sorted = useMemo(() => {
+    if (!detectedKinds || detectedKinds.size === 0) return integrations;
+    const detected = integrations.filter((i) => detectedKinds.has(i.kind));
+    const rest = integrations.filter((i) => !detectedKinds.has(i.kind));
+    return [...detected, ...rest];
+  }, [integrations, detectedKinds]);
+
+  const filtered = useMemo(() => filterIntegrations(sorted, search), [sorted, search]);
+
+  return (
+    <SelectGridLayout
+      search={search}
+      onSearchChange={setSearch}
+      placeholder={`${t("integration.page.list.search")}...`}
+      disableScroll={onboarding}
+      disableAutoFocus={onboarding}
+    >
+      {filtered.map((integration) => {
+        const isSelected = selectedKinds.has(integration.kind);
+        const isDetected = detectedKinds?.has(integration.kind) ?? false;
+        return (
+          <Card
+            key={integration.kind}
+            h={selectGridCardHeight}
+            style={{
+              cursor: "pointer",
+              borderColor: isSelected ? "var(--mantine-color-blue-6)" : undefined,
+              borderWidth: isSelected ? 2 : undefined,
+            }}
+            onClick={() => toggleKind(integration.kind)}
+            withBorder
+          >
+            <Stack justify="space-between" h="100%" gap="xs">
+              <Group gap="sm" wrap="nowrap" align="flex-start">
+                <IntegrationAvatar kind={integration.kind} size="sm" />
+                <Text fw={500} lh={1.2} size="sm" lineClamp={2} style={{ flex: 1 }}>
+                  {integration.name}
+                </Text>
+                {isSelected && <IconCheck size={18} color="var(--mantine-color-blue-6)" style={{ flexShrink: 0 }} />}
+              </Group>
+
+              <Stack gap={4} mt="auto">
+                {isDetected && (
+                  <Badge variant="light" color="teal" size="xs" leftSection={<IconBrandDocker size={12} />}>
+                    {t("integration.grid.detected")}
+                  </Badge>
+                )}
+                <Group gap={4} wrap="wrap">
+                  {integration.categories.slice(0, 2).map((cat) => (
+                    <Badge key={cat} variant="light" size="xs">
+                      {categoryTranslationKeys[cat] ? t(categoryTranslationKeys[cat] as never) : cat}
+                    </Badge>
+                  ))}
+                </Group>
+                {integration.widgets.length > 0 ? (
+                  <Tooltip
+                    multiline
+                    w={200}
+                    label={
+                      <Stack gap={4}>
+                        {integration.widgets.map((widgetKind) => (
+                          <Text key={widgetKind} size="xs">
+                            {t(`widget.${widgetKind}.name`)}
+                          </Text>
+                        ))}
+                      </Stack>
+                    }
+                  >
+                    <Badge variant="light" color="blue" size="sm" leftSection={<IconPuzzle size={12} />}>
+                      {t("integration.grid.widgetCount", { count: String(integration.widgets.length) })}
+                    </Badge>
+                  </Tooltip>
+                ) : (
+                  <Badge variant="light" color="gray" size="sm">
+                    {t("integration.grid.noWidgets")}
+                  </Badge>
+                )}
+              </Stack>
+            </Stack>
+          </Card>
+        );
+      })}
+
+      {filtered.length === 0 && (
+        <Center p="xl">
+          <Text c="dimmed">{t("common.noResults")}</Text>
+        </Center>
+      )}
+    </SelectGridLayout>
+  );
+};

apps/nextjs/src/components/integration/integration-select-grid.tsx

@@ -0,0 +1,90 @@
+"use client";
+
+import { useMemo, useState } from "react";
+import { Badge, Card, Center, Group, Stack, Text, Tooltip } from "@mantine/core";
+import { IconPuzzle } from "@tabler/icons-react";
+
+import type { IntegrationKind } from "@homarr/definitions";
+import { useI18n } from "@homarr/translation/client";
+import { IntegrationAvatar, SelectGridLayout, selectGridCardHeight } from "@homarr/ui";
+
+import { buildSortedIntegrations, categoryTranslationKeys, filterIntegrations } from "./integration-grid-shared";
+
+interface IntegrationSelectGridProps {
+  onSelect: (kind: IntegrationKind) => void;
+  enableMockIntegration?: boolean;
+}
+
+export const IntegrationSelectGrid = ({ onSelect, enableMockIntegration = false }: IntegrationSelectGridProps) => {
+  const [search, setSearch] = useState("");
+  const t = useI18n();
+
+  const integrations = useMemo(() => buildSortedIntegrations({ enableMockIntegration }), [enableMockIntegration]);
+  const filtered = useMemo(() => filterIntegrations(integrations, search), [integrations, search]);
+
+  return (
+    <SelectGridLayout
+      search={search}
+      onSearchChange={setSearch}
+      placeholder={`${t("integration.page.list.search")}...`}
+    >
+      {filtered.map((integration) => (
+        <Card
+          key={integration.kind}
+          h={selectGridCardHeight}
+          style={{ cursor: "pointer" }}
+          onClick={() => onSelect(integration.kind)}
+          withBorder
+        >
+          <Stack justify="space-between" h="100%" gap="xs">
+            <Group gap="sm" wrap="nowrap" align="flex-start">
+              <IntegrationAvatar kind={integration.kind} size="sm" />
+              <Text fw={500} lh={1.2} size="sm" lineClamp={2}>
+                {integration.name}
+              </Text>
+            </Group>
+
+            <Stack gap={4} mt="auto">
+              <Group gap={4} wrap="wrap">
+                {integration.categories.slice(0, 2).map((cat) => (
+                  <Badge key={cat} variant="light" size="xs">
+                    {categoryTranslationKeys[cat] ? t(categoryTranslationKeys[cat] as never) : cat}
+                  </Badge>
+                ))}
+              </Group>
+              {integration.widgets.length > 0 ? (
+                <Tooltip
+                  multiline
+                  w={200}
+                  label={
+                    <Stack gap={4}>
+                      {integration.widgets.map((widgetKind) => (
+                        <Text key={widgetKind} size="xs">
+                          {t(`widget.${widgetKind}.name`)}
+                        </Text>
+                      ))}
+                    </Stack>
+                  }
+                >
+                  <Badge variant="light" color="blue" size="sm" leftSection={<IconPuzzle size={12} />}>
+                    {t("integration.grid.widgetCount", { count: String(integration.widgets.length) })}
+                  </Badge>
+                </Tooltip>
+              ) : (
+                <Badge variant="light" color="gray" size="sm">
+                  {t("integration.grid.noWidgets")}
+                </Badge>
+              )}
+            </Stack>
+          </Stack>
+        </Card>
+      ))}
+
+      {filtered.length === 0 && (
+        <Center p="xl">
+          <Text c="dimmed">{t("common.noResults")}</Text>
+        </Center>
+      )}
+    </SelectGridLayout>
+  );
+};

apps/nextjs/src/components/integration/integration-select-modal.tsx

@@ -0,0 +1,56 @@
+"use client";
+
+import { useState } from "react";
+import { Group, ScrollArea, Title } from "@mantine/core";
+import { IconArrowLeft } from "@tabler/icons-react";
+
+import type { IntegrationKind } from "@homarr/definitions";
+import { getIntegrationName } from "@homarr/definitions";
+import { createModal, modalSizeSelect } from "@homarr/modals";
+import { IntegrationAvatar } from "@homarr/ui";
+
+import { NewIntegrationForm } from "~/app/[locale]/manage/integrations/new/_integration-new-form";
+import { IntegrationSelectGrid } from "./integration-select-grid";
+
+interface IntegrationSelectModalProps {
+  onSuccess?: () => void;
+  enableMockIntegration?: boolean;
+}
+
+export const IntegrationSelectModal = createModal<IntegrationSelectModalProps>(({ actions, innerProps }) => {
+  const [step, setStep] = useState<"select" | "form">("select");
+  const [selectedKind, setSelectedKind] = useState<IntegrationKind | null>(null);
+
+  const handleSelect = (kind: IntegrationKind) => {
+    setSelectedKind(kind);
+    setStep("form");
+  };
+
+  const handleBack = () => {
+    setStep("select");
+    setSelectedKind(null);
+  };
+
+  const handleSuccess = () => {
+    innerProps.onSuccess?.();
+    actions.closeModal();
+  };
+
+  if (step === "form" && selectedKind) {
+    return (
+      <ScrollArea.Autosize mah="80vh">
+        <Group gap="xs" mb="md" style={{ cursor: "pointer" }} onClick={handleBack}>
+          <IconArrowLeft size={18} />
+          <IntegrationAvatar kind={selectedKind} size="sm" />
+          <Title order={4}>{getIntegrationName(selectedKind)}</Title>
+        </Group>
+        <NewIntegrationForm kind={selectedKind} onSuccess={handleSuccess} onCancel={handleBack} />
+      </ScrollArea.Autosize>
+    );
+  }
+
+  return <IntegrationSelectGrid onSelect={handleSelect} enableMockIntegration={innerProps.enableMockIntegration} />;
+}).withOptions({
+  defaultTitle: (t) => t("integration.action.create"),
+  size: modalSizeSelect,
+});