Cleanup

web/app/components/inputs/people-select.hbs

@@ -6,27 +6,27 @@
   @searchField="email"
   @options={{this.people}}
   @selected={{@selected}}
-  @calculatePosition={{this.calculatePosition}}
   @renderInPlace={{@renderInPlace}}
   @placeholder="Search for your peers..."
-  @loadingMessage="Loading..."
   @onChange={{@onChange}}
   @onInput={{this.onInput}}
   @onClose={{this.onClose}}
   @onKeydown={{@onKeydown}}
   @disabled={{@disabled}}
   @selectedItemComponent={{component "multiselect/user-email-image-chip"}}
+  @calculatePosition={{this.calculatePosition}}
+  @loadingMessage="Loading..."
   @eventType="click"
   {{on "click" this.onClick}}
   ...attributes
   as |value|
 >
   <div class="flex items-center gap-2 overflow-hidden py-1">
-    <Person::Avatar @email={{value}} class="shrink-0" />
+    <Person::Avatar @email={{value}} />
     <div class="w-full min-w-0">
       <div class="truncate text-body-200 leading-tight">
         {{get-model-attr "person.name" value}}
-        <span class="ml-0.5 text-body-100 opacity-70">
+        <span class="ml-0.5 text-body-100 text-color-foreground-disabled">
           {{get-model-attr "person.email" value}}
         </span>
       </div>

web/app/components/inputs/people-select.ts

@@ -104,7 +104,7 @@ export default class InputsPeopleSelectComponent extends Component<InputsPeopleS
    * The action taken when focus leaves the component.
    * Clears the people list and calls `this.args.onBlur` if it exists.
    */
-  @action onClose() {
+  @action protected onClose() {
     this.people = [];
   }
 
@@ -127,8 +127,6 @@ export default class InputsPeopleSelectComponent extends Component<InputsPeopleS
 
     const { verticalPosition, horizontalPosition } = position;
 
-    console.log("horizontalPosition", horizontalPosition);
-
     let { top, left, width } = position.style;
 
     assert("top must be a number", typeof top === "number");
@@ -168,13 +166,11 @@ export default class InputsPeopleSelectComponent extends Component<InputsPeopleS
       let retryDelay = INITIAL_RETRY_DELAY;
 
       try {
-        await timeout(500);
         const people = await this.store.query("person", {
           query,
         });
 
         if (people) {
-          console.log("there are people");
           this.people = people
             .map((p: PersonModel) => p.email)
             .filter((email: string) => {
@@ -184,7 +180,6 @@ export default class InputsPeopleSelectComponent extends Component<InputsPeopleS
               );
             });
         } else {
-          console.log("there are no people");
           this.people = [];
         }
         // stop the loop if the query was successful

web/app/styles/ember-power-select-theme.scss

@@ -52,18 +52,22 @@ $ember-power-select-multiple-option-line-height: 1.3;
 }
 
 .ember-power-select-options[role="listbox"] {
-  @apply mt-[3px] max-h-[200px];
+  @apply max-h-[200px];
 }
 
 .ember-power-select-option {
   @apply py-px;
 
+  &:first-child {
+    @apply mt-[3px];
+  }
+
   &:last-child {
     @apply mb-[3px];
   }
 }
 
 .ember-power-select-option--loading-message,
 .ember-power-select-option--no-matches-message {
-  @apply h-7 px-3.5 text-color-foreground-disabled;
+  @apply h-7 px-3.5 text-color-foreground-faint;
 }