diff --git a/frontend/src/components/Layout/SettingsPage.vue b/frontend/src/components/Layout/SettingsPage.vue index 6e99943d35d..31c4d7f2a31 100644 --- a/frontend/src/components/Layout/SettingsPage.vue +++ b/frontend/src/components/Layout/SettingsPage.vue @@ -17,3 +17,18 @@ + + diff --git a/frontend/src/composables/page-title.ts b/frontend/src/composables/page-title.ts index f3261154d05..1d9b5a93c1b 100644 --- a/frontend/src/composables/page-title.ts +++ b/frontend/src/composables/page-title.ts @@ -1,5 +1,5 @@ -import { useTitle as _useTitle, watchImmediate } from '@vueuse/core'; -import { onBeforeUnmount, onMounted, shallowRef, toRef, toValue, type MaybeRefOrGetter } from 'vue'; +import { computed, onBeforeUnmount, onMounted, shallowRef, toRef, toValue } from 'vue'; +import { useTitle as _useTitle, watchImmediate, type ReadonlyRefOrGetter } from '@vueuse/core'; import type { BaseItemDto } from '@jellyfin/sdk/lib/generated-client'; import { isNil } from '@/utils/validation'; @@ -8,8 +8,9 @@ import { isNil } from '@/utils/validation'; */ const DEFAULT_PAGE_TITLE = 'Jellyfin Vue'; const _title = shallowRef(); +const _fullTitle = computed(() => _title.value ? `${_title.value.trim()} | ${DEFAULT_PAGE_TITLE}` : DEFAULT_PAGE_TITLE); -_useTitle(() => _title.value ? `${_title.value.trim()} | ${DEFAULT_PAGE_TITLE}` : DEFAULT_PAGE_TITLE); +_useTitle(_fullTitle); /** * Reactively sets the page title with the following template: **`title` | Jellyfin Vue**. Can be used in 2 ways: @@ -20,10 +21,10 @@ _useTitle(() => _title.value ? `${_title.value.trim()} | ${DEFAULT_PAGE_TITLE}` * * Value will be set to default (undefined) when the component consuming this composable is unmounted. */ -export function usePageTitle(title?: MaybeRefOrGetter) { +export function usePageTitle(title?: ReadonlyRefOrGetter>) { onMounted(() => { if (!isNil(title)) { - watchImmediate(toRef(title), val => _title.value = val); + watchImmediate(toRef(title), val => _title.value = val ?? undefined); } }); @@ -35,6 +36,6 @@ export function usePageTitle(title?: MaybeRefOrGetter) { /** * Same as useTitle, but is a shorthand for items only. */ -export function useItemPageTitle(item: MaybeRefOrGetter>) { - usePageTitle(() => toValue(item)?.Name ?? ''); +export function useItemPageTitle(item: ReadonlyRefOrGetter>) { + usePageTitle(() => toValue(item)?.Name); }; diff --git a/frontend/src/pages/settings/logs-and-activity.vue b/frontend/src/pages/settings/logs-and-activity.vue index 8d79fa6f188..5e67d00b393 100644 --- a/frontend/src/pages/settings/logs-and-activity.vue +++ b/frontend/src/pages/settings/logs-and-activity.vue @@ -112,13 +112,10 @@ import { useTheme } from 'vuetify'; import { remote } from '@/plugins/remote'; import { useDateFns } from '@/composables/use-datefns'; import { useApi } from '@/composables/apis'; -import { usePageTitle } from '@/composables/page-title'; const { t } = useI18n(); const theme = useTheme(); -usePageTitle(() => t('logsAndActivity')); - /** * Return a UI colour given log severity */ diff --git a/frontend/src/pages/settings/users/new.vue b/frontend/src/pages/settings/users/new.vue index ad8ef5419b9..816a29ee16d 100644 --- a/frontend/src/pages/settings/users/new.vue +++ b/frontend/src/pages/settings/users/new.vue @@ -135,5 +135,4 @@ async function createUser(): Promise { loading.value = false; } } -