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

refactor: fix reactivity and make it composable

Browse source
This commit is contained in:
TAKAHASHI Shuuji 2025-01-02 01:27:05 +09:00
parent f9f58a8d1e
commit 50b43e0e9e
14 changed files with 38 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -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>

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

@ -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>

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

@ -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>

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

@ -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>

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

@ -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>

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

@ -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>

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

@ -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>

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

@ -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>

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

@ -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>

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

@ -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>

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

@ -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>

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

@ -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>

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

@ -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>

5
composables/settings/storage.ts
View file

@ -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'))
}