Icons: developer icon manager

[nielslyngsoe]

Merge this PR first: #22436

Vibe coded interface to manage icons

run it by typing npm run dev:icon-manager

Make changes in the UI, at last download the new JSON and replace it in the project, to make a PR with the changes.

[Copilot]

Pull request overview

This PR introduces an icon “manager” dev UI and expands the icon registry metadata + search capabilities in the backoffice client, including a new Levenshtein-based fuzzy matching utility.

Changes:

• Extend icon definitions with keywords, groups, and related metadata and propagate it through icon generation.
• Add Levenshtein distance/similarity utilities and use them for improved fuzzy search in the icon picker modal (with debounced input handling).
• Add a Vite-driven dev-only “Icon Dictionary Manager” UI under devops/icon-manager.

Reviewed changes

Copilot reviewed 19 out of 21 changed files in this pull request and generated 7 comments.

Show a summary per file

File	Description
src/Umbraco.Web.UI.Client/vite.config.ts	Adds an additional HTML entry for the icon manager page to Vite build inputs.
src/Umbraco.Web.UI.Client/src/packages/core/utils/string/levenshtein/levenshtein.function.ts	Implements Levenshtein distance + normalized similarity helpers.
src/Umbraco.Web.UI.Client/src/packages/core/utils/string/levenshtein/levenshtein.function.test.ts	Unit tests for Levenshtein distance/similarity behavior.
src/Umbraco.Web.UI.Client/src/packages/core/utils/string/levenshtein/index.ts	Barrel export for the Levenshtein utilities.
src/Umbraco.Web.UI.Client/src/packages/core/utils/string/index.ts	Exposes Levenshtein utilities via the string utils barrel.
src/Umbraco.Web.UI.Client/src/packages/core/icon-registry/types.ts	Extends UmbIconDefinition with optional keywords, groups, related.
src/Umbraco.Web.UI.Client/src/packages/core/icon-registry/icons.ts	Populates icon metadata (keywords/groups/related) for many icon definitions.
src/Umbraco.Web.UI.Client/src/packages/core/icon-registry/icon-picker-modal/icon-search.function.ts	New icon search/scoring implementation (substring + fuzzy + related results).
src/Umbraco.Web.UI.Client/src/packages/core/icon-registry/icon-picker-modal/icon-search.function.test.ts	Tests for icon search ranking, fuzzy matching, and related-icon inclusion.
src/Umbraco.Web.UI.Client/src/packages/core/icon-registry/icon-picker-modal/icon-picker-modal.element.ts	Switches icon filtering to searchIcons() and debounces search input.
src/Umbraco.Web.UI.Client/package.json	Adds dev:icon-manager script to launch the icon manager page.
src/Umbraco.Web.UI.Client/devops/icons/todo_implement_this_data_thesaurus.json	Removes the previously staged thesaurus JSON file.
src/Umbraco.Web.UI.Client/devops/icons/index.js	Ensures generated icon JS includes keywords/groups/related metadata.
src/Umbraco.Web.UI.Client/devops/icon-manager/types.ts	Adds types for the icon manager UI (dictionary entries, managed icon model).
src/Umbraco.Web.UI.Client/devops/icon-manager/svg-utils.ts	Adds helper to convert Lucide icon node JSON into SVG markup.
src/Umbraco.Web.UI.Client/devops/icon-manager/icon-related-input.element.ts	UI component for editing an icon’s related icons list.
src/Umbraco.Web.UI.Client/devops/icon-manager/icon-manager.html	Adds the standalone HTML entrypoint for the icon manager UI.
src/Umbraco.Web.UI.Client/devops/icon-manager/icon-manager-app.element.ts	Implements the main icon manager app (picked/unpicked lists, editor, export).
src/Umbraco.Web.UI.Client/devops/icon-manager/icon-editor.element.ts	Implements icon metadata editor (name/keywords/groups/related/flags).
src/Umbraco.Web.UI.Client/devops/icon-manager/icon-card.element.ts	Implements icon grid card UI for browsing/picking icons.

[claude]

Automated review by Claude.

[claude]

PR Review

Target: origin/main · Based on commit: 31487c414eea · Skipped: 2 files out of 21 total (icon-dictionary.json, icons.ts — data-only generated files)

Adds a developer icon-manager tool for curating the icon dictionary, enriches ~800 icons with keywords/groups/related metadata, upgrades the icon-picker-modal search to a scored fuzzy-matching algorithm (Levenshtein), and promotes levenshteinDistance/levenshteinSimilarity to the public @umbraco-cms/backoffice/utils API.

• Modified public API: UmbIconDefinition gains three new optional fields: keywords, groups, related; levenshteinDistance and levenshteinSimilarity are new exports in @umbraco-cms/backoffice/utils
• Affected implementations (outside this PR): All consumers of UmbIconDefinition — change is additive-only (optional fields), no action required
• Breaking changes: None detected
• Other changes: Icon picker search now uses debounced fuzzy matching instead of simple substring-on-name; search latency is reduced by 250ms debounce; icon results now include related icons below primary matches

---

Important

• src/Umbraco.Web.UI.Client/vite.config.ts:52: 'icon-manager' is added as a Rollup input entry alongside main, so the devops tool gets compiled into the production dist-cms output. This ships developer-only tooling to every deployed Umbraco instance unnecessarily. The dev:icon-manager npm script (added in package.json) is already the right pattern for development-time use — remove the 'icon-manager' entry from the production build config.

---

Suggestions

• src/Umbraco.Web.UI.Client/devops/icon-manager/icon-manager-app.element.ts:44: Event listeners added in connectedCallback have no corresponding removal in disconnectedCallback. Not an issue for the current single-instance devops use, but a good LitElement practice to add symmetrical cleanup.

• src/Umbraco.Web.UI.Client/src/packages/core/icon-registry/icon-picker-modal/icon-search.function.ts:63: The group token-matching block (lines 63–70, score 100) is equivalent to the group-substring check immediately above it (lines 58–61, score 100) for single-token queries. For multi-token queries it is more permissive but returns the same score, making both paths indistinguishable to callers. Consider scoring them differently (e.g., 90 vs 100) to allow ranking between match quality levels, or collapse into a single check.

• src/Umbraco.Web.UI.Client/src/packages/core/icon-registry/icon-picker-modal/icon-search.function.ts:15: getSearchableTokens is called once per icon per search call. Icons are static after load, so pre-computing and caching tokens (e.g., as a Map<string, string[]> keyed by icon name) would avoid the repeated tokenization work on each debounced search — noticeable if the set grows beyond the current ~800 picked icons.

---

Approved with Suggestions for improvement

This is a well-structured feature addition with solid test coverage (Levenshtein unit tests + searchIcons integration tests) and a clean design. The main item to address before merging is the vite.config.ts entry that puts the devops tool into the production build. The rest are optional quality suggestions. Nice work!