#428

frontend/src/pages/help/HelpChangesPage.tsx

@@ -11,6 +11,7 @@ import { SITE_TITLE } from '@/config'
 import { getHelpChanges, helpEditionDate } from '@/lib/help'
 import { localeLanguage } from '@/lib/locales'
 import { useLocale } from '@/lib/useLocale'
+import { useUITranslation } from '@/lib/useUITranslation'
 import { helpKeys } from '@/lib/queryKeys'
 import { LIST_LIMIT_OPTIONS } from '@/lib/settings'
 import { dateString } from '@/lib/utils'
@@ -19,6 +20,7 @@ import type { FC } from 'react'
 
 
 const HelpChangesPage: FC = () => {
+  const { message, label } = useUITranslation ('help')
   const language = localeLanguage (useLocale ())
   const [searchParams, setSearchParams] = useSearchParams ()
   const identifier = searchParams.get ('identifier') ?? ''
@@ -51,12 +53,12 @@ const HelpChangesPage: FC = () => {
   return (
       <MainArea className="min-w-0 max-w-full">
 	<Helmet>
-	  <title>{`ヘルプ改定履歴 | ${ SITE_TITLE }`}</title>
+	  <title>{message ('history').text} | {SITE_TITLE}</title>
 	</Helmet>
 	<div className="flex flex-wrap items-center justify-between gap-3">
-	  <PageTitle>ヘルプ改定履歴</PageTitle>
+	  <PageTitle>{label ('history')}</PageTitle>
 	  <label className="flex items-center gap-2 text-xs text-muted-foreground">
-	    <span>件数</span>
+	    <span>{label ('common:countLabel')}</span>
 	    <select value={limit} onChange={ev => handleLimit (ev.target.value)}
 		className="rounded border border-border bg-background px-2 py-1 text-sm
 			   text-foreground">
@@ -67,7 +69,7 @@ const HelpChangesPage: FC = () => {
 	</div>
 
 	{isLoading
-	 ? <p className="mt-4">読み込み中...</p>
+	 ? <p className="mt-4">{label ('shared:messages.loading')}</p>
 	 : (error
 	    ? <p className="mt-4 text-red-600" role="alert">{error.message}</p>
 	    : (
@@ -77,9 +79,9 @@ const HelpChangesPage: FC = () => {
 				      border-collapse">
 		      <thead className="border-b-2 border-black dark:border-white">
 			<tr>
-			  <th className="p-2 text-left">差分</th>
-			  <th className="p-2 text-left">タイトル</th>
-			  <th className="p-2 text-left">有効開始年月日</th>
+			  <th className="p-2 text-left">{label ('shared:actions.diff')}</th>
+			  <th className="p-2 text-left">{label ('shared:labels.title')}</th>
+			  <th className="p-2 text-left">{label ('effectiveSince')}</th>
 			</tr>
 		      </thead>
 		      <tbody>
@@ -97,7 +99,7 @@ const HelpChangesPage: FC = () => {
 				<td className="p-2">
 				  {entry.pred != null && (
 				      <PrefetchLink to={diffTo}>
-					差分
+					{label ('shared:actions.diff')}
 				      </PrefetchLink>)}
 				</td>
 				<td className="p-2">