From 01f26c6d9539791fbf8e08b84127b662de38d097 Mon Sep 17 00:00:00 2001
From: arily <arily@arily.moe>
Date: Tue, 30 Apr 2024 00:52:07 +0800
Subject: [PATCH] refine titles & translations

---
 src/common/utils/locale-path.ts        | 14 ++++++++----
 src/common/utils/locales.ts            |  3 +++
 src/components/app/footer.vue          |  2 +-
 src/components/app/nav/index.vue       |  8 +++----
 src/components/app/nav/items.vue       |  6 +++---
 src/composables/useSearchablePages.tsx |  6 +++---
 src/locales/@types.d.ts                |  7 +++---
 src/locales/base/en-GB.ts              |  5 ++++-
 src/locales/base/fr-FR.ts              | 26 ++++++++++++++++------
 src/locales/base/zh-CN.ts              |  8 +++----
 src/pages/admin/index.vue              | 27 ++++++++---------------
 src/pages/admin/logs.vue               |  8 ++++++-
 src/pages/admin/users/[id].vue         | 30 +++++++++++++++++++-------
 src/pages/admin/users/index.vue        |  5 +++++
 src/pages/article/edit.vue             |  5 +++++
 src/pages/auth/account-recovery.vue    |  7 +++++-
 src/pages/auth/create-account.vue      |  4 ++--
 src/pages/auth/login.vue               |  9 ++++----
 src/pages/auth/register.vue            |  5 +++++
 src/pages/beatmapset/[id].vue          |  5 +++--
 src/pages/clan/[id].vue                |  5 +++++
 src/pages/clans.vue                    | 26 +++++++++++++++++++---
 src/pages/index.vue                    |  2 +-
 src/pages/leaderboard/[[mode]].vue     |  7 ++++--
 src/pages/me/relations.vue             | 11 ++++++----
 src/pages/me/settings.vue              |  3 ++-
 src/pages/score/[id].vue               | 15 +++++++++++++
 src/pages/status.vue                   |  5 +++++
 src/pages/user/[handle].vue            |  2 +-
 29 files changed, 189 insertions(+), 77 deletions(-)

diff --git a/src/common/utils/locale-path.ts b/src/common/utils/locale-path.ts
index 213eb9ca..7945bdd6 100644
--- a/src/common/utils/locale-path.ts
+++ b/src/common/utils/locale-path.ts
@@ -20,16 +20,22 @@ type RetrievablePath<T, Delimiter extends string, Path extends string = ''> =
 
 function getPathWithDelimiter<Shape extends PathAccessibleObject, Delimiter extends string>(delimiter: Delimiter, segments: string[] = []): RetrievablePath<Shape, Delimiter> {
   const recursiveHandler = {
-    get(target: Shape, prop: string): unknown {
+    get(target: Shape, prop: string | symbol): unknown {
       switch (prop) {
-        case '__path__': {
+        case '__path__':
+        {
           return segments.join(delimiter)
         }
-        case 'toString': {
+
+        case Symbol.toStringTag:
+        case 'toString':
+        case 'valueOf':
+        {
           return () => segments.join(delimiter)
         }
+
         default: {
-          return getPathWithDelimiter<any, Delimiter>(delimiter, [...segments, prop])
+          return getPathWithDelimiter<any, Delimiter>(delimiter, [...segments, prop as string])
         }
       }
     },
diff --git a/src/common/utils/locales.ts b/src/common/utils/locales.ts
index bd8c630f..080ca734 100644
--- a/src/common/utils/locales.ts
+++ b/src/common/utils/locales.ts
@@ -6,6 +6,9 @@ import type { Mail } from '~/def/mail'
 
 export const root = getPath<GlobalI18n>()()
 
+export const title = root.title
+export const server = root.server
+
 const _role = root.role
 const _scope = root.scope
 const _mode = root.mode
diff --git a/src/components/app/footer.vue b/src/components/app/footer.vue
index 8ce886db..93508c11 100644
--- a/src/components/app/footer.vue
+++ b/src/components/app/footer.vue
@@ -36,7 +36,7 @@ const { iconLinks, footerLink, brand } = runtime.public as unknown as { iconLink
       <hr class="my-6 border-gray-200 sm:mx-auto dark:border-gray-700 lg:my-8">
       <div class="sm:flex sm:items-center sm:justify-between">
         <span class="text-sm text-gbase-500 sm:text-center dark:text-gbase-400">
-          © {{ fullYear }} <a href="https://github.com/ppy-sb" class="hover:underline">ppy.sb. All Rights Reserved.</a>
+          © {{ fullYear }} <a href="https://github.com/ppy-sb" class="hover:underline">ppy.sb</a>. All Rights Reserved.
         </span>
         <div v-if="iconLinks?.length" class="flex mt-4 space-x-5 sm:justify-center sm:mt-0">
           <a v-for="link in iconLinks" :key="link.name" :href="link.link" class="text-gbase-500 hover:text-gbase-900 dark:hover:text-white">
diff --git a/src/components/app/nav/index.vue b/src/components/app/nav/index.vue
index 05ab5cc6..ada24646 100644
--- a/src/components/app/nav/index.vue
+++ b/src/components/app/nav/index.vue
@@ -99,7 +99,7 @@ function clearFocus() {
                   }" @click="clearFocus"
                 >
                   <icon name="solar:settings-bold" class="w-5 h-5" size="100%" />
-                  {{ t('titles.settings') }}
+                  {{ t('title.settings') }}
                 </nuxt-link-locale>
               </li>
               <li>
@@ -109,7 +109,7 @@ function clearFocus() {
                   }" @click="clearFocus"
                 >
                   <icon name="tabler:circles-relation" class="w-5 h-5" size="100%" />
-                  {{ t('titles.relations') }}
+                  {{ t('title.relations') }}
                 </nuxt-link-locale>
               </li>
               <li>
@@ -122,7 +122,7 @@ function clearFocus() {
                   }" @click="clearFocus"
                 >
                   <icon name="mingcute:profile-fill" class="w-5 h-5" size="100%" />
-                  {{ t('titles.userpage') }}
+                  {{ t('title.userpage') }}
                 </nuxt-link-locale>
               </li>
               <li v-if="session.$state.role.staff">
@@ -132,7 +132,7 @@ function clearFocus() {
                   }" @click="clearFocus"
                 >
                   <icon name="material-symbols:admin-panel-settings-rounded" class="w-5 h-5" size="100%" />
-                  {{ t('titles.admin-panel') }}
+                  {{ t('title.admin-panel') }}
                 </nuxt-link-locale>
               </li>
               <div class="divider my-0" />
diff --git a/src/components/app/nav/items.vue b/src/components/app/nav/items.vue
index 4cd695f6..30f4b362 100644
--- a/src/components/app/nav/items.vue
+++ b/src/components/app/nav/items.vue
@@ -18,19 +18,19 @@ function clearFocus() {
   <li>
     <nuxt-link-locale :to="{ name: 'leaderboard-mode' }" @click="clearFocus">
       <icon name="material-symbols:leaderboard-rounded" class="w-5 h-5" size="100%" />
-      {{ t('titles.leaderboard') }}
+      {{ t('title.leaderboard') }}
     </nuxt-link-locale>
   </li>
   <li>
     <nuxt-link-locale :to="{ name: 'clans' }" @click="clearFocus">
       <icon name="material-symbols:leaderboard-rounded" class="w-5 h-5" size="100%" />
-      [{{ t('global.wip') }}] {{ t('titles.clans') }}
+      [{{ t('global.wip') }}] {{ t('title.clans') }}
     </nuxt-link-locale>
   </li>
   <li v-if="session.role.staff">
     <nuxt-link-locale :to="{ name: 'status' }" @click="clearFocus">
       <icon name="material-symbols:signal-cellular-alt-rounded" class="w-5 h-5" size="100%" />
-      {{ t('titles.status') }}
+      {{ t('title.status') }}
     </nuxt-link-locale>
   </li>
   <li tabindex="0">
diff --git a/src/composables/useSearchablePages.tsx b/src/composables/useSearchablePages.tsx
index 12ef34ad..3bb9cbc9 100644
--- a/src/composables/useSearchablePages.tsx
+++ b/src/composables/useSearchablePages.tsx
@@ -60,7 +60,7 @@ export const pages: {
           class="w-5 h-5"
           size="100%"
         />
-        {useI18n({ useScope: 'global' }).t('titles.admin-panel')}
+        {useI18n({ useScope: 'global' }).t('title.admin-panel')}
       </>
     ),
     route: () => ({
@@ -81,7 +81,7 @@ export const pages: {
     render: () => (
       <>
         <icon name="tabler:circles-relation" class="w-5 h-5" size="100%" />
-        {useI18n({ useScope: 'global' }).t('titles.relations')}
+        {useI18n({ useScope: 'global' }).t('title.relations')}
       </>
     ),
     route: () => ({
@@ -94,7 +94,7 @@ export const pages: {
     render: () => (
       <>
         <icon name="solar:settings-bold" class="w-5 h-5" size="100%" />
-        {useI18n({ useScope: 'global' }).t('titles.settings')}
+        {useI18n({ useScope: 'global' }).t('title.settings')}
       </>
     ),
     route: () => ({
diff --git a/src/locales/@types.d.ts b/src/locales/@types.d.ts
index fc922bfd..a7fa72e3 100644
--- a/src/locales/@types.d.ts
+++ b/src/locales/@types.d.ts
@@ -8,13 +8,14 @@ import type { Scope, UserRole } from '~/def/user'
 import { Lang, type Rank } from '~/def'
 import type { ActiveMode, ActiveRuleset } from '~/def/common'
 
-type Titles =
+type Title =
 | 'leaderboard'
 | 'status'
 | 'settings'
 | 'relations'
 | 'userpage'
 | 'admin-panel'
+| 'user-management'
 | 'logs'
 | 'articles'
 | 'clans'
@@ -60,8 +61,8 @@ export interface GlobalI18n extends PathAccessibleObject {
   }
   role: Record<UserRole, string>
   scope: Record<Scope, string>
-  titles: Record<
-    Titles,
+  title: Record<
+    Title,
     string
   >
   global: Record<KGlobal, string>
diff --git a/src/locales/base/en-GB.ts b/src/locales/base/en-GB.ts
index 2700ac69..3be14575 100644
--- a/src/locales/base/en-GB.ts
+++ b/src/locales/base/en-GB.ts
@@ -10,6 +10,7 @@ export default {
   server: {
     name: 'Guccho',
   },
+
   footer: {
     about: 'About',
     resources: 'Resources',
@@ -33,7 +34,8 @@ export default {
     [Rank.TotalScore]: 'Total Score',
     [Rank.Score]: 'Score',
   },
-  titles: {
+
+  title: {
     'leaderboard': 'Leaderboard',
     'status': 'Status',
     'settings': 'Settings',
@@ -44,6 +46,7 @@ export default {
     'articles': 'Articles',
     'clans': 'Clans',
     'account-recovery': 'Account Recovery',
+    'user-management': 'User Management',
   },
   global: {
     'logout': 'Sign out',
diff --git a/src/locales/base/fr-FR.ts b/src/locales/base/fr-FR.ts
index 9f821ead..5a345d7b 100644
--- a/src/locales/base/fr-FR.ts
+++ b/src/locales/base/fr-FR.ts
@@ -1,13 +1,15 @@
 import type { GlobalI18n } from '../@types'
-import enGB from './en-GB'
 import { CountryCode } from '~/def/country-code'
 import { Rank } from '~/def'
 import { Scope, UserRole } from '~/def/user'
 
 export default {
-// intentionally omit 'server' to fallback to enGB
-  mode: enGB.mode,
-  ruleset: enGB.ruleset,
+  // reuse en-GB
+  server: {} as any,
+  footer: {} as any,
+
+  mode: {} as any,
+  ruleset: {} as any,
   rank: {
     [Rank.PPv2]: 'Performance(v2)',
     [Rank.PPv1]: 'Performance(v1)',
@@ -15,7 +17,7 @@ export default {
     [Rank.TotalScore]: 'Score Total',
     [Rank.Score]: 'Score',
   },
-  titles: {
+  title: {
     'leaderboard': 'Classement',
     'status': 'Statut',
     'settings': 'Paramètres',
@@ -25,7 +27,11 @@ export default {
     'logs': 'Logs',
     'articles': 'Articles',
     'clans': 'Clans',
+    'user-management': 'Gestion d\'utilisateur',
+    // TODO refine fr translation
+    'account-recovery': 'Account Recovery',
   },
+
   global: {
     'logout': 'Déconnexion',
     'login': 'Connexion',
@@ -43,9 +49,11 @@ export default {
     'users': 'Utilisateur',
     'session': 'Session',
     'password': 'Mot de passe',
+    // TODO refine fr translation
     'email': 'Email',
     'otp': 'One time code',
     'verify': 'Verify',
+    'wip': 'WIP',
   },
   role: {
     [UserRole.Disabled]: 'Désactivé',
@@ -65,6 +73,7 @@ export default {
     [UserRole.Owner]: 'Propriétaire',
     [UserRole.Bot]: 'Bot',
   },
+
   scope: {
     [Scope.Self]: 'Moi',
     [Scope.Friends]: 'Amis',
@@ -75,6 +84,10 @@ export default {
     ranks: 'Classement',
     sessions: 'Connexion Web',
   },
+
+  beatmap: {} as any,
+
+  error: {} as any,
   country: {
     [CountryCode.Unknown]: 'Inconnu',
     [CountryCode.Afghanistan]: 'Afghanistan',
@@ -327,4 +340,5 @@ export default {
     [CountryCode.Zambia]: 'Zambie',
     [CountryCode.Zimbabwe]: 'Zimbabwe',
   },
-} satisfies Omit<GlobalI18n, 'server'>
+  mail: {} as any,
+} satisfies GlobalI18n
diff --git a/src/locales/base/zh-CN.ts b/src/locales/base/zh-CN.ts
index 05cc9d4c..52373e68 100644
--- a/src/locales/base/zh-CN.ts
+++ b/src/locales/base/zh-CN.ts
@@ -9,13 +9,12 @@ import { GucchoError } from '~/def/messages'
 export default {
   // reuse en-GB
   server: {} as any,
-  mode: {} as any,
-  ruleset: {} as any,
-
   footer: {
     about: '关于',
     resources: '资源',
   },
+  mode: {} as any,
+  ruleset: {} as any,
 
   rank: {
     [Rank.PPv2]: 'Performance(v2)',
@@ -25,7 +24,7 @@ export default {
     [Rank.Score]: '分数',
   },
 
-  titles: {
+  title: {
     'leaderboard': '排行榜',
     'status': '状态',
     'settings': '设置',
@@ -36,6 +35,7 @@ export default {
     'articles': '文章',
     'clans': '家人们',
     'account-recovery': '找回账号',
+    'user-management': '用户管理',
   },
 
   global: {
diff --git a/src/pages/admin/index.vue b/src/pages/admin/index.vue
index 77375322..0d7ec281 100644
--- a/src/pages/admin/index.vue
+++ b/src/pages/admin/index.vue
@@ -1,16 +1,11 @@
-<script setup lang="ts">
-const { t } = useI18n()
+<script lang="ts" setup>
+const app = useNuxtApp()
+useHead({
+  title: () => app.$i18n.t(localeKey.title['admin-panel'].__path__),
+  titleTemplate: title => `${title} - ${app.$i18n.t(localeKey.server.name.__path__)}`,
+})
 </script>
 
-<i18n lang="yaml">
-en-GB:
-  user-management: User Management
-zh-CN:
-  user-management: 用户管理
-fr-FR:
-  user-management: Gestion d'utilisateur
-</i18n>
-
 <template>
   <div class="join drop-shadow-lg">
     <t-nuxt-link-button
@@ -19,7 +14,7 @@ fr-FR:
       }"
       class="join-item"
     >
-      {{ t('titles.articles') }}
+      {{ $t(localeKey.title.articles.__path__) }}
     </t-nuxt-link-button>
     <t-nuxt-link-button
       :to="{
@@ -27,7 +22,7 @@ fr-FR:
       }"
       class="join-item"
     >
-      {{ t('titles.logs') }}
+      {{ $t(localeKey.title.logs.__path__) }}
     </t-nuxt-link-button>
     <t-nuxt-link-button
       :to="{
@@ -35,11 +30,7 @@ fr-FR:
       }"
       class="join-item"
     >
-      {{ t('user-management') }}
+      {{ $t(localeKey.title['user-management'].__path__) }}
     </t-nuxt-link-button>
   </div>
 </template>
-
-<style scoped>
-
-</style>
diff --git a/src/pages/admin/logs.vue b/src/pages/admin/logs.vue
index dba0cf50..10efd632 100644
--- a/src/pages/admin/logs.vue
+++ b/src/pages/admin/logs.vue
@@ -3,6 +3,12 @@ const app = useNuxtApp()
 const last = ref(50)
 const { data: logs } = await app.$client.admin.log.last.useQuery(last)
 const { t, locale } = useI18n()
+
+useHead({
+  title: () => t(localeKey.title.logs.__path__),
+  titleTemplate: title => `${title} - ${t(localeKey.server.name.__path__)}`,
+})
+
 async function truncate() {
   logs.value = await app.$client.admin.log.truncate.mutate()
 }
@@ -12,7 +18,7 @@ async function truncate() {
   <div>
     <div class="mb-5 px-4 flex justify-between">
       <h1 class="text-xl italic font-bold inline-block">
-        {{ t('titles.logs') }}
+        {{ t('title.logs') }}
       </h1>
       <button class="btn btn-primary" @click="truncate">
         truncate
diff --git a/src/pages/admin/users/[id].vue b/src/pages/admin/users/[id].vue
index 9fabdda2..aa88b4c7 100644
--- a/src/pages/admin/users/[id].vue
+++ b/src/pages/admin/users/[id].vue
@@ -5,21 +5,22 @@ import { CountryCode } from '~/def/country-code'
 import { UserRole } from '~/def/user'
 import { useSession } from '~/store/session'
 
+const DISALLOW_USER_EDIT_ITSELF_ROLE = new Set([
+  UserRole.Owner,
+  UserRole.Admin,
+  UserRole.Staff,
+])
+
 const app = useNuxtApp()
 const { t } = useI18n()
 const route = useRoute('admin-users-id')
 const adapter = useAdapterConfig()
 const session = useSession()
 
-const disallowUserEditItselfRole = new Set([
-  UserRole.Owner,
-  UserRole.Admin,
-  UserRole.Staff,
-])
-
 const error = ref<Error>()
 const f = await app.$client.admin.userManagement.detail.query(route.params.id)
 const detail = ref(f as typeof f & { password?: string })
+const _unchanged = ref(detail.value)
 
 // eslint-disable-next-line antfu/no-const-enum
 const enum Status {
@@ -40,7 +41,7 @@ const opts = computed(() =>
     .map((item) => {
       const attrs: HTMLAttributes & InputHTMLAttributes = {}
       if (
-        (session.user?.id === detail.value.id && disallowUserEditItselfRole.has(item.value)) // prevent self from removing its priv
+        (session.user?.id === detail.value.id && DISALLOW_USER_EDIT_ITSELF_ROLE.has(item.value)) // prevent self from removing its priv
         || !isEditable(session.role, item.value)
       ) {
         attrs.disabled = true
@@ -51,14 +52,27 @@ const opts = computed(() =>
     .filter(i => adapter.supportedRoles.includes(i.value))
 )
 
+useHead({
+  titleTemplate: title => `${title} - ${t(localeKey.server.name.__path__)}`,
+  title: () => `${_unchanged.value.name} - ${t(localeKey.title['admin-panel'].__path__)}`,
+})
+
 async function save() {
   error.value = undefined
   status.value = Status.Pending
   try {
-    const send = { ...detail.value, password: detail.value.password ? md5(detail.value.password) : undefined }
+    const send = {
+      ...detail.value,
+      password: detail.value.password
+        ? md5(detail.value.password)
+        : undefined,
+    }
+
     const newValue = await app.$client.admin.userManagement.saveDetail.mutate([route.params.id, send])
+
     status.value = Status.Succeed
     detail.value = { ...newValue }
+    _unchanged.value = detail.value
   }
   catch (e) {
     status.value = Status.Errored
diff --git a/src/pages/admin/users/index.vue b/src/pages/admin/users/index.vue
index 4a388f31..73767d7e 100644
--- a/src/pages/admin/users/index.vue
+++ b/src/pages/admin/users/index.vue
@@ -45,6 +45,11 @@ const { data: result, refresh, pending } = await useAsyncData(async () => {
 
 const pages = computed(() => Math.ceil((result.value?.count || 0) / (result.value?.perPage ?? 10)))
 
+useHead({
+  titleTemplate: title => `${title} - ${t(localeKey.server.name.__path__)}`,
+  title: () => t(localeKey.title['admin-panel'].__path__),
+})
+
 function rewrite() {
   const newURL = location.href.replace(location.search, '')
   const searchParams = new URLSearchParams(search.value as any)
diff --git a/src/pages/article/edit.vue b/src/pages/article/edit.vue
index 051f4d23..66734ee0 100644
--- a/src/pages/article/edit.vue
+++ b/src/pages/article/edit.vue
@@ -49,6 +49,11 @@ const readPrivileges: Record<ArticleProvider.TReadAccess, string> = {
   [Scope.Public]: app.$i18n.t(localeKey.scope(Scope.Public)),
 }
 
+useHead({
+  title: () => t(localeKey.title.articles.__path__),
+  titleTemplate: title => `${title} - ${localeKey.server.name}`,
+})
+
 // Helper function to convert privilege object to select options
 function options(priv: typeof privileges | typeof readPrivileges) {
   return Object.entries(priv).map(([value, label]) => ({ label, value }))
diff --git a/src/pages/auth/account-recovery.vue b/src/pages/auth/account-recovery.vue
index 7774933e..5ddd812c 100644
--- a/src/pages/auth/account-recovery.vue
+++ b/src/pages/auth/account-recovery.vue
@@ -49,6 +49,11 @@ const otp = ref<MailTokenProvider.OTP>('' as any)
 const password = ref('')
 const repeatPassword = ref('')
 
+useHead({
+  title: () => t(localeKey.title['account-recovery'].__path__),
+  titleTemplate: title => `${title} - ${t(localeKey.server.name.__path__)}`,
+})
+
 async function step1() {
   state.value = State.Posting
   try {
@@ -155,7 +160,7 @@ fr-FR:
 <template>
   <div class="container max-w-screen-sm mx-auto">
     <h1 class="mb-8 text-3xl">
-      {{ t(localeRoot.titles['account-recovery'].__path__) }}
+      {{ t(localeRoot.title['account-recovery'].__path__) }}
     </h1>
     <form
       v-if="step === Step.Handle"
diff --git a/src/pages/auth/create-account.vue b/src/pages/auth/create-account.vue
index 03924cd6..35b11784 100755
--- a/src/pages/auth/create-account.vue
+++ b/src/pages/auth/create-account.vue
@@ -92,8 +92,8 @@ const validate: {
 }
 
 useHead({
-  title: () =>
-    `${app.$i18n.t(gLocale.register.__path__)} - ${app.$i18n.t(gLocale.register.__path__)}`,
+  title: () => `${app.$i18n.t(gLocale.register.__path__)}`,
+  titleTemplate: title => `${title} - ${app.$i18n.t(gLocale.register.__path__)}`,
 })
 
 async function userRegisterAction() {
diff --git a/src/pages/auth/login.vue b/src/pages/auth/login.vue
index 55f473eb..d20d9723 100755
--- a/src/pages/auth/login.vue
+++ b/src/pages/auth/login.vue
@@ -19,10 +19,6 @@ const route = useRoute<'auth-login'>()
 const app = useNuxtApp()
 const { t } = useI18n()
 
-useHead({
-  title: () => `${app.$i18n.t(lGlobal.login.__path__)} - ${app.$i18n.t(localeRoot.server.name.__path__)}`,
-})
-
 const error = shallowRef('')
 
 const login = shallowReactive<{
@@ -37,6 +33,11 @@ const login = shallowReactive<{
 
 const fetching = shallowRef(false)
 
+useHead({
+  title: () => `${app.$i18n.t(lGlobal.login.__path__)}`,
+  titleTemplate: title => `${title} - ${app.$i18n.t(localeRoot.server.name.__path__)}`,
+})
+
 async function userLogin() {
   fetching.value = true
   error.value = ''
diff --git a/src/pages/auth/register.vue b/src/pages/auth/register.vue
index 540cb0eb..ec48003e 100644
--- a/src/pages/auth/register.vue
+++ b/src/pages/auth/register.vue
@@ -31,6 +31,11 @@ const email = ref<MailTokenProvider.Email>()
 const otp = ref<MailTokenProvider.OTP>()
 const token = ref<MailTokenProvider.Token>()
 
+useHead({
+  title: t(gLocale.register.__path__),
+  titleTemplate: title => `${title} - ${t(localeKey.server.name.__path__)}`,
+})
+
 async function go() {
   error.value = undefined
 
diff --git a/src/pages/beatmapset/[id].vue b/src/pages/beatmapset/[id].vue
index 50fa4b4b..454466c5 100644
--- a/src/pages/beatmapset/[id].vue
+++ b/src/pages/beatmapset/[id].vue
@@ -88,7 +88,8 @@ const description = computed(() => selectedMap.value?.version)
 const url = useRequestURL()
 
 useHead({
-  title: () => `${title.value} - ${app.$i18n.t('server.name')}`,
+  title,
+  titleTemplate: title => `${title} - ${app.$i18n.t(localeKey.server.name.__path__)}`,
 })
 
 useSeoMeta({
@@ -581,7 +582,7 @@ fr-FR:
   &:before {
     content: "";
     position: absolute;
-    @apply top-20 left-0 right-0 bg-cover;
+    @apply top-20 left-0 right-0 bg-cover z-[-1];
     height: 30vmin;
   }
 
diff --git a/src/pages/clan/[id].vue b/src/pages/clan/[id].vue
index 91a741fb..3f825206 100644
--- a/src/pages/clan/[id].vue
+++ b/src/pages/clan/[id].vue
@@ -73,6 +73,11 @@ const allowToLeave = [
   ClanRelation.JoinPendingVerification,
 ]
 
+useHead({
+  title: t(localeKey.title.clans.__path__),
+  titleTemplate: title => `${title} - ${t(localeKey.server.name.__path__)}`,
+})
+
 async function requestJoin() {
   if (!clan.value) {
     return
diff --git a/src/pages/clans.vue b/src/pages/clans.vue
index b2cf3a63..0f63ddc9 100644
--- a/src/pages/clans.vue
+++ b/src/pages/clans.vue
@@ -8,6 +8,7 @@ const config = useRuntimeConfig()
 const { supportedModes, supportedRulesets } = useAdapterConfig()
 const pp = createPPFormatter()
 const score = createScoreFormatter()
+const { t } = useI18n()
 
 const availableRankingSystems = Object.keys(config.public.leaderboardRankingSystem)
 const route = useRoute('clans')
@@ -47,13 +48,31 @@ const mergeQuery = computed(() => ({
   keyword: query.keyword,
 }))
 const { data: res } = await app.$client.clan.search.useQuery(mergeQuery)
+
+useHead({
+  title: app.$i18n.t(localeKey.title.clans.__path__),
+  titleTemplate: title => `${title} - ${app.$i18n.t(localeKey.server.name.__path__)}`,
+})
 </script>
 
+<i18n lang="yaml">
+en-GB:
+  search-text: Search badges, names...
+  search: Search
+
+zh-CN:
+  search-text: 搜索标签、名称 ...
+  search: 搜索
+
+# TODO fr translation
+# fr-FR:
+</i18n>
+
 <template>
   <div class="container px-2 mx-auto custom-container lg:px-0">
     <header-simple-title-with-sub
       id="desc"
-      :title="$t('titles.clans')"
+      :title="$t(localeKey.title.clans.__path__)"
       :subtitle="
         selected.mode
           && selected.ruleset
@@ -77,12 +96,13 @@ const { data: res } = await app.$client.clan.search.useQuery(mergeQuery)
             <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z" />
           </svg>
         </div>
-        <input id="keyword" v-model="query.keyword" name="keyword" type="search" class="block w-full p-4 text-sm text-gray-900 border border-gray-300 rounded-lg ps-10 bg-gray-50 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="Search badges, names..." required>
+        <input id="keyword" v-model="query.keyword" name="keyword" type="search" class="block w-full p-4 text-sm text-gray-900 border border-gray-300 rounded-lg ps-10 bg-gray-50 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" :placeholder="t('search-text')" required>
         <input type="hidden" name="mode" :value="mode">
         <input type="hidden" name="ruleset" :value="ruleset">
         <input type="hidden" name="rankingSystem" :value="rankingSystem">
         <button type="submit" class="text-white absolute end-2.5 bottom-2.5 bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
-          Search
+          {{ t('search') }}
+          <icon name="ion:search-outline" class="w-4 h-4" />
         </button>
       </div>
     </form>
diff --git a/src/pages/index.vue b/src/pages/index.vue
index f35beb9a..a6604b95 100755
--- a/src/pages/index.vue
+++ b/src/pages/index.vue
@@ -57,7 +57,7 @@ fr-FR:
             {{ t('to-userpage') }}
           </t-nuxt-link-button>
           <t-nuxt-link-button class="btn-shadow" :to="{ name: 'me-settings' }" variant="secondary">
-            {{ $t('titles.settings').toLocaleLowerCase() }}
+            {{ $t('title.settings').toLocaleLowerCase() }}
           </t-nuxt-link-button>
         </template>
         <template v-else>
diff --git a/src/pages/leaderboard/[[mode]].vue b/src/pages/leaderboard/[[mode]].vue
index 5bfd94fc..f05de0f2 100755
--- a/src/pages/leaderboard/[[mode]].vue
+++ b/src/pages/leaderboard/[[mode]].vue
@@ -57,7 +57,10 @@ const queryLeaderboardValue = computed(() => ({
 const { pending, data: table } = await app.$client.rank.leaderboard.useQuery(queryLeaderboardValue)
 
 useHead({
-  title: () => ` ${selected.value.mode} | ${selected.value.ruleset} | ${selected.value.rankingSystem} - Leaderboard - ${app.$i18n.t('server.name')}`,
+  titleTemplate(title) {
+    return `${title} - ${app.$i18n.t(localeKey.server.name.__path__)}`
+  },
+  title: () => `${t(localeKey.mode(selected.value.mode))} | ${t(localeKey.ruleset(selected.value.ruleset))} | ${t(localeKey.rankingSystem(selected.value.rankingSystem))} - ${t(localeKey.title.leaderboard.__path__)}`,
 })
 
 function boundaryPage() {
@@ -112,7 +115,7 @@ fr-FR:
   <div class="flex flex-col h-full leaderboard custom-container mx-auto !max-w-4xl w-full">
     <header-simple-title-with-sub
       id="desc"
-      :title="$t('titles.leaderboard')"
+      :title="$t('title.leaderboard')"
       :subtitle="
         selected.mode
           && selected.ruleset
diff --git a/src/pages/me/relations.vue b/src/pages/me/relations.vue
index c081b127..50960c5a 100644
--- a/src/pages/me/relations.vue
+++ b/src/pages/me/relations.vue
@@ -27,23 +27,26 @@ const {
 
 const { t } = useI18n()
 
-useHead({
-  title: () => `Friends & Blocks - ${app$.$i18n.t('server.name')}`,
-})
 if (!relations.value) {
   throw new Error(t('user-not-found'))
 }
 
 const errorMessage = shallowRef('')
+const pendingUser = reactive(new Set<string>())
 
 onErrorCaptured((err) => {
   errorMessage.value = formatGucchoErrorWithT(t, err) || t('err-message')
 })
+
+useHead({
+  titleTemplate: title => `${title} - ${app$.$i18n.t(localeKey.server.name.__path__)}`,
+  title: () => `${app$.$i18n.t(localeKey.root.title.relations.__path__)}`,
+})
+
 function haveRelation(relation: Relationship, user: UserCompact<string> & UserRelationship) {
   return user.relationship.includes(relation)
 }
 
-const pendingUser = reactive(new Set<string>())
 async function toggleRelation(type: Relationship, user: UserCompact<string> & UserRelationship) {
   pendingUser.add(user.id)
   try {
diff --git a/src/pages/me/settings.vue b/src/pages/me/settings.vue
index 1ab8e542..2d4b6528 100755
--- a/src/pages/me/settings.vue
+++ b/src/pages/me/settings.vue
@@ -69,7 +69,8 @@ definePageMeta({
 })
 
 useHead({
-  title: () => `${t('titles.settings')} - ${app$.$i18n.t('server.name')}`,
+  title: () => t(localeKey.title.settings.__path__),
+  titleTemplate: title => `${title} - ${app$.$i18n.t(localeKey.server.name.__path__)}`,
 })
 
 const {
diff --git a/src/pages/score/[id].vue b/src/pages/score/[id].vue
index c4ad2add..4fa0abc1 100644
--- a/src/pages/score/[id].vue
+++ b/src/pages/score/[id].vue
@@ -7,6 +7,21 @@ const id = route.params.id
 
 const app$ = useNuxtApp()
 const data = await app$.$client.score.id.query({ id })
+
+useHead({
+
+  title() {
+    const uName = data.user.name
+    const bm = beatmapIsVisible(data.beatmap)
+      ? `${data.beatmap.beatmapset.meta.intl.artist} - ${data.beatmap.beatmapset.meta.intl.title}`
+      : 'unknown beatmap'
+
+    return `${uName} | ${bm}`
+  },
+
+  titleTemplate: title => `${title} - ${app$.$i18n.t(localeKey.server.name.__path__)}`,
+
+})
 </script>
 
 <template>
diff --git a/src/pages/status.vue b/src/pages/status.vue
index 215872a8..fc7e6b3c 100644
--- a/src/pages/status.vue
+++ b/src/pages/status.vue
@@ -50,6 +50,11 @@ const fmtCompact = new Intl.NumberFormat('en-US', {
   unit: 'megabyte',
   unitDisplay: 'narrow',
 })
+
+useHead({
+  title: () => t(localeKey.title.status.__path__),
+  titleTemplate: title => `${title} - ${t(localeKey.server.name.__path__)}`,
+})
 </script>
 
 <i18n lang="yaml">
diff --git a/src/pages/user/[handle].vue b/src/pages/user/[handle].vue
index 4059e1bf..12b808fa 100755
--- a/src/pages/user/[handle].vue
+++ b/src/pages/user/[handle].vue
@@ -36,7 +36,7 @@ useSeoMeta({
 })
 
 useHead({
-  titleTemplate: `%s - ${app.$i18n.t('server.name')}`,
+  titleTemplate: title => `${title} - ${app.$i18n.t('server.name')}`,
   title: () => page.user?.name || '',
 })