style: auto-fix lint and format

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

@@ -23,6 +23,8 @@ export const ItemSelectModal = createModal<void>(({ actions }) => {
   const { data: integrationData } = clientApi.integration.all.useQuery();
   const settings = useSettings();
 
+  const availableKinds = useMemo(() => new Set((integrationData ?? []).map((i) => i.kind)), [integrationData]);
+
   const items = useMemo(
     () =>
       objectEntries(widgetImports)
@@ -40,10 +42,15 @@ export const ItemSelectModal = createModal<void>(({ actions }) => {
     [t],
   );
 
-  const filteredItems = useMemo(
-    () => items.filter((item) => item.name.toLowerCase().includes(search.toLowerCase())),
-    [items, search],
-  );
+  const filteredItems = useMemo(() => {
+    const query = search.toLowerCase().trim();
+    if (!query) return items;
+    return items.filter(
+      (item) =>
+        item.name.toLowerCase().includes(query) ||
+        item.supportedIntegrations.some((kind) => getIntegrationName(kind).toLowerCase().includes(query)),
+    );
+  }, [items, search]);
 
   const handleAdd = (kind: WidgetKind) => {
     const definition = widgetImports[kind].definition;
@@ -98,7 +105,12 @@ export const ItemSelectModal = createModal<void>(({ actions }) => {
       }}
     >
       {filteredItems.map((item) => (
-        <WidgetItem key={item.kind} item={item} onSelect={() => handleAdd(item.kind)} />
+        <WidgetItem
+          key={item.kind}
+          item={item}
+          onSelect={() => handleAdd(item.kind)}
+          hasMatchingIntegration={item.supportedIntegrations.some((kind) => availableKinds.has(kind))}
+        />
       ))}
 
       {filteredItems.length === 0 && (
@@ -116,6 +128,7 @@ export const ItemSelectModal = createModal<void>(({ actions }) => {
 const WidgetItem = ({
   item,
   onSelect,
+  hasMatchingIntegration,
 }: {
   item: {
     kind: WidgetKind;
@@ -125,6 +138,7 @@ const WidgetItem = ({
     icon: TablerIcon;
   };
   onSelect: () => void;
+  hasMatchingIntegration: boolean;
 }) => {
   const t = useI18n();
 
@@ -133,7 +147,12 @@ const WidgetItem = ({
       h={selectGridCardHeight}
       withBorder
       pos="relative"
-      style={{ overflow: "hidden", "--_hover-opacity": "0" }}
+      style={{
+        overflow: "hidden",
+        "--_hover-opacity": "0",
+        borderColor: hasMatchingIntegration ? "var(--mantine-color-blue-6)" : undefined,
+        borderWidth: hasMatchingIntegration ? 2 : undefined,
+      }}
       onMouseEnter={(e) => e.currentTarget.style.setProperty("--_hover-opacity", "1")}
       onMouseLeave={(e) => e.currentTarget.style.setProperty("--_hover-opacity", "0")}
     >

apps/nextjs/src/components/board/items/widget-hover-metadata.ts

@@ -1,155 +0,0 @@
-import { objectEntries } from "@homarr/common";
-import type { IntegrationKind, WidgetKind } from "@homarr/definitions";
-import type { SettingsContextProps } from "@homarr/settings/creator";
-import type { WidgetOptionDefinition, WidgetOptionType } from "@homarr/widgets";
-import { reduceWidgetOptionsWithDefaultValues, widgetImports } from "@homarr/widgets";
-
-import type { SectionItem } from "~/app/[locale]/boards/_types";
-
-export type Translator = {
-  (key: string): string;
-};
-
-export interface HoverMetadataItem {
-  label: string;
-  value: string;
-}
-
-const maxMetadataItems = 3;
-
-const skippedOptionTypes: Partial<Record<WidgetOptionType, true>> = {
-  app: true,
-  anchorNote: true,
-  dynamicSelect: true,
-  sortableItemList: true,
-  multiReleasesRepositories: true,
-  umamiEventName: true,
-  umamiEventNames: true,
-  umamiWebsite: true,
-};
-
-const isEqualValue = (left: unknown, right: unknown) => JSON.stringify(left) === JSON.stringify(right);
-
-type OptionDefinitionWithRules = WidgetOptionDefinition & {
-  shouldHide?: (options: never, integrationKinds: IntegrationKind[]) => boolean;
-  options?: readonly { value: unknown; label: unknown }[];
-};
-
-type OptionFormatter = (value: unknown, definition: OptionDefinitionWithRules, t: Translator) => string | null;
-
-const resolveSelectLabel = (value: unknown, definition: OptionDefinitionWithRules, t: Translator) => {
-  const match = definition.options?.find((option) => option.value === value);
-  const label = match?.label;
-  const fallbackLabel = () => String(value);
-  const labelResolvers: Record<string, () => string> = {
-    function: () => (label as (translator: Translator) => string)(t),
-    string: () => label as string,
-    missing: fallbackLabel,
-  };
-  const labelType = typeof label;
-  const resolveLabel: () => string = labelResolvers[labelType] ?? fallbackLabel;
-  return resolveLabel();
-};
-
-const optionTypeFormatters: Partial<Record<WidgetOptionType, OptionFormatter>> = {
-  switch: (value, _, t) => {
-    const switchLabels: Record<string, string> = {
-      true: t("common.action.show"),
-      false: t("common.action.hide"),
-    };
-    return switchLabels[String(Boolean(value))] ?? null;
-  },
-  text: (value) => {
-    const text = String(value).trim();
-    return text.length > 0 ? text : null;
-  },
-  number: (value) => String(value),
-  slider: (value) => String(value),
-  select: (value, definition, t) => resolveSelectLabel(value, definition, t),
-  multiSelect: (value) => {
-    const items = value as unknown[];
-    return items.length > 0 ? String(items.length) : null;
-  },
-  multiText: (value) => {
-    const items = (value as string[]).filter((entry) => entry.trim().length > 0);
-    return items.length > 0 ? items.join(", ") : null;
-  },
-  location: (value) => {
-    const location = value as { name?: string };
-    const name = location.name?.trim() ?? "";
-    return name.length > 0 ? name : null;
-  },
-};
-
-const formatOptionValue = (
-  type: WidgetOptionType,
-  value: unknown,
-  definition: OptionDefinitionWithRules,
-  t: Translator,
-) => {
-  const formatter = optionTypeFormatters[type];
-  return formatter?.(value, definition, t) ?? null;
-};
-
-const getOptionLabel = (kind: WidgetKind, key: string, t: Translator) => {
-  const labelKey = `widget.${kind}.option.${key}.label`;
-  const translated = t(labelKey);
-  return translated === labelKey ? key : translated;
-};
-
-export const collectWidgetHoverMetadata = (
-  item: SectionItem,
-  settings: Pick<SettingsContextProps, "enableStatusByDefault" | "forceDisableStatus">,
-  integrationKinds: IntegrationKind[],
-  t: Translator,
-): HoverMetadataItem[] => {
-  const { definition } = widgetImports[item.kind];
-  const optionDefinitions = definition.createOptions(settings) as Record<string, OptionDefinitionWithRules>;
-  const resolvedOptions = reduceWidgetOptionsWithDefaultValues(item.kind, settings, item.options);
-
-  return objectEntries(optionDefinitions)
-    .filter(([key, optionDefinition]) => {
-      const skip = skippedOptionTypes[optionDefinition.type];
-      const hidden = optionDefinition.shouldHide?.(resolvedOptions as never, integrationKinds);
-      const unchanged = isEqualValue(resolvedOptions[key], optionDefinition.defaultValue);
-      return !skip && !hidden && !unchanged;
-    })
-    .map(([key, optionDefinition]) => {
-      const formattedValue = formatOptionValue(optionDefinition.type, resolvedOptions[key], optionDefinition, t);
-      return {
-        label: getOptionLabel(item.kind, key, t),
-        value: formattedValue ?? "",
-      };
-    })
-    .filter((entry) => entry.value.length > 0)
-    .slice(0, maxMetadataItems);
-};
-
-interface DisplayNameSource {
-  matches: (item: SectionItem, options: Record<string, unknown>) => boolean;
-  resolve: (item: SectionItem, options: Record<string, unknown>) => string;
-}
-
-const displayNameSources: DisplayNameSource[] = [
-  {
-    matches: (item) => Boolean(item.advancedOptions.title?.trim()),
-    resolve: (item) => item.advancedOptions.title?.trim() ?? "",
-  },
-  {
-    matches: (item, options) =>
-      item.kind === "clock" &&
-      Boolean(options.customTitleToggle) &&
-      String(options.customTitle ?? "").trim().length > 0,
-    resolve: (_, options) => String(options.customTitle).trim(),
-  },
-];
-
-export const resolveWidgetDisplayName = (
-  item: SectionItem,
-  settings: Pick<SettingsContextProps, "enableStatusByDefault" | "forceDisableStatus">,
-  t: Translator,
-) => {
-  const resolvedOptions = reduceWidgetOptionsWithDefaultValues(item.kind, settings, item.options);
-  const source = displayNameSources.find((entry) => entry.matches(item, resolvedOptions));
-  return source?.resolve(item, resolvedOptions) ?? t(`widget.${item.kind}.name`);
-};

apps/nextjs/src/components/board/items/widget-hover-overlay.module.css

@@ -1,116 +0,0 @@
-.wrapper {
-  position: absolute;
-  left: 10px;
-  right: 10px;
-  bottom: calc(100% - 10px);
-  margin-bottom: 1px;
-  z-index: 200;
-  pointer-events: auto;
-  opacity: 0;
-  transform: translateY(6px);
-  transition:
-    opacity 150ms ease,
-    transform 150ms ease;
-}
-
-:global(.grid-stack-item[data-type="item"]:not([data-kind="app"]):hover) .wrapper,
-:global(.grid-stack-item[data-type="item"]:not([data-kind="app"]):focus-within) .wrapper {
-  opacity: 1;
-  transform: translateY(0);
-}
-
-.panel {
-  @mixin dark {
-    --background-color: rgb(from var(--mantine-color-dark-7) r g b / 0.96);
-    --border-color: rgb(from var(--mantine-color-dark-4) r g b / 0.9);
-  }
-  @mixin light {
-    --background-color: rgb(from var(--mantine-color-white) r g b / 0.96);
-    --border-color: rgb(from var(--mantine-color-gray-3) r g b / 0.9);
-  }
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  min-height: 28px;
-  padding: 4px 8px;
-  border: 1px solid var(--border-color);
-  border-radius: var(--mantine-radius-md);
-  background-color: var(--background-color);
-  box-shadow: 0 4px 16px rgb(0 0 0 / 0.12);
-  backdrop-filter: blur(8px);
-  overflow: hidden;
-}
-
-.nameSection {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  min-width: 0;
-  flex-shrink: 0;
-}
-
-.widgetIcon {
-  flex-shrink: 0;
-  color: var(--mantine-color-dimmed);
-}
-
-.name {
-  font-size: 11px;
-  font-weight: 600;
-  line-height: 1.2;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.integrations {
-  flex-shrink: 0;
-}
-
-.integrationAvatar {
-  border: none;
-}
-
-.metadata {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  min-width: 0;
-  margin-left: auto;
-}
-
-.metadataItem {
-  @mixin dark {
-    --chip-background: rgb(from var(--mantine-color-dark-5) r g b / 0.9);
-  }
-  @mixin light {
-    --chip-background: rgb(from var(--mantine-color-gray-1) r g b / 0.95);
-  }
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  max-width: 140px;
-  padding: 2px 6px;
-  border-radius: var(--mantine-radius-md);
-  background-color: var(--chip-background);
-  font-size: 10px;
-  line-height: 1.2;
-  white-space: nowrap;
-  overflow: hidden;
-}
-
-.metadataLabel {
-  color: var(--mantine-color-dimmed);
-  flex-shrink: 0;
-}
-
-.metadataValue {
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-@media (max-width: 768px) {
-  .wrapper {
-    display: none;
-  }
-}

apps/nextjs/src/components/board/items/widget-hover-overlay.tsx

@@ -1,86 +0,0 @@
-"use client";
-
-import { Avatar, Group, Text, Tooltip } from "@mantine/core";
-
-import type { RouterOutputs } from "@homarr/api";
-import { useEditMode } from "@homarr/boards/edit-mode";
-import { getIconUrl } from "@homarr/definitions";
-import { useSettings } from "@homarr/settings";
-import { useI18n } from "@homarr/translation/client";
-import { widgetImports } from "@homarr/widgets";
-
-import type { SectionItem } from "~/app/[locale]/boards/_types";
-import type { Translator } from "./widget-hover-metadata";
-import { collectWidgetHoverMetadata, resolveWidgetDisplayName } from "./widget-hover-metadata";
-import classes from "./widget-hover-overlay.module.css";
-
-interface WidgetHoverOverlayProps {
-  item: SectionItem;
-  integrations: RouterOutputs["integration"]["all"] | undefined;
-}
-
-export const WidgetHoverOverlay = ({ item, integrations }: WidgetHoverOverlayProps) => {
-  const [isEditMode] = useEditMode();
-  const settings = useSettings();
-  const t = useI18n();
-  const { definition } = widgetImports[item.kind];
-  const WidgetIcon = definition.icon;
-
-  const translate = ((key: string) => t(key as never)) as Translator;
-  const displayName = resolveWidgetDisplayName(item, settings, translate);
-
-  const connectedIntegrations = (integrations ?? []).filter((integration) =>
-    item.integrationIds.includes(integration.id),
-  );
-  const metadataItems = collectWidgetHoverMetadata(
-    item,
-    settings,
-    connectedIntegrations.map((integration) => integration.kind),
-    translate,
-  );
-  const hasIntegrations = connectedIntegrations.length > 0;
-  const hasMetadata = metadataItems.length > 0;
-
-  if (isEditMode) {
-    return null;
-  }
-
-  return (
-    <div className={classes.wrapper}>
-      <div className={classes.panel}>
-        <div className={classes.nameSection}>
-          <WidgetIcon size={14} stroke={1.75} className={classes.widgetIcon} />
-          <Text className={classes.name} title={displayName}>
-            {displayName}
-          </Text>
-        </div>
-
-        {hasIntegrations && (
-          <Avatar.Group spacing="xs" className={classes.integrations}>
-            {connectedIntegrations.map((integration) => (
-              <Tooltip key={integration.id} label={integration.name} withArrow position="top">
-                <Avatar
-                  src={getIconUrl(integration.kind)}
-                  size={20}
-                  radius="sm"
-                  className={classes.integrationAvatar}
-                />
-              </Tooltip>
-            ))}
-          </Avatar.Group>
-        )}
-
-        {hasMetadata && (
-          <Group className={classes.metadata} gap={4}>
-            {metadataItems.map((metadataItem) => (
-              <div key={`${metadataItem.label}-${metadataItem.value}`} className={classes.metadataItem}>
-                <span className={classes.metadataLabel}>{metadataItem.label}</span>
-                <span className={classes.metadataValue}>{metadataItem.value}</span>
-              </div>
-            ))}
-          </Group>
-        )}
-      </div>
-    </div>
-  );
-};

apps/nextjs/src/components/board/sections/content.tsx

@@ -2,12 +2,8 @@ import { useMemo } from "react";
 
 import type { GridItemHTMLElement } from "@homarr/gridstack";
 
-import type { RouterOutputs } from "@homarr/api";
-import { clientApi } from "@homarr/api/client";
-
 import type { DynamicSectionItem, SectionItem } from "~/app/[locale]/boards/_types";
 import { BoardItemContent } from "../items/item-content";
-import { WidgetHoverOverlay } from "../items/widget-hover-overlay";
 import { BoardDynamicSection } from "./dynamic-section";
 import { GridStackItem } from "./gridstack/gridstack-item";
 import { useSectionContext } from "./section-context";
@@ -15,7 +11,6 @@ import { useSectionItems } from "./use-section-items";
 
 export const SectionContent = () => {
   const { innerSections, items, refs } = useSectionContext();
-  const { data: integrations } = clientApi.integration.all.useQuery();
 
   /**
    * IMPORTANT: THE ORDER OF THE BELOW ITEMS HAS TO MATCH THE ORDER OF
@@ -23,7 +18,7 @@ export const SectionContent = () => {
    * @see https://github.com/homarr-labs/homarr/pull/1770
    */
   const sortedItems = useMemo(() => {
-    return [...items, ...innerSections].toSorted((itemA, itemB) => {
+    return [...items, ...innerSections].sort((itemA, itemB) => {
       if (itemA.yOffset === itemB.yOffset) {
         return itemA.xOffset - itemB.xOffset;
       }
@@ -35,7 +30,7 @@ export const SectionContent = () => {
   return (
     <>
       {sortedItems.map((item) => (
-        <Item key={item.id} item={item} innerRef={refs.items.current[item.id]} integrations={integrations} />
+        <Item key={item.id} item={item} innerRef={refs.items.current[item.id]} />
       ))}
     </>
   );
@@ -44,12 +39,12 @@ export const SectionContent = () => {
 interface ItemProps {
   item: DynamicSectionItem | SectionItem;
   innerRef: React.RefObject<GridItemHTMLElement | null> | undefined;
-  integrations: RouterOutputs["integration"]["all"] | undefined;
 }
 
-const Item = ({ item, innerRef, integrations }: ItemProps) => {
+const Item = ({ item, innerRef }: ItemProps) => {
   const minWidth = useMinSize(item, "x");
   const minHeight = useMinSize(item, "y");
+
   return (
     <GridStackItem
       key={item.id}
@@ -64,7 +59,6 @@ const Item = ({ item, innerRef, integrations }: ItemProps) => {
       minWidth={minWidth}
       minHeight={minHeight}
     >
-      {item.type === "item" && item.kind !== "app" && <WidgetHoverOverlay item={item} integrations={integrations} />}
       {item.type === "item" ? <BoardItemContent item={item} /> : <BoardDynamicSection section={item} />}
     </GridStackItem>
   );

apps/nextjs/src/styles/gridstack.scss

@@ -102,10 +102,6 @@
   overflow-y: auto;
 }
 
-.grid-stack > .grid-stack-item[data-type="item"] {
-  overflow: visible;
-}
-
 .grid-stack.grid-stack-animate {
   transition: none;
 }

packages/widgets/src/index.tsx

@@ -53,7 +53,6 @@ import * as weather from "./weather";
 
 export type { WidgetDefinition, WidgetOptionsSettings } from "./definition";
 export type { WidgetComponentProps };
-export type { WidgetOptionDefinition, WidgetOptionType } from "./options";
 
 export const widgetImports = {
   clock,

pnpm-lock.yaml

@@ -373,8 +373,8 @@ catalogs:
       specifier: 5.11.0
       version: 5.11.0
     isomorphic-dompurify:
-      specifier: ^3.16.0
-      version: 3.16.0
+      specifier: ^3.15.0
+      version: 3.15.0
     jotai:
       specifier: ^2.20.0
       version: 2.20.0
@@ -819,7 +819,7 @@ importers:
         version: 13.0.6
       isomorphic-dompurify:
         specifier: 'catalog:'
-        version: 3.16.0(@noble/hashes@2.0.1)
+        version: 3.15.0(@noble/hashes@2.0.1)
       jotai:
         specifier: 'catalog:'
         version: 2.20.0(@babel/core@7.29.0)(@babel/template@7.28.6)(@types/react@19.2.16)(react@19.2.7)
@@ -6349,8 +6349,8 @@ packages:
   dompurify@3.4.5:
     resolution: {integrity: sha512-OrwIBKsdNSVEeubdJ1HBv/wNENRM9ytAVCv7YXt//A3vPdVMNuACRqK9mXCGCBW2ln7BT/A4X0jXHo2Gu89miA==}
 
-  dompurify@3.4.8:
-    resolution: {integrity: sha512-yb1cEmaOum7wFvOCSQxyfgVlv5D47Rc30iZWoMpbDIWTnJ6grDDQyu2KFJzB2k7u0pMuJcQ1zphH//fFnw2tjQ==}
+  dompurify@3.4.7:
+    resolution: {integrity: sha512-2jBxDJY4RR06tQNy4w5FlFH7kfxsQZlufd0sbv+chfHCxeJwrFw2baUDsSwvBISD4K4RDbd0PTfy3uNXsR6siA==}
 
   dot-prop@5.3.0:
     resolution: {integrity: sha512-QM8q3zDe58hqUqjraQOmzZ1LIH9SWQJTlEKCH4kJ2oQvLZk7RbQXvtDM2XEq3fwkV9CCvvH4LA0AV+ogFsBM2Q==}
@@ -7208,8 +7208,8 @@ packages:
     resolution: {integrity: sha512-6B3tLtFqtQS4ekarvLVMZ+X+VlvQekbe4taUkf/rhVO3d/h0M2rfARm/pXLcPEsjjMsFgrFgSrhQIxcSVrBz8w==}
     engines: {node: '>=18'}
 
-  isomorphic-dompurify@3.16.0:
-    resolution: {integrity: sha512-KzTJsMuVPqPwBOD0F6jKXoV/+v8CSx0rxVp+/67KV6Xbw++0zD/avT3bZsgwR0M5QRMiOE+QqQtoZLEJYy1C4Q==}
+  isomorphic-dompurify@3.15.0:
+    resolution: {integrity: sha512-9ZtkbQ8+SgNf6LuDAdu9bq23dVXMIGNM8ZYnyl2MufyZiSD5dqAUJcyjtYZz7B80HuPpEn/f0NCS6zKvavHtfA==}
     engines: {node: ^20.19.0 || ^22.13.0 || >=24.0.0}
 
   isomorphic-ws@5.0.0:
@@ -13711,7 +13711,7 @@ snapshots:
     optionalDependencies:
       '@types/trusted-types': 2.0.7
 
-  dompurify@3.4.8:
+  dompurify@3.4.7:
     optionalDependencies:
       '@types/trusted-types': 2.0.7
 
@@ -14562,9 +14562,9 @@ snapshots:
   isexe@3.1.5:
     optional: true
 
-  isomorphic-dompurify@3.16.0(@noble/hashes@2.0.1):
+  isomorphic-dompurify@3.15.0(@noble/hashes@2.0.1):
     dependencies:
-      dompurify: 3.4.8
+      dompurify: 3.4.7
       jsdom: 29.1.1(@noble/hashes@2.0.1)
     transitivePeerDependencies:
       - '@noble/hashes'

pnpm-workspace.yaml

@@ -126,7 +126,7 @@ catalog:
   glob: ^13.0.6
   ical.js: ^2.2.1
   ioredis: 5.11.0
-  isomorphic-dompurify: ^3.16.0
+  isomorphic-dompurify: ^3.15.0
   jotai: ^2.20.0
   jsdom: ^29.1.1
   json5: ^2.2.3