From 50b43e0e9e4558ee382927fc4e6dcd2a46690fa5 Mon Sep 17 00:00:00 2001
From: TAKAHASHI Shuuji <shuuji3@gmail.com>
Date: Thu, 2 Jan 2025 01:27:05 +0900
Subject: [PATCH] refactor: fix reactivity and make it composable

---
 components/nav/button/Bookmark.vue     | 6 ++++--
 components/nav/button/Compose.vue      | 4 ++--
 components/nav/button/Explore.vue      | 3 ++-
 components/nav/button/Favorite.vue     | 4 ++--
 components/nav/button/Federated.vue    | 6 ++++--
 components/nav/button/Hashtag.vue      | 4 ++--
 components/nav/button/Home.vue         | 4 ++--
 components/nav/button/List.vue         | 6 ++++--
 components/nav/button/Local.vue        | 4 ++--
 components/nav/button/Mention.vue      | 4 ++--
 components/nav/button/MoreMenu.vue     | 4 ++--
 components/nav/button/Notification.vue | 5 +++--
 components/nav/button/Search.vue       | 4 ++--
 composables/settings/storage.ts        | 5 +++++
 14 files changed, 38 insertions(+), 25 deletions(-)

diff --git a/components/nav/button/Bookmark.vue b/components/nav/button/Bookmark.vue
index 80726e42..f6f8a037 100644
--- a/components/nav/button/Bookmark.vue
+++ b/components/nav/button/Bookmark.vue
@@ -1,14 +1,16 @@
 <script setup lang="ts">
+import { useHideBottomNavigationLabel } from '~/composables/settings'
+
 defineProps<{
   activeClass: string
 }>()
 
-const userSettings = useUserSettings()
+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 />
-    <span v-if="!getPreferences(userSettings, 'hideBottomNavLabel')" text-xs>{{ $t('nav.bookmarks') }}</span>
+    <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 4aa2e727..e18cec4e 100644
--- a/components/nav/button/Compose.vue
+++ b/components/nav/button/Compose.vue
@@ -3,12 +3,12 @@ defineProps<{
   activeClass: string
 }>()
 
-const userSettings = useUserSettings()
+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 />
-    <span v-if="!getPreferences(userSettings, 'hideBottomNavLabel')" text-xs>{{ $t('nav.favourites') }}</span>
+    <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 049f068a..53612036 100644
--- a/components/nav/button/Explore.vue
+++ b/components/nav/button/Explore.vue
@@ -8,6 +8,7 @@ defineProps<{
 const lastAccessedExploreRoute = useLocalStorage(STORAGE_KEY_LAST_ACCESSED_EXPLORE_ROUTE, '')
 
 const userSettings = useUserSettings()
+const hideLabel = computed(() => getPreferences(userSettings.value, 'hideBottomNavLabel'))
 </script>
 
 <template>
@@ -19,6 +20,6 @@ const userSettings = useUserSettings()
     @click="$scrollToTop"
   >
     <div i-ri:compass-3-line />
-    <span v-if="!getPreferences(userSettings, 'hideBottomNavLabel')" text-xs>{{ $t('nav.explore') }}</span>
+    <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 65ae7381..f61e47ac 100644
--- a/components/nav/button/Favorite.vue
+++ b/components/nav/button/Favorite.vue
@@ -3,12 +3,12 @@ defineProps<{
   activeClass: string
 }>()
 
-const userSettings = useUserSettings()
+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 />
-    <span v-if="!getPreferences(userSettings, 'hideBottomNavLabel')" text-xs>{{ $t('nav.favourites') }}</span>
+    <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 932a9b68..86679edf 100644
--- a/components/nav/button/Federated.vue
+++ b/components/nav/button/Federated.vue
@@ -1,14 +1,16 @@
 <script setup lang="ts">
+import { useHideBottomNavigationLabel } from '~/composables/settings'
+
 defineProps<{
   activeClass: string
 }>()
 
-const userSettings = useUserSettings()
+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 />
-    <span v-if="!getPreferences(userSettings, 'hideBottomNavLabel')" text-xs>{{ $t('nav.federated') }}</span>
+    <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 28a126cd..e75e7f3e 100644
--- a/components/nav/button/Hashtag.vue
+++ b/components/nav/button/Hashtag.vue
@@ -3,12 +3,12 @@ defineProps<{
   activeClass: string
 }>()
 
-const userSettings = useUserSettings()
+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 />
-    <span v-if="!getPreferences(userSettings, 'hideBottomNavLabel')" text-xs>{{ $t('nav.hashtags') }}</span>
+    <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 7853e4bb..cf9641e5 100644
--- a/components/nav/button/Home.vue
+++ b/components/nav/button/Home.vue
@@ -3,12 +3,12 @@ defineProps<{
   activeClass: string
 }>()
 
-const userSettings = useUserSettings()
+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 />
-    <span v-if="!getPreferences(userSettings, 'hideBottomNavLabel')" text-xs>{{ $t('nav.home') }}</span>
+    <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 72af3955..a892f5aa 100644
--- a/components/nav/button/List.vue
+++ b/components/nav/button/List.vue
@@ -1,9 +1,11 @@
 <script setup lang="ts">
+import { useHideBottomNavigationLabel } from '~/composables/settings'
+
 defineProps<{
   activeClass: string
 }>()
 
-const userSettings = useUserSettings()
+const hideLabel = useHideBottomNavigationLabel()
 </script>
 
 <template>
@@ -15,6 +17,6 @@ const userSettings = useUserSettings()
     class="coarse-pointer:select-none" @click="$scrollToTop"
   >
     <div i-ri:list-check />
-    <span v-if="!getPreferences(userSettings, 'hideBottomNavLabel')" text-xs>{{ $t('nav.lists') }}</span>
+    <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 a27f8413..0502c51c 100644
--- a/components/nav/button/Local.vue
+++ b/components/nav/button/Local.vue
@@ -3,7 +3,7 @@ defineProps<{
   activeClass: string
 }>()
 
-const userSettings = useUserSettings()
+const hideLabel = useHideBottomNavigationLabel()
 </script>
 
 <template>
@@ -15,6 +15,6 @@ const userSettings = useUserSettings()
     @click="$scrollToTop"
   >
     <div i-ri:group-2-line />
-    <span v-if="!getPreferences(userSettings, 'hideBottomNavLabel')" text-xs>{{ $t('nav.local') }}</span>
+    <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 82cba17e..1bc449c1 100644
--- a/components/nav/button/Mention.vue
+++ b/components/nav/button/Mention.vue
@@ -3,7 +3,7 @@ defineProps<{
   activeClass: string
 }>()
 
-const userSettings = useUserSettings()
+const hideLabel = useHideBottomNavigationLabel()
 </script>
 
 <template>
@@ -14,6 +14,6 @@ const userSettings = useUserSettings()
     @click="$scrollToTop"
   >
     <div i-ri:at-line />
-    <span v-if="!getPreferences(userSettings, 'hideBottomNavLabel')" text-xs>{{ $t('nav.conversations') }}</span>
+    <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 3eba0df5..b544b78c 100644
--- a/components/nav/button/MoreMenu.vue
+++ b/components/nav/button/MoreMenu.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 const model = defineModel<boolean>()
 
-const userSettings = useUserSettings()
+const hideLabel = useHideBottomNavigationLabel()
 </script>
 
 <template>
@@ -16,7 +16,7 @@ const userSettings = useUserSettings()
       @click="toggleVisible"
     >
       <span :class="show ? 'i-ri:close-fill' : 'i-ri:more-fill'" />
-      <span v-if="!getPreferences(userSettings, 'hideBottomNavLabel')" text-xs>{{ $t('nav.more_menu') }}</span>
+      <span v-if="!hideLabel" 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 a5206d65..c6ba0933 100644
--- a/components/nav/button/Notification.vue
+++ b/components/nav/button/Notification.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { useHideBottomNavigationLabel } from '~/composables/settings'
 import { STORAGE_KEY_LAST_ACCESSED_NOTIFICATION_ROUTE } from '~/constants'
 
 defineProps<{
@@ -7,7 +8,7 @@ defineProps<{
 const { notifications } = useNotifications()
 const lastAccessedNotificationRoute = useLocalStorage(STORAGE_KEY_LAST_ACCESSED_NOTIFICATION_ROUTE, '')
 
-const userSettings = useUserSettings()
+const hideLabel = useHideBottomNavigationLabel()
 </script>
 
 <template>
@@ -18,6 +19,6 @@ const userSettings = useUserSettings()
         {{ notifications < 10 ? notifications : '•' }}
       </div>
     </div>
-    <span v-if="!getPreferences(userSettings, 'hideBottomNavLabel')" text-xs>{{ $t('nav.notifications') }}</span>
+    <span v-if="!hideLabel" text-xs>{{ $t('nav.notifications') }}</span>
   </NuxtLink>
 </template>
diff --git a/components/nav/button/Search.vue b/components/nav/button/Search.vue
index 353fddb0..6a358edd 100644
--- a/components/nav/button/Search.vue
+++ b/components/nav/button/Search.vue
@@ -3,12 +3,12 @@ defineProps<{
   activeClass: string
 }>()
 
-const userSettings = useUserSettings()
+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 />
-    <span v-if="!getPreferences(userSettings, 'hideBottomNavLabel')" text-xs>{{ $t('nav.search') }}</span>
+    <span v-if="!hideLabel" text-xs>{{ $t('nav.search') }}</span>
   </NuxtLink>
 </template>
diff --git a/composables/settings/storage.ts b/composables/settings/storage.ts
index 0d2a92d9..14f27967 100644
--- a/composables/settings/storage.ts
+++ b/composables/settings/storage.ts
@@ -43,3 +43,8 @@ export function togglePreferences(key: keyof PreferencesSettings) {
   const flag = usePreferences(key)
   flag.value = !flag.value
 }
+
+export function useHideBottomNavigationLabel() {
+  const userSettings = useUserSettings()
+  return computed(() => getPreferences(userSettings.value, 'hideBottomNavLabel'))
+}