@hed-hog/lms 0.0.329 → 0.0.331

package/hedhog/frontend/app/courses/[id]/structure/_components/multi-select-bar.tsx.ejs

@@ -4,6 +4,7 @@ import { Button } from '@/components/ui/button';
 import { Separator } from '@/components/ui/separator';
 import { cn } from '@/lib/utils';
 import { Copy, FolderOpen, Loader2, Trash2, X } from 'lucide-react';
+import { useTranslations } from 'next-intl';
 import { toast } from 'sonner';
 import {
   useBulkDeleteMutation,
@@ -18,6 +19,7 @@ import { useStructureStore } from './store';
  * Fixed below the search toolbar inside CourseTreePanel.
  */
 export function MultiSelectBar() {
+  const t = useTranslations('lms.CoursesPage.StructurePage.multiSelectBar');
   const selectedIds = useStructureStore((s) => s.selectedIds);
   const lessons = useStructureStore((s) => s.lessons);
   const sessions = useStructureStore((s) => s.sessions);
@@ -59,12 +61,12 @@ export function MultiSelectBar() {
   function handleCopy() {
     if (allAreLessons) {
       copyItems(selectedLessonIds, 'lesson');
-      toast.success(`${count} aulas copiadas`);
+      toast.success(t('copyLessonsSuccess', { count }));
     } else if (allAreSessions) {
       copyItems(selectedSessionIds, 'session');
-      toast.success(`${count} sessões copiadas`);
+      toast.success(t('copySessionsSuccess', { count }));
     } else {
-      toast('Selecione apenas aulas ou apenas sessões para copiar.');
+      toast(t('copyMixedError'));
     }
   }
 
@@ -82,7 +84,7 @@ export function MultiSelectBar() {
         );
       };
       duplicateNext(0);
-      toast.success(`${count} aulas sendo duplicadas...`);
+      toast.success(t('duplicatingLessons', { count }));
     } else if (allAreSessions) {
       const duplicateNext = (index: number) => {
         if (index >= selectedSessionIds.length) return;
@@ -92,7 +94,7 @@ export function MultiSelectBar() {
         );
       };
       duplicateNext(0);
-      toast.success(`${count} sessões sendo duplicadas...`);
+      toast.success(t('duplicatingSessions', { count }));
     }
   }
 
@@ -139,10 +141,10 @@ export function MultiSelectBar() {
       .map((l) => ({ lessonId: l.id, sessionId: l.sessionId }));
 
     showConfirm({
-      title: `Excluir ${label}?`,
+      title: t('deleteTitle', { label }),
       description: allAreSessions
-        ? 'As sessões e todas as suas aulas serão excluídas permanentemente.'
-        : 'Esta ação não pode ser desfeita.',
+        ? t('deleteSessionsDescription')
+        : t('deleteDescription'),
       onConfirm: () =>
         bulkDelete.mutate({
           sessionIds: selectedSessionIds,
@@ -154,7 +156,7 @@ export function MultiSelectBar() {
   return (
     <div
       role="toolbar"
-      aria-label={`${count} itens selecionados — ações`}
+      aria-label={t('toolbarAria', { count })}
       className={cn(
         'flex items-center gap-0.5 px-2 py-1 shrink-0 border-b',
         'bg-primary/5 dark:bg-primary/10'
@@ -177,8 +179,8 @@ export function MultiSelectBar() {
         variant="ghost"
         size="icon"
         className="size-6 text-muted-foreground hover:text-foreground"
-        title="Copiar selecionados (Ctrl+C)"
-        aria-label="Copiar selecionados"
+        title={t('copyTitle')}
+        aria-label={t('copyAria')}
         onClick={handleCopy}
       >
         <Copy className="size-3" />
@@ -189,8 +191,8 @@ export function MultiSelectBar() {
         variant="ghost"
         size="icon"
         className="size-6 text-muted-foreground hover:text-foreground"
-        title="Duplicar selecionados (Ctrl+D)"
-        aria-label="Duplicar selecionados"
+        title={t('duplicateTitle')}
+        aria-label={t('duplicateAria')}
         disabled={isDuplicating}
         onClick={handleDuplicate}
       >
@@ -216,8 +218,8 @@ export function MultiSelectBar() {
           variant="ghost"
           size="icon"
           className="size-6 text-muted-foreground hover:text-foreground"
-          title="Mover para outra sessão"
-          aria-label="Mover para outra sessão"
+          title={t('moveTitle')}
+          aria-label={t('moveAria')}
           disabled={isMoving}
           onClick={handleMove}
         >
@@ -234,8 +236,8 @@ export function MultiSelectBar() {
         variant="ghost"
         size="icon"
         className="size-6 text-destructive/60 hover:text-destructive"
-        title="Excluir selecionados (Delete)"
-        aria-label="Excluir selecionados"
+        title={t('deleteActionTitle')}
+        aria-label={t('deleteActionAria')}
         disabled={bulkDelete.isPending}
         onClick={handleDelete}
       >
@@ -253,8 +255,8 @@ export function MultiSelectBar() {
         variant="ghost"
         size="icon"
         className="size-6 text-muted-foreground hover:text-foreground"
-        title="Limpar seleção (Escape)"
-        aria-label="Limpar seleção"
+        title={t('clearTitle')}
+        aria-label={t('clearAria')}
         onClick={clearSelection}
       >
         <X className="size-3" />

package/hedhog/frontend/app/courses/[id]/structure/_components/shortcuts-help.tsx.ejs

@@ -1,6 +1,7 @@
 'use client';
 
 import { Keyboard } from 'lucide-react';
+import { useTranslations } from 'next-intl';
 
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
@@ -17,36 +18,7 @@ import { Separator } from '@/components/ui/separator';
 const SHORTCUT_GROUPS: {
   heading: string;
   items: { keys: string[]; description: string }[];
-}[] = [
-  {
-    heading: 'Navegação',
-    items: [
-      { keys: ['↑', '↓'], description: 'Navegar entre itens' },
-      { keys: ['→'], description: 'Expandir sessão selecionada' },
-      { keys: ['←'], description: 'Recolher sessão / ir para pai' },
-      { keys: ['Enter'], description: 'Focar primeiro campo do editor' },
-    ],
-  },
-  {
-    heading: 'Ações',
-    items: [
-      { keys: ['Ctrl', 'S'], description: 'Salvar formulário do painel' },
-      { keys: ['Ctrl', 'N'], description: 'Criar nova sessão ou aula' },
-      { keys: ['Ctrl', 'C'], description: 'Copiar item selecionado' },
-      { keys: ['Ctrl', 'V'], description: 'Colar no contexto atual' },
-      { keys: ['Ctrl', 'D'], description: 'Duplicar item' },
-      { keys: ['Delete'], description: 'Excluir item(ns) selecionado(s)' },
-    ],
-  },
-  {
-    heading: 'Busca & Interface',
-    items: [
-      { keys: ['Ctrl', 'F'], description: 'Focar campo de busca' },
-      { keys: ['Ctrl', '/'], description: 'Abrir ajuda de atalhos' },
-      { keys: ['Esc'], description: 'Limpar busca / seleção / foco' },
-    ],
-  },
-];
+}[] = [];
 
 // ── Component ─────────────────────────────────────────────────────────────────
 
@@ -56,18 +28,88 @@ interface ShortcutsHelpProps {
 }
 
 export function ShortcutsHelp({ open, onOpenChange }: ShortcutsHelpProps) {
+  const t = useTranslations('lms.CoursesPage.StructurePage.shortcuts');
+  const shortcutGroups = [
+    {
+      heading: t('groups.navigation.heading'),
+      items: [
+        {
+          keys: ['↑', '↓'],
+          description: t('groups.navigation.items.navigate'),
+        },
+        {
+          keys: ['→'],
+          description: t('groups.navigation.items.expand'),
+        },
+        {
+          keys: ['←'],
+          description: t('groups.navigation.items.collapse'),
+        },
+        {
+          keys: ['Enter'],
+          description: t('groups.navigation.items.focusEditor'),
+        },
+      ],
+    },
+    {
+      heading: t('groups.actions.heading'),
+      items: [
+        {
+          keys: ['Ctrl', 'S'],
+          description: t('groups.actions.items.savePanel'),
+        },
+        {
+          keys: ['Ctrl', 'N'],
+          description: t('groups.actions.items.createItem'),
+        },
+        {
+          keys: ['Ctrl', 'C'],
+          description: t('groups.actions.items.copyItem'),
+        },
+        {
+          keys: ['Ctrl', 'V'],
+          description: t('groups.actions.items.pasteItem'),
+        },
+        {
+          keys: ['Ctrl', 'D'],
+          description: t('groups.actions.items.duplicateItem'),
+        },
+        {
+          keys: ['Delete'],
+          description: t('groups.actions.items.deleteItems'),
+        },
+      ],
+    },
+    {
+      heading: t('groups.search.heading'),
+      items: [
+        {
+          keys: ['Ctrl', 'F'],
+          description: t('groups.search.items.focusSearch'),
+        },
+        {
+          keys: ['Ctrl', '/'],
+          description: t('groups.search.items.openHelp'),
+        },
+        {
+          keys: ['Esc'],
+          description: t('groups.search.items.clearState'),
+        },
+      ],
+    },
+  ];
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent className="max-w-sm">
         <DialogHeader>
           <DialogTitle className="flex items-center gap-2">
             <Keyboard className="size-4" />
-            Atalhos de teclado
+            {t('title')}
           </DialogTitle>
         </DialogHeader>
 
         <div className="flex flex-col gap-4 mt-1">
-          {SHORTCUT_GROUPS.map((group, gi) => (
+          {shortcutGroups.map((group, gi) => (
             <div key={gi}>
               <p className="text-[0.65rem] font-semibold uppercase tracking-wider text-muted-foreground mb-2">
                 {group.heading}
@@ -103,8 +145,7 @@ export function ShortcutsHelp({ open, onOpenChange }: ShortcutsHelpProps) {
         </div>
 
         <p className="text-[0.65rem] text-muted-foreground mt-1">
-          Atalhos são desativados quando o foco está em inputs, exceto Ctrl+S,
-          Ctrl+F e Ctrl+/ que funcionam em qualquer contexto.
+          {t('footer')}
         </p>
       </DialogContent>
     </Dialog>
@@ -115,16 +156,17 @@ export function ShortcutsHelp({ open, onOpenChange }: ShortcutsHelpProps) {
  * Convenience trigger button — renders standalone when no external state is needed.
  */
 export function ShortcutsHelpTrigger({ onOpen }: { onOpen: () => void }) {
+  const t = useTranslations('lms.CoursesPage.StructurePage.shortcuts');
   return (
     <Button
       variant="ghost"
       size="sm"
       className="h-8 gap-1.5 text-xs text-muted-foreground hover:text-foreground"
       onClick={onOpen}
-      title="Atalhos de teclado (Ctrl+/)"
+      title={t('triggerTitle')}
     >
       <Keyboard className="size-3.5" />
-      Atalhos
+      {t('triggerLabel')}
       <Badge
         variant="outline"
         className="h-4 px-1 text-[0.6rem] font-mono ml-0.5"

package/hedhog/frontend/app/courses/[id]/structure/_components/tree-display-settings-popover.tsx.ejs

@@ -10,6 +10,7 @@ import {
 import { Separator } from '@/components/ui/separator';
 import { Switch } from '@/components/ui/switch';
 import { SlidersHorizontal } from 'lucide-react';
+import { useTranslations } from 'next-intl';
 
 import { useTreeDisplaySettings } from './use-tree-display-settings';
 
@@ -18,6 +19,7 @@ import { useTreeDisplaySettings } from './use-tree-display-settings';
 // ─────────────────────────────────────────────────────────────────────────────
 
 export function TreeDisplaySettingsPopover() {
+  const t = useTranslations('lms.CoursesPage.StructurePage.displaySettings');
   const {
     showStatusDot,
     showVisibility,
@@ -35,26 +37,26 @@ export function TreeDisplaySettingsPopover() {
           variant="ghost"
           size="sm"
           className="h-8 gap-1.5 text-xs text-muted-foreground hover:text-foreground"
-          title="Configurações de exibição da lista"
+          title={t('title')}
         >
           <SlidersHorizontal className="size-3.5" />
-          <span className="sr-only sm:not-sr-only">Exibição</span>
+          <span className="sr-only sm:not-sr-only">{t('label')}</span>
         </Button>
       </PopoverTrigger>
 
       <PopoverContent align="end" className="w-56 p-0">
         <div className="px-3 py-2.5 border-b">
-          <p className="text-xs font-semibold">Informações nas aulas</p>
+          <p className="text-xs font-semibold">{t('sectionTitle')}</p>
           <p className="text-[0.65rem] text-muted-foreground mt-0.5">
-            Escolha o que exibir em cada linha
+            {t('sectionDescription')}
           </p>
         </div>
 
         <div className="flex flex-col gap-0">
           <SettingRow
             id="show-status-dot"
-            label="Dot de status"
-            description="Cor indicando etapa de produção"
+            label={t('showStatusDot.label')}
+            description={t('showStatusDot.description')}
             checked={showStatusDot}
             onCheckedChange={(v) => update({ showStatusDot: v })}
           />
@@ -63,8 +65,8 @@ export function TreeDisplaySettingsPopover() {
 
           <SettingRow
             id="show-visibility"
-            label="Visibilidade"
-            description="Ícone de público / privado / restrito"
+            label={t('showVisibility.label')}
+            description={t('showVisibility.description')}
             checked={showVisibility}
             onCheckedChange={(v) => update({ showVisibility: v })}
           />
@@ -73,8 +75,8 @@ export function TreeDisplaySettingsPopover() {
 
           <SettingRow
             id="show-code"
-            label="Código"
-            description="Exibe o código identificador"
+            label={t('showCode.label')}
+            description={t('showCode.description')}
             checked={showCode}
             onCheckedChange={(v) => update({ showCode: v })}
           />
@@ -83,8 +85,8 @@ export function TreeDisplaySettingsPopover() {
 
           <SettingRow
             id="show-video-indicator"
-            label="Vídeo vinculado"
-            description="Ícone quando aula de vídeo tem URL definida"
+            label={t('showVideoIndicator.label')}
+            description={t('showVideoIndicator.description')}
             checked={showVideoIndicator}
             onCheckedChange={(v) => update({ showVideoIndicator: v })}
           />
@@ -93,8 +95,8 @@ export function TreeDisplaySettingsPopover() {
 
           <SettingRow
             id="show-resources-indicator"
-            label="Recursos para download"
-            description="Ícone quando há arquivos anexados"
+            label={t('showResourcesIndicator.label')}
+            description={t('showResourcesIndicator.description')}
             checked={showResourcesIndicator}
             onCheckedChange={(v) => update({ showResourcesIndicator: v })}
           />
@@ -103,8 +105,8 @@ export function TreeDisplaySettingsPopover() {
 
           <SettingRow
             id="show-transcription-indicator"
-            label="Transcrição"
-            description="Ícone quando vídeo tem transcrição"
+            label={t('showTranscriptionIndicator.label')}
+            description={t('showTranscriptionIndicator.description')}
             checked={showTranscriptionIndicator}
             onCheckedChange={(v) => update({ showTranscriptionIndicator: v })}
           />

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

@@ -15,6 +15,7 @@ import {
   Video,
   type LucideIcon,
 } from 'lucide-react';
+import { useTranslations } from 'next-intl';
 import { useEffect, useRef } from 'react';
 import { useUpdateLessonMutation } from '../_data/use-course-structure-mutations';
 import { HighlightedText } from './highlighted-text';
@@ -75,6 +76,7 @@ export function TreeRowLesson({
   query,
   onClick,
 }: TreeRowLessonProps) {
+  const t = useTranslations('lms.CoursesPage.StructurePage.lessonRow');
   const cfg = LESSON_TYPE_CONFIG[data.type];
   const Icon = cfg.icon;
 
@@ -181,7 +183,7 @@ export function TreeRowLesson({
           onClick={(e) => e.stopPropagation()}
           onBlur={(e) => commitAndPersist(e.target.value)}
           onKeyDown={handleKeyDown}
-          aria-label="Renomear aula"
+          aria-label={t('rename')}
         />
       ) : (
         <span className="truncate flex-1 text-xs leading-tight">
@@ -209,8 +211,8 @@ export function TreeRowLesson({
               const VisIcon = visibilityCfg.icon;
               return (
                 <span
-                  title={`Visibilidade: ${visibilityCfg.label}`}
-                  aria-label={`Visibilidade: ${visibilityCfg.label}`}
+                    title={t('visibility', { value: visibilityCfg.label })}
+                    aria-label={t('visibility', { value: visibilityCfg.label })}
                   className="inline-flex items-center"
                 >
                   <VisIcon
@@ -223,15 +225,15 @@ export function TreeRowLesson({
           {showStatusDot && statusCfg && (
             <span
               className={cn('size-1.5 rounded-full shrink-0', statusCfg.dot)}
-              title={`Status: ${statusCfg.label}`}
-              aria-label={`Status: ${statusCfg.label}`}
+              title={t('status', { value: statusCfg.label })}
+              aria-label={t('status', { value: statusCfg.label })}
             />
           )}
           {/* Video linked indicator */}
           {showVideoIndicator && data.type === 'video' && data.videoUrl && (
             <span
-              title="Vídeo vinculado"
-              aria-label="Vídeo vinculado"
+              title={t('videoLinked')}
+              aria-label={t('videoLinked')}
               className="inline-flex items-center"
             >
               <Film className="size-3 shrink-0 text-violet-500" />
@@ -240,8 +242,8 @@ export function TreeRowLesson({
           {/* Resources indicator */}
           {showResourcesIndicator && data.resources.length > 0 && (
             <span
-              title={`${data.resources.length} recurso${data.resources.length > 1 ? 's' : ''} para download`}
-              aria-label={`${data.resources.length} recursos`}
+              title={t('resources', { count: data.resources.length })}
+              aria-label={t('resourcesAria', { count: data.resources.length })}
               className="inline-flex items-center gap-0.5"
             >
               <Paperclip className="size-3 shrink-0 text-sky-500" />
@@ -257,8 +259,8 @@ export function TreeRowLesson({
             data.type === 'video' &&
             data.transcription && (
               <span
-                title="Possui transcrição"
-                aria-label="Possui transcrição"
+                title={t('hasTranscription')}
+                aria-label={t('hasTranscription')}
                 className="inline-flex items-center"
               >
                 <ScrollText className="size-3 shrink-0 text-emerald-500" />

package/hedhog/frontend/app/courses/[id]/structure/_components/tree-row-session.tsx.ejs

@@ -3,6 +3,7 @@
 import { Input } from '@/components/ui/input';
 import { cn } from '@/lib/utils';
 import { ChevronDown, ChevronRight, Layers } from 'lucide-react';
+import { useTranslations } from 'next-intl';
 import { useEffect, useRef } from 'react';
 import { useUpdateSessionMutation } from '../_data/use-course-structure-mutations';
 import { HighlightedText } from './highlighted-text';
@@ -31,6 +32,7 @@ export function TreeRowSession({
   onClick,
   onToggleExpand,
 }: TreeRowSessionProps) {
+  const t = useTranslations('lms.CoursesPage.StructurePage.sessionRow');
   const inlineRenamingId = useStructureStore((s) => s.inlineRenamingId);
   const cancelRename = useStructureStore((s) => s.cancelRename);
   const startRename = useStructureStore((s) => s.startRename);
@@ -104,7 +106,7 @@ export function TreeRowSession({
       <button
         className="shrink-0 text-muted-foreground hover:text-foreground transition-colors p-0.5 rounded focus-visible:ring-1 focus-visible:ring-ring"
         onClick={onToggleExpand}
-        aria-label={isExpanded ? 'Recolher sessão' : 'Expandir sessão'}
+        aria-label={isExpanded ? t('collapse') : t('expand')}
         tabIndex={-1}
       >
         {isExpanded ? (
@@ -129,7 +131,7 @@ export function TreeRowSession({
           onClick={(e) => e.stopPropagation()}
           onBlur={(e) => commitAndPersist(e.target.value)}
           onKeyDown={handleKeyDown}
-          aria-label="Renomear sessão"
+          aria-label={t('rename')}
         />
       ) : (
         <span className="truncate flex-1 font-medium leading-tight">
@@ -158,7 +160,7 @@ export function TreeRowSession({
                 ? 'bg-muted-foreground/30'
                 : 'bg-emerald-500'
             )}
-            title={data.published === false ? 'Rascunho' : 'Publicada'}
+            title={data.published === false ? t('draft') : t('published')}
           />
         </div>
       )}

package/hedhog/frontend/app/courses/[id]/structure/_components/use-course-structure-shortcuts.ts.ejs

@@ -1,6 +1,7 @@
 'use client';
 
 import { useCallback, useEffect, useRef } from 'react';
+import { useTranslations } from 'next-intl';
 import { toast } from 'sonner';
 
 import type { SearchFilterHandle } from './search-filter';
@@ -44,6 +45,7 @@ export function useCourseStructureShortcuts({
   onDuplicate,
   onPaste,
 }: UseCourseStructureShortcutsOptions) {
+  const t = useTranslations('lms.CoursesPage.StructurePage.shortcuts');
   const course = useStructureStore((s) => s.course);
   const sessions = useStructureStore((s) => s.sessions);
   const lessons = useStructureStore((s) => s.lessons);
@@ -236,12 +238,15 @@ export function useCourseStructureShortcuts({
         if (!ids.length) return;
         const count = ids.length;
         s.showConfirm({
-          title: `Excluir ${count > 1 ? count + ' itens' : 'item selecionado'}?`,
-          description: 'Esta ação não pode ser desfeita.',
+          title: t('deleteTitle', {
+            label:
+              count > 1 ? `${count} ${t('items')}` : t('selectedItem'),
+          }),
+          description: t('deleteDescription'),
           onConfirm: () => {
             s.deleteSelected();
             toast.success(
-              count > 1 ? `${count} itens excluídos` : 'Item excluído'
+              count > 1 ? t('itemsDeleted', { count }) : t('itemDeleted')
             );
           },
         });
@@ -260,7 +265,7 @@ export function useCourseStructureShortcuts({
         const ids = selectedKeys.map((key) => key.slice(key.indexOf(':') + 1));
         s.copyItems(ids, type);
         toast.success(
-          `${ids.length > 1 ? ids.length + ' itens copiados' : 'Item copiado'}`
+          ids.length > 1 ? t('itemsCopied', { count: ids.length }) : t('itemCopied')
         );
         return;
       }
@@ -272,7 +277,7 @@ export function useCourseStructureShortcuts({
           onDuplicate();
         } else {
           s.duplicateSelected();
-          toast.success('Item duplicado');
+          toast.success(t('itemDuplicated'));
         }
         return;
       }
@@ -283,7 +288,7 @@ export function useCourseStructureShortcuts({
         if (onPaste) {
           onPaste();
         } else {
-          toast('Nada para colar');
+          toast(t('nothingToPaste'));
         }
         return;
       }
@@ -293,16 +298,16 @@ export function useCourseStructureShortcuts({
         e.preventDefault();
         if (s.activeItemType === 'course') {
           s.addSession();
-          toast.success('Nova sessão criada');
+          toast.success(t('newSessionCreated'));
         } else if (s.activeItemType === 'session' && s.activeItemId) {
           s.addLesson(s.activeItemId);
-          toast.success('Nova aula criada');
+          toast.success(t('newLessonCreated'));
         } else if (s.activeItemType === 'lesson') {
           // Find parent session and add there
           const lesson = s.lessons.find((l) => l.id === s.activeItemId);
           if (lesson) {
             s.addLesson(lesson.sessionId);
-            toast.success('Nova aula criada na mesma sessão');
+            toast.success(t('newLessonSameSession'));
           }
         }
         return;