Amélioration de l'ergonomie de l'interface et de la table de relecture

frontend/src/app/dashboard/reviews/[jobId]/page.tsx

@@ -10,6 +10,7 @@ import {
   FileUp,
   Loader2,
   Pencil,
+  Search,
   Undo2,
 } from 'lucide-react';
 import { apiClient, API_BASE_URL } from '@/lib/apiClient';
@@ -17,7 +18,6 @@ import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
 import { useToast } from '@/components/ui/toast';
 import { useI18n } from '@/lib/i18n';
-import { PageHeader } from '@/components/layout/page-header';
 import { cn } from '@/lib/utils';
 
 interface Segment {
@@ -90,7 +90,10 @@ export default function ReviewPage() {
   const [savingId, setSavingId] = useState<string | null>(null);
   const [isRebuilding, setIsRebuilding] = useState(false);
   const [approveArmed, setApproveArmed] = useState(false);
+  const [approvingProgress, setApprovingProgress] = useState<{ current: number; total: number } | null>(null);
   const [isImporting, setIsImporting] = useState(false);
+  const [statusFilter, setStatusFilter] = useState<'all' | 'pending' | 'approved' | 'edited'>('all');
+  const [searchQuery, setSearchQuery] = useState('');
   const fileInputRef = useRef<HTMLInputElement>(null);
 
   const load = useCallback(async () => {
@@ -107,7 +110,7 @@ export default function ReviewPage() {
     } finally {
       setIsLoading(false);
     }
-  }, [jobId]);
+  }, [jobId, t]);
 
   useEffect(() => {
     if (jobId) load();
@@ -120,6 +123,19 @@ export default function ReviewPage() {
     return { total: segments.length, pending, approved, edited };
   }, [segments]);
 
+  const filteredSegments = useMemo(() => {
+    return segments.filter((seg) => {
+      if (statusFilter !== 'all' && seg.status !== statusFilter) return false;
+      if (searchQuery.trim()) {
+        const q = searchQuery.toLowerCase();
+        const src = (seg.source_text || '').toLowerCase();
+        const tgt = (seg.reviewed_text || seg.translated_text || '').toLowerCase();
+        return src.includes(q) || tgt.includes(q);
+      }
+      return true;
+    });
+  }, [segments, statusFilter, searchQuery]);
+
   const patchSegment = async (
     id: string,
     body: { reviewed_text?: string; status?: string }
@@ -157,10 +173,16 @@ export default function ReviewPage() {
     }
     setApproveArmed(false);
     const pending = segments.filter((s) => s.status === 'pending');
-    for (const seg of pending) {
-      // sequential is fine — server-side each is a tiny PATCH
+    if (pending.length === 0) return;
+
+    setApprovingProgress({ current: 0, total: pending.length });
+    for (let i = 0; i < pending.length; i++) {
+      const seg = pending[i];
       await patchSegment(seg.id, { status: 'approved' });
+      setApprovingProgress({ current: i + 1, total: pending.length });
     }
+    setApprovingProgress(null);
+
     notify.success({
       title: t('reviews.approvedTitle'),
       description: t('reviews.approvedDesc', { count: pending.length }),
@@ -252,7 +274,7 @@ export default function ReviewPage() {
 
   return (
     <div className="space-y-6">
-      <div className="flex flex-wrap items-end justify-between gap-3">
+      <div className="flex flex-wrap items-end justify-between gap-4">
         <div>
           <span className="accent-pill mb-3 block w-fit">{t('reviews.pill')}</span>
           <h1 className="mb-2 text-3xl font-serif font-medium leading-tight tracking-tight text-brand-dark dark:text-white">
@@ -267,16 +289,34 @@ export default function ReviewPage() {
               edited: counts.edited,
             })}
           </p>
-          <p className="max-w-xl text-xs font-light text-brand-dark/50 dark:text-white/50">
+          <p className="max-w-xl text-xs font-light text-brand-dark/50 dark:text-white/50 mt-1">
             {t('reviews.xliffHint')}
           </p>
         </div>
+
         <div className="flex flex-wrap gap-2">
-          <Button variant={approveArmed ? 'default' : 'outline'} size="sm" onClick={approveAll} disabled={counts.pending === 0}>
-            <CheckCheck className="size-3.5" />
-            {approveArmed
-              ? t('reviews.approveAllConfirm', { count: counts.pending })
-              : t('reviews.approveAll')}
+          <Button
+            variant={approveArmed ? 'default' : 'outline'}
+            size="sm"
+            onClick={approveAll}
+            disabled={counts.pending === 0 || !!approvingProgress}
+          >
+            {approvingProgress ? (
+              <>
+                <Loader2 className="size-3.5 animate-spin" />
+                {t('reviews.approvingProgress', {
+                  current: approvingProgress.current,
+                  total: approvingProgress.total,
+                }) || `Approbation (${approvingProgress.current}/${approvingProgress.total})…`}
+              </>
+            ) : (
+              <>
+                <CheckCheck className="size-3.5" />
+                {approveArmed
+                  ? t('reviews.approveAllConfirm', { count: counts.pending })
+                  : t('reviews.approveAll')}
+              </>
+            )}
           </Button>
           <Button variant="outline" size="sm" onClick={exportXliff} disabled={!segments.length}>
             <FileDown className="size-3.5" /> XLIFF
@@ -313,119 +353,193 @@ export default function ReviewPage() {
         </div>
       )}
 
+      {/* ── Filtering and Search bar ──────────────────────────────── */}
+      {!isLoading && segments.length > 0 && (
+        <div className="flex flex-col sm:flex-row items-stretch sm:items-center justify-between gap-3 pt-2">
+          {/* Status tabs */}
+          <div className="flex flex-wrap gap-1.5 p-1 bg-brand-muted/70 dark:bg-white/5 rounded-xl border border-black/5 dark:border-white/10">
+            {[
+              { id: 'all', label: t('reviews.filter.all') || 'Tous', count: counts.total },
+              { id: 'pending', label: t('reviews.filter.pending') || 'À relire', count: counts.pending },
+              { id: 'approved', label: t('reviews.filter.approved') || 'Approuvés', count: counts.approved },
+              { id: 'edited', label: t('reviews.filter.edited') || 'Modifiés', count: counts.edited },
+            ].map((tab) => (
+              <button
+                key={tab.id}
+                type="button"
+                onClick={() => setStatusFilter(tab.id as any)}
+                className={cn(
+                  'px-3 py-1.5 rounded-lg text-xs font-bold transition-all flex items-center gap-2 cursor-pointer',
+                  statusFilter === tab.id
+                    ? 'bg-white dark:bg-[#1a1a1a] text-brand-dark dark:text-white shadow-sm'
+                    : 'text-brand-dark/50 dark:text-white/50 hover:text-brand-dark dark:hover:text-white'
+                )}
+              >
+                <span>{tab.label}</span>
+                <span className={cn(
+                  'text-[10px] px-1.5 py-0.5 rounded-full font-semibold',
+                  statusFilter === tab.id
+                    ? 'bg-brand-accent/20 text-brand-goldink dark:text-brand-accent'
+                    : 'bg-black/5 dark:bg-white/10'
+                )}>
+                  {tab.count}
+                </span>
+              </button>
+            ))}
+          </div>
+
+          {/* Search box */}
+          <div className="relative min-w-[220px] max-w-sm">
+            <input
+              type="text"
+              placeholder={t('reviews.searchPlaceholder') || 'Rechercher dans les segments...'}
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              className="w-full text-xs px-3 py-2 pl-8 rounded-xl bg-white dark:bg-[#141414] border border-black/10 dark:border-white/10 text-brand-dark dark:text-white placeholder:text-brand-dark/30 dark:placeholder:text-white/30 outline-none focus:border-brand-accent/60"
+            />
+            <Search size={14} className="absolute left-2.5 top-1/2 -translate-y-1/2 text-brand-dark/40 dark:text-white/40 pointer-events-none" />
+          </div>
+        </div>
+      )}
+
       {isLoading ? (
         <div className="flex items-center justify-center py-16">
           <Loader2 className="size-6 animate-spin text-muted-foreground" />
         </div>
       ) : (
-        <div className="overflow-hidden rounded-lg border border-border">
+        <div className="overflow-hidden rounded-xl border border-black/10 dark:border-white/10 bg-white dark:bg-[#141414] shadow-sm">
           <table className="w-full text-sm">
-            <thead className="bg-muted/50 text-left text-xs uppercase tracking-wide text-muted-foreground">
+            <thead className="bg-brand-muted/40 dark:bg-white/5 text-left text-xs uppercase tracking-wider text-brand-dark/50 dark:text-white/50 border-b border-black/5 dark:border-white/5">
               <tr>
-                <th className="w-1/2 px-4 py-2.5 font-medium">{t('reviews.col.source')}</th>
-                <th className="w-1/2 px-4 py-2.5 font-medium">{t('reviews.col.target')}</th>
-                <th className="w-40 px-4 py-2.5 font-medium">{t('reviews.col.status')}</th>
+                <th className="w-1/2 px-4 py-3 font-semibold">{t('reviews.col.source')}</th>
+                <th className="w-1/2 px-4 py-3 font-semibold">{t('reviews.col.target')}</th>
+                <th className="w-40 px-4 py-3 font-semibold">{t('reviews.col.status')}</th>
               </tr>
             </thead>
             <tbody>
-              {segments.map((seg) => {
-                const isEditing = editingId === seg.id;
-                const finalText = seg.status === 'edited' && seg.reviewed_text
-                  ? seg.reviewed_text
-                  : seg.translated_text;
-                return (
-                  <tr key={seg.id} className="border-t border-border align-top">
-                    <td className="px-4 py-3 text-muted-foreground">
-                      {seg.source_text}
-                    </td>
-                    <td className="px-4 py-3">
-                      {isEditing ? (
-                        <div className="space-y-2">
-                          <textarea
-                            className="min-h-20 w-full rounded-md border border-input bg-background px-3 py-2 text-foreground focus:outline-none focus:ring-2 focus:ring-ring"
-                            value={draft}
-                            onChange={(e) => setDraft(e.target.value)}
-                          />
-                          <div className="flex gap-2">
-                            <Button
-                              size="sm"
-                              disabled={savingId === seg.id || !draft.trim()}
-                              onClick={async () => {
-                                await patchSegment(seg.id, {
-                                  reviewed_text: draft,
-                                  status: 'edited',
-                                });
-                                setEditingId(null);
+              {filteredSegments.length === 0 ? (
+                <tr>
+                  <td colSpan={3} className="px-4 py-12 text-center text-xs text-brand-dark/40 dark:text-white/40 italic">
+                    {t('reviews.noMatchingSegments') || 'Aucun segment ne correspond à votre filtre.'}
+                  </td>
+                </tr>
+              ) : (
+                filteredSegments.map((seg) => {
+                  const isEditing = editingId === seg.id;
+                  const finalText = seg.status === 'edited' && seg.reviewed_text
+                    ? seg.reviewed_text
+                    : seg.translated_text;
+                  return (
+                    <tr key={seg.id} className="border-t border-black/5 dark:border-white/5 align-top hover:bg-brand-muted/20 dark:hover:bg-white/[0.02] transition-colors">
+                      <td className="px-4 py-3 text-brand-dark/70 dark:text-white/70 leading-relaxed">
+                        {seg.source_text}
+                      </td>
+                      <td className="px-4 py-3">
+                        {isEditing ? (
+                          <div className="space-y-2">
+                            <textarea
+                              className="min-h-20 w-full rounded-lg border border-black/10 dark:border-white/10 bg-brand-muted/20 dark:bg-black/20 px-3 py-2 text-foreground focus:outline-none focus:ring-2 focus:ring-brand-accent/40 text-sm leading-relaxed"
+                              value={draft}
+                              onChange={(e) => setDraft(e.target.value)}
+                              onKeyDown={(e) => {
+                                if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') {
+                                  e.preventDefault();
+                                  if (draft.trim() && savingId !== seg.id) {
+                                    patchSegment(seg.id, {
+                                      reviewed_text: draft,
+                                      status: 'edited',
+                                    });
+                                    setEditingId(null);
+                                  }
+                                }
                               }}
-                            >
-                              {savingId === seg.id ? (
-                                <Loader2 className="size-3.5 animate-spin" />
-                              ) : (
-                                <Check className="size-3.5" />
-                              )}
-                              {t('reviews.save')}
-                            </Button>
-                            <Button
-                              size="sm"
-                              variant="ghost"
-                              onClick={() => setEditingId(null)}
-                            >
-                              {t('reviews.cancel')}
-                            </Button>
+                            />
+                            <div className="flex items-center justify-between">
+                              <div className="flex gap-2">
+                                <Button
+                                  size="sm"
+                                  disabled={savingId === seg.id || !draft.trim()}
+                                  onClick={async () => {
+                                    await patchSegment(seg.id, {
+                                      reviewed_text: draft,
+                                      status: 'edited',
+                                    });
+                                    setEditingId(null);
+                                  }}
+                                >
+                                  {savingId === seg.id ? (
+                                    <Loader2 className="size-3.5 animate-spin" />
+                                  ) : (
+                                    <Check className="size-3.5" />
+                                  )}
+                                  {t('reviews.save')}
+                                </Button>
+                                <Button
+                                  size="sm"
+                                  variant="ghost"
+                                  onClick={() => setEditingId(null)}
+                                >
+                                  {t('reviews.cancel')}
+                                </Button>
+                              </div>
+                              <span className="text-[10px] text-brand-dark/40 dark:text-white/40 italic hidden sm:inline">
+                                {t('reviews.shortcutHint') || 'Ctrl + Entrée pour enregistrer'}
+                              </span>
+                            </div>
                           </div>
-                        </div>
-                      ) : (
-                        <div
-                          className={cn(
-                            'whitespace-pre-wrap',
-                            seg.status === 'edited' && 'text-blue-600 dark:text-blue-400'
-                          )}
-                        >
-                          {finalText || <span className="italic text-muted-foreground">{t('reviews.emptyCell')}</span>}
-                        </div>
-                      )}
-                    </td>
-                    <td className="px-4 py-3">
-                      <div className="flex flex-col items-start gap-2">
-                        {statusBadge(seg.status)}
-                        {!isEditing && (
-                          <div className="flex flex-wrap gap-1">
-                            <Button
-                              size="sm"
-                              variant="ghost"
-                              className="h-7 gap-1 px-2 text-[11px]"
-                              onClick={() => {
-                                setEditingId(seg.id);
-                                setDraft(finalText);
-                              }}
-                            >
-                              <Pencil className="size-3" /> {t('reviews.action.edit')}
-                            </Button>
-                            <Button
-                              size="sm"
-                              variant="ghost"
-                              className="h-7 gap-1 px-2 text-[11px]"
-                              disabled={seg.status === 'approved' || savingId === seg.id}
-                              onClick={() => patchSegment(seg.id, { status: 'approved' })}
-                            >
-                              <Check className="size-3" /> {t('reviews.action.approveShort')}
-                            </Button>
-                            <Button
-                              size="sm"
-                              variant="ghost"
-                              className="h-7 gap-1 px-2 text-[11px]"
-                              disabled={seg.status === 'pending'}
-                              onClick={() => patchSegment(seg.id, { status: 'pending' })}
-                            >
-                              <Undo2 className="size-3" /> {t('reviews.action.resetShort')}
-                            </Button>
+                        ) : (
+                          <div
+                            className={cn(
+                              'whitespace-pre-wrap leading-relaxed',
+                              seg.status === 'edited' ? 'text-blue-600 dark:text-blue-400 font-medium' : 'text-brand-dark dark:text-white'
+                            )}
+                          >
+                            {finalText || <span className="italic text-muted-foreground">{t('reviews.emptyCell')}</span>}
                           </div>
                         )}
-                      </div>
-                    </td>
-                  </tr>
-                );
-              })}
+                      </td>
+                      <td className="px-4 py-3">
+                        <div className="flex flex-col items-start gap-2">
+                          {statusBadge(seg.status)}
+                          {!isEditing && (
+                            <div className="flex flex-wrap gap-1">
+                              <Button
+                                size="sm"
+                                variant="ghost"
+                                className="h-7 gap-1 px-2 text-[11px]"
+                                onClick={() => {
+                                  setEditingId(seg.id);
+                                  setDraft(finalText);
+                                }}
+                              >
+                                <Pencil className="size-3" /> {t('reviews.action.edit')}
+                              </Button>
+                              <Button
+                                size="sm"
+                                variant="ghost"
+                                className="h-7 gap-1 px-2 text-[11px]"
+                                disabled={seg.status === 'approved' || savingId === seg.id}
+                                onClick={() => patchSegment(seg.id, { status: 'approved' })}
+                              >
+                                <Check className="size-3" /> {t('reviews.action.approveShort')}
+                              </Button>
+                              <Button
+                                size="sm"
+                                variant="ghost"
+                                className="h-7 gap-1 px-2 text-[11px]"
+                                disabled={seg.status === 'pending'}
+                                onClick={() => patchSegment(seg.id, { status: 'pending' })}
+                              >
+                                <Undo2 className="size-3" /> {t('reviews.action.resetShort')}
+                              </Button>
+                            </div>
+                          )}
+                        </div>
+                      </td>
+                    </tr>
+                  );
+                })
+              )}
             </tbody>
           </table>
         </div>