Merge pull request kodadot#5546 from leo-anderson-x/5359

feat: float filter button on mobile collection activity page

components/collection/activity/FilterFloatButton.vue

@@ -0,0 +1,42 @@
+<template>
+  <div class="fixed-bottom-middle has-min-width">
+    <NeoButton expanded @click.native="openMobileFilters">
+      {{ $t('general.filters')
+      }}<span v-if="numOfActiveFilters">: {{ numOfActiveFilters }}</span>
+    </NeoButton>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { NeoButton } from '@kodadot1/brick'
+import { usePreferencesStore } from '@/stores/preferences'
+import useActiveRouterFilters from '@/composables/useActiveRouterFilters'
+
+const preferencesStore = usePreferencesStore()
+const activeFilters = useActiveRouterFilters()
+
+const numOfActiveFilters = computed(
+  () => Object.keys(activeFilters.value).length
+)
+const openMobileFilters = () => preferencesStore.setMobileFilterCollapse(true)
+</script>
+
+<style lang="scss" scoped>
+a.disabled {
+  opacity: 0.3;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.fixed-bottom-middle {
+  position: fixed;
+  bottom: 24px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 1;
+}
+
+.has-min-width {
+  min-width: 134px;
+}
+</style>

components/explore/ExploreTabs.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="field has-addons is-flex is-align-items-center" data-cy="tabs">
+  <div class="has-addons is-flex is-align-items-center" data-cy="tabs">
     <TabOnCollection v-if="route.name?.includes('prefix-collection-id')" />
     <TabOnExplore v-else />
   </div>

components/explore/FilterMenuButton.vue

@@ -24,9 +24,11 @@
 import { NeoButton } from '@kodadot1/brick'
 import ActiveCount from './ActiveCount.vue'
 import { usePreferencesStore } from '@/stores/preferences'
+import useActiveRouterFilters from '@/composables/useActiveRouterFilters'
 
 const route = useRoute()
 const preferencesStore = usePreferencesStore()
+const activeFilters = useActiveRouterFilters()
 
 const disabled = computed(() => {
   const allowedList = [
@@ -42,14 +44,9 @@ const isSidebarFiltersOpen = computed(
   () => preferencesStore.getsidebarFilterCollapse
 )
 
-const numOfActiveFilters = computed(() => {
-  const query = { ...route.query, redesign: undefined }
-  const activeFilters = Object.entries(query).filter(
-    ([key, value]) => (key === 'search' && Boolean(value)) || value === 'true'
-  )
-
-  return activeFilters.length
-})
+const numOfActiveFilters = computed(
+  () => Object.keys(activeFilters.value).length
+)
 
 const toggleSidebarFilters = () =>
   preferencesStore.setSidebarFilterCollapse(!isSidebarFiltersOpen.value)

components/explore/MobileControls.vue

@@ -1,8 +1,11 @@
 <template>
-  <div class="explore is-flex is-flex-wrap-wrap">
+  <div
+    class="explore is-flex is-flex-wrap-wrap"
+    :class="{ 'has-gap': !isActivityTab }">
     <ExploreTabs />
     <div class="explore-menu is-flex">
-      <FilterMenuButton />
+      <FilterFloatButton v-if="isActivityTab" />
+      <FilterMenuButton v-else />
       <ExploreOffer v-if="!isActivityTab" class="is-flex-grow-1" />
       <ExploreChain
         v-if="!route.name?.includes('prefix-collection-id')"
@@ -18,6 +21,7 @@ import ExploreSort from './ExploreSort.vue'
 import ExploreChain from './ExploreChain.vue'
 import ExploreOffer from './ExploreOffer.vue'
 import FilterMenuButton from './FilterMenuButton.vue'
+import FilterFloatButton from '@/components/collection/activity/FilterFloatButton.vue'
 
 const route = useRoute()
 
@@ -30,16 +34,21 @@ const isActivityTab = computed(() =>
 @import '@/styles/abstracts/variables';
 
 .explore {
-  gap: 1.5rem;
+  &.has-gap {
+    gap: 1.5rem;
+  }
 
   &-menu {
     gap: 1.5rem;
   }
 
   @include mobile {
-    gap: 1rem;
     flex-direction: column;
 
+    &.has-gap {
+      gap: 1rem;
+    }
+
     &-menu {
       gap: 1rem;
     }

components/shared/BreadcrumbsFilter.vue

@@ -44,6 +44,7 @@
 <script lang="ts" setup>
 import NeoTag from '@/components/shared/gallery/NeoTag.vue'
 import CommonTokenMoney from '@/components/shared/CommonTokenMoney.vue'
+import useActiveRouterFilters from '@/composables/useActiveRouterFilters'
 
 const route = useRoute()
 const isCollectionActivityTab = computed(
@@ -55,18 +56,7 @@ const { replaceUrl } = useReplaceUrl({
 const { $i18n } = useNuxtApp()
 const isItemsExplore = computed(() => route.path.includes('/explore/items'))
 
-const breads = computed(() => {
-  const query = { ...route.query, redesign: undefined }
-
-  const activeFilters = Object.entries(query).filter(
-    ([key, value]) =>
-      (key === 'search' && Boolean(value)) ||
-      (key === 'min' && value) ||
-      (key === 'max' && value) ||
-      value === 'true'
-  )
-  return Object.fromEntries(activeFilters)
-})
+const breads = useActiveRouterFilters()
 
 const isAnyFilterActive = computed(() =>
   Boolean(Object.keys(breads.value).length)

composables/useActiveRouterFilters.ts

@@ -0,0 +1,17 @@
+export default function useActiveRouterFilters() {
+  const route = useRoute()
+  const activeFilters = computed(() => {
+    const query = { ...route.query, redesign: undefined }
+    type QueryValue = string | undefined
+    const entries = Object.entries<QueryValue>(query).filter(
+      ([key, value]) =>
+        (key === 'search' && Boolean(value)) ||
+        (key === 'min' && value) ||
+        (key === 'max' && value) ||
+        value === 'true'
+    )
+    return Object.fromEntries(entries)
+  })
+
+  return activeFilters
+}