@hed-hog/lms 0.0.361 → 0.0.364

package/hedhog/frontend/app/certificates/models/page.tsx.ejs

@@ -19,15 +19,10 @@ import {
   DialogHeader,
   DialogTitle,
 } from '@/components/ui/dialog';
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu';
+import { IconActionGroup } from '@/components/ui/icon-action-group';
 import { Input } from '@/components/ui/input';
 import { KpiCardsGrid, type KpiCardItem } from '@/components/ui/kpi-cards-grid';
+import { ResizableSheetContent } from '@/components/ui/resizable-sheet-content';
 import {
   Select,
   SelectContent,
@@ -42,9 +37,9 @@ import {
   SheetHeader,
   SheetTitle,
 } from '@/components/ui/sheet';
-import { ResizableSheetContent } from '@/components/ui/resizable-sheet-content';
 import { Skeleton } from '@/components/ui/skeleton';
 import { Textarea } from '@/components/ui/textarea';
+import { usePersistedPageSize } from '@/hooks/use-persisted-page-size';
 import { useApp, useQuery } from '@hed-hog/next-app-provider';
 import { zodResolver } from '@hookform/resolvers/zod';
 import {
@@ -56,14 +51,12 @@ import {
   FilePlus2,
   Files,
   Loader2,
-  MoreHorizontal,
   Pencil,
   Trash2,
 } from 'lucide-react';
 import { useLocale, useTranslations } from 'next-intl';
 import { useRouter } from 'next/navigation';
 import { useEffect, useMemo, useRef, useState } from 'react';
-import { usePersistedPageSize } from '@/hooks/use-persisted-page-size';
 import { Controller, useForm } from 'react-hook-form';
 import { toast } from 'sonner';
 import { z } from 'zod';
@@ -621,41 +614,24 @@ export default function ModelsPage() {
                 <CardContent className="space-y-4 p-5">
                   <div className="flex items-start justify-between gap-2">
                     {renderStatusBadge(template.status)}
-                    <div
-                      className="flex items-center gap-1"
-                      onClick={(e) => e.stopPropagation()}
-                    >
-                      <DropdownMenu>
-                        <DropdownMenuTrigger asChild>
-                          <Button
-                            type="button"
-                            variant="ghost"
-                            size="icon"
-                            className="size-8"
-                            aria-label={t('cards.actions.menuLabel')}
-                          >
-                            <MoreHorizontal className="size-4" />
-                          </Button>
-                        </DropdownMenuTrigger>
-                        <DropdownMenuContent align="end" className="w-48">
-                          <DropdownMenuItem
-                            onClick={() => openEditSheet(template)}
-                          >
-                            <Pencil className="mr-2 size-4" />
-                            {t('cards.actions.editTemplate')}
-                          </DropdownMenuItem>
-                          <DropdownMenuSeparator />
-                          <DropdownMenuItem
-                            className="text-destructive focus:text-destructive"
-                            onClick={() => onDeleteTemplate(template)}
-                            disabled={deletingTemplateId === template.id}
-                          >
-                            <Trash2 className="mr-2 size-4" />
-                            {t('cards.actions.deleteTemplate')}
-                          </DropdownMenuItem>
-                        </DropdownMenuContent>
-                      </DropdownMenu>
-                    </div>
+                    <IconActionGroup
+                      actions={[
+                        {
+                          key: 'edit',
+                          label: t('cards.actions.editTemplate'),
+                          icon: <Pencil className="size-4" />,
+                          onClick: () => openEditSheet(template),
+                        },
+                        {
+                          key: 'delete',
+                          label: t('cards.actions.deleteTemplate'),
+                          icon: <Trash2 className="size-4" />,
+                          onClick: () => onDeleteTemplate(template),
+                          destructive: true,
+                          disabled: deletingTemplateId === template.id,
+                        },
+                      ]}
+                    />
                   </div>
 
                   <div className="space-y-1">

package/hedhog/frontend/app/classes/[id]/page.tsx.ejs

@@ -30,14 +30,8 @@ import {
   DialogHeader,
   DialogTitle,
 } from '@/components/ui/dialog';
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu';
 import { Field, FieldError, FieldLabel } from '@/components/ui/field';
+import { IconActionGroup } from '@/components/ui/icon-action-group';
 import { Input } from '@/components/ui/input';
 import { KpiCardsGrid, type KpiCardItem } from '@/components/ui/kpi-cards-grid';
 import {
@@ -45,6 +39,7 @@ import {
   PopoverContent,
   PopoverTrigger,
 } from '@/components/ui/popover';
+import { ResizableSheetContent } from '@/components/ui/resizable-sheet-content';
 import {
   Select,
   SelectContent,
@@ -59,7 +54,6 @@ import {
   SheetHeader,
   SheetTitle,
 } from '@/components/ui/sheet';
-import { ResizableSheetContent } from '@/components/ui/resizable-sheet-content';
 import { Skeleton } from '@/components/ui/skeleton';
 import { Switch } from '@/components/ui/switch';
 import {
@@ -118,7 +112,6 @@ import {
   Loader2,
   MapPin,
   Monitor,
-  MoreHorizontal,
   Paperclip,
   Pencil,
   Plus,
@@ -3018,41 +3011,26 @@ export default function TurmaDetalhePage() {
 
                                 {/* Ações */}
                                 <TableCell>
-                                  <DropdownMenu>
-                                    <DropdownMenuTrigger asChild>
-                                      <Button
-                                        variant="ghost"
-                                        size="icon"
-                                        className="size-7"
-                                        onClick={(e) => e.stopPropagation()}
-                                      >
-                                        <MoreHorizontal className="size-4" />
-                                      </Button>
-                                    </DropdownMenuTrigger>
-                                    <DropdownMenuContent align="end">
-                                      <DropdownMenuItem
-                                        onClick={(e) => {
-                                          e.stopPropagation();
-                                          openAulaSheet(aula);
-                                        }}
-                                      >
-                                        <Pencil className="mr-2 size-4" />
-                                        Editar
-                                      </DropdownMenuItem>
-                                      <DropdownMenuSeparator />
-                                      <DropdownMenuItem
-                                        className="text-destructive focus:text-destructive"
-                                        onClick={(e) => {
-                                          e.stopPropagation();
+                                  <IconActionGroup
+                                    actions={[
+                                      {
+                                        key: 'edit-lesson',
+                                        label: 'Editar',
+                                        icon: <Pencil className="size-4" />,
+                                        onClick: () => openAulaSheet(aula),
+                                      },
+                                      {
+                                        key: 'delete-lesson',
+                                        label: 'Remover',
+                                        icon: <Trash2 className="size-4" />,
+                                        onClick: () => {
                                           setAulaToDelete(aula);
                                           setDeleteAulaDialogOpen(true);
-                                        }}
-                                      >
-                                        <Trash2 className="mr-2 size-4" />
-                                        Remover
-                                      </DropdownMenuItem>
-                                    </DropdownMenuContent>
-                                  </DropdownMenu>
+                                        },
+                                        destructive: true,
+                                      },
+                                    ]}
+                                  />
                                 </TableCell>
                               </TableRow>
                             );
@@ -3392,41 +3370,29 @@ export default function TurmaDetalhePage() {
                                 {aluno.status}
                               </Badge>
                             </div>
-                            <DropdownMenu>
-                              <DropdownMenuTrigger asChild>
-                                <Button
-                                  variant="ghost"
-                                  size="icon"
-                                  className="size-8 shrink-0 opacity-0 group-hover:opacity-100"
-                                  onClick={(e) => e.stopPropagation()}
-                                >
-                                  <MoreHorizontal className="size-4" />
-                                </Button>
-                              </DropdownMenuTrigger>
-                              <DropdownMenuContent align="end">
-                                <DropdownMenuItem
-                                  onClick={(e) => {
-                                    e.stopPropagation();
+                            <IconActionGroup
+                              className="opacity-0 transition-opacity group-hover:opacity-100"
+                              actions={[
+                                {
+                                  key: 'view-profile',
+                                  label: t('students.menu.viewProfile'),
+                                  icon: <Eye className="size-4" />,
+                                  onClick: () => {
                                     void openStudentProfile(aluno.id);
-                                  }}
-                                >
-                                  <Eye className="mr-2 size-4" />
-                                  {t('students.menu.viewProfile')}
-                                </DropdownMenuItem>
-                                <DropdownMenuSeparator />
-                                <DropdownMenuItem
-                                  className="text-destructive"
-                                  onClick={(e) => {
-                                    e.stopPropagation();
+                                  },
+                                },
+                                {
+                                  key: 'remove-from-class',
+                                  label: t('students.menu.removeFromClass'),
+                                  icon: <UserMinus className="size-4" />,
+                                  onClick: () => {
                                     setAlunoToRemove(aluno);
                                     setRemoveAlunoDialogOpen(true);
-                                  }}
-                                >
-                                  <UserMinus className="mr-2 size-4" />
-                                  {t('students.menu.removeFromClass')}
-                                </DropdownMenuItem>
-                              </DropdownMenuContent>
-                            </DropdownMenu>
+                                  },
+                                  destructive: true,
+                                },
+                              ]}
+                            />
                           </div>
                         );
                       })}

package/hedhog/frontend/app/classes/page.tsx.ejs

@@ -20,13 +20,7 @@ import {
   DialogHeader,
   DialogTitle,
 } from '@/components/ui/dialog';
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu';
+import { IconActionGroup } from '@/components/ui/icon-action-group';
 import { KpiCardsGrid, type KpiCardItem } from '@/components/ui/kpi-cards-grid';
 import { Skeleton } from '@/components/ui/skeleton';
 import {
@@ -52,7 +46,6 @@ import {
   Loader2,
   MapPin,
   Monitor,
-  MoreHorizontal,
   Pencil,
   Plus,
   Trash2,
@@ -531,8 +524,8 @@ export default function TurmasPage() {
     filtroTipoInput !== 'todos' ||
     filtroCursoInput !== 'todos';
 
-  function openDeleteDialog(turma: Turma, e: React.MouseEvent) {
-    e.stopPropagation();
+  function openDeleteDialog(turma: Turma, e?: React.MouseEvent) {
+    e?.stopPropagation();
     setTurmaToDelete(turma);
     setDeleteDialogOpen(true);
   }
@@ -902,44 +895,31 @@ export default function TurmasPage() {
                             <h3 className="line-clamp-2 font-semibold leading-snug text-foreground">
                               {turma.curso}
                             </h3>
-                            <DropdownMenu>
-                              <DropdownMenuTrigger asChild>
-                                <Button
-                                  variant="ghost"
-                                  size="icon"
-                                  className="size-8 shrink-0 -mr-2 -mt-1"
-                                  onClick={(e) => e.stopPropagation()}
-                                  aria-label={t('cards.actions.label')}
-                                >
-                                  <MoreHorizontal className="size-4" />
-                                </Button>
-                              </DropdownMenuTrigger>
-                              <DropdownMenuContent align="end" className="w-48">
-                                <DropdownMenuItem
-                                  onClick={(e) => {
-                                    e.stopPropagation();
-                                    router.push(`/lms/classes/${turma.id}`);
-                                  }}
-                                >
-                                  <Eye className="mr-2 size-4" />{' '}
-                                  {t('cards.actions.viewDetails')}
-                                </DropdownMenuItem>
-                                <DropdownMenuItem
-                                  onClick={(e) => openEditSheet(turma, e)}
-                                >
-                                  <Pencil className="mr-2 size-4" />{' '}
-                                  {t('cards.actions.edit')}
-                                </DropdownMenuItem>
-                                <DropdownMenuSeparator />
-                                <DropdownMenuItem
-                                  className="text-destructive focus:text-destructive"
-                                  onClick={(e) => openDeleteDialog(turma, e)}
-                                >
-                                  <Trash2 className="mr-2 size-4" />{' '}
-                                  {t('cards.actions.delete')}
-                                </DropdownMenuItem>
-                              </DropdownMenuContent>
-                            </DropdownMenu>
+                            <IconActionGroup
+                              className="-mr-2 -mt-1 ml-auto"
+                              actions={[
+                                {
+                                  key: 'view',
+                                  label: t('cards.actions.viewDetails'),
+                                  icon: <Eye className="size-4" />,
+                                  onClick: () =>
+                                    router.push(`/lms/classes/${turma.id}`),
+                                },
+                                {
+                                  key: 'edit',
+                                  label: t('cards.actions.edit'),
+                                  icon: <Pencil className="size-4" />,
+                                  onClick: () => openEditSheet(turma),
+                                },
+                                {
+                                  key: 'delete',
+                                  label: t('cards.actions.delete'),
+                                  icon: <Trash2 className="size-4" />,
+                                  onClick: () => openDeleteDialog(turma),
+                                  destructive: true,
+                                },
+                              ]}
+                            />
                           </div>
                           <div className="mt-1 flex items-center gap-1.5 text-xs text-muted-foreground">
                             <code className="rounded bg-muted px-1.5 py-0.5 font-mono text-[10px]">
@@ -952,7 +932,9 @@ export default function TurmasPage() {
                                 alt={turma.professor}
                                 className="size-4 rounded-full object-cover"
                                 onError={(e) => {
-                                  (e.currentTarget as HTMLImageElement).style.display = 'none';
+                                  (
+                                    e.currentTarget as HTMLImageElement
+                                  ).style.display = 'none';
                                 }}
                               />
                             ) : (
@@ -1132,42 +1114,31 @@ export default function TurmasPage() {
                         {turma.matriculados}
                       </TableCell>
                       <TableCell onClick={(e) => e.stopPropagation()}>
-                        <DropdownMenu>
-                          <DropdownMenuTrigger asChild>
-                            <Button
-                              variant="ghost"
-                              size="icon"
-                              className="ml-auto size-8"
-                              aria-label={t('cards.actions.label')}
-                            >
-                              <MoreHorizontal className="size-4" />
-                            </Button>
-                          </DropdownMenuTrigger>
-                          <DropdownMenuContent align="end" className="w-48">
-                            <DropdownMenuItem
-                              onClick={() =>
-                                router.push(`/lms/classes/${turma.id}`)
-                              }
-                            >
-                              <Eye className="mr-2 size-4" />{' '}
-                              {t('cards.actions.viewDetails')}
-                            </DropdownMenuItem>
-                            <DropdownMenuItem
-                              onClick={() => openEditSheet(turma)}
-                            >
-                              <Pencil className="mr-2 size-4" />{' '}
-                              {t('cards.actions.edit')}
-                            </DropdownMenuItem>
-                            <DropdownMenuSeparator />
-                            <DropdownMenuItem
-                              className="text-destructive focus:text-destructive"
-                              onClick={(e) => openDeleteDialog(turma, e)}
-                            >
-                              <Trash2 className="mr-2 size-4" />{' '}
-                              {t('cards.actions.delete')}
-                            </DropdownMenuItem>
-                          </DropdownMenuContent>
-                        </DropdownMenu>
+                        <IconActionGroup
+                          className="ml-auto"
+                          actions={[
+                            {
+                              key: 'view',
+                              label: t('cards.actions.viewDetails'),
+                              icon: <Eye className="size-4" />,
+                              onClick: () =>
+                                router.push(`/lms/classes/${turma.id}`),
+                            },
+                            {
+                              key: 'edit',
+                              label: t('cards.actions.edit'),
+                              icon: <Pencil className="size-4" />,
+                              onClick: () => openEditSheet(turma),
+                            },
+                            {
+                              key: 'delete',
+                              label: t('cards.actions.delete'),
+                              icon: <Trash2 className="size-4" />,
+                              onClick: () => openDeleteDialog(turma),
+                              destructive: true,
+                            },
+                          ]}
+                        />
                       </TableCell>
                     </TableRow>
                   );

package/hedhog/frontend/app/courses/[id]/_components/CourseDangerZoneCard.tsx.ejs

@@ -45,8 +45,9 @@ export function CourseDangerZoneCard({
             </Button>
           </TooltipTrigger>
           <TooltipContent side="top" className="max-w-60 text-xs">
-            Remove o curso, turmas, matrículas e certificados vinculados
-            permanentemente.
+            Arquive o curso antes da exclusão. O processo remove em background o
+            curso e os arquivos relacionados, com progresso no sino de
+            notificações.
           </TooltipContent>
         </Tooltip>
       </TooltipProvider>

package/hedhog/frontend/app/courses/[id]/_components/CourseMediaCard.tsx.ejs

@@ -1,4 +1,6 @@
 import { Button } from '@/components/ui/button';
+import { FileTypeIcon } from '@/components/file-type-icon';
+import Image from 'next/image';
 import {
   Tooltip,
   TooltipContent,
@@ -21,6 +23,8 @@ import type { TranslationFn } from './course-edit-types';
 type MediaFile = {
   id: number;
   name: string;
+  size?: number | null;
+  mimeType?: string | null;
 };
 
 type ImageTypeSpec = {
@@ -53,6 +57,26 @@ function MediaRow({
 }: MediaRowProps) {
   const inputRef = useRef<HTMLInputElement>(null);
 
+  function formatFileSize(bytes?: number | null) {
+    if (bytes == null || Number.isNaN(bytes)) return null;
+    if (bytes < 1024) return `${bytes} B`;
+
+    const units = ['KB', 'MB', 'GB', 'TB'];
+    let value = bytes / 1024;
+    let unitIndex = 0;
+
+    while (value >= 1024 && unitIndex < units.length - 1) {
+      value /= 1024;
+      unitIndex += 1;
+    }
+
+    const fractionDigits = value >= 10 ? 0 : 1;
+    return `${value.toFixed(fractionDigits)} ${units[unitIndex]}`;
+  }
+
+  const fileSizeLabel = formatFileSize(file?.size);
+  const fileTypeLabel = file?.mimeType?.trim() || null;
+
   const specParts: string[] = [];
   if (imageType?.suggestedWidth && imageType?.suggestedHeight) {
     specParts.push(
@@ -86,10 +110,13 @@ function MediaRow({
 
       <div className="relative h-40 w-full overflow-hidden rounded-xl border border-border/70 bg-muted/30">
         {preview ? (
-          <img
+          <Image
             src={preview}
             alt={label}
-            className="h-full w-full object-contain"
+            fill
+            sizes="100vw"
+            className="object-contain"
+            unoptimized
           />
         ) : (
           <div className="flex h-full flex-col items-center justify-center gap-2 text-center">
@@ -104,9 +131,25 @@ function MediaRow({
         )}
       </div>
 
-      {specText ? (
-        <p className="text-[11px] text-muted-foreground/70">{specText}</p>
-      ) : null}
+      <div className="space-y-1">
+        {file ? (
+          <div className="flex items-center gap-2 text-[11px] text-muted-foreground/70">
+            <FileTypeIcon
+              filename={file.name}
+              mimeType={file.mimeType ?? undefined}
+              size={14}
+            />
+            <span className="truncate">
+              Atual: {fileSizeLabel ?? 'tamanho desconhecido'}
+              {fileTypeLabel ? ` · ${fileTypeLabel}` : ''}
+            </span>
+          </div>
+        ) : null}
+
+        {specText ? (
+          <p className="text-[11px] text-muted-foreground/70">{specText}</p>
+        ) : null}
+      </div>
 
       <div className="flex items-center justify-end gap-1">
         <TooltipProvider>

package/hedhog/frontend/app/courses/[id]/page.tsx.ejs

@@ -249,7 +249,7 @@ export default function CourseStructurePage({ params }: Props) {
                 <div className="flex flex-col items-center justify-center h-full gap-3 p-4 text-center">
                   <AlertCircle className="size-8 text-destructive" />
                   <p className="text-sm text-muted-foreground">
-                    Não foi possível carregar a estrutura do curso.
+                    {t('error.loadFailed')}
                   </p>
                   <Button
                     variant="outline"
@@ -258,7 +258,7 @@ export default function CourseStructurePage({ params }: Props) {
                     className="gap-2"
                   >
                     <RefreshCw className="size-3.5" />
-                    Tentar novamente
+                    {t('error.tryAgain')}
                   </Button>
                 </div>
               ) : (
@@ -327,7 +327,7 @@ export default function CourseStructurePage({ params }: Props) {
                   <div className="flex flex-col items-center justify-center h-full gap-3 p-4 text-center">
                     <AlertCircle className="size-8 text-destructive" />
                     <p className="text-sm text-muted-foreground">
-                      Não foi possível carregar a estrutura do curso.
+                      {t('error.loadFailed')}
                     </p>
                     <Button
                       variant="outline"
@@ -336,7 +336,7 @@ export default function CourseStructurePage({ params }: Props) {
                       className="gap-2"
                     >
                       <RefreshCw className="size-3.5" />
-                      Tentar novamente
+                      {t('error.tryAgain')}
                     </Button>
                   </div>
                 ) : (

package/hedhog/frontend/app/courses/[id]/structure/_components/course-operations-tab.tsx.ejs

@@ -14,6 +14,7 @@ import {
   SelectValue,
 } from '@/components/ui/select';
 import { Separator } from '@/components/ui/separator';
+import { Skeleton } from '@/components/ui/skeleton';
 import { cn } from '@/lib/utils';
 import { useApp, useQuery } from '@hed-hog/next-app-provider';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
@@ -199,8 +200,24 @@ export function CourseOperationsTab({ courseId }: Props) {
 
   if (isLoadingConfig) {
     return (
-      <div className="flex items-center justify-center py-10">
-        <Loader2 className="size-5 animate-spin text-muted-foreground" />
+      <div className="flex flex-col gap-5 p-1">
+        <div className="flex flex-col gap-1.5">
+          <Skeleton className="h-3 w-28" />
+          <Skeleton className="h-9 w-full" />
+        </div>
+        <div className="flex flex-col gap-2">
+          <Skeleton className="h-3 w-24" />
+          {[1, 2, 3].map((i) => (
+            <div key={i} className="flex items-center gap-2">
+              <Skeleton className="size-4 rounded-full shrink-0" />
+              <Skeleton className="h-3 w-40" />
+            </div>
+          ))}
+        </div>
+        <div className="flex flex-col gap-1.5">
+          <Skeleton className="h-3 w-32" />
+          <Skeleton className="h-9 w-full" />
+        </div>
       </div>
     );
   }