fix: keep direct icon URLs visible

Use valid direct HTTP(S) icon URLs without repository search.

apps/docs/docs/advanced/icons/index.mdx

@@ -31,4 +31,4 @@ Icons that are high quality and printable ([SVG](https://wikipedia.org/wiki/Scal
 
 ### 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.
-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. It is important that the URL directly points to the file without any advertisements or elements around it.

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. 
-It can be a url to an image in the internet, one from the included icon repositories or a local file uploaded through the upload button.
+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.
 
 ![Icon URL](./img/app-icon-url.png)
 
@@ -50,4 +50,4 @@ It's useful when you want to ping the service internally for example with a cust
 
 On the apps management page you find all apps that exist in your Homarr instance. You can edit and delete them.
 
-![Apps list](./img/app-list.png)
+![Apps list](./img/app-list.png)

packages/forms-collection/src/icon-picker/icon-picker.spec.ts

@@ -0,0 +1,109 @@
+import { act, createElement } from "react";
+import { createRoot } from "react-dom/client";
+import { afterEach, beforeAll, beforeEach, describe, expect, test, vi } from "vitest";
+import { MantineProvider } from "@mantine/core";
+
+import type { Root } from "react-dom/client";
+
+const { findIconsQuery } = vi.hoisted(() => ({
+  findIconsQuery: vi.fn((_query: { searchText: string }) => ({
+    data: { icons: [], countIcons: 0 },
+    isLoading: false,
+    isError: false,
+    refetch: vi.fn(),
+  })),
+}));
+
+vi.mock("@homarr/api/client", () => ({
+  clientApi: { icon: { findIcons: { useQuery: findIconsQuery } } },
+}));
+vi.mock("@homarr/auth/client", () => ({
+  useSession: () => ({ data: { user: { permissions: [] } } }),
+}));
+vi.mock("@homarr/translation", () => ({ supportedLanguages: [] }));
+vi.mock("@homarr/translation/client", () => ({
+  useScopedI18n: () => (key: string) => key,
+}));
+vi.mock("../upload-media/upload-media", () => ({ UploadMedia: () => null }));
+
+import { IconPicker } from "./icon-picker";
+
+const directIconUrl = "https://cdn.example.com/shopify.svg";
+
+const setInputValue = (input: HTMLInputElement, value: string) => {
+  const setter = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value")?.set;
+  if (!setter) throw new Error("Input value setter was not found");
+  setter.call(input, value);
+  input.dispatchEvent(new Event("input", { bubbles: true }));
+};
+
+describe("IconPicker", () => {
+  let container: HTMLDivElement;
+  let root: Root;
+
+  beforeAll(() => {
+    Object.defineProperty(globalThis, "IS_REACT_ACT_ENVIRONMENT", { value: true, writable: true });
+    Object.defineProperty(window, "matchMedia", {
+      writable: true,
+      value: (query: string) => ({
+        matches: false,
+        media: query,
+        onchange: null,
+        addListener: () => undefined,
+        removeListener: () => undefined,
+        addEventListener: () => undefined,
+        removeEventListener: () => undefined,
+        dispatchEvent: () => false,
+      }),
+    });
+  });
+
+  beforeEach(() => {
+    findIconsQuery.mockClear();
+  });
+
+  afterEach(() => {
+    root.unmount();
+    container.remove();
+  });
+
+  const renderPicker = async (onChange: (value: string) => void) => {
+    container = document.createElement("div");
+    document.body.appendChild(container);
+    root = createRoot(container);
+    await act(async () => {
+      root.render(createElement(MantineProvider, null, createElement(IconPicker, { value: "", onChange })));
+    });
+    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 () => {
+    const onChange = vi.fn();
+    const input = await renderPicker(onChange);
+
+    await act(async () => {
+      setInputValue(input, directIconUrl);
+      await new Promise((resolve) => setTimeout(resolve, 150));
+    });
+
+    expect(onChange).toHaveBeenCalledWith(directIconUrl);
+    expect(input.value).toBe(directIconUrl);
+    expect(findIconsQuery.mock.calls.some(([query]) => query.searchText === directIconUrl)).toBe(false);
+  });
+
+  test("keeps icon names in repository search mode", async () => {
+    const onChange = vi.fn();
+    const input = await renderPicker(onChange);
+
+    await act(async () => {
+      setInputValue(input, "shopify");
+      await new Promise((resolve) => setTimeout(resolve, 150));
+    });
+
+    expect(onChange).not.toHaveBeenCalled();
+    expect(input.value).toBe("shopify");
+    expect(findIconsQuery.mock.calls.some(([query]) => query.searchText === "shopify")).toBe(true);
+  });
+});

packages/forms-collection/src/icon-picker/icon-picker.tsx

@@ -63,7 +63,7 @@ export const IconPicker = ({
   const tCommon = useScopedI18n("common");
   const [debouncedQuery] = useDebouncedValue(query, 100);
 
-  const searchText = (debouncedQuery !== (value ?? "") && debouncedQuery) || "";
+  const searchText = !isDirectIconUrl(debouncedQuery) && debouncedQuery !== (value ?? "") ? debouncedQuery : "";
 
   const { data, isLoading, isError, refetch } = clientApi.icon.findIcons.useQuery(
     { searchText },
@@ -165,8 +165,15 @@ export const IconPicker = ({
             leftSection={leftSection}
             value={inputValue}
             onChange={(event) => {
-              combobox.openDropdown();
-              setQuery(event.currentTarget.value);
+              const nextValue = event.currentTarget.value;
+              const trimmedValue = nextValue.trim();
+              setQuery(nextValue);
+              if (isDirectIconUrl(trimmedValue)) {
+                setValue(trimmedValue);
+                combobox.closeDropdown();
+              } else {
+                combobox.openDropdown();
+              }
             }}
             onClick={() => combobox.openDropdown()}
             onFocus={(event) => {
@@ -220,3 +227,12 @@ 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;
+  }
+};