update

src/pages/main/TasksPage.vue

@@ -2,60 +2,16 @@
   <div class="q-pa-none flex column col-grow no-scroll">
     <pn-scroll-list>
       <template #card-body-header>
-        
-        <div class="flex row q-mb-xs q-mt-md q-mx-sm justify-between">
-          <q-btn
-            icon="mdi-calendar-month-outline"
-            flat dense round
-            class="q-mr-sm"
-            size="lg"
-            :color="showCalendar ? 'primary' : 'grey'"
-            @click="showCalendar = !showCalendar"
-            >
-            <div>
-              <q-badge
-                color="red"
-                rounded
-                floating
-                transparent
-                style="position: relative; top: -16px; margin-left: -12px"
-                :style="{ opacity: datesRange ? 0.8 : 0 }" 
-              />
-            </div>
-          </q-btn>
-          <q-input
-            v-model="search"
-            clearable
-            clear-icon="close"
-            :placeholder="$t('tasks__search')"
-            dense
-            class="col-grow"
-            >
-            <template #prepend>
-              <q-icon name="mdi-magnify" />
-            </template>
-          </q-input>
-
-          <q-btn
-            @click="showFiltersDialog = true"
-            icon="mdi-filter-outline"
-            dense round flat
-            size="lg"
-            :color="showFiltersDialog ? 'primary' : 'grey'"
-            class="q-mr-xs"
-            >
-            <div>
-              <q-badge
-                color="red"
-                rounded
-                floating
-                transparent
-                style="position: relative; top: -16px; margin-left: -12px"
-                :style="{ opacity: !checkFiltersSelect ? 0.8 : 0 }" 
-              />
-            </div>
-          </q-btn>
-        </div>
+        <pn-action-bar
+          v-model="search"
+          placeholder="tasks__search"
+          :calendar-active="showCalendar"
+          :filter-active="showFiltersDialog"
+          :calendar-badge="!!datesRange"
+          :filter-badge="!checkFiltersSelect"
+          @toggle-calendar="showCalendar = !showCalendar"
+          @open-filters="showFiltersDialog = true"
+        />
         <q-slide-transition>
           <div v-show="showCalendar">
             <q-date
@@ -236,6 +192,7 @@
   import taskItem from 'components/taskItem.vue'
   import type { Task } from 'types/Task'
   import { date } from 'quasar'
+  import pnActionBar from 'components/pnActionBar.vue'
 
   const search = ref('')
   const showCalendar = ref<boolean>(false)