diff --git a/apps/docs/docs/advanced/icons/index.mdx b/apps/docs/docs/advanced/icons/index.mdx
index 4fd21d95f..0931c6e43 100644
--- a/apps/docs/docs/advanced/icons/index.mdx
+++ b/apps/docs/docs/advanced/icons/index.mdx
@@ -12,7 +12,7 @@ tags:
Icons in Homarr are automatically requested from multiple sources:
-- [Dashboard Icons](https://dashboardicons.com/) - Our recommended source with over 1888+ curated, high-quality icons
+- [Dashboard Icons](https://dashboardicons.com/) - Our recommended source with more than 1,888 curated, high-quality icons
- [selfh.st icons](https://github.com/selfhst/icons)
- [Simple icons](https://github.com/simple-icons/simple-icons)
- [Tabler icons](https://tabler-icons.io/)
@@ -21,7 +21,7 @@ Icons in Homarr are automatically requested from multiple sources:
- **Local icons**: automatically fetched from the [medias feature](/docs/management/media/)
Using these icon sources, Homarr provides a total collection of over 11,000 icons at your fingertips.
-The icon picker is a fast searcher that helps you to find your desired icon simply by entering a search term.
+The image picker searches this collection after a short typing delay. When a name is available, such as an app or search engine name, the picker uses it as the initial search. Results show your locally uploaded images first, followed by SVG icons and then other image formats.
### Finding Missing Icons
@@ -31,7 +31,13 @@ If you can't find the icon you're looking for in Homarr's built-in picker, we st
Icons that are high quality and printable ([SVG](https://wikipedia.org/wiki/Scalable_Vector_Graphics)) are marked with a red badge "SVG" at the top right.
+You can clear the selected image with the clear button or the usual keyboard shortcut for deleting a line (Command+Backspace on macOS or Control+Backspace on other platforms). Clearing the field does not restore the previous image.
+
### Using external icons
If you don't find the icon you're looking for on Dashboard Icons or wish to use a different source, you can simply enter a URL that points to an icon.
-Direct HTTP(S) image URLs are used as entered instead of being searched in the built-in repositories. It is important that the URL directly points to the file without any advertisements or elements around it.
+Direct HTTP(S) image URLs are used as entered instead of being searched in the built-in repositories. The picker previews the image and shows whether it loaded successfully. It is important that the URL directly points to the file without any advertisements or elements around it.
+
+### Uploading a local image
+
+Users with media upload permission can select **Upload image** next to the field. After the upload finishes, the new local image is selected immediately and is available at the top of future searches.
diff --git a/apps/docs/docs/management/apps/index.mdx b/apps/docs/docs/management/apps/index.mdx
index 7c84df588..efd42277d 100644
--- a/apps/docs/docs/management/apps/index.mdx
+++ b/apps/docs/docs/management/apps/index.mdx
@@ -28,7 +28,7 @@ The name must be at least one character long and can be chosen freely.
### Icon URL
This is the URL to the icon that will be displayed on the app widget.
-You can paste a direct HTTP(S) URL to an image, search the included icon repositories by name, or upload a local file through the upload button. Direct image URLs are used as entered and are not searched in the icon repositories.
+You can paste a direct HTTP(S) URL to an image, search the included icon repositories by name, or upload a local file through the upload button. The app name is pre-filled as the initial library search when no image is selected. Local images appear first, followed by SVG icons and other formats. Direct image URLs are previewed, used as entered, and are not searched in the icon repositories.
diff --git a/apps/docs/docs/widgets/custom-api/index.mdx b/apps/docs/docs/widgets/custom-api/index.mdx
index 4217f2369..908625499 100644
--- a/apps/docs/docs/widgets/custom-api/index.mdx
+++ b/apps/docs/docs/widgets/custom-api/index.mdx
@@ -39,6 +39,9 @@ Action buttons can only be executed by administrators.
Each named request declares its minimum board permission. This permission does not depend on the HTTP method.
+Anonymous visitors can load queries from a Custom API widget on a public board. Definitions placed only on private
+boards remain unavailable to them.
+
Queries and actions can use GET, POST, PUT, or PATCH. DELETE is valid only for actions so it can never run
automatically while a board loads. The `kind` value controls the remaining runtime behavior.
diff --git a/apps/nextjs/src/app/[locale]/manage/custom-widgets/_custom-widget-form.tsx b/apps/nextjs/src/app/[locale]/manage/custom-widgets/_custom-widget-form.tsx
index c2480a0b1..9f7df3dab 100644
--- a/apps/nextjs/src/app/[locale]/manage/custom-widgets/_custom-widget-form.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/custom-widgets/_custom-widget-form.tsx
@@ -170,7 +170,11 @@ export function CustomWidgetForm({ mode, initialValues, definitionId }: CustomWi
void,
+) => {
+ let observer: MutationObserver | null = null;
+ const bindFirstHandle = () => {
+ const handle = container.querySelector(selector);
+ if (!handle) return false;
+ bind(handle);
+ observer?.disconnect();
+ observer = null;
+ return true;
+ };
+
+ if (!bindFirstHandle()) {
+ observer = new MutationObserver(bindFirstHandle);
+ observer.observe(container, { childList: true, subtree: true });
+ }
+
+ return () => {
+ observer?.disconnect();
+ bind(null);
+ };
+};
diff --git a/apps/nextjs/src/components/board/sections/grid/grid-editor.css b/apps/nextjs/src/components/board/sections/grid/grid-editor.css
index 89635831d..edf69e044 100644
--- a/apps/nextjs/src/components/board/sections/grid/grid-editor.css
+++ b/apps/nextjs/src/components/board/sections/grid/grid-editor.css
@@ -75,8 +75,8 @@
zoom: var(--board-grid-overlay-content-zoom, 1);
}
-body[data-board-grid-interacting="drag"] .board-grid-entry,
-body[data-board-grid-interacting="drag"] .board-grid-placeholder {
+body[data-board-grid-interacting] .board-grid-entry,
+body[data-board-grid-interacting] .board-grid-placeholder {
transition: none;
}
diff --git a/apps/nextjs/src/components/board/sections/grid/grid-editor.tsx b/apps/nextjs/src/components/board/sections/grid/grid-editor.tsx
index 8167f2946..fb21151e5 100644
--- a/apps/nextjs/src/components/board/sections/grid/grid-editor.tsx
+++ b/apps/nextjs/src/components/board/sections/grid/grid-editor.tsx
@@ -1,6 +1,6 @@
"use client";
-import type { CSSProperties, PointerEvent as ReactPointerEvent, PropsWithChildren, RefObject } from "react";
+import type { CSSProperties, PointerEvent as ReactPointerEvent, PropsWithChildren } from "react";
import {
createContext,
memo,
@@ -36,12 +36,7 @@ import { DragDropProvider, DragOverlay, useDragDropManager, useDraggable, useDro
import { useCurrentLayout, useRequiredBoard } from "@homarr/boards/context";
import { useI18n } from "@homarr/translation/client";
-import {
- getLayoutRowCount,
- getLogicalItemStyle,
- getLogicalTrackSize,
- LOGICAL_GRID_PITCH,
-} from "~/components/board/layout";
+import { getLogicalItemStyle, getLogicalTrackSize, LOGICAL_GRID_PITCH } from "~/components/board/layout";
import type { GridPlacement } from "~/components/board/layout";
import { useSectionContext } from "../section-context";
import {
@@ -61,9 +56,11 @@ import type { DragProjectionOrigin, GridResizeDirection, GridTransaction, Transa
import type { DndGridEntryProps } from "./grid-entry-memo";
import { areDndGridEntryPropsEqual } from "./grid-entry-memo";
import { getGridDepth } from "./grid-depth";
+import { observeGridDragHandle } from "./grid-drag-handle";
import { createGridInteractionStore } from "./grid-interaction-store";
import { useBoardGridPortalHost } from "./grid-portal-host";
-import { clearGridPreviewGeometry, createGridPreviewDomState, syncGridPreviewGeometry } from "./grid-preview-geometry";
+import type { GridInteraction } from "./grid-preview-layer";
+import { GridPreviewLayer } from "./grid-preview-layer";
import { createGridResizeOutlineController } from "./grid-resize-outline";
import type { CommitSectionGridInput, SectionGridPlacement } from "./use-grid-layout-actions";
import { useGridLayoutActions } from "./use-grid-layout-actions";
@@ -103,17 +100,6 @@ interface RegisteredGrid {
element: HTMLElement;
}
-interface GridInteraction {
- activeId: string;
- sourceGridId: string;
- targetGridId: string | null;
- targetPlacement: SectionGridPlacement | null;
- state: TransactionalGridState;
- mode: "drag" | "resize";
- valid: boolean;
- previewRevision: number;
-}
-
interface ActiveTransaction {
transaction: GridTransaction;
label: string;
@@ -173,13 +159,6 @@ const useBoardGridEditorInteraction = () => {
return useSyncExternalStore(store.subscribe, store.getSnapshot, store.getSnapshot);
};
-const useBoardGridEditorGridInteraction = (sectionId: string) => {
- const store = useBoardGridEditorInteractionStore();
- const subscribe = useCallback((listener: () => void) => store.subscribeGrid(sectionId, listener), [sectionId, store]);
- const getSnapshot = useCallback(() => store.getGridSnapshot(sectionId), [sectionId, store]);
- return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
-};
-
/** One provider coordinates every root and nested grid on the board. */
export const BoardGridEditorProvider = ({ children }: PropsWithChildren) => {
const board = useRequiredBoard();
@@ -716,10 +695,7 @@ export const BoardGridEditorProvider = ({ children }: PropsWithChildren) => {
return data ? {data.label}
: null;
}}
- (null);
- const entryElementsRef = useRef(new Map());
+ const [entryElements] = useState(() => new Map());
const parentGridId = "parentSectionId" in section ? section.parentSectionId : null;
const ownerPlacementId = "parentSectionId" in section ? section.id : null;
const depth = getDepth(sectionId);
@@ -811,10 +775,13 @@ export default function GridEditor({
},
[droppableRef],
);
- const registerEntryElement = useCallback((id: string, element: HTMLElement | null) => {
- if (element) entryElementsRef.current.set(id, element);
- else entryElementsRef.current.delete(id);
- }, []);
+ const registerEntryElement = useCallback(
+ (id: string, element: HTMLElement | null) => {
+ if (element) entryElements.set(id, element);
+ else entryElements.delete(id);
+ },
+ [entryElements],
+ );
useLayoutEffect(() => {
const element = gridRef.current;
@@ -864,7 +831,8 @@ export default function GridEditor({
maxRowCount={maxRowCount}
placements={placements}
gridRef={gridRef}
- entryElementsRef={entryElementsRef}
+ entryElements={entryElements}
+ interactionStore={interactionStore}
/>
;
- entryElementsRef: RefObject>;
-}
-
-const GridPreviewLayer = ({
- sectionId,
- rowCount,
- maxRowCount,
- placements,
- gridRef,
- entryElementsRef,
-}: GridPreviewLayerProps) => {
- const interaction = useBoardGridEditorGridInteraction(sectionId);
- const previewGrid = interaction?.state.grids.find((grid) => grid.id === sectionId);
- const previewStateRef = useRef(createGridPreviewDomState());
- const placementsRef = useRef(placements);
- placementsRef.current = placements;
- const targetPlacement =
- interaction?.valid && interaction.targetGridId === sectionId ? interaction.targetPlacement : null;
- const growsDuringDrag =
- interaction?.mode === "drag" &&
- (interaction.targetGridId === sectionId ||
- (interaction.targetGridId === null && interaction.sourceGridId === sectionId));
- const previewRowCount = getLayoutRowCount(previewGrid?.placements ?? placements);
- const renderedRowCount =
- maxRowCount === null && interaction ? Math.max(rowCount, previewRowCount) + (growsDuringDrag ? 1 : 0) : rowCount;
-
- useLayoutEffect(() => {
- previewStateRef.current = syncGridPreviewGeometry({
- elements: entryElementsRef.current,
- placements,
- previewPlacements: previewGrid?.placements ?? null,
- activeId: interaction?.activeId ?? null,
- mode: interaction?.mode ?? null,
- previous: previewStateRef.current,
- });
-
- const grid = gridRef.current;
- if (!grid) return;
- const isIntentTarget = interaction?.mode === "drag" && interaction.targetGridId === sectionId;
- setOptionalAttribute(grid, "data-dnd-drop-target", isIntentTarget ? "true" : "false");
- setOptionalAttribute(grid, "data-dnd-drop-valid", isIntentTarget ? String(targetPlacement !== null) : null);
- setOptionalAttribute(
- grid,
- "data-dnd-preview-revision",
- interaction?.targetGridId === sectionId ? String(interaction.previewRevision) : null,
- );
- grid.style.height = `${getLogicalTrackSize(renderedRowCount)}px`;
-
- const viewport = grid.parentElement;
- if (viewport?.hasAttribute("data-section-id")) {
- viewport.style.setProperty("--board-grid-drag-height", `${getLogicalTrackSize(renderedRowCount)}px`);
- }
- }, [
- entryElementsRef,
- gridRef,
- interaction,
- placements,
- previewGrid?.placements,
- renderedRowCount,
- sectionId,
- targetPlacement,
- ]);
-
- useLayoutEffect(
- () => () => {
- clearGridPreviewGeometry(entryElementsRef.current, placementsRef.current, previewStateRef.current);
- const grid = gridRef.current;
- if (!grid) return;
- grid.removeAttribute("data-dnd-drop-target");
- grid.removeAttribute("data-dnd-drop-valid");
- grid.removeAttribute("data-dnd-preview-revision");
- grid.parentElement?.style.removeProperty("--board-grid-drag-height");
- },
- [entryElementsRef, gridRef],
- );
-
- return targetPlacement ? (
-
- ) : null;
-};
-
const DndGridEntryComponent = ({
sectionId,
placement,
@@ -1023,7 +894,7 @@ const DndGridEntryComponent = ({
const {
ref: draggableRef,
handleRef,
- isDragging,
+ isDragSource,
isDropping,
} = useDraggable({
id: placement.id,
@@ -1051,15 +922,7 @@ const DndGridEntryComponent = ({
const handleSelector =
placement.type === "section" ? "[data-grid-container-drag-handle]" : "[data-editor-grid-entry]";
- const bindHandle = () => handleRef(container.querySelector(handleSelector));
- bindHandle();
- const observer = new MutationObserver(bindHandle);
- observer.observe(container, { childList: true, subtree: true });
-
- return () => {
- observer.disconnect();
- handleRef(null);
- };
+ return observeGridDragHandle(container, handleSelector, handleRef);
}, [acquireContainer, handleRef, placement.id, placement.type]);
useLayoutEffect(() => {
@@ -1097,7 +960,7 @@ const DndGridEntryComponent = ({
data-grid-w={placement.w}
data-grid-h={placement.h}
data-grid-section-chrome-active={placement.type === "section" ? String(isSectionChromeActive) : undefined}
- data-dnd-drag-source={isDragging ? "true" : undefined}
+ data-dnd-drag-source={isDragSource ? "true" : undefined}
data-dnd-dropping={isDropping ? "true" : undefined}
>
@@ -1112,7 +975,7 @@ const DndGridEntryComponent = ({
previewResize={previewResize}
completeResize={completeResize}
cancelResize={cancelResize}
- setContinuousResize={resizeOutlineController.schedule}
+ scheduleResizeOutline={resizeOutlineController.schedule}
/>
);
@@ -1131,7 +994,7 @@ interface GridResizeHandlesProps {
previewResize: BoardGridEditorActionsContextValue["previewResize"];
completeResize: BoardGridEditorActionsContextValue["completeResize"];
cancelResize: BoardGridEditorActionsContextValue["cancelResize"];
- setContinuousResize: (preview: { placement: SectionGridPlacement; valid: boolean } | null) => void;
+ scheduleResizeOutline: (preview: { placement: SectionGridPlacement; valid: boolean } | null) => void;
}
const RESIZE_DIRECTIONS: readonly GridResizeDirection[] = ["n", "ne", "e", "se", "s", "sw", "w", "nw"];
@@ -1147,16 +1010,26 @@ const GridResizeHandles = ({
previewResize,
completeResize,
cancelResize,
- setContinuousResize,
+ scheduleResizeOutline,
}: GridResizeHandlesProps) => {
const pointerStartRef = useRef<{
id: number;
+ handle: HTMLSpanElement;
x: number;
y: number;
direction: GridResizeDirection;
visualScale: { x: number; y: number };
placement: SectionGridPlacement;
} | null>(null);
+ const escapeListenerRef = useRef<((event: KeyboardEvent) => void) | null>(null);
+
+ useEffect(
+ () => () => {
+ const listener = escapeListenerRef.current;
+ if (listener) window.removeEventListener("keydown", listener, { capture: true });
+ },
+ [],
+ );
const start = (direction: GridResizeDirection) =>
beginResize({ activeId: placement.id, sourceGridId: sectionId, label }) && direction;
@@ -1170,6 +1043,44 @@ const GridResizeHandles = ({
minHeight: placement.minH ?? 1,
});
+ const removeEscapeListener = () => {
+ const listener = escapeListenerRef.current;
+ if (!listener) return;
+ window.removeEventListener("keydown", listener, { capture: true });
+ escapeListenerRef.current = null;
+ };
+
+ const finishResize = (pointerId: number, current: { x: number; y: number } | null, canceled: boolean) => {
+ const started = pointerStartRef.current;
+ if (!started || started.id !== pointerId) return;
+
+ pointerStartRef.current = null;
+ scheduleResizeOutline(null);
+ removeEscapeListener();
+ if (started.handle.hasPointerCapture(pointerId)) started.handle.releasePointerCapture(pointerId);
+
+ if (canceled || !current) {
+ cancelResize();
+ return;
+ }
+
+ const delta = getSnappedGridDelta({
+ initial: { x: started.x, y: started.y },
+ current,
+ visualScale: started.visualScale,
+ });
+ if (delta) update(started.direction, delta.x, delta.y);
+ completeResize();
+ };
+
+ const handleEscape = (event: KeyboardEvent) => {
+ const started = pointerStartRef.current;
+ if (event.key !== "Escape" || !started) return;
+ event.preventDefault();
+ event.stopPropagation();
+ finishResize(started.id, null, true);
+ };
+
const handlePointerDown = (event: ReactPointerEvent, direction: GridResizeDirection) => {
const visualScale = getEntryVisualScale(event.currentTarget.parentElement, placement);
if (
@@ -1191,12 +1102,15 @@ const GridResizeHandles = ({
}
pointerStartRef.current = {
id: event.pointerId,
+ handle: event.currentTarget,
x: event.clientX,
y: event.clientY,
direction,
visualScale,
placement: { ...placement },
};
+ escapeListenerRef.current = handleEscape;
+ window.addEventListener("keydown", handleEscape, { capture: true });
};
const handlePointerMove = (event: ReactPointerEvent) => {
@@ -1212,7 +1126,7 @@ const GridResizeHandles = ({
const continuousDelta = getContinuousGridDelta(input);
if (!snappedDelta || !continuousDelta) return;
const valid = update(started.direction, snappedDelta.x, snappedDelta.y);
- setContinuousResize({
+ scheduleResizeOutline({
placement: getContinuousResizePlacement({
placement: started.placement,
direction: started.direction,
@@ -1228,22 +1142,7 @@ const GridResizeHandles = ({
};
const handlePointerEnd = (event: ReactPointerEvent, canceled: boolean) => {
- const started = pointerStartRef.current;
- if (!started || started.id !== event.pointerId) return;
- pointerStartRef.current = null;
- setContinuousResize(null);
- if (event.currentTarget.hasPointerCapture(event.pointerId))
- event.currentTarget.releasePointerCapture(event.pointerId);
- if (canceled) cancelResize();
- else {
- const delta = getSnappedGridDelta({
- initial: { x: started.x, y: started.y },
- current: { x: event.clientX, y: event.clientY },
- visualScale: started.visualScale,
- });
- if (delta) update(started.direction, delta.x, delta.y);
- completeResize();
- }
+ finishResize(event.pointerId, { x: event.clientX, y: event.clientY }, canceled);
};
return RESIZE_DIRECTIONS.map((direction) => (
@@ -1257,12 +1156,7 @@ const GridResizeHandles = ({
onPointerMove={handlePointerMove}
onPointerUp={(event) => handlePointerEnd(event, false)}
onPointerCancel={(event) => handlePointerEnd(event, true)}
- onLostPointerCapture={(event) => {
- if (pointerStartRef.current?.id !== event.pointerId) return;
- pointerStartRef.current = null;
- setContinuousResize(null);
- cancelResize();
- }}
+ onLostPointerCapture={(event) => finishResize(event.pointerId, null, true)}
/>
));
};
@@ -1325,11 +1219,6 @@ const getAncestorCssZoom = (element: Element): number => {
const arePointerCoordinatesEqual = (first: { x: number; y: number } | null, second: { x: number; y: number } | null) =>
first !== null && second !== null && Math.abs(first.x - second.x) <= 0.5 && Math.abs(first.y - second.y) <= 0.5;
-const setOptionalAttribute = (element: HTMLElement, name: string, value: string | null) => {
- if (value === null) element.removeAttribute(name);
- else element.setAttribute(name, value);
-};
-
const getPointerTargetGrid = (
grids: Iterable,
source: AbstractDraggable,
diff --git a/apps/nextjs/src/components/board/sections/grid/grid-preview-geometry.ts b/apps/nextjs/src/components/board/sections/grid/grid-preview-geometry.ts
index d5ed4c23f..af340ba78 100644
--- a/apps/nextjs/src/components/board/sections/grid/grid-preview-geometry.ts
+++ b/apps/nextjs/src/components/board/sections/grid/grid-preview-geometry.ts
@@ -6,10 +6,10 @@ export interface GridPreviewDomState {
changedIds: Set;
}
-interface SyncGridPreviewGeometryInput {
+interface SyncGridPreviewGeometryInput {
elements: ReadonlyMap;
- placements: readonly TPlacement[];
- previewPlacements: readonly TPlacement[] | null;
+ placements: readonly GridPlacement[];
+ previewPlacements: readonly GridPlacement[] | null;
activeId: string | null;
mode: "drag" | "resize" | null;
previous: GridPreviewDomState;
@@ -20,14 +20,14 @@ export const createGridPreviewDomState = (): GridPreviewDomState => ({
changedIds: new Set(),
});
-export const syncGridPreviewGeometry = ({
+export const syncGridPreviewGeometry = ({
elements,
placements,
previewPlacements,
activeId,
mode,
previous,
-}: SyncGridPreviewGeometryInput): GridPreviewDomState => {
+}: SyncGridPreviewGeometryInput): GridPreviewDomState => {
const controlledById = new Map(placements.map((placement) => [placement.id, placement]));
const changedIds = new Set();
@@ -58,9 +58,9 @@ export const syncGridPreviewGeometry = ({
return { activeId, changedIds };
};
-export const clearGridPreviewGeometry = (
+export const clearGridPreviewGeometry = (
elements: ReadonlyMap,
- placements: readonly TPlacement[],
+ placements: readonly GridPlacement[],
state: GridPreviewDomState,
) => {
const controlledById = new Map(placements.map((placement) => [placement.id, placement]));
diff --git a/apps/nextjs/src/components/board/sections/grid/grid-preview-layer.tsx b/apps/nextjs/src/components/board/sections/grid/grid-preview-layer.tsx
new file mode 100644
index 000000000..36d6c44f5
--- /dev/null
+++ b/apps/nextjs/src/components/board/sections/grid/grid-preview-layer.tsx
@@ -0,0 +1,136 @@
+"use client";
+
+import type { RefObject } from "react";
+import { useCallback, useLayoutEffect, useRef, useSyncExternalStore } from "react";
+
+import { getLayoutRowCount, getLogicalItemStyle, getLogicalTrackSize } from "~/components/board/layout";
+import type { TransactionalGridState } from "./dnd";
+import type { GridInteractionStore } from "./grid-interaction-store";
+import { clearGridPreviewGeometry, createGridPreviewDomState, syncGridPreviewGeometry } from "./grid-preview-geometry";
+import type { SectionGridPlacement } from "./use-grid-layout-actions";
+
+export interface GridInteraction {
+ activeId: string;
+ sourceGridId: string;
+ targetGridId: string | null;
+ targetPlacement: SectionGridPlacement | null;
+ state: TransactionalGridState;
+ mode: "drag" | "resize";
+ valid: boolean;
+ previewRevision: number;
+}
+
+interface GridPreviewLayerProps {
+ sectionId: string;
+ rowCount: number;
+ maxRowCount: number | null;
+ placements: readonly SectionGridPlacement[];
+ gridRef: RefObject;
+ entryElements: ReadonlyMap;
+ interactionStore: GridInteractionStore;
+}
+
+export const GridPreviewLayer = ({
+ sectionId,
+ rowCount,
+ maxRowCount,
+ placements,
+ gridRef,
+ entryElements,
+ interactionStore,
+}: GridPreviewLayerProps) => {
+ const subscribe = useCallback(
+ (listener: () => void) => interactionStore.subscribeGrid(sectionId, listener),
+ [interactionStore, sectionId],
+ );
+ const getSnapshot = useCallback(() => interactionStore.getGridSnapshot(sectionId), [interactionStore, sectionId]);
+ const interaction = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+ const previewGrid = interaction?.state.grids.find((grid) => grid.id === sectionId);
+ const previewStateRef = useRef(createGridPreviewDomState());
+ const placementsRef = useRef(placements);
+
+ const isDragging = interaction?.mode === "drag";
+ const isTargetGrid = isDragging && interaction.targetGridId === sectionId;
+ let targetPlacement: SectionGridPlacement | null = null;
+ if (interaction?.valid && interaction.targetGridId === sectionId) {
+ targetPlacement = interaction.targetPlacement;
+ }
+
+ const growsDuringDrag =
+ isDragging && (isTargetGrid || (interaction.targetGridId === null && interaction.sourceGridId === sectionId));
+ const previewRowCount = getLayoutRowCount(previewGrid?.placements ?? placements);
+ let renderedRowCount = rowCount;
+ if (maxRowCount === null && interaction) {
+ renderedRowCount = Math.max(rowCount, previewRowCount);
+ if (growsDuringDrag) renderedRowCount += 1;
+ }
+
+ useLayoutEffect(() => {
+ placementsRef.current = placements;
+ previewStateRef.current = syncGridPreviewGeometry({
+ elements: entryElements,
+ placements,
+ previewPlacements: previewGrid?.placements ?? null,
+ activeId: interaction?.activeId ?? null,
+ mode: interaction?.mode ?? null,
+ previous: previewStateRef.current,
+ });
+
+ const grid = gridRef.current;
+ if (!grid) return;
+ grid.dataset.dndDropTarget = String(isTargetGrid);
+ if (isTargetGrid) grid.dataset.dndDropValid = String(targetPlacement !== null);
+ else delete grid.dataset.dndDropValid;
+
+ if (interaction?.targetGridId === sectionId) {
+ grid.dataset.dndPreviewRevision = String(interaction.previewRevision);
+ } else {
+ delete grid.dataset.dndPreviewRevision;
+ }
+ grid.style.height = `${getLogicalTrackSize(renderedRowCount)}px`;
+
+ const viewport = grid.parentElement;
+ if (viewport?.hasAttribute("data-section-id")) {
+ viewport.style.setProperty("--board-grid-drag-height", `${getLogicalTrackSize(renderedRowCount)}px`);
+ }
+ }, [
+ entryElements,
+ gridRef,
+ interaction,
+ isTargetGrid,
+ placements,
+ previewGrid?.placements,
+ renderedRowCount,
+ sectionId,
+ targetPlacement,
+ ]);
+
+ useLayoutEffect(
+ () => () => {
+ clearGridPreviewGeometry(entryElements, placementsRef.current, previewStateRef.current);
+ const grid = gridRef.current;
+ if (!grid) return;
+ grid.removeAttribute("data-dnd-drop-target");
+ grid.removeAttribute("data-dnd-drop-valid");
+ grid.removeAttribute("data-dnd-preview-revision");
+ grid.parentElement?.style.removeProperty("--board-grid-drag-height");
+ },
+ [entryElements, gridRef],
+ );
+
+ if (!targetPlacement) return null;
+
+ return (
+
+ );
+};
diff --git a/apps/nextjs/src/components/board/sections/grid/grid-resize-outline.ts b/apps/nextjs/src/components/board/sections/grid/grid-resize-outline.ts
index 86e35eb84..547dfe69d 100644
--- a/apps/nextjs/src/components/board/sections/grid/grid-resize-outline.ts
+++ b/apps/nextjs/src/components/board/sections/grid/grid-resize-outline.ts
@@ -1,17 +1,17 @@
import { getLogicalTrackSize, LOGICAL_GRID_PITCH } from "~/components/board/layout";
import type { GridPlacement } from "~/components/board/layout";
-interface ResizeOutlinePreview {
- placement: TPlacement;
+interface ResizeOutlinePreview {
+ placement: GridPlacement;
valid: boolean;
}
-export const createGridResizeOutlineController = (
+export const createGridResizeOutlineController = (
getShell: () => HTMLElement | null,
- getControlledPlacement: () => TPlacement,
+ getControlledPlacement: () => GridPlacement,
) => {
let frame = 0;
- let pending: ResizeOutlinePreview | null = null;
+ let pending: ResizeOutlinePreview | null = null;
const remove = () => {
getShell()?.querySelector(":scope > [data-grid-resize-outline]")?.remove();
@@ -37,7 +37,7 @@ export const createGridResizeOutlineController = | null) {
+ schedule(preview: ResizeOutlinePreview | null) {
pending = preview;
if (!preview) {
window.cancelAnimationFrame(frame);
diff --git a/apps/nextjs/src/components/board/sections/grid/test/grid-drag-handle.spec.ts b/apps/nextjs/src/components/board/sections/grid/test/grid-drag-handle.spec.ts
new file mode 100644
index 000000000..d4d70c895
--- /dev/null
+++ b/apps/nextjs/src/components/board/sections/grid/test/grid-drag-handle.spec.ts
@@ -0,0 +1,33 @@
+import { describe, expect, test, vi } from "vitest";
+
+import { observeGridDragHandle } from "../grid-drag-handle";
+
+describe("grid drag handle", () => {
+ test("disconnects the observer after binding the first handle", async () => {
+ const container = document.createElement("div");
+ document.body.append(container);
+ const bind = vi.fn();
+
+ const cleanup = observeGridDragHandle(container, "[data-drag-handle]", bind);
+ expect(bind).not.toHaveBeenCalled();
+
+ container.append(document.createElement("span"));
+ await Promise.resolve();
+ expect(bind).not.toHaveBeenCalled();
+
+ const handle = document.createElement("button");
+ handle.dataset.dragHandle = "";
+ container.append(handle);
+ await vi.waitFor(() => expect(bind).toHaveBeenCalledOnce());
+ expect(bind).toHaveBeenLastCalledWith(handle);
+
+ handle.append(document.createElement("span"));
+ container.prepend(document.createElement("button"));
+ await Promise.resolve();
+ expect(bind).toHaveBeenCalledOnce();
+
+ cleanup();
+ expect(bind).toHaveBeenLastCalledWith(null);
+ container.remove();
+ });
+});
diff --git a/apps/nextjs/src/components/board/sections/grid/test/grid-entry-memo.spec.tsx b/apps/nextjs/src/components/board/sections/grid/test/grid-entry-memo.spec.tsx
index d2a8da0f5..da55f1607 100644
--- a/apps/nextjs/src/components/board/sections/grid/test/grid-entry-memo.spec.tsx
+++ b/apps/nextjs/src/components/board/sections/grid/test/grid-entry-memo.spec.tsx
@@ -5,7 +5,9 @@ import { afterEach, beforeEach, describe, expect, test } from "vitest";
import type { DndGridEntryProps } from "../grid-entry-memo";
import { areDndGridEntryPropsEqual } from "../grid-entry-memo";
-import { createGridPreviewDomState, syncGridPreviewGeometry } from "../grid-preview-geometry";
+import { createGridInteractionStore } from "../grid-interaction-store";
+import type { GridInteraction } from "../grid-preview-layer";
+import { GridPreviewLayer } from "../grid-preview-layer";
describe("grid entry memoization", () => {
let container: HTMLDivElement;
@@ -76,8 +78,13 @@ describe("grid entry memoization", () => {
expect(renders).toBe(101);
});
- test("keeps 100 entry and widget renders frozen while preview geometry changes", () => {
+ test("keeps 100 entry and widget renders frozen across interaction store previews", () => {
const elements = new Map();
+ const interactionStore = createGridInteractionStore();
+ const gridRef = { current: null as HTMLDivElement | null };
+ const setGridRef = (element: HTMLDivElement | null) => {
+ gridRef.current = element;
+ };
const registerElement = (id: string, element: HTMLElement | null) => {
if (element) elements.set(id, element);
else elements.delete(id);
@@ -87,21 +94,50 @@ describe("grid entry memoization", () => {
registerElement,
placement: { ...createProps().placement, id: `item-${index}`, x: index % 10, y: Math.floor(index / 10) },
}));
- renderBoard(entries);
+ const renderPreviewBoard = (nextEntries: DndGridEntryProps[]) => {
+ act(() =>
+ root.render(
+ createElement(
+ "div",
+ { "data-section-id": "root" },
+ createElement(
+ "div",
+ { ref: setGridRef },
+ nextEntries.map((entry) => createElement(Probe, { ...entry, key: entry.placement.id })),
+ createElement(GridPreviewLayer, {
+ sectionId: "root",
+ rowCount: 10,
+ maxRowCount: null,
+ placements: nextEntries.map((entry) => entry.placement),
+ gridRef,
+ entryElements: elements,
+ interactionStore,
+ }),
+ ),
+ ),
+ ),
+ );
+ };
+
+ renderPreviewBoard(entries);
expect(renders).toBe(100);
expect(widgetRenders).toBe(100);
- let previewState = createGridPreviewDomState();
for (let revision = 1; revision <= 20; revision += 1) {
- previewState = syncGridPreviewGeometry({
- elements,
- placements: entries.map((entry) => entry.placement),
- previewPlacements: entries.map((entry, index) =>
- index === 42 ? { ...entry.placement, y: entry.placement.y + revision } : entry.placement,
- ),
- activeId: "item-0",
- mode: "drag",
- previous: previewState,
+ const previewPlacements = entries.map((entry, index) =>
+ index === 42 ? { ...entry.placement, y: entry.placement.y + revision } : entry.placement,
+ );
+ act(() => {
+ interactionStore.publish({
+ activeId: "item-0",
+ sourceGridId: "root",
+ targetGridId: "root",
+ targetPlacement: previewPlacements[0] ?? null,
+ state: { grids: [{ id: "root", columnCount: 12, maxRowCount: null, placements: previewPlacements }] },
+ mode: "drag",
+ valid: true,
+ previewRevision: revision,
+ });
});
}
@@ -109,13 +145,16 @@ describe("grid entry memoization", () => {
expect(widgetRenders).toBe(100);
expect(elements.get("item-42")?.getAttribute("data-grid-preview")).toBe("true");
- renderBoard(
+ act(() => interactionStore.publish(null));
+ renderPreviewBoard(
entries.map((entry, index) =>
index === 42 ? { ...entry, placement: { ...entry.placement, y: entry.placement.y + 20 } } : entry,
),
);
expect(renders).toBe(101);
expect(widgetRenders).toBe(101);
+ expect(gridRef.current?.dataset.dndDropTarget).toBe("false");
+ expect(gridRef.current?.hasAttribute("data-dnd-preview-revision")).toBe(false);
});
test.each([
diff --git a/e2e/board-grid.spec.ts b/e2e/board-grid.spec.ts
index bfc719e79..4bf52e5bb 100644
--- a/e2e/board-grid.spec.ts
+++ b/e2e/board-grid.spec.ts
@@ -843,6 +843,8 @@ describe("Board grid", () => {
}),
).toBe(true);
await page.keyboard.press("Escape");
+ await expect(resizeOutline).toHaveCount(0);
+ await expect(page.locator("body")).not.toHaveAttribute("data-board-grid-interacting");
await page.mouse.up();
await expect(containerSection).toHaveAttribute("data-grid-w", "2");
diff --git a/e2e/custom-widgets-custom-jsx-v2.spec.ts b/e2e/custom-widgets-custom-jsx-v2.spec.ts
index a88ca1944..fbfdcc7d2 100644
--- a/e2e/custom-widgets-custom-jsx-v2.spec.ts
+++ b/e2e/custom-widgets-custom-jsx-v2.spec.ts
@@ -36,7 +36,10 @@ describe("Custom JSX v2 workbench", () => {
await page.waitForLoadState("networkidle");
await page.getByLabel("Username").fill(adminCredentials.username);
await page.locator("#password").fill(adminCredentials.password);
- const signedIn = page.waitForURL(baseUrl, { waitUntil: "commit", timeout: 15_000 });
+ const signedIn = page.waitForURL((url) => url.origin === baseUrl && url.pathname !== "/auth/login", {
+ waitUntil: "commit",
+ timeout: 60_000,
+ });
await page.locator("button[type='submit']").click();
await signedIn;
diff --git a/packages/api/src/router/icons.ts b/packages/api/src/router/icons.ts
index 214ee894b..202d044a0 100644
--- a/packages/api/src/router/icons.ts
+++ b/packages/api/src/router/icons.ts
@@ -1,4 +1,4 @@
-import { and, like } from "@homarr/db";
+import { getImageMatchRank, normalizeImageName } from "@homarr/common";
import { icons } from "@homarr/db/schema";
import { iconsFindSchema } from "@homarr/validation/icons";
@@ -15,43 +15,44 @@ export const iconsRouter = createTRPCRouter({
})
.input(iconsFindSchema)
.query(async ({ ctx, input }) => {
- const term = input.searchText?.toLowerCase().trim() ?? "";
- const keywords = (input.searchText ?? "").split(" ").filter((keyword) => keyword.length > 0);
-
- let whereCondition = undefined;
- if (term.length > 0) {
- whereCondition = and(...keywords.map((keyword) => like(icons.name, `%${keyword}%`)));
- }
-
+ const term = normalizeImageName(input.searchText ?? "");
const [repositories, countIcons] = await Promise.all([
ctx.db.query.iconRepositories.findMany({
+ orderBy: (table, { asc, sql }) => [sql`CASE WHEN ${table.slug} = 'local' THEN 0 ELSE 1 END`, asc(table.slug)],
with: {
icons: {
columns: { id: true, name: true, url: true },
- where: whereCondition,
- orderBy: (table, { asc, sql }) => {
- const svgFirst = sql`CASE WHEN ${table.name} LIKE '%.svg' THEN 0 ELSE 1 END`;
- const nameAsc = asc(table.name);
- if (term.length === 0) {
- return [svgFirst, nameAsc];
- }
- const tier = sql`CASE
- WHEN LOWER(${table.name}) = ${term} THEN 0
- WHEN LOWER(${table.name}) LIKE ${term + "%"} THEN 1
- WHEN LOWER(${table.name}) LIKE ${`%${term}%`} THEN 2
- ELSE 3
- END`;
- return [tier, svgFirst, nameAsc];
- },
- limit: input.limitPerGroup,
+ orderBy: (table, { asc, sql }) => [
+ sql`CASE WHEN ${table.name} LIKE '%.svg' THEN 0 ELSE 1 END`,
+ asc(table.name),
+ ],
+ limit: term.length === 0 ? input.limitPerGroup : undefined,
},
},
}),
ctx.db.$count(icons),
]);
+ const matchedRepositories = repositories.map((repository) => ({
+ ...repository,
+ icons: repository.icons
+ .flatMap((icon) => {
+ const rank = getImageMatchRank(term, icon.name || icon.url);
+ return rank === null ? [] : [{ icon, rank }];
+ })
+ .toSorted((a, b) =>
+ a.rank !== b.rank
+ ? a.rank - b.rank
+ : Number(b.icon.name.toLowerCase().endsWith(".svg")) -
+ Number(a.icon.name.toLowerCase().endsWith(".svg")) || a.icon.name.localeCompare(b.icon.name),
+ )
+ .slice(0, input.limitPerGroup)
+ .map(({ icon }) => icon),
+ }));
+
return {
- icons: term.length > 0 ? repositories.filter((repository) => repository.icons.length > 0) : repositories,
+ icons:
+ term.length === 0 ? repositories : matchedRepositories.filter((repository) => repository.icons.length > 0),
countIcons,
};
}),
diff --git a/packages/api/src/router/test/icons.spec.ts b/packages/api/src/router/test/icons.spec.ts
index 32a342bc0..d58f96425 100644
--- a/packages/api/src/router/test/icons.spec.ts
+++ b/packages/api/src/router/test/icons.spec.ts
@@ -74,4 +74,40 @@ describe("findIcons", () => {
],
});
});
+
+ test.each(["homeassistant", "home_assistant", "home assistant.png"])(
+ "matches normalized search %s before applying the group limit",
+ async (searchText) => {
+ const db = createDb();
+ const caller = iconsRouter.createCaller({ db, deviceType: undefined, session: null });
+
+ await db.insert(iconRepositories).values({ id: "repository", slug: "dashboard-icons" });
+ await db.insert(icons).values([
+ {
+ id: "irrelevant",
+ name: "000-unrelated.svg",
+ url: "https://example.com/000-unrelated.svg",
+ checksum: "irrelevant",
+ iconRepositoryId: "repository",
+ },
+ {
+ id: "home-assistant",
+ name: "home-assistant.svg",
+ url: "https://example.com/home-assistant.svg",
+ checksum: "home-assistant",
+ iconRepositoryId: "repository",
+ },
+ ]);
+
+ const result = await caller.findIcons({ searchText, limitPerGroup: 1 });
+
+ expect(result.icons[0]?.icons).toEqual([
+ {
+ id: "home-assistant",
+ name: "home-assistant.svg",
+ url: "https://example.com/home-assistant.svg",
+ },
+ ]);
+ },
+ );
});
diff --git a/packages/api/src/router/test/widgets/custom-api-v2.spec.ts b/packages/api/src/router/test/widgets/custom-api-v2.spec.ts
index 8bfc75319..f4bd463a2 100644
--- a/packages/api/src/router/test/widgets/custom-api-v2.spec.ts
+++ b/packages/api/src/router/test/widgets/custom-api-v2.spec.ts
@@ -113,17 +113,22 @@ async function setup(
describe("Custom JSX v2 board router", () => {
beforeEach(() => mocks.executeRequest.mockClear());
- test("allows public queries only through the definition placed on an accessible board", async () => {
+ test("loads placed widgets and public queries for anonymous visitors on public boards", async () => {
const { db, itemId } = await setup();
const caller = customApiRouter.createCaller({ db, deviceType: undefined, session: null });
+ await expect(caller.getData({ itemId })).resolves.toMatchObject({
+ template: definition.template,
+ data: { "load-status": { value: 42 } },
+ status: { "load-status": { ok: true } },
+ });
await expect(caller.queryRequest({ itemId, requestId: "status", params: { name: "homarr" } })).resolves.toEqual(
expect.objectContaining({ ok: true, data: { value: 42 } }),
);
await expect(caller.queryRequest({ itemId, requestId: "missing", params: {} })).rejects.toMatchObject({
code: "NOT_FOUND",
});
- expect(mocks.executeRequest).toHaveBeenCalledOnce();
+ expect(mocks.executeRequest).toHaveBeenCalledTimes(2);
});
test("uses current defaults when an updated option no longer accepts the stored value", async () => {
@@ -150,6 +155,7 @@ describe("Custom JSX v2 board router", () => {
await expect(
anonymous.queryRequest({ itemId: privateSetup.itemId, requestId: "status", params: { name: "homarr" } }),
).rejects.toMatchObject({ code: "NOT_FOUND" });
+ await expect(anonymous.getData({ itemId: privateSetup.itemId })).rejects.toMatchObject({ code: "NOT_FOUND" });
const enabledSetup = await setup();
await enabledSetup.db
diff --git a/packages/common/src/string.ts b/packages/common/src/string.ts
index 178cb9a47..5f15c5945 100644
--- a/packages/common/src/string.ts
+++ b/packages/common/src/string.ts
@@ -28,3 +28,34 @@ export const bestMatch = >(
return best;
}, null);
};
+
+export const normalizeImageName = (value: string) => {
+ const fileName = value.split(/[?#]/, 1)[0]?.split("/").pop() ?? value;
+ const withoutExtension = fileName.replace(/\.(?:avif|gif|jpe?g|png|svg|webp)$/i, "");
+
+ return withoutExtension
+ .normalize("NFKD")
+ .replace(/[\u0300-\u036f]/g, "")
+ .replace(/&/g, " and ")
+ .replace(/[^\p{L}\p{M}\p{N}]+/gu, " ")
+ .trim()
+ .toLowerCase();
+};
+
+export const getImageMatchRank = (normalizedSearch: string, candidateValue: string): number | null => {
+ const candidate = normalizeImageName(candidateValue);
+ if (!candidate) return null;
+
+ const compactSearch = normalizedSearch.replaceAll(" ", "");
+ const compactCandidate = candidate.replaceAll(" ", "");
+ if (candidate === normalizedSearch) return 0;
+ if (compactCandidate === compactSearch) return 1;
+ if (candidate.startsWith(`${normalizedSearch} `)) return 2;
+
+ const searchTokens = normalizedSearch.split(" ");
+ const candidateTokens = candidate.split(" ");
+ if (searchTokens.every((term) => candidateTokens.some((token) => token === term))) return 3;
+ if (searchTokens.every((term) => candidateTokens.some((token) => token.startsWith(term)))) return 4;
+ if (candidate.includes(normalizedSearch)) return 5;
+ return null;
+};
diff --git a/packages/common/src/test/string.spec.ts b/packages/common/src/test/string.spec.ts
index d1bc1f9d0..b32254281 100644
--- a/packages/common/src/test/string.spec.ts
+++ b/packages/common/src/test/string.spec.ts
@@ -1,6 +1,6 @@
import { describe, expect, test } from "vitest";
-import { bestMatch, capitalize } from "../string";
+import { bestMatch, capitalize, getImageMatchRank, normalizeImageName } from "../string";
const capitalizeTestCases = [
["hello", "Hello"],
@@ -54,3 +54,27 @@ describe("bestMatch should find the best match in an array of options", () => {
expect(result).toBeNull();
});
});
+
+describe("image name matching", () => {
+ test.each([
+ ["home-assistant.svg", "home assistant"],
+ ["https://example.com/Home_Assistant.PNG?v=1", "home assistant"],
+ ["jelly.fin.webp", "jelly fin"],
+ ["Caf\u00e9.svg", "cafe"],
+ ["\u6771\u4eac.svg", "\u6771\u4eac"],
+ ["\u0939\u093f\u0928\u094d\u0926\u0940.svg", "\u0939\u093f\u0928\u094d\u0926\u0940"],
+ ])("normalizes %s", (value, expected) => {
+ expect(normalizeImageName(value)).toBe(expected);
+ });
+
+ test.each([
+ ["homeassistant", "home-assistant.svg", 1],
+ ["home assistant", "home_assistant.png", 0],
+ ["home assistant", "Home Assistant.webp", 0],
+ ["\u6771\u4eac", "\u6771\u4eac.svg", 0],
+ ["\u0939\u093f\u0928\u094d\u0926\u0940", "\u0939\u093f\u0928\u094d\u0926\u0940.png", 0],
+ ["home assistant", "unrelated.svg", null],
+ ])("ranks %s against %s", (search, candidate, expected) => {
+ expect(getImageMatchRank(normalizeImageName(search), candidate)).toBe(expected);
+ });
+});
diff --git a/packages/forms-collection/src/icon-picker/icon-picker.module.css b/packages/forms-collection/src/icon-picker/icon-picker.module.css
index aa52af4b0..43b8d5ca2 100644
--- a/packages/forms-collection/src/icon-picker/icon-picker.module.css
+++ b/packages/forms-collection/src/icon-picker/icon-picker.module.css
@@ -1,3 +1,89 @@
-[data-combobox-selected="true"] .iconCard {
- border-color: var(--mantine-primary-color-6);
+.dropdown {
+ min-width: min(32rem, calc(100vw - 2rem));
+}
+
+.options {
+ max-height: min(28rem, 60vh);
+ overflow-y: auto;
+ overscroll-behavior: contain;
+}
+
+.iconGrid {
+ grid-template-columns: repeat(auto-fill, minmax(3.25rem, 1fr));
+}
+
+.iconOption {
+ position: relative;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ min-width: 0;
+ height: 3.25rem;
+ padding: var(--mantine-spacing-xs);
+ border: 1px solid var(--mantine-color-default-border);
+ border-radius: var(--mantine-radius-md);
+ background: var(--mantine-color-body);
+ transition:
+ border-color 160ms ease,
+ background-color 160ms ease,
+ transform 160ms ease;
+}
+
+.iconOption:hover,
+.iconOption[data-combobox-selected="true"] {
+ border-color: var(--mantine-primary-color-6);
+ background: var(--mantine-primary-color-light);
+}
+
+.iconOption:active {
+ transform: scale(0.96);
+}
+
+.formatBadge,
+.sectionBadge {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ border-radius: var(--mantine-radius-xs);
+ background: var(--mantine-color-red-9);
+ color: var(--mantine-color-white);
+ font-size: 0.625rem;
+ font-weight: 700;
+ line-height: 1;
+}
+
+.formatBadge {
+ position: absolute;
+ top: 0.2rem;
+ right: 0.2rem;
+ padding: 0.15rem 0.2rem;
+}
+
+.sectionBadge {
+ padding: 0.2rem 0.3rem;
+}
+
+.urlPreview {
+ background: var(--mantine-color-default-hover);
+}
+
+.previewFrame {
+ position: relative;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 3rem;
+ height: 3rem;
+ flex: 0 0 3rem;
+}
+
+.previewLoader {
+ position: absolute;
+ z-index: 1;
+}
+
+@media (prefers-reduced-motion: reduce) {
+ .iconOption {
+ transition: none;
+ }
}
diff --git a/packages/forms-collection/src/icon-picker/icon-picker.spec.ts b/packages/forms-collection/src/icon-picker/icon-picker.spec.ts
index 1046b341a..87ef7a6a8 100644
--- a/packages/forms-collection/src/icon-picker/icon-picker.spec.ts
+++ b/packages/forms-collection/src/icon-picker/icon-picker.spec.ts
@@ -4,31 +4,84 @@ import { afterEach, beforeAll, beforeEach, describe, expect, test, vi } from "vi
import { MantineProvider } from "@mantine/core";
import type { Root } from "react-dom/client";
+import type { IconGroup } from "./icon-picker.utils";
-const { findIconsQuery } = vi.hoisted(() => ({
- findIconsQuery: vi.fn((_query: { searchText: string }) => ({
- data: { icons: [], countIcons: 0 },
- isLoading: false,
- isError: false,
- refetch: vi.fn(),
- })),
+const { findIconsQuery, refetch, uploadSelection, sessionPermissions } = vi.hoisted(() => ({
+ findIconsQuery: vi.fn(),
+ refetch: vi.fn(),
+ uploadSelection: vi.fn(),
+ sessionPermissions: { current: [] as string[] },
}));
+interface QueryData {
+ icons: IconGroup[];
+ countIcons: number;
+}
+
+const emptyResult: QueryData = { icons: [], countIcons: 11_000 };
+let queryResult: {
+ data?: QueryData;
+ isLoading: boolean;
+ isFetching: boolean;
+ isError: boolean;
+};
+
vi.mock("@homarr/api/client", () => ({
- clientApi: { icon: { findIcons: { useQuery: findIconsQuery } } },
+ clientApi: {
+ icon: {
+ findIcons: {
+ useQuery: (input: { searchText: string; limitPerGroup: number }, options: { enabled: boolean }) => {
+ findIconsQuery(input, options);
+ return { ...queryResult, refetch };
+ },
+ },
+ },
+ },
}));
vi.mock("@homarr/auth/client", () => ({
- useSession: () => ({ data: { user: { permissions: [] } } }),
+ useSession: () => ({ data: { user: { permissions: sessionPermissions.current } } }),
}));
vi.mock("@homarr/translation", () => ({ supportedLanguages: [] }));
vi.mock("@homarr/translation/client", () => ({
- useScopedI18n: () => (key: string) => key,
+ useScopedI18n: () => (key: string, params?: Record) =>
+ params ? `${key}:${Object.values(params).join(",")}` : key,
+}));
+vi.mock("../upload-media/upload-media", () => ({
+ UploadMedia: ({
+ children,
+ onSuccess,
+ }: {
+ children: (props: object) => unknown;
+ onSuccess: (medias: unknown) => void;
+ }) =>
+ children({
+ loading: false,
+ onClick: () => {
+ uploadSelection();
+ onSuccess([{ id: "uploaded", url: "/api/user-medias/uploaded" }]);
+ },
+ }),
}));
-vi.mock("../upload-media/upload-media", () => ({ UploadMedia: () => null }));
import { IconPicker } from "./icon-picker";
-const directIconUrl = "https://cdn.example.com/shopify.svg";
+const directImageUrl = "https://cdn.example.com/shopify.svg";
+
+const iconGroups = [
+ {
+ id: "remote",
+ slug: "dashboard-icons",
+ icons: [
+ { id: "png", name: "shopify.png", url: "https://cdn.example.com/shopify.png" },
+ { id: "svg", name: "shopify.svg", url: "https://cdn.example.com/shopify.svg" },
+ ],
+ },
+ {
+ id: "local",
+ slug: "local",
+ icons: [{ id: "local-icon", name: "my-shop.png", url: "/api/user-medias/local-icon" }],
+ },
+];
const setInputValue = (input: HTMLInputElement, value: string) => {
const setter = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value")?.set;
@@ -37,6 +90,18 @@ const setInputValue = (input: HTMLInputElement, value: string) => {
input.dispatchEvent(new Event("input", { bubbles: true }));
};
+const pressKey = (input: HTMLInputElement, key: string, init?: KeyboardEventInit) => {
+ input.dispatchEvent(new KeyboardEvent("keydown", { key, bubbles: true, cancelable: true, ...init }));
+};
+
+const focusInput = async (input: HTMLInputElement) => {
+ await act(async () => input.focus());
+};
+
+const advanceDebounce = async () => {
+ await act(async () => vi.advanceTimersByTimeAsync(300));
+};
+
describe("IconPicker", () => {
let container: HTMLDivElement;
let root: Root;
@@ -45,9 +110,9 @@ describe("IconPicker", () => {
Object.defineProperty(globalThis, "IS_REACT_ACT_ENVIRONMENT", { value: true, writable: true });
Object.defineProperty(window, "matchMedia", {
writable: true,
- value: (query: string) => ({
+ value: (media: string) => ({
matches: false,
- media: query,
+ media,
onchange: null,
addListener: () => undefined,
removeListener: () => undefined,
@@ -56,54 +121,186 @@ describe("IconPicker", () => {
dispatchEvent: () => false,
}),
});
+ Object.defineProperty(HTMLElement.prototype, "scrollIntoView", { value: () => undefined, writable: true });
});
beforeEach(() => {
+ vi.useFakeTimers();
findIconsQuery.mockClear();
+ refetch.mockClear();
+ uploadSelection.mockClear();
+ sessionPermissions.current = [];
+ queryResult = { data: emptyResult, isLoading: false, isFetching: false, isError: false };
});
afterEach(() => {
- root.unmount();
+ act(() => root.unmount());
container.remove();
+ document.querySelectorAll("[data-combobox-dropdown]").forEach((element) => element.remove());
+ vi.useRealTimers();
});
- const renderPicker = async (onChange: (value: string) => void) => {
+ const renderPicker = async (
+ onChange: (value: string) => void,
+ props: Partial> = {},
+ ) => {
container = document.createElement("div");
document.body.appendChild(container);
root = createRoot(container);
await act(async () => {
- root.render(createElement(MantineProvider, null, createElement(IconPicker, { value: "", onChange })));
+ root.render(createElement(MantineProvider, null, createElement(IconPicker, { value: "", onChange, ...props })));
});
const input = container.querySelector("input");
if (!input) throw new Error("Icon picker input was not rendered");
return input;
};
- test("keeps a direct URL visible without searching the icon repositories", async () => {
+ test("clears an existing value without restoring it", async () => {
const onChange = vi.fn();
- const input = await renderPicker(onChange);
+ const input = await renderPicker(onChange, { value: directImageUrl });
- await act(async () => {
- setInputValue(input, directIconUrl);
- await new Promise((resolve) => setTimeout(resolve, 150));
- });
+ await act(async () => setInputValue(input, ""));
- expect(onChange).toHaveBeenCalledWith(directIconUrl);
- expect(input.value).toBe(directIconUrl);
- expect(findIconsQuery.mock.calls.some(([query]) => query.searchText === directIconUrl)).toBe(false);
+ expect(onChange).toHaveBeenCalledWith("");
+ expect(input.value).toBe("");
});
- test("keeps icon names in repository search mode", async () => {
- const onChange = vi.fn();
- const input = await renderPicker(onChange);
+ test.each([{ metaKey: true }, { ctrlKey: true }])(
+ "clears the entire value with a line-delete shortcut",
+ async (modifier) => {
+ const onChange = vi.fn();
+ const input = await renderPicker(onChange, { value: directImageUrl });
- await act(async () => {
- setInputValue(input, "shopify");
- await new Promise((resolve) => setTimeout(resolve, 150));
- });
+ await act(async () => pressKey(input, "Backspace", modifier));
- expect(onChange).not.toHaveBeenCalled();
- expect(input.value).toBe("shopify");
+ expect(onChange).toHaveBeenCalledWith("");
+ expect(input.value).toBe("");
+ },
+ );
+
+ test("debounces repository searches", async () => {
+ const input = await renderPicker(vi.fn());
+ findIconsQuery.mockClear();
+
+ await act(async () => setInputValue(input, "shopify"));
+ expect(findIconsQuery.mock.calls.some(([query]) => query.searchText === "shopify")).toBe(false);
+
+ await advanceDebounce();
expect(findIconsQuery.mock.calls.some(([query]) => query.searchText === "shopify")).toBe(true);
});
+
+ test("pre-searches the suggested app name when opened", async () => {
+ const input = await renderPicker(vi.fn(), { suggestedSearch: "Jellyfin" });
+
+ await focusInput(input);
+ expect(input.value).toBe("Jellyfin");
+ await advanceDebounce();
+
+ expect(findIconsQuery.mock.calls.some(([query]) => query.searchText === "Jellyfin")).toBe(true);
+ });
+
+ test("shows local images before SVG and raster library images", async () => {
+ queryResult = { data: { icons: iconGroups, countIcons: 3 }, isLoading: false, isFetching: false, isError: false };
+ const input = await renderPicker(vi.fn());
+
+ await focusInput(input);
+ const content = document.body.textContent ?? "";
+
+ expect(document.body.querySelector('[role="listbox"]')?.getAttribute("aria-label")).toBe("iconPicker.results");
+ expect(content.indexOf("iconPicker.localImages")).toBeLessThan(content.indexOf("iconPicker.svgIcons"));
+ expect(content.indexOf("iconPicker.svgIcons")).toBeLessThan(content.indexOf("iconPicker.otherImages"));
+ });
+
+ test("selects a library image with a pointer", async () => {
+ queryResult = { data: { icons: iconGroups, countIcons: 3 }, isLoading: false, isFetching: false, isError: false };
+ const onChange = vi.fn();
+ const input = await renderPicker(onChange);
+ await focusInput(input);
+
+ const option = document.body.querySelector(
+ '[data-combobox-option][value="/api/user-medias/local-icon"]',
+ );
+ if (!option) throw new Error("Local image option was not rendered");
+ await act(async () => option.click());
+
+ expect(onChange).toHaveBeenCalledWith("/api/user-medias/local-icon");
+ expect(input.value).toBe("/api/user-medias/local-icon");
+ });
+
+ test("selects a library image with the keyboard", async () => {
+ queryResult = { data: { icons: iconGroups, countIcons: 3 }, isLoading: false, isFetching: false, isError: false };
+ const onChange = vi.fn();
+ const input = await renderPicker(onChange);
+ await focusInput(input);
+
+ await act(async () => pressKey(input, "ArrowDown"));
+ await act(async () => pressKey(input, "Enter"));
+
+ expect(onChange).toHaveBeenCalledWith("/api/user-medias/local-icon");
+ });
+
+ test("keeps a direct URL visible and reports a successful preview", async () => {
+ const onChange = vi.fn();
+ const input = await renderPicker(onChange);
+
+ await act(async () => setInputValue(input, directImageUrl));
+
+ expect(onChange).toHaveBeenCalledWith(directImageUrl);
+ expect(input.value).toBe(directImageUrl);
+ expect(findIconsQuery.mock.calls.at(-1)?.[1]).toMatchObject({ enabled: false });
+ expect(document.body.textContent).toContain("iconPicker.urlLoading");
+
+ const preview = document.body.querySelector('[data-testid="direct-url-preview"]');
+ if (!preview) throw new Error("Direct URL preview was not rendered");
+ await act(async () => preview.dispatchEvent(new Event("load")));
+ expect(document.body.textContent).toContain("iconPicker.urlReady");
+ });
+
+ test("keeps a failed direct URL editable and shows an error", async () => {
+ const input = await renderPicker(vi.fn());
+ await act(async () => setInputValue(input, "https://invalid.example/image.png"));
+
+ const preview = document.body.querySelector('[data-testid="direct-url-preview"]');
+ if (!preview) throw new Error("Direct URL preview was not rendered");
+ await act(async () => preview.dispatchEvent(new Event("error")));
+
+ expect(input.value).toBe("https://invalid.example/image.png");
+ expect(document.body.textContent).toContain("iconPicker.urlError");
+ });
+
+ test("restores the committed value when an unfinished search is cancelled", async () => {
+ const input = await renderPicker(vi.fn(), { value: directImageUrl });
+
+ await act(async () => setInputValue(input, "unfinished search"));
+ await act(async () => pressKey(input, "Escape"));
+
+ expect(input.value).toBe(directImageUrl);
+ });
+
+ test("offers retry when the repository search fails", async () => {
+ queryResult = { data: undefined, isLoading: false, isFetching: false, isError: true };
+ const input = await renderPicker(vi.fn());
+ await focusInput(input);
+
+ const retry = Array.from(document.body.querySelectorAll("button")).find(
+ (button) => button.textContent === "action.tryAgain",
+ );
+ if (!retry) throw new Error("Retry button was not rendered");
+ await act(async () => retry.click());
+
+ expect(refetch).toHaveBeenCalledOnce();
+ });
+
+ test("selects an uploaded local image when the user has permission", async () => {
+ sessionPermissions.current = ["media-upload"];
+ const onChange = vi.fn();
+ await renderPicker(onChange);
+
+ const upload = container.querySelector('[aria-label="iconPicker.uploadImage"]');
+ if (!upload) throw new Error("Upload button was not rendered");
+ await act(async () => upload.click());
+
+ expect(uploadSelection).toHaveBeenCalledOnce();
+ expect(onChange).toHaveBeenCalledWith("/api/user-medias/uploaded");
+ });
});
diff --git a/packages/forms-collection/src/icon-picker/icon-picker.tsx b/packages/forms-collection/src/icon-picker/icon-picker.tsx
index e3e31c5be..b0d43f0ae 100644
--- a/packages/forms-collection/src/icon-picker/icon-picker.tsx
+++ b/packages/forms-collection/src/icon-picker/icon-picker.tsx
@@ -1,27 +1,36 @@
"use client";
-import type { FocusEventHandler } from "react";
-import { startTransition, useEffect, useState } from "react";
+import type { FocusEventHandler, KeyboardEventHandler } from "react";
+import { startTransition, useEffect, useMemo, useState } from "react";
import {
ActionIcon,
Box,
Button,
- Card,
+ CloseButton,
Combobox,
- Flex,
Group,
Image,
- Indicator,
InputBase,
+ Loader,
Paper,
+ SimpleGrid,
Skeleton,
Stack,
Text,
- UnstyledButton,
+ ThemeIcon,
+ Tooltip,
useCombobox,
} from "@mantine/core";
import { useDebouncedValue, useUncontrolled } from "@mantine/hooks";
-import { IconMoodEmpty, IconSearchOff, IconUpload } from "@tabler/icons-react";
+import {
+ IconCheck,
+ IconCloud,
+ IconMoodEmpty,
+ IconPhoto,
+ IconPhotoOff,
+ IconSearchOff,
+ IconUpload,
+} from "@tabler/icons-react";
import { clientApi } from "@homarr/api/client";
import { useSession } from "@homarr/auth/client";
@@ -29,6 +38,7 @@ import { supportedLanguages } from "@homarr/translation";
import { useScopedI18n } from "@homarr/translation/client";
import { UploadMedia } from "../upload-media/upload-media";
+import { arrangeIconPickerSections, isDirectImageUrl, isImageSource, isSvgImage } from "./icon-picker.utils";
import classes from "./icon-picker.module.css";
interface IconPickerProps {
@@ -39,9 +49,12 @@ interface IconPickerProps {
onBlur?: FocusEventHandler;
label?: string;
placeholder?: string;
+ suggestedSearch?: string | null;
withAsterisk?: boolean;
}
+type PreviewState = "idle" | "loading" | "ready" | "error";
+
export const IconPicker = ({
value: propsValue,
onChange,
@@ -51,188 +64,403 @@ export const IconPicker = ({
withAsterisk = true,
label,
placeholder,
+ suggestedSearch,
}: IconPickerProps) => {
- const [value, setValue] = useUncontrolled({ value: propsValue, onChange });
- const [query, setQuery] = useState("");
-
- useEffect(() => {
- setQuery("");
- }, [value]);
-
+ const [value, setValue] = useUncontrolled({ value: propsValue, onChange, defaultValue: "" });
+ const [draft, setDraft] = useState(propsValue ?? "");
+ const [hasEdited, setHasEdited] = useState(false);
+ const [keyboardIndex, setKeyboardIndex] = useState(-1);
+ const [previewState, setPreviewState] = useState("idle");
const { data: session } = useSession();
const tCommon = useScopedI18n("common");
- const [debouncedQuery] = useDebouncedValue(query, 100);
+ const [debouncedDraft] = useDebouncedValue(draft, 250);
- const searchText = !isDirectIconUrl(debouncedQuery) && debouncedQuery !== (value ?? "") ? debouncedQuery : "";
+ const directUrl = isDirectImageUrl(draft) ? draft.trim() : null;
+ const isCommittedValueDraft = debouncedDraft === (value ?? "");
+ const searchText = directUrl !== null || isCommittedValueDraft ? "" : debouncedDraft.trim();
+ const canUpload = session?.user.permissions.includes("media-upload") ?? false;
- const { data, isLoading, isError, refetch } = clientApi.icon.findIcons.useQuery(
- { searchText },
- { placeholderData: (prev) => prev },
+ const query = clientApi.icon.findIcons.useQuery(
+ { searchText, limitPerGroup: 24 },
+ { enabled: directUrl === null, placeholderData: (previous) => previous },
);
const combobox = useCombobox({
onDropdownClose: () => combobox.resetSelectedOption(),
+ onDropdownOpen: () => combobox.updateSelectedOptionIndex("active"),
});
- const totalOptions = data?.icons.reduce((acc, group) => acc + group.icons.length, 0) ?? 0;
- const groups = data?.icons.map((group) => {
- const options = group.icons.map((item) => (
-
- {
- startTransition(() => {
- setValue(item.url);
- setQuery("");
- combobox.closeDropdown();
- });
- }}
- >
-
-
-
-
-
-
-
-
- ));
+ useEffect(() => {
+ setDraft(value ?? "");
+ setHasEdited(false);
+ }, [value]);
- return (
-
-
- {group.slug}
-
-
- {options}
-
-
- );
- });
+ useEffect(() => {
+ setPreviewState(directUrl ? "loading" : "idle");
+ }, [directUrl]);
- const inputValue = query || value || "";
- const leftSection = shouldShowPreview(value) && = (event) => {
+ if ((event.metaKey || event.ctrlKey) && event.key === "Backspace") {
+ event.preventDefault();
+ clearValue();
+ return;
+ }
+
+ if (event.key === "Escape") {
+ setDraft(value ?? "");
+ setHasEdited(false);
+ combobox.closeDropdown("keyboard");
+ return;
+ }
+
+ if (!directUrl && orderedOptions.length > 0 && (event.key === "ArrowDown" || event.key === "ArrowUp")) {
+ event.preventDefault();
+ combobox.openDropdown("keyboard");
+ setKeyboardIndex((current) => {
+ const next =
+ event.key === "ArrowDown"
+ ? current >= orderedOptions.length - 1
+ ? 0
+ : current + 1
+ : current <= 0
+ ? orderedOptions.length - 1
+ : current - 1;
+ combobox.selectOption(next);
+ return next;
+ });
+ return;
+ }
+
+ if (event.key === "Enter") {
+ if (keyboardIndex >= 0 && orderedOptions[keyboardIndex]) {
+ event.preventDefault();
+ commitValue(orderedOptions[keyboardIndex].url);
+ combobox.closeDropdown("keyboard");
+ } else if (isImageSource(draft)) {
+ event.preventDefault();
+ commitValue(draft.trim());
+ combobox.closeDropdown("keyboard");
+ }
+ }
+ };
+
+ const renderIconOptions = (icons: typeof sections.local, offset: number) => (
+
+ {icons.map((icon, index) => (
+
+
+ SVG }
+
+
+ ))}
+
+ );
+
+ const renderSearchResults = () => {
+ if (query.isError) {
return (
-
- {tCommon("iconPicker.error")}
- refetch()}>
- {tCommon("action.tryAgain")}
-
-
+ query.refetch()}>
+ {tCommon("action.tryAgain")}
+
+ }
+ />
);
}
- if (isLoading) {
- return Array(15)
- .fill(0)
- .map((_, index) => (
-
-
- ));
+
+ if (query.isLoading) {
+ return (
+
+ {Array.from({ length: 12 }, (_, index) => (
+
+ );
}
- if (totalOptions > 0) {
- return {groups} ;
+
+ if (totalOptions === 0) {
+ return (
+
- {tCommon("iconPicker.noResults", { search: debouncedQuery })}
+
+ {sections.local.length > 0 && (
+
+ {renderIconOptions(sections.svg, sections.local.length)}
+
+ )}
+ {sections.other.length > 0 && (
+
);
};
+ const leftSection = (() => {
+ if (directUrl && previewState === "loading") return directUrl && setPreviewState("ready")}
+ onError={() => directUrl && setPreviewState("error")}
+ />
+ );
+ }
+ return
-
-
- {
- const first = medias.at(0);
- if (!first) return;
- startTransition(() => {
- setValue(first.url);
- });
- }}
- >
- {({ onClick, loading }) => (
-
-
+ {
+ commitValue(url);
+ combobox.closeDropdown();
+ }}
+ >
+
+
+ {canUpload && (
+ {
+ const first = medias.at(0);
+ if (!first) return;
+ commitValue(first.url);
+ combobox.closeDropdown();
+ }}
+ >
+ {({ onClick, loading }) => (
+
+ {
+ event.stopPropagation();
+ onClick();
+ }}
+ loading={loading}
+ size="sm"
+ variant="subtle"
+ aria-label={tCommon("iconPicker.uploadImage")}
+ >
+
+
+ )}
+
)}
-
- )}
-
+ {(draft || value) && (
+ event.preventDefault()}
+ onClick={clearValue}
+ />
+ )}
+ {query.isFetching && !directUrl ?
-
-
- {renderDropdown()}
+
+
+ {directUrl ? (
+
+
+
+ {previewState === "loading" &&
+
+ ) : (
+ setPreviewState("ready")}
+ onError={() => setPreviewState("error")}
+ />
+ )}
+
+
+
+ {previewState === "error"
+ ? tCommon("iconPicker.urlError")
+ : previewState === "ready"
+ ? tCommon("iconPicker.urlReady")
+ : tCommon("iconPicker.urlLoading")}
+
+
+ {directUrl}
+
+
+ {previewState === "ready" && (
+
+
+ )}
+
+
+ ) : (
+ renderSearchResults()
+ )}
);
};
-// This regex is used to prevent loading a preview like en or /en which would trigger a language change
-// See https://github.com/homarr-labs/homarr/issues/3070
+interface PickerSectionProps {
+ label: string;
+ icon?: React.ReactNode;
+ badge?: string;
+ children: React.ReactNode;
+}
+
+const PickerSection = ({ label, icon, badge, children }: PickerSectionProps) => (
+
+
+ {icon}
+
+ {label}
+
+ {badge && {badge} }
+
+ {children}
+
+);
+
+interface PickerMessageProps {
+ icon: React.ReactNode;
+ title: string;
+ action?: React.ReactNode;
+}
+
+const PickerMessage = ({ icon, title, action }: PickerMessageProps) => (
+
+
+ {icon}
+
+ {title}
+ {action}
+
+);
+
const localizationPathRegex = new RegExp(`^/?(${supportedLanguages.join("|")})(/.*)?$`, "i");
const shouldShowPreview = (value: string | null | undefined): value is string => {
if (!value) return false;
return !localizationPathRegex.test(value);
};
-
-const isDirectIconUrl = (value: string) => {
- try {
- const url = new URL(value.trim());
- return (url.protocol === "http:" || url.protocol === "https:") && Boolean(url.hostname);
- } catch {
- return false;
- }
-};
diff --git a/packages/forms-collection/src/icon-picker/icon-picker.utils.spec.ts b/packages/forms-collection/src/icon-picker/icon-picker.utils.spec.ts
new file mode 100644
index 000000000..562b43cba
--- /dev/null
+++ b/packages/forms-collection/src/icon-picker/icon-picker.utils.spec.ts
@@ -0,0 +1,50 @@
+import { describe, expect, test } from "vitest";
+
+import type { IconGroup } from "./icon-picker.utils";
+import { arrangeIconPickerSections, isDirectImageUrl, isImageSource, isSvgImage } from "./icon-picker.utils";
+
+const groups = [
+ {
+ id: "remote",
+ slug: "dashboard-icons",
+ icons: [
+ { id: "long", name: "home-assistant-alt.svg", url: "https://cdn.example.com/home-assistant-alt.svg" },
+ { id: "raster", name: "Home Assistant.png", url: "https://cdn.example.com/home-assistant.png" },
+ { id: "svg", name: "home-assistant.svg", url: "https://cdn.example.com/home-assistant.svg?v=1" },
+ ],
+ },
+ {
+ id: "local",
+ slug: "local",
+ icons: [{ id: "local", name: "Home Assistant.png", url: "/api/user-medias/home-assistant" }],
+ },
+] as IconGroup[];
+
+describe("icon picker utilities", () => {
+ test("arranges local images before remote SVG and raster images", () => {
+ const result = arrangeIconPickerSections(groups, "home assistant");
+
+ expect(result.local.map((icon) => icon.id)).toEqual(["local"]);
+ expect(result.svg.map((icon) => icon.id)).toEqual(["svg", "long"]);
+ expect(result.other.map((icon) => icon.id)).toEqual(["raster"]);
+ });
+
+ test.each([
+ ["https://example.com/icon.png", true],
+ ["http://localhost:3000/icon", true],
+ ["ftp://example.com/icon.png", false],
+ ["javascript:alert(1)", false],
+ ["example.com/icon.png", false],
+ ])("validates direct image URLs", (value, expected) => {
+ expect(isDirectImageUrl(value)).toBe(expected);
+ });
+
+ test("accepts internal image paths without treating search text as a source", () => {
+ expect(isImageSource("/api/user-medias/123")).toBe(true);
+ expect(isImageSource("shopify")).toBe(false);
+ });
+
+ test("recognizes SVG URLs with query strings case-insensitively", () => {
+ expect(isSvgImage("https://example.com/ICON.SVG?raw=1")).toBe(true);
+ });
+});
diff --git a/packages/forms-collection/src/icon-picker/icon-picker.utils.ts b/packages/forms-collection/src/icon-picker/icon-picker.utils.ts
new file mode 100644
index 000000000..e71558f8e
--- /dev/null
+++ b/packages/forms-collection/src/icon-picker/icon-picker.utils.ts
@@ -0,0 +1,67 @@
+import type { inferRouterOutputs } from "@trpc/server";
+
+import type { AppRouter } from "@homarr/api";
+import { getImageMatchRank, normalizeImageName } from "@homarr/common";
+
+type RouterOutput = inferRouterOutputs;
+export type IconGroup = RouterOutput["icon"]["findIcons"]["icons"][number];
+export type PickerIcon = IconGroup["icons"][number] & { repositorySlug: string };
+
+export interface IconPickerSections {
+ local: PickerIcon[];
+ svg: PickerIcon[];
+ other: PickerIcon[];
+}
+
+export const arrangeIconPickerSections = (iconGroups: IconGroup[], searchTerm = ""): IconPickerSections => {
+ const sections: IconPickerSections = { local: [], svg: [], other: [] };
+
+ for (const group of iconGroups) {
+ for (const icon of group.icons) {
+ const pickerIcon = { ...icon, repositorySlug: group.slug };
+ if (group.slug === "local") {
+ sections.local.push(pickerIcon);
+ } else if (isSvgImage(icon.url)) {
+ sections.svg.push(pickerIcon);
+ } else {
+ sections.other.push(pickerIcon);
+ }
+ }
+ }
+
+ const normalizedSearch = normalizeImageName(searchTerm);
+ if (normalizedSearch) {
+ const compareMatches = (a: PickerIcon, b: PickerIcon) => {
+ const aRank = getImageMatchRank(normalizedSearch, a.name || a.url) ?? Number.MAX_SAFE_INTEGER;
+ const bRank = getImageMatchRank(normalizedSearch, b.name || b.url) ?? Number.MAX_SAFE_INTEGER;
+ return aRank - bRank || a.name.localeCompare(b.name);
+ };
+ return {
+ local: sections.local.toSorted(compareMatches),
+ svg: sections.svg.toSorted(compareMatches),
+ other: sections.other.toSorted(compareMatches),
+ };
+ }
+
+ return sections;
+};
+
+export const isDirectImageUrl = (value: string) => {
+ try {
+ const url = new URL(value.trim());
+ return (url.protocol === "http:" || url.protocol === "https:") && Boolean(url.hostname);
+ } catch {
+ return false;
+ }
+};
+
+export const isImageSource = (value: string) => isDirectImageUrl(value) || value.trim().startsWith("/");
+
+export const isSvgImage = (value: string) => {
+ try {
+ const url = new URL(value, "http://homarr.local");
+ return url.pathname.toLowerCase().endsWith(".svg");
+ } catch {
+ return value.toLowerCase().split(/[?#]/, 1)[0]?.endsWith(".svg") ?? false;
+ }
+};
diff --git a/packages/forms-collection/src/index.tsx b/packages/forms-collection/src/index.tsx
index 7621bed43..0dfaf90ca 100644
--- a/packages/forms-collection/src/index.tsx
+++ b/packages/forms-collection/src/index.tsx
@@ -2,7 +2,6 @@ export * from "./new-app/_app-new-form";
export * from "./new-app/_form";
export * from "./icon-picker/icon-picker";
-export * from "./new-app/icon-matcher";
export * from "./upload-media/upload-media";
diff --git a/packages/forms-collection/src/new-app/_form.tsx b/packages/forms-collection/src/new-app/_form.tsx
index 92f3a4c2f..40f68d68e 100644
--- a/packages/forms-collection/src/new-app/_form.tsx
+++ b/packages/forms-collection/src/new-app/_form.tsx
@@ -3,17 +3,15 @@
import type { ChangeEventHandler } from "react";
import { useEffect, useImperativeHandle, useRef } from "react";
import { Button, Checkbox, Collapse, Group, Stack, Textarea, TextInput } from "@mantine/core";
-import { useDebouncedValue, useDisclosure } from "@mantine/hooks";
+import { useDisclosure } from "@mantine/hooks";
import type { z } from "zod/v4";
-import { clientApi } from "@homarr/api/client";
import { useZodForm } from "@homarr/form";
import { useI18n } from "@homarr/translation/client";
import { Link } from "@homarr/ui";
import { appManageSchema } from "@homarr/validation/app";
import { IconPicker } from "../icon-picker/icon-picker";
-import { findBestIconMatch } from "./icon-matcher";
type FormType = z.infer;
@@ -81,9 +79,6 @@ export const AppForm = ({
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [initialValuesKey]);
- // Debounce the name value with 200ms delay
- const [debouncedName] = useDebouncedValue(form.values.name, 200);
-
const shouldCreateAnother = useRef(false);
const handleSubmit = (values: FormType) => {
const redirect = !shouldCreateAnother.current;
@@ -130,29 +125,13 @@ export const AppForm = ({
}
};
- // Auto-select icon based on app name with debounced search
- const { data: iconsData } = clientApi.icon.findIcons.useQuery(
- {
- searchText: debouncedName,
- },
- {
- enabled: debouncedName.length > 3,
- },
- );
-
- useEffect(() => {
- if (debouncedName && !form.values.iconUrl && iconsData?.icons) {
- const bestMatch = findBestIconMatch(debouncedName, iconsData.icons);
- if (bestMatch) {
- form.setFieldValue("iconUrl", bestMatch);
- }
- }
- }, [debouncedName, iconsData]);
-
const formFields = (