Use headers and actions in users moderation table

Having proper headers makes it more accessible.

We're also using the table actions component because we're going to add
another action. Since table actions use a flex layout, we have to tweak
the styles a little bit. For that, I'm adding a <main> element which
will make it possible to style just this table while also providing an
extra shortcut for people using screen readers.

app/assets/stylesheets/application.scss

@@ -40,6 +40,7 @@
 @import "debates/**/*";
 @import "layout/**/*";
 @import "machine_learning/**/*";
+@import "moderation/**/*";
 @import "proposals/**/*";
 @import "relationable/**/*";
 @import "sdg/**/*";

app/assets/stylesheets/moderation/users/index.scss

@@ -0,0 +1,10 @@
+.moderation-users-index {
+  th:last-child,
+  td:last-child {
+    text-align: $global-right;
+  }
+
+  .table-actions {
+    justify-content: flex-end;
+  }
+}

app/views/moderation/users/index.html.erb

@@ -1,31 +1,35 @@
+<main class="moderation-users-index">
   <h2><%= t("moderation.users.index.title") %></h2>
 
   <%= render Admin::SearchComponent.new(label: t("moderation.users.index.search_placeholder")) %>
 
   <% if @users.present? %>
     <h3><%= page_entries_info @users %></h3>
-<% end %>
 
-<table id="moderation_users">
+    <table id="moderation_users" class="moderation-users">
+      <thead>
+        <th><%= t("admin.hidden_users.index.user") %></th>
+        <th><%= t("admin.actions.actions") %></th>
+      </thead>
       <tbody>
         <% @users.each do |user| %>
           <tr>
             <td>
               <%= user.name %>
             </td>
-        <td class="text-right">
+            <td>
               <% if user.hidden? %>
                 <%= t("moderation.users.index.hidden") %>
               <% else %>
-            <%= render Admin::ActionComponent.new(
+                <%= render Admin::TableActionsComponent.new(user, actions: []) do |actions| %>
+                  <%= actions.action(
                     :hide_in_moderation_screen,
-              user,
                     text: t("moderation.users.index.hide"),
                     method: :put,
-              "aria-label": true,
                     class: "button hollow alert"
                   ) %>
                 <% end %>
+              <% end %>
             </td>
           </tr>
         <% end %>
@@ -33,3 +37,5 @@
     </table>
 
     <%= paginate @users %>
+  <% end %>
+</main>