Add username filter with UI to admin donations page

app/views/admin/donations/_list.html.erb

@@ -1,4 +1,4 @@
-<table class="divided mb-8">
+<table class="divided">
   <thead>
     <tr>
       <th>User</th>
@@ -28,5 +28,7 @@
   </tbody>
 </table>
 <% if defined?(pagy) %>
-<%== pagy_nav pagy %>
+<div class="mt-8">
+  <%== pagy_nav pagy %>
+</div>
 <% end %>

app/views/admin/donations/index.html.erb

@@ -18,7 +18,21 @@
     <% end %>
   </section>
 
-  <% if @pending_donations.any? %>
+  <section>
+    <%= form_with url: admin_donations_path, method: :get, local: true, class: "flex gap-1" do %>
+      <%= text_field_tag :username, @username, placeholder: 'Filter by username' %>
+      <%= button_tag type: 'submit', name: nil, title: "Filter", class: 'btn-md btn-icon btn-outline' do %>
+        <%= render partial: "icons/filter", locals: { custom_class: "text-blue-600 h-4 w-4 inline" } %>
+      <% end %>
+      <% if @username %>
+        <%= link_to admin_donations_path, title: "Remove filter", class: 'btn-md btn-icon btn-outline' do  %>
+          <%= render partial: "icons/x", locals: { custom_class: "text-red-600 h-4 w-4 inline" } %>
+        <% end %>
+      <% end %>
+    <% end %>
+  </section>
+
+  <% if @pending_donations.present? %>
   <section>
     <h3>Pending</h3>
     <%= render partial: "admin/donations/list", locals: {
@@ -28,8 +42,8 @@
   <% end %>
 
   <section>
-  <% if @donations.any? %>
-    <h3>Recent</h3>
+  <% if @donations.present? %>
+    <h3>Received</h3>
     <%= render partial: "admin/donations/list", locals: {
           donations: @donations, pagy: @pagy
         } %>