From baaf271eebf1d60de89fa06167239a4e3347e5f7 Mon Sep 17 00:00:00 2001
From: userquin <userquin@gmail.com>
Date: Wed, 1 Jan 2025 19:28:07 +0100
Subject: [PATCH] chore: add some vertical gap

---
 components/nav/button/Bookmark.vue     | 12 ++++++++++--
 components/nav/button/Compose.vue      | 12 ++++++++++--
 components/nav/button/Explore.vue      |  3 ++-
 components/nav/button/Favorite.vue     | 12 ++++++++++--
 components/nav/button/Federated.vue    | 12 ++++++++++--
 components/nav/button/Hashtag.vue      | 12 ++++++++++--
 components/nav/button/Home.vue         | 12 ++++++++++--
 components/nav/button/List.vue         |  6 ++++--
 components/nav/button/Local.vue        |  6 ++++--
 components/nav/button/Mention.vue      |  7 +++++--
 components/nav/button/MoreMenu.vue     |  5 +++--
 components/nav/button/Notification.vue | 12 ++++++++++--
 components/nav/button/Search.vue       | 12 ++++++++++--
 13 files changed, 98 insertions(+), 25 deletions(-)

diff --git a/components/nav/button/Bookmark.vue b/components/nav/button/Bookmark.vue
index f6f8a037..6fed8bc4 100644
--- a/components/nav/button/Bookmark.vue
+++ b/components/nav/button/Bookmark.vue
@@ -9,8 +9,16 @@ const hideLabel = useHideBottomNavigationLabel()
 </script>
 
 <template>
-  <NuxtLink to="/bookmarks" :aria-label="$t('nav.bookmarks')" :active-class="activeClass" flex flex-col items-center place-content-center h-full flex-1 class="coarse-pointer:select-none" @click="$scrollToTop">
-    <div i-ri:bookmark-line />
+  <NuxtLink
+    to="/bookmarks"
+    :aria-label="$t('nav.bookmarks')"
+    :active-class="activeClass"
+    flex flex-col items-center place-content-center h-full flex-1
+    class="coarse-pointer:select-none"
+    :class="hideLabel ? null : 'gap-1'"
+    @click="$scrollToTop"
+  >
+    <div aria-hidden="true" i-ri:bookmark-line />
     <span v-if="!hideLabel" text-xs>{{ $t('nav.bookmarks') }}</span>
   </NuxtLink>
 </template>
diff --git a/components/nav/button/Compose.vue b/components/nav/button/Compose.vue
index e18cec4e..f65990fd 100644
--- a/components/nav/button/Compose.vue
+++ b/components/nav/button/Compose.vue
@@ -7,8 +7,16 @@ const hideLabel = useHideBottomNavigationLabel()
 </script>
 
 <template>
-  <NuxtLink to="/compose" :aria-label="$t('nav.favourites')" :active-class="activeClass" flex flex-col items-center place-content-center h-full flex-1 class="coarse-pointer:select-none" @click="$scrollToTop">
-    <div i-ri:quill-pen-line />
+  <NuxtLink
+    to="/compose"
+    :aria-label="$t('nav.favourites')"
+    :active-class="activeClass"
+    flex flex-col items-center place-content-center h-full flex-1
+    class="coarse-pointer:select-none"
+    :class="hideLabel ? null : 'gap-1'"
+    @click="$scrollToTop"
+  >
+    <div aria-hidden="true" i-ri:quill-pen-line />
     <span v-if="!hideLabel" text-xs>{{ $t('nav.favourites') }}</span>
   </NuxtLink>
 </template>
diff --git a/components/nav/button/Explore.vue b/components/nav/button/Explore.vue
index 53612036..6468a1d8 100644
--- a/components/nav/button/Explore.vue
+++ b/components/nav/button/Explore.vue
@@ -17,9 +17,10 @@ const hideLabel = computed(() => getPreferences(userSettings.value, 'hideBottomN
     :aria-label="$t('nav.explore')"
     :active-class="activeClass"
     flex flex-col items-center place-content-center h-full flex-1 class="coarse-pointer:select-none"
+    :class="hideLabel ? null : 'gap-1'"
     @click="$scrollToTop"
   >
-    <div i-ri:compass-3-line />
+    <div aria-hidden="true" i-ri:compass-3-line />
     <span v-if="!hideLabel" text-xs>{{ $t('nav.explore') }}</span>
   </NuxtLink>
 </template>
diff --git a/components/nav/button/Favorite.vue b/components/nav/button/Favorite.vue
index f61e47ac..8f6eed63 100644
--- a/components/nav/button/Favorite.vue
+++ b/components/nav/button/Favorite.vue
@@ -7,8 +7,16 @@ const hideLabel = useHideBottomNavigationLabel()
 </script>
 
 <template>
-  <NuxtLink to="/favourites" :aria-label="$t('nav.favourites')" :active-class="activeClass" flex flex-col items-center place-content-center h-full flex-1 class="coarse-pointer:select-none" @click="$scrollToTop">
-    <div i-ri:heart-line />
+  <NuxtLink
+    to="/favourites"
+    :aria-label="$t('nav.favourites')"
+    :active-class="activeClass"
+    flex flex-col items-center place-content-center h-full flex-1
+    class="coarse-pointer:select-none"
+    :class="hideLabel ? null : 'gap-1'"
+    @click="$scrollToTop"
+  >
+    <div aria-hidden="true" i-ri:heart-line />
     <span v-if="!hideLabel" text-xs>{{ $t('nav.favourites') }}</span>
   </NuxtLink>
 </template>
diff --git a/components/nav/button/Federated.vue b/components/nav/button/Federated.vue
index 86679edf..192286af 100644
--- a/components/nav/button/Federated.vue
+++ b/components/nav/button/Federated.vue
@@ -9,8 +9,16 @@ const hideLabel = useHideBottomNavigationLabel()
 </script>
 
 <template>
-  <NuxtLink :to="`/${currentServer}/public`" :aria-label="$t('nav.federated')" :active-class="activeClass" flex flex-col items-center place-content-center h-full flex-1 class="coarse-pointer:select-none" @click="$scrollToTop">
-    <div i-ri:earth-line />
+  <NuxtLink
+    :to="`/${currentServer}/public`"
+    :aria-label="$t('nav.federated')"
+    :active-class="activeClass"
+    flex flex-col items-center place-content-center h-full flex-1
+    class="coarse-pointer:select-none"
+    :class="hideLabel ? null : 'gap-1'"
+    @click="$scrollToTop"
+  >
+    <div aria-hidden="true" i-ri:earth-line />
     <span v-if="!hideLabel" text-xs>{{ $t('nav.federated') }}</span>
   </NuxtLink>
 </template>
diff --git a/components/nav/button/Hashtag.vue b/components/nav/button/Hashtag.vue
index e75e7f3e..d2d39f3a 100644
--- a/components/nav/button/Hashtag.vue
+++ b/components/nav/button/Hashtag.vue
@@ -7,8 +7,16 @@ const hideLabel = useHideBottomNavigationLabel()
 </script>
 
 <template>
-  <NuxtLink to="/hashtags" :aria-label="$t('nav.hashtags')" :active-class="activeClass" flex flex-col items-center place-content-center h-full flex-1 class="coarse-pointer:select-none" @click="$scrollToTop">
-    <div i-ri:hashtag />
+  <NuxtLink
+    to="/hashtags"
+    :aria-label="$t('nav.hashtags')"
+    :active-class="activeClass"
+    flex flex-col items-center place-content-center h-full flex-1
+    class="coarse-pointer:select-none"
+    :class="hideLabel ? null : 'gap-1'"
+    @click="$scrollToTop"
+  >
+    <div aria-hidden="true" i-ri:hashtag />
     <span v-if="!hideLabel" text-xs>{{ $t('nav.hashtags') }}</span>
   </NuxtLink>
 </template>
diff --git a/components/nav/button/Home.vue b/components/nav/button/Home.vue
index cf9641e5..6f61f247 100644
--- a/components/nav/button/Home.vue
+++ b/components/nav/button/Home.vue
@@ -7,8 +7,16 @@ const hideLabel = useHideBottomNavigationLabel()
 </script>
 
 <template>
-  <NuxtLink to="/home" :aria-label="$t('nav.home')" :active-class="activeClass" flex flex-col items-center place-content-center h-full flex-1 class="coarse-pointer:select-none" @click="$scrollToTop">
-    <div i-ri:home-5-line />
+  <NuxtLink
+    to="/home"
+    :aria-label="$t('nav.home')"
+    :active-class="activeClass"
+    flex flex-col items-center place-content-center h-full flex-1
+    class="coarse-pointer:select-none"
+    :class="hideLabel ? null : 'gap-1'"
+    @click="$scrollToTop"
+  >
+    <div aria-hidden="true" i-ri:home-5-line />
     <span v-if="!hideLabel" text-xs>{{ $t('nav.home') }}</span>
   </NuxtLink>
 </template>
diff --git a/components/nav/button/List.vue b/components/nav/button/List.vue
index a892f5aa..779c6645 100644
--- a/components/nav/button/List.vue
+++ b/components/nav/button/List.vue
@@ -14,9 +14,11 @@ const hideLabel = useHideBottomNavigationLabel()
     :aria-label="$t('nav.lists')"
     :active-class="activeClass"
     flex flex-col items-center place-content-center h-full flex-1
-    class="coarse-pointer:select-none" @click="$scrollToTop"
+    class="coarse-pointer:select-none"
+    :class="hideLabel ? null : 'gap-1'"
+    @click="$scrollToTop"
   >
-    <div i-ri:list-check />
+    <div aria-hidden="true" i-ri:list-check />
     <span v-if="!hideLabel" text-xs>{{ $t('nav.lists') }}</span>
   </NuxtLink>
 </template>
diff --git a/components/nav/button/Local.vue b/components/nav/button/Local.vue
index 0502c51c..492c6306 100644
--- a/components/nav/button/Local.vue
+++ b/components/nav/button/Local.vue
@@ -11,10 +11,12 @@ const hideLabel = useHideBottomNavigationLabel()
     group
     :to="`/${currentServer}/public/local`"
     :aria-label="$t('nav.local')" :active-class="activeClass"
-    flex flex-col items-center place-content-center h-full flex-1 class="coarse-pointer:select-none"
+    flex flex-col items-center place-content-center h-full flex-1
+    class="coarse-pointer:select-none"
+    :class="hideLabel ? null : 'gap-1'"
     @click="$scrollToTop"
   >
-    <div i-ri:group-2-line />
+    <div aria-hidden="true" i-ri:group-2-line />
     <span v-if="!hideLabel" text-xs>{{ $t('nav.local') }}</span>
   </NuxtLink>
 </template>
diff --git a/components/nav/button/Mention.vue b/components/nav/button/Mention.vue
index 1bc449c1..86fd36f6 100644
--- a/components/nav/button/Mention.vue
+++ b/components/nav/button/Mention.vue
@@ -10,10 +10,13 @@ const hideLabel = useHideBottomNavigationLabel()
   <NuxtLink
     to="/conversations"
     :aria-label="$t('nav.conversations')"
-    :active-class="activeClass" flex flex-col items-center place-content-center h-full flex-1 class="coarse-pointer:select-none"
+    :active-class="activeClass"
+    flex flex-col items-center place-content-center h-full flex-1
+    class="coarse-pointer:select-none"
+    :class="hideLabel ? null : 'gap-1'"
     @click="$scrollToTop"
   >
-    <div i-ri:at-line />
+    <div aria-hidden="true" i-ri:at-line />
     <span v-if="!hideLabel" text-xs>{{ $t('nav.conversations') }}</span>
   </NuxtLink>
 </template>
diff --git a/components/nav/button/MoreMenu.vue b/components/nav/button/MoreMenu.vue
index b544b78c..092f6427 100644
--- a/components/nav/button/MoreMenu.vue
+++ b/components/nav/button/MoreMenu.vue
@@ -10,8 +10,9 @@ const hideLabel = useHideBottomNavigationLabel()
     place-content-center h-full flex-1 cursor-pointer
   >
     <button
-      flex flex-col items-center place-content-center h-full flex-1 class="select-none"
-      :class="show ? '!text-primary' : ''"
+      flex flex-col items-center place-content-center h-full flex-1
+      class="select-none"
+      :class="[show ? '!text-primary' : null, hideLabel ? null : 'gap-1'].filter(Boolean).join(' ')"
       :aria-label="$t('nav.more_menu')"
       @click="toggleVisible"
     >
diff --git a/components/nav/button/Notification.vue b/components/nav/button/Notification.vue
index c6ba0933..d827f7e8 100644
--- a/components/nav/button/Notification.vue
+++ b/components/nav/button/Notification.vue
@@ -12,9 +12,17 @@ const hideLabel = useHideBottomNavigationLabel()
 </script>
 
 <template>
-  <NuxtLink :to="`/notifications/${lastAccessedNotificationRoute}`" :aria-label="$t('nav.notifications')" :active-class="activeClass" flex flex-col items-center place-content-center h-full flex-1 class="coarse-pointer:select-none" @click="$scrollToTop">
+  <NuxtLink
+    :to="`/notifications/${lastAccessedNotificationRoute}`"
+    :aria-label="$t('nav.notifications')"
+    :active-class="activeClass"
+    flex flex-col items-center place-content-center h-full flex-1
+    class="coarse-pointer:select-none"
+    :class="hideLabel ? null : 'gap-1'"
+    @click="$scrollToTop"
+  >
     <div flex relative>
-      <div class="i-ri:notification-4-line" text-xl />
+      <div aria-hidden="true" class="i-ri:notification-4-line" text-xl />
       <div v-if="notifications" class="top-[-0.3rem] right-[-0.3rem]" absolute font-bold rounded-full h-4 w-4 text-xs bg-primary text-inverted flex items-center justify-center>
         {{ notifications < 10 ? notifications : '•' }}
       </div>
diff --git a/components/nav/button/Search.vue b/components/nav/button/Search.vue
index 6a358edd..446d65ee 100644
--- a/components/nav/button/Search.vue
+++ b/components/nav/button/Search.vue
@@ -7,8 +7,16 @@ const hideLabel = useHideBottomNavigationLabel()
 </script>
 
 <template>
-  <NuxtLink to="/search" :aria-label="$t('nav.search')" :active-class="activeClass" flex flex-col items-center place-content-center h-full flex-1 class="coarse-pointer:select-none" @click="$scrollToTop">
-    <div i-ri:search-line />
+  <NuxtLink
+    to="/search"
+    :aria-label="$t('nav.search')"
+    :active-class="activeClass"
+    flex flex-col items-center place-content-center h-full flex-1
+    class="coarse-pointer:select-none"
+    :class="hideLabel ? null : 'gap-1'"
+    @click="$scrollToTop"
+  >
+    <div aria-hidden="true" i-ri:search-line />
     <span v-if="!hideLabel" text-xs>{{ $t('nav.search') }}</span>
   </NuxtLink>
 </template>