@hed-hog/lms 0.0.349 → 0.0.351

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

@@ -140,9 +140,9 @@ export function EditorSession({ sessionId }: EditorSessionProps) {
         className="flex flex-col h-full min-h-0"
       >
         {/* ── Header ───────────────────────────────────────────────────────── */}
-        <div className="flex items-center gap-3 px-4 py-3 border-b bg-muted/30 shrink-0">
-          <div className="flex size-9 items-center justify-center rounded-lg bg-muted shrink-0">
-            <Layers className="size-4 text-muted-foreground" />
+        <div className="flex items-center gap-2 border-b bg-muted/30 px-2 py-2 shrink-0 sm:gap-3 sm:px-4 sm:py-3">
+          <div className="flex size-8 items-center justify-center rounded-md bg-muted shrink-0 sm:size-9 sm:rounded-lg">
+            <Layers className="size-3.5 text-muted-foreground sm:size-4" />
           </div>
           <div className="flex-1 min-w-0">
             <div className="flex items-center gap-1.5">
@@ -204,7 +204,7 @@ export function EditorSession({ sessionId }: EditorSessionProps) {
                 </CardTitle>
               </CardHeader>
               <CardContent className="px-3 pb-2 flex flex-col gap-3">
-                <div className="grid grid-cols-2 gap-2">
+                <div className="grid grid-cols-1 gap-2 sm:grid-cols-2">
                   <FormField
                     control={form.control}
                     name="code"
@@ -280,7 +280,7 @@ export function EditorSession({ sessionId }: EditorSessionProps) {
                 </CardTitle>
               </CardHeader>
               <CardContent className="px-3 pb-2">
-                <div className="grid grid-cols-2 gap-2 items-end">
+                <div className="grid grid-cols-1 gap-2 items-end sm:grid-cols-2">
                   <FormField
                     control={form.control}
                     name="visibility"
@@ -342,7 +342,7 @@ export function EditorSession({ sessionId }: EditorSessionProps) {
 
             {/* ── Aulas da sessão ───────────────────────────────────────────── */}
             {lessons.length === 0 && (
-              <div className="flex flex-col items-center gap-2 py-6 px-2 rounded-lg border border-dashed text-center">
+              <div className="flex flex-col items-center gap-2 px-2 py-4 rounded-lg border border-dashed text-center sm:py-6">
                 <Video className="size-5 text-muted-foreground/40" />
                 <p className="text-xs text-muted-foreground leading-relaxed">
                   Esta sessão ainda não tem aulas.
@@ -370,12 +370,12 @@ export function EditorSession({ sessionId }: EditorSessionProps) {
         {/* ── Footer ───────────────────────────────────────────────────────── */}
         <div className="shrink-0 border-t bg-background">
           <Separator />
-          <div className="flex items-center gap-2 px-3 py-2">
+          <div className="flex items-center gap-1.5 px-2 py-1.5 sm:gap-2 sm:px-3 sm:py-2">
             <Button
               type="button"
               variant="ghost"
               size="sm"
-              className="h-7 text-xs"
+              className="h-6 text-[11px] sm:h-7 sm:text-xs"
               disabled={!isDirty || updateSession.isPending}
               onClick={() => form.reset()}
             >
@@ -387,7 +387,7 @@ export function EditorSession({ sessionId }: EditorSessionProps) {
               type="button"
               variant="outline"
               size="sm"
-              className="h-7 text-xs"
+              className="h-6 text-[11px] sm:h-7 sm:text-xs"
               disabled={createLesson.isPending}
               onClick={() => createLesson.mutate({ sessionId })}
             >
@@ -401,7 +401,7 @@ export function EditorSession({ sessionId }: EditorSessionProps) {
             <Button
               type="submit"
               size="sm"
-              className="h-7 text-xs"
+              className="h-6 text-[11px] sm:h-7 sm:text-xs"
               disabled={!isDirty || updateSession.isPending}
             >
               {updateSession.isPending ? (
@@ -430,7 +430,7 @@ function StatChip({
   value: string | number;
 }) {
   return (
-    <div className="flex items-center gap-2 rounded-md border bg-muted/20 px-2.5 py-2">
+    <div className="flex items-center gap-1.5 rounded-md border bg-muted/20 px-2 py-1.5 sm:gap-2 sm:px-2.5 sm:py-2">
       <span className="text-muted-foreground shrink-0">{icon}</span>
       <div className="min-w-0">
         <p className="text-[0.65rem] text-muted-foreground truncate">{label}</p>

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

@@ -111,7 +111,7 @@ const LESSON_TYPES: LessonType[] = [
 const PROVIDERS: VideoProvider[] = [
   'youtube',
   'vimeo',
-  'bunny',
+  'file_storage',
   'youtube',
   'youtube',
 ];

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

@@ -6,11 +6,11 @@ import { useTranslations } from 'next-intl';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-} from '@/components/ui/dialog';
+  Sheet,
+  SheetHeader,
+  SheetTitle,
+} from '@/components/ui/sheet';
+import { ResizableSheetContent } from '@/components/ui/resizable-sheet-content';
 import { Separator } from '@/components/ui/separator';
 
 // ── Data ──────────────────────────────────────────────────────────────────────
@@ -99,56 +99,65 @@ export function ShortcutsHelp({ open, onOpenChange }: ShortcutsHelpProps) {
     },
   ];
   return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="max-w-sm">
-        <DialogHeader>
-          <DialogTitle className="flex items-center gap-2">
+    <Sheet open={open} onOpenChange={onOpenChange}>
+      <ResizableSheetContent
+        sheetId="lms-course-structure-shortcuts-help-sheet"
+        defaultWidth={520}
+        minWidth={400}
+        maxWidth={860}
+        side="right"
+        className="w-full sm:max-w-md p-0 gap-0"
+      >
+        <SheetHeader className="border-b px-4 py-3">
+          <SheetTitle className="flex items-center gap-2">
             <Keyboard className="size-4" />
             {t('title')}
-          </DialogTitle>
-        </DialogHeader>
+          </SheetTitle>
+        </SheetHeader>
 
-        <div className="flex flex-col gap-4 mt-1">
-          {shortcutGroups.map((group, gi) => (
-            <div key={gi}>
-              <p className="text-[0.65rem] font-semibold uppercase tracking-wider text-muted-foreground mb-2">
-                {group.heading}
-              </p>
-              <div className="flex flex-col gap-1.5">
-                {group.items.map(({ keys, description }, ki) => (
-                  <div
-                    key={ki}
-                    className="flex items-center justify-between gap-3"
-                  >
-                    <span className="text-sm text-muted-foreground">
-                      {description}
-                    </span>
-                    <div className="flex items-center gap-1 shrink-0">
-                      {keys.map((k, i) => (
-                        <Badge
-                          key={i}
-                          variant="outline"
-                          className="h-5 px-1.5 text-[0.65rem] font-mono font-medium"
-                        >
-                          {k}
-                        </Badge>
-                      ))}
+        <div className="flex-1 min-h-0 overflow-y-auto px-4 py-3">
+          <div className="flex flex-col gap-4 mt-1">
+            {shortcutGroups.map((group, gi) => (
+              <div key={gi}>
+                <p className="text-[0.65rem] font-semibold uppercase tracking-wider text-muted-foreground mb-2">
+                  {group.heading}
+                </p>
+                <div className="flex flex-col gap-1.5">
+                  {group.items.map(({ keys, description }, ki) => (
+                    <div
+                      key={ki}
+                      className="flex items-center justify-between gap-3"
+                    >
+                      <span className="text-sm text-muted-foreground">
+                        {description}
+                      </span>
+                      <div className="flex items-center gap-1 shrink-0">
+                        {keys.map((k, i) => (
+                          <Badge
+                            key={i}
+                            variant="outline"
+                            className="h-5 px-1.5 text-[0.65rem] font-mono font-medium"
+                          >
+                            {k}
+                          </Badge>
+                        ))}
+                      </div>
                     </div>
-                  </div>
-                ))}
+                  ))}
+                </div>
+                {gi < shortcutGroups.length - 1 && (
+                  <Separator className="mt-3" />
+                )}
               </div>
-              {gi < SHORTCUT_GROUPS.length - 1 && (
-                <Separator className="mt-3" />
-              )}
-            </div>
-          ))}
-        </div>
+            ))}
+          </div>
 
-        <p className="text-[0.65rem] text-muted-foreground mt-1">
-          {t('footer')}
-        </p>
-      </DialogContent>
-    </Dialog>
+          <p className="text-[0.65rem] text-muted-foreground mt-4">
+            {t('footer')}
+          </p>
+        </div>
+      </ResizableSheetContent>
+    </Sheet>
   );
 }
 
@@ -161,15 +170,16 @@ export function ShortcutsHelpTrigger({ onOpen }: { onOpen: () => void }) {
     <Button
       variant="ghost"
       size="sm"
-      className="h-8 gap-1.5 text-xs text-muted-foreground hover:text-foreground"
+      className="h-8 gap-1.5 px-2 text-xs text-muted-foreground hover:text-foreground sm:px-3"
       onClick={onOpen}
       title={t('triggerTitle')}
+      aria-label={t('triggerTitle')}
     >
       <Keyboard className="size-3.5" />
-      {t('triggerLabel')}
+      <span className="sr-only sm:not-sr-only">{t('triggerLabel')}</span>
       <Badge
         variant="outline"
-        className="h-4 px-1 text-[0.6rem] font-mono ml-0.5"
+        className="ml-0.5 hidden h-4 px-1 text-[0.6rem] font-mono sm:inline-flex"
       >
         Ctrl+/
       </Badge>

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

@@ -21,6 +21,7 @@ import {
   Plus,
   Trash2,
 } from 'lucide-react';
+import { useTranslations } from 'next-intl';
 import { toast } from 'sonner';
 
 import {
@@ -53,6 +54,7 @@ interface TreeContextMenuProps {
 // ─────────────────────────────────────────────────────────────────────────────
 
 function CourseMenu({ data }: { data: Course }) {
+  const t = useTranslations('lms.CoursesPage.StructurePage');
   const expandAll = useStructureStore((s) => s.expandAll);
   const collapseAll = useStructureStore((s) => s.collapseAll);
   const copiedType = useStructureStore((s) => s.copiedType);
@@ -80,7 +82,7 @@ function CourseMenu({ data }: { data: Course }) {
         ) : (
           <Plus className="size-3.5 mr-2 text-muted-foreground" />
         )}
-        Nova sessão
+        {t('contextMenu.addSession')}
       </ContextMenuItem>
 
       <ContextMenuSeparator />
@@ -92,7 +94,7 @@ function CourseMenu({ data }: { data: Course }) {
         }}
       >
         <BookOpen className="size-3.5 mr-2 text-muted-foreground" />
-        Expandir tudo
+        {t('tree.expandAll')}
       </ContextMenuItem>
 
       <ContextMenuItem
@@ -102,7 +104,7 @@ function CourseMenu({ data }: { data: Course }) {
         }}
       >
         <Layers className="size-3.5 mr-2 text-muted-foreground" />
-        Recolher tudo
+        {t('tree.collapseAll')}
       </ContextMenuItem>
 
       {hasSessionClipboard && (
@@ -119,7 +121,8 @@ function CourseMenu({ data }: { data: Course }) {
             ) : (
               <Clipboard className="size-3.5 mr-2 text-muted-foreground" />
             )}
-            Colar sessão{copiedIds.length > 1 ? ` (${copiedIds.length})` : ''}
+            {t('contextMenu.pasteSession')}
+            {copiedIds.length > 1 ? ` (${copiedIds.length})` : ''}
           </ContextMenuItem>
         </>
       )}
@@ -523,3 +526,102 @@ export function TreeContextMenu({ item, children }: TreeContextMenuProps) {
     </ContextMenu>
   );
 }
+
+export function TreeRootContextMenu({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const t = useTranslations('lms.CoursesPage.StructurePage');
+  const course = useStructureStore((s) => s.course);
+  const activeItemId = useStructureStore((s) => s.activeItemId);
+  const activeItemType = useStructureStore((s) => s.activeItemType);
+  const lessons = useStructureStore((s) => s.lessons);
+  const copiedType = useStructureStore((s) => s.copiedType);
+  const copiedIds = useStructureStore((s) => s.copiedIds);
+
+  const createSessionMutation = useCreateSessionMutation();
+  const pasteSessionsMutation = usePasteSessionsMutation();
+  const pasteLessonsMutation = usePasteLessonsMutation();
+
+  const hasSessionClipboard = copiedType === 'session' && copiedIds.length > 0;
+  const hasLessonClipboard = copiedType === 'lesson' && copiedIds.length > 0;
+
+  function getActiveSessionId(): string | null {
+    if (activeItemType === 'session' && activeItemId) return activeItemId;
+    if (activeItemType === 'lesson' && activeItemId) {
+      const lesson = lessons.find((item) => item.id === activeItemId);
+      return lesson?.sessionId ?? null;
+    }
+    return null;
+  }
+
+  return (
+    <ContextMenu>
+      <ContextMenuTrigger className="block h-full w-full">
+        {children}
+      </ContextMenuTrigger>
+      <ContextMenuContent className="w-56">
+        <ContextMenuLabel className="text-[0.65rem] text-muted-foreground px-2 py-1">
+          {course.title || course.name || t('contextMenu.courseFallback')}
+        </ContextMenuLabel>
+        <ContextMenuSeparator />
+
+        <ContextMenuItem
+          disabled={createSessionMutation.isPending}
+          onSelect={() => createSessionMutation.mutate()}
+        >
+          {createSessionMutation.isPending ? (
+            <Loader2 className="size-3.5 mr-2 animate-spin" />
+          ) : (
+            <Plus className="size-3.5 mr-2 text-muted-foreground" />
+          )}
+          {t('contextMenu.addSession')}
+        </ContextMenuItem>
+
+        {hasSessionClipboard && (
+          <ContextMenuItem
+            disabled={pasteSessionsMutation.isPending}
+            onSelect={() => {
+              pasteSessionsMutation.mutate({ sessionIds: copiedIds });
+            }}
+          >
+            {pasteSessionsMutation.isPending ? (
+              <Loader2 className="size-3.5 mr-2 animate-spin" />
+            ) : (
+              <Clipboard className="size-3.5 mr-2 text-muted-foreground" />
+            )}
+            {t('contextMenu.pasteSession')}
+            {copiedIds.length > 1 ? ` (${copiedIds.length})` : ''}
+          </ContextMenuItem>
+        )}
+
+        {hasLessonClipboard && (
+          <ContextMenuItem
+            disabled={pasteLessonsMutation.isPending}
+            onSelect={() => {
+              const targetSessionId = getActiveSessionId();
+              if (!targetSessionId) {
+                toast.error(t('contextMenu.selectSessionToPasteLessons'));
+                return;
+              }
+              pasteLessonsMutation.mutate({
+                targetSessionId,
+                lessonIds: copiedIds,
+              });
+            }}
+          >
+            {pasteLessonsMutation.isPending ? (
+              <Loader2 className="size-3.5 mr-2 animate-spin" />
+            ) : (
+              <Clipboard className="size-3.5 mr-2 text-muted-foreground" />
+            )}
+            {copiedIds.length > 1
+              ? t('contextMenu.pasteLessons', { count: copiedIds.length })
+              : t('contextMenu.pasteLesson')}
+          </ContextMenuItem>
+        )}
+      </ContextMenuContent>
+    </ContextMenu>
+  );
+}

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

@@ -3,7 +3,7 @@
 // ─────────────────────────────────────────────────────────────────────────────
 
 export type LessonType = 'video' | 'questao' | 'post' | 'exercicio';
-export type VideoProvider = 'youtube' | 'vimeo' | 'bunny' | 'custom';
+export type VideoProvider = 'youtube' | 'vimeo' | 'file_storage';
 export type ItemType = 'course' | 'session' | 'lesson';
 
 export type LessonStatus =
@@ -24,6 +24,7 @@ export interface Course {
   title: string;
   description: string;
   slug: string;
+  offeringType?: 'scheduled' | 'on_demand' | 'blended';
   published: boolean;
 }
 
@@ -40,6 +41,7 @@ export interface Session {
 
 export interface Resource {
   id: string;
+  fileId?: number;
   name: string;
   size: string;
   type: string;
@@ -71,6 +73,7 @@ export interface Lesson {
   videoUrl?: string;
   autoDuration?: boolean;
   transcription?: string;
+  videoConversionJobId?: number;
   // Questão
   linkedExam?: string;
   // Post

package/hedhog/frontend/app/courses/[id]/structure/_data/adapters/course-structure.adapter.ts.ejs

@@ -61,10 +61,20 @@ function normalizeLessonType(tipo: ApiLesson['tipo']): LessonType {
   return tipo as LessonType;
 }
 
+function normalizeVideoProvider(
+  provider?: ApiLesson['videoProvedor']
+): Lesson['videoProvider'] {
+  if (provider === 'youtube' || provider === 'vimeo') return provider;
+  if (provider === 'file_storage') return 'file_storage';
+  if (provider === 'bunny' || provider === 'custom') return 'file_storage';
+  return undefined;
+}
+
 /** Normalize a raw API resource to the frontend Resource shape. */
 function normalizeResource(raw: ApiLessonResource): Resource {
   return {
     id: String(raw.id),
+    fileId: raw.fileId ?? undefined,
     name: raw.nome,
     type: raw.tipo ?? '',
     /**
@@ -96,6 +106,7 @@ export function normalizeCourse(raw: ApiCourse): Course {
     title: raw.titulo,
     description: raw.descricao,
     slug: raw.slug,
+    offeringType: raw.offeringType,
     published: false,
   };
 }
@@ -149,10 +160,11 @@ export function normalizeLesson(raw: ApiLesson, order = 0): Lesson {
     duration: raw.duracao,
     sessionId: raw.sessaoId,
     order,
-    videoProvider: raw.videoProvedor,
+    videoProvider: normalizeVideoProvider(raw.videoProvedor),
     videoUrl: raw.videoUrl,
     autoDuration: raw.duracaoAutomatica,
     transcription: raw.transcricao,
+    videoConversionJobId: raw.videoConversionJobId,
     /**
      * ⚠️ TYPE MISMATCH: backend sends `exameVinculado` as number;
      * frontend uses `linkedExam` as string. Converted with String().
@@ -255,6 +267,7 @@ export function toUpdateSessionPayload(
 export function toCreateLessonPayload(
   data: LessonFormValues & {
     transcription?: string;
+    videoConversionJobId?: number;
     instructorIds?: number[];
     resources?: LessonResourceInput[];
   }
@@ -275,6 +288,9 @@ export function toCreateLessonPayload(
       duracaoAutomatica: data.autoDuration,
     }),
     ...(data.transcription && { transcricao: data.transcription }),
+    ...(data.videoConversionJobId !== undefined && {
+      videoConversionJobId: data.videoConversionJobId,
+    }),
     // ⚠️ TYPE MISMATCH: frontend stores linkedExam as string; backend expects number.
     ...(data.linkedExam && { exameVinculado: Number(data.linkedExam) }),
     ...(data.postContent && { conteudoPost: data.postContent }),
@@ -284,9 +300,11 @@ export function toCreateLessonPayload(
       recursos: data.resources.map((r) => ({
         nome: r.name,
         // Only include fileId when the id is a valid server-assigned integer.
-        ...(Number.isInteger(Number(r.id)) && Number(r.id) > 0
-          ? { fileId: Number(r.id) }
-          : {}),
+        ...(Number.isInteger(r.fileId ?? Number.NaN) && (r.fileId ?? 0) > 0
+          ? { fileId: r.fileId }
+          : Number.isInteger(Number(r.id)) && Number(r.id) > 0
+            ? { fileId: Number(r.id) }
+            : {}),
         ...(r.type ? { tipo: r.type } : {}),
         publico: r.public,
       })),
@@ -302,6 +320,7 @@ export function toUpdateLessonPayload(
   data: Partial<
     LessonFormValues & {
       transcription?: string;
+      videoConversionJobId?: number;
       instructorIds?: number[];
       resources?: LessonResourceInput[];
     }
@@ -323,6 +342,8 @@ export function toUpdateLessonPayload(
     payload.duracaoAutomatica = data.autoDuration;
   if (data.transcription !== undefined)
     payload.transcricao = data.transcription;
+  if (data.videoConversionJobId !== undefined)
+    payload.videoConversionJobId = data.videoConversionJobId;
   if (data.postContent !== undefined) payload.conteudoPost = data.postContent;
   if (data.code !== undefined) payload.codigo = data.code;
   if (data.instructorIds !== undefined)
@@ -337,9 +358,11 @@ export function toUpdateLessonPayload(
   if (data.resources !== undefined) {
     payload.recursos = data.resources.map((r) => ({
       nome: r.name,
-      ...(Number.isInteger(Number(r.id)) && Number(r.id) > 0
-        ? { fileId: Number(r.id) }
-        : {}),
+      ...(Number.isInteger(r.fileId ?? Number.NaN) && (r.fileId ?? 0) > 0
+        ? { fileId: r.fileId }
+        : Number.isInteger(Number(r.id)) && Number(r.id) > 0
+          ? { fileId: Number(r.id) }
+          : {}),
       ...(r.type ? { tipo: r.type } : {}),
       publico: r.public,
     }));