ayo/elk
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: make nav button label setting reactive

Browse source
This commit is contained in:
TAKAHASHI Shuuji 2025-01-02 00:26:33 +09:00
parent 411fcc83f0
commit f9f58a8d1e
13 changed files with 13 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
components/nav/button/Bookmark.vue
View file

@ -4,12 +4,11 @@ defineProps<{
}>() }>()
const userSettings = useUserSettings() const userSettings = useUserSettings()
const hideLabel = getPreferences(userSettings.value, 'hideBottomNavLabel')
</script> </script>
<template> <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"> <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 /> <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> </NuxtLink>
</template> </template>

3
components/nav/button/Compose.vue
View file

@ -4,12 +4,11 @@ defineProps<{
}>() }>()
const userSettings = useUserSettings() const userSettings = useUserSettings()
const hideLabel = getPreferences(userSettings.value, 'hideBottomNavLabel')
</script> </script>
<template> <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"> <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 /> <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> </NuxtLink>
</template> </template>

3
components/nav/button/Explore.vue
View file

@ -8,7 +8,6 @@ defineProps<{
const lastAccessedExploreRoute = useLocalStorage(STORAGE_KEY_LAST_ACCESSED_EXPLORE_ROUTE, '') const lastAccessedExploreRoute = useLocalStorage(STORAGE_KEY_LAST_ACCESSED_EXPLORE_ROUTE, '')
const userSettings = useUserSettings() const userSettings = useUserSettings()
const hideLabel = getPreferences(userSettings.value, 'hideBottomNavLabel')
</script> </script>
<template> <template>
@ -20,6 +19,6 @@ const hideLabel = getPreferences(userSettings.value, 'hideBottomNavLabel')
@click="$scrollToTop" @click="$scrollToTop"
> >
<div i-ri:compass-3-line /> <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> </NuxtLink>
</template> </template>

3
components/nav/button/Favorite.vue
View file

@ -4,12 +4,11 @@ defineProps<{
}>() }>()
const userSettings = useUserSettings() const userSettings = useUserSettings()
const hideLabel = getPreferences(userSettings.value, 'hideBottomNavLabel')
</script> </script>
<template> <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"> <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 /> <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> </NuxtLink>
</template> </template>

3
components/nav/button/Federated.vue
View file

@ -4,12 +4,11 @@ defineProps<{
}>() }>()
const userSettings = useUserSettings() const userSettings = useUserSettings()
const hideLabel = getPreferences(userSettings.value, 'hideBottomNavLabel')
</script> </script>
<template> <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"> <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 /> <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> </NuxtLink>
</template> </template>

3
components/nav/button/Hashtag.vue
View file

@ -4,12 +4,11 @@ defineProps<{
}>() }>()
const userSettings = useUserSettings() const userSettings = useUserSettings()
const hideLabel = getPreferences(userSettings.value, 'hideBottomNavLabel')
</script> </script>
<template> <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"> <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 /> <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> </NuxtLink>
</template> </template>

3
components/nav/button/Home.vue
View file

@ -4,12 +4,11 @@ defineProps<{
}>() }>()
const userSettings = useUserSettings() const userSettings = useUserSettings()
const hideLabel = getPreferences(userSettings.value, 'hideBottomNavLabel')
</script> </script>
<template> <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"> <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 /> <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> </NuxtLink>
</template> </template>

3
components/nav/button/List.vue
View file

@ -4,7 +4,6 @@ defineProps<{
}>() }>()
const userSettings = useUserSettings() const userSettings = useUserSettings()
const hideLabel = getPreferences(userSettings.value, 'hideBottomNavLabel')
</script> </script>
<template> <template>
@ -16,6 +15,6 @@ const hideLabel = getPreferences(userSettings.value, 'hideBottomNavLabel')
class="coarse-pointer:select-none" @click="$scrollToTop" class="coarse-pointer:select-none" @click="$scrollToTop"
> >
<div i-ri:list-check /> <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> </NuxtLink>
</template> </template>

3
components/nav/button/Local.vue
View file

@ -4,7 +4,6 @@ defineProps<{
}>() }>()
const userSettings = useUserSettings() const userSettings = useUserSettings()
const hideLabel = getPreferences(userSettings.value, 'hideBottomNavLabel')
</script> </script>
<template> <template>
@ -16,6 +15,6 @@ const hideLabel = getPreferences(userSettings.value, 'hideBottomNavLabel')
@click="$scrollToTop" @click="$scrollToTop"
> >
<div i-ri:group-2-line /> <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> </NuxtLink>
</template> </template>

3
components/nav/button/Mention.vue
View file

@ -4,7 +4,6 @@ defineProps<{
}>() }>()
const userSettings = useUserSettings() const userSettings = useUserSettings()
const hideLabel = getPreferences(userSettings.value, 'hideBottomNavLabel')
</script> </script>
<template> <template>
@ -15,6 +14,6 @@ const hideLabel = getPreferences(userSettings.value, 'hideBottomNavLabel')
@click="$scrollToTop" @click="$scrollToTop"
> >
<div i-ri:at-line /> <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> </NuxtLink>
</template> </template>

3
components/nav/button/MoreMenu.vue
View file

@ -2,7 +2,6 @@
const model = defineModel<boolean>() const model = defineModel<boolean>()
const userSettings = useUserSettings() const userSettings = useUserSettings()
const hideLabel = getPreferences(userSettings.value, 'hideBottomNavLabel')
</script> </script>
<template> <template>
@ -17,7 +16,7 @@ const hideLabel = getPreferences(userSettings.value, 'hideBottomNavLabel')
@click="toggleVisible" @click="toggleVisible"
> >
<span :class="show ? 'i-ri:close-fill' : 'i-ri:more-fill'" /> <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> </button>
</NavBottomMoreMenu> </NavBottomMoreMenu>
</template> </template>

3
components/nav/button/Notification.vue
View file

@ -8,7 +8,6 @@ const { notifications } = useNotifications()
const lastAccessedNotificationRoute = useLocalStorage(STORAGE_KEY_LAST_ACCESSED_NOTIFICATION_ROUTE, '') const lastAccessedNotificationRoute = useLocalStorage(STORAGE_KEY_LAST_ACCESSED_NOTIFICATION_ROUTE, '')
const userSettings = useUserSettings() const userSettings = useUserSettings()
const hideLabel = getPreferences(userSettings.value, 'hideBottomNavLabel')
</script> </script>
<template> <template>
@ -19,6 +18,6 @@ const hideLabel = getPreferences(userSettings.value, 'hideBottomNavLabel')
{{ notifications < 10 ? notifications : '•' }} {{ notifications < 10 ? notifications : '•' }}
</div> </div>
</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> </NuxtLink>
</template> </template>

3
components/nav/button/Search.vue
View file

@ -4,12 +4,11 @@ defineProps<{
}>() }>()
const userSettings = useUserSettings() const userSettings = useUserSettings()
const hideLabel = getPreferences(userSettings.value, 'hideBottomNavLabel')
</script> </script>
<template> <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"> <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 /> <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> </NuxtLink>
</template> </template>