Add simple filter control for unassigned users

app/assets/stylesheets/application.css

@@ -58,3 +58,6 @@
   padding: 0 8px;
   border-right: 1px dashed gray;
 }
+.hidden {
+  display: none;
+}

app/javascript/controllers/filteredlist_controller.js

+import { Controller } from "@hotwired/stimulus";
+
+export default class extends Controller {
+  static targets = ["input", "list"];
+
+  connect() {
+    //this.options = Array.from(this.listTarget.children)
+  }
+
+  filter() {
+    const query = this.inputTarget.value.toLowerCase()
+    // Filter options by the `data-filteredlist-match` attribute
+    for (const option of this.listTarget.children) {
+      if (option.dataset.filteredlistMatch.includes(query)) {
+        option.classList.remove("hidden")
+      } else {
+        option.classList.add("hidden")
+      }
+    }
+  }
+}

app/views/assignments/_filteredlist.html.erb

+<div class="relative inline-block w-64" 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 pl-3 pr-10 py-2 text-sm 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">
+      <% users.each do |user| %>
+        <%= render partial: 'assignments/filteredlist_option', locals: { session: session, user: user } %>
+      <% end %>
+    </ul>
+  </div>
+</div>

app/views/assignments/_filteredlist_option.html.erb

+<li
+  data-filteredlist-match="<%= user.name.downcase %>"
+  data-turbo-track="dynamic"
+>
+  <%= render partial: 'assignments/user_add', locals: { user: user, session: session } %>
+</li>

app/views/assignments/_user_add.html.erb

 <% disabled = local_assigns.fetch(:disabled, false) %>
+<span class="unassigned-user">
 <% if not disabled %>
 <span class="inline-flex items-center gap-x-0.5 rounded-md bg-gray-50 px-2 py-1 text-xs font-medium text-gray-600 ring-1 ring-inset ring-gray-500/10" style="background-color: <%= user.avatar_color %>" title="<%= user.name %>">
   <span style="color: <%= user.text_color %>"><%= user.name %></span>
@@ -23,4 +24,5 @@
       <span class="absolute -inset-1"></span>
   </button>
 </span>
-<% end %>
+<% end %>
\ No newline at end of file
+</span>

app/views/sessions/_session.html.erb

 <% unassigned_users = User.all - session.assignments.collect(&:user) %>
-<%= turbo_frame_tag dom_id(session) do %>
+<%= turbo_frame_tag dom_id(session), method: "morph" 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>
@@ -58,12 +58,6 @@
       </div>
     <% end %>
     <small>unassigned (<%= unassigned_users.length %>)</small>
-    <ul class="flex flex-row flex-wrap gap-1 my-1 flex-shrink-0">
-      <% unassigned_users.each do |user| %>
-        <li>
-          <span class="unassigned-user"><%= render partial: 'assignments/user_add', locals: { user: user, session: session } %></span>
-        </li>
-      <% end %>
-    </ul>
+    <%= render partial: 'assignments/filteredlist', locals: { session: session, users: unassigned_users } %>
   </div>
 <% end %>