@hed-hog/lms 0.0.355 → 0.0.358

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

@@ -13,7 +13,6 @@ import {
   Download,
   ExternalLink,
   Eye,
-  EyeOff,
   FileText,
   GripVertical,
   HelpCircle,
@@ -39,6 +38,7 @@ import { useForm, useWatch } from 'react-hook-form';
 import { toast } from 'sonner';
 import { z } from 'zod';
 
+import { CopyButton } from '@/components/copy-button';
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
@@ -140,6 +140,8 @@ import type {
   VideoProvider,
 } from './types';
 
+const EMPTY_VIDEO_FRAMES: VideoFrame[] = [];
+
 function formatFileSize(bytes: number): string {
   if (bytes < 1024) return `${bytes} B`;
   if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
@@ -158,6 +160,28 @@ function formatDateTimeLabel(value?: string | null): string | null {
   }).format(parsed);
 }
 
+function getInitials(name?: string | null): string {
+  const normalizedName = String(name ?? '').trim();
+  if (!normalizedName) return '--';
+
+  return normalizedName
+    .split(' ')
+    .filter(Boolean)
+    .slice(0, 2)
+    .map((part) => part[0])
+    .join('')
+    .toUpperCase();
+}
+
+function getInstructorAvatarUrl(avatarId?: number | null): string | undefined {
+  if (typeof avatarId !== 'number' || avatarId <= 0) return undefined;
+
+  const baseUrl = process.env.NEXT_PUBLIC_API_BASE_URL?.replace(/\/$/, '');
+  return baseUrl
+    ? `${baseUrl}/person/avatar/${avatarId}`
+    : `/person/avatar/${avatarId}`;
+}
+
 function videoProfileResourceType(profileId: number): string {
   return `video_profile:${profileId}`;
 }
@@ -526,7 +550,7 @@ type FormValues = {
   type: LessonType;
   duration: number;
   status: LessonStatus;
-  visibility: 'publico' | 'privado' | 'restrito';
+  published: boolean;
   publicDescription: string;
   privateDescription: string;
   videoProvider?: VideoProvider;
@@ -764,13 +788,14 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
   const lesson = useStructureStore((s) =>
     s.lessons.find((l) => l.id === lessonId)
   );
+  const sessions = useStructureStore((s) => s.sessions);
   const persistedVideoProvider: VideoProvider | undefined =
     lesson?.videoProvider === 'youtube' || lesson?.videoProvider === 'vimeo'
       ? lesson.videoProvider
       : lesson?.videoProvider
         ? 'file_storage'
         : undefined;
-  const videoFrames = lesson?.frames ?? [];
+  const videoFrames = lesson?.frames ?? EMPTY_VIDEO_FRAMES;
   const updateLesson = useUpdateLessonMutation();
   const updateTranscriptionSegments = useUpdateTranscriptionSegmentsMutation(
     lesson?.id ?? null
@@ -792,7 +817,10 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
     [
       { value: 'youtube' as VideoProvider, label: 'YouTube' },
       { value: 'vimeo' as VideoProvider, label: 'Vimeo' },
-      { value: 'file_storage' as VideoProvider, label: t('providers.fileStorage') },
+      {
+        value: 'file_storage' as VideoProvider,
+        label: t('providers.fileStorage'),
+      },
     ] as { value: VideoProvider; label: string }[]
   ).filter((p) => {
     if (p.value === 'youtube') return lmsSettings.youtubeEnabled;
@@ -819,7 +847,7 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
       'finalizada',
       'publicada',
     ] as const),
-    visibility: z.enum(['publico', 'privado', 'restrito'] as const),
+    published: z.boolean(),
     publicDescription: z.string(),
     privateDescription: z.string(),
     videoProvider: z
@@ -842,7 +870,7 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
     type: lesson?.type ?? 'video',
     duration: lesson?.duration ?? 0,
     status: lesson?.status ?? 'preparada',
-    visibility: lesson?.visibility ?? 'publico',
+    published: lesson?.published ?? false,
     publicDescription: lesson?.publicDescription ?? '',
     privateDescription: lesson?.privateDescription ?? '',
     videoProvider:
@@ -1145,15 +1173,21 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
       const nextEntries = Object.entries(current).filter(([id]) =>
         frameIds.has(id)
       );
+      if (nextEntries.length === Object.keys(current).length) return current;
       return Object.fromEntries(nextEntries);
     });
 
     setFrameImageErrorIds((current) => {
+      let changed = false;
       const next = new Set<string>();
       for (const id of current) {
-        if (frameIds.has(id)) next.add(id);
+        if (frameIds.has(id)) {
+          next.add(id);
+        } else {
+          changed = true;
+        }
       }
-      return next;
+      return changed ? next : current;
     });
 
     const frameSignatures = new Set(
@@ -1219,12 +1253,22 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
       if (cancelled) return;
 
       setFrameAssetMetadataById((current) => {
+        let changed = false;
         const next = { ...current };
         for (const result of results) {
           if (result.status !== 'fulfilled') continue;
-          next[result.value.frameId] = result.value.metadata;
+          const currentMetadata = current[result.value.frameId];
+          const nextMetadata = result.value.metadata;
+          if (
+            currentMetadata?.url === nextMetadata.url &&
+            currentMetadata?.sizeLabel === nextMetadata.sizeLabel
+          ) {
+            continue;
+          }
+          next[result.value.frameId] = nextMetadata;
+          changed = true;
         }
-        return next;
+        return changed ? next : current;
       });
     });
 
@@ -1365,6 +1409,10 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
   const cfg = TYPE_CONFIG[lesson.type];
   const Icon = cfg.icon;
   const lessonTypeLabel = t(cfg.labelKey);
+  const session = sessions.find((s) => s.id === lesson.sessionId);
+  const lessonFullCode = session
+    ? `${session.code}_${lesson.code}_${lesson.title}`
+    : null;
   const originalVideoResource =
     localResources.find((res) => res.type === 'video_original') ?? null;
   const isDownloadingOriginalVideo = originalVideoResource
@@ -2392,7 +2440,7 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
     setTranscriptionSegments(updater);
   }
 
-  function onSubmit(values: FormValues) {
+  function persistLesson(values: FormValues, shouldConfirmAutoStatus: boolean) {
     if (values.type === 'video') {
       const segmentsPayload = transcriptionSegments
         .map((segment) => ({
@@ -2428,6 +2476,7 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
         sessionId: lesson!.sessionId,
         formValues: {
           ...values,
+          confirmarPublicacaoComStatus: shouldConfirmAutoStatus,
           videoUrl:
             values.type === 'video' && values.videoProvider === 'file_storage'
               ? ''
@@ -2439,15 +2488,39 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
         },
       },
       {
-        onSuccess: () => {
+        onSuccess: (updatedLesson) => {
           persistedInstructorIdsRef.current = [...selectedInstructorIds];
-          form.reset({ ...values, transcription: values.transcription });
+          form.reset({
+            ...values,
+            status: updatedLesson.statusProducao ?? values.status,
+            published: updatedLesson.published ?? values.published,
+            transcription: updatedLesson.transcricao ?? values.transcription,
+          });
           setResourcesDirty(false);
         },
       }
     );
   }
 
+  function onSubmit(values: FormValues) {
+    const shouldConfirmAutoStatus =
+      values.published && values.status !== 'publicada';
+
+    if (shouldConfirmAutoStatus) {
+      showConfirm({
+        title: 'Confirmar publicação da aula?',
+        description:
+          'Esta aula será publicada e o status de produção será alterado automaticamente para Publicada. Deseja continuar?',
+        confirmText: 'Publicar',
+        destructive: false,
+        onConfirm: () => persistLesson(values, true),
+      });
+      return;
+    }
+
+    persistLesson(values, false);
+  }
+
   // ── Question sheet helpers ────────────────────────────────────────────────
 
   function openCreateQuestion() {
@@ -2581,15 +2654,29 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
           <div className="flex-1 min-w-0">
             <div className="flex items-center gap-1.5">
               <span className="text-sm font-semibold truncate">
-                {t('lessonForm.titleCreate')}
+                {lesson.title}
               </span>
               {isDirty && (
                 <CircleDot className="size-3 text-amber-500 shrink-0" />
               )}
             </div>
-            <p className="text-[0.65rem] text-muted-foreground truncate">
-              {lesson.code} · {lessonTypeLabel}
-            </p>
+            <div className="flex min-w-0 flex-wrap items-center gap-x-1.5 gap-y-1 text-[0.65rem] text-muted-foreground">
+              <span className="shrink-0">
+                {lesson.code} · {lessonTypeLabel}
+              </span>
+              {lessonFullCode && (
+                <>
+                  <span className="text-muted-foreground/60">·</span>
+                  <span className="max-w-full truncate rounded border border-border/60 bg-background/70 px-1.5 py-0.5 font-mono text-[0.62rem] text-foreground/80">
+                    {lessonFullCode}
+                  </span>
+                  <CopyButton
+                    value={lessonFullCode}
+                    className="size-5 shrink-0 text-muted-foreground"
+                  />
+                </>
+              )}
+            </div>
           </div>
           {watchedStatus && (
             <span
@@ -2629,7 +2716,7 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
           onValueChange={(value) => setActiveTab(value as LessonEditorTab)}
           className="flex flex-col flex-1 min-h-0 min-w-0"
         >
-          <TabsList className="mx-2 mt-1.5 h-auto w-[calc(100%-1rem)] justify-start shrink-0 bg-muted/50 overflow-x-auto overflow-y-hidden whitespace-nowrap sm:mx-3 sm:mt-2 sm:w-auto">
+          <TabsList className="mt-0 h-auto w-full justify-start shrink-0 rounded-none border-b bg-muted/50 px-2 py-1 overflow-x-auto overflow-y-hidden whitespace-nowrap sm:px-3">
             <TabsTrigger
               value="dados"
               className="h-6 px-2 text-[11px] shrink-0 sm:h-7 sm:px-2.5 sm:text-xs"
@@ -2848,42 +2935,21 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
 
                       <FormField
                         control={form.control}
-                        name="visibility"
+                        name="published"
                         render={({ field }) => (
                           <FormItem>
-                            <FormLabel className="text-xs">
-                              {t('questionEditor.visibility')}
-                            </FormLabel>
-                            <Select
-                              value={field.value}
-                              onValueChange={field.onChange}
-                            >
-                              <FormControl>
-                                <SelectTrigger className="h-8 text-xs w-full">
-                                  <SelectValue />
-                                </SelectTrigger>
-                              </FormControl>
-                              <SelectContent>
-                                <SelectItem value="publico">
-                                  <span className="flex items-center gap-1.5">
-                                    <Eye className="size-3" />{' '}
-                                    {t('lessonForm.public')}
-                                  </span>
-                                </SelectItem>
-                                <SelectItem value="privado">
-                                  <span className="flex items-center gap-1.5">
-                                    <EyeOff className="size-3" />{' '}
-                                    {t('lessonForm.private')}
-                                  </span>
-                                </SelectItem>
-                                <SelectItem value="restrito">
-                                  <span className="flex items-center gap-1.5">
-                                    <Lock className="size-3" />{' '}
-                                    {t('questionEditor.restricted')}
-                                  </span>
-                                </SelectItem>
-                              </SelectContent>
-                            </Select>
+                            <FormLabel className="text-xs">Publicada</FormLabel>
+                            <FormControl>
+                              <div className="flex h-8 items-center justify-between gap-3 rounded-md border px-3">
+                                <p className="cursor-default text-xs text-foreground">
+                                  Publicada
+                                </p>
+                                <Switch
+                                  checked={field.value}
+                                  onCheckedChange={field.onChange}
+                                />
+                              </div>
+                            </FormControl>
                             <FormMessage className="text-xs" />
                           </FormItem>
                         )}
@@ -2901,7 +2967,11 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
                   </CardHeader>
                   <CardContent className="px-3 pb-2 flex flex-col gap-2">
                     {/* Picker para adicionar */}
-                    <EntityPicker<{ id: number; name: string }>
+                    <EntityPicker<{
+                      id: number;
+                      name: string;
+                      avatarId?: number | null;
+                    }>
                       key={instructorPickerResetKey}
                       value={null}
                       onChange={(val) => {
@@ -2923,6 +2993,44 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
                       )}
                       getOptionValue={(o) => o.id}
                       getOptionLabel={(o) => o.name}
+                      renderOption={({ option }) => {
+                        const avatarUrl = getInstructorAvatarUrl(
+                          option.avatarId
+                        );
+                        const displayName = option.name ?? String(option.id);
+
+                        return (
+                          <div className="flex min-w-0 items-center gap-2">
+                            <Avatar className="size-6 shrink-0">
+                              <AvatarImage src={avatarUrl} alt={displayName} />
+                              <AvatarFallback className="text-[0.6rem] font-medium">
+                                {getInitials(displayName)}
+                              </AvatarFallback>
+                            </Avatar>
+                            <span className="truncate text-xs">
+                              {displayName}
+                            </span>
+                          </div>
+                        );
+                      }}
+                      renderSelectedValue={({ option, label }) => {
+                        const avatarUrl = getInstructorAvatarUrl(
+                          option?.avatarId
+                        );
+                        const displayName = option?.name ?? label;
+
+                        return (
+                          <span className="flex min-w-0 items-center gap-2">
+                            <Avatar className="size-5 shrink-0">
+                              <AvatarImage src={avatarUrl} alt={displayName} />
+                              <AvatarFallback className="text-[0.6rem] font-medium">
+                                {getInitials(displayName)}
+                              </AvatarFallback>
+                            </Avatar>
+                            <span className="truncate">{displayName}</span>
+                          </span>
+                        );
+                      }}
                     />
                     {/* Lista de instrutores selecionados */}
                     {selectedInstructorIds.length > 0 && (
@@ -2937,20 +3045,22 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
                               key={sid}
                               className="flex items-center gap-2 rounded-md border bg-muted/20 px-2 py-1"
                             >
-                              <Avatar className="size-6 shrink-0">
-                                <AvatarImage
-                                  src={undefined}
-                                  alt={displayName}
-                                />
-                                <AvatarFallback className="text-[0.6rem] font-medium">
-                                  {displayName
-                                    .split(' ')
-                                    .slice(0, 2)
-                                    .map((n: string) => n[0])
-                                    .join('')
-                                    .toUpperCase()}
-                                </AvatarFallback>
-                              </Avatar>
+                              {(() => {
+                                const avatarUrl = getInstructorAvatarUrl(
+                                  inst?.avatarId
+                                );
+                                return (
+                                  <Avatar className="size-6 shrink-0">
+                                    <AvatarImage
+                                      src={avatarUrl}
+                                      alt={displayName}
+                                    />
+                                    <AvatarFallback className="text-[0.6rem] font-medium">
+                                      {getInitials(displayName)}
+                                    </AvatarFallback>
+                                  </Avatar>
+                                );
+                              })()}
                               <span className="text-xs flex-1 truncate">
                                 {displayName}
                               </span>

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

@@ -8,7 +8,6 @@ import {
   EyeOff,
   Layers,
   Loader2,
-  Lock,
   Plus,
   Save,
   Trash2,
@@ -19,7 +18,6 @@ import { useEffect, useMemo } from 'react';
 import { useForm } from 'react-hook-form';
 import { z } from 'zod';
 
-import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import {
@@ -32,16 +30,14 @@ import {
 } from '@/components/ui/form';
 import { Input } from '@/components/ui/input';
 import { ScrollArea } from '@/components/ui/scroll-area';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/components/ui/select';
 import { Separator } from '@/components/ui/separator';
 import { Switch } from '@/components/ui/switch';
 import { Textarea } from '@/components/ui/textarea';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from '@/components/ui/tooltip';
 
 import {
   useCreateLessonMutation,
@@ -50,7 +46,6 @@ import {
 } from '../_data/use-course-structure-mutations';
 import { IconActionTooltip } from './icon-action-tooltip';
 import { useStructureStore } from './store';
-import type { Visibility } from './types';
 
 // ── Schema ────────────────────────────────────────────────────────────────────
 
@@ -59,7 +54,6 @@ const schema = z.object({
   title: z.string().min(1, 'Título obrigatório'),
   description: z.string(),
   duration: z.coerce.number().min(0),
-  visibility: z.enum(['publico', 'privado', 'restrito'] as const),
   published: z.boolean(),
 });
 
@@ -95,8 +89,7 @@ export function EditorSession({ sessionId }: EditorSessionProps) {
     title: session?.title ?? '',
     description: session?.description ?? '',
     duration: session?.duration ?? 0,
-    visibility: (session?.visibility ?? 'publico') as Visibility,
-    published: session?.published ?? true,
+    published: session?.published ?? false,
   };
 
   const form = useForm<FormValues>({
@@ -113,8 +106,7 @@ export function EditorSession({ sessionId }: EditorSessionProps) {
       title: session.title,
       description: session.description ?? '',
       duration: session.duration,
-      visibility: session.visibility ?? 'publico',
-      published: session.published ?? true,
+      published: session.published ?? false,
     });
   }, [session?.id]); // eslint-disable-line react-hooks/exhaustive-deps
 
@@ -156,12 +148,23 @@ export function EditorSession({ sessionId }: EditorSessionProps) {
               {session.code}
             </p>
           </div>
-          <Badge
-            variant={session.published ? 'default' : 'secondary'}
-            className="shrink-0 text-xs"
-          >
-            {session.published ? 'Publicada' : 'Oculta'}
-          </Badge>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <span
+                className="inline-flex shrink-0 items-center"
+                aria-label={session.published ? 'Publicada' : 'Rascunho'}
+              >
+                {session.published ? (
+                  <Eye className="size-4 text-emerald-600 dark:text-emerald-400" />
+                ) : (
+                  <EyeOff className="size-4 text-muted-foreground" />
+                )}
+              </span>
+            </TooltipTrigger>
+            <TooltipContent>
+              {session.published ? 'Publicada' : 'Rascunho'}
+            </TooltipContent>
+          </Tooltip>
           <IconActionTooltip
             label="Excluir sessão"
             asWrapper={deleteSession.isPending}
@@ -285,45 +288,7 @@ export function EditorSession({ sessionId }: EditorSessionProps) {
                 </CardTitle>
               </CardHeader>
               <CardContent className="px-3 pb-2">
-                <div className="grid grid-cols-1 gap-2 items-end sm:grid-cols-2">
-                  <FormField
-                    control={form.control}
-                    name="visibility"
-                    render={({ field }) => (
-                      <FormItem>
-                        <FormLabel className="text-xs">Visibilidade</FormLabel>
-                        <Select
-                          value={field.value}
-                          onValueChange={field.onChange}
-                        >
-                          <FormControl>
-                            <SelectTrigger className="h-8 text-xs w-full">
-                              <SelectValue />
-                            </SelectTrigger>
-                          </FormControl>
-                          <SelectContent>
-                            <SelectItem value="publico">
-                              <span className="flex items-center gap-1.5">
-                                <Eye className="size-3" /> Público
-                              </span>
-                            </SelectItem>
-                            <SelectItem value="privado">
-                              <span className="flex items-center gap-1.5">
-                                <EyeOff className="size-3" /> Privado
-                              </span>
-                            </SelectItem>
-                            <SelectItem value="restrito">
-                              <span className="flex items-center gap-1.5">
-                                <Lock className="size-3" /> Restrito
-                              </span>
-                            </SelectItem>
-                          </SelectContent>
-                        </Select>
-                        <FormMessage className="text-xs" />
-                      </FormItem>
-                    )}
-                  />
-
+                <div className="grid grid-cols-1 gap-2 items-end">
                   <FormField
                     control={form.control}
                     name="published"

package/hedhog/frontend/app/courses/[id]/structure/_components/mock-data.ts.ejs

@@ -63,6 +63,7 @@ export const MOCK_SESSIONS: Session[] = SESSION_CONFIG.map((s, i) => ({
   title: s.title,
   duration: s.lessonCount * 12,
   order: i,
+  published: true,
 }));
 
 // Lesson title patterns

package/hedhog/frontend/app/courses/[id]/structure/_components/store.ts.ejs

@@ -72,6 +72,8 @@ interface StructureState {
     open: boolean;
     title: string;
     description: string;
+    confirmText: string;
+    destructive: boolean;
     onConfirm: (() => void) | null;
   };
 
@@ -122,6 +124,7 @@ interface StructureState {
     data: Partial<
       LessonFormValues & {
         transcription?: string;
+        videoConversionJobId?: number;
         resources?: Lesson['resources'];
       }
     >
@@ -183,6 +186,8 @@ interface StructureState {
   showConfirm: (opts: {
     title: string;
     description: string;
+    confirmText?: string;
+    destructive?: boolean;
     onConfirm: () => void;
   }) => void;
   closeConfirm: () => void;
@@ -282,6 +287,8 @@ export const useStructureStore = create<StructureState>((set, get) => ({
     open: false,
     title: '',
     description: '',
+    confirmText: '',
+    destructive: true,
     onConfirm: null as (() => void) | null,
   },
   sessionPickerDialog: {
@@ -380,6 +387,7 @@ export const useStructureStore = create<StructureState>((set, get) => ({
       title: `Nova Sessão ${code}`,
       duration: 30,
       order: sessions.length,
+      published: false,
     };
     set((s) => {
       const nextExpandedIds = new Set([...s.expandedIds, newSession.id]);
@@ -433,6 +441,7 @@ export const useStructureStore = create<StructureState>((set, get) => ({
       duration: 10,
       sessionId,
       order: sessionLessons.length,
+      published: false,
       resources: [],
     };
     set((s) => {
@@ -919,6 +928,8 @@ export const useStructureStore = create<StructureState>((set, get) => ({
         open: true,
         title: opts.title,
         description: opts.description,
+        confirmText: opts.confirmText ?? '',
+        destructive: opts.destructive ?? true,
         onConfirm: opts.onConfirm,
       },
     }),

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

@@ -328,6 +328,7 @@ function LessonMenu({ data }: { data: Lesson }) {
 
   const hasLessonClipboard = copiedType === 'lesson' && copiedIds.length > 0;
   const hasOtherSessions = sessions.some((ss) => ss.id !== data.sessionId);
+  const session = sessions.find((ss) => ss.id === data.sessionId);
 
   // Ids to move when "Mover" is triggered
   const idsToMove = multiLessons ? selectedLessonIds : [data.id];
@@ -373,6 +374,27 @@ function LessonMenu({ data }: { data: Lesson }) {
         Copiar aula
       </ContextMenuItem>
 
+      <ContextMenuItem
+        onSelect={async () => {
+          if (!session) {
+            toast.error('Sessão da aula não encontrada');
+            return;
+          }
+
+          const lessonCopyCode = `${session.code}_${data.code}_${data.title}`;
+
+          try {
+            await navigator.clipboard.writeText(lessonCopyCode);
+            toast.success('Código da aula copiado');
+          } catch {
+            toast.error('Não foi possível copiar o código da aula');
+          }
+        }}
+      >
+        <Clipboard className="size-3.5 mr-2 text-muted-foreground" />
+        Copiar código da aula
+      </ContextMenuItem>
+
       {multiLessons && (
         <ContextMenuItem
           onSelect={() => {