fix: merge browselayout in serachpage

Author: JulienDroulez

src/components/project/ProjectListSearch.vue

@@ -124,23 +124,13 @@ export default {
         },
     },
 
-    // inject: {
-    //     browseLayoutUpdateProjectQuantity: {
-    //         from: 'browseLayoutUpdateProjectQuantity',
-    //         default: () => {},
-    //     },
-    // },
-
     methods: {
         onClickPagination(requestedPage) {
             this.loadProjects(requestedPage)
             this.$el.scrollIntoView({ behavior: 'smooth' })
         },
 
         initProjectLoading() {
-            // this.projects = []
-            // this.groups = []
-            // this.peoples = []
             this.items = []
             this.isLoading = true
             this.$emit('loading', true)

src/components/search/BrowseLayout/BrowseLayout.vue

@@ -1,16 +1,81 @@
 <template>
-    <BrowseLayout :key="$route.name"></BrowseLayout>
+    <div class="page-section-extra-wide browse-layout" :key="$route.name">
+        <div class="browse-header">
+            <SearchOptions :limit="30" show-section-filter />
+        </div>
+
+        <GlobalSearchTab :search="searchFromQuery" />
+    </div>
 </template>
 
 <script>
-import BrowseLayout from '@/components/search/BrowseLayout/BrowseLayout.vue'
-/**
- * WARNING: do not remove ":key="$route.name"" on line 2
- * or it will break BrowseLayout initialization
- * since the component is reused on many routes
- */
+import SearchOptions from '@/components/search/SearchOptions/SearchOptions.vue'
+import onboardingStatusMixin from '@/mixins/onboardingStatusMixin.ts'
+import GlobalSearchTab from '@/pages/SearchPage/Tabs/GlobalSearchTab.vue'
+import useSearch from '@/composables/useSearch.js'
+
 export default {
     name: 'SearchPage',
-    components: { BrowseLayout },
+
+    mixins: [onboardingStatusMixin],
+
+    components: {
+        SearchOptions,
+        GlobalSearchTab,
+    },
+
+    setup() {
+        const { searchFromQuery } = useSearch(null)
+        return { searchFromQuery }
+    },
+
+    async mounted() {
+        this.onboardingTrap('explore_projects', false)
+    },
 }
 </script>
+
+<style lang="scss" scoped>
+.browse-layout {
+    padding-top: pxToRem(74px);
+
+    .tab {
+        margin-top: $space-l;
+    }
+}
+
+.browse-header {
+    display: block;
+    background-color: $primary-lighter;
+    padding: $space-xl 0;
+    padding: 1rem;
+}
+
+.project-list__header {
+    display: flex;
+    flex-direction: column;
+    margin-bottom: $space-l;
+
+    .header__title {
+        grid-column: 2 / 3;
+        place-self: center center;
+        font-size: $font-size-3xl;
+        font-weight: 700;
+        margin: $space-m 0 $space-m 0;
+        text-transform: uppercase;
+        color: $almost-black;
+    }
+}
+
+@media only screen and (width >= 1000px) {
+    .project-list__header {
+        display: grid;
+        grid-template-columns: 1fr 1fr 1fr;
+        margin-bottom: 0;
+    }
+
+    .header__title {
+        margin: 0;
+    }
+}
+</style>

src/pages/SearchPage/SearchPage.vue

@@ -1,4 +1,4 @@
-import BrowseLayout from '@/components/search/BrowseLayout/BrowseLayout.vue'
+import SearchPage from '@/pages/SearchPage/SearchPage.vue'
 import { lpiShallowMount } from '@/../tests/helpers/LpiMount'
 import english from '@/locales/en.json'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
@@ -44,7 +44,7 @@ describe('BrowseLayout', () => {
     })
 
     it('should render BrowseLayout component', () => {
-        wrapper = lpiShallowMount(BrowseLayout, defaultParams)
+        wrapper = lpiShallowMount(SearchPage, defaultParams)
 
         expect(wrapper.exists()).toBeTruthy()
     })