add avatar-group next to report person select

src/main/css/2-components.css

@@ -1,5 +1,6 @@
 @import "tailwindcss/components.css";
 @import "./components/ajax-loader.css";
+@import "./components/avatar-group.css";
 @import "./components/body-overlay.css";
 @import "./components/checkbox-switch.css";
 @import "./components/info-banner.css";

src/main/css/components/avatar-group.css

@@ -0,0 +1,25 @@
+.avatar-group {
+  display: flex;
+  @apply p-0.5;
+  @apply bg-gradient-to-b from-transparent via-blue-100 to-blue-100;
+  @apply rounded-full;
+
+  & > *:not(:first-child) {
+    margin-left: -0.5rem;
+  }
+
+  .avatar {
+    transition: transform 100ms ease-out;
+
+    &:hover {
+      transform: translateY(-0.25rem);
+      z-index: 1;
+    }
+
+    svg,
+    img {
+      cursor: default;
+      border: 2px solid white;
+    }
+  }
+}

src/main/resources/templates/reports/_user-select.html

@@ -9,6 +9,7 @@
       action="#"
       th:action="${userReportFilterUrl}"
       method="get"
+      class="flex gap-2"
     >
       <div class="relative">
         <a
@@ -94,6 +95,23 @@
           </button>
         </div>
       </div>
+      <div
+        th:if="${not #lists.isEmpty(selectedUserIds)}"
+        class="flex avatar-group"
+      >
+        <th:block th:each="user : ${users}">
+          <div
+            th:if="${allUsersSelected or user.selected}"
+            class="avatar text-blue-300"
+          >
+            <img
+              alt=""
+              src=""
+              th:replace="~{fragments/avatar::avatar(${user.fullName},38,38)}"
+            />
+          </div>
+        </th:block>
+      </div>
     </form>
   </body>
 </html>