discourse/plugins/chat/assets
Kelv c7ba173696
DEV: replace template with component arg in DAutocomplete and add UserAutocompleteResults (#35539)
### Summary

This PR introduces a modern component-based API for the `d-autocomplete`
modifier, enabling developers to use Glimmer components instead of
template strings for rendering the autocomplete results.

The existing autocomplete system relied on template strings
(`userAutocomplete`, `groupAutocomplete`) which had several limitations:
- Required manual HTML escaping with `escapeExpression()`
- Used unsafe `iconHTML()` with triple-stache `{{{ }}}` syntax
- Tight coupling between rendering and data logic

### Changes

**New Component-Based API**
- Added `component` parameter to `DAutocompleteModifier` (takes
precedence over `template`)
- Updated `d-autocomplete-results.gjs` to conditionally render either:
  - Custom component (via `@data.component`) for new API
  - Template HTML (via `@data.template`) for legacy API
- Component receives properly structured args: `@results`,
`@selectedIndex`, `@onSelect`, `@onRender`

**New Component for each type of Autocomplete result**
  - Safer `{{icon}}` helper instead of `{{{iconHTML}}}`
  - Automatic HTML escaping via Glimmer `{{}}`
  - `scrollIntoView` modifier for keyboard navigation
  - Declarative `{{#each}}` with reactive index tracking
  - Matches exact CSS structure of legacy template

---
We'll add new ones for Hashtag and Emoji Autocompletes in upcoming PRs.
2025-11-05 10:59:32 +08:00
..
javascripts DEV: replace template with component arg in DAutocomplete and add UserAutocompleteResults (#35539) 2025-11-05 10:59:32 +08:00
stylesheets UX: Use custom icon for searching in chat (#35600) 2025-10-24 14:42:37 -05:00