feat: add 6 new bottom nav buttons (#3011)

components/nav/NavBottom.vue

@@ -2,7 +2,21 @@
 import type { Component } from 'vue'
 import type { NavButtonName } from '../../composables/settings'
 
-import { NavButtonExplore, NavButtonFederated, NavButtonHome, NavButtonLocal, NavButtonMention, NavButtonMoreMenu, NavButtonNotification, NavButtonSearch } from '#components'
+import {
+  NavButtonBookmark,
+  NavButtonCompose,
+  NavButtonExplore,
+  NavButtonFavorite,
+  NavButtonFederated,
+  NavButtonHashtag,
+  NavButtonHome,
+  NavButtonList,
+  NavButtonLocal,
+  NavButtonMention,
+  NavButtonMoreMenu,
+  NavButtonNotification,
+  NavButtonSearch,
+} from '#components'
 
 import { STORAGE_KEY_BOTTOM_NAV_BUTTONS } from '~/constants'
 
@@ -16,9 +30,14 @@ const navButtons: NavButton[] = [
   { name: 'search', component: NavButtonSearch },
   { name: 'notification', component: NavButtonNotification },
   { name: 'mention', component: NavButtonMention },
+  { name: 'favorite', component: NavButtonFavorite },
+  { name: 'bookmark', component: NavButtonBookmark },
+  { name: 'compose', component: NavButtonCompose },
   { name: 'explore', component: NavButtonExplore },
   { name: 'local', component: NavButtonLocal },
   { name: 'federated', component: NavButtonFederated },
+  { name: 'list', component: NavButtonList },
+  { name: 'hashtag', component: NavButtonHashtag },
   { name: 'moreMenu', component: NavButtonMoreMenu },
 ]
 

components/nav/button/Bookmark.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+defineProps<{
+  activeClass: string
+}>()
+</script>
+
+<template>
+  <NuxtLink to="/bookmarks" :aria-label="$t('nav.bookmarks')" :active-class="activeClass" flex flex-row items-center place-content-center h-full flex-1 class="coarse-pointer:select-none" @click="$scrollToTop">
+    <div i-ri:bookmark-line />
+  </NuxtLink>
+</template>

components/nav/button/Compose.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+defineProps<{
+  activeClass: string
+}>()
+</script>
+
+<template>
+  <NuxtLink to="/compose" :aria-label="$t('nav.favourites')" :active-class="activeClass" flex flex-row items-center place-content-center h-full flex-1 class="coarse-pointer:select-none" @click="$scrollToTop">
+    <div i-ri:quill-pen-line />
+  </NuxtLink>
+</template>

components/nav/button/Favorite.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+defineProps<{
+  activeClass: string
+}>()
+</script>
+
+<template>
+  <NuxtLink to="/favourites" :aria-label="$t('nav.favourites')" :active-class="activeClass" flex flex-row items-center place-content-center h-full flex-1 class="coarse-pointer:select-none" @click="$scrollToTop">
+    <div i-ri:heart-line />
+  </NuxtLink>
+</template>

components/nav/button/Hashtag.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+defineProps<{
+  activeClass: string
+}>()
+</script>
+
+<template>
+  <NuxtLink to="/hashtags" :aria-label="$t('nav.hashtags')" :active-class="activeClass" flex flex-row items-center place-content-center h-full flex-1 class="coarse-pointer:select-none" @click="$scrollToTop">
+    <div i-ri:hashtag />
+  </NuxtLink>
+</template>

components/nav/button/List.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+defineProps<{
+  activeClass: string
+}>()
+</script>
+
+<template>
+  <NuxtLink
+    to="/lists"
+    :aria-label="$t('nav.lists')"
+    :active-class="activeClass"
+    flex flex-row items-center place-content-center h-full flex-1
+    class="coarse-pointer:select-none" @click="$scrollToTop"
+  >
+    <div i-ri:list-check />
+  </NuxtLink>
+</template>

components/settings/SettingsBottomNav.vue

@@ -13,9 +13,14 @@ const availableNavButtons: NavButton[] = [
   { name: 'search', label: 'nav.search', icon: 'i-ri:search-line' },
   { name: 'notification', label: 'nav.notifications', icon: 'i-ri:notification-4-line' },
   { name: 'mention', label: 'nav.conversations', icon: 'i-ri:at-line' },
+  { name: 'favorite', label: 'nav.favourites', icon: 'i-ri:heart-line' },
+  { name: 'bookmark', label: 'nav.bookmarks', icon: 'i-ri:bookmark-line' },
+  { name: 'compose', label: 'nav.compose', icon: 'i-ri:quill-pen-line' },
   { name: 'explore', label: 'nav.explore', icon: 'i-ri:compass-3-line' },
   { name: 'local', label: 'nav.local', icon: 'i-ri:group-2-line' },
   { name: 'federated', label: 'nav.federated', icon: 'i-ri:earth-line' },
+  { name: 'list', label: 'nav.lists', icon: 'i-ri:list-check' },
+  { name: 'hashtag', label: 'nav.hashtags', icon: 'i-ri:hashtag' },
   { name: 'moreMenu', label: 'nav.more_menu', icon: 'i-ri:more-fill' },
 ] as const
 

composables/settings/definition.ts

@@ -7,7 +7,7 @@ export type OldFontSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'
 
 export type ColorMode = 'light' | 'dark' | 'system'
 
-export type NavButtonName = 'home' | 'search' | 'notification' | 'mention' | 'explore' | 'local' | 'federated' | 'moreMenu'
+export type NavButtonName = 'home' | 'search' | 'notification' | 'mention' | 'favorite' | 'bookmark' | 'compose' | 'explore' | 'local' | 'federated' | 'list' | 'hashtag' | 'setting' | 'moreMenu'
 
 export interface PreferencesSettings {
   hideAltIndicatorOnPosts: boolean