@hed-hog/lms 0.0.351 → 0.0.354

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

@@ -0,0 +1,95 @@
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+import { Badge } from '@/components/ui/badge';
+import { Users } from 'lucide-react';
+
+import { CourseSectionCard } from '../../_components/CourseSectionCard';
+
+type CourseInstructorSummary = {
+  id: number;
+  name: string;
+  avatarId: number | null;
+};
+
+type CourseInstructorsSummaryCardProps = {
+  instructors: CourseInstructorSummary[];
+  compact?: boolean;
+};
+
+function getInstructorAvatarUrl(avatarId?: number | null) {
+  return typeof avatarId === 'number' && avatarId > 0
+    ? `${process.env.NEXT_PUBLIC_API_BASE_URL}/person/avatar/${avatarId}`
+    : null;
+}
+
+function getInitials(label: string) {
+  return label
+    .split(' ')
+    .filter(Boolean)
+    .slice(0, 2)
+    .map((part) => part[0]?.toUpperCase() ?? '')
+    .join('');
+}
+
+export function CourseInstructorsSummaryCard({
+  instructors,
+  compact = false,
+}: CourseInstructorsSummaryCardProps) {
+  return (
+    <CourseSectionCard
+      title="Instrutores das aulas"
+      description="Agrupados a partir das aulas vinculadas ao curso."
+      icon={Users}
+      compact={compact}
+    >
+      {instructors.length > 0 ? (
+        <div className={compact ? 'space-y-2' : 'space-y-3'}>
+          <div className="flex flex-wrap gap-2">
+            <Badge variant="secondary" className="rounded-full px-3 py-1">
+              {instructors.length} instrutor
+              {instructors.length === 1 ? '' : 'es'}
+            </Badge>
+          </div>
+
+          <div
+            className={
+              compact
+                ? 'grid gap-2 sm:grid-cols-2 xl:grid-cols-3'
+                : 'grid gap-2 sm:grid-cols-2 xl:grid-cols-3'
+            }
+          >
+            {instructors.map((instructor) => (
+              <div
+                key={instructor.id}
+                className="flex items-center gap-3 rounded-xl border border-border/60 bg-background px-3 py-2.5"
+              >
+                <Avatar className="h-9 w-9 rounded-xl border border-border/60">
+                  <AvatarImage
+                    src={
+                      getInstructorAvatarUrl(instructor.avatarId) ?? undefined
+                    }
+                  />
+                  <AvatarFallback className="rounded-xl bg-muted text-xs font-semibold text-foreground">
+                    {getInitials(instructor.name || `ID ${instructor.id}`)}
+                  </AvatarFallback>
+                </Avatar>
+
+                <div className="min-w-0">
+                  <p className="truncate text-sm font-medium text-foreground">
+                    {instructor.name || `Instrutor #${instructor.id}`}
+                  </p>
+                  <p className="truncate text-xs text-muted-foreground">
+                    ID {instructor.id}
+                  </p>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      ) : (
+        <p className="text-sm text-muted-foreground">
+          Nenhum instrutor vinculado às aulas deste curso.
+        </p>
+      )}
+    </CourseSectionCard>
+  );
+}

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

@@ -31,7 +31,11 @@ import { TreeDragOverlay } from './drag-overlay';
 import { SortableTreeRow } from './sortable-tree-row';
 import { useStructureStore } from './store';
 import { TreeRootContextMenu } from './tree-context-menu';
-import { buildLessonCountMap, buildVisibleItems } from './tree-helpers';
+import {
+  buildLessonCountMap,
+  buildSessionIndicatorMap,
+  buildVisibleItems,
+} from './tree-helpers';
 import type { FlatItem } from './types';
 
 const ROW_HEIGHT: Record<FlatItem['type'], number> = {
@@ -74,6 +78,10 @@ export function CourseTreeDnd() {
   );
 
   const lessonCountMap = useMemo(() => buildLessonCountMap(lessons), [lessons]);
+  const sessionIndicatorMap = useMemo(
+    () => buildSessionIndicatorMap(lessons),
+    [lessons]
+  );
 
   const sortedSessions = useMemo(
     () => [...sessions].sort((a, b) => a.order - b.order),
@@ -160,20 +168,21 @@ export function CourseTreeDnd() {
 
         if (overItem.type === 'lesson') {
           toSessionId = overItem.data.sessionId;
-          // Position relative to lessons in the target session (visible order)
+          // Position relative to lessons in the target session (visible order),
+          // excluding the dragged item so the index matches what the store expects.
           const destLessons = items.filter(
             (i) =>
               i.type === 'lesson' &&
               i.data.sessionId === toSessionId &&
-              i.id !== active.id
+              i.id !== activeItem.id
           );
-          toIndex = destLessons.findIndex((i) => i.id === over.id);
+          toIndex = destLessons.findIndex((i) => i.id === overItem.id);
           if (toIndex === -1) toIndex = destLessons.length;
         } else if (overItem.type === 'session') {
           // Dropped directly onto a session header → append to that session
           toSessionId = overItem.data.id as string;
           const destLessons = lessons.filter(
-            (l) => l.sessionId === toSessionId && l.id !== active.id
+            (l) => l.sessionId === toSessionId && l.id !== activeItem.id
           );
           toIndex = destLessons.length;
         } else {
@@ -185,11 +194,9 @@ export function CourseTreeDnd() {
         // Snapshot before store mutation (optimistic)
         const previousLessons = [...lessons];
 
-        // Optimistic store update
-        moveLesson(String(activeItem.data.id), toSessionId, toIndex);
-
         if (didChangeSession) {
-          // Cross-session move
+          // Cross-session move — toIndex is in destLessons space (correct for API + store)
+          moveLesson(String(activeItem.data.id), toSessionId, toIndex);
           const targetSession = sessions.find((s) => s.id === toSessionId);
           moveLessonMutation.mutate({
             lessonId: String(activeItem.data.id),
@@ -202,17 +209,27 @@ export function CourseTreeDnd() {
             `Aula "${lessonData.title}" movida para "${targetSession?.title ?? toSessionId}"`
           );
         } else {
-          // Reorder within same session — compute new ordered IDs
+          // Same-session reorder — derive both indices from the full sessionLessons
+          // array so arrayMove and the store's splice are consistent.
           const sessionLessons = lessons
             .filter((l) => l.sessionId === toSessionId)
             .sort((a, b) => a.order - b.order);
           const fromLessonIdx = sessionLessons.findIndex(
             (l) => l.id === String(activeItem.data.id)
           );
+          const toLessonIdx = sessionLessons.findIndex(
+            (l) => l.id === overItem.id
+          );
+          if (fromLessonIdx === -1 || toLessonIdx === -1) return;
+
+          // Pass the full-array index so the store's splice produces the same
+          // result as arrayMove (inserting B after C, not before it).
+          moveLesson(String(activeItem.data.id), toSessionId, toLessonIdx);
+
           const orderedIds = arrayMove(
             sessionLessons,
             fromLessonIdx,
-            toIndex
+            toLessonIdx
           ).map((l) => l.id);
 
           reorderLessonsMutation.mutate({
@@ -355,6 +372,7 @@ export function CourseTreeDnd() {
                               expandedBySearch.has(item.id)
                             }
                             lessonCountMap={lessonCountMap}
+                            sessionIndicatorMap={sessionIndicatorMap}
                             visibleItems={items}
                             dragDisabled={dragDisabled}
                           />

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

@@ -7,6 +7,7 @@ import { useTranslations } from 'next-intl';
 import { forwardRef, useMemo } from 'react';
 import { useCreateSessionMutation } from '../_data/use-course-structure-mutations';
 import { CourseTreeDnd } from './course-tree-dnd';
+import { IconActionTooltip } from './icon-action-tooltip';
 import { MultiSelectBar } from './multi-select-bar';
 import { SearchFilter, type SearchFilterHandle } from './search-filter';
 import { useStructureStore } from './store';
@@ -50,44 +51,54 @@ export const CourseTreePanel = forwardRef<SearchFilterHandle>((_, ref) => {
           <SearchFilter ref={ref} resultCount={resultCount} />
         </div>
 
-        <Button
-          variant="ghost"
-          size="icon"
-          className={cn(
-            'size-8 shrink-0 transition-colors',
-            isFiltering && 'opacity-40 cursor-not-allowed pointer-events-none'
-          )}
-          title={
+        <IconActionTooltip
+          label={
             allExpanded
               ? t('tree.collapseAllShortcut')
               : t('tree.expandAllShortcut')
           }
-          aria-label={allExpanded ? t('tree.collapseAll') : t('tree.expandAll')}
-          onClick={allExpanded ? collapseAll : expandAll}
-          disabled={isFiltering}
+          asWrapper={isFiltering}
         >
-          {allExpanded ? (
-            <ChevronsDownUp className="size-3.5" />
-          ) : (
-            <ChevronsUpDown className="size-3.5" />
-          )}
-        </Button>
+          <Button
+            variant="ghost"
+            size="icon"
+            className={cn(
+              'size-8 shrink-0 transition-colors',
+              isFiltering && 'opacity-40 cursor-not-allowed pointer-events-none'
+            )}
+            aria-label={
+              allExpanded ? t('tree.collapseAll') : t('tree.expandAll')
+            }
+            onClick={allExpanded ? collapseAll : expandAll}
+            disabled={isFiltering}
+          >
+            {allExpanded ? (
+              <ChevronsDownUp className="size-3.5" />
+            ) : (
+              <ChevronsUpDown className="size-3.5" />
+            )}
+          </Button>
+        </IconActionTooltip>
 
-        <Button
-          variant="ghost"
-          size="icon"
-          className="size-8 shrink-0"
-          title={t('tree.addSession')}
-          aria-label={t('tree.addSession')}
-          disabled={createSession.isPending}
-          onClick={() => createSession.mutate()}
+        <IconActionTooltip
+          label={t('tree.addSession')}
+          asWrapper={createSession.isPending}
         >
-          {createSession.isPending ? (
-            <Loader2 className="size-3.5 animate-spin" />
-          ) : (
-            <Plus className="size-3.5" />
-          )}
-        </Button>
+          <Button
+            variant="ghost"
+            size="icon"
+            className="size-8 shrink-0"
+            aria-label={t('tree.addSession')}
+            disabled={createSession.isPending}
+            onClick={() => createSession.mutate()}
+          >
+            {createSession.isPending ? (
+              <Loader2 className="size-3.5 animate-spin" />
+            ) : (
+              <Plus className="size-3.5" />
+            )}
+          </Button>
+        </IconActionTooltip>
       </div>
 
       {/* Search results hint */}

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

@@ -5,7 +5,11 @@ import { SearchX } from 'lucide-react';
 import { useCallback, useMemo, useRef } from 'react';
 
 import { useStructureStore } from './store';
-import { buildLessonCountMap, buildVisibleItems } from './tree-helpers';
+import {
+  buildLessonCountMap,
+  buildSessionIndicatorMap,
+  buildVisibleItems,
+} from './tree-helpers';
 import { TreeRow } from './tree-row';
 import type { FlatItem } from './types';
 
@@ -36,6 +40,10 @@ export function CourseTree() {
   );
 
   const lessonCountMap = useMemo(() => buildLessonCountMap(lessons), [lessons]);
+  const sessionIndicatorMap = useMemo(
+    () => buildSessionIndicatorMap(lessons),
+    [lessons]
+  );
 
   const estimateSize = useCallback(
     (index: number) => ROW_HEIGHT[items[index]?.type ?? 'lesson'] ?? 32,
@@ -121,6 +129,7 @@ export function CourseTree() {
                       expandedIds.has(item.id) || expandedBySearch.has(item.id)
                     }
                     lessonCountMap={lessonCountMap}
+                    sessionIndicatorMap={sessionIndicatorMap}
                     visibleItems={items}
                   />
                 </div>

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

@@ -14,6 +14,9 @@ import {
   Video,
   type LucideIcon,
 } from 'lucide-react';
+import { useEffect, useState } from 'react';
+import { useLmsSettingsQuery } from '../_data/use-lms-settings-query';
+import { useTranscriptionSegmentsQuery } from '../_data/use-transcription-segments';
 import { useStructureStore } from './store';
 import type { LessonType } from './types';
 
@@ -63,6 +66,19 @@ export function DetailLesson({ lessonId }: DetailLessonProps) {
   const lesson = useStructureStore((s) =>
     s.lessons.find((l) => l.id === lessonId)
   );
+  const [activeTab, setActiveTab] = useState('dados');
+  const lmsSettings = useLmsSettingsQuery();
+
+  useEffect(() => {
+    if (!lmsSettings.transcriptionEnabled && activeTab === 'transcription') {
+      setActiveTab('dados');
+    }
+  }, [lmsSettings.transcriptionEnabled, activeTab]);
+
+  const { data: segments = [], isLoading: segmentsLoading } =
+    useTranscriptionSegmentsQuery(
+      activeTab === 'transcription' ? (lesson?.id ?? null) : null
+    );
 
   if (!lesson) return null;
 
@@ -97,10 +113,16 @@ export function DetailLesson({ lessonId }: DetailLessonProps) {
       </div>
 
       {/* Tabs */}
-      <Tabs defaultValue="dados" className="flex flex-col flex-1 min-h-0">
+      <Tabs
+        value={activeTab}
+        onValueChange={setActiveTab}
+        className="flex flex-col flex-1 min-h-0"
+      >
         <TabsList className="mx-4 mt-3 w-auto justify-start shrink-0">
           <TabsTrigger value="dados">Dados</TabsTrigger>
-          <TabsTrigger value="transcription">Transcrição</TabsTrigger>
+          {lmsSettings.transcriptionEnabled && (
+            <TabsTrigger value="transcription">Transcrição</TabsTrigger>
+          )}
           <TabsTrigger value="resources">Recursos</TabsTrigger>
         </TabsList>
 
@@ -210,15 +232,25 @@ export function DetailLesson({ lessonId }: DetailLessonProps) {
         </TabsContent>
 
         {/* ── Transcrição ───────────────────────────────────────────────────── */}
-        <TabsContent
+        {lmsSettings.transcriptionEnabled && <TabsContent
           value="transcription"
           className="flex-1 overflow-y-auto px-4 pb-4 mt-3"
         >
-          {lesson.transcription ? (
-            <div className="rounded-md border bg-muted/20 p-3">
-              <p className="text-sm leading-relaxed whitespace-pre-wrap font-mono">
-                {lesson.transcription}
-              </p>
+          {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
@@ -227,7 +259,7 @@ export function DetailLesson({ lessonId }: DetailLessonProps) {
               Transcrição não disponível para esta aula.
             </EmptyState>
           )}
-        </TabsContent>
+        </TabsContent>}
 
         {/* ── Recursos ──────────────────────────────────────────────────────── */}
         <TabsContent
@@ -312,3 +344,13 @@ function EmptyState({
     </div>
   );
 }
+
+function formatSeconds(s: number): string {
+  const h = Math.floor(s / 3600);
+  const m = Math.floor((s % 3600) / 60);
+  const sec = Math.floor(s % 60);
+
+  return h > 0
+    ? `${String(h).padStart(2, '0')}:${String(m).padStart(2, '0')}:${String(sec).padStart(2, '0')}`
+    : `${String(m).padStart(2, '0')}:${String(sec).padStart(2, '0')}`;
+}

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

@@ -5,6 +5,7 @@ import type { DraggableAttributes } from '@dnd-kit/core';
 import type { SyntheticListenerMap } from '@dnd-kit/core/dist/hooks/utilities';
 import { GripVertical } from 'lucide-react';
 import { useTranslations } from 'next-intl';
+import { IconActionTooltip } from './icon-action-tooltip';
 
 interface DragHandleProps {
   listeners?: SyntheticListenerMap;
@@ -27,34 +28,36 @@ export function DragHandle({
   const t = useTranslations('lms.CoursesPage.StructurePage.dragHandle');
   if (disabled) {
     return (
+      <IconActionTooltip label={t('disabled')}>
+        <span
+          className={cn(
+            'shrink-0 size-5 flex items-center justify-center opacity-20 cursor-not-allowed',
+            className
+          )}
+        >
+          <GripVertical className="size-3.5" />
+        </span>
+      </IconActionTooltip>
+    );
+  }
+
+  return (
+    <IconActionTooltip label={t('enabled')}>
       <span
+        {...listeners}
+        {...attributes}
         className={cn(
-          'shrink-0 size-5 flex items-center justify-center opacity-20 cursor-not-allowed',
+          'shrink-0 size-5 flex items-center justify-center rounded',
+          'text-muted-foreground/40 hover:text-muted-foreground',
+          'cursor-grab active:cursor-grabbing',
+          'transition-colors touch-none',
           className
         )}
-        title={t('disabled')}
+        // Prevent click events from bubbling to the row selection handler
+        onClick={(e) => e.stopPropagation()}
       >
         <GripVertical className="size-3.5" />
       </span>
-    );
-  }
-
-  return (
-    <span
-      {...listeners}
-      {...attributes}
-      className={cn(
-        'shrink-0 size-5 flex items-center justify-center rounded',
-        'text-muted-foreground/40 hover:text-muted-foreground',
-        'cursor-grab active:cursor-grabbing',
-        'transition-colors touch-none',
-        className
-      )}
-      title={t('enabled')}
-      // Prevent click events from bubbling to the row selection handler
-      onClick={(e) => e.stopPropagation()}
-    >
-      <GripVertical className="size-3.5" />
-    </span>
+    </IconActionTooltip>
   );
 }

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

@@ -28,6 +28,7 @@ import {
 import { Separator } from '@/components/ui/separator';
 import { cn } from '@/lib/utils';
 
+import { IconActionTooltip } from './icon-action-tooltip';
 import { useStructureStore } from './store';
 import type { LessonStatus, Visibility } from './types';
 
@@ -102,15 +103,17 @@ export function EditorBulk() {
             {t('types.selected')}
           </p>
         </div>
-        <Button
-          variant="ghost"
-          size="icon"
-          className="size-7 shrink-0"
-          onClick={clearSelection}
-          title={t('clearSelection')}
-        >
-          <X className="size-3.5" />
-        </Button>
+        <IconActionTooltip label={t('clearSelection')}>
+          <Button
+            variant="ghost"
+            size="icon"
+            className="size-7 shrink-0"
+            onClick={clearSelection}
+            aria-label={t('clearSelection')}
+          >
+            <X className="size-3.5" />
+          </Button>
+        </IconActionTooltip>
       </div>
 
       {/* ── Body ─────────────────────────────────────────────────────────── */}