sync: update from private repo (e62f5c7)

ui/src/components/list/TaskListPanel.tsx

@@ -1,3 +1,4 @@
+import { useTranslation } from 'react-i18next';
 import { LocalTask } from '../../api';
 import { matchText } from '../../lib/utils';
 import { COLUMN_LIST, SortMode, StatusColumn } from '../../lib/urlState';
@@ -43,6 +44,7 @@ function ScopeToggle({
   allCount: number;
   onScopeChange: (scope: TaskScope) => void;
 }) {
+  const { t } = useTranslation('list');
   const seg = (value: TaskScope, label: string, count: number) => (
     <button
       type="button"
@@ -58,9 +60,9 @@ function ScopeToggle({
     </button>
   );
   return (
-    <div className="flex gap-0.5 p-0.5 mb-2 rounded-md bg-canvas border border-hairline" role="group" aria-label="タスクの表示範囲">
-      {seg('mine', '自分', mineCount)}
-      {seg('all', 'すべて', allCount)}
+    <div className="flex gap-0.5 p-0.5 mb-2 rounded-md bg-canvas border border-hairline" role="group" aria-label={t('scope.aria')}>
+      {seg('mine', t('scope.mine'), mineCount)}
+      {seg('all', t('scope.all'), allCount)}
     </div>
   );
 }
@@ -83,6 +85,7 @@ export function TaskListPanel({
   mode = 'list',
   onExitFocused,
 }: TaskListPanelProps) {
+  const { t } = useTranslation('list');
   // Owner scope is the outermost filter: status counts / search / sort all
   // operate on the scoped list so "自分" mode never counts others' tasks.
   const effectiveScope: TaskScope = scopeEnabled ? scope : 'all';
@@ -160,7 +163,7 @@ export function TaskListPanel({
         >
           <path d="M12 5v14M5 12h14" />
         </svg>
-        新しい依頼
+        {t('newRequest')}
       </button>
       {scopeEnabled && onScopeChange && (
         <ScopeToggle
@@ -171,12 +174,12 @@ export function TaskListPanel({
         />
       )}
       <div className="flex items-center gap-3 text-[10px] text-slate-500 px-0.5 pb-2.5 font-mono tabular-nums">
-        <span><span className="font-semibold text-slate-700">{totalCount}</span> 件</span>
+        <span><span className="font-semibold text-slate-700">{totalCount}</span> {t('counts.items')}</span>
         <span aria-hidden="true" className="text-slate-300">·</span>
-        <span><span className="font-semibold text-emerald-600">{runningCount}</span> 実行中</span>
-        <span><span className="font-semibold text-amber-600">{waitingCount}</span> 待機中</span>
+        <span><span className="font-semibold text-emerald-600">{runningCount}</span> {t('counts.running')}</span>
+        <span><span className="font-semibold text-amber-600">{waitingCount}</span> {t('counts.waiting')}</span>
         {failedCount > 0 && (
-          <span><span className="font-semibold text-red-600">{failedCount}</span> 失敗</span>
+          <span><span className="font-semibold text-red-600">{failedCount}</span> {t('counts.failed')}</span>
         )}
       </div>
       <FilterBar
@@ -199,7 +202,7 @@ export function TaskListPanel({
           />
         ))}
         {filtered.length === 0 && (
-          <div className="text-[13px] text-slate-500 px-2 py-3">スレッドがありません</div>
+          <div className="text-[13px] text-slate-500 px-2 py-3">{t('empty')}</div>
         )}
       </div>
     </div>