@hed-hog/lms 0.0.361 → 0.0.365

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

@@ -1,22 +1,30 @@
 'use client';
 
 import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
 import { Separator } from '@/components/ui/separator';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import { cn } from '@/lib/utils';
+import { useQueryClient } from '@tanstack/react-query';
 import {
   Clock,
   ExternalLink,
   FileText,
   HelpCircle,
-  Layers,
+  Loader2,
+  Mic,
   Paperclip,
   Video,
   type LucideIcon,
 } from 'lucide-react';
 import { useEffect, useState } from 'react';
+import { toast } from 'sonner';
 import { useLmsSettingsQuery } from '../_data/use-lms-settings-query';
-import { useTranscriptionSegmentsQuery } from '../_data/use-transcription-segments';
+import {
+  useStartTranscriptionMutation,
+  useTranscriptionSegmentsQuery,
+} from '../_data/use-transcription-segments';
+import { LessonXpTab } from './detail-lesson-xp-tab';
 import { useStructureStore } from './store';
 import type { LessonType } from './types';
 
@@ -42,12 +50,6 @@ const LESSON_TYPE_CONFIG: Record<
     bg: 'bg-amber-500/10',
     label: 'Quiz',
   },
-  exercicio: {
-    icon: Layers,
-    color: 'text-rose-500',
-    bg: 'bg-rose-500/10',
-    label: 'Exercício',
-  },
 };
 
 const VIDEO_PROVIDER_LABELS: Record<string, string> = {
@@ -77,9 +79,29 @@ export function DetailLesson({ lessonId }: DetailLessonProps) {
 
   const { data: segments = [], isLoading: segmentsLoading } =
     useTranscriptionSegmentsQuery(
-      activeTab === 'transcription' ? (lesson?.id ?? null) : null
+      activeTab === 'transcription' || activeTab === 'xp'
+        ? (lesson?.id ?? null)
+        : null
     );
 
+  const queryClient = useQueryClient();
+  const { mutate: startTranscription, isPending: isStarting } =
+    useStartTranscriptionMutation(lesson?.id ?? null);
+
+  const handleStartTranscription = () => {
+    startTranscription({
+      onSuccess: () => {
+        toast.success('Transcrição iniciada!');
+        queryClient.invalidateQueries({
+          queryKey: ['lesson-transcription-segments', lesson?.id],
+        });
+      },
+      onError: (err) => {
+        toast.error(err.message || 'Erro ao iniciar a transcrição.');
+      },
+    });
+  };
+
   if (!lesson) return null;
 
   const cfg = LESSON_TYPE_CONFIG[lesson.type];
@@ -124,6 +146,7 @@ export function DetailLesson({ lessonId }: DetailLessonProps) {
             <TabsTrigger value="transcription">Transcrição</TabsTrigger>
           )}
           <TabsTrigger value="resources">Recursos</TabsTrigger>
+          <TabsTrigger value="xp">XP</TabsTrigger>
         </TabsList>
 
         {/* ── Dados ─────────────────────────────────────────────────────────── */}
@@ -217,49 +240,67 @@ export function DetailLesson({ lessonId }: DetailLessonProps) {
                 </Section>
               </>
             )}
-
-            {!lesson.publicDescription &&
-              !lesson.privateDescription &&
-              lesson.type === 'exercicio' && (
-                <div className="flex flex-col items-center gap-2 py-8 text-center">
-                  <Layers className="size-8 text-muted-foreground/40" />
-                  <p className="text-sm text-muted-foreground">
-                    Sem informações adicionais nesta aula.
-                  </p>
-                </div>
-              )}
           </div>
         </TabsContent>
 
         {/* ── Transcrição ───────────────────────────────────────────────────── */}
-        {lmsSettings.transcriptionEnabled && <TabsContent
-          value="transcription"
+        {lmsSettings.transcriptionEnabled && (
+          <TabsContent
+            value="transcription"
+            className="flex-1 overflow-y-auto px-4 pb-4 mt-3"
+          >
+            <div className="flex justify-end mb-3">
+              <Button
+                size="sm"
+                variant="outline"
+                onClick={handleStartTranscription}
+                disabled={isStarting}
+              >
+                {isStarting ? (
+                  <Loader2 className="size-4 mr-2 animate-spin" />
+                ) : (
+                  <Mic className="size-4 mr-2" />
+                )}
+                Iniciar transcrição
+              </Button>
+            </div>
+            {segmentsLoading ? (
+              <div className="p-4 text-sm text-muted-foreground">
+                Carregando transcrição...
+              </div>
+            ) : segments.length ? (
+              <div className="space-y-1.5 p-3">
+                {segments.map((seg) => (
+                  <div key={seg.id} className="flex gap-3 text-sm">
+                    <span className="shrink-0 font-mono text-xs text-muted-foreground w-24">
+                      [{formatSeconds(seg.startSeconds)} –{' '}
+                      {formatSeconds(seg.endSeconds)}]
+                    </span>
+                    <span className="leading-relaxed">{seg.text}</span>
+                  </div>
+                ))}
+              </div>
+            ) : (
+              <EmptyState
+                icon={<FileText className="size-8 text-muted-foreground/40" />}
+              >
+                Transcrição não disponível para esta aula.
+              </EmptyState>
+            )}
+          </TabsContent>
+        )}
+
+        {/* ── XP da Aula ────────────────────────────────────────────────────── */}
+        <TabsContent
+          value="xp"
           className="flex-1 overflow-y-auto px-4 pb-4 mt-3"
         >
-          {segmentsLoading ? (
-            <div className="p-4 text-sm text-muted-foreground">
-              Carregando transcrição...
-            </div>
-          ) : segments.length ? (
-            <div className="space-y-1.5 p-3">
-              {segments.map((seg) => (
-                <div key={seg.id} className="flex gap-3 text-sm">
-                  <span className="shrink-0 font-mono text-xs text-muted-foreground w-24">
-                    [{formatSeconds(seg.startSeconds)} –{' '}
-                    {formatSeconds(seg.endSeconds)}]
-                  </span>
-                  <span className="leading-relaxed">{seg.text}</span>
-                </div>
-              ))}
-            </div>
-          ) : (
-            <EmptyState
-              icon={<FileText className="size-8 text-muted-foreground/40" />}
-            >
-              Transcrição não disponível para esta aula.
-            </EmptyState>
-          )}
-        </TabsContent>}
+          <LessonXpTab
+            lessonId={lesson.id}
+            activeTab={activeTab}
+            hasTranscription={segments.length > 0}
+          />
+        </TabsContent>
 
         {/* ── Recursos ──────────────────────────────────────────────────────── */}
         <TabsContent

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

@@ -10,7 +10,12 @@ import { EditorLesson } from './editor-lesson';
 import { EditorSession } from './editor-session';
 import { useStructureStore } from './store';
 
-export const DetailPanel = memo(function DetailPanel() {
+interface DetailPanelProps {
+  defaultTab?: string;
+  onTabChange?: (tab: string) => void;
+}
+
+export const DetailPanel = memo(function DetailPanel({ defaultTab, onTabChange }: DetailPanelProps) {
   const t = useTranslations('lms.CoursesPage.StructurePage');
   const { activeItemId, activeItemType, selectedIds } = useStructureStore();
 
@@ -47,7 +52,7 @@ export const DetailPanel = memo(function DetailPanel() {
   }
 
   if (activeItemType === 'course') {
-    return <EditorCourse />;
+    return <EditorCourse defaultTab={defaultTab} onTabChange={onTabChange} />;
   }
 
   if (activeItemType === 'session') {
@@ -55,7 +60,7 @@ export const DetailPanel = memo(function DetailPanel() {
   }
 
   if (activeItemType === 'lesson') {
-    return <EditorLesson lessonId={activeItemId} />;
+    return <EditorLesson lessonId={activeItemId} defaultTab={defaultTab} onTabChange={onTabChange} />;
   }
 
   return null;

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

@@ -18,10 +18,24 @@ const LESSON_TYPE_CONFIG: Record<
   LessonType,
   { icon: LucideIcon; color: string; label: string; bg: string }
 > = {
-  video:     { icon: Video,      color: 'text-blue-500',    label: 'Vídeo',     bg: 'bg-blue-500/10'    },
-  post:      { icon: FileText,   color: 'text-emerald-500', label: 'Post',      bg: 'bg-emerald-500/10' },
-  questao:   { icon: HelpCircle, color: 'text-amber-500',   label: 'Quiz',      bg: 'bg-amber-500/10'   },
-  exercicio: { icon: Layers,     color: 'text-rose-500',    label: 'Exercício', bg: 'bg-rose-500/10'    },
+  video: {
+    icon: Video,
+    color: 'text-blue-500',
+    label: 'Vídeo',
+    bg: 'bg-blue-500/10',
+  },
+  post: {
+    icon: FileText,
+    color: 'text-emerald-500',
+    label: 'Post',
+    bg: 'bg-emerald-500/10',
+  },
+  questao: {
+    icon: HelpCircle,
+    color: 'text-amber-500',
+    label: 'Quiz',
+    bg: 'bg-amber-500/10',
+  },
 };
 
 interface DetailSessionProps {
@@ -29,8 +43,14 @@ interface DetailSessionProps {
 }
 
 export function DetailSession({ sessionId }: DetailSessionProps) {
-  const session = useStructureStore((s) => s.sessions.find((ss) => ss.id === sessionId));
-  const lessons = useStructureStore((s) => s.lessons.filter((l) => l.sessionId === sessionId).sort((a, b) => a.order - b.order));
+  const session = useStructureStore((s) =>
+    s.sessions.find((ss) => ss.id === sessionId)
+  );
+  const lessons = useStructureStore((s) =>
+    s.lessons
+      .filter((l) => l.sessionId === sessionId)
+      .sort((a, b) => a.order - b.order)
+  );
   const selectItem = useStructureStore((s) => s.selectItem);
 
   if (!session) return null;
@@ -157,7 +177,10 @@ function LessonListItem({
           {lesson.duration}min
         </span>
       </div>
-      <Badge variant="outline" className="text-[0.55rem] px-1 py-0 h-4 shrink-0">
+      <Badge
+        variant="outline"
+        className="text-[0.55rem] px-1 py-0 h-4 shrink-0"
+      >
         {lesson.code}
       </Badge>
     </button>
@@ -171,4 +194,4 @@ function StatCard({ label, value }: { label: string; value: string | number }) {
       <span className="text-[0.65rem] text-muted-foreground">{label}</span>
     </div>
   );
-}
+}

package/hedhog/frontend/app/courses/[id]/structure/_components/drag-overlay.tsx.ejs

@@ -1,8 +1,14 @@
 'use client';
 
-import { DragOverlay as DndDragOverlay } from '@dnd-kit/core';
 import { cn } from '@/lib/utils';
-import { GripVertical, Layers, Video, FileText, HelpCircle } from 'lucide-react';
+import { DragOverlay as DndDragOverlay } from '@dnd-kit/core';
+import {
+  FileText,
+  GripVertical,
+  HelpCircle,
+  Layers,
+  Video,
+} from 'lucide-react';
 import type { FlatItem } from './types';
 
 interface DragOverlayContentProps {
@@ -11,13 +17,12 @@ interface DragOverlayContentProps {
 
 function DragOverlayContent({ item }: DragOverlayContentProps) {
   const isSession = item.type === 'session';
-  const isLesson  = item.type === 'lesson';
+  const isLesson = item.type === 'lesson';
 
   const lessonIconMap = {
-    video:     <Video     className="size-3.5 text-blue-500 shrink-0" />,
-    post:      <FileText  className="size-3.5 text-emerald-500 shrink-0" />,
-    questao:   <HelpCircle className="size-3.5 text-amber-500 shrink-0" />,
-    exercicio: <Layers    className="size-3.5 text-rose-500 shrink-0" />,
+    video: <Video className="size-3.5 text-blue-500 shrink-0" />,
+    post: <FileText className="size-3.5 text-emerald-500 shrink-0" />,
+    questao: <HelpCircle className="size-3.5 text-amber-500 shrink-0" />,
   } as const;
 
   return (
@@ -31,7 +36,9 @@ function DragOverlayContent({ item }: DragOverlayContentProps) {
     >
       <GripVertical className="size-3.5 text-muted-foreground/60 shrink-0" />
 
-      {isSession && <Layers className="size-3.5 text-muted-foreground shrink-0" />}
+      {isSession && (
+        <Layers className="size-3.5 text-muted-foreground shrink-0" />
+      )}
       {isLesson && item.type === 'lesson' && lessonIconMap[item.data.type]}
 
       <span className="truncate font-medium text-xs">{item.data.title}</span>
@@ -49,4 +56,4 @@ export function TreeDragOverlay({ activeItem }: TreeDragOverlayProps) {
       {activeItem ? <DragOverlayContent item={activeItem} /> : null}
     </DndDragOverlay>
   );
-}
+}