feat: filter notifications by type (#2371)

Co-authored-by: Xabi <xabi.rn@gmail.com>
Co-authored-by: userquin <userquin@gmail.com>

components/common/CommonRouteTabs.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import type { RouteLocationRaw } from 'vue-router'
 
+const { t } = useI18n()
+
 export interface CommonRouteTabOption {
   to: RouteLocationRaw
   display: string
@@ -8,9 +10,17 @@ export interface CommonRouteTabOption {
   name?: string
   icon?: string
   hide?: boolean
+  match?: boolean
 }
-const { options, command, replace, preventScrollTop = false } = $defineProps<{
+export interface CommonRouteTabMoreOption {
   options: CommonRouteTabOption[]
+  icon?: string
+  tooltip?: string
+  match?: boolean
+}
+const { options, command, replace, preventScrollTop = false, moreOptions } = $defineProps<{
+  options: CommonRouteTabOption[]
+  moreOptions?: CommonRouteTabMoreOption
   command?: boolean
   replace?: boolean
   preventScrollTop?: boolean
@@ -21,7 +31,6 @@ const router = useRouter()
 useCommands(() => command
   ? options.map(tab => ({
     scope: 'Tabs',
-
     name: tab.display,
     icon: tab.icon ?? 'i-ri:file-list-2-line',
     onActivate: () => router.replace(tab.to),
@@ -51,5 +60,43 @@ useCommands(() => command
         <span ws-nowrap mxa sm:px2 sm:py3 py2 text-center text-secondary-light op50>{{ option.display }}</span>
       </div>
     </template>
+    <template v-if="moreOptions?.options?.length">
+      <CommonDropdown placement="bottom" flex cursor-pointer mx-1.25rem>
+        <CommonTooltip placement="top" :content="moreOptions.tooltip || t('action.more')">
+          <button
+            cursor-pointer
+            flex
+            gap-1
+            w-12
+            rounded
+            hover:bg-active
+            btn-action-icon
+            op75
+            px4
+            group
+            :aria-label="t('action.more')"
+            :class="moreOptions.match ? 'text-primary' : 'text-secondary'"
+          >
+            <span v-if="moreOptions.icon" :class="moreOptions.icon" text-sm me--1 block />
+            <span i-ri:arrow-down-s-line text-sm me--1 block />
+          </button>
+        </CommonTooltip>
+        <template #popper>
+          <NuxtLink
+            v-for="(option, index) in moreOptions.options.filter(item => !item.hide)"
+            :key="option?.name || index"
+            :to="option.to"
+          >
+            <CommonDropdownItem>
+              <span flex="~ row" gap-x-4 items-center :class="option.match ? 'text-primary' : ''">
+                <span v-if="option.icon" :class="[option.icon, option.match ? 'text-primary' : 'text.secondary']" text-md me--1 block />
+                <span v-else block>&#160;</span>
+                <span>{{ option.display }}</span>
+              </span>
+            </CommonDropdownItem>
+          </NuxtLink>
+        </template>
+      </commondropdown>
+    </template>
   </div>
 </template>