feat: auto-open widget settings on add with all integrations pre-selected

When adding a widget from the "Choose item to add" modal, the widget
edit modal now opens immediately after placement, allowing the user to
configure options and integrations before the widget renders.

All available integrations for the widget are selected by default.

.dockerignore

@@ -10,6 +10,7 @@ README.md
 dev
 .build
 e2e
+apps/nextjs/.next
 .env
 .env.*
-!.env.example
+!.env.example

apps/nextjs/src/components/board/items/actions/create-item.ts

@@ -8,12 +8,14 @@ import { getFirstEmptyPosition } from "./empty-position";
 import { getSectionElements } from "./section-elements";
 
 export interface CreateItemInput {
+  id?: string;
   kind: WidgetKind;
   options?: Record<string, unknown>;
+  integrationIds?: string[];
 }
 
 export const createItemCallback =
-  ({ kind, options = {} }: CreateItemInput) =>
+  ({ id, kind, options = {}, integrationIds = [] }: CreateItemInput) =>
   (previous: Board): Board => {
     const firstSection = previous.sections
       .filter((section): section is EmptySection => section.kind === "empty")
@@ -23,11 +25,11 @@ export const createItemCallback =
     if (!firstSection) return previous;
 
     const widget = {
-      id: createId(),
+      id: id ?? createId(),
       kind,
       options,
       layouts: createItemLayouts(previous, firstSection),
-      integrationIds: [],
+      integrationIds,
       advancedOptions: {
         title: null,
         customCssClasses: [],

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

@@ -2,20 +2,26 @@ 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 { objectEntries } from "@homarr/common";
+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 } from "@homarr/modals";
+import { createModal, useModalAction } from "@homarr/modals";
+import { useSettings } from "@homarr/settings";
 import { useI18n } from "@homarr/translation/client";
 import type { TablerIcon } from "@homarr/ui";
-import { widgetImports } from "@homarr/widgets";
+import { reduceWidgetOptionsWithDefaultValues, widgetImports } from "@homarr/widgets";
+import { WidgetEditModal } from "@homarr/widgets/modals";
 
 import { useItemActions } from "./item-actions";
 
 export const ItemSelectModal = createModal<void>(({ actions }) => {
   const [search, setSearch] = useState("");
   const t = useI18n();
-  const { createItem } = useItemActions();
+  const { createItem, updateItemOptions, updateItemAdvancedOptions, updateItemIntegrations } = useItemActions();
+  const { openModal: openEditModal } = useModalAction(WidgetEditModal);
+  const { data: integrationData } = clientApi.integration.all.useQuery();
+  const settings = useSettings();
 
   const items = useMemo(
     () =>
@@ -40,8 +46,43 @@ export const ItemSelectModal = createModal<void>(({ actions }) => {
   );
 
   const handleAdd = (kind: WidgetKind) => {
-    createItem({ kind });
+    const definition = widgetImports[kind].definition;
+    const hasIntegrationSupport = "supportedIntegrations" in definition;
+
+    const matchingIntegrations = hasIntegrationSupport
+      ? (integrationData ?? []).filter((integration) =>
+          (definition.supportedIntegrations as string[]).includes(integration.kind),
+        )
+      : [];
+
+    const integrationIds = matchingIntegrations.map((i) => i.id);
+    const itemId = createId();
+    const defaultOptions = reduceWidgetOptionsWithDefaultValues(kind, settings);
+
+    createItem({ id: itemId, kind, integrationIds });
     actions.closeModal();
+
+    openEditModal(
+      {
+        kind,
+        value: {
+          advancedOptions: { title: null, customCssClasses: [], borderColor: "" },
+          options: defaultOptions,
+          integrationIds,
+        },
+        onSuccessfulEdit: ({ options, integrationIds: newIntegrationIds, advancedOptions }) => {
+          updateItemOptions({ itemId, newOptions: options });
+          updateItemAdvancedOptions({ itemId, newAdvancedOptions: advancedOptions });
+          updateItemIntegrations({ itemId, newIntegrations: newIntegrationIds });
+        },
+        integrationData: matchingIntegrations,
+        integrationSupport: hasIntegrationSupport,
+        settings,
+      },
+      {
+        title: (titleT) => `${titleT("item.edit.title")} - ${titleT(`widget.${kind}.name`)}`,
+      },
+    );
   };
 
   return (

packages/db/migrations/seed.ts

@@ -1,6 +1,7 @@
 import { createId, objectKeys } from "@homarr/common";
 import {
   createDocumentationLink,
+  credentialsAdminGroup,
   everyoneGroup,
   getIntegrationDefaultUrl,
   getIntegrationName,
@@ -11,12 +12,24 @@ import { defaultServerSettings, defaultServerSettingsKeys } from "@homarr/server
 
 import type { Database } from "..";
 import { eq } from "..";
+import { getMaxGroupPositionAsync } from "../queries";
 import {
   getServerSettingByKeyAsync,
   insertServerSettingByKeyAsync,
   updateServerSettingByKeyAsync,
 } from "../queries/server-setting";
-import { groups, integrations, onboarding, searchEngines } from "../schema";
+import {
+  boards,
+  groupMembers,
+  groupPermissions,
+  groups,
+  integrations,
+  layouts,
+  onboarding,
+  searchEngines,
+  sections,
+  users,
+} from "../schema";
 import type { Integration } from "../schema";
 
 export const seedDataAsync = async (db: Database) => {
@@ -25,6 +38,10 @@ export const seedDataAsync = async (db: Database) => {
   await seedServerSettingsAsync(db);
   await seedDefaultSearchEnginesAsync(db);
   await seedDefaultIntegrationsAsync(db);
+
+  if (process.env.DEMO_MODE === "true") {
+    await seedDemoUserAsync(db);
+  }
 };
 
 const seedEveryoneGroupAsync = async (db: Database) => {
@@ -191,3 +208,72 @@ const seedDefaultIntegrationsAsync = async (db: Database) => {
 
   console.log(`Created ${createdCount} default integrations through seeding process`);
 };
+
+const seedDemoUserAsync = async (db: Database) => {
+  const existingUser = await db.query.users.findFirst({
+    where: eq(users.name, "demo"),
+  });
+
+  if (existingUser) {
+    console.log("Skipping seeding of demo user as it already exists");
+    return;
+  }
+
+  const userId = createId();
+
+  await db.insert(users).values({
+    id: userId,
+    name: "demo",
+    email: "demo@example.com",
+    password: "$2b$10$c5AaQb0oj32/bui5Z55PyOb7pY.iEkXYqgdD8MjS9LjSjLMeOkZu2",
+  });
+
+  const maxPosition = await getMaxGroupPositionAsync(db);
+  const groupId = createId();
+  await db.insert(groups).values({
+    id: groupId,
+    name: credentialsAdminGroup,
+    ownerId: userId,
+    position: maxPosition + 1,
+  });
+  await db.insert(groupPermissions).values({
+    groupId,
+    permission: "admin",
+  });
+  await db.insert(groupMembers).values({
+    groupId,
+    userId,
+  });
+
+  await db.update(onboarding).set({
+    step: "finish",
+    previousStep: "settings",
+  });
+
+  const boardId = createId();
+  await db.insert(boards).values({
+    id: boardId,
+    name: "default",
+    isPublic: false,
+    creatorId: userId,
+  });
+  await db.insert(sections).values({
+    id: createId(),
+    kind: "empty",
+    xOffset: 0,
+    yOffset: 0,
+    boardId,
+  });
+  await db.insert(layouts).values({
+    id: createId(),
+    name: "Base",
+    columnCount: 12,
+    breakpoint: 0,
+    boardId,
+  });
+  await db.update(users).set({ homeBoardId: boardId }).where(eq(users.id, userId));
+
+  console.log(
+    "Your instance has enabled demo mode. Homarr therefore created example data for your demo. You can disable demo mode anytime by setting the env 'DEMO_MODE' to 'false' or unset it.",
+  );
+};