Improve filtered list control

- Add X button to clear filter
- Restrict maximum height
- Visually group list with filter input

app/javascript/controllers/filteredlist_controller.js

@@ -9,7 +9,7 @@ function debounce(func, wait) {
 }
 
 export default class extends Controller {
-  static targets = ["input", "list"];
+  static targets = ["input", "clear", "list"];
 
   connect() {
     this.filter = debounce(this.filter_nodebounce.bind(this), 300);
@@ -17,6 +17,13 @@ export default class extends Controller {
 
   filter_nodebounce() {
     const query = this.inputTarget.value.toLowerCase();
+
+    if (query) {
+      this.clearTarget.classList.remove("hidden");
+    } else {
+      this.clearTarget.classList.add("hidden");
+    }
+
     // Filter options by the `data-filteredlist-match` attribute
     for (const option of this.listTarget.children) {
       if (option.dataset.filteredlistMatch.includes(query)) {
@@ -26,4 +33,10 @@ export default class extends Controller {
       }
     }
   }
+
+  clear_filter() {
+    this.inputTarget.value = '';
+    this.filter_nodebounce();
+    this.inputTarget.focus();
+  }
 }

app/views/assignments/_filteredlist.html.erb

 <div data-controller="filteredlist">
+  <div class="relative">
     <input
       type="text"
       data-filteredlist-target="input"
       data-action="input->filteredlist#filter"
       autocomplete="off"
-    class="w-full border border-gray-300 rounded-md shadow-sm text-sm p-1 focus:ring-indigo-500 focus:border-indigo-500"
+      class="w-full bg-white/60 border border-gray-300 rounded-t-md shadow-sm text-sm p-1 pr-8 focus:ring-indigo-500 focus:border-indigo-500"
       placeholder="Filter..."
     />
-  <ul data-filteredlist-target="list" class="flex flex-row flex-wrap gap-1 my-1 flex-shrink-0">
+    <button
+      data-action="click->filteredlist#clear_filter"
+      aria-label="Clear filter"
+      data-filteredlist-target="clear"
+      class="absolute hidden inset-y-0 right-0 px-2 text-gray-500"> &times; </button>
+  </div>
+  <ul data-filteredlist-target="list" class="max-h-32 overflow-scroll flex flex-row flex-wrap gap-1 my-1 mt-0 flex-shrink-0 bg-black/10 rounded-b-md p-2">
     <% users.each do |user| %>
       <%= render partial: 'assignments/filteredlist_option', locals: { session: session, user: user } %>
     <% end %>

app/views/sessions/_session.html.erb

 <% unassigned_users = User.all - session.assignments.collect(&:user) %>
-<%= turbo_frame_tag dom_id(session), method: "morph" do %>
+<%= turbo_frame_tag dom_id(session), method: "morph", class: "w-full" do %>
   <div class="session shadow hover:shadow-lg overflow-scroll text-sm w-full !h-full min-h-full hover:!min-h-max <%= session.translators_needed? ? "translators-needed" : "no-translators-needed" %> <%= session.backup_needed? ? "backup-needed" : "no-backup-needed" %> <%= session.assignees? ? "has-assignees" : "no-assignees" %> <%= (session.ends_at < Time.now ? "past" : "") %>">
     <h4>
       <small class="text-2xs uppercase font-light bg-black/10 rounded-sm p-1 mr-1 lang-<%= session.language %>"><%= session.language %></small>