From e32f60f58f27b128d87726cf9a83ef5257b26199 Mon Sep 17 00:00:00 2001
From: Ihor Masechko <ihormasechko@Ihors-MacBook-Air.local>
Date: Tue, 10 Feb 2026 19:54:33 +0200
Subject: [PATCH] feat(case-studies): show 5 filters when collapsed and move
 selected to top via JS

---
 .../ui/src/initCaseStudiesFilterHandler.js    | 30 +++++++++++++++++++
 .../case-studies-page/views/index.html        |  5 +++-
 2 files changed, 34 insertions(+), 1 deletion(-)

diff --git a/website/modules/asset/ui/src/initCaseStudiesFilterHandler.js b/website/modules/asset/ui/src/initCaseStudiesFilterHandler.js
index 99e4e01e..daf574c9 100644
--- a/website/modules/asset/ui/src/initCaseStudiesFilterHandler.js
+++ b/website/modules/asset/ui/src/initCaseStudiesFilterHandler.js
@@ -49,6 +49,35 @@ const emptyCleanup = function () {
   // No cleanup needed
 };
 
+// Move selected (checked) tag items to the top and re-apply visibility (first 5 visible)
+const reorderSelectedTagsFirst = function () {
+  const tagsLists = document.querySelectorAll('.tags-list');
+  const visibleCount = getDefaultVisibleTagsCount();
+
+  tagsLists.forEach(function (list) {
+    const items = Array.from(list.querySelectorAll('.tag-item'));
+    const active = items.filter(function (item) {
+      return item.classList.contains('active');
+    });
+    const inactive = items.filter(function (item) {
+      return !item.classList.contains('active');
+    });
+    const reordered = active.concat(inactive);
+
+    reordered.forEach(function (item) {
+      list.appendChild(item);
+    });
+
+    reordered.forEach(function (item, index) {
+      if (index >= visibleCount) {
+        item.classList.add('tag-item--hidden');
+      } else {
+        item.classList.remove('tag-item--hidden');
+      }
+    });
+  });
+};
+
 // Setup keyboard event handlers for filter buttons
 const setupKeydownHandlers = function (filterButtons) {
   const handleKeyDown = function (event) {
@@ -246,6 +275,7 @@ const setupShowMoreHandlers = function () {
 
 // Initialization - Single responsibility: Set up all filter-related functionality
 const initCaseStudiesFilterHandler = function () {
+  reorderSelectedTagsFirst();
   const filterCleanup = setupFilterLinkDetection();
   const accessibilityCleanup = setupFilterAccessibility();
   const showMoreCleanup = setupShowMoreHandlers();
diff --git a/website/modules/case-studies-page/views/index.html b/website/modules/case-studies-page/views/index.html
index ef6ab143..5eb103bf 100644
--- a/website/modules/case-studies-page/views/index.html
+++ b/website/modules/case-studies-page/views/index.html
@@ -147,7 +147,10 @@
 
               {% endif %} 
               {% if isTagSelected %}
-              <li class="tag-item active" data-label="{{ tag.label | lower }}">
+              <li
+                class="tag-item active{% if loop.index > data.defaultVisibleTagsCount %} tag-item--hidden{% endif %}"
+                data-label="{{ tag.label | lower }}"
+              >
                 {% if filterType == 'industry' %}
                 <a
                   class="tag-link"