UX: Improve group selector in theme objects editor (#26312)

Why this change?

Prior to this change, the group selector was using the `<GroupChooser>`
component which is a `<MultiSelectComponent>` and is not ideal in our
situation when we only allow a single group to be selected.

The other problem is that we are doing an async load of the groups when
it is already loaded and available in the `Site` service.

app/assets/javascripts/admin/addon/components/schema-theme-setting/types/group.gjs

@@ -1,29 +1,36 @@
 import Component from "@glimmer/component";
 import { tracked } from "@glimmer/tracking";
-import { hash } from "@ember/helper";
 import { action } from "@ember/object";
-import Group from "discourse/models/group";
+import { service } from "@ember/service";
 import FieldInputDescription from "admin/components/schema-theme-setting/field-input-description";
-import GroupChooser from "select-kit/components/group-chooser";
+import ComboBoxComponent from "select-kit/components/combo-box";
 
 export default class SchemaThemeSettingTypeGroup extends Component {
+  @service site;
   @tracked value = this.args.value;
-  @tracked groups = Group.findAll().then((groups) => {
-    this.groups = groups;
-  });
+
+  required = this.args.spec.required;
 
   @action
   onInput(newVal) {
-    this.value = newVal[0];
-    this.args.onChange(newVal[0]);
+    this.value = newVal;
+    this.args.onChange(newVal);
+  }
+
+  get groupChooserOptions() {
+    return {
+      clearable: !this.required,
+      filterable: true,
+      none: null,
+    };
   }
 
   <template>
-    <GroupChooser
-      @content={{this.groups}}
+    <ComboBoxComponent
+      @content={{this.site.groups}}
       @value={{this.value}}
       @onChange={{this.onInput}}
-      @options={{hash maximum=1}}
+      @options={{this.groupChooserOptions}}
     />
 
     <FieldInputDescription @description={{@description}} />