From f9f58a8d1eba7d75cd948287256b8e4aed18bf6b Mon Sep 17 00:00:00 2001
From: TAKAHASHI Shuuji <shuuji3@gmail.com>
Date: Thu, 2 Jan 2025 00:26:33 +0900
Subject: [PATCH] fix: make nav button label setting reactive

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

diff --git a/components/nav/button/Bookmark.vue b/components/nav/button/Bookmark.vue
index 1fc08895..80726e42 100644
--- a/components/nav/button/Bookmark.vue
+++ b/components/nav/button/Bookmark.vue
@@ -4,12 +4,11 @@ defineProps<{
 }>()
 
 const userSettings = useUserSettings()
-const hideLabel = getPreferences(userSettings.value, 'hideBottomNavLabel')
 </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 />
-    <span v-if="!hideLabel" text-xs>{{ $t('nav.bookmarks') }}</span>
+    <span v-if="!getPreferences(userSettings, 'hideBottomNavLabel')" text-xs>{{ $t('nav.bookmarks') }}</span>
   </NuxtLink>
 </template>
diff --git a/components/nav/button/Compose.vue b/components/nav/button/Compose.vue
index b4406630..4aa2e727 100644
--- a/components/nav/button/Compose.vue
+++ b/components/nav/button/Compose.vue
@@ -4,12 +4,11 @@ defineProps<{
 }>()
 
 const userSettings = useUserSettings()
-const hideLabel = getPreferences(userSettings.value, 'hideBottomNavLabel')
 </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 />
-    <span v-if="!hideLabel" text-xs>{{ $t('nav.favourites') }}</span>
+    <span v-if="!getPreferences(userSettings, 'hideBottomNavLabel')" text-xs>{{ $t('nav.favourites') }}</span>
   </NuxtLink>
 </template>
diff --git a/components/nav/button/Explore.vue b/components/nav/button/Explore.vue
index e398ee9b..049f068a 100644
--- a/components/nav/button/Explore.vue
+++ b/components/nav/button/Explore.vue
@@ -8,7 +8,6 @@ defineProps<{
 const lastAccessedExploreRoute = useLocalStorage(STORAGE_KEY_LAST_ACCESSED_EXPLORE_ROUTE, '')
 
 const userSettings = useUserSettings()
-const hideLabel = getPreferences(userSettings.value, 'hideBottomNavLabel')
 </script>
 
 <template>
@@ -20,6 +19,6 @@ const hideLabel = getPreferences(userSettings.value, 'hideBottomNavLabel')
     @click="$scrollToTop"
   >
     <div i-ri:compass-3-line />
-    <span v-if="!hideLabel" text-xs>{{ $t('nav.explore') }}</span>
+    <span v-if="!getPreferences(userSettings, 'hideBottomNavLabel')" text-xs>{{ $t('nav.explore') }}</span>
   </NuxtLink>
 </template>
diff --git a/components/nav/button/Favorite.vue b/components/nav/button/Favorite.vue
index aaf6306a..65ae7381 100644
--- a/components/nav/button/Favorite.vue
+++ b/components/nav/button/Favorite.vue
@@ -4,12 +4,11 @@ defineProps<{
 }>()
 
 const userSettings = useUserSettings()
-const hideLabel = getPreferences(userSettings.value, 'hideBottomNavLabel')
 </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 />
-    <span v-if="!hideLabel" text-xs>{{ $t('nav.favourites') }}</span>
+    <span v-if="!getPreferences(userSettings, 'hideBottomNavLabel')" text-xs>{{ $t('nav.favourites') }}</span>
   </NuxtLink>
 </template>
diff --git a/components/nav/button/Federated.vue b/components/nav/button/Federated.vue
index e3833b1d..932a9b68 100644
--- a/components/nav/button/Federated.vue
+++ b/components/nav/button/Federated.vue
@@ -4,12 +4,11 @@ defineProps<{
 }>()
 
 const userSettings = useUserSettings()
-const hideLabel = getPreferences(userSettings.value, 'hideBottomNavLabel')
 </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 />
-    <span v-if="!hideLabel" text-xs>{{ $t('nav.federated') }}</span>
+    <span v-if="!getPreferences(userSettings, 'hideBottomNavLabel')" text-xs>{{ $t('nav.federated') }}</span>
   </NuxtLink>
 </template>
diff --git a/components/nav/button/Hashtag.vue b/components/nav/button/Hashtag.vue
index 222978c3..28a126cd 100644
--- a/components/nav/button/Hashtag.vue
+++ b/components/nav/button/Hashtag.vue
@@ -4,12 +4,11 @@ defineProps<{
 }>()
 
 const userSettings = useUserSettings()
-const hideLabel = getPreferences(userSettings.value, 'hideBottomNavLabel')
 </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 />
-    <span v-if="!hideLabel" text-xs>{{ $t('nav.hashtags') }}</span>
+    <span v-if="!getPreferences(userSettings, 'hideBottomNavLabel')" text-xs>{{ $t('nav.hashtags') }}</span>
   </NuxtLink>
 </template>
diff --git a/components/nav/button/Home.vue b/components/nav/button/Home.vue
index c906fa78..7853e4bb 100644
--- a/components/nav/button/Home.vue
+++ b/components/nav/button/Home.vue
@@ -4,12 +4,11 @@ defineProps<{
 }>()
 
 const userSettings = useUserSettings()
-const hideLabel = getPreferences(userSettings.value, 'hideBottomNavLabel')
 </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 />
-    <span v-if="!hideLabel" text-xs>{{ $t('nav.home') }}</span>
+    <span v-if="!getPreferences(userSettings, 'hideBottomNavLabel')" text-xs>{{ $t('nav.home') }}</span>
   </NuxtLink>
 </template>
diff --git a/components/nav/button/List.vue b/components/nav/button/List.vue
index 4a25def5..72af3955 100644
--- a/components/nav/button/List.vue
+++ b/components/nav/button/List.vue
@@ -4,7 +4,6 @@ defineProps<{
 }>()
 
 const userSettings = useUserSettings()
-const hideLabel = getPreferences(userSettings.value, 'hideBottomNavLabel')
 </script>
 
 <template>
@@ -16,6 +15,6 @@ const hideLabel = getPreferences(userSettings.value, 'hideBottomNavLabel')
     class="coarse-pointer:select-none" @click="$scrollToTop"
   >
     <div i-ri:list-check />
-    <span v-if="!hideLabel" text-xs>{{ $t('nav.lists') }}</span>
+    <span v-if="!getPreferences(userSettings, 'hideBottomNavLabel')" text-xs>{{ $t('nav.lists') }}</span>
   </NuxtLink>
 </template>
diff --git a/components/nav/button/Local.vue b/components/nav/button/Local.vue
index b2970a4f..a27f8413 100644
--- a/components/nav/button/Local.vue
+++ b/components/nav/button/Local.vue
@@ -4,7 +4,6 @@ defineProps<{
 }>()
 
 const userSettings = useUserSettings()
-const hideLabel = getPreferences(userSettings.value, 'hideBottomNavLabel')
 </script>
 
 <template>
@@ -16,6 +15,6 @@ const hideLabel = getPreferences(userSettings.value, 'hideBottomNavLabel')
     @click="$scrollToTop"
   >
     <div i-ri:group-2-line />
-    <span v-if="!hideLabel" text-xs>{{ $t('nav.local') }}</span>
+    <span v-if="!getPreferences(userSettings, 'hideBottomNavLabel')" text-xs>{{ $t('nav.local') }}</span>
   </NuxtLink>
 </template>
diff --git a/components/nav/button/Mention.vue b/components/nav/button/Mention.vue
index 405099eb..82cba17e 100644
--- a/components/nav/button/Mention.vue
+++ b/components/nav/button/Mention.vue
@@ -4,7 +4,6 @@ defineProps<{
 }>()
 
 const userSettings = useUserSettings()
-const hideLabel = getPreferences(userSettings.value, 'hideBottomNavLabel')
 </script>
 
 <template>
@@ -15,6 +14,6 @@ const hideLabel = getPreferences(userSettings.value, 'hideBottomNavLabel')
     @click="$scrollToTop"
   >
     <div i-ri:at-line />
-    <span v-if="!hideLabel" text-xs>{{ $t('nav.conversations') }}</span>
+    <span v-if="!getPreferences(userSettings, 'hideBottomNavLabel')" text-xs>{{ $t('nav.conversations') }}</span>
   </NuxtLink>
 </template>
diff --git a/components/nav/button/MoreMenu.vue b/components/nav/button/MoreMenu.vue
index 4a815e01..3eba0df5 100644
--- a/components/nav/button/MoreMenu.vue
+++ b/components/nav/button/MoreMenu.vue
@@ -2,7 +2,6 @@
 const model = defineModel<boolean>()
 
 const userSettings = useUserSettings()
-const hideLabel = getPreferences(userSettings.value, 'hideBottomNavLabel')
 </script>
 
 <template>
@@ -17,7 +16,7 @@ const hideLabel = getPreferences(userSettings.value, 'hideBottomNavLabel')
       @click="toggleVisible"
     >
       <span :class="show ? 'i-ri:close-fill' : 'i-ri:more-fill'" />
-      <span v-if="!hideLabel" text-xs>{{ $t('nav.more_menu') }}</span>
+      <span v-if="!getPreferences(userSettings, 'hideBottomNavLabel')" text-xs>{{ $t('nav.more_menu') }}</span>
     </button>
   </NavBottomMoreMenu>
 </template>
diff --git a/components/nav/button/Notification.vue b/components/nav/button/Notification.vue
index a5a8a01e..a5206d65 100644
--- a/components/nav/button/Notification.vue
+++ b/components/nav/button/Notification.vue
@@ -8,7 +8,6 @@ const { notifications } = useNotifications()
 const lastAccessedNotificationRoute = useLocalStorage(STORAGE_KEY_LAST_ACCESSED_NOTIFICATION_ROUTE, '')
 
 const userSettings = useUserSettings()
-const hideLabel = getPreferences(userSettings.value, 'hideBottomNavLabel')
 </script>
 
 <template>
@@ -19,6 +18,6 @@ const hideLabel = getPreferences(userSettings.value, 'hideBottomNavLabel')
         {{ notifications < 10 ? notifications : '•' }}
       </div>
     </div>
-    <span v-if="!hideLabel" text-xs>{{ $t('nav.notifications') }}</span>
+    <span v-if="!getPreferences(userSettings, 'hideBottomNavLabel')" text-xs>{{ $t('nav.notifications') }}</span>
   </NuxtLink>
 </template>
diff --git a/components/nav/button/Search.vue b/components/nav/button/Search.vue
index d05abb88..353fddb0 100644
--- a/components/nav/button/Search.vue
+++ b/components/nav/button/Search.vue
@@ -4,12 +4,11 @@ defineProps<{
 }>()
 
 const userSettings = useUserSettings()
-const hideLabel = getPreferences(userSettings.value, 'hideBottomNavLabel')
 </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 />
-    <span v-if="!hideLabel" text-xs>{{ $t('nav.search') }}</span>
+    <span v-if="!getPreferences(userSettings, 'hideBottomNavLabel')" text-xs>{{ $t('nav.search') }}</span>
   </NuxtLink>
 </template>