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

2026-06-05 16:50:35 +02:00
1 parent 0a6467979a
commit dd7a4908a3
@@ -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>
+  );
+};