Refactored listbox

app/components/form/listbox.hbs

@@ -7,23 +7,30 @@
 >
   <Listbox @value={{@value}} @onChange={{@onChange}} as |listbox|>
     <listbox.Button
-      class='inline-flex items-center px-3 py-2 border rounded cursor-pointer'
+      class='relative w-full inline-flex items-center py-2 pl-3 pr-10 border rounded cursor-pointer'
     >
       {{#if (has-block)}}
         {{yield @value}}
       {{else}}
-        {{@listboxLabel}}
+        {{@prefixValue}}
         {{@value}}
       {{/if}}
+
+      <span
+        class='absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none'
+      >
+        <Icons::MenuSwap class='fill-base-3' />
+      </span>
     </listbox.Button>
     <listbox.Options
-      class='absolute z-dropdown right-0 w-28 min-w-min mt-2 py-1 origin-top-right bg-base-7 border rounded shadow-sm outline-none'
+      class='absolute w-full z-dropdown right-0 min-w-min mt-2 py-1 origin-top-right bg-base-7 border rounded shadow-sm outline-none'
       as |options|
     >
       {{#each @values as |item|}}
         <options.Option @value={{item}} class='outline-none'>
           <div
-            class='flex items-center px-4 py-2 text-sm hover:bg-base-6 hover:text-base-1 cursor-pointer'
+            class='flex items-center px-4 py-2 text-sm hover:bg-base-6 hover:text-base-1 cursor-pointer
+              {{if (eq item @value) "bg-base-6 text-base-1"}}'
           >
             {{#if (has-block)}}
               {{yield item}}

app/components/icons/menu-swap.js

@@ -0,0 +1 @@
+export { MenuSwap as default } from 'ember-mdi';

app/templates/admin/indexes/item/documents/index.hbs

@@ -19,7 +19,7 @@
   {{! sort }}
   {{#if this.sortValues.length}}
     <Form::Listbox
-      @listboxLabel={{'Sort: '}}
+      @prefixValue={{'Sort: '}}
       @value={{nu-co this.sort 'none'}}
       @values={{this.sortValues}}
       @onChange={{set this 'sort'}}
@@ -30,7 +30,7 @@
 
   {{! limit }}
   <Form::Listbox
-    @listboxLabel={{'Limit: '}}
+    @prefixValue={{'Limit: '}}
     @value={{nu-co this.limit 'none'}}
     @values={{array 20 50 100 500}}
     @onChange={{set this 'limit'}}

app/templates/admin/indexes/item/settings.hbs

@@ -3,9 +3,9 @@
   @values={{this.model.settings}}
   @onChange={{set this.model 'currentSetting'}}
   class="w-72"
-  as |setting|
+  as |item|
 >
-  {{if setting.name (namelize setting.name) 'All settings'}}
+  {{if item.name (namelize item.name) 'All settings'}}
 </Form::Listbox>
 
 <IndexSetting

app/templates/admin/tasks/index.hbs

@@ -3,7 +3,7 @@
 <div class='sm:flex sm:flex-nowrap'>
   {{! indexUid }}
   <Form::Listbox
-    @listboxLabel={{'Index: '}}
+    @prefixValue={{'Index: '}}
     @value={{nu-co this.indexUid 'none'}}
     @values={{map-by 'uid' @model.indexes.results}}
     @onChange={{set this 'indexUid'}}
@@ -12,7 +12,7 @@
 
   {{! status }}
   <Form::Listbox
-    @listboxLabel={{'Status: '}}
+    @prefixValue={{'Status: '}}
     @value={{nu-co this.status 'none'}}
     @values={{this.taskStatuses}}
     @onChange={{set this 'status'}}
@@ -22,7 +22,7 @@
 
   {{! status }}
   <Form::Listbox
-    @listboxLabel={{'Type: '}}
+    @prefixValue={{'Type: '}}
     @value={{nu-co this.type 'none'}}
     @values={{this.taskTypes}}
     @onChange={{set this 'type'}}
@@ -32,7 +32,7 @@
 
   {{! limit }}
   <Form::Listbox
-    @listboxLabel={{'Limit: '}}
+    @prefixValue={{'Limit: '}}
     @value={{nu-co this.limit 'none'}}
     @values={{array 20 50 100 500}}
     @onChange={{set this 'limit'}}