feat: rebuild onboarding experience

apps/nextjs/src/components/board/board-layout-thumbnail.module.css

@@ -0,0 +1,68 @@
+.canvas {
+  min-height: 8rem;
+  aspect-ratio: 16 / 7;
+  overflow: hidden;
+  color: var(--mantine-color-dimmed);
+  background:
+    radial-gradient(
+      circle at 15% 10%,
+      color-mix(in srgb, var(--mantine-primary-color-filled) 12%, transparent),
+      transparent 35%
+    ),
+    var(--mantine-color-body);
+}
+
+.lanes {
+  display: grid;
+  height: 100%;
+  gap: rem(8px);
+  padding: rem(12px);
+}
+
+.lane {
+  display: grid;
+  min-width: 0;
+  gap: rem(3px);
+  padding: rem(4px);
+  overflow: hidden;
+  border: rem(1px) solid var(--mantine-color-default-border);
+  border-radius: var(--mantine-radius-sm);
+  background-image:
+    linear-gradient(
+      to right,
+      color-mix(in srgb, var(--mantine-color-dimmed) 8%, transparent) rem(1px),
+      transparent rem(1px)
+    ),
+    linear-gradient(
+      to bottom,
+      color-mix(in srgb, var(--mantine-color-dimmed) 8%, transparent) rem(1px),
+      transparent rem(1px)
+    );
+  background-size: rem(12px) rem(12px);
+}
+
+.lane[data-lane="left"],
+.lane[data-lane="right"] {
+  background-color: color-mix(in srgb, var(--mantine-primary-color-light) 40%, transparent);
+}
+
+.tile {
+  min-width: 0;
+  min-height: 0;
+  border: rem(1px) solid color-mix(in srgb, var(--mantine-primary-color-filled) 32%, transparent);
+  border-radius: max(rem(2px), calc(var(--mantine-radius-default) / 2));
+  background: color-mix(in srgb, var(--mantine-primary-color-filled) 18%, var(--mantine-color-body));
+  box-shadow: 0 rem(1px) rem(3px) rgb(0 0 0 / 8%);
+}
+
+.container {
+  border-style: dashed;
+  border-color: color-mix(in srgb, var(--mantine-color-teal-filled) 45%, transparent);
+  background: color-mix(in srgb, var(--mantine-color-teal-light) 55%, var(--mantine-color-body));
+}
+
+@media (max-width: $mantine-breakpoint-xs) {
+  .canvas {
+    min-height: 7rem;
+  }
+}

apps/nextjs/src/components/board/board-layout-thumbnail.tsx

@@ -0,0 +1,91 @@
+import { Box, Center } from "@mantine/core";
+import { IconLayoutGrid } from "@tabler/icons-react";
+
+import type { BoardPreviewData } from "@homarr/boards/layout-preview";
+import { projectBoardLayout } from "@homarr/boards/layout-preview";
+import { boardLanes, getBoardLaneColumnCount, getRootSectionLane } from "@homarr/definitions";
+
+import classes from "./board-layout-thumbnail.module.css";
+
+interface BoardLayoutThumbnailProps {
+  preview: BoardPreviewData | null;
+  label: string;
+}
+
+const maxThumbnailRows = 12;
+
+export const BoardLayoutThumbnail = ({ preview, label }: BoardLayoutThumbnailProps) => {
+  const layout = preview?.layouts.at(0);
+  if (!preview || !layout) {
+    return (
+      <Center className={classes.canvas} role="img" aria-label={label}>
+        <IconLayoutGrid size={28} stroke={1.4} aria-hidden />
+      </Center>
+    );
+  }
+
+  const elements = projectBoardLayout(preview, layout, layout);
+  const roots = preview.sections.filter((section) => section.kind === "empty");
+  const lanes = boardLanes.flatMap((lane) => {
+    const root = roots.find((section) => getRootSectionLane(section.xOffset) === lane);
+    const columnCount = getBoardLaneColumnCount(layout, lane);
+    return root && columnCount > 0 ? [{ lane, root, columnCount }] : [];
+  });
+  if (lanes.length === 0) {
+    return (
+      <Center className={classes.canvas} role="img" aria-label={label}>
+        <IconLayoutGrid size={28} stroke={1.4} aria-hidden />
+      </Center>
+    );
+  }
+
+  return (
+    <Box className={classes.canvas} role="img" aria-label={label}>
+      <div
+        className={classes.lanes}
+        style={{ gridTemplateColumns: lanes.map(({ columnCount }) => `${columnCount}fr`).join(" ") }}
+      >
+        {lanes.map(({ lane, root, columnCount }) => {
+          const laneElements = elements.filter(
+            (element) =>
+              element.sectionId === root.id &&
+              element.xOffset >= 0 &&
+              element.xOffset < columnCount &&
+              element.yOffset >= 0 &&
+              element.yOffset < maxThumbnailRows &&
+              element.width > 0 &&
+              element.height > 0,
+          );
+          const rowCount = Math.min(
+            maxThumbnailRows,
+            Math.max(4, ...laneElements.map((element) => element.yOffset + element.height)),
+          );
+
+          return (
+            <div
+              key={lane}
+              className={classes.lane}
+              data-lane={lane}
+              style={{
+                gridTemplateColumns: `repeat(${columnCount}, minmax(0, 1fr))`,
+                gridTemplateRows: `repeat(${rowCount}, minmax(0, 1fr))`,
+              }}
+            >
+              {laneElements.map((element) => (
+                <span
+                  key={`${element.type}-${element.id}`}
+                  aria-hidden
+                  className={`${classes.tile} ${element.type === "section" ? classes.container : ""}`}
+                  style={{
+                    gridColumn: `${element.xOffset + 1} / span ${Math.min(element.width, columnCount - element.xOffset)}`,
+                    gridRow: `${element.yOffset + 1} / span ${Math.min(element.height, rowCount - element.yOffset)}`,
+                  }}
+                />
+              ))}
+            </div>
+          );
+        })}
+      </div>
+    </Box>
+  );
+};

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

@@ -196,6 +196,7 @@ const ItemSelectModalContent = ({
       search={search}
       onSearchChange={setSearch}
       placeholder={`${t("item.create.search")}...`}
+      ariaLabel={t("item.create.search")}
       onSearchKeyDown={(event) => {
         if (event.key === "Enter" && loadingSelection === null && filteredItems.length === 1) {
           const [item] = filteredItems;

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

@@ -1,76 +1,6 @@
-import type { IntegrationKind, WidgetKind } from "@homarr/definitions";
-import {
-  featuredIntegrations,
-  getIntegrationName,
-  hiddenFromOnboarding,
-  integrationDefs,
-  integrationKinds,
-  getWidgetKindsForIntegration,
-} from "@homarr/definitions";
-
-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",
-  beszel: "integration.category.beszel",
-  search: "integration.category.search",
-  mediaTranscoding: "integration.category.mediaTranscoding",
-  networkController: "integration.category.networkController",
-  notifications: "integration.category.notifications",
-  firewall: "integration.category.firewall",
-  photoService: "integration.category.photoService",
-  notes: "integration.category.notes",
-  mediaMonitoring: "integration.category.mediaMonitoring",
-  speedtest: "integration.category.speedtest",
-  analytics: "integration.category.analytics",
-  vpn: "integration.category.vpn",
-  documents: "integration.category.documents",
-  mediaLibrary: "integration.category.mediaLibrary",
-  uptimeMonitoring: "integration.category.uptimeMonitoring",
-};
-
-export interface IntegrationGridItem {
-  kind: IntegrationKind;
-  name: string;
-  categories: string[];
-  widgets: WidgetKind[];
-}
-
-export const buildSortedIntegrations = (
-  options: { enableMockIntegration?: boolean; onboarding?: boolean } = {},
-): IntegrationGridItem[] => {
-  return integrationKinds
-    .filter((kind) => {
-      if (options.onboarding && hiddenFromOnboarding.has(kind)) return false;
-      if (options.onboarding && getWidgetKindsForIntegration(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: getWidgetKindsForIntegration(kind),
-    }))
-    .toSorted((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()));
+export {
+  buildSortedIntegrations,
+  categoryTranslationKeys,
+  filterIntegrations,
+} from "@homarr/ui/integration-select-grid";
+export type { IntegrationGridItem } from "@homarr/ui/integration-select-grid";

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

@@ -1,140 +1,2 @@
-"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>
-  );
-};
+export { IntegrationMultiSelectGrid } from "@homarr/ui/integration-select-grid";
+export type { IntegrationMultiSelectGridProps } from "@homarr/ui/integration-select-grid";

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

@@ -1,90 +1,2 @@
-"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>
-  );
-};
+export { IntegrationSelectGrid } from "@homarr/ui/integration-select-grid";
+export type { IntegrationSelectGridProps } from "@homarr/ui/integration-select-grid";

apps/nextjs/src/components/manage/manage-collection.tsx

@@ -0,0 +1,67 @@
+import type { ReactNode } from "react";
+import { Box, Group, Paper, Stack } from "@mantine/core";
+
+import type { ManagePageLayoutProps } from "./manage-page-layout";
+import { ManagePageLayout } from "./manage-page-layout";
+
+export interface ManageCollectionPageProps extends Omit<ManagePageLayoutProps, "children"> {
+  ariaLabel: string;
+  itemCount: number;
+  emptyState: ReactNode;
+  children: ReactNode;
+}
+
+export const ManageCollectionPage = ({
+  ariaLabel,
+  itemCount,
+  emptyState,
+  children,
+  ...layoutProps
+}: ManageCollectionPageProps) => (
+  <ManagePageLayout {...layoutProps}>
+    {itemCount === 0 ? (
+      emptyState
+    ) : (
+      <Stack component="ul" aria-label={ariaLabel} gap="sm" m={0} p={0} style={{ listStyle: "none" }}>
+        {children}
+      </Stack>
+    )}
+  </ManagePageLayout>
+);
+
+export interface ManageCollectionItemProps {
+  leading?: ReactNode;
+  title: ReactNode;
+  description?: ReactNode;
+  metadata?: ReactNode;
+  badges?: ReactNode;
+  actions?: ReactNode;
+}
+
+export const ManageCollectionItem = ({
+  leading,
+  title,
+  description,
+  metadata,
+  badges,
+  actions,
+}: ManageCollectionItemProps) => (
+  <Paper component="li" p="sm" withBorder radius="md">
+    <Group justify="space-between" align="flex-start" wrap="nowrap" gap="sm">
+      {leading && <Box style={{ flexShrink: 0 }}>{leading}</Box>}
+      <Stack gap={4} flex={1} miw={0}>
+        <Group gap="xs" wrap="wrap">
+          {title}
+          {badges}
+        </Group>
+        {description}
+        {metadata}
+      </Stack>
+      {actions && (
+        <Group gap={4} wrap="nowrap" style={{ flexShrink: 0 }}>
+          {actions}
+        </Group>
+      )}
+    </Group>
+  </Paper>
+);

apps/nextjs/src/components/manage/manage-page-layout.tsx

@@ -6,7 +6,7 @@ import { DynamicBreadcrumb } from "~/components/navigation/dynamic-breadcrumb";
 import { ManageContainer } from "./manage-container";
 import { MANAGE_FLOATING_ACTION_BOTTOM_OFFSET } from "./manage-page.constants";
 
-interface ManagePageLayoutProps {
+export interface ManagePageLayoutProps {
   title: ReactNode;
   primaryAction?: ReactNode;
   toolbar?: ReactNode;

apps/nextjs/src/components/no-results.tsx

@@ -1,3 +1,4 @@
+import type { ReactNode } from "react";
 import { Anchor, Card, Stack, Text } from "@mantine/core";
 
 import type { TablerIcon } from "@homarr/ui";
@@ -5,6 +6,7 @@ import type { TablerIcon } from "@homarr/ui";
 interface NoResultsProps {
   icon: TablerIcon;
   title: string;
+  description?: ReactNode;
   action?: {
     label: string;
     href: string;
@@ -12,7 +14,7 @@ interface NoResultsProps {
   };
 }
 
-export const NoResults = ({ icon: Icon, title, action }: NoResultsProps) => {
+export const NoResults = ({ icon: Icon, title, description, action }: NoResultsProps) => {
   return (
     <Card bg="transparent" withBorder={false}>
       <Stack align="center" gap="sm">
@@ -20,6 +22,11 @@ export const NoResults = ({ icon: Icon, title, action }: NoResultsProps) => {
         <Text fw={500} size="lg">
           {title}
         </Text>
+        {description && (
+          <Text c="dimmed" ta="center" maw={560}>
+            {description}
+          </Text>
+        )}
         {action && !action.hidden && <Anchor href={action.href}>{action.label}</Anchor>}
       </Stack>
     </Card>