refactor(board): modernize item and application select modals with SelectableCard (#6642)

Modernize board item, application, and integration selection flows with shared Mantine components, batch board actions, improved accessibility, and hardened persistence.

apps/nextjs/src/components/board/audio/board-sounds.ts

@@ -0,0 +1,123 @@
+/**
+ * Procedural UI sounds for Homarr using the Web Audio API.
+ * Zero audio files shipped. Pure runtime synthesis with oscillators, noise buffers, and gain envelopes.
+ */
+
+let audioContext: AudioContext | null = null;
+
+const getAudioContext = (): AudioContext | null => {
+  if (typeof window === "undefined") return null;
+
+  try {
+    if (!audioContext) {
+      const AudioContextClass =
+        window.AudioContext || (window as unknown as { webkitAudioContext: typeof AudioContext }).webkitAudioContext;
+      if (AudioContextClass) audioContext = new AudioContextClass();
+    }
+    if (audioContext?.state === "suspended") void audioContext.resume().catch(() => undefined);
+    return audioContext;
+  } catch {
+    return null;
+  }
+};
+
+/**
+ * Creates a white noise audio buffer for percussive textures
+ */
+const createNoiseBuffer = (ctx: AudioContext, durationSeconds = 0.2): AudioBuffer => {
+  const bufferSize = Math.floor(ctx.sampleRate * durationSeconds);
+  const buffer = ctx.createBuffer(1, bufferSize, ctx.sampleRate);
+  const data = buffer.getChannelData(0);
+  for (let i = 0; i < bufferSize; i++) {
+    data[i] = Math.random() * 2 - 1;
+  }
+  return buffer;
+};
+
+/**
+ * Procedural trash / delete crunch sound.
+ * Synthesizes a crunchy bin/paper crumple noise burst and downward pitch thud.
+ */
+export const playTrashSound = (volume = 0.35) => {
+  const ctx = getAudioContext();
+  if (!ctx) return;
+
+  try {
+    const now = ctx.currentTime;
+
+    // Master Gain
+    const masterGain = ctx.createGain();
+    masterGain.gain.setValueAtTime(volume, now);
+    masterGain.connect(ctx.destination);
+
+    // 1. Downward sweep sub-oscillator (physical thud)
+    const osc = ctx.createOscillator();
+    const oscGain = ctx.createGain();
+    osc.type = "triangle";
+    osc.frequency.setValueAtTime(260, now);
+    osc.frequency.exponentialRampToValueAtTime(35, now + 0.18);
+    oscGain.gain.setValueAtTime(0.7, now);
+    oscGain.gain.exponentialRampToValueAtTime(0.001, now + 0.18);
+    osc.connect(oscGain);
+    oscGain.connect(masterGain);
+    osc.start(now);
+    osc.stop(now + 0.2);
+
+    // 2. High-crunch noise burst (crush / crumple texture)
+    try {
+      const noiseBuffer = createNoiseBuffer(ctx, 0.22);
+      const noiseSource = ctx.createBufferSource();
+      noiseSource.buffer = noiseBuffer;
+
+      const noiseFilter = ctx.createBiquadFilter();
+      noiseFilter.type = "bandpass";
+      noiseFilter.frequency.setValueAtTime(1400, now);
+      noiseFilter.frequency.exponentialRampToValueAtTime(320, now + 0.2);
+      noiseFilter.Q.setValueAtTime(2.2, now);
+
+      const noiseGain = ctx.createGain();
+      noiseGain.gain.setValueAtTime(0.9, now);
+      noiseGain.gain.exponentialRampToValueAtTime(0.001, now + 0.2);
+
+      noiseSource.connect(noiseFilter);
+      noiseFilter.connect(noiseGain);
+      noiseGain.connect(masterGain);
+
+      noiseSource.start(now);
+      noiseSource.stop(now + 0.22);
+    } catch {
+      // The noise layer is optional; retain the oscillator when buffers are constrained.
+    }
+  } catch {
+    // Sound feedback must never interrupt deleting board items.
+  }
+};
+
+/**
+ * Procedural select / pop sound.
+ */
+export const playPopSound = (volume = 0.25) => {
+  const ctx = getAudioContext();
+  if (!ctx) return;
+
+  try {
+    const now = ctx.currentTime;
+    const osc = ctx.createOscillator();
+    const gain = ctx.createGain();
+
+    osc.type = "sine";
+    osc.frequency.setValueAtTime(460, now);
+    osc.frequency.exponentialRampToValueAtTime(780, now + 0.05);
+
+    gain.gain.setValueAtTime(volume, now);
+    gain.gain.exponentialRampToValueAtTime(0.001, now + 0.06);
+
+    osc.connect(gain);
+    gain.connect(ctx.destination);
+
+    osc.start(now);
+    osc.stop(now + 0.07);
+  } catch {
+    // Sound feedback must never interrupt selecting board items.
+  }
+};

apps/nextjs/src/components/board/items/item-content.module.css

@@ -11,6 +11,19 @@
   border-color: var(--border-color) !important;
 }
 
+.settingsButton {
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 120ms ease;
+}
+
+:global([data-type="item"]:hover) .settingsButton,
+:global([data-type="item"]:focus-within) .settingsButton,
+.settingsButton[data-menu-open="true"] {
+  opacity: 1;
+  pointer-events: auto;
+}
+
 .editModeInertContent {
   display: contents;
 }
@@ -39,3 +52,9 @@
   opacity: 1;
   pointer-events: auto;
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .settingsButton {
+    transition: none;
+  }
+}

apps/nextjs/src/components/board/items/item-menu.tsx

@@ -14,6 +14,7 @@ import { BoardRemoveConfirmationMenuItem } from "../remove-confirmation-menu-ite
 import { useSectionContext } from "../sections/section-context";
 import { useItemActions } from "./item-actions";
 import { useOpenItemMoveModal } from "./item-move-modal";
+import itemContentClasses from "./item-content.module.css";
 import { LazyWidgetEditModal, preloadWidgetEditModal } from "./lazy-widget-edit-modal";
 
 interface BoardItemMenuProps {
@@ -105,9 +106,11 @@ const BoardItemMenuInner = ({ item, definition, resetErrorBoundary }: BoardItemM
           size={24}
           radius="sm"
           pos="absolute"
-          top={12}
-          right={8}
+          top={4}
+          right={4}
           style={{ zIndex: 30 }}
+          className={itemContentClasses.settingsButton}
+          data-menu-open={isMenuOpen || undefined}
           data-board-widget-settings
           aria-label={tItem("menu.label.settingsFor", { name: label })}
         >

apps/nextjs/src/components/board/items/item-select-data.spec.ts

@@ -1,5 +1,7 @@
 import { describe, expect, it, vi } from "vitest";
 
+import type { IntegrationKind } from "@homarr/definitions";
+
 import {
   getWidgetConnectionStatus,
   resolveMatchingIntegrationsAsync,
@@ -8,95 +10,254 @@ import {
 } from "./item-select-data";
 
 describe("getWidgetConnectionStatus", () => {
-  const availableKinds = new Set(["sonarr" as const]);
+  const availableKinds = new Set<IntegrationKind>(["sonarr", "plex"]);
 
-  it("reports widgets with a configured compatible integration as ready", () => {
-    expect(
-      getWidgetConnectionStatus({
-        supportedIntegrations: ["sonarr", "radarr"],
-        availableKinds,
-        connectionOptional: false,
-      }),
-    ).toBe("ready");
+  describe("ready status", () => {
+    it("returns 'ready' when at least one supported integration is in availableKinds", () => {
+      expect(
+        getWidgetConnectionStatus({
+          supportedIntegrations: ["sonarr", "radarr"],
+          availableKinds,
+          connectionOptional: false,
+        }),
+      ).toBe("ready");
+    });
+
+    it("returns 'ready' when all supported integrations are in availableKinds", () => {
+      expect(
+        getWidgetConnectionStatus({
+          supportedIntegrations: ["sonarr", "plex"],
+          availableKinds,
+          connectionOptional: false,
+        }),
+      ).toBe("ready");
+    });
+
+    it("returns 'ready' even if connectionOptional is true as long as a matching integration exists", () => {
+      expect(
+        getWidgetConnectionStatus({
+          supportedIntegrations: ["sonarr"],
+          availableKinds,
+          connectionOptional: true,
+        }),
+      ).toBe("ready");
+    });
   });
 
-  it("reports required integrations that are not configured as needing setup", () => {
-    expect(
-      getWidgetConnectionStatus({
-        supportedIntegrations: ["radarr"],
-        availableKinds,
-        connectionOptional: false,
-      }),
-    ).toBe("needsSetup");
+  describe("needsSetup status", () => {
+    it("returns 'needsSetup' when supported integrations are non-empty, none are available, and connectionOptional is false", () => {
+      expect(
+        getWidgetConnectionStatus({
+          supportedIntegrations: ["radarr", "sabNzbd"],
+          availableKinds,
+          connectionOptional: false,
+        }),
+      ).toBe("needsSetup");
+    });
+
+    it("returns 'needsSetup' when availableKinds is empty and connection is required", () => {
+      expect(
+        getWidgetConnectionStatus({
+          supportedIntegrations: ["sonarr"],
+          availableKinds: new Set<IntegrationKind>(),
+          connectionOptional: false,
+        }),
+      ).toBe("needsSetup");
+    });
   });
 
-  it.each([
-    { supportedIntegrations: [], connectionOptional: false },
-    { supportedIntegrations: ["radarr" as const], connectionOptional: true },
-  ])("reports a widget without a required connection", ({ supportedIntegrations, connectionOptional }) => {
-    expect(getWidgetConnectionStatus({ supportedIntegrations, availableKinds, connectionOptional })).toBe(
-      "noConnectionRequired",
-    );
+  describe("noConnectionRequired status", () => {
+    it("returns 'noConnectionRequired' when supportedIntegrations is empty regardless of connectionOptional", () => {
+      expect(
+        getWidgetConnectionStatus({
+          supportedIntegrations: [],
+          availableKinds,
+          connectionOptional: false,
+        }),
+      ).toBe("noConnectionRequired");
+
+      expect(
+        getWidgetConnectionStatus({
+          supportedIntegrations: [],
+          availableKinds: new Set(),
+          connectionOptional: true,
+        }),
+      ).toBe("noConnectionRequired");
+    });
+
+    it("returns 'noConnectionRequired' when connectionOptional is true and no supported integrations are available", () => {
+      expect(
+        getWidgetConnectionStatus({
+          supportedIntegrations: ["radarr", "jellyfin"],
+          availableKinds,
+          connectionOptional: true,
+        }),
+      ).toBe("noConnectionRequired");
+    });
+
+    it("returns 'noConnectionRequired' when connectionOptional is true and availableKinds is empty", () => {
+      expect(
+        getWidgetConnectionStatus({
+          supportedIntegrations: ["sonarr"],
+          availableKinds: new Set(),
+          connectionOptional: true,
+        }),
+      ).toBe("noConnectionRequired");
+    });
   });
 });
 
-describe("widget selection lock", () => {
-  it("rejects repeated selection synchronously until the active selection finishes", () => {
+describe("selection concurrency locks", () => {
+  it("acquires lock on unlocked ref and sets current to true", () => {
+    const lock = { current: false };
+
+    const acquired = tryLockSelection(lock);
+    expect(acquired).toBe(true);
+    expect(lock.current).toBe(true);
+  });
+
+  it("rejects lock acquisition on an already locked ref", () => {
+    const lock = { current: true };
+
+    const acquired = tryLockSelection(lock);
+    expect(acquired).toBe(false);
+    expect(lock.current).toBe(true);
+  });
+
+  it("unlocks lock and allows subsequent acquisition", () => {
     const lock = { current: false };
 
     expect(tryLockSelection(lock)).toBe(true);
     expect(tryLockSelection(lock)).toBe(false);
 
     unlockSelection(lock);
+    expect(lock.current).toBe(false);
+
     expect(tryLockSelection(lock)).toBe(true);
   });
+
+  it("handles repeated unlock safely without throwing", () => {
+    const lock = { current: false };
+    expect(() => {
+      unlockSelection(lock);
+      unlockSelection(lock);
+    }).not.toThrow();
+    expect(lock.current).toBe(false);
+  });
+
+  it("prevents multiple concurrent callers from proceeding simultaneously", () => {
+    const lock = { current: false };
+    const results: boolean[] = [];
+
+    // Simulate 5 simultaneous selection attempts
+    for (let i = 0; i < 5; i++) {
+      results.push(tryLockSelection(lock));
+    }
+
+    expect(results).toEqual([true, false, false, false, false]);
+  });
 });
 
 describe("resolveMatchingIntegrationsAsync", () => {
-  it("waits for the shared integration query before a cold integration-backed selection", async () => {
-    const ensureDataAsync = vi.fn(async () => [
-      { id: "matching", kind: "sonarr" as const },
-      { id: "other", kind: "radarr" as const },
-    ]);
+  it("returns empty array immediately when widget does not support integrations without calling ensureDataAsync", async () => {
+    const ensureDataAsync = vi.fn(async () => [{ id: "1", kind: "sonarr" as IntegrationKind }]);
 
-    await expect(
-      resolveMatchingIntegrationsAsync({
-        hasIntegrationSupport: true,
-        supportedIntegrations: ["sonarr"],
-        currentData: undefined,
-        ensureDataAsync,
-      }),
-    ).resolves.toEqual([{ id: "matching", kind: "sonarr" }]);
-    expect(ensureDataAsync).toHaveBeenCalledOnce();
-  });
+    const result = await resolveMatchingIntegrationsAsync({
+      hasIntegrationSupport: false,
+      supportedIntegrations: ["sonarr"],
+      currentData: undefined,
+      ensureDataAsync,
+    });
 
-  it("does not wait for integrations when the widget has no integration support", async () => {
-    const ensureDataAsync = vi.fn(async () => [{ id: "unused", kind: "sonarr" as const }]);
-
-    await expect(
-      resolveMatchingIntegrationsAsync({
-        hasIntegrationSupport: false,
-        supportedIntegrations: [],
-        currentData: undefined,
-        ensureDataAsync,
-      }),
-    ).resolves.toEqual([]);
+    expect(result).toEqual([]);
     expect(ensureDataAsync).not.toHaveBeenCalled();
   });
 
-  it("excludes matching integrations the user cannot use", async () => {
+  it("uses currentData synchronously when available without calling ensureDataAsync", async () => {
     const currentData = [
-      { id: "allowed", kind: "sonarr" as const, permissions: { hasUseAccess: true } },
-      { id: "blocked", kind: "sonarr" as const, permissions: { hasUseAccess: false } },
+      { id: "1", kind: "sonarr" as IntegrationKind, permissions: { hasUseAccess: true } },
+      { id: "2", kind: "radarr" as IntegrationKind, permissions: { hasUseAccess: true } },
+      { id: "3", kind: "plex" as IntegrationKind, permissions: { hasUseAccess: true } },
     ];
+    const ensureDataAsync = vi.fn();
+
+    const result = await resolveMatchingIntegrationsAsync({
+      hasIntegrationSupport: true,
+      supportedIntegrations: ["sonarr", "radarr"],
+      currentData,
+      ensureDataAsync,
+    });
+
+    expect(result).toEqual([currentData[0], currentData[1]]);
+    expect(ensureDataAsync).not.toHaveBeenCalled();
+  });
+
+  it("calls ensureDataAsync when currentData is undefined and filters by supported kinds", async () => {
+    const fetchedData = [
+      { id: "1", kind: "sonarr" as IntegrationKind },
+      { id: "2", kind: "radarr" as IntegrationKind },
+      { id: "3", kind: "sabNzbd" as IntegrationKind },
+    ];
+    const ensureDataAsync = vi.fn(async () => fetchedData);
+
+    const result = await resolveMatchingIntegrationsAsync({
+      hasIntegrationSupport: true,
+      supportedIntegrations: ["radarr", "sabNzbd"],
+      currentData: undefined,
+      ensureDataAsync,
+    });
+
+    expect(result).toEqual([fetchedData[1], fetchedData[2]]);
+    expect(ensureDataAsync).toHaveBeenCalledOnce();
+  });
+
+  it("excludes integrations where permissions.hasUseAccess is explicitly false", async () => {
+    const currentData = [
+      { id: "allowed-1", kind: "sonarr" as IntegrationKind, permissions: { hasUseAccess: true } },
+      { id: "blocked-1", kind: "sonarr" as IntegrationKind, permissions: { hasUseAccess: false } },
+      { id: "allowed-no-perms", kind: "sonarr" as IntegrationKind },
+    ];
+
+    const result = await resolveMatchingIntegrationsAsync({
+      hasIntegrationSupport: true,
+      supportedIntegrations: ["sonarr"],
+      currentData,
+      ensureDataAsync: vi.fn(),
+    });
+
+    expect(result).toEqual([currentData[0], currentData[2]]);
+  });
+
+  it("returns empty array when none of the fetched integrations match supported kinds", async () => {
+    const fetchedData = [
+      { id: "1", kind: "plex" as IntegrationKind },
+      { id: "2", kind: "jellyfin" as IntegrationKind },
+    ];
+    const ensureDataAsync = vi.fn(async () => fetchedData);
+
+    const result = await resolveMatchingIntegrationsAsync({
+      hasIntegrationSupport: true,
+      supportedIntegrations: ["sonarr", "radarr"],
+      currentData: undefined,
+      ensureDataAsync,
+    });
+
+    expect(result).toEqual([]);
+    expect(ensureDataAsync).toHaveBeenCalledOnce();
+  });
+
+  it("propagates error when ensureDataAsync rejects", async () => {
+    const ensureDataAsync = vi.fn(async () => {
+      throw new Error("Network timeout");
+    });
 
     await expect(
       resolveMatchingIntegrationsAsync({
         hasIntegrationSupport: true,
         supportedIntegrations: ["sonarr"],
-        currentData,
-        ensureDataAsync: vi.fn(),
+        currentData: undefined,
+        ensureDataAsync,
       }),
-    ).resolves.toEqual([currentData[0]]);
+    ).rejects.toThrow("Network timeout");
   });
 });

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

@@ -1,20 +0,0 @@
-.action {
-  opacity: 0;
-  transition: opacity 150ms ease;
-}
-.card:hover .action,
-.card:focus-within .action {
-  opacity: 1;
-}
-
-@media (hover: none), (pointer: coarse) {
-  .action {
-    opacity: 1;
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .action {
-    transition: none;
-  }
-}

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

@@ -0,0 +1,211 @@
+// @vitest-environment jsdom
+
+import { act } from "react";
+import { createRoot } from "react-dom/client";
+import type { Root } from "react-dom/client";
+import { MantineProvider } from "@mantine/core";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+import type { IntegrationKind, WidgetKind } from "@homarr/definitions";
+
+import { ConnectionStatusBadge, SupportedIntegrations, WidgetItem } from "./item-select-modal";
+
+vi.mock("@homarr/translation/client", () => ({
+  useI18n: () => (key: string) => {
+    const translations: Record<string, string> = {
+      "item.create.connectionStatus.ready": "Ready",
+      "item.create.connectionStatus.needsSetup": "Needs setup",
+      "item.create.connectionStatus.noConnectionRequired": "No connection required",
+      "item.create.standalone": "Standalone",
+      "widget.mediaServer.name": "Media Server",
+      "widget.mediaServer.description": "Stream your media",
+      "widget.clock.name": "Clock",
+      "widget.clock.description": "Displays current time",
+    };
+    return translations[key] ?? key;
+  },
+  useScopedI18n: () => (key: string) => key,
+}));
+
+vi.mock("@homarr/definitions", async () => {
+  const actual = await vi.importActual<Record<string, unknown>>("@homarr/definitions");
+  return {
+    ...actual,
+    getIntegrationName: (kind: string) => kind.charAt(0).toUpperCase() + kind.slice(1),
+  };
+});
+
+let root: Root;
+let host: HTMLDivElement;
+
+beforeEach(() => {
+  (globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+  window.matchMedia = vi.fn().mockImplementation(() => ({
+    matches: false,
+    media: "",
+    onchange: null,
+    addListener: vi.fn(),
+    removeListener: vi.fn(),
+    addEventListener: vi.fn(),
+    removeEventListener: vi.fn(),
+    dispatchEvent: vi.fn(),
+  }));
+  host = document.createElement("div");
+  document.body.append(host);
+  root = createRoot(host);
+});
+
+afterEach(async () => {
+  await act(async () => root.unmount());
+  host.remove();
+});
+
+describe("Advanced Add App - Modal Subcomponents", () => {
+  describe("ConnectionStatusBadge", () => {
+    it("renders 'Ready' badge with teal color when status is 'ready'", async () => {
+      await act(async () =>
+        root.render(
+          <MantineProvider>
+            <ConnectionStatusBadge status="ready" />
+          </MantineProvider>,
+        ),
+      );
+
+      expect(host.textContent).toContain("Ready");
+      const badge = host.querySelector("span, div");
+      expect(badge).not.toBeNull();
+    });
+
+    it("renders 'Needs setup' badge with orange color when status is 'needsSetup'", async () => {
+      await act(async () =>
+        root.render(
+          <MantineProvider>
+            <ConnectionStatusBadge status="needsSetup" />
+          </MantineProvider>,
+        ),
+      );
+
+      expect(host.textContent).toContain("Needs setup");
+    });
+
+    it("renders null when status is 'noConnectionRequired'", async () => {
+      await act(async () =>
+        root.render(
+          <MantineProvider>
+            <ConnectionStatusBadge status="noConnectionRequired" />
+          </MantineProvider>,
+        ),
+      );
+
+      expect(host.querySelector("[class*='Badge-root']")).toBeNull();
+    });
+  });
+
+  describe("SupportedIntegrations", () => {
+    it("renders up to 5 avatars for supported integrations", async () => {
+      const integrations: IntegrationKind[] = ["sonarr", "radarr", "plex"];
+
+      await act(async () =>
+        root.render(
+          <MantineProvider>
+            <SupportedIntegrations integrations={integrations} />
+          </MantineProvider>,
+        ),
+      );
+
+      // Avatars should be rendered for the 3 items
+      expect(host.querySelectorAll("img, svg, div").length).toBeGreaterThan(0);
+      expect(host.textContent).not.toContain("+");
+    });
+
+    it("renders overflow indicator when 6 or more integrations are supported", async () => {
+      const integrations: IntegrationKind[] = ["sonarr", "radarr", "plex", "jellyfin", "emby", "deluge"];
+
+      await act(async () =>
+        root.render(
+          <MantineProvider>
+            <SupportedIntegrations integrations={integrations} />
+          </MantineProvider>,
+        ),
+      );
+
+      // 6 integrations total: 4 shown, +2 in badge
+      expect(host.textContent).toContain("+2");
+    });
+
+    it("renders Standalone label when integrations list is empty", async () => {
+      await act(async () =>
+        root.render(
+          <MantineProvider>
+            <SupportedIntegrations integrations={[]} />
+          </MantineProvider>,
+        ),
+      );
+
+      expect(host.textContent).toContain("Standalone");
+    });
+  });
+
+  describe("WidgetItem", () => {
+    const FakeIcon = () => <span data-testid="widget-icon">Icon</span>;
+
+    it("renders widget card with icon, title, description, and connection status", async () => {
+      const onSelect = vi.fn();
+      const item = {
+        kind: "mediaServer" as WidgetKind,
+        name: "Media Server",
+        description: "Stream your media collection effortlessly",
+        icon: FakeIcon as never,
+        supportedIntegrations: ["plex" as IntegrationKind, "jellyfin" as IntegrationKind],
+      };
+
+      await act(async () =>
+        root.render(
+          <MantineProvider>
+            <WidgetItem item={item} disabled={false} loading={false} connectionStatus="ready" onSelect={onSelect} />
+          </MantineProvider>,
+        ),
+      );
+
+      const button = host.querySelector("button");
+      expect(button).not.toBeNull();
+      expect(host.textContent).toContain("Media Server");
+      expect(host.textContent).toContain("Stream your media collection effortlessly");
+      expect(host.textContent).toContain("Ready");
+      expect(host.querySelector("[data-testid='widget-icon']")).not.toBeNull();
+
+      await act(async () => {
+        button?.click();
+      });
+
+      expect(onSelect).toHaveBeenCalledOnce();
+    });
+
+    it("does not mark widget cards as selected", async () => {
+      const item = {
+        kind: "clock" as WidgetKind,
+        name: "Clock",
+        description: "Displays current time",
+        icon: FakeIcon as never,
+        supportedIntegrations: [] as IntegrationKind[],
+      };
+
+      await act(async () =>
+        root.render(
+          <MantineProvider>
+            <WidgetItem
+              item={item}
+              disabled={false}
+              loading={false}
+              connectionStatus="noConnectionRequired"
+              onSelect={vi.fn()}
+            />
+          </MantineProvider>,
+        ),
+      );
+
+      const button = host.querySelector("button");
+      expect(button?.hasAttribute("data-selected")).toBe(false);
+    });
+  });
+});

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

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useRef, useState } from "react";
+import { useMemo, useRef, useState } from "react";
 import {
   Avatar,
   Badge,
@@ -6,16 +6,18 @@ import {
   Button,
   Center,
   Divider,
-  Flex,
   Group,
   Image,
+  Input,
   Select,
+  SimpleGrid,
   Stack,
   Text,
+  ThemeIcon,
   Tooltip,
 } from "@mantine/core";
 import { notifications } from "@mantine/notifications";
-import { IconApi, IconBuildingStore } from "@tabler/icons-react";
+import { IconApi, IconBuildingStore, IconSearch } from "@tabler/icons-react";
 
 import type { RouterOutputs } from "@homarr/api";
 import { clientApi } from "@homarr/api/client";
@@ -23,8 +25,8 @@ import { useSession } from "@homarr/auth/client";
 import { useCurrentLayout, useRequiredBoard } from "@homarr/boards/context";
 import { createId } from "@homarr/common";
 import {
-  getIconUrl,
   getBoardLaneColumnCount,
+  getIconUrl,
   getIntegrationName,
   getRootSectionLane,
   widgetIntegrationSupport,
@@ -36,14 +38,14 @@ import { createModal, modalSizeSelect, useModalAction } from "@homarr/modals";
 import { showErrorNotification, showSuccessNotification } from "@homarr/notifications";
 import { useSettings } from "@homarr/settings";
 import { useI18n } from "@homarr/translation/client";
-import { CatalogItem, SelectGridLayout, selectGridCardHeight } from "@homarr/ui";
+import { SelectableCard } from "@homarr/ui";
 import type { TablerIcon } from "@homarr/ui";
 import { widgetCatalogIcons } from "@homarr/widgets/catalog";
 import { loadWidgetDefinition, reduceWidgetOptionsWithDefinition } from "@homarr/widgets/manifest";
 
-import { IntegrationSelectModal } from "~/components/integration/integration-select-modal";
-import { useSetupAnalytics } from "~/components/create/setup-analytics";
 import type { EmptySection } from "~/app/[locale]/boards/_types";
+import { useSetupAnalytics } from "~/components/create/setup-analytics";
+import { IntegrationSelectModal } from "~/components/integration/integration-select-modal";
 import { useItemActions } from "./item-actions";
 import type { WidgetConnectionStatus } from "./item-select-data";
 import {
@@ -64,6 +66,16 @@ interface ItemSelectModalContentProps {
   initialSearch?: string;
 }
 
+export interface WidgetItemData {
+  kind: WidgetKind;
+  supportedIntegrations: IntegrationKind[];
+  icon: TablerIcon;
+  name: string;
+  description: string;
+}
+
+const selectGridCols = { base: 1, xs: 2, sm: 2, md: 3, lg: 4 };
+
 const ItemSelectModalContent = ({
   actions,
   integrationData,
@@ -108,15 +120,14 @@ const ItemSelectModalContent = ({
     [board.sections, currentLayout, mainCanvasSection, t],
   );
   const [targetSectionId, setTargetSectionId] = useState<string | null>(placementOptions[0]?.value ?? null);
+  const effectiveSectionId = placementOptions.some(({ value }) => value === targetSectionId)
+    ? targetSectionId
+    : (placementOptions[0]?.value ?? null);
+
   const [loadingSelection, setLoadingSelection] = useState<string | null>(null);
   const selectionLock = useRef(false);
   const { createItem, removeItem } = useItemActions();
 
-  useEffect(() => {
-    if (placementOptions.some(({ value }) => value === targetSectionId)) return;
-    setTargetSectionId(placementOptions[0]?.value ?? null);
-  }, [placementOptions, targetSectionId]);
-
   const { openModal: openEditModal } = useModalAction(LazyWidgetEditModal);
   const { openModal: openIntegrationModal } = useModalAction(IntegrationSelectModal);
   const settings = useSettings();
@@ -128,7 +139,7 @@ const ItemSelectModalContent = ({
     [integrationData],
   );
 
-  const items = useMemo(
+  const items = useMemo<WidgetItemData[]>(
     () =>
       widgetKinds
         .filter((kind) => kind !== "customApi")
@@ -188,7 +199,7 @@ const ItemSelectModalContent = ({
       createdItem.layouts.find(({ layoutId }) => layoutId === currentLayoutId)?.sectionId ??
       createdItem.layouts[0]?.sectionId;
     const actualDestination = placementOptions.find(({ value }) => value === actualSectionId)?.label;
-    const wasRelocated = targetSectionId !== null && actualSectionId !== targetSectionId && actualDestination;
+    const wasRelocated = effectiveSectionId !== null && actualSectionId !== effectiveSectionId && actualDestination;
     const notificationId = `board-item-created:${itemId}`;
     showSuccessNotification({
       id: notificationId,
@@ -247,7 +258,7 @@ const ItemSelectModalContent = ({
               kind: "customApi",
               integrationIds: [],
               options: configuredOptions,
-              targetSectionId: targetSectionId ?? undefined,
+              targetSectionId: effectiveSectionId ?? undefined,
               advancedOptions,
             });
             notifyCreated(updatedBoard, itemId, customWidgetDefinition.name);
@@ -310,7 +321,7 @@ const ItemSelectModalContent = ({
                 kind,
                 options,
                 integrationIds: newIntegrationIds,
-                targetSectionId: targetSectionId ?? undefined,
+                targetSectionId: effectiveSectionId ?? undefined,
                 advancedOptions,
               });
               if (!notifyCreated(updatedBoard, itemId, t(`widget.${kind}.name`))) return;
@@ -377,125 +388,233 @@ const ItemSelectModalContent = ({
   };
 
   return (
-    <Flex gap="md" align="stretch">
-      <Box style={{ flex: "1 1 0%", minWidth: 0 }}>
-        <SelectGridLayout
-          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;
-              if (item) void handleAdd(item.kind);
-            }
-          }}
-        >
-          {placementOptions.length > 1 && (
-            <Box style={{ gridColumn: "1 / -1" }}>
-              <Select
-                label={t("item.create.destination.label")}
-                description={t("item.create.destination.description")}
-                data={placementOptions}
-                value={targetSectionId}
-                onChange={setTargetSectionId}
-                allowDeselect={false}
-              />
-            </Box>
-          )}
-          {filteredItems.map((item) => (
-            <WidgetItem
-              key={item.kind}
-              item={item}
-              onSelect={() => void handleAdd(item.kind)}
-              onFocus={() => {
-                void loadWidgetDefinition(item.kind).catch(() => undefined);
-                preloadWidgetEditModal();
-              }}
-              onPointerEnter={() => {
-                void loadWidgetDefinition(item.kind).catch(() => undefined);
-                preloadWidgetEditModal();
-              }}
-              disabled={loadingSelection !== null}
-              loading={loadingSelection === item.kind}
-              connectionStatus={getWidgetConnectionStatus({
-                supportedIntegrations: item.supportedIntegrations,
-                availableKinds,
-                connectionOptional: widgetKindsWithOptionalIntegrations.has(item.kind),
-              })}
+    <Stack gap="md">
+      {/* Top Search & Destination Selector */}
+      <Group justify="space-between" align="flex-end" wrap="wrap" gap="sm">
+        <Box style={{ flex: "1 1 240px", minWidth: 200 }}>
+          <Input
+            value={search}
+            onChange={(event) => setSearch(event.currentTarget.value)}
+            leftSection={<IconSearch size={16} />}
+            placeholder={`${t("item.create.search")}...`}
+            aria-label={t("item.create.search")}
+            data-autofocus
+            onKeyDown={(event) => {
+              if (
+                event.key === "Enter" &&
+                loadingSelection === null &&
+                filteredItems.length === 1 &&
+                filteredItems[0]
+              ) {
+                void handleAdd(filteredItems[0].kind);
+              }
+            }}
+          />
+        </Box>
+
+        {placementOptions.length > 1 && (
+          <Box style={{ flex: "0 1 280px", minWidth: 200 }}>
+            <Select
+              label={t("item.create.destination.label")}
+              data={placementOptions}
+              value={effectiveSectionId}
+              onChange={setTargetSectionId}
+              allowDeselect={false}
+              size="xs"
             />
-          ))}
+          </Box>
+        )}
+      </Group>
 
-          {isAdmin && (
-            <>
-              <Divider
-                label={t("customWidget.page.list.title")}
-                labelPosition="center"
-                my="sm"
-                style={{ gridColumn: "1 / -1" }}
+      {/* Grid of Widgets */}
+      <SimpleGrid cols={selectGridCols} spacing="sm">
+        {filteredItems.map((item) => (
+          <WidgetItem
+            key={item.kind}
+            item={item}
+            onSelect={() => void handleAdd(item.kind)}
+            onFocus={() => {
+              void loadWidgetDefinition(item.kind).catch(() => undefined);
+              preloadWidgetEditModal();
+            }}
+            onPointerEnter={() => {
+              void loadWidgetDefinition(item.kind).catch(() => undefined);
+              preloadWidgetEditModal();
+            }}
+            disabled={loadingSelection !== null}
+            loading={loadingSelection === item.kind}
+            connectionStatus={getWidgetConnectionStatus({
+              supportedIntegrations: item.supportedIntegrations,
+              availableKinds,
+              connectionOptional: widgetKindsWithOptionalIntegrations.has(item.kind),
+            })}
+          />
+        ))}
+
+        {isAdmin && (
+          <>
+            <Divider
+              label={
+                <Group gap="xs">
+                  <IconApi size={14} />
+                  <Text size="xs" fw={600}>
+                    {t("customWidget.page.list.title")}
+                  </Text>
+                </Group>
+              }
+              labelPosition="center"
+              my="sm"
+              style={{ gridColumn: "1 / -1" }}
+            />
+            {filteredCustomWidgets.map((def) => (
+              <SelectableCard
+                key={def.id}
+                onClick={() => void handleAddCustomWidget(def)}
+                aria-label={def.name}
+                icon={
+                  def.iconUrl ? (
+                    <Image src={def.iconUrl} w={24} h={24} fit="contain" style={{ flexShrink: 0 }} />
+                  ) : (
+                    <ThemeIcon size={34} radius="md" variant="light" color="primaryColor">
+                      <IconApi size={20} />
+                    </ThemeIcon>
+                  )
+                }
+                title={def.name}
+                description={def.description ?? ""}
+                footerLeft={
+                  <Text size="xs" c="dimmed">
+                    {t("item.create.customWidget")}
+                  </Text>
+                }
               />
-              {filteredCustomWidgets.map((def) => (
-                <CatalogItem
-                  key={def.id}
-                  height={selectGridCardHeight}
-                  label={def.name}
-                  status={t("item.create.connectionStatus.noConnectionRequired")}
-                  disabled={loadingSelection !== null}
-                  busy={loadingSelection === `custom:${def.id}`}
-                  onSelect={() => void handleAddCustomWidget(def)}
-                  onFocus={() => {
-                    void loadWidgetDefinition("customApi").catch(() => undefined);
-                  }}
-                  onPointerEnter={() => {
-                    void loadWidgetDefinition("customApi").catch(() => undefined);
-                  }}
-                >
-                  <Stack h="100%" gap="xs">
-                    <Group gap="sm" wrap="nowrap" align="flex-start">
-                      {def.iconUrl ? (
-                        <Image src={def.iconUrl} w={22} h={22} fit="contain" style={{ flexShrink: 0, marginTop: 2 }} />
-                      ) : (
-                        <IconApi size={22} style={{ flexShrink: 0, marginTop: 2 }} />
-                      )}
-                      <Text lh={1.2} style={{ whiteSpace: "normal" }} fw={500} size="sm" lineClamp={2}>
-                        {def.name}
-                      </Text>
-                    </Group>
-                    <Text lh={1.2} style={{ whiteSpace: "normal" }} size="xs" c="dimmed" lineClamp={1}>
-                      {def.description ?? ""}
-                    </Text>
-                    <ConnectionStatusBadge status="noConnectionRequired" />
-                  </Stack>
-                </CatalogItem>
-              ))}
+            ))}
+            <Box mt="xs" style={{ gridColumn: "1 / -1" }}>
+              <Button
+                component="a"
+                href="/manage/custom-widgets/workshop"
+                target="_blank"
+                rel="noopener noreferrer"
+                variant="default"
+                fullWidth
+                leftSection={<IconBuildingStore size={16} />}
+              >
+                {t("workshop.browseWorkshop")}
+              </Button>
+            </Box>
+          </>
+        )}
+      </SimpleGrid>
 
-              <Box style={{ gridColumn: "1 / -1" }}>
-                {/* Opens in a new tab so unsaved board changes survive the detour. */}
-                <Button
-                  component="a"
-                  href="/manage/custom-widgets/workshop"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  variant="default"
-                  fullWidth
-                  leftSection={<IconBuildingStore size={16} />}
-                >
-                  {t("workshop.browseWorkshop")}
-                </Button>
-              </Box>
-            </>
-          )}
-
-          {filteredItems.length === 0 && (!isAdmin || filteredCustomWidgets.length === 0) && (
-            <Center p="xl">
-              <Text c="dimmed">{t("common.noResults")}</Text>
-            </Center>
-          )}
-        </SelectGridLayout>
-      </Box>
-    </Flex>
+      {filteredItems.length === 0 && (!isAdmin || filteredCustomWidgets.length === 0) && (
+        <Center p="xl">
+          <Text c="dimmed">{t("common.noResults")}</Text>
+        </Center>
+      )}
+    </Stack>
   );
 };
+
+// =========================================================================
+// WidgetItem: SelectableCard with Inset, Title, Status Badge, and Footer
+// =========================================================================
+export const WidgetItem = ({
+  item,
+  onSelect,
+  onFocus,
+  onPointerEnter,
+  disabled,
+  loading,
+  connectionStatus,
+}: {
+  item: WidgetItemData;
+  onSelect: () => void;
+  onFocus?: () => void;
+  onPointerEnter?: () => void;
+  disabled: boolean;
+  loading: boolean;
+  connectionStatus: WidgetConnectionStatus;
+}) => {
+  return (
+    <SelectableCard
+      disabled={disabled}
+      loading={loading}
+      onClick={onSelect}
+      onFocus={onFocus}
+      onPointerEnter={onPointerEnter}
+      aria-label={item.name}
+      icon={
+        <ThemeIcon size={34} radius="md" variant="light" color="primaryColor">
+          <item.icon size={20} />
+        </ThemeIcon>
+      }
+      title={item.name}
+      topRight={<ConnectionStatusBadge status={connectionStatus} />}
+      description={item.description}
+      footerLeft={<SupportedIntegrations integrations={item.supportedIntegrations} />}
+    />
+  );
+};
+
+export const ConnectionStatusBadge = ({ status }: { status: WidgetConnectionStatus }) => {
+  const t = useI18n();
+  if (status === "noConnectionRequired") return null;
+  const color = status === "ready" ? "green" : status === "needsSetup" ? "yellow" : "gray";
+
+  return (
+    <Badge variant="dot" color={color} size="xs" tt="none" w="fit-content" maw="100%">
+      {t(`item.create.connectionStatus.${status}`)}
+    </Badge>
+  );
+};
+
+export const SupportedIntegrations = ({ integrations }: { integrations: IntegrationKind[] }) => {
+  const t = useI18n();
+
+  if (integrations.length === 0) {
+    return (
+      <Text size="xs" c="dimmed" fs="italic">
+        {t("item.create.standalone")}
+      </Text>
+    );
+  }
+
+  const countToShow = integrations.length >= 6 ? 4 : 5;
+  const moreCount = integrations.length - countToShow;
+
+  return (
+    <Group gap={2}>
+      <Tooltip.Group closeDelay={100}>
+        <Group gap={2}>
+          {integrations.slice(0, countToShow).map((integration) => (
+            <Tooltip key={integration} label={getIntegrationName(integration)} withArrow>
+              <Avatar src={getIconUrl(integration)} size="xs" radius="xl" />
+            </Tooltip>
+          ))}
+          {moreCount > 0 && (
+            <Tooltip
+              withArrow
+              label={
+                <Stack gap={2}>
+                  {integrations.slice(countToShow).map((integration) => (
+                    <Text key={integration} size="xs">
+                      {getIntegrationName(integration)}
+                    </Text>
+                  ))}
+                </Stack>
+              }
+            >
+              <Avatar radius="xl" size="xs">
+                +{moreCount}
+              </Avatar>
+            </Tooltip>
+          )}
+        </Group>
+      </Tooltip.Group>
+    </Group>
+  );
+};
+
 const ItemSelectModalFrame = ({
   actions,
   innerProps,
@@ -541,109 +660,3 @@ export const ItemSelectModal = createModal<{
   defaultTitle: (t) => t("item.create.title"),
   size: modalSizeSelect,
 });
-
-const WidgetItem = ({
-  item,
-  onSelect,
-  onFocus,
-  onPointerEnter,
-  disabled,
-  loading,
-  connectionStatus,
-}: {
-  item: {
-    kind: WidgetKind;
-    supportedIntegrations: IntegrationKind[];
-    name: string;
-    description: string;
-    icon: TablerIcon;
-  };
-  onSelect: () => void;
-  onFocus: () => void;
-  onPointerEnter: () => void;
-  disabled: boolean;
-  loading: boolean;
-  connectionStatus: WidgetConnectionStatus;
-}) => {
-  const t = useI18n();
-  const statusLabel = t(`item.create.connectionStatus.${connectionStatus}`);
-
-  return (
-    <CatalogItem
-      height={selectGridCardHeight}
-      label={item.name}
-      status={statusLabel}
-      onFocus={onFocus}
-      onPointerEnter={onPointerEnter}
-      onSelect={onSelect}
-      disabled={disabled}
-      busy={loading}
-    >
-      <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>
-        <ConnectionStatusBadge status={connectionStatus} />
-        <SupportedIntegrations integrations={item.supportedIntegrations} />
-      </Stack>
-    </CatalogItem>
-  );
-};
-
-const ConnectionStatusBadge = ({ status }: { status: WidgetConnectionStatus }) => {
-  const t = useI18n();
-  const color = status === "ready" ? "green" : status === "needsSetup" ? "yellow" : "gray";
-
-  return (
-    <Badge variant="light" color={color} size="xs" tt="none" w="fit-content" maw="100%">
-      {t(`item.create.connectionStatus.${status}`)}
-    </Badge>
-  );
-};
-
-const SupportedIntegrations = ({ integrations }: { integrations: IntegrationKind[] }) => {
-  if (integrations.length === 0) {
-    return null;
-  }
-
-  const countToShow = integrations.length >= 8 ? 6 : 7;
-  const moreCount = integrations.length - countToShow;
-
-  return (
-    <Group gap={2}>
-      <Tooltip.Group closeDelay={100}>
-        <Group gap={2}>
-          {integrations.slice(0, countToShow).map((integration) => (
-            <Tooltip key={integration} label={getIntegrationName(integration)} withArrow>
-              <Avatar src={getIconUrl(integration)} size="xs" radius="xl" />
-            </Tooltip>
-          ))}
-          {moreCount > 0 && (
-            <Tooltip
-              withArrow
-              label={
-                <>
-                  {integrations.slice(countToShow).map((integration) => (
-                    <div key={integration}>{getIntegrationName(integration)}</div>
-                  ))}
-                </>
-              }
-            >
-              <Avatar radius="xl" size="xs">
-                +{moreCount}
-              </Avatar>
-            </Tooltip>
-          )}
-        </Group>
-      </Tooltip.Group>
-    </Group>
-  );
-};

apps/nextjs/src/components/board/items/lazy-widget-edit-modal.tsx

@@ -1,16 +1,19 @@
 "use client";
 
-import { Suspense, use } from "react";
+import { Suspense, use, useCallback, useMemo, useState } from "react";
 import { Center, Loader } from "@mantine/core";
 import { ErrorBoundary } from "react-error-boundary";
 import type { FallbackProps } from "react-error-boundary";
 
+import { clientApi } from "@homarr/api/client";
 import type { WidgetKind } from "@homarr/definitions";
-import { createModal, modalSizeForm } from "@homarr/modals";
+import { createModal, modalSizeForm, useModalAction } from "@homarr/modals";
 import { WidgetError } from "@homarr/widgets/errors";
 import type * as WidgetModalsModule from "@homarr/widgets/modals";
 import type { WidgetEditModalProps } from "@homarr/widgets/modals";
+import type { IntegrationSelectOption } from "@homarr/widgets/widget-integration-select";
 
+import { IntegrationSelectModal } from "~/components/integration/integration-select-modal";
 import type * as IntegrationEditFormModule from "~/components/integration/embedded-integration-edit-form";
 import type { EmbeddedIntegrationEditFormProps } from "~/components/integration/embedded-integration-edit-form";
 
@@ -80,13 +83,46 @@ interface LazyWidgetEditModalContentProps {
 
 const LazyWidgetEditModalContent = (props: LazyWidgetEditModalContentProps) => {
   const { WidgetEditModal } = use(loadWidgetEditModal());
+  const { openModal: openIntegrationModal } = useModalAction(IntegrationSelectModal);
   const Component = WidgetEditModal.component;
+  const utils = clientApi.useUtils();
+  const [createdIntegrations, setCreatedIntegrations] = useState<IntegrationSelectOption[]>([]);
+
+  const supportedKinds = useMemo(() => {
+    if (!("supportedIntegrations" in props.innerProps.definition)) return [];
+    return (props.innerProps.definition.supportedIntegrations ?? []).filter((k) => k !== "mock");
+  }, [props.innerProps.definition]);
+
+  const handleOpenNewIntegration = useCallback(
+    (onCreated?: (id: string) => void) => {
+      openIntegrationModal({
+        allowedKinds: supportedKinds,
+        onSuccess: (result) => {
+          if (result?.integration) {
+            setCreatedIntegrations((prev) => [...prev, result.integration]);
+            void utils.integration.all.invalidate();
+            onCreated?.(result.integration.id);
+          }
+        },
+      });
+    },
+    [openIntegrationModal, supportedKinds, utils],
+  );
+
+  const combinedIntegrationData = useMemo(() => {
+    const existing = props.innerProps.integrationData;
+    const additional = createdIntegrations.filter((c) => !existing.some((e) => e.id === c.id));
+    return [...existing, ...additional];
+  }, [props.innerProps.integrationData, createdIntegrations]);
+
   return (
     <Component
       {...props}
       innerProps={{
         ...props.innerProps,
+        integrationData: combinedIntegrationData,
         integrationEditForm: LazyIntegrationEditForm,
+        onOpenNewIntegration: supportedKinds.length > 0 ? handleOpenNewIntegration : undefined,
       }}
     />
   );
@@ -122,6 +158,5 @@ export const LazyWidgetEditModal = createModal<WidgetEditModalProps<WidgetKind>>
     return t("item.edit.title");
   },
   size: modalSizeForm,
-  presentation: "inspector",
   closeOnClickOutside: false,
 });

apps/nextjs/src/components/board/sections/grid/fixed-grid-item.tsx

@@ -17,6 +17,7 @@ import {
 } from "~/components/board/layout";
 import type { GridPlacement } from "~/components/board/layout";
 import { useSectionContext } from "../section-context";
+import { useBoardSelection } from "~/components/board/selection/board-selection-context";
 import { beginGridTransaction, commitGridTransaction, previewGridMove, previewGridResize } from "./dnd";
 import type { GridTransaction } from "./dnd";
 import { useGridEditorRuntimeStatus } from "./grid-editor-runtime";
@@ -48,6 +49,16 @@ export const FixedGridItem = ({
   const { section, items, innerSections, columnCount, maxRowCount, announce } = useSectionContext();
   const { commitSectionGrid } = useGridLayoutActions();
   const [isKeyboardEditing, setIsKeyboardEditing] = useState(false);
+  const { isSelected, toggleSelectItem } = useBoardSelection();
+  const selected = item.type === "item" && isSelected(item.id);
+
+  const handleClickCapture = (event: React.MouseEvent) => {
+    if (!isEditorActive || item.type !== "item" || (!event.metaKey && !event.ctrlKey)) return;
+
+    event.preventDefault();
+    event.stopPropagation();
+    toggleSelectItem(item.id);
+  };
   const instructionsId = useId();
   const isEditorActive = isEditMode && runtimeStatus === "ready";
   const placement = toPlacement(item);
@@ -178,6 +189,8 @@ export const FixedGridItem = ({
   return (
     <Box
       {...semantics}
+      onClickCapture={handleClickCapture}
+      data-board-item-selected={selected ? "true" : undefined}
       className={combineClasses(isEditorActive ? classes.editorEntry : classes.staticItem)}
       style={isEditorActive ? { position: "relative", width: "100%", height: "100%" } : getLogicalItemStyle(placement)}
       data-grid-item-id={isEditorActive ? undefined : item.id}
@@ -187,6 +200,7 @@ export const FixedGridItem = ({
       data-kind={item.kind}
       data-keyboard-editing={isEditorActive ? String(isKeyboardEditing) : undefined}
       aria-describedby={isEditorActive ? instructionsId : undefined}
+      aria-selected={isEditorActive && item.type === "item" ? selected : undefined}
       aria-keyshortcuts={
         isEditorActive
           ? "Enter Space Escape ArrowLeft ArrowRight ArrowUp ArrowDown Shift+ArrowLeft Shift+ArrowRight Shift+ArrowUp Shift+ArrowDown"

apps/nextjs/src/components/board/sections/grid/grid-editor.css

@@ -32,6 +32,27 @@
   opacity: 0.42;
 }
 
+.board-grid-entry[data-board-item-selected="true"] {
+  z-index: 15;
+  opacity: 0.56;
+  filter: saturate(0.72) brightness(0.82);
+  transition:
+    opacity 140ms ease,
+    filter 140ms ease;
+}
+
+.board-grid-entry[data-board-item-selected="true"]::after {
+  position: absolute;
+  inset: 0;
+  z-index: 100;
+  content: "";
+  background: color-mix(in srgb, var(--mantine-primary-color-filled) 12%, transparent);
+  border: 0.125rem dashed var(--mantine-primary-color-filled);
+  border-radius: var(--board-item-radius, var(--mantine-radius-md));
+  box-shadow: inset 0 0 1.125rem color-mix(in srgb, var(--mantine-primary-color-filled) 20%, transparent);
+  pointer-events: none;
+}
+
 .board-grid-drag-overlay[data-dnd-dragging] {
   position: fixed !important;
   z-index: 10000;
@@ -177,138 +198,115 @@ body[data-board-grid-interacting="resize"] .board-grid-entry[data-dnd-active="tr
 
 .board-grid-resize-handle {
   position: absolute;
-  z-index: 20;
-  display: block;
+  z-index: 25;
+  display: grid;
   padding: 0;
+  color: var(--mantine-color-dimmed);
   appearance: none;
-  background: transparent;
-  border: 0;
+  background: var(--mantine-color-body);
+  border: 0.0625rem solid var(--mantine-color-default-border);
+  box-shadow: var(--mantine-shadow-xs);
+  opacity: 0;
+  scale: 0.88;
+  place-items: center;
   touch-action: none;
+  transition:
+    opacity 120ms ease,
+    scale 160ms cubic-bezier(0.22, 1, 0.36, 1),
+    border-color 120ms ease;
 }
 
-body[data-board-grid-interacting] .board-grid-resize-handle {
+.board-grid-resize-handle::before {
+  position: absolute;
+  inset: -0.375rem;
+  content: "";
+}
+
+.board-grid-resize-handle > svg {
   pointer-events: none;
 }
 
-body[data-board-grid-interacting] .board-grid-resize-handle::after {
-  opacity: 0;
-}
-
-.board-grid-resize-handle::after {
-  position: absolute;
-  inset: 50% auto auto 50%;
-  width: 12px;
-  height: 3px;
-  content: "";
-  background: color-mix(in srgb, var(--mantine-color-text) 70%, transparent);
-  border-radius: var(--mantine-radius-xl);
-  opacity: 0;
-  transform: translate(-50%, -50%);
-  transition: opacity 100ms ease;
-}
-
-.board-grid-entry:hover > .board-grid-resize-handle::after,
-.board-grid-resize-handle:focus-visible::after {
+.board-grid-entry:has(> .board-grid-resize-handle:hover) > .board-grid-resize-handle,
+.board-grid-entry:has(> .board-grid-resize-handle:active) > .board-grid-resize-handle {
+  border-color: var(--mantine-color-dimmed);
   opacity: 1;
-}
-
-.board-grid-resize-handle:focus-visible {
-  outline: 2px solid var(--mantine-primary-color-filled);
-  outline-offset: -8px;
+  scale: 1;
 }
 
 .board-grid-resize-handle[data-grid-resize-handle="n"],
 .board-grid-resize-handle[data-grid-resize-handle="s"] {
-  right: 44px;
-  left: 44px;
-  height: max(32px, calc(25px * var(--board-canvas-inverse-scale, 1)));
+  left: 50%;
+  width: 1.75rem;
+  height: 1rem;
+  border-radius: var(--mantine-radius-xl);
+  translate: -50% 0;
   cursor: ns-resize;
 }
 
 .board-grid-resize-handle[data-grid-resize-handle="n"] {
-  top: 0;
+  top: -0.25rem;
 }
 
 .board-grid-resize-handle[data-grid-resize-handle="s"] {
-  bottom: 0;
+  bottom: -0.25rem;
 }
 
 .board-grid-resize-handle[data-grid-resize-handle="e"],
 .board-grid-resize-handle[data-grid-resize-handle="w"] {
-  top: 44px;
-  bottom: 44px;
-  width: max(32px, calc(25px * var(--board-canvas-inverse-scale, 1)));
+  top: 50%;
+  width: 1rem;
+  height: 1.75rem;
+  border-radius: var(--mantine-radius-xl);
+  translate: 0 -50%;
   cursor: ew-resize;
 }
 
 .board-grid-resize-handle[data-grid-resize-handle="e"] {
-  right: 0;
+  right: -0.25rem;
 }
 
 .board-grid-resize-handle[data-grid-resize-handle="w"] {
-  left: 0;
-}
-
-.board-grid-resize-handle[data-grid-resize-handle="e"]::after,
-.board-grid-resize-handle[data-grid-resize-handle="w"]::after {
-  width: 3px;
-  height: 12px;
+  left: -0.25rem;
 }
 
 .board-grid-resize-handle[data-grid-resize-handle="ne"],
 .board-grid-resize-handle[data-grid-resize-handle="se"],
 .board-grid-resize-handle[data-grid-resize-handle="sw"],
 .board-grid-resize-handle[data-grid-resize-handle="nw"] {
-  z-index: 9;
-  width: max(44px, calc(25px * var(--board-canvas-inverse-scale, 1)));
-  height: max(44px, calc(25px * var(--board-canvas-inverse-scale, 1)));
+  width: 1.875rem;
+  height: 1.875rem;
+  border-radius: var(--board-item-radius, var(--mantine-radius-md));
 }
 
 .board-grid-resize-handle[data-grid-resize-handle="ne"] {
-  top: 0;
-  right: 0;
+  top: -0.625rem;
+  right: -0.625rem;
   cursor: nesw-resize;
 }
 
 .board-grid-resize-handle[data-grid-resize-handle="se"] {
-  right: 0;
-  bottom: 0;
+  right: -0.625rem;
+  bottom: -0.625rem;
   cursor: nwse-resize;
 }
 
 .board-grid-resize-handle[data-grid-resize-handle="sw"] {
-  bottom: 0;
-  left: 0;
+  bottom: -0.625rem;
+  left: -0.625rem;
   cursor: nesw-resize;
 }
 
 .board-grid-resize-handle[data-grid-resize-handle="nw"] {
-  top: 0;
-  left: 0;
+  top: -0.625rem;
+  left: -0.625rem;
   cursor: nwse-resize;
 }
 
-.board-grid-resize-handle[data-grid-resize-handle="ne"]::after,
-.board-grid-resize-handle[data-grid-resize-handle="sw"]::after {
-  transform: translate(-50%, -50%) rotate(-45deg);
-}
-
-.board-grid-resize-handle[data-grid-resize-handle="se"]::after,
-.board-grid-resize-handle[data-grid-resize-handle="nw"]::after {
-  transform: translate(-50%, -50%) rotate(45deg);
-}
-
-@media (hover: none), (pointer: coarse) {
-  .board-grid-resize-handle::after {
-    opacity: 1;
-  }
-}
-
 @media (prefers-reduced-motion: reduce) {
   .board-grid-entry,
   .board-grid-placeholder,
   .board-grid-resize-outline,
-  .board-grid-resize-handle::after {
+  .board-grid-resize-handle {
     transition: none;
   }
 }

apps/nextjs/src/components/board/sections/grid/grid-editor.tsx

@@ -32,6 +32,7 @@ import type {
   DragStartEvent,
 } from "@dnd-kit/react";
 import { DragDropProvider, DragOverlay, useDragDropManager, useDraggable, useDroppable } from "@dnd-kit/react";
+import { IconGripHorizontal, IconGripVertical } from "@tabler/icons-react";
 
 import { useCurrentLayout, useRequiredBoard } from "@homarr/boards/context";
 import { useI18n } from "@homarr/translation/client";
@@ -61,6 +62,7 @@ import { useBoardGridPortalHost } from "./grid-portal-host";
 import type { GridInteraction } from "./grid-preview-layer";
 import { GridPreviewLayer } from "./grid-preview-layer";
 import { createGridResizeOutlineController } from "./grid-resize-outline";
+import { useBoardSelection } from "~/components/board/selection/board-selection-context";
 import type { CommitSectionGridInput, SectionGridPlacement } from "./use-grid-layout-actions";
 import { useGridLayoutActions } from "./use-grid-layout-actions";
 
@@ -846,6 +848,9 @@ const DndGridEntryComponent = ({
 }: DndGridEntryProps) => {
   const { acquireContainer, structureRevision } = useBoardGridPortalHost();
   const { beginResize, previewResize, completeResize, cancelResize } = useBoardGridEditorActions();
+  const { isSelected } = useBoardSelection();
+  const board = useRequiredBoard();
+  const isSelectedEntry = placement.type === "item" && isSelected(placement.id);
   const mountRef = useRef<HTMLDivElement>(null);
   const shellRef = useRef<HTMLDivElement>(null);
   const placementRef = useRef(placement);
@@ -921,7 +926,12 @@ const DndGridEntryComponent = ({
     <div
       ref={setShellRef}
       className="board-grid-entry"
-      style={getLogicalItemStyle(placement) as CSSProperties}
+      style={
+        {
+          ...getLogicalItemStyle(placement),
+          "--board-item-radius": `var(--mantine-radius-${board.itemRadius})`,
+        } as CSSProperties
+      }
       data-grid-item-id={placement.id}
       data-grid-item-type={placement.type}
       data-grid-x={placement.x}
@@ -930,6 +940,7 @@ const DndGridEntryComponent = ({
       data-grid-h={placement.h}
       data-dnd-drag-source={isDragSource ? "true" : undefined}
       data-dnd-dropping={isDropping ? "true" : undefined}
+      data-board-item-selected={isSelectedEntry ? "true" : undefined}
     >
       <div ref={mountRef} className="board-grid-content-mount" />
       <GridResizeHandles
@@ -1102,19 +1113,27 @@ const GridResizeHandles = ({
     finishResize(event.pointerId, { x: event.clientX, y: event.clientY }, canceled);
   };
 
-  return RESIZE_DIRECTIONS.map((direction) => (
-    <span
-      key={direction}
-      className="board-grid-resize-handle"
-      data-grid-resize-handle={direction}
-      aria-hidden="true"
-      onPointerDown={(event) => handlePointerDown(event, direction)}
-      onPointerMove={handlePointerMove}
-      onPointerUp={(event) => handlePointerEnd(event, false)}
-      onPointerCancel={(event) => handlePointerEnd(event, true)}
-      onLostPointerCapture={(event) => finishResize(event.pointerId, null, true)}
-    />
-  ));
+  return RESIZE_DIRECTIONS.map((direction) => {
+    const isHorizontalSide = direction === "n" || direction === "s";
+    const isVerticalSide = direction === "e" || direction === "w";
+    const GripIcon = isHorizontalSide ? IconGripHorizontal : IconGripVertical;
+
+    return (
+      <span
+        key={direction}
+        className="board-grid-resize-handle"
+        data-grid-resize-handle={direction}
+        aria-hidden="true"
+        onPointerDown={(event) => handlePointerDown(event, direction)}
+        onPointerMove={handlePointerMove}
+        onPointerUp={(event) => handlePointerEnd(event, false)}
+        onPointerCancel={(event) => handlePointerEnd(event, true)}
+        onLostPointerCapture={(event) => finishResize(event.pointerId, null, true)}
+      >
+        <GripIcon size={isHorizontalSide || isVerticalSide ? 13 : 15} stroke={2.25} />
+      </span>
+    );
+  });
 };
 
 const getProjectedDragShape = (
@@ -1239,6 +1258,7 @@ const getPreferredRegisteredGridTarget = (
 
 const preventGridDragActivation = (event: PointerEvent, source: DomDraggable) => {
   if (document.body.hasAttribute("data-board-grid-interacting")) return true;
+  if (event.metaKey || event.ctrlKey) return true;
   const target = event.target;
   const activationElement = source.handle ?? source.element;
   if (!(target instanceof Element) || target === activationElement) return false;

apps/nextjs/src/components/board/sections/grid/test/fixed-grid-item.spec.ts

@@ -10,6 +10,8 @@ import { FixedGridItem } from "../fixed-grid-item";
 const mocks = vi.hoisted(() => ({
   announce: vi.fn(),
   commitSectionGrid: vi.fn(),
+  isSelected: vi.fn(() => false),
+  toggleSelectItem: vi.fn(),
   editMode: true,
   maxRowCount: null as number | null,
   items: [
@@ -44,6 +46,13 @@ vi.mock("@homarr/boards/edit-mode", () => ({
   useEditMode: () => [mocks.editMode],
 }));
 
+vi.mock("~/components/board/selection/board-selection-context", () => ({
+  useBoardSelection: () => ({
+    isSelected: mocks.isSelected,
+    toggleSelectItem: mocks.toggleSelectItem,
+  }),
+}));
+
 vi.mock("@homarr/boards/context", () => ({
   useCurrentLayout: () => "layout",
 }));

apps/nextjs/src/components/board/selection/board-selection-context.tsx

@@ -0,0 +1,270 @@
+"use client";
+
+import type { PropsWithChildren } from "react";
+import { createContext, useCallback, useContext, useEffect, useMemo, useState } from "react";
+import { Button, Group, Text } from "@mantine/core";
+import { notifications } from "@mantine/notifications";
+
+import { useCurrentLayout, useRequiredBoard } from "@homarr/boards/context";
+import { useEditMode } from "@homarr/boards/edit-mode";
+import { usePersistBoard } from "@homarr/boards/updater";
+import { getBoardLaneColumnCount, getRootSectionLane } from "@homarr/definitions";
+import { showErrorNotification, showSuccessNotification } from "@homarr/notifications";
+import { useI18n, useScopedI18n } from "@homarr/translation/client";
+
+import type { ContainerSection, ItemLayout } from "~/app/[locale]/boards/_types";
+import { getFirstEmptyPosition } from "~/components/board/items/actions/empty-position";
+import { playPopSound, playTrashSound } from "../audio/board-sounds";
+
+interface BoardSelectionContextValue {
+  selectedItemIds: Set<string>;
+  toggleSelectItem: (id: string) => void;
+  clearSelection: () => void;
+  isSelected: (id: string) => boolean;
+  removeSelectedItems: () => void;
+  moveSelectedItemsToSection: (sectionId: string) => void;
+}
+
+const BoardSelectionContext = createContext<BoardSelectionContextValue | null>(null);
+
+export const BoardSelectionProvider = ({ children }: PropsWithChildren) => {
+  const [selectedItemIds, setSelectedItemIds] = useState<Set<string>>(new Set());
+  const [isEditMode] = useEditMode();
+  const board = useRequiredBoard();
+  const currentLayoutId = useCurrentLayout();
+  const { updateAndPersistBoard } = usePersistBoard(board);
+  const t = useI18n();
+  const tSelection = useScopedI18n("item.selection");
+
+  const persistBoard = useCallback(
+    (updater: (previous: typeof board) => typeof board) => {
+      updateAndPersistBoard(updater, {
+        onError: () => {
+          showErrorNotification({
+            title: tSelection("saveErrorTitle"),
+            message: tSelection("saveErrorMessage"),
+          });
+        },
+      });
+    },
+    [tSelection, updateAndPersistBoard],
+  );
+
+  // Clear selection if leaving edit mode
+  useEffect(() => {
+    if (!isEditMode) {
+      setSelectedItemIds(new Set());
+    }
+  }, [isEditMode]);
+
+  // Clear selection on Escape key
+  useEffect(() => {
+    if (selectedItemIds.size === 0) return;
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Escape") {
+        setSelectedItemIds(new Set());
+      }
+    };
+
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [selectedItemIds.size]);
+
+  const toggleSelectItem = useCallback((id: string) => {
+    setSelectedItemIds((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) {
+        next.delete(id);
+      } else {
+        next.add(id);
+      }
+      return next;
+    });
+    playPopSound();
+  }, []);
+
+  const clearSelection = useCallback(() => {
+    setSelectedItemIds(new Set());
+  }, []);
+
+  const isSelected = useCallback((id: string) => selectedItemIds.has(id), [selectedItemIds]);
+
+  const removeSelectedItems = useCallback(() => {
+    if (selectedItemIds.size === 0) return;
+
+    const idsToRemove = Array.from(selectedItemIds);
+    const count = idsToRemove.length;
+    const removedItems = board.items.filter((item) => idsToRemove.includes(item.id));
+
+    playTrashSound();
+    clearSelection();
+
+    persistBoard((previous) => ({
+      ...previous,
+      items: previous.items.filter((item) => !idsToRemove.includes(item.id)),
+    }));
+
+    const notificationId = `batch-remove-${Date.now()}`;
+    showSuccessNotification({
+      id: notificationId,
+      title: t("common.success"),
+      message: (
+        <Group justify="space-between" wrap="nowrap">
+          <Text size="sm">{tSelection("removed", { count })}</Text>
+          <Button
+            variant="subtle"
+            size="compact-xs"
+            onClick={() => {
+              persistBoard((previous) => ({
+                ...previous,
+                items: [...previous.items, ...removedItems],
+              }));
+              notifications.hide(notificationId);
+            }}
+          >
+            {t("common.action.undo")}
+          </Button>
+        </Group>
+      ),
+      autoClose: 10_000,
+    });
+  }, [board.items, clearSelection, persistBoard, selectedItemIds, t, tSelection]);
+
+  const moveSelectedItemsToSection = useCallback(
+    (targetSectionId: string) => {
+      if (selectedItemIds.size === 0) return;
+
+      const idsToMove = new Set(selectedItemIds);
+      let didMoveAll = false;
+
+      persistBoard((previous) => {
+        const targetSection = previous.sections.find((section) => section.id === targetSectionId);
+        const boardLayout = previous.layouts.find((layout) => layout.id === currentLayoutId);
+        if (!targetSection || !boardLayout) return previous;
+
+        const containerLayout =
+          targetSection.kind === "container"
+            ? targetSection.layouts.find((layout) => layout.layoutId === currentLayoutId)
+            : undefined;
+        const columnCount =
+          targetSection.kind === "container"
+            ? (containerLayout?.width ?? 0)
+            : getBoardLaneColumnCount(boardLayout, getRootSectionLane(targetSection.xOffset));
+        const rowCount = containerLayout?.height ?? 9999;
+        if (columnCount === 0 || rowCount === 0) return previous;
+
+        const existingContainers = previous.sections
+          .filter((section): section is ContainerSection => section.kind === "container")
+          .flatMap((section) => {
+            const layout = section.layouts.find(
+              (candidate) => candidate.layoutId === currentLayoutId && candidate.parentSectionId === targetSection.id,
+            );
+            return layout
+              ? [
+                  {
+                    id: section.id,
+                    xOffset: layout.xOffset,
+                    yOffset: layout.yOffset,
+                    width: layout.width,
+                    height: layout.height,
+                  },
+                ]
+              : [];
+          });
+        const existingItems = previous.items.flatMap((item) => {
+          const layout = item.layouts.find(
+            (candidate) => candidate.layoutId === currentLayoutId && candidate.sectionId === targetSection.id,
+          );
+          return layout
+            ? [
+                {
+                  id: item.id,
+                  xOffset: layout.xOffset,
+                  yOffset: layout.yOffset,
+                  width: layout.width,
+                  height: layout.height,
+                },
+              ]
+            : [];
+        });
+        const occupiedPositions = [...existingContainers, ...existingItems];
+        const movedLayouts = new Map<string, ItemLayout>();
+
+        for (const item of previous.items.filter((candidate) => idsToMove.has(candidate.id))) {
+          const currentItemLayout = item.layouts.find((layout) => layout.layoutId === currentLayoutId);
+          if (!currentItemLayout) continue;
+
+          const previousPositionIndex = occupiedPositions.findIndex((position) => position.id === item.id);
+          const previousPosition =
+            previousPositionIndex >= 0 ? occupiedPositions.splice(previousPositionIndex, 1).at(0) : undefined;
+          const { width, height } = currentItemLayout;
+          const emptyPosition =
+            width <= columnCount && height <= rowCount
+              ? getFirstEmptyPosition(occupiedPositions, columnCount, rowCount, { width, height })
+              : undefined;
+
+          if (!emptyPosition) {
+            if (previousPosition) occupiedPositions.push(previousPosition);
+            continue;
+          }
+
+          const nextLayout: ItemLayout = {
+            ...currentItemLayout,
+            sectionId: targetSectionId,
+            xOffset: emptyPosition.xOffset,
+            yOffset: emptyPosition.yOffset,
+          };
+          movedLayouts.set(item.id, nextLayout);
+          occupiedPositions.push({ id: item.id, ...emptyPosition, width, height });
+        }
+
+        if (movedLayouts.size !== idsToMove.size) return previous;
+        didMoveAll = true;
+        return {
+          ...previous,
+          items: previous.items.map((item) => {
+            const movedLayout = movedLayouts.get(item.id);
+            if (!movedLayout) return item;
+            return {
+              ...item,
+              layouts: item.layouts.map((layout) => (layout.layoutId === currentLayoutId ? movedLayout : layout)),
+            };
+          }),
+        };
+      });
+
+      if (didMoveAll) {
+        clearSelection();
+      } else {
+        showErrorNotification({
+          title: tSelection("moveUnavailableTitle"),
+          message: tSelection("moveUnavailableMessage"),
+        });
+      }
+    },
+    [clearSelection, currentLayoutId, persistBoard, selectedItemIds, tSelection],
+  );
+
+  const value = useMemo(
+    () => ({
+      selectedItemIds,
+      toggleSelectItem,
+      clearSelection,
+      isSelected,
+      removeSelectedItems,
+      moveSelectedItemsToSection,
+    }),
+    [clearSelection, isSelected, moveSelectedItemsToSection, removeSelectedItems, selectedItemIds, toggleSelectItem],
+  );
+
+  return <BoardSelectionContext.Provider value={value}>{children}</BoardSelectionContext.Provider>;
+};
+
+export const useBoardSelection = () => {
+  const context = useContext(BoardSelectionContext);
+  if (!context) {
+    throw new Error("useBoardSelection must be used within a BoardSelectionProvider");
+  }
+  return context;
+};

apps/nextjs/src/components/board/selection/board-selection-toolbar.tsx

@@ -0,0 +1,255 @@
+"use client";
+
+import {
+  ActionIcon,
+  Avatar,
+  Button,
+  Divider,
+  Group,
+  HoverCard,
+  Menu,
+  Paper,
+  ScrollArea,
+  Stack,
+  Text,
+  Tooltip,
+  UnstyledButton,
+} from "@mantine/core";
+import { IconCheck, IconFolderShare, IconTrash, IconX } from "@tabler/icons-react";
+
+import { clientApi } from "@homarr/api/client";
+import { useCurrentLayout, useRequiredBoard } from "@homarr/boards/context";
+import { useEditMode } from "@homarr/boards/edit-mode";
+import { getBoardLaneColumnCount, getRootSectionLane } from "@homarr/definitions";
+import { useI18n, useScopedI18n } from "@homarr/translation/client";
+import { widgetCatalogIcons } from "@homarr/widgets/catalog";
+
+import type { EmptySection } from "~/app/[locale]/boards/_types";
+import { useBoardSelection } from "./board-selection-context";
+
+const MAX_AVATARS_DISPLAYED = 5;
+
+export const BoardSelectionToolbar = () => {
+  const [isEditMode] = useEditMode();
+  const { selectedItemIds, clearSelection, removeSelectedItems, moveSelectedItemsToSection } = useBoardSelection();
+  const board = useRequiredBoard();
+  const currentLayoutId = useCurrentLayout();
+  const currentLayout = board.layouts.find((layout) => layout.id === currentLayoutId);
+  const t = useI18n();
+  const tSelection = useScopedI18n("item.selection");
+
+  const selectedItems = board.items.filter((item) => selectedItemIds.has(item.id));
+  const hasAppWidgets = selectedItems.some((item) => item.kind === "app");
+  const { data: selectableApps } = clientApi.app.selectable.useQuery(undefined, {
+    enabled: hasAppWidgets,
+  });
+
+  if (!isEditMode || selectedItemIds.size === 0) return null;
+
+  const appMap = new Map((selectableApps ?? []).map((app) => [app.id, app]));
+
+  // Sort items so apps appear first
+  const sortedSelectedItems = selectedItems.toSorted((itemA, itemB) => {
+    if (itemA.kind === "app" && itemB.kind !== "app") return -1;
+    if (itemA.kind !== "app" && itemB.kind === "app") return 1;
+    return 0;
+  });
+
+  const getItemDetails = (item: (typeof selectedItems)[number]) => {
+    let displayName = item.advancedOptions.title?.trim();
+    let iconUrl: string | undefined = undefined;
+    const IconComponent = widgetCatalogIcons[item.kind] ?? IconCheck;
+
+    if (item.kind === "app") {
+      const appId = (item.options as { appId?: string })?.appId;
+      const app = appId ? appMap.get(appId) : undefined;
+      if (!displayName) {
+        displayName = app?.name || t("widget.app.name");
+      }
+      if (app?.iconUrl) {
+        iconUrl = app.iconUrl;
+      }
+    }
+
+    if (!displayName) {
+      displayName = t(`widget.${item.kind}.name`);
+    }
+
+    return { displayName, iconUrl, IconComponent, kind: item.kind };
+  };
+
+  const visibleItems = sortedSelectedItems.slice(0, MAX_AVATARS_DISPLAYED);
+  const overflowCount = sortedSelectedItems.length - visibleItems.length;
+
+  const mainCanvasSection = board.sections
+    .filter(
+      (section): section is EmptySection => section.kind === "empty" && getRootSectionLane(section.xOffset) === "main",
+    )
+    .toSorted((sectionA, sectionB) => sectionA.yOffset - sectionB.yOffset)
+    .at(0);
+
+  const placementOptions = [
+    ...(mainCanvasSection ? [{ value: mainCanvasSection.id, label: t("item.create.destination.mainCanvas") }] : []),
+    ...board.sections.flatMap((section) => {
+      if (section.kind !== "empty") return [];
+      const lane = getRootSectionLane(section.xOffset);
+      if (lane === "main" || !currentLayout || getBoardLaneColumnCount(currentLayout, lane) === 0) return [];
+      return [
+        {
+          value: section.id,
+          label: t(`item.create.destination.${lane === "left" ? "leftRail" : "rightRail"}`),
+        },
+      ];
+    }),
+    ...board.sections
+      .filter((section) => section.kind === "container")
+      .map((section) => ({
+        value: section.id,
+        label: section.options.title.trim() || t("section.container.untitled"),
+      })),
+  ];
+
+  return (
+    <Paper
+      withBorder
+      shadow="xl"
+      radius="xl"
+      p="xs"
+      bg="light-dark(var(--mantine-color-body), var(--mantine-color-dark-7))"
+      style={{
+        position: "fixed",
+        bottom: 28,
+        left: "50%",
+        transform: "translateX(-50%)",
+        zIndex: 1000,
+        width: "max-content",
+        maxWidth: "calc(100vw - 1rem)",
+        boxShadow: "0 12px 40px rgba(0, 0, 0, 0.28)",
+        backdropFilter: "blur(14px)",
+        border: "1px solid var(--mantine-color-default-border)",
+        animation: "slideUp 200ms cubic-bezier(0.4, 0, 0.2, 1) forwards",
+      }}
+    >
+      <Group gap="xs" wrap="nowrap">
+        {/* Avatar Group with HoverCard Popover showing all items */}
+        <HoverCard position="top" withArrow shadow="xl" radius="md" openDelay={100} closeDelay={200} withinPortal>
+          <HoverCard.Target>
+            <UnstyledButton
+              display="inline-flex"
+              aria-label={tSelection("summary", { count: sortedSelectedItems.length })}
+              style={{ alignItems: "center", borderRadius: "var(--mantine-radius-xl)" }}
+            >
+              <Avatar.Group>
+                {visibleItems.map((item) => {
+                  const { displayName, iconUrl, IconComponent } = getItemDetails(item);
+                  return (
+                    <Avatar
+                      key={item.id}
+                      src={iconUrl}
+                      radius="xl"
+                      size={32}
+                      color="primaryColor"
+                      variant="light"
+                      styles={{ image: { objectFit: "contain", padding: 2 } }}
+                      alt={displayName}
+                    >
+                      {!iconUrl && <IconComponent size={16} />}
+                    </Avatar>
+                  );
+                })}
+                {overflowCount > 0 && (
+                  <Avatar radius="xl" size={32} color="gray" variant="filled">
+                    +{overflowCount}
+                  </Avatar>
+                )}
+              </Avatar.Group>
+            </UnstyledButton>
+          </HoverCard.Target>
+
+          <HoverCard.Dropdown p={6} style={{ width: 220 }}>
+            <Stack gap={4}>
+              <Text size="10px" fw={700} c="dimmed" tt="uppercase" px={4}>
+                {tSelection("selected", { count: sortedSelectedItems.length })}
+              </Text>
+
+              <ScrollArea.Autosize mah={176} type="auto">
+                <Stack gap={2}>
+                  {sortedSelectedItems.map((item) => {
+                    const { displayName, iconUrl, IconComponent } = getItemDetails(item);
+                    return (
+                      <Group key={item.id} gap={6} wrap="nowrap" px={4} py={2}>
+                        <Avatar
+                          src={iconUrl}
+                          radius="sm"
+                          size={22}
+                          color="primaryColor"
+                          variant="light"
+                          styles={{ image: { objectFit: "contain", padding: 2 } }}
+                          alt={displayName}
+                        >
+                          {!iconUrl && <IconComponent size={12} />}
+                        </Avatar>
+                        <Text size="xs" fw={500} truncate>
+                          {displayName}
+                        </Text>
+                      </Group>
+                    );
+                  })}
+                </Stack>
+              </ScrollArea.Autosize>
+            </Stack>
+          </HoverCard.Dropdown>
+        </HoverCard>
+
+        <Text size="xs" c="dimmed" visibleFrom="sm" maw={220} lh={1.25}>
+          {t("app.action.select.multiSelectTip")}
+        </Text>
+
+        <Divider orientation="vertical" />
+
+        {/* Actions */}
+        <Group gap="xs" wrap="nowrap" style={{ flexShrink: 0 }}>
+          {placementOptions.length > 1 && (
+            <Menu position="top" withArrow shadow="md">
+              <Menu.Target>
+                <Button size="xs" variant="light" color="primaryColor" leftSection={<IconFolderShare size={15} />}>
+                  {tSelection("move")}
+                </Button>
+              </Menu.Target>
+              <Menu.Dropdown>
+                <Menu.Label>{tSelection("moveTo")}</Menu.Label>
+                {placementOptions.map((opt) => (
+                  <Menu.Item key={opt.value} onClick={() => moveSelectedItemsToSection(opt.value)}>
+                    {opt.label}
+                  </Menu.Item>
+                ))}
+              </Menu.Dropdown>
+            </Menu>
+          )}
+
+          <Button
+            size="xs"
+            variant="light"
+            color="red"
+            leftSection={<IconTrash size={15} />}
+            onClick={removeSelectedItems}
+          >
+            {tSelection("delete")}
+          </Button>
+
+          <Tooltip label={tSelection("clearShortcut")} withArrow>
+            <ActionIcon
+              size="sm"
+              variant="subtle"
+              color="gray"
+              onClick={clearSelection}
+              aria-label={tSelection("clear")}
+            >
+              <IconX size={14} />
+            </ActionIcon>
+          </Tooltip>
+        </Group>
+      </Group>
+    </Paper>
+  );
+};

apps/nextjs/src/components/board/selection/board-selection.spec.tsx

@@ -0,0 +1,251 @@
+// @vitest-environment jsdom
+
+import { act } from "react";
+import { createRoot } from "react-dom/client";
+import type { Root } from "react-dom/client";
+import { MantineProvider } from "@mantine/core";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+import type { Board } from "~/app/[locale]/boards/_types";
+import { BoardMockBuilder } from "~/components/board/items/actions/test/mocks/board-mock";
+import { ContainerSectionMockBuilder } from "~/components/board/items/actions/test/mocks/container-section-mock";
+import { EmptySectionMockBuilder } from "~/components/board/items/actions/test/mocks/empty-section-mock";
+import { ItemMockBuilder } from "~/components/board/items/actions/test/mocks/item-mock";
+import { LayoutMockBuilder } from "~/components/board/items/actions/test/mocks/layout-mock";
+import { BoardSelectionProvider, useBoardSelection } from "./board-selection-context";
+
+vi.mock("@homarr/translation/client", () => ({
+  useI18n: () => (key: string) => key,
+  useScopedI18n: () => (key: string) => key,
+}));
+
+vi.mock("../audio/board-sounds", () => ({
+  playPopSound: vi.fn(),
+  playTrashSound: vi.fn(),
+}));
+
+let currentBoardState: Board;
+let mockUpdateBoard: (updater: (prev: Board) => Board) => void;
+
+vi.mock("@homarr/boards/context", () => ({
+  useRequiredBoard: () => currentBoardState,
+  useCurrentLayout: () => "layout-1",
+}));
+
+vi.mock("@homarr/boards/edit-mode", () => ({
+  useEditMode: () => [true, vi.fn()],
+}));
+
+vi.mock("@homarr/boards/updater", () => ({
+  usePersistBoard: () => ({
+    updateAndPersistBoard: (updater: (prev: Board) => Board) => {
+      mockUpdateBoard(updater);
+    },
+  }),
+}));
+
+let root: Root;
+let host: HTMLDivElement;
+
+beforeEach(() => {
+  (globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+  window.matchMedia = vi.fn().mockImplementation(() => ({
+    matches: false,
+    media: "",
+    onchange: null,
+    addListener: vi.fn(),
+    removeListener: vi.fn(),
+    addEventListener: vi.fn(),
+    removeEventListener: vi.fn(),
+    dispatchEvent: vi.fn(),
+  }));
+  host = document.createElement("div");
+  document.body.appendChild(host);
+  root = createRoot(host);
+});
+
+afterEach(() => {
+  act(() => {
+    root.unmount();
+  });
+  host.remove();
+});
+
+const SelectionConsumer = ({ onReady }: { onReady: (ctx: ReturnType<typeof useBoardSelection>) => void }) => {
+  const selection = useBoardSelection();
+  onReady(selection);
+  return <div>Selection Ready</div>;
+};
+
+describe("BoardSelectionContext", () => {
+  it("toggles item selection and clears on clearSelection", async () => {
+    const layout = new LayoutMockBuilder({ id: "layout-1" }).build();
+    const item1 = new ItemMockBuilder({ id: "item-1" }).addLayout({ layoutId: "layout-1" }).build();
+    currentBoardState = new BoardMockBuilder().addLayout(layout).addItem(item1).build();
+    mockUpdateBoard = vi.fn();
+
+    let selectionContext!: ReturnType<typeof useBoardSelection>;
+
+    await act(async () => {
+      root.render(
+        <MantineProvider>
+          <BoardSelectionProvider>
+            <SelectionConsumer
+              onReady={(ctx) => {
+                selectionContext = ctx;
+              }}
+            />
+          </BoardSelectionProvider>
+        </MantineProvider>,
+      );
+    });
+
+    expect(selectionContext.isSelected("item-1")).toBe(false);
+
+    await act(async () => {
+      selectionContext.toggleSelectItem("item-1");
+    });
+    expect(selectionContext.isSelected("item-1")).toBe(true);
+
+    await act(async () => {
+      selectionContext.clearSelection();
+    });
+    expect(selectionContext.isSelected("item-1")).toBe(false);
+  });
+
+  it("moves selected items to the first available positions in a container section", async () => {
+    const layout = new LayoutMockBuilder({ id: "layout-1" }).build();
+    const emptyRoot = new EmptySectionMockBuilder({ id: "empty-root", xOffset: 0 }).build();
+    const container = new ContainerSectionMockBuilder({ id: "container-1" })
+      .addLayout({ layoutId: "layout-1", parentSectionId: "empty-root", width: 4, height: 4 })
+      .build();
+
+    // Existing item inside the container at (0, 0) with 2x2
+    const existingContainerItem = new ItemMockBuilder({ id: "existing-1" })
+      .addLayout({ layoutId: "layout-1", sectionId: "container-1", xOffset: 0, yOffset: 0, width: 2, height: 2 })
+      .build();
+
+    // Two items to move from emptyRoot
+    const itemA = new ItemMockBuilder({ id: "item-a" })
+      .addLayout({ layoutId: "layout-1", sectionId: "empty-root", xOffset: 5, yOffset: 5, width: 2, height: 1 })
+      .build();
+    const itemB = new ItemMockBuilder({ id: "item-b" })
+      .addLayout({ layoutId: "layout-1", sectionId: "empty-root", xOffset: 8, yOffset: 8, width: 2, height: 1 })
+      .build();
+
+    currentBoardState = new BoardMockBuilder()
+      .addLayout(layout)
+      .addSection(emptyRoot)
+      .addSection(container)
+      .addItem(existingContainerItem)
+      .addItem(itemA)
+      .addItem(itemB)
+      .build();
+
+    let updatedBoard: Board = currentBoardState;
+    mockUpdateBoard = vi.fn((updater) => {
+      updatedBoard = updater(currentBoardState);
+      currentBoardState = updatedBoard;
+    });
+
+    let selectionContext!: ReturnType<typeof useBoardSelection>;
+
+    await act(async () => {
+      root.render(
+        <MantineProvider>
+          <BoardSelectionProvider>
+            <SelectionConsumer
+              onReady={(ctx) => {
+                selectionContext = ctx;
+              }}
+            />
+          </BoardSelectionProvider>
+        </MantineProvider>,
+      );
+    });
+
+    await act(async () => {
+      selectionContext.toggleSelectItem("item-a");
+      selectionContext.toggleSelectItem("item-b");
+    });
+
+    await act(async () => {
+      selectionContext.moveSelectedItemsToSection("container-1");
+    });
+
+    const movedA = updatedBoard.items.find((i) => i.id === "item-a")?.layouts.find((l) => l.layoutId === "layout-1");
+    const movedB = updatedBoard.items.find((i) => i.id === "item-b")?.layouts.find((l) => l.layoutId === "layout-1");
+
+    expect(movedA?.sectionId).toBe("container-1");
+    expect(movedB?.sectionId).toBe("container-1");
+
+    // Container width is 4. Existing item at (0, 0) occupies (0,0)-(1,1).
+    // itemA (2x1) is placed at first empty spot: (2, 0)
+    expect(movedA?.xOffset).toBe(2);
+    expect(movedA?.yOffset).toBe(0);
+
+    // itemB (2x1) is placed at next first empty spot: (2, 1)
+    expect(movedB?.xOffset).toBe(2);
+    expect(movedB?.yOffset).toBe(1);
+  });
+
+  it("keeps the entire selection in place when the destination cannot fit every item", async () => {
+    const layout = new LayoutMockBuilder({ id: "layout-1" }).build();
+    const emptyRoot = new EmptySectionMockBuilder({ id: "empty-root", xOffset: 0 }).build();
+    const container = new ContainerSectionMockBuilder({ id: "container-1" })
+      .addLayout({ layoutId: "layout-1", parentSectionId: "empty-root", width: 2, height: 1 })
+      .build();
+    const existingContainerItem = new ItemMockBuilder({ id: "existing-1" })
+      .addLayout({ layoutId: "layout-1", sectionId: "container-1", xOffset: 0, yOffset: 0, width: 1, height: 1 })
+      .build();
+    const itemA = new ItemMockBuilder({ id: "item-a" })
+      .addLayout({ layoutId: "layout-1", sectionId: "empty-root", xOffset: 0, yOffset: 0, width: 1, height: 1 })
+      .build();
+    const itemB = new ItemMockBuilder({ id: "item-b" })
+      .addLayout({ layoutId: "layout-1", sectionId: "empty-root", xOffset: 1, yOffset: 0, width: 1, height: 1 })
+      .build();
+
+    currentBoardState = new BoardMockBuilder()
+      .addLayout(layout)
+      .addSection(emptyRoot)
+      .addSection(container)
+      .addItem(existingContainerItem)
+      .addItem(itemA)
+      .addItem(itemB)
+      .build();
+
+    let updatedBoard = currentBoardState;
+    mockUpdateBoard = vi.fn((updater) => {
+      updatedBoard = updater(currentBoardState);
+      currentBoardState = updatedBoard;
+    });
+
+    let selectionContext!: ReturnType<typeof useBoardSelection>;
+    await act(async () => {
+      root.render(
+        <MantineProvider>
+          <BoardSelectionProvider>
+            <SelectionConsumer
+              onReady={(ctx) => {
+                selectionContext = ctx;
+              }}
+            />
+          </BoardSelectionProvider>
+        </MantineProvider>,
+      );
+    });
+
+    await act(async () => {
+      selectionContext.toggleSelectItem("item-a");
+      selectionContext.toggleSelectItem("item-b");
+    });
+    await act(async () => {
+      selectionContext.moveSelectedItemsToSection("container-1");
+    });
+
+    expect(updatedBoard.items.find((item) => item.id === "item-a")?.layouts[0]?.sectionId).toBe("empty-root");
+    expect(updatedBoard.items.find((item) => item.id === "item-b")?.layouts[0]?.sectionId).toBe("empty-root");
+    expect(selectionContext.isSelected("item-a")).toBe(true);
+    expect(selectionContext.isSelected("item-b")).toBe(true);
+  });
+});

apps/nextjs/src/components/create/setup-analytics.ts

@@ -37,7 +37,7 @@ export const useSetupAnalytics = () => {
     onError() {
       showErrorNotification({
         title: t("common.error"),
-        message: t("universalCreate.analyticsError"),
+        message: t("common.analyticsError"),
       });
     },
   });

apps/nextjs/src/components/create/universal-create-actions.spec.ts

@@ -1,77 +0,0 @@
-import { describe, expect, test } from "vitest";
-
-import type { RankedUniversalCreateAction } from "./universal-create-actions";
-import { filterAndRankUniversalCreateActions, getUniversalCreateActionDefinitions } from "./universal-create-actions";
-
-describe("getUniversalCreateActionDefinitions", () => {
-  test("only exposes actions allowed without a board context", () => {
-    const actions = getUniversalCreateActionDefinitions({
-      hasBoardContext: false,
-      permissions: ["board-create", "integration-create"],
-    });
-
-    expect(actions.map(({ key }) => key)).toEqual(["integration", "board"]);
-  });
-
-  test("places globally-created apps in the library group", () => {
-    const actions = getUniversalCreateActionDefinitions({ hasBoardContext: false, permissions: ["app-create"] });
-
-    expect(actions).toEqual([expect.objectContaining({ key: "app", group: "library" })]);
-  });
-
-  test("keeps board content actions available without global create permissions", () => {
-    const actions = getUniversalCreateActionDefinitions({ hasBoardContext: true, permissions: [] });
-
-    expect(actions.map(({ key }) => key)).toEqual(["widget", "app", "container"]);
-  });
-
-  test("exposes the complete surface to administrators on a board", () => {
-    const actions = getUniversalCreateActionDefinitions({
-      hasBoardContext: true,
-      permissions: ["admin", "app-create", "integration-create", "board-create"],
-    });
-
-    expect(actions.map(({ key }) => key)).toEqual([
-      "widget",
-      "app",
-      "integration",
-      "container",
-      "board",
-      "workshop",
-      "customWidget",
-    ]);
-  });
-});
-
-describe("filterAndRankUniversalCreateActions", () => {
-  const actions = [
-    { key: "widget", group: "currentBoard", priority: 100, name: "Add widget", description: "Add content" },
-    {
-      key: "integration",
-      group: "library",
-      priority: 80,
-      name: "Connect service",
-      description: "Create an integration",
-      keywords: ["provider"],
-    },
-    { key: "board", group: "boards", priority: 60, name: "Create board", description: "Start a dashboard" },
-  ] satisfies RankedUniversalCreateAction[];
-
-  test("uses product priority when no search is entered", () => {
-    expect(filterAndRankUniversalCreateActions(actions, "").map(({ key }) => key)).toEqual([
-      "widget",
-      "integration",
-      "board",
-    ]);
-  });
-
-  test("ranks a name prefix ahead of a description or keyword match", () => {
-    const results = filterAndRankUniversalCreateActions(actions, "create");
-
-    expect(results.map(({ key }) => key)).toEqual(["board", "integration"]);
-  });
-
-  test("matches keywords and removes unrelated actions", () => {
-    expect(filterAndRankUniversalCreateActions(actions, "provider").map(({ key }) => key)).toEqual(["integration"]);
-  });
-});

apps/nextjs/src/components/create/universal-create-actions.ts

@@ -1,120 +0,0 @@
-import type { GroupPermissionKey } from "@homarr/definitions";
-
-export const universalCreateActionKeys = [
-  "widget",
-  "app",
-  "integration",
-  "container",
-  "board",
-  "workshop",
-  "customWidget",
-] as const;
-
-export type UniversalCreateActionKey = (typeof universalCreateActionKeys)[number];
-export type UniversalCreateActionGroup = "currentBoard" | "library" | "boards";
-
-export interface UniversalCreateContext {
-  hasBoardContext: boolean;
-  permissions: readonly GroupPermissionKey[];
-}
-
-interface UniversalCreateActionDefinition {
-  key: UniversalCreateActionKey;
-  group: UniversalCreateActionGroup;
-  priority: number;
-  isVisible: (context: UniversalCreateContext) => boolean;
-}
-
-const hasPermission = (context: UniversalCreateContext, permission: GroupPermissionKey) =>
-  context.permissions.includes(permission);
-
-const definitions: readonly UniversalCreateActionDefinition[] = [
-  {
-    key: "widget",
-    group: "currentBoard",
-    priority: 100,
-    isVisible: ({ hasBoardContext }) => hasBoardContext,
-  },
-  {
-    key: "app",
-    group: "currentBoard",
-    priority: 90,
-    isVisible: (context) => context.hasBoardContext || hasPermission(context, "app-create"),
-  },
-  {
-    key: "integration",
-    group: "library",
-    priority: 80,
-    isVisible: (context) => hasPermission(context, "integration-create"),
-  },
-  {
-    key: "container",
-    group: "currentBoard",
-    priority: 70,
-    isVisible: ({ hasBoardContext }) => hasBoardContext,
-  },
-  {
-    key: "board",
-    group: "boards",
-    priority: 60,
-    isVisible: (context) => hasPermission(context, "board-create"),
-  },
-  {
-    key: "workshop",
-    group: "library",
-    priority: 40,
-    isVisible: (context) => hasPermission(context, "admin"),
-  },
-  {
-    key: "customWidget",
-    group: "library",
-    priority: 30,
-    isVisible: (context) => hasPermission(context, "admin"),
-  },
-];
-
-export interface RankedUniversalCreateAction {
-  key: UniversalCreateActionKey;
-  group: UniversalCreateActionGroup;
-  priority: number;
-  name: string;
-  description: string;
-  keywords?: readonly string[];
-}
-
-export const getUniversalCreateActionDefinitions = (context: UniversalCreateContext) =>
-  definitions
-    .filter((definition) => definition.isVisible(context))
-    .map((definition) =>
-      definition.key === "app" && !context.hasBoardContext ? { ...definition, group: "library" as const } : definition,
-    );
-
-const normalize = (value: string) => value.trim().toLocaleLowerCase();
-
-export const filterAndRankUniversalCreateActions = <TAction extends RankedUniversalCreateAction>(
-  actions: readonly TAction[],
-  query: string,
-) => {
-  const normalizedQuery = normalize(query);
-
-  return actions
-    .map((action) => {
-      const name = normalize(action.name);
-      const searchableText = normalize([action.name, action.description, ...(action.keywords ?? [])].join(" "));
-      const relevance =
-        normalizedQuery.length === 0
-          ? 0
-          : name === normalizedQuery
-            ? 300
-            : name.startsWith(normalizedQuery)
-              ? 200
-              : searchableText.includes(normalizedQuery)
-                ? 100
-                : -1;
-
-      return { action, relevance };
-    })
-    .filter(({ relevance }) => relevance >= 0)
-    .toSorted((left, right) => right.relevance - left.relevance || right.action.priority - left.action.priority)
-    .map(({ action }) => action);
-};

apps/nextjs/src/components/create/universal-create-modal.module.css

@@ -1,21 +0,0 @@
-.action {
-  width: 100%;
-  border-radius: var(--mantine-radius-md);
-  padding: var(--mantine-spacing-sm);
-  text-align: start;
-}
-
-@media (hover: hover) {
-  .action:hover {
-    background: var(--mantine-color-default-hover);
-  }
-}
-
-.action:focus-visible {
-  outline: 2px solid var(--mantine-primary-color-filled);
-  outline-offset: 2px;
-}
-
-.actionIcon {
-  flex: 0 0 auto;
-}

apps/nextjs/src/components/create/universal-create-modal.module.d.css.ts

@@ -1,5 +0,0 @@
-declare const classes: {
-  readonly action: string;
-  readonly actionIcon: string;
-};
-export default classes;

apps/nextjs/src/components/create/universal-create-modal.tsx

@@ -1,162 +0,0 @@
-"use client";
-
-import { useEffect, useRef } from "react";
-import { useRouter } from "next/navigation";
-import { Group, Stack, Text, ThemeIcon, UnstyledButton } from "@mantine/core";
-import {
-  IconApps,
-  IconBox,
-  IconCode,
-  IconLayoutDashboard,
-  IconLayoutGridAdd,
-  IconPlugConnected,
-  IconSearch,
-} from "@tabler/icons-react";
-
-import { useSession } from "@homarr/auth/client";
-import type { GroupPermissionKey } from "@homarr/definitions";
-import { createModal, useModalAction } from "@homarr/modals";
-import { AddBoardModal } from "@homarr/modals-collection";
-import { useScopedI18n } from "@homarr/translation/client";
-import type { TablerIcon } from "@homarr/ui";
-
-import classes from "./universal-create-modal.module.css";
-import type {
-  RankedUniversalCreateAction,
-  UniversalCreateActionGroup,
-  UniversalCreateActionKey,
-} from "./universal-create-actions";
-import { getUniversalCreateActionDefinitions } from "./universal-create-actions";
-import type { SetupMetricEntryPoint } from "./setup-analytics";
-import { useSetupAnalytics } from "./setup-analytics";
-
-type BoardActionKey = "widget" | "app" | "integration" | "container";
-
-export interface UniversalCreateModalProps {
-  boardActions?: Partial<Record<BoardActionKey, () => void>>;
-  entryPoint?: SetupMetricEntryPoint;
-}
-
-const actionIcons = {
-  widget: IconApps,
-  app: IconBox,
-  integration: IconPlugConnected,
-  container: IconLayoutGridAdd,
-  board: IconLayoutDashboard,
-  workshop: IconSearch,
-  customWidget: IconCode,
-} satisfies Record<UniversalCreateActionKey, TablerIcon>;
-
-export const UniversalCreateModal = createModal<UniversalCreateModalProps>(({ actions, innerProps }) => {
-  const { data: session } = useSession();
-  const router = useRouter();
-  const t = useScopedI18n("universalCreate");
-  const { openModal: openAddBoardModal } = useModalAction(AddBoardModal);
-  const trackedOpen = useRef(false);
-  const boardActions = innerProps.boardActions;
-  const entryPoint = innerProps.entryPoint ?? (boardActions ? "board" : "header");
-  const trackSetup = useSetupAnalytics();
-  const permissions = (session?.user.permissions ?? []) as GroupPermissionKey[];
-  const definitions = getUniversalCreateActionDefinitions({
-    hasBoardContext: boardActions !== undefined,
-    permissions,
-  });
-
-  useEffect(() => {
-    if (trackedOpen.current) return;
-    trackedOpen.current = true;
-    trackSetup("surface-opened", {
-      entryPoint,
-      hasBoardContext: boardActions !== undefined,
-    });
-  }, [boardActions, entryPoint, trackSetup]);
-
-  const invokeAction = (key: UniversalCreateActionKey) => {
-    const boardAction = key in (boardActions ?? {}) ? boardActions?.[key as BoardActionKey] : undefined;
-    actions.closeModal();
-    trackSetup("intent-selected", {
-      entryPoint,
-      intent: key,
-      outcome: "continued",
-      hasBoardContext: boardActions !== undefined,
-    });
-
-    if (boardAction) {
-      boardAction();
-      return;
-    }
-
-    switch (key) {
-      case "app":
-        router.push("/manage/apps/new");
-        break;
-      case "integration":
-        router.push("/manage/integrations/new");
-        break;
-      case "board":
-        openAddBoardModal(undefined);
-        break;
-      case "workshop":
-        router.push("/manage/workshop");
-        break;
-      case "customWidget":
-        router.push("/manage/custom-widgets/new");
-        break;
-      case "widget":
-      case "container":
-        break;
-    }
-  };
-
-  const resolvedActions = definitions.map(
-    (definition) =>
-      ({
-        ...definition,
-        name: t(`action.${definition.key}.label`),
-        description: t(`action.${definition.key}.description`),
-        keywords: t(`action.${definition.key}.keywords`).split(" "),
-      }) satisfies RankedUniversalCreateAction,
-  );
-  const orderedActions = resolvedActions.toSorted((left, right) => right.priority - left.priority);
-  const groups = ["currentBoard", "library", "boards"] satisfies UniversalCreateActionGroup[];
-
-  return (
-    <Stack gap="md">
-      {groups.map((group) => {
-        const groupActions = orderedActions.filter((action) => action.group === group);
-        if (groupActions.length === 0) return null;
-
-        return (
-          <Stack key={group} gap={4}>
-            <Text c="dimmed" fw={600} size="xs" tt="uppercase" px="sm">
-              {t(`group.${group}`)}
-            </Text>
-            {groupActions.map((action) => {
-              const Icon = actionIcons[action.key];
-              return (
-                <UnstyledButton key={action.key} className={classes.action} onClick={() => invokeAction(action.key)}>
-                  <Group wrap="nowrap" align="flex-start">
-                    <ThemeIcon className={classes.actionIcon} variant="light" radius="md">
-                      <Icon size={18} stroke={1.5} />
-                    </ThemeIcon>
-                    <Stack gap={1}>
-                      <Text fw={600} size="sm">
-                        {action.name}
-                      </Text>
-                      <Text c="dimmed" size="xs">
-                        {action.description}
-                      </Text>
-                    </Stack>
-                  </Group>
-                </UnstyledButton>
-              );
-            })}
-          </Stack>
-        );
-      })}
-    </Stack>
-  );
-}).withOptions({
-  defaultTitle: (t) => t("universalCreate.title"),
-  size: "lg",
-});

apps/nextjs/src/components/create/universal-create-spotlight.tsx

@@ -1,35 +0,0 @@
-"use client";
-
-import { useMemo } from "react";
-import { IconPlus } from "@tabler/icons-react";
-
-import { useModalAction } from "@homarr/modals";
-import { useRegisterSpotlightContextResults } from "@homarr/spotlight";
-import { useScopedI18n } from "@homarr/translation/client";
-
-import { UniversalCreateModal } from "./universal-create-modal";
-
-/** Keeps Universal Create available from ordinary Spotlight search, without requiring command mode. */
-export const UniversalCreateSpotlightResult = () => {
-  const t = useScopedI18n("universalCreate");
-  const { openModal } = useModalAction(UniversalCreateModal);
-  const item = useMemo(
-    () => ({
-      id: "universal-create",
-      name: t("title"),
-      description: t("trigger.description"),
-      icon: IconPlus,
-      alwaysVisible: true,
-      interaction: () => ({
-        type: "javaScript" as const,
-        onSelect: () => {
-          openModal({ entryPoint: "spotlight" });
-        },
-      }),
-    }),
-    [openModal, t],
-  );
-
-  useRegisterSpotlightContextResults("universal-create", [item], [item]);
-  return null;
-};

apps/nextjs/src/components/create/universal-create-trigger.tsx

@@ -1,49 +0,0 @@
-"use client";
-
-import { useEffect, useRef } from "react";
-import { usePathname, useRouter, useSearchParams } from "next/navigation";
-import { IconPlus } from "@tabler/icons-react";
-
-import { useModalAction } from "@homarr/modals";
-import { useScopedI18n } from "@homarr/translation/client";
-
-import { HeaderButton } from "~/components/layout/header/button";
-import { UniversalCreateModal } from "./universal-create-modal";
-
-export const UniversalCreateHeaderAction = () => {
-  const t = useScopedI18n("universalCreate");
-  const { openModal } = useModalAction(UniversalCreateModal);
-
-  return (
-    <HeaderButton onClick={() => openModal({ entryPoint: "header" })} aria-label={t("trigger.label")}>
-      <IconPlus stroke={1.5} />
-    </HeaderButton>
-  );
-};
-
-export const UniversalCreateQueryGate = () => {
-  const pathname = usePathname();
-  const router = useRouter();
-  const searchParams = useSearchParams();
-  const { openModal } = useModalAction(UniversalCreateModal);
-  const handled = useRef(false);
-  const shouldOpen = searchParams.get("create") === "true";
-
-  useEffect(() => {
-    if (!shouldOpen) {
-      handled.current = false;
-      return;
-    }
-    if (handled.current) return;
-
-    handled.current = true;
-    openModal({ entryPoint: "spotlight" });
-
-    const nextSearchParams = new URLSearchParams(searchParams.toString());
-    nextSearchParams.delete("create");
-    const query = nextSearchParams.toString();
-    router.replace(query ? `${pathname}?${query}` : pathname, { scroll: false });
-  }, [openModal, pathname, router, searchParams, shouldOpen]);
-
-  return null;
-};

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

@@ -1,9 +1,10 @@
 "use client";
 
-import { useState } from "react";
-import { Group, ScrollArea, Title, UnstyledButton } from "@mantine/core";
+import { useEffect, useState } from "react";
+import { Alert, Button, Group, ScrollArea, Stack, Text, Title, UnstyledButton } from "@mantine/core";
 import { IconArrowLeft, IconX } from "@tabler/icons-react";
 
+import { clientApi } from "@homarr/api/client";
 import type { IntegrationKind } from "@homarr/definitions";
 import { getIntegrationName } from "@homarr/definitions";
 import { createModal, modalSizeSelect, useModalAction } from "@homarr/modals";
@@ -27,9 +28,28 @@ interface IntegrationSelectModalProps {
 
 export const IntegrationSelectModal = createModal<IntegrationSelectModalProps>(({ actions, innerProps }) => {
   const t = useI18n();
-  const [step, setStep] = useState<"select" | "form">(innerProps.initialKind ? "form" : "select");
-  const [selectedKind, setSelectedKind] = useState<IntegrationKind | null>(innerProps.initialKind ?? null);
+  const directKind =
+    innerProps.initialKind ?? (innerProps.allowedKinds?.length === 1 ? innerProps.allowedKinds[0] : null);
+  const isDirectForm = Boolean(directKind);
+  const [step, setStep] = useState<"select" | "form">(isDirectForm ? "form" : "select");
+  const [selectedKind, setSelectedKind] = useState<IntegrationKind | null>(directKind ?? null);
   const { openModal: openCompletionModal } = useModalAction(IntegrationCompletionModal);
+  const { data: integrationData, isError: isIntegrationDataError, refetch } = clientApi.integration.all.useQuery();
+
+  useEffect(() => {
+    if (step === "form" && !isDirectForm) {
+      actions.setCloseInterceptor?.(() => {
+        setStep("select");
+        setSelectedKind(null);
+        return false;
+      });
+    } else {
+      actions.setCloseInterceptor?.(null);
+    }
+    return () => {
+      actions.setCloseInterceptor?.(null);
+    };
+  }, [step, isDirectForm, actions]);
 
   const handleSelect = (kind: IntegrationKind) => {
     setSelectedKind(kind);
@@ -40,7 +60,7 @@ export const IntegrationSelectModal = createModal<IntegrationSelectModalProps>((
     setStep("select");
     setSelectedKind(null);
   };
-  const handleFormBack = innerProps.initialKind ? actions.closeModal : handleBack;
+  const handleFormBack = isDirectForm ? actions.closeModal : handleBack;
 
   const handleSuccess = (result?: CreatedIntegrationResult) => {
     actions.closeModal();
@@ -52,12 +72,8 @@ export const IntegrationSelectModal = createModal<IntegrationSelectModalProps>((
   };
 
   if (step === "form" && selectedKind) {
-    let HeaderIcon = IconArrowLeft;
-    let headerLabel = t("common.action.previous");
-    if (innerProps.initialKind) {
-      HeaderIcon = IconX;
-      headerLabel = t("common.action.close");
-    }
+    const HeaderIcon = isDirectForm ? IconX : IconArrowLeft;
+    const headerLabel = isDirectForm ? t("common.action.close") : t("common.action.previous");
 
     return (
       <ScrollArea.Autosize mah="80vh">
@@ -79,11 +95,25 @@ export const IntegrationSelectModal = createModal<IntegrationSelectModalProps>((
     );
   }
 
+  if (isIntegrationDataError) {
+    return (
+      <Alert color="red" title={t("common.error")}>
+        <Stack gap="sm">
+          <Text size="sm">{t("integration.grid.loadError")}</Text>
+          <Button variant="light" color="red" onClick={() => void refetch()}>
+            {t("common.action.tryAgain")}
+          </Button>
+        </Stack>
+      </Alert>
+    );
+  }
+
   return (
     <IntegrationSelectGrid
       onSelect={handleSelect}
       enableMockIntegration={innerProps.enableMockIntegration}
       allowedKinds={innerProps.allowedKinds}
+      integrationData={integrationData}
     />
   );
 }).withOptions({

apps/nextjs/src/components/layout/header.tsx

@@ -3,8 +3,6 @@ import { AppShellHeader, Group, UnstyledButton } from "@mantine/core";
 
 import { Link } from "@homarr/ui";
 
-import { UniversalCreateHeaderAction, UniversalCreateQueryGate } from "~/components/create/universal-create-trigger";
-import { UniversalCreateSpotlightResult } from "~/components/create/universal-create-spotlight";
 import { ClientBurger } from "./header/burger";
 import { DesktopSearchInput, MobileSearchButton } from "./header/search";
 import { TourTarget } from "./header/tour-target";
@@ -38,7 +36,6 @@ export const MainHeader = ({ logo, actions, hasNavigation = true }: Props) => {
           <DesktopSearchInput />
         </TourTarget>
         <Group h="100%" align="center" justify="end" style={{ flex: 1 }} wrap="nowrap">
-          {hasNavigation && <UniversalCreateHeaderAction />}
           {actions}
           <MobileSearchButton />
           <TourTarget id="board-user-menu">
@@ -46,8 +43,6 @@ export const MainHeader = ({ logo, actions, hasNavigation = true }: Props) => {
           </TourTarget>
         </Group>
       </Group>
-      <UniversalCreateQueryGate />
-      <UniversalCreateSpotlightResult />
       <LazySpotlight />
     </AppShellHeader>
   );