fix: make nav button label setting reactive

elk-zone · Jan 1, 2025 · fe99f78 · fe99f78
1 parent 411fcc8
commit fe99f78
Show file tree

Hide file tree

Showing 13 changed files with 14 additions and 26 deletions.
diff --git 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
@@ -4,12 +4,12 @@ defineProps<{
 }>()
 
 const userSettings = useUserSettings()
-const hideLabel = getPreferences(userSettings.value, 'hideBottomNavLabel')
+// 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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>