From 237a28cc850da6372b39a34c40d14c24bf92d0f3 Mon Sep 17 00:00:00 2001
From: Laura Martinez Garcia <lauram@empathy.co>
Date: Tue, 6 Jun 2023 15:14:08 +0200
Subject: [PATCH 01/15] collapse subheader with full and floated predictive

---
 .../desktop-header-floating-predictive.vue    | 10 +--
 .../desktop-header-full-predictive.vue        | 16 +----
 src/components/desktop/desktop-sub-header.vue | 69 +++++++++++++++++++
 src/components/desktop/desktop.vue            | 51 +++++++++++---
 .../related-tags-floated-predictive.vue       | 19 +++++
 .../desktop/related-tags-full-predictive.vue  | 19 +++++
 6 files changed, 151 insertions(+), 33 deletions(-)
 create mode 100644 src/components/desktop/desktop-sub-header.vue
 create mode 100644 src/components/desktop/related-tags-floated-predictive.vue
 create mode 100644 src/components/desktop/related-tags-full-predictive.vue

diff --git a/src/components/desktop/desktop-header-floating-predictive.vue b/src/components/desktop/desktop-header-floating-predictive.vue
index 57fb229c..68ad53b9 100644
--- a/src/components/desktop/desktop-header-floating-predictive.vue
+++ b/src/components/desktop/desktop-header-floating-predictive.vue
@@ -1,5 +1,5 @@
 <template>
-  <MaxDesktopWidthItem class="x-pb-24">
+  <MaxDesktopWidthItem class="x-pb-8">
     <header class="x-grid x-grid-cols-6 x-items-center x-gap-12 x-pt-24">
       <Logo />
 
@@ -16,12 +16,6 @@
         <CrossIcon class="x-icon-lg" />
       </CloseMainModal>
     </header>
-
-    <div class="x-grid x-grid-cols-6">
-      <LocationProvider location="predictive_layer" class="x-col-span-4 x-col-start-2">
-        <RelatedTags v-if="$x.relatedTags.length > 0" class="x-pt-8" />
-      </LocationProvider>
-    </div>
   </MaxDesktopWidthItem>
 </template>
 
@@ -32,7 +26,6 @@
   import SearchBox from '../search-box.vue';
   import Logo from '../logo.vue';
   import MaxDesktopWidthItem from '../max-desktop-width-item.vue';
-  import { RelatedTags } from '../search';
 
   export default defineComponent({
     components: {
@@ -42,7 +35,6 @@
       Logo,
       SearchBox,
       PredictiveLayer,
-      RelatedTags,
       LocationProvider
     }
   });
diff --git a/src/components/desktop/desktop-header-full-predictive.vue b/src/components/desktop/desktop-header-full-predictive.vue
index 6dfdd71c..4ea70fb1 100644
--- a/src/components/desktop/desktop-header-full-predictive.vue
+++ b/src/components/desktop/desktop-header-full-predictive.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="x-relative x-pb-24">
+  <div class="x-relative x-pb-8">
     <MaxDesktopWidthItem>
       <header class="x-flex x-items-center x-gap-48 x-pt-24">
         <Logo />
@@ -19,16 +19,6 @@
     <LocationProvider location="predictive_layer">
       <FullWidthPredictive />
     </LocationProvider>
-
-    <MaxDesktopWidthItem>
-      <DesktopSearchboxAlign class="x-layout-container">
-        <div class="x-layout-item">
-          <LocationProvider location="predictive_layer">
-            <RelatedTags v-if="$x.relatedTags.length > 0" class="x-pt-8" />
-          </LocationProvider>
-        </div>
-      </DesktopSearchboxAlign>
-    </MaxDesktopWidthItem>
   </div>
 </template>
 
@@ -39,19 +29,15 @@
   import Logo from '../logo.vue';
   import FullWidthPredictive from '../predictive-layer/full-width-predictive.vue';
   import MaxDesktopWidthItem from '../max-desktop-width-item.vue';
-  import { RelatedTags } from '../search';
-  import DesktopSearchboxAlign from './desktop-searchbox-align.vue';
 
   export default defineComponent({
     components: {
-      DesktopSearchboxAlign,
       MaxDesktopWidthItem,
       FullWidthPredictive,
       CloseMainModal,
       CrossIcon,
       Logo,
       SearchBox,
-      RelatedTags,
       LocationProvider
     }
   });
diff --git a/src/components/desktop/desktop-sub-header.vue b/src/components/desktop/desktop-sub-header.vue
new file mode 100644
index 00000000..f43bb7b8
--- /dev/null
+++ b/src/components/desktop/desktop-sub-header.vue
@@ -0,0 +1,69 @@
+<template>
+  <div
+    class="x-layout__sub-header x-layout-max-width-md desktop:x-layout-min-margin-32 large:x-layout-max-width-lg large:x-layout-min-margin-48"
+  >
+    <div class="x-layout__sub-header-content">
+      <DesktopSearchboxAlign class="x-layout-container">
+        <RelatedTagsFloatedPredictive />
+      </DesktopSearchboxAlign>
+
+      <div v-if="!$x.redirections.length && hasSearched">
+        <DesktopToolbar />
+      </div>
+      <div v-if="$x.totalResults > 0 && hasSearched && $x.selectedFilters.length">
+        <SelectedFilters class="x-py-16" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+  import { defineComponent } from 'vue';
+  import RelatedTagsFloatedPredictive from './related-tags-floated-predictive.vue';
+  //import RelatedTagsFullPredictive from './related-tags-full-predictive.vue';
+  import DesktopSearchboxAlign from './desktop-searchbox-align.vue';
+  import DesktopToolbar from './desktop-toolbar.vue';
+
+  export default defineComponent({
+    components: {
+      DesktopToolbar,
+      RelatedTagsFloatedPredictive,
+      //RelatedTagsFullPredictive,
+      DesktopSearchboxAlign,
+      SelectedFilters: () => import('../search').then(m => m.SelectedFilters)
+    },
+    props: {
+      hasScrolled: {
+        type: Boolean
+      },
+      hasSearched: {
+        type: Boolean
+      }
+    }
+  });
+</script>
+
+<style lang="scss">
+  .x-layout__sub-header {
+    display: grid;
+    grid-template-rows: 0fr;
+    overflow: hidden;
+    transition: grid-template-rows 0.35s;
+  }
+  .x-layout__sub-header-content {
+    min-height: 0;
+    transition: visibility 0.35s;
+    visibility: hidden;
+  }
+
+  .x-layout--is-scrolling-up {
+    .x-layout__sub-header {
+      grid-template-rows: 1fr;
+    }
+  }
+  .x-layout--is-scrolling-up {
+    .x-layout__sub-header .x-layout__sub-header-content {
+      visibility: visible;
+    }
+  }
+</style>
diff --git a/src/components/desktop/desktop.vue b/src/components/desktop/desktop.vue
index 23f6dd8b..ac59d897 100644
--- a/src/components/desktop/desktop.vue
+++ b/src/components/desktop/desktop.vue
@@ -1,6 +1,17 @@
 <template>
-  <div class="x-layout-container">
-    <DesktopHeaderFullPredictive />
+  <div
+    class="x-layout-container"
+    :class="{
+      'x-layout--is-scrolling-up': hasScrolled
+    }"
+  >
+    <DesktopHeaderFloatingPredictive />
+
+    <DesktopSubHeader
+      :has-scrolled="hasScrolled"
+      :has-searched="hasSearched"
+      class="x-layout-item"
+    />
 
     <MainScroll class="x-flex x-flex-col">
       <Scroll id="main-scroll">
@@ -10,14 +21,8 @@
               <SpellcheckMessage class="x-mb-16" data-test="spellcheck-message" />
             </LocationProvider>
             <NoResultsMessage class="x-mb-16" data-test="no-results-message" />
-            <DesktopToolbar />
           </div>
 
-          <SelectedFilters
-            v-if="$x.totalResults > 0 && hasSearched && $x.selectedFilters.length"
-            class="x-py-16"
-          />
-
           <LocationProvider location="no_query">
             <CustomQueryPreview class="x-mt-56" />
           </LocationProvider>
@@ -57,7 +62,13 @@
 </template>
 
 <script lang="ts">
-  import { animateTranslate, BaseIdModal, LocationProvider } from '@empathyco/x-components';
+  import {
+    animateTranslate,
+    BaseIdModal,
+    LocationProvider,
+    ScrollDirection,
+    XOn
+  } from '@empathyco/x-components';
   import { Component } from 'vue-property-decorator';
   import { MainScroll, Scroll } from '@empathyco/x-components/scroll';
   import Main from '../main.vue';
@@ -70,9 +81,13 @@
   import MaxDesktopWidthItem from '../max-desktop-width-item.vue';
   import DesktopToolbar from './desktop-toolbar.vue';
   import DesktopHeaderFullPredictive from './desktop-header-full-predictive.vue';
+  import DesktopSubHeader from './desktop-sub-header.vue';
+  import DesktopHeaderFloatingPredictive from './desktop-header-floating-predictive.vue';
 
   @Component({
     components: {
+      DesktopHeaderFloatingPredictive,
+      DesktopSubHeader,
       MaxDesktopWidthItem,
       DesktopHeaderFullPredictive,
       CustomQueryPreview,
@@ -94,6 +109,24 @@
   })
   export default class Desktop extends HasSearchedMixin {
     protected rightAsideAnimation = animateTranslate('right');
+
+    protected stopScrollDown = true;
+    protected hasScrolled = true;
+    protected scrollOffset = 200;
+
+    @XOn('UserChangedScrollDirection')
+    scrollDirectionChanged(direction: ScrollDirection): void {
+      this.stopScrollDown = direction === 'UP';
+    }
+
+    @XOn(['UserScrolled'])
+    scrollLength(position: number): void {
+      if (this.stopScrollDown || position < this.scrollOffset) {
+        this.hasScrolled = true;
+      } else if (!this.stopScrollDown && position > this.scrollOffset) {
+        this.hasScrolled = false;
+      }
+    }
   }
 </script>
 
diff --git a/src/components/desktop/related-tags-floated-predictive.vue b/src/components/desktop/related-tags-floated-predictive.vue
new file mode 100644
index 00000000..a14c297b
--- /dev/null
+++ b/src/components/desktop/related-tags-floated-predictive.vue
@@ -0,0 +1,19 @@
+<template>
+  <div class="x-grid x-grid-cols-6">
+    <LocationProvider location="predictive_layer" class="x-col-span-4 x-col-start-2">
+      <RelatedTags v-if="$x.relatedTags.length > 0" class="x-pb-24" />
+    </LocationProvider>
+  </div>
+</template>
+
+<script>
+  import { LocationProvider } from '@empathyco/x-components';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: {
+      LocationProvider,
+      RelatedTags: () => import('../search').then(m => m.RelatedTags)
+    }
+  });
+</script>
diff --git a/src/components/desktop/related-tags-full-predictive.vue b/src/components/desktop/related-tags-full-predictive.vue
new file mode 100644
index 00000000..cbaf5b50
--- /dev/null
+++ b/src/components/desktop/related-tags-full-predictive.vue
@@ -0,0 +1,19 @@
+<template>
+  <div class="x-layout-item">
+    <LocationProvider location="predictive_layer">
+      <RelatedTags v-if="$x.relatedTags.length > 0" class="x-pb-24" />
+    </LocationProvider>
+  </div>
+</template>
+
+<script>
+  import { LocationProvider } from '@empathyco/x-components';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: {
+      LocationProvider,
+      RelatedTags: () => import('../search').then(m => m.RelatedTags)
+    }
+  });
+</script>

From 422ee488add35012b40851a714ad33b775be4bf9 Mon Sep 17 00:00:00 2001
From: Laura Martinez Garcia <lauram@empathy.co>
Date: Tue, 6 Jun 2023 15:22:59 +0200
Subject: [PATCH 02/15] fix RTs import

---
 src/components/desktop/desktop-sub-header.vue          | 10 +++++-----
 src/components/desktop/desktop.vue                     |  2 +-
 .../desktop/related-tags-floated-predictive.vue        |  3 ++-
 .../desktop/related-tags-full-predictive.vue           |  3 ++-
 4 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/src/components/desktop/desktop-sub-header.vue b/src/components/desktop/desktop-sub-header.vue
index f43bb7b8..ec1698b2 100644
--- a/src/components/desktop/desktop-sub-header.vue
+++ b/src/components/desktop/desktop-sub-header.vue
@@ -4,7 +4,7 @@
   >
     <div class="x-layout__sub-header-content">
       <DesktopSearchboxAlign class="x-layout-container">
-        <RelatedTagsFloatedPredictive />
+        <RelatedTagsFullPredictive />
       </DesktopSearchboxAlign>
 
       <div v-if="!$x.redirections.length && hasSearched">
@@ -19,16 +19,16 @@
 
 <script lang="ts">
   import { defineComponent } from 'vue';
-  import RelatedTagsFloatedPredictive from './related-tags-floated-predictive.vue';
-  //import RelatedTagsFullPredictive from './related-tags-full-predictive.vue';
+  //import RelatedTagsFloatedPredictive from './related-tags-floated-predictive.vue';
+  import RelatedTagsFullPredictive from './related-tags-full-predictive.vue';
   import DesktopSearchboxAlign from './desktop-searchbox-align.vue';
   import DesktopToolbar from './desktop-toolbar.vue';
 
   export default defineComponent({
     components: {
       DesktopToolbar,
-      RelatedTagsFloatedPredictive,
-      //RelatedTagsFullPredictive,
+      //RelatedTagsFloatedPredictive,
+      RelatedTagsFullPredictive,
       DesktopSearchboxAlign,
       SelectedFilters: () => import('../search').then(m => m.SelectedFilters)
     },
diff --git a/src/components/desktop/desktop.vue b/src/components/desktop/desktop.vue
index ac59d897..d7f3c09c 100644
--- a/src/components/desktop/desktop.vue
+++ b/src/components/desktop/desktop.vue
@@ -5,7 +5,7 @@
       'x-layout--is-scrolling-up': hasScrolled
     }"
   >
-    <DesktopHeaderFloatingPredictive />
+    <DesktopHeaderFullPredictive />
 
     <DesktopSubHeader
       :has-scrolled="hasScrolled"
diff --git a/src/components/desktop/related-tags-floated-predictive.vue b/src/components/desktop/related-tags-floated-predictive.vue
index a14c297b..dbb03133 100644
--- a/src/components/desktop/related-tags-floated-predictive.vue
+++ b/src/components/desktop/related-tags-floated-predictive.vue
@@ -9,11 +9,12 @@
 <script>
   import { LocationProvider } from '@empathyco/x-components';
   import { defineComponent } from 'vue';
+  import { RelatedTags } from '../search';
 
   export default defineComponent({
     components: {
       LocationProvider,
-      RelatedTags: () => import('../search').then(m => m.RelatedTags)
+      RelatedTags
     }
   });
 </script>
diff --git a/src/components/desktop/related-tags-full-predictive.vue b/src/components/desktop/related-tags-full-predictive.vue
index cbaf5b50..0fb7689f 100644
--- a/src/components/desktop/related-tags-full-predictive.vue
+++ b/src/components/desktop/related-tags-full-predictive.vue
@@ -9,11 +9,12 @@
 <script>
   import { LocationProvider } from '@empathyco/x-components';
   import { defineComponent } from 'vue';
+  import { RelatedTags } from '../search';
 
   export default defineComponent({
     components: {
       LocationProvider,
-      RelatedTags: () => import('../search').then(m => m.RelatedTags)
+      RelatedTags
     }
   });
 </script>

From 165c911c4831cec5b229f51d17fc0e0d6384d191 Mon Sep 17 00:00:00 2001
From: Laura Martinez Garcia <lauram@empathy.co>
Date: Wed, 7 Jun 2023 11:44:59 +0200
Subject: [PATCH 03/15] separate animation from components

---
 src/components/collapse-heigth-animation.scss | 22 +++++++++++++
 src/components/desktop/desktop-sub-header.vue | 23 +------------
 src/components/desktop/desktop.vue            | 31 +++--------------
 src/components/is-scrolling-up.mixin.ts       | 33 +++++++++++++++++++
 4 files changed, 61 insertions(+), 48 deletions(-)
 create mode 100644 src/components/collapse-heigth-animation.scss
 create mode 100644 src/components/is-scrolling-up.mixin.ts

diff --git a/src/components/collapse-heigth-animation.scss b/src/components/collapse-heigth-animation.scss
new file mode 100644
index 00000000..2f097195
--- /dev/null
+++ b/src/components/collapse-heigth-animation.scss
@@ -0,0 +1,22 @@
+.x-layout__sub-header {
+  display: grid;
+  grid-template-rows: 0fr;
+  overflow: hidden;
+  transition: grid-template-rows 0.35s;
+}
+.x-layout__sub-header-content {
+  min-height: 0;
+  transition: visibility 0.35s;
+  visibility: hidden;
+}
+
+.x-layout--is-scrolling-up {
+  .x-layout__sub-header {
+    grid-template-rows: 1fr;
+  }
+}
+.x-layout--is-scrolling-up {
+  .x-layout__sub-header .x-layout__sub-header-content {
+    visibility: visible;
+  }
+}
\ No newline at end of file
diff --git a/src/components/desktop/desktop-sub-header.vue b/src/components/desktop/desktop-sub-header.vue
index ec1698b2..036ebb1b 100644
--- a/src/components/desktop/desktop-sub-header.vue
+++ b/src/components/desktop/desktop-sub-header.vue
@@ -44,26 +44,5 @@
 </script>
 
 <style lang="scss">
-  .x-layout__sub-header {
-    display: grid;
-    grid-template-rows: 0fr;
-    overflow: hidden;
-    transition: grid-template-rows 0.35s;
-  }
-  .x-layout__sub-header-content {
-    min-height: 0;
-    transition: visibility 0.35s;
-    visibility: hidden;
-  }
-
-  .x-layout--is-scrolling-up {
-    .x-layout__sub-header {
-      grid-template-rows: 1fr;
-    }
-  }
-  .x-layout--is-scrolling-up {
-    .x-layout__sub-header .x-layout__sub-header-content {
-      visibility: visible;
-    }
-  }
+  @import '../collapse-heigth-animation.scss';
 </style>
diff --git a/src/components/desktop/desktop.vue b/src/components/desktop/desktop.vue
index d7f3c09c..1646abab 100644
--- a/src/components/desktop/desktop.vue
+++ b/src/components/desktop/desktop.vue
@@ -62,13 +62,7 @@
 </template>
 
 <script lang="ts">
-  import {
-    animateTranslate,
-    BaseIdModal,
-    LocationProvider,
-    ScrollDirection,
-    XOn
-  } from '@empathyco/x-components';
+  import { animateTranslate, BaseIdModal, LocationProvider } from '@empathyco/x-components';
   import { Component } from 'vue-property-decorator';
   import { MainScroll, Scroll } from '@empathyco/x-components/scroll';
   import Main from '../main.vue';
@@ -79,6 +73,7 @@
   import MyHistoryAside from '../my-history/my-history-aside.vue';
   import MyHistoryConfirmDisableModal from '../my-history/my-history-confirm-disable-modal.vue';
   import MaxDesktopWidthItem from '../max-desktop-width-item.vue';
+  import IsScrollingUp from '../is-scrolling-up.mixin';
   import DesktopToolbar from './desktop-toolbar.vue';
   import DesktopHeaderFullPredictive from './desktop-header-full-predictive.vue';
   import DesktopSubHeader from './desktop-sub-header.vue';
@@ -105,28 +100,12 @@
       NoResultsMessage: () => import('../search').then(m => m.NoResultsMessage),
       SelectedFilters: () => import('../search').then(m => m.SelectedFilters),
       SpellcheckMessage: () => import('../search').then(m => m.SpellcheckMessage)
-    }
+    },
+
+    mixins: [IsScrollingUp]
   })
   export default class Desktop extends HasSearchedMixin {
     protected rightAsideAnimation = animateTranslate('right');
-
-    protected stopScrollDown = true;
-    protected hasScrolled = true;
-    protected scrollOffset = 200;
-
-    @XOn('UserChangedScrollDirection')
-    scrollDirectionChanged(direction: ScrollDirection): void {
-      this.stopScrollDown = direction === 'UP';
-    }
-
-    @XOn(['UserScrolled'])
-    scrollLength(position: number): void {
-      if (this.stopScrollDown || position < this.scrollOffset) {
-        this.hasScrolled = true;
-      } else if (!this.stopScrollDown && position > this.scrollOffset) {
-        this.hasScrolled = false;
-      }
-    }
   }
 </script>
 
diff --git a/src/components/is-scrolling-up.mixin.ts b/src/components/is-scrolling-up.mixin.ts
new file mode 100644
index 00000000..a3fbb823
--- /dev/null
+++ b/src/components/is-scrolling-up.mixin.ts
@@ -0,0 +1,33 @@
+import { ScrollDirection, XOn } from '@empathyco/x-components';
+import Vue from 'vue';
+import Component from 'vue-class-component';
+@Component
+export default class IsScrollingUp extends Vue {
+  protected stopScrollDown = true;
+  protected scroll = true;
+  protected scrollOffset = 200;
+
+  @XOn('UserChangedScrollDirection')
+  scrollDirectionChanged(direction: ScrollDirection): void {
+    this.stopScrollDown = direction === 'UP';
+  }
+
+  @XOn(['UserScrolled'])
+  scrollLength(position: number): void {
+    if (this.stopScrollDown || position < this.scrollOffset) {
+      this.scroll = true;
+    } else if (!this.stopScrollDown && position > this.scrollOffset) {
+      this.scroll = false;
+    }
+  }
+
+  /**
+   * Checks the direction and the position of the scroll.
+   *
+   * @returns True if the user is scrolling up and has scrolled more than
+   * the defined scrollOffset.
+   */
+  protected get hasScrolled(): boolean {
+    return this.scroll;
+  }
+}

From 75d3c55fbcfd9912bd40e3bf476f00a685c4ca54 Mon Sep 17 00:00:00 2001
From: Laura Martinez Garcia <lauram@empathy.co>
Date: Wed, 7 Jun 2023 13:15:07 +0200
Subject: [PATCH 04/15] fix related tags import

---
 src/components/desktop/related-tags-full-predictive.vue | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/desktop/related-tags-full-predictive.vue b/src/components/desktop/related-tags-full-predictive.vue
index 0fb7689f..c57976fd 100644
--- a/src/components/desktop/related-tags-full-predictive.vue
+++ b/src/components/desktop/related-tags-full-predictive.vue
@@ -9,8 +9,7 @@
 <script>
   import { LocationProvider } from '@empathyco/x-components';
   import { defineComponent } from 'vue';
-  import { RelatedTags } from '../search';
-
+  import RelatedTags from '../search/related-tags.vue';
   export default defineComponent({
     components: {
       LocationProvider,

From 9b8272fa640a22788d101d3021fe79862c92fa7a Mon Sep 17 00:00:00 2001
From: Laura Martinez Garcia <lauram@empathy.co>
Date: Thu, 8 Jun 2023 12:18:11 +0200
Subject: [PATCH 05/15] fix PR comments

---
 src/components/collapse-heigth-animation.scss | 22 ----------
 src/components/collapse-heigth-animation.vue  | 44 +++++++++++++++++++
 src/components/desktop/desktop-sub-header.vue | 25 ++++++-----
 .../desktop/desktop-top-section.vue           | 32 ++++++++++++++
 src/components/desktop/desktop.vue            | 22 +++-------
 5 files changed, 96 insertions(+), 49 deletions(-)
 delete mode 100644 src/components/collapse-heigth-animation.scss
 create mode 100644 src/components/collapse-heigth-animation.vue
 create mode 100644 src/components/desktop/desktop-top-section.vue

diff --git a/src/components/collapse-heigth-animation.scss b/src/components/collapse-heigth-animation.scss
deleted file mode 100644
index 2f097195..00000000
--- a/src/components/collapse-heigth-animation.scss
+++ /dev/null
@@ -1,22 +0,0 @@
-.x-layout__sub-header {
-  display: grid;
-  grid-template-rows: 0fr;
-  overflow: hidden;
-  transition: grid-template-rows 0.35s;
-}
-.x-layout__sub-header-content {
-  min-height: 0;
-  transition: visibility 0.35s;
-  visibility: hidden;
-}
-
-.x-layout--is-scrolling-up {
-  .x-layout__sub-header {
-    grid-template-rows: 1fr;
-  }
-}
-.x-layout--is-scrolling-up {
-  .x-layout__sub-header .x-layout__sub-header-content {
-    visibility: visible;
-  }
-}
\ No newline at end of file
diff --git a/src/components/collapse-heigth-animation.vue b/src/components/collapse-heigth-animation.vue
new file mode 100644
index 00000000..c3a50c0d
--- /dev/null
+++ b/src/components/collapse-heigth-animation.vue
@@ -0,0 +1,44 @@
+<template>
+  <div
+    class="x-collapse"
+    :class="{
+      'x-collapse--is-extended': isExtended
+    }"
+  >
+    <slot />
+  </div>
+</template>
+
+<script>
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    props: {
+      isExtended: {
+        type: Boolean
+      }
+    }
+  });
+</script>
+
+<style lang="scss" scoped>
+  .x-collapse {
+    display: grid;
+    grid-template-rows: 0fr;
+    overflow: hidden;
+    transition: grid-template-rows 0.35s;
+
+    & > * {
+      min-height: 0;
+      transition: visibility 0.35s;
+      visibility: hidden;
+    }
+
+    &--is-extended {
+      grid-template-rows: 1fr;
+      & > * {
+        visibility: visible;
+      }
+    }
+  }
+</style>
diff --git a/src/components/desktop/desktop-sub-header.vue b/src/components/desktop/desktop-sub-header.vue
index 036ebb1b..58be3f30 100644
--- a/src/components/desktop/desktop-sub-header.vue
+++ b/src/components/desktop/desktop-sub-header.vue
@@ -1,10 +1,12 @@
 <template>
-  <div
-    class="x-layout__sub-header x-layout-max-width-md desktop:x-layout-min-margin-32 large:x-layout-max-width-lg large:x-layout-min-margin-48"
+  <CollapseHeigthAnimation
+    class="x-layout-max-width-md desktop:x-layout-min-margin-32 large:x-layout-max-width-lg large:x-layout-min-margin-48"
+    :isExtended="hasScrolled"
   >
     <div class="x-layout__sub-header-content">
       <DesktopSearchboxAlign class="x-layout-container">
-        <RelatedTagsFullPredictive />
+        <RelatedTagsFullPredictive v-if="fullPredictive" />
+        <RelatedTagsFloatedPredictive v-else />
       </DesktopSearchboxAlign>
 
       <div v-if="!$x.redirections.length && hasSearched">
@@ -14,35 +16,38 @@
         <SelectedFilters class="x-py-16" />
       </div>
     </div>
-  </div>
+  </CollapseHeigthAnimation>
 </template>
 
 <script lang="ts">
   import { defineComponent } from 'vue';
-  //import RelatedTagsFloatedPredictive from './related-tags-floated-predictive.vue';
+  import CollapseHeigthAnimation from '../collapse-heigth-animation.vue';
+  import IsScrollingUp from '../is-scrolling-up.mixin';
   import RelatedTagsFullPredictive from './related-tags-full-predictive.vue';
   import DesktopSearchboxAlign from './desktop-searchbox-align.vue';
   import DesktopToolbar from './desktop-toolbar.vue';
+  import RelatedTagsFloatedPredictive from './related-tags-floated-predictive.vue';
 
   export default defineComponent({
     components: {
+      CollapseHeigthAnimation,
+      RelatedTagsFloatedPredictive,
       DesktopToolbar,
-      //RelatedTagsFloatedPredictive,
       RelatedTagsFullPredictive,
       DesktopSearchboxAlign,
       SelectedFilters: () => import('../search').then(m => m.SelectedFilters)
     },
+    mixins: [IsScrollingUp],
     props: {
       hasScrolled: {
         type: Boolean
       },
       hasSearched: {
         type: Boolean
+      },
+      fullPredictive: {
+        type: Boolean
       }
     }
   });
 </script>
-
-<style lang="scss">
-  @import '../collapse-heigth-animation.scss';
-</style>
diff --git a/src/components/desktop/desktop-top-section.vue b/src/components/desktop/desktop-top-section.vue
new file mode 100644
index 00000000..8d578a21
--- /dev/null
+++ b/src/components/desktop/desktop-top-section.vue
@@ -0,0 +1,32 @@
+<template>
+  <div>
+    <div>
+      <DesktopHeaderFullPredictive v-if="fullPredictive" />
+      <DesktopHeaderFloatingPredictive v-else />
+    </div>
+
+    <DesktopSubHeader
+      :has-searched="hasSearched"
+      :full-predictive="fullPredictive"
+      class="x-layout-item"
+    />
+  </div>
+</template>
+
+<script>
+  import { defineComponent } from 'vue';
+  import HasSearchedMixin from '../has-searched.mixin';
+  import DesktopHeaderFullPredictive from './desktop-header-full-predictive.vue';
+  import DesktopSubHeader from './desktop-sub-header.vue';
+  import DesktopHeaderFloatingPredictive from './desktop-header-floating-predictive.vue';
+
+  export default defineComponent({
+    components: { DesktopHeaderFloatingPredictive, DesktopSubHeader, DesktopHeaderFullPredictive },
+    mixins: [HasSearchedMixin],
+    setup() {
+      const fullPredictive = true;
+
+      return { fullPredictive };
+    }
+  });
+</script>
diff --git a/src/components/desktop/desktop.vue b/src/components/desktop/desktop.vue
index 1646abab..b76484e7 100644
--- a/src/components/desktop/desktop.vue
+++ b/src/components/desktop/desktop.vue
@@ -1,17 +1,6 @@
 <template>
-  <div
-    class="x-layout-container"
-    :class="{
-      'x-layout--is-scrolling-up': hasScrolled
-    }"
-  >
-    <DesktopHeaderFullPredictive />
-
-    <DesktopSubHeader
-      :has-scrolled="hasScrolled"
-      :has-searched="hasSearched"
-      class="x-layout-item"
-    />
+  <div class="x-layout-container">
+    <DesktopTopSection />
 
     <MainScroll class="x-flex x-flex-col">
       <Scroll id="main-scroll">
@@ -73,16 +62,17 @@
   import MyHistoryAside from '../my-history/my-history-aside.vue';
   import MyHistoryConfirmDisableModal from '../my-history/my-history-confirm-disable-modal.vue';
   import MaxDesktopWidthItem from '../max-desktop-width-item.vue';
-  import IsScrollingUp from '../is-scrolling-up.mixin';
   import DesktopToolbar from './desktop-toolbar.vue';
   import DesktopHeaderFullPredictive from './desktop-header-full-predictive.vue';
   import DesktopSubHeader from './desktop-sub-header.vue';
+  import DesktopTopSection from './desktop-top-section.vue';
   import DesktopHeaderFloatingPredictive from './desktop-header-floating-predictive.vue';
 
   @Component({
     components: {
       DesktopHeaderFloatingPredictive,
       DesktopSubHeader,
+      DesktopTopSection,
       MaxDesktopWidthItem,
       DesktopHeaderFullPredictive,
       CustomQueryPreview,
@@ -100,9 +90,7 @@
       NoResultsMessage: () => import('../search').then(m => m.NoResultsMessage),
       SelectedFilters: () => import('../search').then(m => m.SelectedFilters),
       SpellcheckMessage: () => import('../search').then(m => m.SpellcheckMessage)
-    },
-
-    mixins: [IsScrollingUp]
+    }
   })
   export default class Desktop extends HasSearchedMixin {
     protected rightAsideAnimation = animateTranslate('right');

From 5e7ef7b96362a35b75bbc28aaf6a1bb605c943fa Mon Sep 17 00:00:00 2001
From: Laura Martinez Garcia <lauram@empathy.co>
Date: Thu, 8 Jun 2023 12:31:50 +0200
Subject: [PATCH 06/15] fix imports

---
 src/components/desktop/desktop-top-section.vue             | 2 +-
 src/components/desktop/related-tags-floated-predictive.vue | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/desktop/desktop-top-section.vue b/src/components/desktop/desktop-top-section.vue
index 8d578a21..f4c8a151 100644
--- a/src/components/desktop/desktop-top-section.vue
+++ b/src/components/desktop/desktop-top-section.vue
@@ -15,7 +15,7 @@
 
 <script>
   import { defineComponent } from 'vue';
-  import HasSearchedMixin from '../has-searched.mixin';
+  import HasSearchedMixin from '../has-searched.mixin.ts';
   import DesktopHeaderFullPredictive from './desktop-header-full-predictive.vue';
   import DesktopSubHeader from './desktop-sub-header.vue';
   import DesktopHeaderFloatingPredictive from './desktop-header-floating-predictive.vue';
diff --git a/src/components/desktop/related-tags-floated-predictive.vue b/src/components/desktop/related-tags-floated-predictive.vue
index dbb03133..764609a1 100644
--- a/src/components/desktop/related-tags-floated-predictive.vue
+++ b/src/components/desktop/related-tags-floated-predictive.vue
@@ -9,7 +9,7 @@
 <script>
   import { LocationProvider } from '@empathyco/x-components';
   import { defineComponent } from 'vue';
-  import { RelatedTags } from '../search';
+  import RelatedTags from '../search/related-tags.vue';
 
   export default defineComponent({
     components: {

From 23d9f5fdd381ac9eea995d7ce2270b0b46b4441e Mon Sep 17 00:00:00 2001
From: Laura Martinez Garcia <lauram@empathy.co>
Date: Thu, 8 Jun 2023 14:51:17 +0200
Subject: [PATCH 07/15] change props names

---
 src/components/desktop/desktop-top-section.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/desktop/desktop-top-section.vue b/src/components/desktop/desktop-top-section.vue
index f4c8a151..47e79fad 100644
--- a/src/components/desktop/desktop-top-section.vue
+++ b/src/components/desktop/desktop-top-section.vue
@@ -6,8 +6,8 @@
     </div>
 
     <DesktopSubHeader
-      :has-searched="hasSearched"
-      :full-predictive="fullPredictive"
+      :hasSearched="hasSearched"
+      :fullPredictive="fullPredictive"
       class="x-layout-item"
     />
   </div>

From 7204240f1f0120fea02b4df3f52e76a97a6d773d Mon Sep 17 00:00:00 2001
From: Laura Martinez Garcia <lauram@empathy.co>
Date: Fri, 9 Jun 2023 09:26:38 +0200
Subject: [PATCH 08/15] remove related tags components

---
 .../desktop/desktop-searchbox-align.vue       |  4 +++-
 src/components/desktop/desktop-sub-header.vue | 19 +++++++++++--------
 .../desktop/desktop-top-section.vue           | 19 ++++---------------
 3 files changed, 18 insertions(+), 24 deletions(-)

diff --git a/src/components/desktop/desktop-searchbox-align.vue b/src/components/desktop/desktop-searchbox-align.vue
index 475ccecd..0323cc5a 100644
--- a/src/components/desktop/desktop-searchbox-align.vue
+++ b/src/components/desktop/desktop-searchbox-align.vue
@@ -1,5 +1,7 @@
 <template>
-  <div class="x-layout-container-ml-[calc(142px+48px)] x-layout-container-mr-[calc(40px+48px)]">
+  <div
+    class="x-layout-container x-layout-container-ml-[calc(142px+48px)] x-layout-container-mr-[calc(40px+48px)]"
+  >
     <slot />
   </div>
 </template>
diff --git a/src/components/desktop/desktop-sub-header.vue b/src/components/desktop/desktop-sub-header.vue
index 58be3f30..93b2b5d7 100644
--- a/src/components/desktop/desktop-sub-header.vue
+++ b/src/components/desktop/desktop-sub-header.vue
@@ -4,9 +4,12 @@
     :isExtended="hasScrolled"
   >
     <div class="x-layout__sub-header-content">
-      <DesktopSearchboxAlign class="x-layout-container">
-        <RelatedTagsFullPredictive v-if="fullPredictive" />
-        <RelatedTagsFloatedPredictive v-else />
+      <DesktopSearchboxAlign>
+        <div class="x-layout-item" :class="{ 'x-grid x-grid-cols-6': !isFullPredictive }">
+          <LocationProvider location="predictive_layer">
+            <RelatedTags v-if="$x.relatedTags.length > 0" class="x-pb-24" />
+          </LocationProvider>
+        </div>
       </DesktopSearchboxAlign>
 
       <div v-if="!$x.redirections.length && hasSearched">
@@ -21,19 +24,19 @@
 
 <script lang="ts">
   import { defineComponent } from 'vue';
+  import { LocationProvider } from '@empathyco/x-components';
+  import RelatedTags from '../search/related-tags.vue';
   import CollapseHeigthAnimation from '../collapse-heigth-animation.vue';
   import IsScrollingUp from '../is-scrolling-up.mixin';
-  import RelatedTagsFullPredictive from './related-tags-full-predictive.vue';
   import DesktopSearchboxAlign from './desktop-searchbox-align.vue';
   import DesktopToolbar from './desktop-toolbar.vue';
-  import RelatedTagsFloatedPredictive from './related-tags-floated-predictive.vue';
 
   export default defineComponent({
     components: {
+      LocationProvider,
+      RelatedTags,
       CollapseHeigthAnimation,
-      RelatedTagsFloatedPredictive,
       DesktopToolbar,
-      RelatedTagsFullPredictive,
       DesktopSearchboxAlign,
       SelectedFilters: () => import('../search').then(m => m.SelectedFilters)
     },
@@ -45,7 +48,7 @@
       hasSearched: {
         type: Boolean
       },
-      fullPredictive: {
+      isFullPredictive: {
         type: Boolean
       }
     }
diff --git a/src/components/desktop/desktop-top-section.vue b/src/components/desktop/desktop-top-section.vue
index 47e79fad..720478b0 100644
--- a/src/components/desktop/desktop-top-section.vue
+++ b/src/components/desktop/desktop-top-section.vue
@@ -1,15 +1,10 @@
 <template>
   <div>
     <div>
-      <DesktopHeaderFullPredictive v-if="fullPredictive" />
-      <DesktopHeaderFloatingPredictive v-else />
+      <DesktopHeaderFullPredictive />
     </div>
 
-    <DesktopSubHeader
-      :hasSearched="hasSearched"
-      :fullPredictive="fullPredictive"
-      class="x-layout-item"
-    />
+    <DesktopSubHeader :hasSearched="hasSearched" :isFullPredictive="true" class="x-layout-item" />
   </div>
 </template>
 
@@ -18,15 +13,9 @@
   import HasSearchedMixin from '../has-searched.mixin.ts';
   import DesktopHeaderFullPredictive from './desktop-header-full-predictive.vue';
   import DesktopSubHeader from './desktop-sub-header.vue';
-  import DesktopHeaderFloatingPredictive from './desktop-header-floating-predictive.vue';
 
   export default defineComponent({
-    components: { DesktopHeaderFloatingPredictive, DesktopSubHeader, DesktopHeaderFullPredictive },
-    mixins: [HasSearchedMixin],
-    setup() {
-      const fullPredictive = true;
-
-      return { fullPredictive };
-    }
+    components: { DesktopSubHeader, DesktopHeaderFullPredictive },
+    mixins: [HasSearchedMixin]
   });
 </script>

From 906a385ae73f47a37d0bd5aee7276cd0949ca1f3 Mon Sep 17 00:00:00 2001
From: Laura Martinez Garcia <lauram@empathy.co>
Date: Fri, 9 Jun 2023 09:43:19 +0200
Subject: [PATCH 09/15] remove related tags components

---
 .../related-tags-floated-predictive.vue       | 20 -------------------
 .../desktop/related-tags-full-predictive.vue  | 19 ------------------
 2 files changed, 39 deletions(-)
 delete mode 100644 src/components/desktop/related-tags-floated-predictive.vue
 delete mode 100644 src/components/desktop/related-tags-full-predictive.vue

diff --git a/src/components/desktop/related-tags-floated-predictive.vue b/src/components/desktop/related-tags-floated-predictive.vue
deleted file mode 100644
index 764609a1..00000000
--- a/src/components/desktop/related-tags-floated-predictive.vue
+++ /dev/null
@@ -1,20 +0,0 @@
-<template>
-  <div class="x-grid x-grid-cols-6">
-    <LocationProvider location="predictive_layer" class="x-col-span-4 x-col-start-2">
-      <RelatedTags v-if="$x.relatedTags.length > 0" class="x-pb-24" />
-    </LocationProvider>
-  </div>
-</template>
-
-<script>
-  import { LocationProvider } from '@empathyco/x-components';
-  import { defineComponent } from 'vue';
-  import RelatedTags from '../search/related-tags.vue';
-
-  export default defineComponent({
-    components: {
-      LocationProvider,
-      RelatedTags
-    }
-  });
-</script>
diff --git a/src/components/desktop/related-tags-full-predictive.vue b/src/components/desktop/related-tags-full-predictive.vue
deleted file mode 100644
index c57976fd..00000000
--- a/src/components/desktop/related-tags-full-predictive.vue
+++ /dev/null
@@ -1,19 +0,0 @@
-<template>
-  <div class="x-layout-item">
-    <LocationProvider location="predictive_layer">
-      <RelatedTags v-if="$x.relatedTags.length > 0" class="x-pb-24" />
-    </LocationProvider>
-  </div>
-</template>
-
-<script>
-  import { LocationProvider } from '@empathyco/x-components';
-  import { defineComponent } from 'vue';
-  import RelatedTags from '../search/related-tags.vue';
-  export default defineComponent({
-    components: {
-      LocationProvider,
-      RelatedTags
-    }
-  });
-</script>

From 49aceb73ed16b51bca57736758e5cbe6c95ac6eb Mon Sep 17 00:00:00 2001
From: Laura Martinez Garcia <lauram@empathy.co>
Date: Mon, 12 Jun 2023 16:10:31 +0200
Subject: [PATCH 10/15] bugfix end scroll

---
 src/components/is-scrolling-up.mixin.ts | 21 +++++++++++++--------
 1 file changed, 13 insertions(+), 8 deletions(-)

diff --git a/src/components/is-scrolling-up.mixin.ts b/src/components/is-scrolling-up.mixin.ts
index a3fbb823..4600eceb 100644
--- a/src/components/is-scrolling-up.mixin.ts
+++ b/src/components/is-scrolling-up.mixin.ts
@@ -3,21 +3,26 @@ import Vue from 'vue';
 import Component from 'vue-class-component';
 @Component
 export default class IsScrollingUp extends Vue {
-  protected stopScrollDown = true;
-  protected scroll = true;
+  protected stopsScrollDown = true;
+  protected isScrollingUp = true;
   protected scrollOffset = 200;
 
   @XOn('UserChangedScrollDirection')
   scrollDirectionChanged(direction: ScrollDirection): void {
-    this.stopScrollDown = direction === 'UP';
+    this.stopsScrollDown = direction === 'UP';
   }
 
   @XOn(['UserScrolled'])
   scrollLength(position: number): void {
-    if (this.stopScrollDown || position < this.scrollOffset) {
-      this.scroll = true;
-    } else if (!this.stopScrollDown && position > this.scrollOffset) {
-      this.scroll = false;
+    // TODO change this implementation when the scroll module is fixed
+    if (this.$x.scroll['main-scroll']?.hasAlmostReachedEnd) {
+      this.isScrollingUp = false;
+      return;
+    }
+    if (this.stopsScrollDown || position < this.scrollOffset) {
+      this.isScrollingUp = true;
+    } else if (!this.stopsScrollDown && position > this.scrollOffset) {
+      this.isScrollingUp = false;
     }
   }
 
@@ -28,6 +33,6 @@ export default class IsScrollingUp extends Vue {
    * the defined scrollOffset.
    */
   protected get hasScrolled(): boolean {
-    return this.scroll;
+    return this.isScrollingUp;
   }
 }

From 4c015904265cde76a58bf3cc260d736944f0b405 Mon Sep 17 00:00:00 2001
From: Laura Martinez Garcia <lauram@empathy.co>
Date: Tue, 13 Jun 2023 12:07:10 +0200
Subject: [PATCH 11/15] fix PR comments

---
 ...tion.vue => collapse-height-animation.vue} |  6 +--
 src/components/desktop/desktop-sub-header.vue | 15 +++----
 .../desktop/desktop-top-section.vue           |  4 +-
 src/components/desktop/desktop.vue            | 11 -----
 .../has-scroll-past-threshold.mixin.ts        | 43 +++++++++++++++++++
 src/components/is-scrolling-up.mixin.ts       | 38 ----------------
 6 files changed, 54 insertions(+), 63 deletions(-)
 rename src/components/{collapse-heigth-animation.vue => collapse-height-animation.vue} (85%)
 create mode 100644 src/components/has-scroll-past-threshold.mixin.ts
 delete mode 100644 src/components/is-scrolling-up.mixin.ts

diff --git a/src/components/collapse-heigth-animation.vue b/src/components/collapse-height-animation.vue
similarity index 85%
rename from src/components/collapse-heigth-animation.vue
rename to src/components/collapse-height-animation.vue
index c3a50c0d..9fbd7ecc 100644
--- a/src/components/collapse-heigth-animation.vue
+++ b/src/components/collapse-height-animation.vue
@@ -1,8 +1,8 @@
 <template>
   <div
-    class="x-collapse"
+    class="x-collapse-height"
     :class="{
-      'x-collapse--is-extended': isExtended
+      'x-collapse-height--is-extended': isExtended
     }"
   >
     <slot />
@@ -22,7 +22,7 @@
 </script>
 
 <style lang="scss" scoped>
-  .x-collapse {
+  .x-collapse-height {
     display: grid;
     grid-template-rows: 0fr;
     overflow: hidden;
diff --git a/src/components/desktop/desktop-sub-header.vue b/src/components/desktop/desktop-sub-header.vue
index 93b2b5d7..e85f8744 100644
--- a/src/components/desktop/desktop-sub-header.vue
+++ b/src/components/desktop/desktop-sub-header.vue
@@ -1,9 +1,6 @@
 <template>
-  <CollapseHeigthAnimation
-    class="x-layout-max-width-md desktop:x-layout-min-margin-32 large:x-layout-max-width-lg large:x-layout-min-margin-48"
-    :isExtended="hasScrolled"
-  >
-    <div class="x-layout__sub-header-content">
+  <CollapseHeigthAnimation :isExtended="hasScrolled">
+    <MaxDesktopWidthItem class="x-layout__sub-header-content">
       <DesktopSearchboxAlign>
         <div class="x-layout-item" :class="{ 'x-grid x-grid-cols-6': !isFullPredictive }">
           <LocationProvider location="predictive_layer">
@@ -18,7 +15,7 @@
       <div v-if="$x.totalResults > 0 && hasSearched && $x.selectedFilters.length">
         <SelectedFilters class="x-py-16" />
       </div>
-    </div>
+    </MaxDesktopWidthItem>
   </CollapseHeigthAnimation>
 </template>
 
@@ -26,13 +23,15 @@
   import { defineComponent } from 'vue';
   import { LocationProvider } from '@empathyco/x-components';
   import RelatedTags from '../search/related-tags.vue';
-  import CollapseHeigthAnimation from '../collapse-heigth-animation.vue';
-  import IsScrollingUp from '../is-scrolling-up.mixin';
+  import CollapseHeigthAnimation from '../collapse-height-animation.vue';
+  import IsScrollingUp from '../has-scroll-past-threshold.mixin';
+  import MaxDesktopWidthItem from '../max-desktop-width-item.vue';
   import DesktopSearchboxAlign from './desktop-searchbox-align.vue';
   import DesktopToolbar from './desktop-toolbar.vue';
 
   export default defineComponent({
     components: {
+      MaxDesktopWidthItem,
       LocationProvider,
       RelatedTags,
       CollapseHeigthAnimation,
diff --git a/src/components/desktop/desktop-top-section.vue b/src/components/desktop/desktop-top-section.vue
index 720478b0..f9f35e2c 100644
--- a/src/components/desktop/desktop-top-section.vue
+++ b/src/components/desktop/desktop-top-section.vue
@@ -1,8 +1,6 @@
 <template>
   <div>
-    <div>
-      <DesktopHeaderFullPredictive />
-    </div>
+    <DesktopHeaderFullPredictive />
 
     <DesktopSubHeader :hasSearched="hasSearched" :isFullPredictive="true" class="x-layout-item" />
   </div>
diff --git a/src/components/desktop/desktop.vue b/src/components/desktop/desktop.vue
index b76484e7..50981b6b 100644
--- a/src/components/desktop/desktop.vue
+++ b/src/components/desktop/desktop.vue
@@ -56,39 +56,28 @@
   import { MainScroll, Scroll } from '@empathyco/x-components/scroll';
   import Main from '../main.vue';
   import CustomQueryPreview from '../pre-search/custom-query-preview.vue';
-  import PredictiveLayer from '../predictive-layer/predictive-layer.vue';
   import ScrollToTop from '../scroll-to-top.vue';
   import HasSearchedMixin from '../has-searched.mixin';
   import MyHistoryAside from '../my-history/my-history-aside.vue';
   import MyHistoryConfirmDisableModal from '../my-history/my-history-confirm-disable-modal.vue';
   import MaxDesktopWidthItem from '../max-desktop-width-item.vue';
-  import DesktopToolbar from './desktop-toolbar.vue';
-  import DesktopHeaderFullPredictive from './desktop-header-full-predictive.vue';
-  import DesktopSubHeader from './desktop-sub-header.vue';
   import DesktopTopSection from './desktop-top-section.vue';
-  import DesktopHeaderFloatingPredictive from './desktop-header-floating-predictive.vue';
 
   @Component({
     components: {
-      DesktopHeaderFloatingPredictive,
-      DesktopSubHeader,
       DesktopTopSection,
       MaxDesktopWidthItem,
-      DesktopHeaderFullPredictive,
       CustomQueryPreview,
       BaseIdModal,
       MyHistoryAside,
-      DesktopToolbar,
       LocationProvider,
       Main,
       MainScroll,
       MyHistoryConfirmDisableModal,
-      PredictiveLayer,
       Scroll,
       ScrollToTop,
       DesktopAside: () => import('../search').then(m => m.DesktopAside),
       NoResultsMessage: () => import('../search').then(m => m.NoResultsMessage),
-      SelectedFilters: () => import('../search').then(m => m.SelectedFilters),
       SpellcheckMessage: () => import('../search').then(m => m.SpellcheckMessage)
     }
   })
diff --git a/src/components/has-scroll-past-threshold.mixin.ts b/src/components/has-scroll-past-threshold.mixin.ts
new file mode 100644
index 00000000..ec515e67
--- /dev/null
+++ b/src/components/has-scroll-past-threshold.mixin.ts
@@ -0,0 +1,43 @@
+import { State } from '@empathyco/x-components';
+import Vue from 'vue';
+import Component from 'vue-class-component';
+import { Dictionary } from '@empathyco/x-utils';
+import { ScrollComponentState } from '@empathyco/x-components/scroll';
+import { Watch } from 'vue-property-decorator';
+@Component
+export default class IsScrollingUp extends Vue {
+  protected stopsScrollDown = true;
+  protected hasScrolledPastThreshold = true;
+  protected scrollOffset = 200;
+
+  @State('scroll', 'data')
+  public scrollPositionsMap!: Dictionary<ScrollComponentState>;
+  protected get mainScrollPosition(): number {
+    return this.scrollPositionsMap['main-scroll']?.position;
+  }
+
+  @Watch('mainScrollPosition', { deep: true })
+  updateHasScrolledPastThreshold(): void {
+    // TODO change this implementation when the scroll module is fixed. Task EMP-1049
+    if (this.$x.scroll['main-scroll']?.hasAlmostReachedEnd) {
+      this.hasScrolledPastThreshold = false;
+      return;
+    }
+    const isScrollingUp = this.scrollPositionsMap['main-scroll']?.direction === 'UP';
+    if (isScrollingUp || this.mainScrollPosition < this.scrollOffset) {
+      this.hasScrolledPastThreshold = true;
+    } else if (!isScrollingUp && this.mainScrollPosition > this.scrollOffset) {
+      this.hasScrolledPastThreshold = false;
+    }
+  }
+
+  /**
+   * Checks the direction and the position of the scroll.
+   *
+   * @returns True if the user is scrolling up and has scrolled more than
+   * the defined scrollOffset.
+   */
+  protected get hasScrolled(): boolean {
+    return this.hasScrolledPastThreshold;
+  }
+}
diff --git a/src/components/is-scrolling-up.mixin.ts b/src/components/is-scrolling-up.mixin.ts
deleted file mode 100644
index 4600eceb..00000000
--- a/src/components/is-scrolling-up.mixin.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-import { ScrollDirection, XOn } from '@empathyco/x-components';
-import Vue from 'vue';
-import Component from 'vue-class-component';
-@Component
-export default class IsScrollingUp extends Vue {
-  protected stopsScrollDown = true;
-  protected isScrollingUp = true;
-  protected scrollOffset = 200;
-
-  @XOn('UserChangedScrollDirection')
-  scrollDirectionChanged(direction: ScrollDirection): void {
-    this.stopsScrollDown = direction === 'UP';
-  }
-
-  @XOn(['UserScrolled'])
-  scrollLength(position: number): void {
-    // TODO change this implementation when the scroll module is fixed
-    if (this.$x.scroll['main-scroll']?.hasAlmostReachedEnd) {
-      this.isScrollingUp = false;
-      return;
-    }
-    if (this.stopsScrollDown || position < this.scrollOffset) {
-      this.isScrollingUp = true;
-    } else if (!this.stopsScrollDown && position > this.scrollOffset) {
-      this.isScrollingUp = false;
-    }
-  }
-
-  /**
-   * Checks the direction and the position of the scroll.
-   *
-   * @returns True if the user is scrolling up and has scrolled more than
-   * the defined scrollOffset.
-   */
-  protected get hasScrolled(): boolean {
-    return this.isScrollingUp;
-  }
-}

From e339b580e4b3852c3365ddf9d769728fd95e2f69 Mon Sep 17 00:00:00 2001
From: Laura Martinez Garcia <lauram@empathy.co>
Date: Tue, 13 Jun 2023 12:10:36 +0200
Subject: [PATCH 12/15] fix PR comments

---
 src/components/has-scroll-past-threshold.mixin.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/has-scroll-past-threshold.mixin.ts b/src/components/has-scroll-past-threshold.mixin.ts
index ec515e67..06228862 100644
--- a/src/components/has-scroll-past-threshold.mixin.ts
+++ b/src/components/has-scroll-past-threshold.mixin.ts
@@ -6,7 +6,6 @@ import { ScrollComponentState } from '@empathyco/x-components/scroll';
 import { Watch } from 'vue-property-decorator';
 @Component
 export default class IsScrollingUp extends Vue {
-  protected stopsScrollDown = true;
   protected hasScrolledPastThreshold = true;
   protected scrollOffset = 200;
 

From 1362b8f6a6fa9843fcaa3cce9b2574b617b52a7e Mon Sep 17 00:00:00 2001
From: Guillermo Cacheda <cachedacodes@gmail.com>
Date: Tue, 13 Jun 2023 13:54:54 +0200
Subject: [PATCH 13/15] Remove x-layout__sub-header-content class

---
 src/components/desktop/desktop-sub-header.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/desktop/desktop-sub-header.vue b/src/components/desktop/desktop-sub-header.vue
index e85f8744..9540b058 100644
--- a/src/components/desktop/desktop-sub-header.vue
+++ b/src/components/desktop/desktop-sub-header.vue
@@ -1,6 +1,6 @@
 <template>
   <CollapseHeigthAnimation :isExtended="hasScrolled">
-    <MaxDesktopWidthItem class="x-layout__sub-header-content">
+    <MaxDesktopWidthItem>
       <DesktopSearchboxAlign>
         <div class="x-layout-item" :class="{ 'x-grid x-grid-cols-6': !isFullPredictive }">
           <LocationProvider location="predictive_layer">

From a592e810abca2225a0c61e6768ca8910b81b247d Mon Sep 17 00:00:00 2001
From: Guillermo Cacheda <cachedacodes@gmail.com>
Date: Tue, 13 Jun 2023 13:55:28 +0200
Subject: [PATCH 14/15] Remove unused prop

---
 src/components/desktop/desktop-sub-header.vue | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/src/components/desktop/desktop-sub-header.vue b/src/components/desktop/desktop-sub-header.vue
index 9540b058..f2c8de18 100644
--- a/src/components/desktop/desktop-sub-header.vue
+++ b/src/components/desktop/desktop-sub-header.vue
@@ -41,9 +41,6 @@
     },
     mixins: [IsScrollingUp],
     props: {
-      hasScrolled: {
-        type: Boolean
-      },
       hasSearched: {
         type: Boolean
       },

From 2a568b2264fcaf613209f945e0e05f8952d52177 Mon Sep 17 00:00:00 2001
From: Guillermo <cachedacodes@gmail.com>
Date: Tue, 13 Jun 2023 15:00:29 +0200
Subject: [PATCH 15/15] chore: refactor hasScrolledPastThreshold mixin

---
 src/components/collapse-height-animation.vue  | 14 +++++------
 src/components/desktop/desktop-sub-header.vue |  8 +++----
 .../has-scroll-past-threshold.mixin.ts        | 24 ++++++++++++-------
 3 files changed, 27 insertions(+), 19 deletions(-)

diff --git a/src/components/collapse-height-animation.vue b/src/components/collapse-height-animation.vue
index 9fbd7ecc..20984fcb 100644
--- a/src/components/collapse-height-animation.vue
+++ b/src/components/collapse-height-animation.vue
@@ -2,7 +2,7 @@
   <div
     class="x-collapse-height"
     :class="{
-      'x-collapse-height--is-extended': isExtended
+      'x-collapse-height--is-collapsed': isCollapsed
     }"
   >
     <slot />
@@ -14,7 +14,7 @@
 
   export default defineComponent({
     props: {
-      isExtended: {
+      isCollapsed: {
         type: Boolean
       }
     }
@@ -24,20 +24,20 @@
 <style lang="scss" scoped>
   .x-collapse-height {
     display: grid;
-    grid-template-rows: 0fr;
+    grid-template-rows: 1fr;
     overflow: hidden;
     transition: grid-template-rows 0.35s;
 
     & > * {
       min-height: 0;
       transition: visibility 0.35s;
-      visibility: hidden;
+      visibility: visible;
     }
 
-    &--is-extended {
-      grid-template-rows: 1fr;
+    &--is-collapsed {
+      grid-template-rows: 0fr;
       & > * {
-        visibility: visible;
+        visibility: hidden;
       }
     }
   }
diff --git a/src/components/desktop/desktop-sub-header.vue b/src/components/desktop/desktop-sub-header.vue
index f2c8de18..4038a4a4 100644
--- a/src/components/desktop/desktop-sub-header.vue
+++ b/src/components/desktop/desktop-sub-header.vue
@@ -1,5 +1,5 @@
 <template>
-  <CollapseHeigthAnimation :isExtended="hasScrolled">
+  <CollapseHeightAnimation :isCollapsed="hasScrolledPastThreshold">
     <MaxDesktopWidthItem>
       <DesktopSearchboxAlign>
         <div class="x-layout-item" :class="{ 'x-grid x-grid-cols-6': !isFullPredictive }">
@@ -16,14 +16,14 @@
         <SelectedFilters class="x-py-16" />
       </div>
     </MaxDesktopWidthItem>
-  </CollapseHeigthAnimation>
+  </CollapseHeightAnimation>
 </template>
 
 <script lang="ts">
   import { defineComponent } from 'vue';
   import { LocationProvider } from '@empathyco/x-components';
   import RelatedTags from '../search/related-tags.vue';
-  import CollapseHeigthAnimation from '../collapse-height-animation.vue';
+  import CollapseHeightAnimation from '../collapse-height-animation.vue';
   import IsScrollingUp from '../has-scroll-past-threshold.mixin';
   import MaxDesktopWidthItem from '../max-desktop-width-item.vue';
   import DesktopSearchboxAlign from './desktop-searchbox-align.vue';
@@ -34,7 +34,7 @@
       MaxDesktopWidthItem,
       LocationProvider,
       RelatedTags,
-      CollapseHeigthAnimation,
+      CollapseHeightAnimation,
       DesktopToolbar,
       DesktopSearchboxAlign,
       SelectedFilters: () => import('../search').then(m => m.SelectedFilters)
diff --git a/src/components/has-scroll-past-threshold.mixin.ts b/src/components/has-scroll-past-threshold.mixin.ts
index 06228862..c05e7c5d 100644
--- a/src/components/has-scroll-past-threshold.mixin.ts
+++ b/src/components/has-scroll-past-threshold.mixin.ts
@@ -6,7 +6,7 @@ import { ScrollComponentState } from '@empathyco/x-components/scroll';
 import { Watch } from 'vue-property-decorator';
 @Component
 export default class IsScrollingUp extends Vue {
-  protected hasScrolledPastThreshold = true;
+  protected hasScrolledPastThresholdFlag = false;
   protected scrollOffset = 200;
 
   @State('scroll', 'data')
@@ -18,15 +18,23 @@ export default class IsScrollingUp extends Vue {
   @Watch('mainScrollPosition', { deep: true })
   updateHasScrolledPastThreshold(): void {
     // TODO change this implementation when the scroll module is fixed. Task EMP-1049
-    if (this.$x.scroll['main-scroll']?.hasAlmostReachedEnd) {
-      this.hasScrolledPastThreshold = false;
+    const mainScrollData = this.scrollPositionsMap['main-scroll'];
+
+    if (mainScrollData?.hasReachedStart) {
+      this.hasScrolledPastThresholdFlag = false;
       return;
     }
-    const isScrollingUp = this.scrollPositionsMap['main-scroll']?.direction === 'UP';
+
+    if (mainScrollData?.hasAlmostReachedEnd) {
+      this.hasScrolledPastThresholdFlag = true;
+      return;
+    }
+
+    const isScrollingUp = mainScrollData?.direction === 'UP';
     if (isScrollingUp || this.mainScrollPosition < this.scrollOffset) {
-      this.hasScrolledPastThreshold = true;
+      this.hasScrolledPastThresholdFlag = false;
     } else if (!isScrollingUp && this.mainScrollPosition > this.scrollOffset) {
-      this.hasScrolledPastThreshold = false;
+      this.hasScrolledPastThresholdFlag = true;
     }
   }
 
@@ -36,7 +44,7 @@ export default class IsScrollingUp extends Vue {
    * @returns True if the user is scrolling up and has scrolled more than
    * the defined scrollOffset.
    */
-  protected get hasScrolled(): boolean {
-    return this.hasScrolledPastThreshold;
+  protected get hasScrolledPastThreshold(): boolean {
+    return this.hasScrolledPastThresholdFlag;
   }
 }