refine titles & translations

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])
         }
       }
     },

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

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

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" />

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

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: () => ({

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>

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',

src/locales/base/fr-FR.ts

@@ -1,21 +1,23 @@
 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)',
     [Rank.RankedScore]: 'Score Classé',
     [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

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: {

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,27 +14,23 @@ fr-FR:
       }"
       class="join-item"
     >
-      {{ t('titles.articles') }}
+      {{ $t(localeKey.title.articles.__path__) }}
     </t-nuxt-link-button>
     <t-nuxt-link-button
       :to="{
         name: 'admin-logs',
       }"
       class="join-item"
     >
-      {{ t('titles.logs') }}
+      {{ $t(localeKey.title.logs.__path__) }}
     </t-nuxt-link-button>
     <t-nuxt-link-button
       :to="{
         name: 'admin-users',
       }"
       class="join-item"
     >
-      {{ t('user-management') }}
+      {{ $t(localeKey.title['user-management'].__path__) }}
     </t-nuxt-link-button>
   </div>
 </template>
-
-<style scoped>
-
-</style>

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