NodeTypeBrowser: SearchBar in header + text highlighting + stable selection on filter change

[Copilot]

Replaces the inline TextField search in NodeTypeBrowser with the reusable SearchBar component placed in the panel headerBar (matching ImageGallery). Matched text is highlighted in the selection blue color in both the node list and the documentation panel. Filter changes no longer reset the selection unless the selected node is filtered out.

Features list

• SearchBar (toggle: true) in headerBar — consistent with ImageGallery pattern
• Matched substrings highlighted in activePalette.highlight blue in node names and documentation text
• Documentation renders as MarkdownText when no filter is active; switches to RichText with injected <font> tags when filtering
• Filter changes preserve the current category + node selection; falls back to first available only when the selection is filtered out

Implementation remarks

SearchBar placement — headerBar: RowLayout { SearchBar { id: searchBar; toggle: true; ... } }, identical to ImageGallery. The filterText property reads directly from searchBar.text.toLowerCase().

Text highlighting — highlightText(plainText, searchTerm) HTML-escapes the input then wraps each case-insensitive match:

result += "<font color='" + activePalette.highlight + "'>"
        + escaped.substring(idx, idx + searchTerm.length) + "</font>"

A hasActiveFilter bool property centralises the filterText !== "" guard used across node list labels, the doc heading, and the doc body.

Stable selection on filter change — applyFilter() (called by the 150 ms debounce timer) checks whether the currently selected node still matches the filter. If yes, it re-syncs both categoryList.currentIndex and nodeList.currentIndex to the node's position in the updated filtered lists without touching selectedNodeName. Only when the node is filtered out does it fall back to selectFirstCategory().

Original prompt

Add a button on the top left of the GraphEditor to open a panel on the left. This panel displays the list of node categories. When we click on a category, it displays the list of corresponding nodes. When we select a node, it displays the corresponding node documentation. When we double click on the node, it creates a new node in the graph.

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.