@hed-hog/lms 0.0.366 → 0.0.370

package/hedhog/frontend/app/courses/[id]/structure/_components/detail-lesson.tsx.ejs

@@ -2,28 +2,40 @@
 
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
 import { Separator } from '@/components/ui/separator';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import { cn } from '@/lib/utils';
+import { useApp, useQuery } from '@hed-hog/next-app-provider';
 import { useQueryClient } from '@tanstack/react-query';
 import {
   Clock,
   ExternalLink,
   FileText,
   HelpCircle,
+  Languages,
   Loader2,
   Mic,
   Paperclip,
+  Plus,
+  Trash2,
   Video,
+  X,
   type LucideIcon,
 } from 'lucide-react';
+import Link from 'next/link';
 import { useEffect, useState } from 'react';
 import { toast } from 'sonner';
 import { useLmsSettingsQuery } from '../_data/use-lms-settings-query';
 import {
+  useDeleteTranscriptionLocaleMutation,
   useStartTranscriptionMutation,
+  useTranscriptionLocalesQuery,
   useTranscriptionSegmentsQuery,
+  useTranslateTranscriptionMutation,
+  type TranscriptionLocale,
 } from '../_data/use-transcription-segments';
+import { LessonVideoPreview } from './lesson-video-preview';
 import { LessonXpTab } from './detail-lesson-xp-tab';
 import { useStructureStore } from './store';
 import type { LessonType } from './types';
@@ -69,7 +81,15 @@ export function DetailLesson({ lessonId }: DetailLessonProps) {
     s.lessons.find((l) => l.id === lessonId)
   );
   const [activeTab, setActiveTab] = useState('dados');
+  const [selectedLocaleId, setSelectedLocaleId] = useState<number | null | undefined>(undefined);
+  const [translateOpen, setTranslateOpen] = useState(false);
+  const [targetLocaleId, setTargetLocaleId] = useState<number | null>(null);
+  const [activeTranslationJob, setActiveTranslationJob] = useState<{
+    queueJobId: number;
+    targetLocaleName: string;
+  } | null>(null);
   const lmsSettings = useLmsSettingsQuery();
+  const { request } = useApp();
 
   useEffect(() => {
     if (!lmsSettings.transcriptionEnabled && activeTab === 'transcription') {
@@ -77,16 +97,77 @@ export function DetailLesson({ lessonId }: DetailLessonProps) {
     }
   }, [lmsSettings.transcriptionEnabled, activeTab]);
 
+  const isTranscriptionActive = activeTab === 'transcription' || activeTab === 'xp';
+  const activeLessonId = isTranscriptionActive ? (lesson?.id ?? null) : null;
+
+  const { data: transcriptionLocales = [], refetch: refetchLocales } =
+    useTranscriptionLocalesQuery(activeLessonId);
+
+  useEffect(() => {
+    if (transcriptionLocales.length > 0 && selectedLocaleId === undefined) {
+      setSelectedLocaleId(transcriptionLocales[0]?.id ?? null);
+    }
+    if (transcriptionLocales.length === 0 && selectedLocaleId !== undefined) {
+      setSelectedLocaleId(undefined);
+    }
+  }, [transcriptionLocales, selectedLocaleId]);
+
   const { data: segments = [], isLoading: segmentsLoading } =
-    useTranscriptionSegmentsQuery(
-      activeTab === 'transcription' || activeTab === 'xp'
-        ? (lesson?.id ?? null)
-        : null
-    );
+    useTranscriptionSegmentsQuery(activeLessonId, selectedLocaleId);
+
+  const { data: allLocales = [] } = useQuery<TranscriptionLocale[]>({
+    queryKey: ['all-locales'],
+    queryFn: async () => {
+      const res = await request<{ data: TranscriptionLocale[] }>({
+        url: '/core/locales?limit=200',
+        method: 'GET',
+      });
+      return (res.data?.data ?? []) as TranscriptionLocale[];
+    },
+    enabled: translateOpen,
+    initialData: [],
+  });
+
+  const availableTargetLocales = allLocales.filter(
+    (l) => l.id !== null && !transcriptionLocales.some((tl) => tl.id === l.id),
+  );
 
   const queryClient = useQueryClient();
+  const showConfirm = useStructureStore((s) => s.showConfirm);
   const { mutate: startTranscription, isPending: isStarting } =
     useStartTranscriptionMutation(lesson?.id ?? null);
+  const { mutate: translateTranscription, isPending: isTranslating } =
+    useTranslateTranscriptionMutation(lesson?.id ?? null);
+  const { mutate: deleteTranscriptionLocale } =
+    useDeleteTranscriptionLocaleMutation(lesson?.id ?? null);
+
+  const handleDeleteLocale = (loc: TranscriptionLocale) => {
+    const name = loc.name ?? loc.code ?? 'este idioma';
+    showConfirm({
+      title: 'Excluir transcrição',
+      description: `Excluir a transcrição/tradução em "${name}" desta aula? Esta ação não pode ser desfeita.`,
+      confirmText: 'Excluir',
+      destructive: true,
+      onConfirm: () => {
+        deleteTranscriptionLocale(loc.id, {
+          onSuccess: () => {
+            toast.success('Transcrição excluída.');
+            if (selectedLocaleId === loc.id) setSelectedLocaleId(undefined);
+            refetchLocales();
+            queryClient.invalidateQueries({
+              queryKey: ['lesson-transcription-locales', lesson?.id],
+            });
+            queryClient.invalidateQueries({
+              queryKey: ['lesson-transcription-segments', lesson?.id],
+            });
+          },
+          onError: (err) => {
+            toast.error(err.message || 'Erro ao excluir a transcrição.');
+          },
+        });
+      },
+    });
+  };
 
   const handleStartTranscription = () => {
     startTranscription({
@@ -95,6 +176,9 @@ export function DetailLesson({ lessonId }: DetailLessonProps) {
         queryClient.invalidateQueries({
           queryKey: ['lesson-transcription-segments', lesson?.id],
         });
+        queryClient.invalidateQueries({
+          queryKey: ['lesson-transcription-locales', lesson?.id],
+        });
       },
       onError: (err) => {
         toast.error(err.message || 'Erro ao iniciar a transcrição.');
@@ -102,6 +186,32 @@ export function DetailLesson({ lessonId }: DetailLessonProps) {
     });
   };
 
+  const handleTranslate = () => {
+    if (!targetLocaleId) return;
+    const targetName =
+      availableTargetLocales.find((l) => l.id === targetLocaleId)?.name ?? String(targetLocaleId);
+    translateTranscription(targetLocaleId, selectedLocaleId ?? null, {
+      onSuccess: (result) => {
+        toast.success('Tradução iniciada! Acompanhe o progresso na fila.');
+        setTranslateOpen(false);
+        setTargetLocaleId(null);
+        setActiveTranslationJob({ queueJobId: result.queueJobId, targetLocaleName: targetName });
+        setTimeout(() => {
+          refetchLocales();
+          queryClient.invalidateQueries({
+            queryKey: ['lesson-transcription-segments', lesson?.id],
+          });
+          queryClient.invalidateQueries({
+            queryKey: ['lesson-transcription-locales', lesson?.id],
+          });
+        }, 2000);
+      },
+      onError: (err) => {
+        toast.error(err.message || 'Erro ao iniciar a tradução.');
+      },
+    });
+  };
+
   if (!lesson) return null;
 
   const cfg = LESSON_TYPE_CONFIG[lesson.type];
@@ -142,6 +252,9 @@ export function DetailLesson({ lessonId }: DetailLessonProps) {
       >
         <TabsList className="mx-4 mt-3 w-auto justify-start shrink-0">
           <TabsTrigger value="dados">Dados</TabsTrigger>
+          {lesson.type === 'video' && (
+            <TabsTrigger value="conteudo">Conteúdo</TabsTrigger>
+          )}
           {lmsSettings.transcriptionEnabled && (
             <TabsTrigger value="transcription">Transcrição</TabsTrigger>
           )}
@@ -243,27 +356,160 @@ export function DetailLesson({ lessonId }: DetailLessonProps) {
           </div>
         </TabsContent>
 
+        {/* ── Conteúdo (player de vídeo) ───────────────────────────────────── */}
+        {lesson.type === 'video' && (
+          <TabsContent
+            value="conteudo"
+            className="flex-1 overflow-y-auto px-4 pb-4 mt-3"
+          >
+            {activeTab === 'conteudo' && (
+              <LessonVideoPreview lessonId={lesson.id} />
+            )}
+          </TabsContent>
+        )}
+
         {/* ── Transcrição ───────────────────────────────────────────────────── */}
         {lmsSettings.transcriptionEnabled && (
           <TabsContent
             value="transcription"
             className="flex-1 overflow-y-auto px-4 pb-4 mt-3"
           >
-            <div className="flex justify-end mb-3">
-              <Button
-                size="sm"
-                variant="outline"
-                onClick={handleStartTranscription}
-                disabled={isStarting}
-              >
-                {isStarting ? (
-                  <Loader2 className="size-4 mr-2 animate-spin" />
-                ) : (
-                  <Mic className="size-4 mr-2" />
+            {/* Banner de job de tradução ativo */}
+            {activeTranslationJob && (
+              <div className="flex items-center justify-between gap-2 mb-3 rounded-md border border-amber-200 bg-amber-50 dark:border-amber-800 dark:bg-amber-950/30 px-3 py-2 text-sm">
+                <div className="flex items-center gap-2 min-w-0">
+                  <Loader2 className="size-4 shrink-0 animate-spin text-amber-600 dark:text-amber-400" />
+                  <span className="text-amber-900 dark:text-amber-200 truncate">
+                    Tradução para{' '}
+                    <strong>{activeTranslationJob.targetLocaleName}</strong> em andamento
+                    {' '}· Job #{activeTranslationJob.queueJobId}
+                  </span>
+                </div>
+                <div className="flex items-center gap-2 shrink-0">
+                  <Link
+                    href="/queue/jobs"
+                    className="text-xs text-amber-700 dark:text-amber-300 underline underline-offset-2 hover:text-amber-900 dark:hover:text-amber-100"
+                  >
+                    Ver na fila →
+                  </Link>
+                  <button
+                    onClick={() => setActiveTranslationJob(null)}
+                    className="text-amber-600 dark:text-amber-400 hover:text-amber-900 dark:hover:text-amber-100"
+                  >
+                    <X className="size-3.5" />
+                  </button>
+                </div>
+              </div>
+            )}
+
+            {/* Toolbar */}
+            <div className="flex items-center justify-between gap-2 mb-3 flex-wrap">
+              {/* Locale pills */}
+              <div className="flex items-center gap-1.5 flex-wrap">
+                {transcriptionLocales.map((loc) => (
+                  <div
+                    key={loc.id ?? 'null'}
+                    className={cn(
+                      'flex items-center gap-1 rounded-full pl-2.5 pr-1 py-0.5 text-xs font-medium border transition-colors',
+                      selectedLocaleId === loc.id
+                        ? 'bg-primary text-primary-foreground border-primary'
+                        : 'bg-muted text-muted-foreground border-border hover:border-primary/50',
+                    )}
+                  >
+                    <button
+                      onClick={() => setSelectedLocaleId(loc.id)}
+                      className="flex items-center gap-1"
+                    >
+                      <Languages className="size-3" />
+                      {loc.name ?? loc.code ?? 'Desconhecido'}
+                    </button>
+                    <button
+                      onClick={() => handleDeleteLocale(loc)}
+                      title="Excluir transcrição deste idioma"
+                      className={cn(
+                        'rounded-full p-0.5 transition-colors',
+                        selectedLocaleId === loc.id
+                          ? 'hover:bg-primary-foreground/20'
+                          : 'hover:bg-foreground/10',
+                      )}
+                    >
+                      <Trash2 className="size-3" />
+                    </button>
+                  </div>
+                ))}
+              </div>
+
+              {/* Action buttons */}
+              <div className="flex items-center gap-2 shrink-0">
+                {transcriptionLocales.length > 0 && (
+                  <Popover open={translateOpen} onOpenChange={setTranslateOpen}>
+                    <PopoverTrigger asChild>
+                      <Button size="sm" variant="outline" disabled={isTranslating}>
+                        {isTranslating ? (
+                          <Loader2 className="size-4 mr-2 animate-spin" />
+                        ) : (
+                          <Plus className="size-4 mr-2" />
+                        )}
+                        Traduzir
+                      </Button>
+                    </PopoverTrigger>
+                    <PopoverContent className="w-64 p-3" align="end">
+                      <p className="text-xs font-medium mb-2 text-muted-foreground">
+                        Traduzir para:
+                      </p>
+                      {availableTargetLocales.length === 0 ? (
+                        <p className="text-xs text-muted-foreground">
+                          Todos os idiomas disponíveis já foram traduzidos.
+                        </p>
+                      ) : (
+                        <div className="flex flex-col gap-1">
+                          {availableTargetLocales.map((loc) => (
+                            <button
+                              key={loc.id}
+                              onClick={() => setTargetLocaleId(loc.id)}
+                              className={cn(
+                                'flex items-center gap-2 rounded-md px-2 py-1.5 text-sm text-left transition-colors',
+                                targetLocaleId === loc.id
+                                  ? 'bg-primary text-primary-foreground'
+                                  : 'hover:bg-muted',
+                              )}
+                            >
+                              {loc.name ?? loc.code}
+                            </button>
+                          ))}
+                          <Button
+                            size="sm"
+                            className="mt-2 w-full"
+                            disabled={!targetLocaleId || isTranslating}
+                            onClick={handleTranslate}
+                          >
+                            {isTranslating && (
+                              <Loader2 className="size-4 mr-2 animate-spin" />
+                            )}
+                            Confirmar tradução
+                          </Button>
+                        </div>
+                      )}
+                    </PopoverContent>
+                  </Popover>
                 )}
-                Iniciar transcrição
-              </Button>
+                <Button
+                  size="sm"
+                  variant="outline"
+                  onClick={handleStartTranscription}
+                  disabled={isStarting}
+                >
+                  {isStarting ? (
+                    <Loader2 className="size-4 mr-2 animate-spin" />
+                  ) : (
+                    <Mic className="size-4 mr-2" />
+                  )}
+                  Iniciar transcrição
+                </Button>
+              </div>
             </div>
+
+            {/* Segment list */}
             {segmentsLoading ? (
               <div className="p-4 text-sm text-muted-foreground">
                 Carregando transcrição...
@@ -284,7 +530,9 @@ export function DetailLesson({ lessonId }: DetailLessonProps) {
               <EmptyState
                 icon={<FileText className="size-8 text-muted-foreground/40" />}
               >
-                Transcrição não disponível para esta aula.
+                {transcriptionLocales.length === 0
+                  ? 'Transcrição não disponível para esta aula.'
+                  : 'Nenhum segmento encontrado para este idioma.'}
               </EmptyState>
             )}
           </TabsContent>

package/hedhog/frontend/app/courses/[id]/structure/_components/editor-bulk.tsx.ejs

@@ -1,15 +1,6 @@
 'use client';
 
-import {
-  Eye,
-  EyeOff,
-  FolderInput,
-  Layers,
-  Lock,
-  Save,
-  Video,
-  X,
-} from 'lucide-react';
+import { FolderInput, Layers, Loader2, Save, Video, X } from 'lucide-react';
 import { useTranslations } from 'next-intl';
 import { useState } from 'react';
 import { toast } from 'sonner';
@@ -28,19 +19,13 @@ import {
 import { Separator } from '@/components/ui/separator';
 import { cn } from '@/lib/utils';
 
+import {
+  useBulkUpdateMutation,
+  useMoveLessonsMutation,
+} from '../_data/use-course-structure-mutations';
 import { IconActionTooltip } from './icon-action-tooltip';
 import { useStructureStore } from './store';
-import type { LessonStatus, Visibility } from './types';
-
-// ── Config ────────────────────────────────────────────────────────────────────
-
-const STATUS_LABELS: Record<LessonStatus, string> = {
-  preparada: 'Preparada',
-  gravada: 'Gravada',
-  editada: 'Editada',
-  finalizada: 'Finalizada',
-  publicada: 'Publicada',
-};
+import type { Lesson, LessonStatus } from './types';
 
 // ── Component ─────────────────────────────────────────────────────────────────
 
@@ -51,6 +36,9 @@ export function EditorBulk() {
   const lessons = useStructureStore((s) => s.lessons);
   const clearSelection = useStructureStore((s) => s.clearSelection);
 
+  const bulkUpdate = useBulkUpdateMutation();
+  const moveLessonsMutation = useMoveLessonsMutation();
+
   const selectedArray = [...selectedIds];
   const lessonIds = selectedArray.filter((id) =>
     lessons.some((l) => l.id === id)
@@ -62,24 +50,68 @@ export function EditorBulk() {
   const allLessons = lessonIds.length === selectedArray.length;
   const allSessions = sessionIds.length === selectedArray.length;
 
-  // Local form state (mock — not wired to store actions yet)
+  // Local form state — empty means "keep current" (no change applied).
   const [status, setStatus] = useState<LessonStatus | ''>('');
-  const [visibility, setVisibility] = useState<Visibility | ''>('');
+  const [publish, setPublish] = useState<'publish' | 'unpublish' | ''>('');
   const [targetSession, setTargetSession] = useState<string>('');
 
+  const isPending = bulkUpdate.isPending || moveLessonsMutation.isPending;
+
+  function resetForm() {
+    setStatus('');
+    setPublish('');
+    setTargetSession('');
+  }
+
   function handleSave() {
-    const lines: string[] = [];
-    if (status) lines.push(`status → ${STATUS_LABELS[status as LessonStatus]}`);
-    if (visibility) lines.push(`visibilidade → ${visibility}`);
-    if (targetSession)
-      lines.push(
-        `mover para sessão ${sessions.find((s) => s.id === targetSession)?.title ?? targetSession}`
+    const changes: { published?: boolean; status?: LessonStatus } = {};
+    if (publish) changes.published = publish === 'publish';
+    // Production status only applies to lessons.
+    if (status && lessonIds.length > 0) changes.status = status;
+
+    const hasFieldChange =
+      changes.published !== undefined || changes.status !== undefined;
+    const hasMove = !!targetSession && lessonIds.length > 0;
+
+    if (!hasFieldChange && !hasMove) {
+      toast(t('toast.none'));
+      return;
+    }
+
+    if (hasFieldChange) {
+      bulkUpdate.mutate(
+        {
+          lessons: lessonIds.map((id) => ({
+            lessonId: id,
+            sessionId:
+              lessons.find((l) => l.id === id)?.sessionId ?? '',
+          })),
+          sessionIds: sessionIds.map((id) => ({ sessionId: id })),
+          changes,
+        },
+        { onSuccess: resetForm }
+      );
+    }
+
+    if (hasMove) {
+      const previousLessons = [...lessons];
+      const movingLessons = lessonIds
+        .map((id) => lessons.find((l) => l.id === id))
+        .filter(Boolean) as Lesson[];
+      const moves = movingLessons.map((l, i) => ({
+        lessonId: l.id,
+        fromSessionId: l.sessionId,
+        toSessionId: targetSession,
+        toIndex: i,
+      }));
+      // Optimistic store move (matches MultiSelectBar behaviour).
+      useStructureStore.getState().moveLessons(lessonIds, targetSession);
+      moveLessonsMutation.mutate(
+        { moves, previousLessons },
+        { onSuccess: () => setTargetSession('') }
       );
-    toast.success(
-      lines.length
-        ? t('toast.preview', { changes: lines.join(', ') })
-        : t('toast.none')
-    );
+      toast.success(t('toast.moving', { count: lessonIds.length }));
+    }
   }
 
   return (
@@ -89,8 +121,6 @@ export function EditorBulk() {
         <div className="flex size-9 items-center justify-center rounded-lg bg-primary/10 shrink-0">
           {allLessons ? (
             <Video className="size-4 text-primary" />
-          ) : allSessions ? (
-            <Layers className="size-4 text-primary" />
           ) : (
             <Layers className="size-4 text-primary" />
           )}
@@ -99,7 +129,11 @@ export function EditorBulk() {
           <p className="text-sm font-semibold">{t('title')}</p>
           <p className="text-[0.65rem] text-muted-foreground">
             {selectedIds.size}{' '}
-            {allLessons ? t('types.lessons') : allSessions ? t('types.sessions') : t('types.items')}{' '}
+            {allLessons
+              ? t('types.lessons')
+              : allSessions
+                ? t('types.sessions')
+                : t('types.items')}{' '}
             {t('types.selected')}
           </p>
         </div>
@@ -143,11 +177,36 @@ export function EditorBulk() {
             })}
             {selectedArray.length > 12 && (
               <Badge variant="outline" className="text-[0.65rem] h-5">
-                +{selectedArray.length - 12} mais
+                +{selectedArray.length - 12} {t('more')}
               </Badge>
             )}
           </div>
 
+          {/* Publicação — aplica a aulas e sessões */}
+          <Card>
+            <CardHeader className="px-3 pt-3 pb-2">
+              <CardTitle className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
+                {t('publishTitle')}
+              </CardTitle>
+            </CardHeader>
+            <CardContent className="px-3 pb-3">
+              <Select
+                value={publish}
+                onValueChange={(v) =>
+                  setPublish(v as 'publish' | 'unpublish')
+                }
+              >
+                <SelectTrigger className="h-8 text-xs w-full">
+                  <SelectValue placeholder={t('keepCurrent')} />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="publish">{t('publish.on')}</SelectItem>
+                  <SelectItem value="unpublish">{t('publish.off')}</SelectItem>
+                </SelectContent>
+              </Select>
+            </CardContent>
+          </Card>
+
           {/* Status — só mostra para aulas */}
           {(allLessons || (!allSessions && lessonIds.length > 0)) && (
             <Card>
@@ -165,55 +224,25 @@ export function EditorBulk() {
                     <SelectValue placeholder={t('keepCurrent')} />
                   </SelectTrigger>
                   <SelectContent>
-                    <SelectItem value="preparada">{t('status.preparada')}</SelectItem>
+                    <SelectItem value="preparada">
+                      {t('status.preparada')}
+                    </SelectItem>
                     <SelectItem value="gravada">{t('status.gravada')}</SelectItem>
                     <SelectItem value="editada">{t('status.editada')}</SelectItem>
-                    <SelectItem value="finalizada">{t('status.finalizada')}</SelectItem>
-                    <SelectItem value="publicada">{t('status.publicada')}</SelectItem>
+                    <SelectItem value="finalizada">
+                      {t('status.finalizada')}
+                    </SelectItem>
+                    <SelectItem value="publicada">
+                      {t('status.publicada')}
+                    </SelectItem>
                   </SelectContent>
                 </Select>
               </CardContent>
             </Card>
           )}
 
-          {/* Visibilidade */}
-          <Card>
-            <CardHeader className="px-3 pt-3 pb-2">
-              <CardTitle className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
-                {t('visibilityTitle')}
-              </CardTitle>
-            </CardHeader>
-            <CardContent className="px-3 pb-3">
-              <Select
-                value={visibility}
-                onValueChange={(v) => setVisibility(v as Visibility)}
-              >
-                <SelectTrigger className="h-8 text-xs w-full">
-                  <SelectValue placeholder={t('keepCurrent')} />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="publico">
-                    <span className="flex items-center gap-1.5">
-                      <Eye className="size-3" /> {t('visibility.publico')}
-                    </span>
-                  </SelectItem>
-                  <SelectItem value="privado">
-                    <span className="flex items-center gap-1.5">
-                      <EyeOff className="size-3" /> {t('visibility.privado')}
-                    </span>
-                  </SelectItem>
-                  <SelectItem value="restrito">
-                    <span className="flex items-center gap-1.5">
-                      <Lock className="size-3" /> {t('visibility.restrito')}
-                    </span>
-                  </SelectItem>
-                </SelectContent>
-              </Select>
-            </CardContent>
-          </Card>
-
           {/* Mover para sessão — só para aulas */}
-          {(allLessons || lessonIds.length > 0) && (
+          {lessonIds.length > 0 && (
             <Card>
               <CardHeader className="px-3 pt-3 pb-2">
                 <CardTitle className="text-xs font-medium text-muted-foreground uppercase tracking-wider flex items-center gap-1.5">
@@ -240,12 +269,6 @@ export function EditorBulk() {
               </CardContent>
             </Card>
           )}
-
-          <div className="rounded-md border border-amber-200 bg-amber-50/60 dark:border-amber-800 dark:bg-amber-950/30 px-3 py-2">
-            <p className="text-[0.65rem] text-amber-700 dark:text-amber-400">
-              {t('apiNotice')}
-            </p>
-          </div>
         </div>
       </ScrollArea>
 
@@ -269,9 +292,14 @@ export function EditorBulk() {
             size="sm"
             className="h-7 text-xs"
             onClick={handleSave}
+            disabled={isPending}
           >
-            <Save className="size-3 mr-1" />
-            Aplicar (mock)
+            {isPending ? (
+              <Loader2 className="size-3 mr-1 animate-spin" />
+            ) : (
+              <Save className="size-3 mr-1" />
+            )}
+            {t('apply')}
           </Button>
         </div>
       </div>