From 12964c83efb44610455d3e2d5be3f74c8466fc06 Mon Sep 17 00:00:00 2001
From: IhorMasechko <igor.masechko007@gmail.com>
Date: Thu, 19 Jun 2025 16:11:27 +0300
Subject: [PATCH 1/5] Fix filter anchor positioning and improve HTML structure

- Update filter anchor to use SCSS header height variables instead of hardcoded values

- Add visibility hidden property to filter anchor for better accessibility

- Restructure HTML layout by moving filter anchor outside main content area

- Improve HTML formatting and code readability
---
 website/modules/asset/ui/src/scss/_cases.scss |  5 ++--
 .../case-studies-page/views/index.html        | 23 +++++++++++++------
 2 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/website/modules/asset/ui/src/scss/_cases.scss b/website/modules/asset/ui/src/scss/_cases.scss
index 751355da..679951a1 100644
--- a/website/modules/asset/ui/src/scss/_cases.scss
+++ b/website/modules/asset/ui/src/scss/_cases.scss
@@ -617,10 +617,11 @@
 
 .filter-anchor {
   position: relative;
-  top: -64px;
+  top: -$mobile-header-height;
   height: 0;
+  visibility: hidden;
   @include breakpoint-medium {
-    top: -95px;
+    top: -$desktop-header-height;
   }
 }
 
diff --git a/website/modules/case-studies-page/views/index.html b/website/modules/case-studies-page/views/index.html
index 07c54d02..f0589399 100644
--- a/website/modules/case-studies-page/views/index.html
+++ b/website/modules/case-studies-page/views/index.html
@@ -1,12 +1,14 @@
 {# modules/case-studies-page/views/index.new.html #} {% extends "layout.html" %}
 {% import '@apostrophecms/pager:macros.html' as pager with context %} {% block
 main %}
-<div class="cs_container" data-default-visible-tags="{{ data.defaultVisibleTagsCount }}">
+<div
+  class="cs_container"
+  data-default-visible-tags="{{ data.defaultVisibleTagsCount }}"
+>
   <div class="cs_content">
-    <div class="page-main_content">
-      {% area data.page, 'main' %}
-      <div id="filter" class="filter-anchor"></div>
-    </div>
+    <div class="page-main_content">{% area data.page, 'main' %}</div>
+
+    <div id="filter" class="filter-anchor"></div>
 
     <div class="cs_filter-info">
       <div class="filters-cta">Filter Case Studies</div>
@@ -162,7 +164,10 @@
                 {% endif %}
               </li>
               {% else %}
-              <li class="tag-item{% if loop.index > data.defaultVisibleTagsCount %} tag-item--hidden{% endif %}" data-label="{{ tag.label | lower }}">
+              <li
+                class="tag-item{% if loop.index > data.defaultVisibleTagsCount %} tag-item--hidden{% endif %}"
+                data-label="{{ tag.label | lower }}"
+              >
                 {% if filterType == 'industry' %}
                 <a
                   class="tag-link"
@@ -189,7 +194,11 @@
               {% endif %} {% endfor %}
             </ul>
             {% if tags.length > data.defaultVisibleTagsCount %}
-            <button class="tags__show-more" data-filter-type="{{ filterType }}" type="button">
+            <button
+              class="tags__show-more"
+              data-filter-type="{{ filterType }}"
+              type="button"
+            >
               <span class="tags__show-more--icon">
                 <img src="/images/plus.svg" alt="Plus icon" />
               </span>

From c6fc063950ed53d59e11ccf9d474c0ea79456d0f Mon Sep 17 00:00:00 2001
From: IhorMasechko <igor.masechko007@gmail.com>
Date: Fri, 20 Jun 2025 15:35:00 +0300
Subject: [PATCH 2/5] fix anchor issue

---
 website/modules/asset/ui/src/index.js | 30 +++++++++++++++------------
 1 file changed, 17 insertions(+), 13 deletions(-)

diff --git a/website/modules/asset/ui/src/index.js b/website/modules/asset/ui/src/index.js
index 053ac728..af76efca 100644
--- a/website/modules/asset/ui/src/index.js
+++ b/website/modules/asset/ui/src/index.js
@@ -10,13 +10,11 @@ import { initSmoothCounters } from './smoothCounters';
 import lozad from 'lozad';
 import { setupTagSearchForInput } from './searchInputHandler';
 import { FilterModal } from './filterModal';
+
 /* eslint-enable sort-imports */
 
-// Initialize configuration from data attributes
 function initConfiguration() {
-  // Set default fallback value first
   window.DEFAULT_VISIBLE_TAGS_COUNT = 5;
-
   const container = document.querySelector('.cs_container');
   if (container) {
     const defaultVisibleTags = container.getAttribute(
@@ -31,14 +29,11 @@ function initConfiguration() {
   }
 }
 
-// Lazy loading
 function initImageLozad() {
-  // Lazy loads elements with default selector as '.lozad'
   const observer = lozad();
   observer.observe();
 }
 
-// Change fonts for the hero FUTURE word
 function initFontChanger() {
   const heroContent = document.querySelector('.sf-hero-content strong');
   if (!heroContent) return;
@@ -84,7 +79,6 @@ function initCaseStudiesTagFilter({
   );
 }
 
-// Wrapper function
 function initializeAllComponents() {
   initImageLozad();
   initAllSwipers();
@@ -114,7 +108,6 @@ function initBarbaPageTransitions() {
       // Close menu if it's open
       const menuButton = document.getElementById('nav-icon');
       const menu = document.querySelector('[data-menu]');
-
       if (menuButton && menu) {
         menu.classList.remove('open');
         menuButton.classList.remove('open');
@@ -126,7 +119,6 @@ function initBarbaPageTransitions() {
         video.play();
       }
 
-      // Call the wrapper function to initialize all components
       initializeAllComponents();
 
       // Initialize Apostrophe forms before removing old content
@@ -289,8 +281,20 @@ export default () => {
   initAnchorNavigation();
   initMenuToggle();
 
-  // Check if in edit mode
-  if (apos.adminBar) {
-    initSmoothCounters();
-  }
+  // Case studies anchor fix
+  setTimeout(() => {
+    const url = window.location.href;
+    if (
+      url.includes('/cases') &&
+      (url.includes('#filter') ||
+        url.includes('industry') ||
+        url.includes('stack') ||
+        url.includes('caseStudyType'))
+    ) {
+      const filterAnchor = document.getElementById('filter');
+      if (filterAnchor) filterAnchor.scrollIntoView({ behavior: 'smooth' });
+    }
+  }, 300);
+
+  if (apos.adminBar) initSmoothCounters();
 };

From 12d74774a93b0859b8d4fb5437a704cc25cc9dea Mon Sep 17 00:00:00 2001
From: IhorMasechko <igor.masechko007@gmail.com>
Date: Fri, 20 Jun 2025 19:22:44 +0300
Subject: [PATCH 3/5] avoid unnecessary re-renders of filter block

---
 .../asset/ui/src/clientSideFiltering.js       | 48 +++++++++++++++++++
 website/modules/asset/ui/src/index.js         |  4 +-
 website/modules/asset/ui/src/scss/_cases.scss |  5 ++
 3 files changed, 55 insertions(+), 2 deletions(-)
 create mode 100644 website/modules/asset/ui/src/clientSideFiltering.js

diff --git a/website/modules/asset/ui/src/clientSideFiltering.js b/website/modules/asset/ui/src/clientSideFiltering.js
new file mode 100644
index 00000000..bda8ccae
--- /dev/null
+++ b/website/modules/asset/ui/src/clientSideFiltering.js
@@ -0,0 +1,48 @@
+// Client-side filtering for case studies with page reload
+
+const shouldInterceptClick = function (link) {
+  const href = link.getAttribute('href');
+  return (
+    href &&
+    (href.includes('#filter') ||
+      href.includes('?industry=') ||
+      href.includes('&industry=') ||
+      href.includes('?stack=') ||
+      href.includes('&stack=') ||
+      href.includes('?caseStudyType=') ||
+      href.includes('&caseStudyType='))
+  );
+};
+
+const handleFilterClick = function (event) {
+  const filterLink = event.target.closest(
+    '.tag-link, .remove-tag, .clear-all-link',
+  );
+  if (!filterLink || !shouldInterceptClick(filterLink)) {
+    return;
+  }
+
+  event.preventDefault();
+
+  const href = filterLink.getAttribute('href');
+  const url = new URL(href, window.location.origin);
+  const newUrl = url.pathname + url.search + url.hash;
+
+  history.pushState({ clientSideFilter: true, url: newUrl }, '', newUrl);
+  window.location.reload();
+};
+
+const handlePopState = function (event) {
+  if (event.state && event.state.clientSideFilter) {
+    window.location.reload();
+  }
+};
+
+export const initClientSideFiltering = function () {
+  if (!document.querySelector('.cs_list')) {
+    return;
+  }
+
+  window.addEventListener('popstate', handlePopState);
+  document.addEventListener('click', handleFilterClick);
+};
diff --git a/website/modules/asset/ui/src/index.js b/website/modules/asset/ui/src/index.js
index af76efca..34b7a3e1 100644
--- a/website/modules/asset/ui/src/index.js
+++ b/website/modules/asset/ui/src/index.js
@@ -10,6 +10,7 @@ import { initSmoothCounters } from './smoothCounters';
 import lozad from 'lozad';
 import { setupTagSearchForInput } from './searchInputHandler';
 import { FilterModal } from './filterModal';
+import { initClientSideFiltering } from './clientSideFiltering';
 
 /* eslint-enable sort-imports */
 
@@ -88,6 +89,7 @@ function initializeAllComponents() {
   initPhoneFormatting();
   initCaseStudiesTagFilter();
   initCaseStudiesFilterHandler();
+  initClientSideFiltering();
 }
 
 // Barba pages
@@ -240,7 +242,6 @@ function initMenuToggle() {
 
 // Filter Case Studies modal for Case Studies mobile page
 function initFilterModal() {
-  // Only initialize if we're on the case studies page
   if (!document.querySelector('.cs_list')) {
     return;
   }
@@ -258,7 +259,6 @@ function initFilterModal() {
 
 document.addEventListener('DOMContentLoaded', initFilterModal);
 
-// Initialize after Barba transitions
 if (typeof barba !== 'undefined') {
   barba.hooks.after(() => {
     initFilterModal();
diff --git a/website/modules/asset/ui/src/scss/_cases.scss b/website/modules/asset/ui/src/scss/_cases.scss
index 679951a1..5b5353e2 100644
--- a/website/modules/asset/ui/src/scss/_cases.scss
+++ b/website/modules/asset/ui/src/scss/_cases.scss
@@ -625,6 +625,11 @@
   }
 }
 
+// Loading state for client-side filtering
+.cs_grid {
+  transition: opacity 0.3s ease;
+}
+
 // Case Study preview card
 .cs_grid {
   display: grid;

From 436adeff868fc4cfc11e12df392f6847e2ee3567 Mon Sep 17 00:00:00 2001
From: IhorMasechko <igor.masechko007@gmail.com>
Date: Fri, 20 Jun 2025 20:24:30 +0300
Subject: [PATCH 4/5] Improve client-side filtering and URL handling
 reliability

- Add error handling for URL construction in client-side filtering
- Use optional chaining for safer event state checking
- Refactor case studies anchor fix with destructured URL properties
- Consolidate CSS rules for case study grid loading state
- Remove redundant comments in index.js initialization
---
 .../asset/ui/src/clientSideFiltering.js       | 15 +++++++++-----
 website/modules/asset/ui/src/index.js         | 20 +++++++++----------
 website/modules/asset/ui/src/scss/_cases.scss |  8 ++------
 3 files changed, 21 insertions(+), 22 deletions(-)

diff --git a/website/modules/asset/ui/src/clientSideFiltering.js b/website/modules/asset/ui/src/clientSideFiltering.js
index bda8ccae..51a2738b 100644
--- a/website/modules/asset/ui/src/clientSideFiltering.js
+++ b/website/modules/asset/ui/src/clientSideFiltering.js
@@ -25,15 +25,20 @@ const handleFilterClick = function (event) {
   event.preventDefault();
 
   const href = filterLink.getAttribute('href');
-  const url = new URL(href, window.location.origin);
-  const newUrl = url.pathname + url.search + url.hash;
+  try {
+    const url = new URL(href, window.location.origin);
+    const newUrl = url.pathname + url.search + url.hash;
 
-  history.pushState({ clientSideFilter: true, url: newUrl }, '', newUrl);
-  window.location.reload();
+    history.pushState({ clientSideFilter: true, url: newUrl }, '', newUrl);
+    window.location.reload();
+  } catch {
+    // Fallback to default navigation if URL construction fails
+    window.location.href = href;
+  }
 };
 
 const handlePopState = function (event) {
-  if (event.state && event.state.clientSideFilter) {
+  if (event.state?.clientSideFilter) {
     window.location.reload();
   }
 };
diff --git a/website/modules/asset/ui/src/index.js b/website/modules/asset/ui/src/index.js
index 34b7a3e1..57085586 100644
--- a/website/modules/asset/ui/src/index.js
+++ b/website/modules/asset/ui/src/index.js
@@ -266,13 +266,10 @@ if (typeof barba !== 'undefined') {
 }
 
 export default () => {
-  // Initialize configuration first
   initConfiguration();
 
-  // Init all scripts after first visiting the page
   initializeAllComponents();
 
-  // Initialize case studies filter handler when DOM is ready
   apos.util.onReady(() => {
     initCaseStudiesFilterHandler();
   });
@@ -283,14 +280,15 @@ export default () => {
 
   // Case studies anchor fix
   setTimeout(() => {
-    const url = window.location.href;
-    if (
-      url.includes('/cases') &&
-      (url.includes('#filter') ||
-        url.includes('industry') ||
-        url.includes('stack') ||
-        url.includes('caseStudyType'))
-    ) {
+    const { pathname, search, hash } = window.location;
+    const isCasesPage = pathname.includes('/cases');
+    const hasFilterParams =
+      search.includes('industry') ||
+      search.includes('stack') ||
+      search.includes('caseStudyType') ||
+      hash.includes('filter');
+
+    if (isCasesPage && hasFilterParams) {
       const filterAnchor = document.getElementById('filter');
       if (filterAnchor) filterAnchor.scrollIntoView({ behavior: 'smooth' });
     }
diff --git a/website/modules/asset/ui/src/scss/_cases.scss b/website/modules/asset/ui/src/scss/_cases.scss
index 5b5353e2..2c084632 100644
--- a/website/modules/asset/ui/src/scss/_cases.scss
+++ b/website/modules/asset/ui/src/scss/_cases.scss
@@ -625,12 +625,7 @@
   }
 }
 
-// Loading state for client-side filtering
-.cs_grid {
-  transition: opacity 0.3s ease;
-}
-
-// Case Study preview card
+// Case Study preview card with loading state transition
 .cs_grid {
   display: grid;
   grid-template-columns: 1fr;
@@ -639,6 +634,7 @@
   opacity: 0;
   transform: translateY(30px);
   filter: blur(2px);
+  transition: opacity 0.3s ease;
   animation: smoothFadeInUp 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.2s
     forwards;
 

From 3ce3b572f7a5d353285899fcd13a75952aded038 Mon Sep 17 00:00:00 2001
From: IhorMasechko <igor.masechko007@gmail.com>
Date: Mon, 23 Jun 2025 15:31:40 +0300
Subject: [PATCH 5/5] Fix linter error

---
 website/modules/asset/ui/src/scss/_cases.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/website/modules/asset/ui/src/scss/_cases.scss b/website/modules/asset/ui/src/scss/_cases.scss
index 2c084632..62e8eb6a 100644
--- a/website/modules/asset/ui/src/scss/_cases.scss
+++ b/website/modules/asset/ui/src/scss/_cases.scss
@@ -70,6 +70,7 @@
     flex-direction: column;
     gap: 32px;
     align-items: center;
+    min-height: calc(100vh - 330px);
 
     @include breakpoint-medium {
       flex-direction: row;