Add project: use richer selector for organization/team

[humitos]

Initial POC. This needs more customization, and even probably play a little with the template to add more data: https://fomantic-ui.com/modules/search.html#templates

Peek.2025-07-16.17-45.webm

Closes #468

[humitos]

@agjohnson just checking with you about the direction of this PR. Is this UI element the one we want? Does it look fine to move forward with?

If we want to show more information inside it (like organization disabled, or auth method) we will need to define a custom template for it, it seems. Is that what we want? In that case, I will need some help from you with the design/style of it.

[agjohnson]

What you have here is a nice improvement visually, but it won't benefit the majority of users as having multiple organizations is not common. This is a pattern that falls under core team usage and very edge case usage.

The categorized list display isn't as flexible underneath, so a flat list is probably best. I would work off the project automatic creation view, which uses a completely custom template for the listing items¹, driven by custom usage of the dropdown². This would allow us to use more display elements inside each list item.

I would do all of that in a simpler way and skip the Knockout templating and just use a standard HTML template like we do with web components. The docs on the search templates ³ describe in a little detail how to do this, but the important pieces would be:

• A KO view for the form wraps all of this JS
• There is an observable or a view method to configure the the organization search initSearch()
• This returns an object similar to

  ext-theme/src/js/project/create.js

  Lines 127 to 171 in ccbc569

  	init_search() {
  	const config = this.config();
  	const url = config.urls.remoterepository_list + "?full_name={query}";
  	this.search_config({
  	// We use a Knockout template here, embedded in the template as a script
  	// element. This avoids string interpolation in JS and keeps HTML in one
  	// place, along with HTML translations.
  	type: "knockout",
  	templates: {
  	knockout: (response) => {
  	let node_temp = jquery("<div>");
  	ko.applyBindingsToNode(node_temp[0], {
  	template: {
  	name: "remote-repo-results",
  	data: {
  	remote_repos: response.results.map((repo) => {
  	return new RemoteRepository(repo);
  	}),
  	},
  	},
  	});
  	const output = node_temp.html();
  	node_temp.remove();
  	return output;
  	},
  	},
  	apiSettings: {
  	url: url,
  	},
  	selector: {
  	// Required because the default of ``prompt`` is a rounded input
  	prompt: ".ui.text",
  	// Required as we use `.title` to style a complex result title. SUI uses
  	// the `text()` of this element to look up the result
  	title: ".title .text",
  	},
  	fullTextSearch: true,
  	onSelect: (result, response) => {
  	this.selected(new RemoteRepository(result));
  	},
  	});
  	}

• If the KO pattern seems too complex, the config would be more like

{
  ...
  type: "teamsList",
  templates: {
    teamsList: (response) => {
      const results = response.results.map((result) => {
        return `<div class="item">...</div>`;
      }
      return ''.join(results);
    }
  }
  ...
}

Footnotes

1. https://github.com/readthedocs/ext-theme/blob/ccbc569090e8a9c5726f4e964132c5c48439addd/readthedocsext/theme/templates/projects/partials/project_create_automatic.html#L54-L75 ↩

2. https://github.com/readthedocs/ext-theme/blob/ccbc569090e8a9c5726f4e964132c5c48439addd/src/js/project/create.js#L132-L155 ↩

3. https://fomantic-ui.com/modules/search.html#templates ↩