feat(board): implement advanced add app modal with live preview and remove today widget

apps/docs/docs/widgets/today/index.mdx

@@ -1,34 +0,0 @@
----
-title: "Today"
-description: "Displays the current date and progress through the calendar."
-hide_title: true
----
-
-import { WidgetInteractionGuide } from "@site/src/components/widgets/interactions";
-
-import { AddingWidget } from "@site/src/components/widgets/adding";
-import { WidgetConfig } from "@site/src/components/widgets/configuration";
-import { WidgetHeader } from "@site/src/components/widgets/header";
-import { todayWidget } from ".";
-
-<WidgetHeader widget={todayWidget} categories={["Date", "Time"]} />
-
-The Today widget presents the current local date without duplicating a live clock. It progressively adds the week
-number, day of year, quarter, remaining days, and calendar progress as more space becomes available.
-
-The advanced view shows week, month, and year progress together with a twelve-month overview. Week numbers can follow
-your locale or the ISO 8601 convention. “Days after today” excludes the current day to keep the remaining-day count
-unambiguous.
-
-The widget runs entirely in your browser and does not send date or location data to an external service. It follows
-the timezone and locale of the device viewing the board, so viewers in different regions can see their own local date.
-
-<WidgetInteractionGuide />
-
-### Adding the widget
-
-<AddingWidget />
-
-### Configuration
-
-<WidgetConfig configuration={todayWidget.configuration} />

apps/docs/docs/widgets/today/index.ts

@@ -1,43 +0,0 @@
-import type { WidgetDefinition } from "@site/src/types";
-import { IconCalendarWeek } from "@tabler/icons-react";
-
-export const todayWidget: WidgetDefinition = {
-  icon: IconCalendarWeek,
-  name: "Today",
-  description: "Displays the current date and progress through the calendar.",
-  path: "../../widgets/today",
-  configuration: {
-    items: [
-      {
-        name: "Week numbering",
-        description: "Use locale-specific week numbering or ISO 8601 week numbers",
-        values: { type: "select", options: ["Use locale rules", "ISO 8601"] },
-        defaultValue: "Use locale rules",
-      },
-      {
-        name: "Show week number",
-        description: "Display the current week number when the widget has room",
-        values: { type: "boolean" },
-        defaultValue: "yes",
-      },
-      {
-        name: "Show day of year",
-        description: "Display the current day number within the year",
-        values: { type: "boolean" },
-        defaultValue: "yes",
-      },
-      {
-        name: "Show quarter",
-        description: "Display the current calendar quarter",
-        values: { type: "boolean" },
-        defaultValue: "yes",
-      },
-      {
-        name: "Show year progress",
-        description: "Display progress through the current year",
-        values: { type: "boolean" },
-        defaultValue: "yes",
-      },
-    ],
-  },
-};

apps/docs/static/api/open-api-schema.json

@@ -2106,7 +2106,6 @@
                     "enum": [
                       "clock",
                       "weather",
-                      "today",
                       "airQuality",
                       "countdown",
                       "timer",

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/integration/integration-select-modal.tsx

@@ -1,9 +1,10 @@
 "use client";
 
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { Group, ScrollArea, 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 } = 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">
@@ -84,6 +100,7 @@ export const IntegrationSelectModal = createModal<IntegrationSelectModalProps>((
       onSelect={handleSelect}
       enableMockIntegration={innerProps.enableMockIntegration}
       allowedKinds={innerProps.allowedKinds}
+      integrationData={integrationData}
     />
   );
 }).withOptions({

e2e/shared/actions/item-select-actions.ts

@@ -0,0 +1,211 @@
+import type { Page } from "@playwright/test";
+
+export class ItemSelectActions {
+  private readonly page: Page;
+
+  constructor(page: Page) {
+    this.page = page;
+  }
+
+  /**
+   * Enter board edit mode if not already active
+   */
+  public async enterEditModeAsync() {
+    const editToggle = this.page.getByTestId("board-edit-mode-toggle");
+    await editToggle.waitFor({ state: "visible", timeout: 15_000 });
+    const isPressed = await editToggle.getAttribute("aria-pressed");
+    if (isPressed !== "true") {
+      await editToggle.click();
+      await this.page.waitForFunction(
+        () => document.querySelector('[data-testid="board-edit-mode-toggle"]')?.getAttribute("aria-pressed") === "true",
+        { timeout: 15_000 },
+      );
+    }
+  }
+
+  /**
+   * Open the ItemSelectModal ("Choose item to add") from the board
+   */
+  public async openItemSelectModalAsync() {
+    await this.enterEditModeAsync();
+
+    // Check if universal create button in header or empty state button is available
+    const headerAddButton = this.page.locator('button[aria-label="Add board content"]');
+    const emptyStateAddButton = this.page.getByRole("button", { name: "Add widget", exact: false });
+
+    if (await headerAddButton.isVisible()) {
+      await headerAddButton.click();
+      // In Universal Create modal, click "Widget"
+      const widgetOption = this.page
+        .getByRole("dialog")
+        .locator("button")
+        .filter({ hasText: /Widget/i })
+        .first();
+      await widgetOption.waitFor({ state: "visible", timeout: 10_000 });
+      await widgetOption.click();
+    } else if (await emptyStateAddButton.isVisible()) {
+      await emptyStateAddButton.click();
+    }
+
+    // Wait for ItemSelectModal to be visible
+    const modal = this.page.getByRole("dialog").filter({ hasText: "Choose item to add" }).first();
+    await modal.waitFor({ state: "visible", timeout: 15_000 });
+  }
+
+  /**
+   * Filter catalog items by search query
+   */
+  public async searchWidgetsAsync(query: string) {
+    const searchInput = this.page
+      .getByRole("dialog")
+      .locator('input[placeholder*="Filter items"], input[aria-label*="Filter items"]')
+      .first();
+    await searchInput.waitFor({ state: "visible", timeout: 10_000 });
+    await searchInput.fill(query);
+    // Allow debounce / filtering to update
+    await this.page.waitForTimeout(200);
+  }
+
+  /**
+   * Clear the search input
+   */
+  public async clearSearchAsync() {
+    const searchInput = this.page
+      .getByRole("dialog")
+      .locator('input[placeholder*="Filter items"], input[aria-label*="Filter items"]')
+      .first();
+    await searchInput.waitFor({ state: "visible", timeout: 10_000 });
+    await searchInput.clear();
+    await this.page.waitForTimeout(200);
+  }
+
+  /**
+   * Click a widget card in the catalog grid to select it and trigger live preview
+   */
+  public async selectWidgetAsync(widgetName: string) {
+    const modal = this.page.getByRole("dialog").filter({ hasText: "Choose item to add" }).first();
+    const widgetCard = modal
+      .locator("button")
+      .filter({ hasText: new RegExp(`^${widgetName}`, "i") })
+      .first();
+    await widgetCard.waitFor({ state: "visible", timeout: 10_000 });
+    await widgetCard.click();
+    // Wait for live preview container to appear
+    await modal.locator('text="Live Preview & Options"').waitFor({ state: "visible", timeout: 15_000 });
+  }
+
+  /**
+   * Close the live preview pane via the close button
+   */
+  public async closePreviewAsync() {
+    const modal = this.page.getByRole("dialog").filter({ hasText: "Choose item to add" }).first();
+    const closeBtn = modal.locator('button[aria-label="Close preview"]').first();
+    await closeBtn.waitFor({ state: "visible", timeout: 10_000 });
+    await closeBtn.click();
+  }
+
+  /**
+   * Change destination dropdown (e.g. Main canvas or a container section)
+   */
+  public async selectDestinationAsync(destinationLabel: string) {
+    const modal = this.page.getByRole("dialog").filter({ hasText: "Choose item to add" }).first();
+    const destinationSelect = modal.locator('input[aria-label="Add to"]').first();
+    if (await destinationSelect.isVisible()) {
+      await destinationSelect.click();
+      const option = this.page.getByRole("option", { name: destinationLabel }).first();
+      await option.waitFor({ state: "visible", timeout: 5_000 });
+      await option.click();
+    }
+  }
+
+  /**
+   * Toggle a switch in Widget Settings
+   */
+  public async toggleSettingSwitchAsync(labelText: string | RegExp) {
+    const modal = this.page.getByRole("dialog").filter({ hasText: "Choose item to add" }).first();
+    const switchInput = modal.getByLabel(labelText).first();
+    await switchInput.waitFor({ state: "visible", timeout: 10_000 });
+    await switchInput.click();
+  }
+
+  /**
+   * Select an option in a dropdown in Widget Settings
+   */
+  public async selectSettingOptionAsync(selectLabel: string | RegExp, optionText: string | RegExp) {
+    const modal = this.page.getByRole("dialog").filter({ hasText: "Choose item to add" }).first();
+    const selectField = modal.getByLabel(selectLabel).first();
+    await selectField.waitFor({ state: "visible", timeout: 10_000 });
+    await selectField.click();
+    const option = this.page.getByRole("option", { name: optionText }).first();
+    await option.waitFor({ state: "visible", timeout: 5_000 });
+    await option.click();
+  }
+
+  /**
+   * Fill a text input in Widget Settings
+   */
+  public async fillSettingInputAsync(labelText: string | RegExp, value: string) {
+    const modal = this.page.getByRole("dialog").filter({ hasText: "Choose item to add" }).first();
+    const inputField = modal.getByLabel(labelText).first();
+    await inputField.waitFor({ state: "visible", timeout: 10_000 });
+    await inputField.fill(value);
+  }
+
+  /**
+   * Click "Use Demo Service" button when available in Widget Settings
+   */
+  public async clickUseDemoServiceAsync() {
+    const modal = this.page.getByRole("dialog").filter({ hasText: "Choose item to add" }).first();
+    const demoBtn = modal.getByRole("button", { name: "Use Demo Service", exact: false }).first();
+    await demoBtn.waitFor({ state: "visible", timeout: 10_000 });
+    await demoBtn.click();
+  }
+
+  /**
+   * Fill inline integration form within the Widget Settings panel
+   */
+  public async fillInlineIntegrationFormAsync(input: { name: string; url: string; apiKey?: string }) {
+    const modal = this.page.getByRole("dialog").filter({ hasText: "Choose item to add" }).first();
+    // Name input
+    const nameInput = modal
+      .locator('input[placeholder*="name" i], input[name="name"], input[aria-label*="name" i]')
+      .first();
+    await nameInput.waitFor({ state: "visible", timeout: 10_000 });
+    await nameInput.fill(input.name);
+
+    // URL input
+    const urlInput = modal
+      .locator('input[placeholder*="url" i], input[placeholder*="http" i], input[name="url"]')
+      .first();
+    await urlInput.waitFor({ state: "visible", timeout: 10_000 });
+    await urlInput.fill(input.url);
+
+    // API Key input if provided
+    if (input.apiKey) {
+      const apiInput = modal
+        .locator('input[placeholder*="api" i], input[placeholder*="key" i], input[type="password"]')
+        .first();
+      if (await apiInput.isVisible()) {
+        await apiInput.fill(input.apiKey);
+      }
+    }
+
+    // Submit inline form
+    const submitBtn = modal
+      .locator('button[type="submit"]')
+      .filter({ hasText: /save|create|connect/i })
+      .first();
+    await submitBtn.waitFor({ state: "visible", timeout: 10_000 });
+    await submitBtn.click();
+  }
+
+  /**
+   * Click the "Add" button in the Live Preview header to place the widget on the board
+   */
+  public async submitAddWidgetAsync() {
+    const modal = this.page.getByRole("dialog").filter({ hasText: "Choose item to add" }).first();
+    const addBtn = modal.locator('button[type="button"]').filter({ hasText: /^Add$/i }).first();
+    await addBtn.waitFor({ state: "visible", timeout: 10_000 });
+    await addBtn.click();
+  }
+}

packages/definitions/src/docs/homarr-docs-sitemap.ts

@@ -336,7 +336,6 @@ export type HomarrDocumentationPath =
   | "/docs/integrations/whats-up-docker"
   | "/docs/widgets/clock"
   | "/docs/widgets/weather"
-  | "/docs/widgets/today"
   | "/docs/widgets/air-quality"
   | "/docs/widgets/countdown"
   | "/docs/widgets/timer"

packages/definitions/src/docs/widget-doc-slugs.ts

@@ -3,7 +3,6 @@ import type { WidgetKind } from "../widget";
 export const widgetDocSlugs: Record<WidgetKind, string | null> = {
   clock: "clock",
   weather: "weather",
-  today: "today",
   airQuality: "air-quality",
   countdown: "countdown",
   timer: "timer",

packages/definitions/src/widget.ts

@@ -1,7 +1,6 @@
 export const widgetKinds = [
   "clock",
   "weather",
-  "today",
   "airQuality",
   "countdown",
   "timer",
@@ -63,7 +62,6 @@ export const widgetKinds = [
 export type WidgetKind = (typeof widgetKinds)[number];
 
 export const widgetDefaultSizes: Partial<Record<WidgetKind, { width: number; height: number }>> = {
-  today: { width: 2, height: 1 },
   airQuality: { width: 2, height: 1 },
   countdown: { width: 2, height: 1 },
   timer: { width: 2, height: 1 },

packages/modals-collection/src/apps/app-select-modal.tsx

@@ -1,12 +1,25 @@
 import { useMemo, useState } from "react";
-import { Button, Center, Group, Stack, Text, Tooltip } from "@mantine/core";
-import { IconCheck, IconPlus, IconApps } from "@tabler/icons-react";
+import {
+  Badge,
+  Button,
+  Center,
+  Group,
+  Image,
+  Input,
+  Paper,
+  ScrollArea,
+  SimpleGrid,
+  Stack,
+  Text,
+  ThemeIcon,
+} from "@mantine/core";
+import { IconPlus, IconSearch } from "@tabler/icons-react";
 
 import type { RouterOutputs } from "@homarr/api";
 import { clientApi } from "@homarr/api/client";
 import { createModal, modalSizeSelect, useModalAction } from "@homarr/modals";
 import { useI18n } from "@homarr/translation/client";
-import { CatalogItem, SelectGridLayout, selectGridCardHeight } from "@homarr/ui";
+import { SelectableCard } from "@homarr/ui";
 
 import { QuickAddAppModal } from "./quick-add-app/quick-add-app-modal";
 
@@ -18,6 +31,8 @@ interface AppSelectModalProps {
   withCreate: boolean;
 }
 
+const selectGridCols = { base: 1, xs: 2, sm: 2, md: 3, lg: 4 };
+
 export const AppSelectModal = createModal<AppSelectModalProps>(({ actions, innerProps }) => {
   const [search, setSearch] = useState("");
   const [selectedAppIds, setSelectedAppIds] = useState<Set<string>>(new Set());
@@ -50,19 +65,6 @@ export const AppSelectModal = createModal<AppSelectModalProps>(({ actions, inner
     actions.closeModal();
   };
 
-  const handleSubmit = () => {
-    if (multiSelect) {
-      innerProps.onSelectMany?.(selectedApps);
-      actions.closeModal();
-      return;
-    }
-    const [first] = filteredApps;
-    if (first) {
-      innerProps.onSelect?.(first);
-      actions.closeModal();
-    }
-  };
-
   const handleAddNewApp = () => {
     openQuickAddAppModal({
       onClose(app) {
@@ -76,100 +78,165 @@ export const AppSelectModal = createModal<AppSelectModalProps>(({ actions, inner
     });
   };
 
+  const handleMultiSubmit = () => {
+    innerProps.onSelectMany?.(selectedApps);
+    actions.closeModal();
+  };
+
   return (
-    <>
-      <SelectGridLayout
-        search={search}
-        onSearchChange={setSearch}
+    <Stack gap="md">
+      {/* Embedded Dynamic Style for Card Hover & Focus */}
+      <style>{`
+        [data-app-card] {
+          cursor: pointer;
+          text-align: start;
+          display: flex;
+          flex-direction: column;
+          position: relative;
+          width: 100%;
+          min-height: 175px;
+          height: 100%;
+          background-color: light-dark(var(--mantine-color-white), var(--mantine-color-dark-7));
+          transition: transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease;
+        }
+        [data-app-card]:hover:not(:disabled) {
+          transform: translateY(-2px);
+          box-shadow: var(--mantine-shadow-sm);
+          border-color: var(--mantine-primary-color-filled);
+        }
+        [data-app-card][data-selected="true"] {
+          border-color: var(--mantine-primary-color-filled);
+          border-width: 2px;
+        }
+        [data-app-card]:focus-visible {
+          outline: 2px solid var(--mantine-primary-color-filled);
+          outline-offset: 2px;
+        }
+      `}</style>
+
+      {/* Top Search Input */}
+      <Input
+        value={search}
+        onChange={(event) => setSearch(event.currentTarget.value)}
+        leftSection={<IconSearch size={16} />}
         placeholder={`${t("app.action.select.search")}...`}
-        ariaLabel={t("app.action.select.search")}
-        onSearchKeyDown={(event) => {
+        aria-label={t("app.action.select.search")}
+        data-autofocus
+        onKeyDown={(event) => {
           if (event.key === "Enter" && filteredApps.length === 1 && filteredApps[0]) {
             handleSelect(filteredApps[0]);
           }
         }}
-      >
-        {innerProps.withCreate && (
-          <CatalogItem
-            height={selectGridCardHeight}
-            label={t("app.action.create.title")}
-            status={t("app.action.create.action")}
-            onSelect={handleAddNewApp}
-          >
-            <Stack h="100%" gap="xs">
-              <Group gap="sm" wrap="nowrap" align="flex-start">
-                <IconPlus size={22} style={{ flexShrink: 0, marginTop: 2 }} />
-                <Text lh={1.2} style={{ whiteSpace: "normal" }} fw={500} size="sm" lineClamp={2}>
-                  {t("app.action.create.title")}
-                </Text>
-              </Group>
-              <Text lh={1.2} style={{ whiteSpace: "normal" }} size="xs" c="dimmed" lineClamp={1}>
-                {t("app.action.create.description")}
-              </Text>
-              <Text size="xs" c="blue" fw={500} mt="auto">
-                {t("app.action.create.action")}
-              </Text>
-            </Stack>
-          </CatalogItem>
-        )}
+      />
 
-        {filteredApps.map((app) => (
-          <CatalogItem
-            key={app.id}
-            height={selectGridCardHeight}
-            label={app.name}
-            status={
-              multiSelect
-                ? selectedAppIds.has(app.id)
-                  ? t("app.action.select.selected")
-                  : t("app.action.select.toggle")
-                : t("app.action.select.action", { app: app.name })
-            }
-            selected={multiSelect ? selectedAppIds.has(app.id) : undefined}
-            onSelect={() => handleSelect(app)}
-          >
-            <Stack h="100%" gap="xs">
-              <Group gap="sm" wrap="nowrap" align="flex-start">
-                <img src={app.iconUrl} alt={app.name} width={22} height={22} style={{ flexShrink: 0, marginTop: 2 }} />
-                <Text lh={1.2} style={{ whiteSpace: "normal" }} fw={500} size="sm" lineClamp={2}>
-                  {app.name}
-                </Text>
-                {multiSelect && selectedAppIds.has(app.id) && (
-                  <IconCheck size={18} color="var(--mantine-primary-color-filled)" />
-                )}
-              </Group>
-              <Tooltip label={app.description} multiline w={250} disabled={!app.description}>
-                <Text lh={1.2} style={{ whiteSpace: "normal" }} size="xs" c="dimmed" lineClamp={1}>
-                  {app.description ?? ""}
-                </Text>
-              </Tooltip>
-              <Text size="xs" c="blue" fw={500} mt="auto">
-                {multiSelect
-                  ? selectedAppIds.has(app.id)
-                    ? t("app.action.select.selected")
-                    : t("app.action.select.toggle")
-                  : t("app.action.select.action", { app: app.name })}
-              </Text>
-            </Stack>
-          </CatalogItem>
-        ))}
+      {/* Scrollable Container with App Cards */}
+      <ScrollArea.Autosize mah="70vh" offsetScrollbars>
+        <Stack gap="md" pt="xs" pr="xs" px={4}>
+          <SimpleGrid cols={selectGridCols} spacing="sm">
+            {innerProps.withCreate && (
+              <SelectableCard
+                onClick={handleAddNewApp}
+                style={{ borderStyle: "dashed" }}
+                icon={
+                  <ThemeIcon variant="light" color="primaryColor" size={34} radius="md">
+                    <IconPlus size={20} />
+                  </ThemeIcon>
+                }
+                title={t("app.action.create.title")}
+                topRight={
+                  <Badge variant="light" color="secondaryColor" size="xs">
+                    New
+                  </Badge>
+                }
+                description={t("app.action.create.description")}
+                footerLeft={
+                  <Text size="xs" c="dimmed">
+                    Custom Application
+                  </Text>
+                }
+              />
+            )}
 
-        {filteredApps.length === 0 && !isPending && (
-          <Center p="xl">
-            <Text c="dimmed">{t("app.action.select.noResults")}</Text>
-          </Center>
-        )}
-      </SelectGridLayout>
-      {multiSelect && (
-        <Group justify="flex-end" mt="md">
-          <Button leftSection={<IconApps size={16} />} disabled={selectedAppIds.size === 0} onClick={handleSubmit}>
-            {t("app.action.select.multiple", { count: String(selectedAppIds.size) })}
-          </Button>
-        </Group>
+            {filteredApps.map((app) => (
+              <AppCard
+                key={app.id}
+                app={app}
+                isSelected={selectedAppIds.has(app.id)}
+                multiSelect={multiSelect}
+                onSelect={handleSelect}
+              />
+            ))}
+          </SimpleGrid>
+
+          {filteredApps.length === 0 && !isPending && (
+            <Center p="xl">
+              <Text c="dimmed">{t("app.action.select.noResults")}</Text>
+            </Center>
+          )}
+        </Stack>
+      </ScrollArea.Autosize>
+
+      {/* Multi-Select Action Footer */}
+      {multiSelect && selectedApps.length > 0 && (
+        <Paper withBorder p="xs" radius="md" bg="light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-8))">
+          <Group justify="space-between" align="center">
+            <Text size="sm" fw={600}>
+              {selectedApps.length} app{selectedApps.length > 1 ? "s" : ""} selected
+            </Text>
+            <Group gap="xs">
+              <Button variant="default" size="xs" onClick={() => setSelectedAppIds(new Set())}>
+                {t("common.action.discard")}
+              </Button>
+              <Button color="primaryColor" size="xs" onClick={handleMultiSubmit}>
+                {t("common.action.add")} ({selectedApps.length})
+              </Button>
+            </Group>
+          </Group>
+        </Paper>
       )}
-    </>
+    </Stack>
   );
 }).withOptions({
   defaultTitle: (t) => t("app.action.select.title"),
   size: modalSizeSelect,
 });
+
+// =========================================================================
+// AppCard: Variant 3 (Dashboard Inset) with Medium Title & Large App Icon
+// =========================================================================
+const AppCard = ({
+  app,
+  isSelected,
+  multiSelect,
+  onSelect,
+}: {
+  app: SelectableApp;
+  isSelected: boolean;
+  multiSelect: boolean;
+  onSelect: (app: SelectableApp) => void;
+}) => {
+  const t = useI18n();
+
+  return (
+    <SelectableCard
+      onClick={() => onSelect(app)}
+      aria-label={app.name}
+      selected={isSelected}
+      icon={<Image src={app.iconUrl} alt={app.name} w={28} h={28} fit="contain" style={{ flexShrink: 0 }} />}
+      title={app.name}
+      topRight={
+        isSelected ? (
+          <Badge variant="dot" color="primaryColor" size="xs">
+            {t("app.action.select.selected")}
+          </Badge>
+        ) : null
+      }
+      description={app.description}
+      footerLeft={
+        <Text size="xs" c="dimmed">
+          {multiSelect ? (isSelected ? t("app.action.select.selected") : t("app.action.select.toggle")) : "Application"}
+        </Text>
+      }
+    />
+  );
+};

packages/modals/src/index.tsx

@@ -102,6 +102,13 @@ const ActiveModal = ({ modal, state, handleCloseModal }: ActiveModalProps) => {
     content: presentationClasses.inspectorContent,
   });
 
+  const handleClose = useCallback(() => {
+    const canClose = modal.reference.onCloseRequest ? modal.reference.onCloseRequest() : true;
+    if (canClose) {
+      handleCloseModal();
+    }
+  }, [handleCloseModal, modal.reference]);
+
   return (
     <Modal
       key={modal.id}
@@ -123,7 +130,7 @@ const ActiveModal = ({ modal, state, handleCloseModal }: ActiveModalProps) => {
       {...otherModalProps}
       title={translateIfNecessary(t, modal.props.defaultTitle)}
       opened={opened}
-      onClose={handleCloseModal}
+      onClose={handleClose}
     >
       {modal.reference.content}
     </Modal>
@@ -144,7 +151,6 @@ export const useModalAction = <TModal extends ModalDefinition>(modal: TModal) =>
   return {
     openModal: (innerProps: inferInnerProps<TModal>, options: OpenModalOptions | void) => {
       // void actually is undefined
-      // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
       context.openModalInner({ modal, innerProps, options: options ?? {} });
     },
   };

packages/modals/src/reducer.tsx

@@ -94,6 +94,8 @@ const getModal = <TModal extends ModalDefinition>(modal: ModalState<TModal>) =>
   const ModalContent = modal.modal.component;
 
   const { innerProps, ...rest } = modal.props;
+  let closeInterceptor: (() => boolean) | null = null;
+
   const FullModal = () => {
     const context = useContext(ModalContext);
 
@@ -106,6 +108,9 @@ const getModal = <TModal extends ModalDefinition>(modal: ModalState<TModal>) =>
         innerProps={innerProps}
         actions={{
           closeModal: () => context.closeModal(modal.id),
+          setCloseInterceptor: (interceptor: (() => boolean) | null) => {
+            closeInterceptor = interceptor;
+          },
         }}
       />
     );
@@ -114,5 +119,11 @@ const getModal = <TModal extends ModalDefinition>(modal: ModalState<TModal>) =>
   return {
     modalProps: rest,
     content: <FullModal />,
+    onCloseRequest: () => {
+      if (closeInterceptor) {
+        return closeInterceptor();
+      }
+      return true;
+    },
   };
 };

packages/modals/src/type.ts

@@ -5,10 +5,12 @@ import type { stringOrTranslation } from "@homarr/translation";
 
 import type { ModalPresentation } from "./modal-presentation";
 
-export type ModalComponent<TInnerProps> = (props: {
-  actions: { closeModal: () => void };
-  innerProps: TInnerProps;
-}) => ReactNode;
+export interface ModalActions {
+  closeModal: () => void;
+  setCloseInterceptor?: (interceptor: (() => boolean) | null) => void;
+}
+
+export type ModalComponent<TInnerProps> = (props: { actions: ModalActions; innerProps: TInnerProps }) => ReactNode;
 
 export type CreateModalOptions = Pick<
   ModalOptions<unknown>,

packages/translation/src/lang/en.json

@@ -3465,50 +3465,6 @@
         "notificationsDenied": "Notifications are blocked in this browser."
       }
     },
-    "today": {
-      "name": "Today",
-      "description": "Displays the current date and progress through the calendar.",
-      "option": {
-        "weekConvention": {
-          "label": "Week numbering",
-          "options": {
-            "locale": "Use locale rules",
-            "iso": "ISO 8601"
-          }
-        },
-        "showWeekNumber": {
-          "label": "Show week number"
-        },
-        "showDayOfYear": {
-          "label": "Show day of year"
-        },
-        "showQuarter": {
-          "label": "Show quarter"
-        },
-        "showYearProgress": {
-          "label": "Show year progress"
-        }
-      },
-      "weekNumber": "Week {week}",
-      "dayOfYear": "Day {day} of {total}",
-      "quarter": "Quarter {quarter}",
-      "daysAfterToday": "{days, plural, =0 {Last day of the year} one {# day after today} other {# days after today}}",
-      "weekProgressLabel": "Week progress",
-      "monthProgressLabel": "Month progress",
-      "yearProgressLabel": "Year progress",
-      "yearProgress": "Year progress: {progress}%",
-      "weekConvention": {
-        "locale": "Week numbers follow your locale",
-        "iso": "ISO 8601 week numbers"
-      },
-      "advanced": {
-        "week": "Week number",
-        "dayOfYear": "Day of year",
-        "quarter": "Quarter",
-        "quarterValue": "Q{quarter}",
-        "daysRemaining": "Days after today"
-      }
-    },
     "minecraftServerStatus": {
       "name": "Minecraft Server Status",
       "description": "Displays the status of a Minecraft server",

packages/ui/src/components/index.tsx

@@ -13,6 +13,13 @@ export { CustomPasswordInput } from "./password-input/password-input";
 export { IntegrationAvatar } from "./integration-avatar";
 export { BetaBadge } from "./beta-badge";
 export { CatalogItem } from "./catalog-item";
+export { SelectableCard } from "./selectable-card";
+export type {
+  SelectableCardProps,
+  SelectableCardStylesNames,
+  SelectableCardCssVariables,
+  SelectableCardFactory,
+} from "./selectable-card";
 export { MaskedImage } from "./masked-image";
 export { MaskedOrNormalImage } from "./masked-or-normal-image";
 export { LanguageIcon } from "./language-icon";

packages/ui/src/components/selectable-card/index.ts

@@ -0,0 +1,7 @@
+export { SelectableCard } from "./selectable-card";
+export type {
+  SelectableCardProps,
+  SelectableCardStylesNames,
+  SelectableCardCssVariables,
+  SelectableCardFactory,
+} from "./selectable-card";

packages/ui/src/components/selectable-card/selectable-card.module.css

@@ -0,0 +1,79 @@
+.root {
+  cursor: pointer;
+  text-align: start;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  width: 100%;
+  min-height: 175px;
+  height: 100%;
+  padding: var(--mantine-spacing-sm);
+  border-radius: var(--mantine-radius-md);
+  background-color: light-dark(var(--mantine-color-white), var(--mantine-color-dark-7));
+  border: 1px solid var(--mantine-color-default-border);
+  box-shadow: var(--mantine-shadow-xs);
+  transition:
+    transform 150ms ease,
+    box-shadow 150ms ease,
+    border-color 150ms ease;
+  overflow: hidden;
+  font-family: inherit;
+  color: inherit;
+  text-decoration: none;
+}
+
+.root:hover:not(:disabled) {
+  transform: translateY(-2px);
+  box-shadow: var(--mantine-shadow-sm);
+  border-color: var(--mantine-primary-color-filled);
+}
+
+.root:focus-visible {
+  outline: 2px solid var(--mantine-primary-color-filled);
+  outline-offset: 2px;
+}
+
+.root[data-selected] {
+  border-color: var(--mantine-primary-color-filled);
+  box-shadow: 0 0 0 1px var(--mantine-primary-color-filled);
+}
+
+.root:disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.header {
+  border-bottom: 1px solid var(--mantine-color-default-border);
+  background-color: light-dark(var(--mantine-color-gray-1), var(--mantine-color-dark-8));
+  padding-top: var(--mantine-spacing-xs);
+  padding-bottom: var(--mantine-spacing-xs);
+  margin: calc(var(--mantine-spacing-sm) * -1);
+  margin-bottom: 0;
+  padding-left: var(--mantine-spacing-sm);
+  padding-right: var(--mantine-spacing-sm);
+}
+
+.body {
+  flex: 1 1 auto;
+  display: flex;
+  flex-direction: column;
+  gap: var(--mantine-spacing-xs);
+  margin-top: var(--mantine-spacing-xs);
+  margin-bottom: var(--mantine-spacing-xs);
+  min-height: 0;
+}
+
+.footer {
+  border-top: 1px dashed var(--mantine-color-default-border);
+  background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-8));
+  padding-top: var(--mantine-spacing-xs);
+  padding-bottom: var(--mantine-spacing-xs);
+  margin: calc(var(--mantine-spacing-sm) * -1);
+  margin-top: auto;
+  padding-left: var(--mantine-spacing-sm);
+  padding-right: var(--mantine-spacing-sm);
+  min-height: 40px;
+  display: flex;
+  align-items: center;
+}

packages/ui/src/components/selectable-card/selectable-card.spec.tsx

@@ -0,0 +1,308 @@
+// @vitest-environment jsdom
+
+import { act, createRef } from "react";
+import { createRoot } from "react-dom/client";
+import type { Root } from "react-dom/client";
+import { Badge, MantineProvider, Text } from "@mantine/core";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+import { SelectableCard } from "./selectable-card";
+import classes from "./selectable-card.module.css";
+
+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("SelectableCard", () => {
+  it("renders as a native button with default button type and accessible slots", async () => {
+    const onClick = vi.fn();
+    await act(async () =>
+      root.render(
+        <MantineProvider>
+          <SelectableCard
+            aria-label="Sonarr Card"
+            icon={<span data-testid="card-icon">Icon</span>}
+            title="Sonarr"
+            topRight={<Badge data-testid="card-topright">Media</Badge>}
+            description="Manage TV series downloads"
+            footerLeft={<span data-testid="card-footer-left">Left Meta</span>}
+            footerRight={<span data-testid="card-footer-right">Right Meta</span>}
+            onClick={onClick}
+          />
+        </MantineProvider>,
+      ),
+    );
+
+    const button = host.querySelector("button");
+    expect(button).not.toBeNull();
+    expect(button?.type).toBe("button");
+    expect(button?.getAttribute("aria-label")).toBe("Sonarr Card");
+    expect(host.querySelector("[data-testid='card-icon']")).not.toBeNull();
+    expect(host.textContent).toContain("Sonarr");
+    expect(host.querySelector("[data-testid='card-topright']")).not.toBeNull();
+    expect(host.textContent).toContain("Manage TV series downloads");
+    expect(host.querySelector("[data-testid='card-footer-left']")).not.toBeNull();
+    expect(host.querySelector("[data-testid='card-footer-right']")).not.toBeNull();
+
+    await act(async () => button?.click());
+    expect(onClick).toHaveBeenCalledOnce();
+  });
+
+  it("applies Styles API classes for root, header, body, and footer", async () => {
+    await act(async () =>
+      root.render(
+        <MantineProvider>
+          <SelectableCard
+            title="Plex"
+            description="Media Server"
+            footerLeft={<span>Footer</span>}
+            classNames={{
+              root: "custom-root",
+              header: "custom-header",
+              body: "custom-body",
+              footer: "custom-footer",
+            }}
+          />
+        </MantineProvider>,
+      ),
+    );
+
+    const button = host.querySelector("button");
+    expect(button?.classList.contains(classes.root)).toBe(true);
+    expect(button?.classList.contains("custom-root")).toBe(true);
+
+    const header = button?.querySelector(`.${classes.header}`);
+    expect(header).not.toBeNull();
+    expect(header?.classList.contains("custom-header")).toBe(true);
+
+    const body = button?.querySelector(`.${classes.body}`);
+    expect(body).not.toBeNull();
+    expect(body?.classList.contains("custom-body")).toBe(true);
+
+    const footer = button?.querySelector(`.${classes.footer}`);
+    expect(footer).not.toBeNull();
+    expect(footer?.classList.contains("custom-footer")).toBe(true);
+  });
+
+  it("prioritizes title without wrapping and constrains topRight badge with ellipsis", async () => {
+    await act(async () =>
+      root.render(
+        <MantineProvider>
+          <SelectableCard title="Very Long Title Name That Should Not Wrap" topRight={<Badge>Category Badge</Badge>} />
+        </MantineProvider>,
+      ),
+    );
+
+    const button = host.querySelector("button");
+    const header = button?.querySelector(`.${classes.header}`);
+    expect(header).not.toBeNull();
+
+    // The title text is rendered with whiteSpace: nowrap and fw: 700
+    const titleText = header?.querySelector("p, span, div");
+    expect(titleText?.textContent).toContain("Very Long Title Name That Should Not Wrap");
+
+    // Check that custom ReactNode title is supported
+    await act(async () =>
+      root.render(
+        <MantineProvider>
+          <SelectableCard
+            title={<span data-testid="custom-title-node">Custom Title Element</span>}
+            topRight={<span data-testid="custom-top-right">Top Right</span>}
+          />
+        </MantineProvider>,
+      ),
+    );
+
+    expect(host.querySelector("[data-testid='custom-title-node']")).not.toBeNull();
+    expect(host.querySelector("[data-testid='custom-top-right']")).not.toBeNull();
+  });
+
+  it("renders custom children in the body slot over description", async () => {
+    await act(async () =>
+      root.render(
+        <MantineProvider>
+          <SelectableCard title="Test" description="This should not appear">
+            <div data-testid="custom-body-children">Custom Child Content</div>
+          </SelectableCard>
+        </MantineProvider>,
+      ),
+    );
+
+    expect(host.querySelector("[data-testid='custom-body-children']")).not.toBeNull();
+    expect(host.textContent).toContain("Custom Child Content");
+    expect(host.textContent).not.toContain("This should not appear");
+  });
+
+  it("renders description with fallback when description is empty string", async () => {
+    await act(async () =>
+      root.render(
+        <MantineProvider>
+          <SelectableCard title="No Desc Item" description="" />
+        </MantineProvider>,
+      ),
+    );
+
+    expect(host.textContent).toContain("No description provided");
+  });
+
+  it("omits header, body, or footer when corresponding props are omitted", async () => {
+    await act(async () =>
+      root.render(
+        <MantineProvider>
+          <SelectableCard />
+        </MantineProvider>,
+      ),
+    );
+
+    const button = host.querySelector("button");
+    expect(button?.querySelector(`.${classes.header}`)).toBeNull();
+    expect(button?.querySelector(`.${classes.body}`)).toBeNull();
+    expect(button?.querySelector(`.${classes.footer}`)).toBeNull();
+  });
+
+  it("handles selected state via data-selected attribute", async () => {
+    await act(async () =>
+      root.render(
+        <MantineProvider>
+          <SelectableCard title="Selected Item" selected />
+        </MantineProvider>,
+      ),
+    );
+
+    const button = host.querySelector("button");
+    expect(button?.getAttribute("data-selected")).toBe("true");
+
+    await act(async () =>
+      root.render(
+        <MantineProvider>
+          <SelectableCard title="Unselected Item" selected={false} />
+        </MantineProvider>,
+      ),
+    );
+
+    expect(button?.hasAttribute("data-selected")).toBe(false);
+  });
+
+  it("handles disabled state and prevents click handlers", async () => {
+    const onClick = vi.fn();
+    await act(async () =>
+      root.render(
+        <MantineProvider>
+          <SelectableCard title="Disabled Item" disabled onClick={onClick} />
+        </MantineProvider>,
+      ),
+    );
+
+    const button = host.querySelector("button");
+    expect(button?.disabled).toBe(true);
+
+    await act(async () => button?.click());
+    expect(onClick).not.toHaveBeenCalled();
+  });
+
+  it("handles loading state by disabling the button and showing LoadingOverlay", async () => {
+    const onClick = vi.fn();
+    await act(async () =>
+      root.render(
+        <MantineProvider>
+          <SelectableCard title="Loading Item" loading onClick={onClick} />
+        </MantineProvider>,
+      ),
+    );
+
+    const button = host.querySelector("button");
+    expect(button?.disabled).toBe(true);
+
+    await act(async () => button?.click());
+    expect(onClick).not.toHaveBeenCalled();
+  });
+
+  it("supports keyboard activation via Enter and Space", async () => {
+    const onClick = vi.fn();
+    await act(async () =>
+      root.render(
+        <MantineProvider>
+          <SelectableCard title="Interactive Card" onClick={onClick} />
+        </MantineProvider>,
+      ),
+    );
+
+    const button = host.querySelector("button");
+    button?.focus();
+    expect(document.activeElement).toBe(button);
+
+    // Native buttons fire click event on Enter / Space keydown/keyup
+    await act(async () => {
+      button?.dispatchEvent(new MouseEvent("click", { bubbles: true, cancelable: true }));
+    });
+    expect(onClick).toHaveBeenCalledOnce();
+  });
+
+  it("forwards ref to the underlying HTMLButtonElement", async () => {
+    const ref = createRef<HTMLButtonElement>();
+    await act(async () =>
+      root.render(
+        <MantineProvider>
+          <SelectableCard ref={ref} title="Ref Card" />
+        </MantineProvider>,
+      ),
+    );
+
+    expect(ref.current).toBeInstanceOf(HTMLButtonElement);
+    expect(ref.current?.tagName).toBe("BUTTON");
+  });
+
+  it("resolves radius CSS variables via varsResolver", async () => {
+    await act(async () =>
+      root.render(
+        <MantineProvider>
+          <SelectableCard title="Radius Card" radius="lg" />
+        </MantineProvider>,
+      ),
+    );
+
+    const button = host.querySelector("button");
+    expect(button?.style.getPropertyValue("--selectable-card-radius")).toBe("var(--mantine-radius-lg)");
+  });
+
+  it("passes arbitrary HTML attributes down to the button element", async () => {
+    await act(async () =>
+      root.render(
+        <MantineProvider>
+          <SelectableCard
+            title="Custom Props Card"
+            data-testid="my-selectable-card"
+            data-custom="custom-value"
+            tabIndex={0}
+          />
+        </MantineProvider>,
+      ),
+    );
+
+    const button = host.querySelector("button");
+    expect(button?.getAttribute("data-testid")).toBe("my-selectable-card");
+    expect(button?.getAttribute("data-custom")).toBe("custom-value");
+    expect(button?.tabIndex).toBe(0);
+  });
+});

packages/ui/src/components/selectable-card/selectable-card.tsx

@@ -0,0 +1,171 @@
+"use client";
+
+import type { ReactNode } from "react";
+import {
+  Box,
+  createVarsResolver,
+  factory,
+  Group,
+  LoadingOverlay,
+  Stack,
+  Text,
+  Tooltip,
+  useProps,
+  useStyles,
+} from "@mantine/core";
+import type { BoxProps, ElementProps, Factory, MantineRadius, StylesApiProps } from "@mantine/core";
+
+import classes from "./selectable-card.module.css";
+
+export type SelectableCardStylesNames = "root" | "header" | "body" | "footer";
+export type SelectableCardCssVariables = {
+  root: "--selectable-card-radius";
+};
+
+export interface SelectableCardProps
+  extends BoxProps, StylesApiProps<SelectableCardFactory>, Omit<ElementProps<"button">, "title"> {
+  icon?: ReactNode;
+  title?: ReactNode;
+  topRight?: ReactNode;
+  description?: string | null;
+  footerLeft?: ReactNode;
+  footerRight?: ReactNode;
+  selected?: boolean;
+  loading?: boolean;
+  disabled?: boolean;
+  radius?: MantineRadius;
+  children?: ReactNode;
+}
+
+export type SelectableCardFactory = Factory<{
+  props: SelectableCardProps;
+  ref: HTMLButtonElement;
+  stylesNames: SelectableCardStylesNames;
+  vars: SelectableCardCssVariables;
+}>;
+
+const defaultProps: Partial<SelectableCardProps> = {
+  type: "button",
+};
+
+const varsResolver = createVarsResolver<SelectableCardFactory>((_theme, { radius }) => ({
+  root: {
+    "--selectable-card-radius": radius ? `var(--mantine-radius-${radius})` : undefined,
+  },
+}));
+
+export const SelectableCard = factory<SelectableCardFactory>((_props, ref) => {
+  const props = useProps("SelectableCard", defaultProps, _props);
+  const {
+    classNames,
+    className,
+    style,
+    styles,
+    unstyled,
+    vars,
+    attributes,
+    icon,
+    title,
+    topRight,
+    description,
+    footerLeft,
+    footerRight,
+    selected,
+    loading = false,
+    disabled = false,
+    children,
+    type = "button",
+    ...others
+  } = props;
+
+  const getStyles = useStyles<SelectableCardFactory>({
+    name: "SelectableCard",
+    classes,
+    props,
+    className,
+    style,
+    classNames,
+    styles,
+    unstyled,
+    vars,
+    attributes,
+    varsResolver,
+  });
+
+  return (
+    <Box
+      component="button"
+      type={type}
+      ref={ref}
+      disabled={disabled || loading}
+      data-selected={selected || undefined}
+      {...getStyles("root")}
+      {...others}
+    >
+      <LoadingOverlay visible={loading} loaderProps={{ size: "sm" }} />
+
+      {/* Header Section: Inset background with Title that never elides before the category */}
+      {(icon || title || topRight) && (
+        <Box {...getStyles("header")}>
+          <Group
+            justify="space-between"
+            align="center"
+            wrap="nowrap"
+            gap="xs"
+            style={{ width: "100%", overflow: "hidden" }}
+          >
+            <Group gap="xs" wrap="nowrap" style={{ flexShrink: 0, minWidth: 0 }}>
+              {icon}
+              {typeof title === "string" ? (
+                <Text fw={700} size="md" style={{ whiteSpace: "nowrap" }}>
+                  {title}
+                </Text>
+              ) : (
+                title
+              )}
+            </Group>
+            {topRight && (
+              <Box
+                style={{
+                  minWidth: 0,
+                  overflow: "hidden",
+                  textOverflow: "ellipsis",
+                  whiteSpace: "nowrap",
+                  flexShrink: 1,
+                }}
+              >
+                {topRight}
+              </Box>
+            )}
+          </Group>
+        </Box>
+      )}
+
+      {/* Body: Custom Children or Default Description */}
+      {children ? (
+        <Box {...getStyles("body")}>{children}</Box>
+      ) : description !== undefined ? (
+        <Box {...getStyles("body")}>
+          <Tooltip label={description} multiline w={260} disabled={!description}>
+            <Text size="sm" c="dimmed" lineClamp={2} lh={1.35}>
+              {description || "No description provided"}
+            </Text>
+          </Tooltip>
+        </Box>
+      ) : null}
+
+      {/* Footer Section: Inset Dashed Bottom Meta */}
+      {(footerLeft || footerRight) && (
+        <Box {...getStyles("footer")}>
+          <Group justify="space-between" align="center" wrap="nowrap" gap="xs" style={{ width: "100%" }}>
+            <Box style={{ minWidth: 0, flexShrink: 1 }}>{footerLeft}</Box>
+            <Box style={{ minWidth: 0, flexShrink: 0 }}>{footerRight}</Box>
+          </Group>
+        </Box>
+      )}
+    </Box>
+  );
+});
+
+SelectableCard.displayName = "@homarr/ui/SelectableCard";
+SelectableCard.classes = classes;

packages/ui/src/integration-select-grid/integration-select-grid.spec.tsx

@@ -0,0 +1,265 @@
+// @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 } from "@homarr/definitions";
+
+import { IntegrationSelectGrid } from "./integration-select-grid";
+
+vi.mock("@homarr/translation/client", () => ({
+  useI18n: () => (key: string) => {
+    const translations: Record<string, string> = {
+      "integration.page.list.search": "Search integrations",
+      "common.noResults": "No results found",
+      "integration.grid.noWidgets": "No widgets tied to this service",
+      "widget.mediaServer.name": "Media Server",
+      "widget.calendar.name": "Calendar",
+      "widget.downloads.name": "Downloads",
+      "integration.category.mediaService": "Media Service",
+      "integration.category.downloadClient": "Download Client",
+      "integration.category.calendar": "Calendar",
+      "integration.category.smartHomeServer": "Smart Home",
+      "integration.category.usenet": "Usenet",
+      "integration.category.torrent": "Torrent",
+    };
+    return translations[key] ?? key;
+  },
+}));
+
+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(),
+  }));
+  vi.stubGlobal(
+    "ResizeObserver",
+    class {
+      observe() {}
+      unobserve() {}
+      disconnect() {}
+    },
+  );
+  host = document.createElement("div");
+  document.body.append(host);
+  root = createRoot(host);
+});
+
+afterEach(async () => {
+  await act(async () => root.unmount());
+  host.remove();
+});
+
+describe("IntegrationSelectGrid", () => {
+  it("renders a 4-column responsive grid of selectable integration cards", async () => {
+    const onSelect = vi.fn();
+    await act(async () =>
+      root.render(
+        <MantineProvider>
+          <IntegrationSelectGrid onSelect={onSelect} allowedKinds={["jellyfin", "sonarr", "radarr", "sabNzbd"]} />
+        </MantineProvider>,
+      ),
+    );
+
+    const cards = host.querySelectorAll("button");
+    expect(cards.length).toBe(4);
+    expect(host.textContent).toContain("Jellyfin");
+    expect(host.textContent).toContain("Sonarr");
+    expect(host.textContent).toContain("Radarr");
+    expect(host.textContent).toContain("SABnzbd");
+  });
+
+  it("renders tied widgets with icons and labels inside integration cards", async () => {
+    const onSelect = vi.fn();
+    await act(async () =>
+      root.render(
+        <MantineProvider>
+          <IntegrationSelectGrid onSelect={onSelect} allowedKinds={["jellyfin"]} />
+        </MantineProvider>,
+      ),
+    );
+
+    expect(host.textContent).toContain("Tied Widgets");
+    // Jellyfin is tied to Media Server widget
+    expect(host.textContent).toContain("Media Server");
+  });
+
+  it("displays fallback message when integration has no tied widgets", async () => {
+    const onSelect = vi.fn();
+    await act(async () =>
+      root.render(
+        <MantineProvider>
+          <IntegrationSelectGrid onSelect={onSelect} allowedKinds={["homeAssistant"]} />
+        </MantineProvider>,
+      ),
+    );
+
+    const homeAssistantCard = host.querySelector("button");
+    expect(homeAssistantCard).not.toBeNull();
+  });
+
+  it("displays '{count} connected' in footerLeft when integration instances exist", async () => {
+    const onSelect = vi.fn();
+    const integrationData = [
+      { kind: "jellyfin" as IntegrationKind, name: "Home Jellyfin" },
+      { kind: "jellyfin" as IntegrationKind, name: "Remote Jellyfin" },
+      { kind: "sonarr" as IntegrationKind, name: "Sonarr Instance" },
+    ];
+
+    await act(async () =>
+      root.render(
+        <MantineProvider>
+          <IntegrationSelectGrid
+            onSelect={onSelect}
+            allowedKinds={["jellyfin", "radarr"]}
+            integrationData={integrationData}
+          />
+        </MantineProvider>,
+      ),
+    );
+
+    // Jellyfin has 2 connected
+    expect(host.textContent).toContain("2 connected");
+
+    // Radarr has 0 connected, so it doesn't show "0 connected"
+    expect(host.textContent).not.toContain("0 connected");
+  });
+
+  it("filters integrations dynamically by search input", async () => {
+    const onSelect = vi.fn();
+    await act(async () =>
+      root.render(
+        <MantineProvider>
+          <IntegrationSelectGrid onSelect={onSelect} allowedKinds={["jellyfin", "sonarr", "radarr", "plex"]} />
+        </MantineProvider>,
+      ),
+    );
+
+    const searchInput = host.querySelector("input");
+    expect(searchInput).not.toBeNull();
+
+    // Type "jelly"
+    await act(async () => {
+      if (searchInput) {
+        const nativeInputValueSetter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, "value")?.set;
+        nativeInputValueSetter?.call(searchInput, "jelly");
+        searchInput.dispatchEvent(new Event("input", { bubbles: true }));
+        searchInput.dispatchEvent(new Event("change", { bubbles: true }));
+      }
+    });
+
+    const cards = host.querySelectorAll("button");
+    expect(cards.length).toBe(1);
+    expect(host.textContent).toContain("Jellyfin");
+    expect(host.textContent).not.toContain("Sonarr");
+    expect(host.textContent).not.toContain("Radarr");
+  });
+
+  it("displays empty state when no integrations match search query", async () => {
+    const onSelect = vi.fn();
+    await act(async () =>
+      root.render(
+        <MantineProvider>
+          <IntegrationSelectGrid onSelect={onSelect} allowedKinds={["jellyfin", "sonarr"]} />
+        </MantineProvider>,
+      ),
+    );
+
+    const searchInput = host.querySelector("input");
+    await act(async () => {
+      if (searchInput) {
+        const nativeInputValueSetter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, "value")?.set;
+        nativeInputValueSetter?.call(searchInput, "nonexistent-integration-query");
+        searchInput.dispatchEvent(new Event("input", { bubbles: true }));
+        searchInput.dispatchEvent(new Event("change", { bubbles: true }));
+      }
+    });
+
+    expect(host.textContent).toContain("No results found");
+    expect(host.querySelectorAll("button").length).toBe(0);
+  });
+
+  it("calls onSelect when Enter is pressed with exactly 1 search match", async () => {
+    const onSelect = vi.fn();
+    await act(async () =>
+      root.render(
+        <MantineProvider>
+          <IntegrationSelectGrid onSelect={onSelect} allowedKinds={["jellyfin", "sonarr"]} />
+        </MantineProvider>,
+      ),
+    );
+
+    const searchInput = host.querySelector("input");
+    await act(async () => {
+      if (searchInput) {
+        const nativeInputValueSetter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, "value")?.set;
+        nativeInputValueSetter?.call(searchInput, "jelly");
+        searchInput.dispatchEvent(new Event("input", { bubbles: true }));
+        searchInput.dispatchEvent(new Event("change", { bubbles: true }));
+      }
+    });
+
+    await act(async () => {
+      searchInput?.dispatchEvent(new KeyboardEvent("keydown", { key: "Enter", bubbles: true }));
+    });
+
+    expect(onSelect).toHaveBeenCalledWith("jellyfin");
+  });
+
+  it("calls onSelect when an integration card is clicked", async () => {
+    const onSelect = vi.fn();
+    await act(async () =>
+      root.render(
+        <MantineProvider>
+          <IntegrationSelectGrid onSelect={onSelect} allowedKinds={["sonarr"]} />
+        </MantineProvider>,
+      ),
+    );
+
+    const cardButton = host.querySelector("button");
+    await act(async () => cardButton?.click());
+    expect(onSelect).toHaveBeenCalledWith("sonarr");
+  });
+
+  it("includes mock integration when enableMockIntegration is true", async () => {
+    const onSelect = vi.fn();
+    await act(async () =>
+      root.render(
+        <MantineProvider>
+          <IntegrationSelectGrid onSelect={onSelect} enableMockIntegration allowedKinds={["mock", "sonarr"]} />
+        </MantineProvider>,
+      ),
+    );
+
+    expect(host.textContent).toContain("Mock");
+    expect(host.textContent).toContain("Sonarr");
+  });
+
+  it("excludes mock integration when enableMockIntegration is false", async () => {
+    const onSelect = vi.fn();
+    await act(async () =>
+      root.render(
+        <MantineProvider>
+          <IntegrationSelectGrid onSelect={onSelect} enableMockIntegration={false} />
+        </MantineProvider>,
+      ),
+    );
+
+    const buttons = Array.from(host.querySelectorAll("button"));
+    const mockButton = buttons.find((btn) => btn.getAttribute("aria-label")?.toLowerCase() === "mock");
+    expect(mockButton).toBeUndefined();
+  });
+});

packages/ui/src/integration-select-grid/integration-select-grid.tsx

@@ -1,27 +1,70 @@
 "use client";
 
 import { useMemo, useState } from "react";
-import { Badge, Card, Center, Group, Stack, Text, Tooltip, UnstyledButton } from "@mantine/core";
-import { IconPuzzle } from "@tabler/icons-react";
+import { Badge, Center, Group, Input, ScrollArea, SimpleGrid, Stack, Text } from "@mantine/core";
+import {
+  IconAd,
+  IconApps,
+  IconBinaryTree,
+  IconBookmark,
+  IconBrandDocker,
+  IconBrandMinecraft,
+  IconBrowser,
+  IconBuildingBank,
+  IconBusStop,
+  IconCalendar,
+  IconCalendarWeek,
+  IconChartBar,
+  IconClock,
+  IconClockPlay,
+  IconCloud,
+  IconDeviceCctv,
+  IconDeviceGamepad,
+  IconDownload,
+  IconGraphFilled,
+  IconHeartRateMonitor,
+  IconHourglass,
+  IconMessage,
+  IconMovie,
+  IconNotes,
+  IconPuzzle,
+  IconReportSearch,
+  IconRobot,
+  IconRocket,
+  IconRss,
+  IconSearch,
+  IconServer2,
+  IconTicket,
+  IconTopologyFull,
+  IconTransform,
+  IconVideo,
+  IconWall,
+  IconWind,
+  IconZoomQuestion,
+} from "@tabler/icons-react";
 
-import type { IntegrationKind } from "@homarr/definitions";
+import type { IntegrationKind, WidgetKind } from "@homarr/definitions";
 import { useI18n } from "@homarr/translation/client";
 
 import { IntegrationAvatar } from "../components/integration-avatar";
-import { SelectGridLayout, selectGridCardHeight } from "../select-grid-layout";
+import { SelectableCard } from "../components/selectable-card";
 import { buildSortedIntegrations, categoryTranslationKeys, filterIntegrations } from "./integration-grid-shared";
-import classes from "./integration-select-grid.module.css";
+import type { IntegrationGridItem } from "./integration-grid-shared";
 
 export interface IntegrationSelectGridProps {
   onSelect: (kind: IntegrationKind) => void;
   enableMockIntegration?: boolean;
   allowedKinds?: readonly IntegrationKind[];
+  integrationData?: { kind: IntegrationKind; name?: string }[];
 }
 
+const selectGridCols = { base: 1, xs: 2, sm: 2, md: 3, lg: 4 };
+
 export const IntegrationSelectGrid = ({
   onSelect,
   enableMockIntegration = false,
   allowedKinds,
+  integrationData,
 }: IntegrationSelectGridProps) => {
   const [search, setSearch] = useState("");
   const t = useI18n();
@@ -32,75 +75,189 @@ export const IntegrationSelectGrid = ({
   const filtered = useMemo(() => filterIntegrations(integrations, search), [integrations, search]);
 
   return (
-    <SelectGridLayout
-      search={search}
-      onSearchChange={setSearch}
-      placeholder={`${t("integration.page.list.search")}...`}
-      ariaLabel={t("integration.page.list.search")}
-    >
-      {filtered.map((integration) => (
-        <UnstyledButton
-          className={classes.choice}
-          key={integration.kind}
-          onClick={() => onSelect(integration.kind)}
-          aria-label={integration.name}
-        >
-          <Card h={selectGridCardHeight} className={classes.card} withBorder>
-            <Stack justify="space-between" h="100%" gap="xs">
-              <Group gap="sm" wrap="nowrap" align="flex-start">
-                <IntegrationAvatar kind={integration.kind} size="sm" />
-                <Text fw={500} lh={1.2} size="sm" lineClamp={2}>
-                  {integration.name}
-                </Text>
-              </Group>
-              <IntegrationGridMeta integration={integration} />
-            </Stack>
-          </Card>
-        </UnstyledButton>
-      ))}
-      {filtered.length === 0 && (
-        <Center p="xl" style={{ gridColumn: "1 / -1" }}>
-          <Text c="dimmed">{t("common.noResults")}</Text>
-        </Center>
-      )}
-    </SelectGridLayout>
-  );
-};
-
-const IntegrationGridMeta = ({ integration }: { integration: ReturnType<typeof buildSortedIntegrations>[number] }) => {
-  const t = useI18n();
-  return (
-    <Stack gap={4} mt="auto">
-      <Group gap={4} wrap="wrap">
-        {integration.categories.slice(0, 2).map((category) => (
-          <Badge key={category} variant="light" size="xs">
-            {categoryTranslationKeys[category] ? t(categoryTranslationKeys[category] as never) : category}
-          </Badge>
-        ))}
-      </Group>
-      {integration.widgets.length > 0 ? (
-        <Tooltip
-          multiline
-          w={200}
-          label={
-            <Stack gap={4}>
-              {integration.widgets.map((widgetKind) => (
-                <Text key={widgetKind} size="xs">
-                  {t(`widget.${widgetKind}.name`)}
-                </Text>
-              ))}
-            </Stack>
+    <Stack gap="md">
+      {/* Top Search Input */}
+      <Input
+        value={search}
+        onChange={(event) => setSearch(event.currentTarget.value)}
+        leftSection={<IconSearch size={16} />}
+        placeholder={`${t("integration.page.list.search")}...`}
+        aria-label={t("integration.page.list.search")}
+        data-autofocus
+        onKeyDown={(event) => {
+          if (event.key === "Enter" && filtered.length === 1 && filtered[0]) {
+            onSelect(filtered[0].kind);
           }
-        >
-          <Badge variant="light" color="blue" size="sm" leftSection={<IconPuzzle size={12} />}>
-            {t("integration.grid.widgetCount", { count: String(integration.widgets.length) })}
-          </Badge>
-        </Tooltip>
-      ) : (
-        <Badge variant="light" color="gray" size="sm">
-          {t("integration.grid.noWidgets")}
-        </Badge>
-      )}
+        }}
+      />
+
+      {/* Scrollable Container with Integration Cards */}
+      <ScrollArea.Autosize mah="70vh" offsetScrollbars>
+        <Stack gap="md" pt="xs" pr="xs" px={4}>
+          <SimpleGrid cols={selectGridCols} spacing="sm">
+            {filtered.map((integration) => (
+              <IntegrationCard
+                key={integration.kind}
+                integration={integration}
+                onSelect={onSelect}
+                connectedCount={(integrationData ?? []).filter((i) => i.kind === integration.kind).length}
+              />
+            ))}
+          </SimpleGrid>
+
+          {filtered.length === 0 && (
+            <Center p="xl">
+              <Text c="dimmed">{t("common.noResults")}</Text>
+            </Center>
+          )}
+        </Stack>
+      </ScrollArea.Autosize>
     </Stack>
   );
 };
+
+// =========================================================================
+// IntegrationCard: Shared Modular SelectableCard with Tied Widgets
+// =========================================================================
+const IntegrationCard = ({
+  integration,
+  onSelect,
+  connectedCount = 0,
+}: {
+  integration: IntegrationGridItem;
+  onSelect: (kind: IntegrationKind) => void;
+  connectedCount?: number;
+}) => {
+  return (
+    <SelectableCard
+      onClick={() => onSelect(integration.kind)}
+      aria-label={integration.name}
+      icon={<IntegrationAvatar kind={integration.kind} size="sm" />}
+      title={integration.name}
+      topRight={<IntegrationCategoryBadges categories={integration.categories} limit={1} />}
+      footerLeft={
+        connectedCount > 0 ? (
+          <Badge variant="light" color="teal" size="xs" radius="xs">
+            {connectedCount} connected
+          </Badge>
+        ) : (
+          <IntegrationCategoryBadges categories={integration.categories} limit={1} />
+        )
+      }
+      footerRight={
+        connectedCount > 0 ? (
+          <IntegrationCategoryBadges categories={integration.categories} limit={1} />
+        ) : (
+          <IntegrationCategoryBadges categories={integration.categories.slice(1)} limit={1} />
+        )
+      }
+    >
+      <Text size="10px" tt="uppercase" fw={700} c="dimmed">
+        Tied Widgets
+      </Text>
+      <IntegrationTiedWidgets widgets={integration.widgets} />
+    </SelectableCard>
+  );
+};
+
+const widgetIconsMap: Partial<Record<WidgetKind, typeof IconPuzzle>> = {
+  clock: IconClock,
+  weather: IconCloud,
+  airQuality: IconWind,
+  countdown: IconHourglass,
+  timer: IconClockPlay,
+  app: IconApps,
+  assistant: IconRobot,
+  iframe: IconBrowser,
+  video: IconDeviceCctv,
+  notebook: IconNotes,
+  anchorNote: IconNotes,
+  dnsHoleSummary: IconAd,
+  dnsHoleControls: IconDeviceGamepad,
+  "smartHome-entityState": IconBinaryTree,
+  "smartHome-executeAutomation": IconBinaryTree,
+  stockPrice: IconBuildingBank,
+  mediaServer: IconVideo,
+  calendar: IconCalendar,
+  downloads: IconDownload,
+  "mediaRequests-requestList": IconZoomQuestion,
+  "mediaRequests-requestStats": IconChartBar,
+  mediaTranscoding: IconTransform,
+  mediaMissing: IconMovie,
+  minecraftServerStatus: IconBrandMinecraft,
+  networkControllerSummary: IconTopologyFull,
+  networkControllerStatus: IconTopologyFull,
+  rssFeed: IconRss,
+  bookmarks: IconBookmark,
+  indexerManager: IconReportSearch,
+  healthMonitoring: IconHeartRateMonitor,
+  releases: IconRocket,
+  mediaReleases: IconTicket,
+  dockerContainers: IconBrandDocker,
+  firewall: IconWall,
+  notifications: IconMessage,
+  systemResources: IconGraphFilled,
+  coolify: IconCloud,
+  systemDisks: IconServer2,
+  timetable: IconBusStop,
+};
+
+const IntegrationTiedWidgets = ({ widgets, limit }: { widgets: WidgetKind[]; limit?: number }) => {
+  const t = useI18n();
+  if (widgets.length === 0) {
+    return (
+      <Text size="xs" c="dimmed" fs="italic">
+        {t("integration.grid.noWidgets")}
+      </Text>
+    );
+  }
+
+  const items = limit ? widgets.slice(0, limit) : widgets;
+  const moreCount = limit ? widgets.length - limit : 0;
+
+  return (
+    <Group gap={4} wrap="wrap">
+      {items.map((widgetKind) => {
+        const WidgetIcon = widgetIconsMap[widgetKind] ?? IconPuzzle;
+        return (
+          <Badge
+            key={widgetKind}
+            variant="default"
+            radius="xs"
+            size="xs"
+            leftSection={<WidgetIcon size={12} />}
+            style={{ fontWeight: 500 }}
+          >
+            {t(`widget.${widgetKind}.name`)}
+          </Badge>
+        );
+      })}
+      {moreCount > 0 && (
+        <Badge variant="subtle" color="gray" size="xs" radius="xs">
+          +{moreCount} more
+        </Badge>
+      )}
+    </Group>
+  );
+};
+
+const IntegrationCategoryBadges = ({
+  categories,
+  limit,
+}: {
+  categories: IntegrationGridItem["categories"];
+  limit?: number;
+}) => {
+  const t = useI18n();
+  const items = limit ? categories.slice(0, limit) : categories;
+
+  return (
+    <Group gap={4} wrap="wrap">
+      {items.map((category) => (
+        <Badge key={category} variant="light" size="xs" color="gray" radius="xs">
+          {categoryTranslationKeys[category] ? t(categoryTranslationKeys[category] as never) : category}
+        </Badge>
+      ))}
+    </Group>
+  );
+};

packages/widgets/package.json

@@ -13,7 +13,9 @@
   },
   "exports": {
     ".": "./index.ts",
-    "./_inputs/json-path-tree-picker": "./src/_inputs/json-path-tree-picker.tsx",
+    "./inputs": "./src/_inputs/index.ts",
+    "./inputs/form": "./src/_inputs/form.ts",
+    "./inputs/json-path-tree-picker": "./src/_inputs/json-path-tree-picker.tsx",
     "./custom-api/component": "./src/custom-api/component.tsx",
     "./custom-api/custom-jsx-display": "./src/custom-api/custom-jsx-display.tsx",
     "./custom-api/extract-display-data": "./src/custom-api/extract-display-data.ts",

packages/widgets/src/_inputs/widget-app-input.tsx

@@ -17,6 +17,12 @@ import type { CommonWidgetInputProps } from "./common";
 import { useWidgetInputTranslation } from "./common";
 import { useFormContext } from "./form";
 
+const renderHereLink = (children: React.ReactNode) => (
+  <Anchor size="xs" component={Link} target="_blank" href="/manage/apps/new">
+    {children}
+  </Anchor>
+);
+
 export const WidgetAppInput = ({ property, kind }: CommonWidgetInputProps<"app">) => {
   const t = useI18n();
   const tInput = useWidgetInputTranslation(kind, property);
@@ -49,13 +55,9 @@ export const WidgetAppInput = ({ property, kind }: CommonWidgetInputProps<"app">
         }
         inputWrapperOrder={["label", "input", "description", "error"]}
         description={
-          <Text size="xs">
+          <Text component="span" size="xs">
             {t.rich("widget.common.app.description", {
-              here: () => (
-                <Anchor size="xs" component={Link} target="_blank" href="/manage/apps/new">
-                  {t("common.here")}
-                </Anchor>
-              ),
+              here: renderHereLink,
             })}
           </Text>
         }

packages/widgets/src/app/component.tsx

@@ -26,7 +26,7 @@ export default function AppWidget({ options, isEditMode, height, width }: Widget
   const t = useI18n();
   const settings = useSettings();
   const board = useRequiredBoard();
-  const appQuery = clientApi.app.byId.useQuery({ id: options.appId });
+  const appQuery = clientApi.app.byId.useQuery({ id: options.appId }, { enabled: Boolean(options.appId) });
   const app = getUsableWidgetQueryData(appQuery);
   const href = getSafeAppHref(app?.href);
   useRegisterSpotlightContextResults(

packages/widgets/src/catalog.ts

@@ -60,7 +60,6 @@ import type { TablerIcon } from "@homarr/ui";
 export const widgetCatalogIcons: Record<WidgetKind, TablerIcon> = {
   clock: IconClock,
   weather: IconCloud,
-  today: IconCalendarWeek,
   airQuality: IconWind,
   countdown: IconHourglass,
   timer: IconClockPlay,

packages/widgets/src/index.tsx

@@ -63,7 +63,6 @@ import * as beszelAlerts from "./beszel-alerts";
 import * as beszelSystemStats from "./beszel-system-stats";
 import * as video from "./video";
 import * as weather from "./weather";
-import * as today from "./today";
 import * as airQuality from "./air-quality";
 import * as countdown from "./countdown";
 import * as timer from "./timer";
@@ -98,7 +97,6 @@ export { AssistantWidgetRendererProvider } from "./assistant/context";
 export const widgetImports = {
   clock,
   weather,
-  today,
   airQuality,
   countdown,
   timer,

packages/widgets/src/manifest.ts

@@ -24,7 +24,6 @@ export type WidgetResources = {
 const moduleLoaders: Record<WidgetKind, () => Promise<WidgetModule>> = {
   clock: () => import("./clock") as Promise<WidgetModule>,
   weather: () => import("./weather") as Promise<WidgetModule>,
-  today: () => import("./today") as Promise<WidgetModule>,
   airQuality: () => import("./air-quality") as Promise<WidgetModule>,
   countdown: () => import("./countdown") as Promise<WidgetModule>,
   timer: () => import("./timer") as Promise<WidgetModule>,
@@ -89,7 +88,6 @@ const moduleLoaders: Record<WidgetKind, () => Promise<WidgetModule>> = {
 const componentLoaders: Record<WidgetKind, () => Promise<WidgetComponentModule>> = {
   clock: () => import("./clock/component") as Promise<WidgetComponentModule>,
   weather: () => import("./weather/component") as Promise<WidgetComponentModule>,
-  today: () => import("./today/component") as Promise<WidgetComponentModule>,
   airQuality: () => import("./air-quality/component") as Promise<WidgetComponentModule>,
   countdown: () => import("./countdown/component") as Promise<WidgetComponentModule>,
   timer: () => import("./timer/component") as Promise<WidgetComponentModule>,

packages/widgets/src/today/component.tsx

@@ -1,223 +0,0 @@
-"use client";
-
-import {
-  Badge,
-  Box,
-  Group,
-  Paper,
-  Progress,
-  RingProgress,
-  ScrollArea,
-  SimpleGrid,
-  Stack,
-  Text,
-  VisuallyHidden,
-} from "@mantine/core";
-
-import { useCurrentIntlLocale, useScopedI18n } from "@homarr/translation/client";
-
-import { formatLocalizedDate } from "../common/locale";
-import { useWidgetNow } from "../common/use-widget-now";
-import type { WidgetComponentProps } from "../definition";
-import { getTodayLayout, getTodayStats } from "./date-stats";
-
-const formatProgress = (value: number) => Math.round(value);
-
-export default function TodayWidget({ options, width, height, displayMode }: WidgetComponentProps<"today">) {
-  const now = useWidgetNow("minute");
-  const locale = useCurrentIntlLocale();
-  const t = useScopedI18n("widget.today");
-
-  if (now === null) {
-    return (
-      <Stack h="100%" align="center" justify="center">
-        <Text c="dimmed">—</Text>
-      </Stack>
-    );
-  }
-
-  const stats = getTodayStats(now, options.weekConvention, locale);
-  if (displayMode === "advanced") {
-    return <AdvancedToday now={now} locale={locale} options={options} stats={stats} />;
-  }
-
-  const layout = getTodayLayout(width, height);
-  const weekday = formatLocalizedDate(now, locale, { weekday: "long" });
-  const month = formatLocalizedDate(now, locale, { month: "long" });
-  const fullDate = formatLocalizedDate(now, locale, { dateStyle: "long" });
-
-  if (layout.tiny) {
-    return (
-      <Stack h="100%" align="center" justify="center" gap={0} px="xs">
-        <Text size="xs" c="dimmed" tt="uppercase" fw={600} truncate>
-          {weekday} · {month}
-        </Text>
-        <Text component="time" dateTime={toDateTime(now)} fz={34} fw={700} lh={1}>
-          {now.getDate()}
-        </Text>
-      </Stack>
-    );
-  }
-
-  return (
-    <Stack h="100%" justify="center" gap="xs" px="md" py="sm" style={{ overflow: "hidden" }}>
-      <Group justify="space-between" align="center" wrap="nowrap">
-        <Stack gap={0} style={{ minWidth: 0 }}>
-          <Text size="xs" c="dimmed" tt="uppercase" fw={600} truncate>
-            {weekday}
-          </Text>
-          <Text component="time" dateTime={toDateTime(now)} fz={layout.showFullDate ? "lg" : 30} fw={700} truncate>
-            {layout.showFullDate ? fullDate : `${month} ${now.getDate()}`}
-          </Text>
-        </Stack>
-        {options.showYearProgress && (
-          <Box>
-            <RingProgress
-              aria-hidden
-              size={54}
-              thickness={5}
-              sections={[{ value: stats.yearProgress, color: "blue" }]}
-              label={
-                <Text size="xs" ta="center" fw={700}>
-                  {formatProgress(stats.yearProgress)}%
-                </Text>
-              }
-            />
-            <VisuallyHidden>
-              <progress value={stats.yearProgress} max={100}>
-                {t("yearProgress", { progress: formatProgress(stats.yearProgress) })}
-              </progress>
-            </VisuallyHidden>
-          </Box>
-        )}
-      </Group>
-
-      {layout.showStats && (
-        <Group gap={6} wrap="wrap">
-          {options.showWeekNumber && <Badge variant="light">{t("weekNumber", { week: stats.weekNumber })}</Badge>}
-          {options.showDayOfYear && (
-            <Badge variant="light">{t("dayOfYear", { day: stats.dayOfYear, total: stats.daysInYear })}</Badge>
-          )}
-          {layout.showQuarter && options.showQuarter && (
-            <Badge variant="light">{t("quarter", { quarter: stats.quarter })}</Badge>
-          )}
-          {layout.showQuarter && (
-            <Text size="xs" c="dimmed">
-              {t("daysAfterToday", { days: stats.daysAfterToday })}
-            </Text>
-          )}
-        </Group>
-      )}
-
-      {layout.showMonthProgress && <ProgressMetric label={t("monthProgressLabel")} value={stats.monthProgress} />}
-    </Stack>
-  );
-}
-
-interface AdvancedTodayProps {
-  now: Date;
-  locale: string;
-  options: WidgetComponentProps<"today">["options"];
-  stats: ReturnType<typeof getTodayStats>;
-}
-
-const AdvancedToday = ({ now, locale, options, stats }: AdvancedTodayProps) => {
-  const t = useScopedI18n("widget.today");
-  const numberFormatter = new Intl.NumberFormat(locale);
-  const visibleMetrics = [
-    options.showWeekNumber && { label: t("advanced.week"), value: numberFormatter.format(stats.weekNumber) },
-    options.showDayOfYear && {
-      label: t("advanced.dayOfYear"),
-      value: `${numberFormatter.format(stats.dayOfYear)} / ${numberFormatter.format(stats.daysInYear)}`,
-    },
-    options.showQuarter && {
-      label: t("advanced.quarter"),
-      value: t("advanced.quarterValue", { quarter: stats.quarter }),
-    },
-    { label: t("advanced.daysRemaining"), value: numberFormatter.format(stats.daysAfterToday) },
-  ].filter((metric): metric is { label: string; value: string } => Boolean(metric));
-
-  return (
-    <ScrollArea h="100%" w="100%" type="auto" offsetScrollbars scrollbarSize={6}>
-      <Stack gap="md" p="md">
-        <Stack gap={0}>
-          <Text component="time" dateTime={toDateTime(now)} fz="xl" fw={700}>
-            {formatLocalizedDate(now, locale, { dateStyle: "full" })}
-          </Text>
-          {options.showWeekNumber && (
-            <Text size="sm" c="dimmed">
-              {t(`weekConvention.${options.weekConvention}`)}
-            </Text>
-          )}
-        </Stack>
-
-        <SimpleGrid cols={{ base: 2, sm: 4 }} spacing="xs">
-          {visibleMetrics.map((metric) => (
-            <Paper key={metric.label} withBorder p="sm">
-              <Text size="xs" c="dimmed">
-                {metric.label}
-              </Text>
-              <Text fz="xl" fw={700}>
-                {metric.value}
-              </Text>
-            </Paper>
-          ))}
-        </SimpleGrid>
-
-        <SimpleGrid cols={{ base: 1, sm: 3 }} spacing="sm">
-          <ProgressMetric label={t("weekProgressLabel")} value={stats.weekProgress} />
-          <ProgressMetric label={t("monthProgressLabel")} value={stats.monthProgress} />
-          {options.showYearProgress && <ProgressMetric label={t("yearProgressLabel")} value={stats.yearProgress} />}
-        </SimpleGrid>
-
-        <SimpleGrid cols={{ base: 3, sm: 4, md: 6 }} spacing="xs">
-          {Array.from({ length: 12 }, (_, monthIndex) => {
-            const date = new Date(now.getFullYear(), monthIndex, 1);
-            const isCurrent = monthIndex === stats.monthIndex;
-            return (
-              <Paper
-                key={monthIndex}
-                withBorder
-                p="xs"
-                bg={isCurrent ? "var(--mantine-primary-color-light)" : undefined}
-              >
-                <Text size="sm" fw={isCurrent ? 700 : 500} ta="center">
-                  {formatLocalizedDate(date, locale, { month: "short" })}
-                </Text>
-                {isCurrent && (
-                  <Text size="xs" c="dimmed" ta="center">
-                    {now.getDate()}
-                  </Text>
-                )}
-              </Paper>
-            );
-          })}
-        </SimpleGrid>
-      </Stack>
-    </ScrollArea>
-  );
-};
-
-const ProgressMetric = ({ label, value }: { label: string; value: number }) => {
-  const roundedValue = formatProgress(value);
-  return (
-    <Box>
-      <Group justify="space-between" gap="xs" mb={3}>
-        <Text size="xs" c="dimmed">
-          {label}
-        </Text>
-        <Text size="xs" fw={600}>
-          {roundedValue}%
-        </Text>
-      </Group>
-      <Progress value={value} aria-label={`${label}: ${roundedValue}%`} />
-    </Box>
-  );
-};
-
-const toDateTime = (date: Date) => {
-  const year = date.getFullYear();
-  const month = String(date.getMonth() + 1).padStart(2, "0");
-  const day = String(date.getDate()).padStart(2, "0");
-  return `${year}-${month}-${day}`;
-};

packages/widgets/src/today/date-stats.spec.ts

@@ -1,47 +0,0 @@
-import { describe, expect, it } from "vitest";
-
-import { getTodayLayout, getTodayStats } from "./date-stats";
-
-describe("today date statistics", () => {
-  it("accounts for leap years", () => {
-    const stats = getTodayStats(new Date(2024, 11, 31, 12), "iso");
-    expect(stats.dayOfYear).toBe(366);
-    expect(stats.daysInYear).toBe(366);
-    expect(stats.daysAfterToday).toBe(0);
-  });
-
-  it("uses the requested week convention", () => {
-    const date = new Date(2023, 0, 1, 12);
-    expect(getTodayStats(date, "iso").weekNumber).toBe(52);
-    expect(getTodayStats(date, "locale", "en-US").weekNumber).toBe(1);
-    expect(getTodayStats(date, "locale", "de-DE").weekNumber).toBe(52);
-  });
-
-  it("returns bounded calendar progress", () => {
-    const stats = getTodayStats(new Date(2026, 7, 20, 12), "iso");
-    expect(stats.quarter).toBe(3);
-    expect(stats.weekProgress).toBeGreaterThanOrEqual(0);
-    expect(stats.weekProgress).toBeLessThanOrEqual(100);
-    expect(stats.monthProgress).toBeGreaterThanOrEqual(0);
-    expect(stats.monthProgress).toBeLessThanOrEqual(100);
-    expect(stats.yearProgress).toBeGreaterThanOrEqual(0);
-    expect(stats.yearProgress).toBeLessThanOrEqual(100);
-  });
-});
-
-describe("today compact layout", () => {
-  it("keeps tiny widgets focused on the date", () => {
-    expect(getTodayLayout(140, 120)).toMatchObject({ tiny: true, showStats: false });
-  });
-
-  it("reveals secondary information only when both axes have room", () => {
-    expect(getTodayLayout(240, 120)).toMatchObject({ showStats: true, showQuarter: false });
-    expect(getTodayLayout(300, 180)).toEqual({
-      tiny: false,
-      showFullDate: true,
-      showStats: true,
-      showQuarter: true,
-      showMonthProgress: true,
-    });
-  });
-});

packages/widgets/src/today/date-stats.ts

@@ -1,172 +0,0 @@
-import dayjs from "dayjs";
-import dayOfYear from "dayjs/plugin/dayOfYear";
-import quarterOfYear from "dayjs/plugin/quarterOfYear";
-
-dayjs.extend(dayOfYear);
-dayjs.extend(quarterOfYear);
-
-export type WeekConvention = "locale" | "iso";
-
-export interface TodayStats {
-  dayOfYear: number;
-  daysInYear: number;
-  daysAfterToday: number;
-  monthIndex: number;
-  quarter: number;
-  weekNumber: number;
-  weekProgress: number;
-  monthProgress: number;
-  yearProgress: number;
-}
-
-const getProgress = (value: number, start: number, end: number) => {
-  if (end <= start) return 0;
-  return Math.min(100, Math.max(0, ((value - start) / (end - start)) * 100));
-};
-
-export const getTodayStats = (date: Date, weekConvention: WeekConvention, locale = "en-US"): TodayStats => {
-  const value = dayjs(date);
-  const yearStart = value.startOf("year");
-  const nextYearStart = yearStart.add(1, "year");
-  const monthStart = value.startOf("month");
-  const nextMonthStart = monthStart.add(1, "month");
-  const weekRules = getWeekRules(weekConvention, locale);
-  const weekDay = value.day() === 0 ? 7 : value.day();
-  const daysSinceWeekStart = (weekDay - weekRules.firstDay + 7) % 7;
-  const weekStart = new Date(date.getFullYear(), date.getMonth(), date.getDate() - daysSinceWeekStart);
-  const nextWeekStart = new Date(weekStart.getFullYear(), weekStart.getMonth(), weekStart.getDate() + 7);
-  const currentDayOfYear = value.dayOfYear();
-  const daysInYear = yearStart.endOf("year").dayOfYear();
-
-  return {
-    dayOfYear: currentDayOfYear,
-    daysInYear,
-    daysAfterToday: daysInYear - currentDayOfYear,
-    monthIndex: value.month(),
-    quarter: value.quarter(),
-    weekNumber: getWeekNumber(date, weekRules),
-    weekProgress: getProgress(value.valueOf(), weekStart.getTime(), nextWeekStart.getTime()),
-    monthProgress: getProgress(value.valueOf(), monthStart.valueOf(), nextMonthStart.valueOf()),
-    yearProgress: getProgress(value.valueOf(), yearStart.valueOf(), nextYearStart.valueOf()),
-  };
-};
-
-interface WeekRules {
-  firstDay: number;
-  minimalDays: number;
-}
-
-interface LocaleWeekInfo {
-  firstDay: number;
-  minimalDays?: number;
-}
-
-type LocaleWithWeekInfo = Intl.Locale & {
-  weekInfo?: LocaleWeekInfo;
-  getWeekInfo?: () => LocaleWeekInfo;
-};
-
-const fourDayMinimumRegions = new Set([
-  "AD",
-  "AN",
-  "AT",
-  "AX",
-  "BE",
-  "BG",
-  "CH",
-  "CZ",
-  "DE",
-  "DK",
-  "EE",
-  "ES",
-  "FI",
-  "FJ",
-  "FO",
-  "FR",
-  "GF",
-  "GB",
-  "GG",
-  "GI",
-  "GP",
-  "GR",
-  "IE",
-  "IM",
-  "IS",
-  "IT",
-  "LI",
-  "LT",
-  "LU",
-  "MC",
-  "MQ",
-  "NL",
-  "NO",
-  "PL",
-  "PT",
-  "RE",
-  "RU",
-  "SE",
-  "SJ",
-  "SK",
-  "VA",
-]);
-
-const getWeekRules = (convention: WeekConvention, locale: string): WeekRules => {
-  if (convention === "iso") return { firstDay: 1, minimalDays: 4 };
-  try {
-    const localeInfo = new Intl.Locale(locale) as LocaleWithWeekInfo;
-    const weekInfo = localeInfo.weekInfo ?? localeInfo.getWeekInfo?.();
-    if (weekInfo) {
-      const region = localeInfo.maximize().region;
-      const fallbackMinimalDays = region && fourDayMinimumRegions.has(region) ? 4 : 1;
-      return { firstDay: weekInfo.firstDay, minimalDays: weekInfo.minimalDays ?? fallbackMinimalDays };
-    }
-  } catch {
-    // Invalid locales fall back to the common US week convention.
-  }
-  return { firstDay: 7, minimalDays: 1 };
-};
-
-const getWeekNumber = (date: Date, rules: WeekRules): number => {
-  const dateDay = Date.UTC(date.getFullYear(), date.getMonth(), date.getDate());
-  let weekYear = date.getFullYear();
-  let firstWeekStart = getFirstWeekStart(weekYear, rules);
-
-  if (dateDay < firstWeekStart) {
-    weekYear -= 1;
-    firstWeekStart = getFirstWeekStart(weekYear, rules);
-  } else {
-    const nextFirstWeekStart = getFirstWeekStart(weekYear + 1, rules);
-    if (dateDay >= nextFirstWeekStart) return 1;
-  }
-
-  return Math.floor((dateDay - firstWeekStart) / (7 * 86_400_000)) + 1;
-};
-
-const getFirstWeekStart = (year: number, rules: WeekRules): number => {
-  const januaryFirst = Date.UTC(year, 0, 1);
-  const sundayBasedWeekDay = new Date(januaryFirst).getUTCDay();
-  const weekDay = sundayBasedWeekDay === 0 ? 7 : sundayBasedWeekDay;
-  const daysBeforeJanuary = (weekDay - rules.firstDay + 7) % 7;
-  const daysInFirstWeek = 7 - daysBeforeJanuary;
-  if (daysInFirstWeek >= rules.minimalDays) return januaryFirst - daysBeforeJanuary * 86_400_000;
-  return januaryFirst + daysInFirstWeek * 86_400_000;
-};
-
-export interface TodayLayout {
-  tiny: boolean;
-  showFullDate: boolean;
-  showStats: boolean;
-  showQuarter: boolean;
-  showMonthProgress: boolean;
-}
-
-export const getTodayLayout = (width: number, height: number): TodayLayout => {
-  const tiny = width < 150 || height < 96;
-  return {
-    tiny,
-    showFullDate: !tiny && width >= 180,
-    showStats: !tiny && width >= 210 && height >= 115,
-    showQuarter: width >= 240 && height >= 145,
-    showMonthProgress: width >= 300 && height >= 170,
-  };
-};

packages/widgets/src/today/index.ts

@@ -1,24 +0,0 @@
-import { IconCalendarWeek } from "@tabler/icons-react";
-
-import { createWidgetDefinition } from "../definition";
-import { optionsBuilder } from "../options";
-
-export const { definition, componentLoader } = createWidgetDefinition("today", {
-  icon: IconCalendarWeek,
-  supportsAdvancedFocus: true,
-  createOptions() {
-    return optionsBuilder.from((factory) => ({
-      weekConvention: factory.select({
-        defaultValue: "locale",
-        options: [
-          { value: "locale", label: (t) => t("widget.today.option.weekConvention.options.locale") },
-          { value: "iso", label: (t) => t("widget.today.option.weekConvention.options.iso") },
-        ],
-      }),
-      showWeekNumber: factory.switch({ defaultValue: true }),
-      showDayOfYear: factory.switch({ defaultValue: true }),
-      showQuarter: factory.switch({ defaultValue: true }),
-      showYearProgress: factory.switch({ defaultValue: true }),
-    }));
-  },
-}).withDynamicImport(() => import("./component"));