@hed-hog/lms 0.0.364 → 0.0.366

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

@@ -435,7 +435,7 @@ export function LessonXpTab({
             icon={<Cpu className="size-4 text-sky-600" />}
             total={xpMap.totalXp}
             items={areaDistribution}
-            toneClassName="bg-linear-to-r from-sky-500/10 via-sky-500/5 to-transparent"
+            toneClassName=""
           />
           <DistributionCard
             title="Skills"
@@ -443,7 +443,7 @@ export function LessonXpTab({
             icon={<Zap className="size-4 text-emerald-600" />}
             total={xpMap.totalXp}
             items={skillDistribution}
-            toneClassName="bg-linear-to-r from-emerald-500/10 via-emerald-500/5 to-transparent"
+            toneClassName=""
           />
           <TimelineCard
             segmentViews={segmentViews}
@@ -670,7 +670,7 @@ function TimelineCard({
 
   return (
     <Card className="min-w-0 overflow-hidden border-border/70 bg-card/95 py-0 gap-0! shadow-[0_18px_40px_-32px_rgba(15,23,42,0.45)] xl:col-span-2">
-      <CardHeader className="border-b border-border/60 bg-linear-to-r from-slate-500/10 via-slate-500/5 to-transparent pt-3 pb-1.5!">
+      <CardHeader className="border-b border-border/60 pt-3 pb-1.5!">
         <div className="flex items-center justify-between gap-3">
           <div>
             <CardTitle className="text-sm font-semibold">
@@ -761,7 +761,7 @@ function LearningTypesCard({ items }: { items: DistributionItem[] }) {
 
   return (
     <Card className="min-w-0 overflow-hidden border-border/70 bg-card/95 py-0 gap-0! shadow-[0_18px_40px_-32px_rgba(15,23,42,0.45)] xl:col-span-2">
-      <CardHeader className="border-b border-border/60 bg-linear-to-r from-violet-500/10 via-violet-500/5 to-transparent pt-3 pb-1.5!">
+      <CardHeader className="border-b border-border/60 pt-3 pb-1.5!">
         <div className="flex items-center justify-between gap-3">
           <CardTitle className="text-sm font-semibold">
             Tipos de aprendizado
@@ -775,7 +775,7 @@ function LearningTypesCard({ items }: { items: DistributionItem[] }) {
         {items.map((item) => (
           <div
             key={item.id}
-            className="flex h-full flex-col justify-start gap-1.5 rounded-xl border border-border/60 bg-muted/20 px-2.5 py-2 text-xs shadow-sm transition-all duration-200 hover:-translate-y-0.5 hover:border-violet-500/20 hover:bg-background/95 hover:shadow-md"
+            className="flex h-full flex-col justify-start gap-1.5 rounded-xl border border-border/60 bg-muted/20 px-2.5 py-2 text-xs shadow-sm transition-all duration-200 hover:-translate-y-0.5 hover:border-border/80 hover:bg-background/95 hover:shadow-md"
           >
             <div className="flex flex-wrap items-center justify-between gap-2">
               <span className="min-w-0 flex-1 font-medium">{item.label}</span>
@@ -813,7 +813,7 @@ function SegmentsSection({
 }) {
   return (
     <Card className="min-w-0 overflow-hidden border-border/70 bg-card/95 py-0 gap-0! shadow-[0_18px_40px_-32px_rgba(15,23,42,0.45)]">
-      <CardHeader className="border-b border-border/60 bg-linear-to-r from-cyan-500/10 via-cyan-500/5 to-transparent pt-3 pb-1.5!">
+      <CardHeader className="border-b border-border/60 pt-3 pb-1.5!">
         <div className="flex items-center justify-between gap-3">
           <CardTitle className="text-sm font-semibold">
             Segmentos ({segments.length})
@@ -829,14 +829,14 @@ function SegmentsSection({
             <div
               key={segment.id}
               className={cn(
-                'flex flex-col gap-2 rounded-2xl border border-border/60 bg-linear-to-br from-background via-background to-muted/25 px-3 py-2.5 text-xs shadow-[0_16px_30px_-24px_rgba(15,23,42,0.45)] transition-all duration-200 hover:-translate-y-0.5 hover:border-cyan-500/15 hover:to-muted/35 hover:shadow-[0_20px_36px_-24px_rgba(15,23,42,0.52)]',
+                'flex flex-col gap-2 rounded-2xl border border-border/60 bg-card/90 px-3 py-2.5 text-xs shadow-[0_16px_30px_-24px_rgba(15,23,42,0.45)] transition-all duration-200 hover:-translate-y-0.5 hover:border-border/80 hover:shadow-[0_20px_36px_-24px_rgba(15,23,42,0.52)]',
                 !segment.shouldGrantXp && 'opacity-50'
               )}
             >
               <div className="flex flex-wrap items-start justify-between gap-2">
                 <div className="flex min-w-0 flex-col gap-1">
                   <div className="flex flex-wrap items-center gap-1.5">
-                    <span className="rounded-full border border-cyan-500/15 bg-cyan-500/10 px-2 py-0.5 text-[10px] font-semibold uppercase tracking-[0.14em] text-cyan-700 transition-all duration-200 hover:bg-cyan-500/15 hover:shadow-sm dark:text-cyan-300">
+                    <span className="rounded-full border border-border/60 bg-muted/30 px-2 py-0.5 text-[10px] font-semibold uppercase tracking-[0.14em] text-muted-foreground">
                       {segment.label}
                     </span>
                     <span className="rounded-full border border-border/60 bg-background/90 px-2 py-0.5 font-mono text-[10px] text-muted-foreground shadow-sm transition-all duration-200 hover:border-border hover:bg-background hover:text-foreground hover:shadow-md">
@@ -856,7 +856,7 @@ function SegmentsSection({
                 </div>
 
                 <div className="flex flex-wrap items-center justify-end gap-1.5">
-                  <span className="rounded-full border border-amber-500/15 bg-amber-500/10 px-2 py-0.5 text-[10px] font-semibold uppercase tracking-[0.14em] text-amber-700 dark:text-amber-300">
+                  <span className="rounded-full border border-border/60 bg-muted/30 px-2 py-0.5 text-[10px] font-semibold uppercase tracking-[0.14em] text-muted-foreground">
                     {segment.xpValue} XP
                   </span>
                   <DifficultyBadge difficulty={segment.difficulty} />
@@ -1031,14 +1031,7 @@ function MetricPill({
   value: string;
   tone?: 'default' | 'sky' | 'emerald' | 'violet';
 }) {
-  const toneClassName =
-    tone === 'sky'
-      ? 'border-sky-500/15 bg-sky-500/10 text-sky-700 dark:text-sky-300'
-      : tone === 'emerald'
-        ? 'border-emerald-500/15 bg-emerald-500/10 text-emerald-700 dark:text-emerald-300'
-        : tone === 'violet'
-          ? 'border-violet-500/15 bg-violet-500/10 text-violet-700 dark:text-violet-300'
-          : 'border-border/60 bg-muted/40 text-foreground';
+  const toneClassName = 'border-border/60 bg-muted/40 text-foreground';
 
   return (
     <div
@@ -1069,12 +1062,7 @@ function SegmentBreakdownGroup({
     color: string;
   }>;
 }) {
-  const toneClassName =
-    tone === 'sky'
-      ? 'border-sky-500/15 bg-sky-500/8'
-      : tone === 'emerald'
-        ? 'border-emerald-500/15 bg-emerald-500/8'
-        : 'border-violet-500/15 bg-violet-500/8';
+  const toneClassName = 'border-border/60 bg-muted/20';
 
   if (!items.length) {
     return null;

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

@@ -11,7 +11,6 @@ import {
   ExternalLink,
   FileText,
   HelpCircle,
-  Layers,
   Loader2,
   Mic,
   Paperclip,
@@ -25,8 +24,8 @@ import {
   useStartTranscriptionMutation,
   useTranscriptionSegmentsQuery,
 } from '../_data/use-transcription-segments';
-import { useStructureStore } from './store';
 import { LessonXpTab } from './detail-lesson-xp-tab';
+import { useStructureStore } from './store';
 import type { LessonType } from './types';
 
 const LESSON_TYPE_CONFIG: Record<
@@ -51,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> = {
@@ -86,7 +79,9 @@ export function DetailLesson({ lessonId }: DetailLessonProps) {
 
   const { data: segments = [], isLoading: segmentsLoading } =
     useTranscriptionSegmentsQuery(
-      activeTab === 'transcription' || activeTab === 'xp' ? (lesson?.id ?? null) : null
+      activeTab === 'transcription' || activeTab === 'xp'
+        ? (lesson?.id ?? null)
+        : null
     );
 
   const queryClient = useQueryClient();
@@ -97,7 +92,9 @@ export function DetailLesson({ lessonId }: DetailLessonProps) {
     startTranscription({
       onSuccess: () => {
         toast.success('Transcrição iniciada!');
-        queryClient.invalidateQueries({ queryKey: ['lesson-transcription-segments', lesson?.id] });
+        queryClient.invalidateQueries({
+          queryKey: ['lesson-transcription-segments', lesson?.id],
+        });
       },
       onError: (err) => {
         toast.error(err.message || 'Erro ao iniciar a transcrição.');
@@ -243,64 +240,55 @@ 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"
-          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...
+        {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>
-          ) : 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>}
+            {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

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>
   );
-}
+}