sync: update from private repo (e62f5c7)

ui/src/components/settings/BrandingForm.tsx

@@ -1,4 +1,5 @@
 import { useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import { useQueryClient } from '@tanstack/react-query';
 import { HelpText } from './HelpText';
 import { FieldLabel, FieldInput } from './formUtils';
@@ -38,6 +39,7 @@ function AssetUploader({
   /** Called after a successful upload/delete with the new URL (null when cleared). */
   onChanged: (newUrl: string | null) => void;
 }) {
+  const { t } = useTranslation('settings');
   const fileRef = useRef<HTMLInputElement | null>(null);
   const [busy, setBusy] = useState(false);
   const [error, setError] = useState<string | null>(null);
@@ -47,7 +49,7 @@ function AssetUploader({
   const handleFile = async (file: File) => {
     setError(null);
     if (file.size > MAX_SIZE[kind]) {
-      setError(`ファイルサイズが上限 ${Math.round(MAX_SIZE[kind] / 1024)}KB を超えています`);
+      setError(t('branding.sizeExceeded', { kb: Math.round(MAX_SIZE[kind] / 1024) }));
       return;
     }
     try {
@@ -60,7 +62,7 @@ function AssetUploader({
       });
       const body = await res.json().catch(() => ({}));
       if (!res.ok) {
-        throw new Error(body.error ?? `アップロードに失敗しました (${res.status})`);
+        throw new Error(body.error ?? t('branding.uploadFailed', { status: res.status }));
       }
       onChanged(typeof body.url === 'string' ? body.url : null);
     } catch (e) {
@@ -76,7 +78,7 @@ function AssetUploader({
     try {
       setBusy(true);
       const res = await fetch(`/api/branding/upload?kind=${kind}`, { method: 'DELETE' });
-      if (!res.ok) throw new Error(`削除に失敗しました (${res.status})`);
+      if (!res.ok) throw new Error(t('branding.deleteFailed', { status: res.status }));
       onChanged(null);
     } catch (e) {
       setError(e instanceof Error ? e.message : String(e));
@@ -96,7 +98,7 @@ function AssetUploader({
           {currentUrl ? (
             <img src={currentUrl} alt="" className="h-full w-full object-contain" />
           ) : (
-            <span className="text-[10px] text-slate-400">未設定</span>
+            <span className="text-[10px] text-slate-400">{t('branding.notSet')}</span>
           )}
         </div>
         <div className="flex-1 min-w-0">
@@ -117,7 +119,7 @@ function AssetUploader({
               disabled={busy}
               className="px-2.5 h-7 text-2xs font-medium bg-canvas border border-hairline rounded-md text-slate-700 hover:bg-surface disabled:opacity-50 transition-colors"
             >
-              {currentUrl ? '差し替え' : 'アップロード'}
+              {currentUrl ? t('branding.replace') : t('branding.upload')}
             </button>
             {currentUrl && (
               <button
@@ -126,12 +128,12 @@ function AssetUploader({
                 disabled={busy}
                 className="px-2.5 h-7 text-2xs font-medium text-red-700 dark:text-red-300 border border-red-200 bg-canvas hover:bg-red-50 dark:hover:bg-red-500/15 rounded-md disabled:opacity-50 transition-colors"
               >
-                削除
+                {t('branding.delete')}
               </button>
             )}
           </div>
           <div className="text-[10px] text-slate-400 mt-1 truncate font-mono">
-            {currentUrl ?? `${ACCEPT[kind]} / 最大 ${Math.round(MAX_SIZE[kind] / 1024)}KB`}
+            {currentUrl ?? t('branding.accept', { accept: ACCEPT[kind], kb: Math.round(MAX_SIZE[kind] / 1024) })}
           </div>
         </div>
       </div>
@@ -141,6 +143,7 @@ function AssetUploader({
 }
 
 export function BrandingForm({ config, onChange }: SectionFormProps) {
+  const { t } = useTranslation('settings');
   const branding = config.branding ?? {};
   const primaryColor = branding.primaryColor ?? '';
   const qc = useQueryClient();
@@ -155,32 +158,30 @@ export function BrandingForm({ config, onChange }: SectionFormProps) {
 
   return (
     <div className="space-y-5">
-      <h2 className="text-base font-semibold text-slate-800">Branding</h2>
+      <h2 className="text-base font-semibold text-slate-800">{t('branding.title')}</h2>
       <p className="text-xs text-slate-500 -mt-3">
-        UI のタイトル・配色・ロゴ・フッターをカスタマイズします。設定は <code>config.yaml</code> の <code>branding</code> セクション、
-        画像は <code>data/branding/</code> に保存されます。どちらも <code>.gitignore</code> 済みで
-        <code> git pull</code> の影響を受けません。
+        {t('branding.intro')}
       </p>
 
       <div>
-        <FieldLabel>アプリ名</FieldLabel>
+        <FieldLabel>{t('branding.appName')}</FieldLabel>
         <FieldInput
           value={branding.appName ?? ''}
           onChange={v => onChange('branding.appName', v)}
           placeholder="MAESTRO"
         />
-        <HelpText>TopBar 左上と ブラウザタイトルに表示されます。</HelpText>
+        <HelpText>{t('branding.appNameHelp')}</HelpText>
       </div>
 
       <div>
-        <FieldLabel>プライマリカラー</FieldLabel>
+        <FieldLabel>{t('branding.primaryColor')}</FieldLabel>
         <div className="flex items-center gap-2">
           <input
             type="color"
             value={primaryColor || '#2563eb'}
             onChange={e => onChange('branding.primaryColor', e.target.value)}
             className="h-9 w-12 rounded border border-slate-300 p-0 cursor-pointer"
-            aria-label="プライマリカラー"
+            aria-label={t('branding.primaryColor')}
           />
           <input
             type="text"
@@ -190,47 +191,47 @@ export function BrandingForm({ config, onChange }: SectionFormProps) {
             className="flex-1 px-3 py-2 text-sm font-mono border border-slate-300 rounded-lg focus:ring-2 focus:ring-accent-ring focus:border-accent outline-none"
           />
         </div>
-        <HelpText>ヘッダーのアプリ名など、ブランドカラーに反映されます（hex / rgb）。</HelpText>
+        <HelpText>{t('branding.primaryColorHelp')}</HelpText>
       </div>
 
       <div>
-        <FieldLabel>ログイン画面の見出し</FieldLabel>
+        <FieldLabel>{t('branding.loginTitle')}</FieldLabel>
         <FieldInput
           value={branding.loginPageTitle ?? ''}
           onChange={v => onChange('branding.loginPageTitle', v)}
           placeholder="MAESTRO"
         />
-        <HelpText>未設定の場合はアプリ名を使用します。</HelpText>
+        <HelpText>{t('branding.loginTitleHelp')}</HelpText>
       </div>
 
       <div>
-        <FieldLabel>ロゴ</FieldLabel>
+        <FieldLabel>{t('branding.logo')}</FieldLabel>
         <AssetUploader
           kind="logo"
           currentUrl={branding.logoUrl || null}
           onChanged={handleAssetChange('logoUrl')}
         />
-        <HelpText>TopBar 左上に表示されます。未設定時はデフォルトのアイコンを使用します。</HelpText>
+        <HelpText>{t('branding.logoHelp')}</HelpText>
       </div>
 
       <div>
-        <FieldLabel>Favicon</FieldLabel>
+        <FieldLabel>{t('branding.favicon')}</FieldLabel>
         <AssetUploader
           kind="favicon"
           currentUrl={branding.faviconUrl || null}
           onChanged={handleAssetChange('faviconUrl')}
         />
-        <HelpText>ブラウザタブに表示されます。</HelpText>
+        <HelpText>{t('branding.faviconHelp')}</HelpText>
       </div>
 
       <div>
-        <FieldLabel>フッター文言</FieldLabel>
+        <FieldLabel>{t('branding.footer')}</FieldLabel>
         <FieldInput
           value={branding.footerText ?? ''}
           onChange={v => onChange('branding.footerText', v)}
           placeholder="© 2026 Your Team"
         />
-        <HelpText>画面最下部に小さく表示されます。未設定時は非表示。</HelpText>
+        <HelpText>{t('branding.footerHelp')}</HelpText>
       </div>
     </div>
   );