feat(i18n): expand coverage and harden locale handling (follow-up to #1765) (#1766)

Resolve outstanding translation gaps and PR-review findings on top of the
initial i18n landing.

Locale infrastructure
- Add LocaleContext/LocaleProvider so language changes from the dropdown
  apply immediately without a page refresh.
- Memoize the provider's context value (useMemo + useCallback) and reset
  the explicit-locale flag when user.id changes so cookie/navigator
  fallbacks are not permanently shadowed.
- Wire date-fns locale helpers through useDateFnsLocale across history,
  command, server-stat, and report components.

Translation completeness
- Translate every remaining English string surfaced in the bug reports:
  homepage, dashboard, dashboard/appeals, player pages, notifications,
  account/email, account/password, and the entire admin panel
  (servers, roles, webhooks, notification rules, documents, etc.).
- Add German messages for ~470 new keys and keep en.json/de.json at
  full key parity (562 keys each).

Translatability quality
- Replace sentence-splitting with single rich-text ICU keys that embed
  React components (<actor>, <punisher>, <player>, <badge>, <path>,
  <docs>) for the report header, appeal description, comment timestamps,
  punishment update messages, and push-notification setup steps.
- Use ICU select for permanent vs. temporary appeal grammar and ICU
  plural for player counts (active/past bans, mutes, warnings, notes,
  kicks, report records).
- Collapse concatenated page titles for account/email, account/password,
  and admin/servers/[id] into single parameterized keys.
- Standardize on common.permanent (drop duplicate pages.punishment.permanent)
  and rename actions.warn -> actions.warning to match the GraphQL type.

Bug fixes
- Fix t.rich rendering in PushNotificationButton by using rich-text tag
  syntax and a chunks-based render function instead of a placeholder.
- Drop the default-arg t() call in CommentWithUpload so t() is only
  invoked when no placeholder prop is supplied.
- Restore unrelated comments accidentally removed from ServerForm.

Backend
- Localize adminNavigation labels via the resolver and expose the
  locale on User type for client-side reconciliation.

Author: confuser

components/AdminLayout.js

@@ -1,6 +1,7 @@
 import Head from 'next/head'
 import Link from 'next/link'
 import { useRouter, withRouter } from 'next/router'
+import { useTranslations } from 'next-intl'
 import clsx from 'clsx'
 import { BiServer } from 'react-icons/bi'
 import { MdOutlineGroups, MdOutlineExitToApp, MdOutlineNotifications, MdLogout, MdSettings, MdWebhook, MdOutlineImage } from 'react-icons/md'
@@ -12,21 +13,24 @@ import SessionNavProfile from './SessionNavProfile'
 import { useApi, useUser } from '../utils'
 
 const icons = {
-  Documents: <MdOutlineImage />,
-  Roles: <MdOutlineGroups />,
-  Servers: <BiServer />,
-  'Notification Rules': <MdOutlineNotifications />,
-  Webhooks: <MdWebhook />
+  documents: <MdOutlineImage />,
+  roles: <MdOutlineGroups />,
+  servers: <BiServer />,
+  notificationRules: <MdOutlineNotifications />,
+  webhooks: <MdWebhook />
 }
 
 const AdminLayout = ({ children, title }) => {
+  const t = useTranslations()
+  const tNav = useTranslations('pages.admin.nav')
   const router = useRouter()
   const { user } = useUser({ redirectIfFound: false, redirectTo: '/login' })
   const { loading, data, errors } = useApi({
     query: `query navigation {
       adminNavigation {
         left {
           id
+          key
           name
           href
           label
@@ -39,10 +43,13 @@ const AdminLayout = ({ children, title }) => {
   if (errors || !data) return <ErrorLayout errors={errors} />
 
   const right = [<SessionNavProfile key='session-nav-profile' user={user} />]
-  const left = data.adminNavigation.left
+  const left = data.adminNavigation.left.map(item => ({
+    ...item,
+    name: item.key ? safeTranslate(tNav, item.key, item.name) : item.name
+  }))
   const mobileItems = left.slice()
 
-  mobileItems[mobileItems.length - 1].splitBorder = true
+  if (mobileItems.length) mobileItems[mobileItems.length - 1].splitBorder = true
 
   return (
     <>
@@ -59,7 +66,7 @@ const AdminLayout = ({ children, title }) => {
                   <div className='pt-6 ml-8'>
                     <div className='font-bold text-xl flex w-full'>
                       <span className='mx-4'>
-                        <Link href='/admin'>Admin</Link>
+                        <Link href='/admin'>{t('pages.admin.title')}</Link>
                       </span>
                       <Link href='/dashboard' passHref className='m-auto flex-grow text-right'>
                         <MdOutlineExitToApp className='inline-flex mx-5 hover:text-accent-200' />
@@ -68,15 +75,15 @@ const AdminLayout = ({ children, title }) => {
                   </div>
                   <nav className='mt-6 h-screen flex flex-col justify-between'>
                     <div className='h-full'>
-                      {left.map(({ href, name, label }) => {
+                      {left.map(({ href, name, key, label }) => {
                         const className = clsx('hover:text-accent-200 flex transition-colors text-gray-100 text-xl p-2 my-4', {
                           'border-l-4 border-accent-500': router.asPath === href
                         })
                         return (
                           (
                             <Link key={`${href}${name}`} href={href} passHref className={className}>
 
-                              {icons[name] && <span className='text-left m-auto'>{icons[name]}</span>}
+                              {icons[key] && <span className='text-left m-auto'>{icons[key]}</span>}
                               <span className='mx-4 text-base m-auto font-normal'>
                                 {name}
                               </span>
@@ -102,24 +109,24 @@ const AdminLayout = ({ children, title }) => {
                             <Avatar width='36' height='36' uuid={user.id} />
                             <div className='ml-4 text-sm'>
                               <div>{user.name}</div>
-                              <div>View Profile</div>
+                              <div>{t('pages.admin.layout.viewProfile')}</div>
                             </div>
 
                           </Link>
                         </div>
                       </div>
                       <div className='flex justify-evenly py-3 bg-gray-800'>
-                        <Link href='/notifications' title='Notifications'>
+                        <Link href='/notifications' title={t('pages.admin.layout.notifications')}>
 
                           <MdOutlineNotifications className='w-6 h-6' />
 
                         </Link>
-                        <Link href='/account' title='Settings'>
+                        <Link href='/account' title={t('pages.admin.layout.settings')}>
 
                           <MdSettings className='w-6 h-6' />
 
                         </Link>
-                        <Link href='/dashboard' title='Return'>
+                        <Link href='/dashboard' title={t('pages.admin.layout.return')}>
 
                           <MdLogout className='w-6 h-6' />
 
@@ -143,4 +150,16 @@ const AdminLayout = ({ children, title }) => {
   )
 }
 
+function safeTranslate (translator, key, fallback) {
+  if (typeof translator?.has === 'function' && !translator.has(key)) return fallback
+
+  try {
+    const value = translator(key)
+
+    return value === key ? fallback : value
+  } catch (_) {
+    return fallback
+  }
+}
+
 export default withRouter(AdminLayout)

components/CommentWithUpload.js

@@ -3,11 +3,13 @@ import { useState, useRef, useCallback, forwardRef, createContext, useContext, u
 import Uploady, { useUploady, useBatchAddListener, useItemProgressListener, useItemFinishListener, useItemErrorListener } from '@rpldy/uploady'
 import { usePasteUpload } from '@rpldy/upload-paste'
 import { FiPaperclip, FiX } from 'react-icons/fi'
+import { useTranslations } from 'next-intl'
 import clsx from 'clsx'
 
 const UploadContext = createContext(null)
 
 function FileChip ({ id, url, name, onRemove, progress, error }) {
+  const t = useTranslations('widgets.upload')
   const isUploading = progress !== undefined && progress < 100
   const displayName = name.length > 20 ? name.slice(0, 17) + '...' : name
 
@@ -37,7 +39,7 @@ function FileChip ({ id, url, name, onRemove, progress, error }) {
           error ? 'text-red-400' : 'text-gray-300'
         )}
       >
-        {error ? 'Failed' : isUploading ? 'Uploading...' : displayName}
+        {error ? t('failed') : isUploading ? t('uploading') : displayName}
       </span>
 
       {/* Delete button with proper touch target */}
@@ -49,7 +51,7 @@ function FileChip ({ id, url, name, onRemove, progress, error }) {
           'text-gray-400 hover:text-white hover:bg-red-500/80'
         )}
         type='button'
-        title='Remove'
+        title={t('remove')}
       >
         <FiX className='w-4 h-4' />
       </button>
@@ -68,6 +70,7 @@ function FileChip ({ id, url, name, onRemove, progress, error }) {
 }
 
 export function AttachButton ({ disabled }) {
+  const t = useTranslations('widgets.upload')
   const ctx = useContext(UploadContext)
   if (!ctx) return null
 
@@ -89,8 +92,8 @@ export function AttachButton ({ disabled }) {
         )}
       >
         <FiPaperclip className='w-4 h-4 flex-shrink-0' />
-        <span className='lg:hidden'>Add files</span>
-        <span className='hidden lg:inline'>Paste, drop, or click to add files</span>
+        <span className='lg:hidden'>{t('addFiles')}</span>
+        <span className='hidden lg:inline'>{t('addFilesLong')}</span>
       </button>
       {maxFiles > 0 && totalFiles > 0 && (
         <span className='text-xs text-gray-500'>
@@ -102,11 +105,12 @@ export function AttachButton ({ disabled }) {
 }
 
 const TextAreaWithUpload = forwardRef(function TextAreaWithUpload (props, ref) {
+  const t = useTranslations('widgets.upload')
   const {
     onDocumentsChange,
     documents = [],
     maxFiles = 3,
-    placeholder = 'Add your comment here...',
+    placeholder,
     maxLength = 250,
     minLength,
     required = false,
@@ -119,6 +123,7 @@ const TextAreaWithUpload = forwardRef(function TextAreaWithUpload (props, ref) {
     children,
     ...rest
   } = props
+  const resolvedPlaceholder = placeholder ?? t('commentPlaceholder')
 
   const containerRef = useRef(null)
   const uploady = useUploady()
@@ -175,7 +180,7 @@ const TextAreaWithUpload = forwardRef(function TextAreaWithUpload (props, ref) {
   })
 
   useItemErrorListener((item) => {
-    let errorMessage = 'Upload failed'
+    let errorMessage = t('uploadFailed')
     try {
       const response = item.uploadResponse?.data
       if (response?.error) {
@@ -283,7 +288,7 @@ const TextAreaWithUpload = forwardRef(function TextAreaWithUpload (props, ref) {
             ref={ref}
             value={value}
             onChange={onChange}
-            placeholder={placeholder}
+            placeholder={resolvedPlaceholder}
             maxLength={maxLength}
             minLength={minLength}
             required={required}
@@ -305,7 +310,7 @@ const TextAreaWithUpload = forwardRef(function TextAreaWithUpload (props, ref) {
                   key={docId}
                   id={docId}
                   url={`${process.env.BASE_PATH || ''}/api/documents/${docId}`}
-                  name={`Image ${idx + 1}`}
+                  name={t('imageName', { index: idx + 1 })}
                   onRemove={handleRemoveUploaded}
                 />
               ))}
@@ -323,7 +328,7 @@ const TextAreaWithUpload = forwardRef(function TextAreaWithUpload (props, ref) {
 
           {isDragging && (
             <div className='absolute inset-0 flex items-center justify-center bg-accent-500/20 rounded-3xl pointer-events-none'>
-              <span className='text-accent-400 font-medium'>Drop images here</span>
+              <span className='text-accent-400 font-medium'>{t('dropImages')}</span>
             </div>
           )}
         </div>

components/DocumentGallery.js

@@ -1,10 +1,12 @@
 /* eslint-disable @next/next/no-img-element */
 import { useState, useEffect } from 'react'
 import { FiTrash2 } from 'react-icons/fi'
+import { useTranslations } from 'next-intl'
 import Modal from './Modal'
 import { useMutateApi } from '../utils'
 
 function DocumentItem ({ document, onDelete, canDelete }) {
+  const t = useTranslations()
   const [confirmDelete, setConfirmDelete] = useState(false)
   const { load, loading, data, errors } = useMutateApi({
     query: `mutation deleteDocument($id: ID!) {
@@ -50,23 +52,23 @@ function DocumentItem ({ document, onDelete, canDelete }) {
             data-cy='document-delete'
             className='absolute top-2 right-2 p-1.5 bg-black/60 hover:bg-red-600 rounded-md text-white opacity-0 group-hover:opacity-100 transition-opacity'
             onClick={() => setConfirmDelete(true)}
-            title='Delete image'
+            title={t('pages.admin.documents.deleteImage')}
           >
             <FiTrash2 className='w-4 h-4' />
           </button>
         )}
       </div>
 
       <Modal
-        title='Delete Image'
-        confirmButton='Delete'
+        title={t('pages.admin.documents.deleteImageTitle')}
+        confirmButton={t('common.delete')}
         open={confirmDelete}
         onConfirm={handleDelete}
         onCancel={() => setConfirmDelete(false)}
         loading={loading}
       >
-        <p className='pb-1'>Are you sure you want to delete this image?</p>
-        <p className='pb-1 text-gray-400'>This action cannot be undone.</p>
+        <p className='pb-1'>{t('pages.admin.documents.deleteImageConfirm')}</p>
+        <p className='pb-1 text-gray-400'>{t('pages.punishment.actionUndoable')}</p>
         {errors && <p className='text-red-500 text-sm'>{errors[0]?.message}</p>}
       </Modal>
     </>

components/ErrorLayout.js

@@ -1,15 +1,18 @@
+import { useTranslations } from 'next-intl'
 import DefaultLayout from './DefaultLayout'
 import ErrorMessages from './ErrorMessages'
 import PageContainer from './PageContainer'
 import PageHeader from './PageHeader'
 import Panel from './Panel'
 
 export default function ErrorLayout ({ errors }) {
+  const t = useTranslations('errors')
+
   return (
-    <DefaultLayout title='Error'>
+    <DefaultLayout title={t('header')}>
       <PageContainer>
         <Panel className='mx-auto w-full max-w-md'>
-          <PageHeader subTitle='Error' title='Something went wrong' />
+          <PageHeader subTitle={t('header')} title={t('somethingWentWrong')} />
           <ErrorMessages errors={errors} />
         </Panel>
       </PageContainer>

components/LanguageSwitcher.js

@@ -1,5 +1,4 @@
 import { useState } from 'react'
-import { useRouter } from 'next/router'
 import { useTranslations } from 'next-intl'
 import { mutate } from 'swr'
 import { MdLanguage } from 'react-icons/md'
@@ -10,8 +9,7 @@ import {
   LOCALE_CONFIG,
   SUPPORTED_LOCALES,
   isSupportedLocale,
-  useResolvedLocale,
-  writeLocaleCookie
+  useResolvedLocale
 } from '../utils/locale'
 
 const setLocaleMutation = `
@@ -25,9 +23,8 @@ const setLocaleMutation = `
 
 export default function LanguageSwitcher ({ buttonClassName = '', variant = 'icon' }) {
   const t = useTranslations('widgets.languageSwitcher')
-  const router = useRouter()
   const { user } = useUser()
-  const { locale } = useResolvedLocale()
+  const { locale, setLocale } = useResolvedLocale()
   const [updating, setUpdating] = useState(false)
 
   const persistRemoteLocale = async (next) => {
@@ -56,7 +53,7 @@ export default function LanguageSwitcher ({ buttonClassName = '', variant = 'ico
     if (!isSupportedLocale(next) || next === locale || updating) return
 
     setUpdating(true)
-    writeLocaleCookie(next)
+    setLocale(next)
 
     try {
       if (user?.id) {
@@ -66,7 +63,6 @@ export default function LanguageSwitcher ({ buttonClassName = '', variant = 'ico
     } catch (err) {
       console.error('Failed to persist locale preference', err)
     } finally {
-      router.replace(router.asPath, undefined, { scroll: false })
       setUpdating(false)
     }
   }

components/NavigationOverlay.js

@@ -1,6 +1,7 @@
 import { createContext } from 'react'
 import { Transition } from '@headlessui/react'
 import { RemoveScroll } from 'react-remove-scroll'
+import { useTranslations } from 'next-intl'
 import clsx from 'clsx'
 
 const NavigationOverlayContext = createContext()
@@ -37,6 +38,8 @@ const NavigationOverlay = ({ children, drawerOpen, setDrawerOpen }) => {
 }
 
 const Header = ({ children }) => {
+  const t = useTranslations('nav')
+
   return (
     <NavigationOverlayContext.Consumer>
       {({ setDrawerOpen }) => (
@@ -47,7 +50,7 @@ const Header = ({ children }) => {
             </div>
             <div className='-mr-2'>
               <button type='button' className='rounded-md p-2 inline-flex items-center justify-center text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none' onClick={() => setDrawerOpen(false)}>
-                <span className='sr-only'>Close menu</span>
+                <span className='sr-only'>{t('closeMenu')}</span>
                 <svg className='h-6 w-6' xmlns='http:www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor' aria-hidden='true'>
                   <path strokeLinecap='round' strokeLinejoin='round' strokeWidth='2' d='M6 18L18 6M6 6l12 12' />
                 </svg>