@hed-hog/lms 0.0.306 → 0.0.310

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

@@ -0,0 +1,134 @@
+'use client';
+
+import { useVirtualizer } from '@tanstack/react-virtual';
+import { SearchX } from 'lucide-react';
+import { useCallback, useMemo, useRef } from 'react';
+
+import { useStructureStore } from './store';
+import { buildLessonCountMap, buildVisibleItems } from './tree-helpers';
+import { TreeRow } from './tree-row';
+import type { FlatItem } from './types';
+
+// Row height estimates per node type (px)
+const ROW_HEIGHT: Record<FlatItem['type'], number> = {
+  course: 34,
+  session: 32,
+  lesson: 28,
+};
+
+export function CourseTree() {
+  const course = useStructureStore((s) => s.course);
+  const sessions = useStructureStore((s) => s.sessions);
+  const lessons = useStructureStore((s) => s.lessons);
+  const expandedIds = useStructureStore((s) => s.expandedIds);
+  const filterQuery = useStructureStore((s) => s.filterQuery);
+  const activeItemId = useStructureStore((s) => s.activeItemId);
+  const activeItemType = useStructureStore((s) => s.activeItemType);
+  const selectedIds = useStructureStore((s) => s.selectedIds);
+
+  const scrollRef = useRef<HTMLDivElement>(null);
+
+  // ── Derived state ───────────────────────────────────────────────────────────
+  const { items, matchedIds, expandedBySearch, resultCount } = useMemo(
+    () =>
+      buildVisibleItems(course, sessions, lessons, expandedIds, filterQuery),
+    [course, sessions, lessons, expandedIds, filterQuery]
+  );
+
+  const lessonCountMap = useMemo(() => buildLessonCountMap(lessons), [lessons]);
+
+  const estimateSize = useCallback(
+    (index: number) => ROW_HEIGHT[items[index]?.type ?? 'lesson'] ?? 32,
+    [items]
+  );
+
+  // ── Virtualizer ─────────────────────────────────────────────────────────────
+  // eslint-disable-next-line react-hooks/incompatible-library -- TanStack Virtual returns non-memoizable functions; this is expected and safe here
+  const virtualizer = useVirtualizer({
+    count: items.length,
+    getScrollElement: () => scrollRef.current,
+    estimateSize,
+    overscan: 8,
+  });
+
+  const isSearchActive = filterQuery.trim().length > 0;
+  const isEmpty = items.length === 0;
+
+  return (
+    <div className="flex flex-col h-full min-h-0">
+      {/* Result count bar */}
+      {isSearchActive && !isEmpty && (
+        <div className="px-3 py-1 shrink-0 border-b">
+          <span className="text-[0.65rem] text-muted-foreground">
+            {resultCount === 1 ? '1 resultado' : `${resultCount} resultados`}
+          </span>
+        </div>
+      )}
+
+      {/* Empty state */}
+      {isEmpty && (
+        <div className="flex flex-col items-center justify-center gap-2 py-12 px-4 text-center">
+          <SearchX className="size-8 text-muted-foreground/40" />
+          <p className="text-sm text-muted-foreground">
+            {isSearchActive
+              ? `Nenhum resultado para "${filterQuery.trim()}"`
+              : 'Nenhum item no curso.'}
+          </p>
+        </div>
+      )}
+
+      {/* Virtualised tree */}
+      {!isEmpty && (
+        <div
+          ref={scrollRef}
+          className="overflow-y-auto flex-1 min-h-0"
+          style={{ contain: 'strict' }}
+        >
+          <div
+            style={{
+              height: virtualizer.getTotalSize(),
+              width: '100%',
+              position: 'relative',
+            }}
+          >
+            {virtualizer.getVirtualItems().map((virtualRow) => {
+              const item = items[virtualRow.index];
+              if (!item) return null;
+
+              return (
+                <div
+                  key={virtualRow.key}
+                  data-index={virtualRow.index}
+                  style={{
+                    position: 'absolute',
+                    top: 0,
+                    left: 0,
+                    width: '100%',
+                    height: `${virtualRow.size}px`,
+                    transform: `translateY(${virtualRow.start}px)`,
+                    padding: '1px 4px',
+                  }}
+                >
+                  <TreeRow
+                    item={item}
+                    isActive={
+                      activeItemId === item.id && activeItemType === item.type
+                    }
+                    isSelected={selectedIds.has(`${item.type}:${item.id}`)}
+                    query={filterQuery}
+                    isMatched={matchedIds.has(item.id)}
+                    isEffectivelyExpanded={
+                      expandedIds.has(item.id) || expandedBySearch.has(item.id)
+                    }
+                    lessonCountMap={lessonCountMap}
+                    visibleItems={items}
+                  />
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,113 @@
+'use client';
+
+import { Badge } from '@/components/ui/badge';
+import { Separator } from '@/components/ui/separator';
+import { BookOpen, Globe, Hash, Tag } from 'lucide-react';
+import { useStructureStore } from './store';
+
+export function DetailCourse() {
+  const course = useStructureStore((s) => s.course);
+  const sessions = useStructureStore((s) => s.sessions);
+  const lessons = useStructureStore((s) => s.lessons);
+
+  const totalMinutes = lessons.reduce((sum, l) => sum + l.duration, 0);
+  const hours = Math.floor(totalMinutes / 60);
+  const minutes = totalMinutes % 60;
+
+  return (
+    <div className="flex flex-col overflow-y-auto h-full">
+      {/* Header */}
+      <div className="flex items-center gap-3 px-4 py-4 border-b bg-muted/30 shrink-0">
+        <div className="flex size-10 items-center justify-center rounded-lg bg-primary/10 shrink-0">
+          <BookOpen className="size-5 text-primary" />
+        </div>
+        <div className="min-w-0 flex-1">
+          <h2 className="text-base font-semibold truncate">{course.title}</h2>
+          <p className="text-xs text-muted-foreground">{course.slug}</p>
+        </div>
+        <Badge
+          variant={course.published ? 'default' : 'secondary'}
+          className="shrink-0"
+        >
+          {course.published ? 'Publicado' : 'Rascunho'}
+        </Badge>
+      </div>
+
+      <div className="flex flex-col gap-5 p-4">
+        {/* Stats */}
+        <div className="grid grid-cols-3 gap-3">
+          <StatCard label="Sessões" value={sessions.length} />
+          <StatCard label="Aulas" value={lessons.length} />
+          <StatCard
+            label="Duração"
+            value={hours > 0 ? `${hours}h ${minutes}m` : `${minutes}m`}
+          />
+        </div>
+
+        <Separator />
+
+        {/* Info */}
+        <div className="flex flex-col gap-2.5">
+          <InfoRow
+            icon={<Hash className="size-3.5" />}
+            label="Slug"
+            value={course.slug}
+          />
+          <InfoRow
+            icon={<Tag className="size-3.5" />}
+            label="Slug"
+            value={course.slug}
+          />
+          <InfoRow
+            icon={<Globe className="size-3.5" />}
+            label="Status"
+            value={course.published ? 'Publicado' : 'Rascunho'}
+          />
+        </div>
+
+        {course.description && (
+          <>
+            <Separator />
+            <div>
+              <p className="text-xs font-medium text-muted-foreground mb-1.5">
+                Descrição
+              </p>
+              <p className="text-sm leading-relaxed text-foreground/90">
+                {course.description}
+              </p>
+            </div>
+          </>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function StatCard({ label, value }: { label: string; value: string | number }) {
+  return (
+    <div className="flex flex-col items-center rounded-lg border bg-muted/30 py-3 gap-0.5">
+      <span className="text-lg font-bold tabular-nums">{value}</span>
+      <span className="text-[0.65rem] text-muted-foreground">{label}</span>
+    </div>
+  );
+}
+
+function InfoRow({
+  icon,
+  label,
+  value,
+}: {
+  icon: React.ReactNode;
+  label: string;
+  value: string;
+}) {
+  return (
+    <div className="flex items-center gap-2">
+      <span className="text-muted-foreground shrink-0">{icon}</span>
+      <span className="text-xs text-muted-foreground w-14 shrink-0">
+        {label}
+      </span>
+      <span className="text-sm truncate">{value}</span>
+    </div>
+  );
+}

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

@@ -0,0 +1,314 @@
+'use client';
+
+import { Badge } from '@/components/ui/badge';
+import { Separator } from '@/components/ui/separator';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { cn } from '@/lib/utils';
+import {
+  Clock,
+  ExternalLink,
+  FileText,
+  HelpCircle,
+  Layers,
+  Paperclip,
+  Video,
+  type LucideIcon,
+} from 'lucide-react';
+import { useStructureStore } from './store';
+import type { LessonType } from './types';
+
+const LESSON_TYPE_CONFIG: Record<
+  LessonType,
+  { icon: LucideIcon; color: string; bg: string; label: string }
+> = {
+  video: {
+    icon: Video,
+    color: 'text-blue-500',
+    bg: 'bg-blue-500/10',
+    label: 'Vídeo',
+  },
+  post: {
+    icon: FileText,
+    color: 'text-emerald-500',
+    bg: 'bg-emerald-500/10',
+    label: 'Post',
+  },
+  questao: {
+    icon: HelpCircle,
+    color: 'text-amber-500',
+    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> = {
+  youtube: 'YouTube',
+  vimeo: 'Vimeo',
+  panda: 'Panda Video',
+  bunny: 'Bunny.net',
+  outros: 'Outros',
+};
+
+interface DetailLessonProps {
+  lessonId: string;
+}
+
+export function DetailLesson({ lessonId }: DetailLessonProps) {
+  const lesson = useStructureStore((s) =>
+    s.lessons.find((l) => l.id === lessonId)
+  );
+
+  if (!lesson) return null;
+
+  const cfg = LESSON_TYPE_CONFIG[lesson.type];
+  const Icon = cfg.icon;
+
+  return (
+    <div className="flex flex-col h-full overflow-hidden">
+      {/* Header */}
+      <div className="flex items-center gap-3 px-4 py-4 border-b bg-muted/30 shrink-0">
+        <div
+          className={cn(
+            'flex size-10 items-center justify-center rounded-lg shrink-0',
+            cfg.bg
+          )}
+        >
+          <Icon className={cn('size-5', cfg.color)} />
+        </div>
+        <div className="min-w-0 flex-1">
+          <h2 className="text-base font-semibold truncate">{lesson.title}</h2>
+          <p className="text-xs text-muted-foreground">{lesson.code}</p>
+        </div>
+        <div className="flex items-center gap-1.5 shrink-0">
+          <Badge variant="outline" className={cn('text-xs', cfg.color)}>
+            {cfg.label}
+          </Badge>
+          <Badge variant="secondary" className="gap-1 text-xs">
+            <Clock className="size-3" />
+            {lesson.duration}min
+          </Badge>
+        </div>
+      </div>
+
+      {/* Tabs */}
+      <Tabs defaultValue="dados" 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>
+          <TabsTrigger value="resources">Recursos</TabsTrigger>
+        </TabsList>
+
+        {/* ── Dados ─────────────────────────────────────────────────────────── */}
+        <TabsContent
+          value="dados"
+          className="flex-1 overflow-y-auto px-4 pb-4 mt-3"
+        >
+          <div className="flex flex-col gap-4">
+            {lesson.publicDescription && (
+              <Section title="Descrição pública">
+                <p className="text-sm leading-relaxed">
+                  {lesson.publicDescription}
+                </p>
+              </Section>
+            )}
+
+            {lesson.privateDescription && (
+              <>
+                <Separator />
+                <Section title="Descrição interna">
+                  <p className="text-sm leading-relaxed text-muted-foreground">
+                    {lesson.privateDescription}
+                  </p>
+                </Section>
+              </>
+            )}
+
+            {/* Video */}
+            {lesson.type === 'video' && (
+              <>
+                <Separator />
+                <Section title="Configurações de vídeo">
+                  <div className="flex flex-col gap-2">
+                    {lesson.videoProvider && (
+                      <InfoRow
+                        label="Plataforma"
+                        value={
+                          VIDEO_PROVIDER_LABELS[lesson.videoProvider] ??
+                          lesson.videoProvider
+                        }
+                      />
+                    )}
+                    {lesson.videoUrl && (
+                      <div className="flex items-start gap-2">
+                        <span className="text-xs text-muted-foreground w-20 shrink-0 pt-0.5">
+                          URL
+                        </span>
+                        <a
+                          href={lesson.videoUrl}
+                          target="_blank"
+                          rel="noopener noreferrer"
+                          className="text-sm text-primary hover:underline flex items-center gap-1 truncate"
+                        >
+                          {lesson.videoUrl}
+                          <ExternalLink className="size-3 shrink-0" />
+                        </a>
+                      </div>
+                    )}
+                    {lesson.autoDuration !== undefined && (
+                      <InfoRow
+                        label="Duração auto"
+                        value={lesson.autoDuration ? 'Sim' : 'Não'}
+                      />
+                    )}
+                  </div>
+                </Section>
+              </>
+            )}
+
+            {/* Post */}
+            {lesson.type === 'post' && lesson.postContent && (
+              <>
+                <Separator />
+                <Section title="Conteúdo do post">
+                  <p className="text-sm leading-relaxed whitespace-pre-wrap">
+                    {lesson.postContent}
+                  </p>
+                </Section>
+              </>
+            )}
+
+            {/* Questão / exame vinculado */}
+            {lesson.type === 'questao' && lesson.linkedExam && (
+              <>
+                <Separator />
+                <Section title="Exame vinculado">
+                  <div className="flex items-center gap-2 text-sm">
+                    <HelpCircle className="size-3.5 text-amber-500 shrink-0" />
+                    <span>{lesson.linkedExam}</span>
+                  </div>
+                </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 ───────────────────────────────────────────────────── */}
+        <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>
+            </div>
+          ) : (
+            <EmptyState
+              icon={<FileText className="size-8 text-muted-foreground/40" />}
+            >
+              Transcrição não disponível para esta aula.
+            </EmptyState>
+          )}
+        </TabsContent>
+
+        {/* ── Recursos ──────────────────────────────────────────────────────── */}
+        <TabsContent
+          value="resources"
+          className="flex-1 overflow-y-auto px-4 pb-4 mt-3"
+        >
+          {lesson.resources && lesson.resources.length > 0 ? (
+            <div className="flex flex-col gap-2">
+              {lesson.resources.map((res) => (
+                <div
+                  key={res.id}
+                  className="flex items-center gap-2 rounded-md border px-3 py-2"
+                >
+                  <Paperclip className="size-3.5 text-muted-foreground shrink-0" />
+                  <span className="flex-1 text-sm truncate">{res.name}</span>
+                  {res.size && (
+                    <span className="text-[0.6rem] text-muted-foreground shrink-0">
+                      {res.size}
+                    </span>
+                  )}
+                  <Badge
+                    variant={res.public ? 'default' : 'secondary'}
+                    className="text-[0.6rem] px-1.5 py-0 h-4 shrink-0"
+                  >
+                    {res.public ? 'Público' : 'Privado'}
+                  </Badge>
+                </div>
+              ))}
+            </div>
+          ) : (
+            <EmptyState
+              icon={<Paperclip className="size-8 text-muted-foreground/40" />}
+            >
+              Nenhum recurso anexado a esta aula.
+            </EmptyState>
+          )}
+        </TabsContent>
+      </Tabs>
+    </div>
+  );
+}
+
+// ── Local helpers ─────────────────────────────────────────────────────────────
+
+function Section({
+  title,
+  children,
+}: {
+  title: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <div className="flex flex-col gap-1.5">
+      <p className="text-xs font-medium text-muted-foreground">{title}</p>
+      {children}
+    </div>
+  );
+}
+
+function InfoRow({ label, value }: { label: string; value: string }) {
+  return (
+    <div className="flex items-center gap-2">
+      <span className="text-xs text-muted-foreground w-20 shrink-0">
+        {label}
+      </span>
+      <span className="text-sm">{value}</span>
+    </div>
+  );
+}
+
+function EmptyState({
+  icon,
+  children,
+}: {
+  icon: React.ReactNode;
+  children: React.ReactNode;
+}) {
+  return (
+    <div className="flex flex-col items-center gap-2 py-12 text-center">
+      {icon}
+      <p className="text-sm text-muted-foreground">{children}</p>
+    </div>
+  );
+}

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

@@ -0,0 +1,62 @@
+'use client';
+
+import { BookOpen, Keyboard, MousePointerClick } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { memo } from 'react';
+
+import { EditorBulk } from './editor-bulk';
+import { EditorCourse } from './editor-course';
+import { EditorLesson } from './editor-lesson';
+import { EditorSession } from './editor-session';
+import { useStructureStore } from './store';
+
+export const DetailPanel = memo(function DetailPanel() {
+  const t = useTranslations('lms.CoursesPage.StructurePage');
+  const { activeItemId, activeItemType, selectedIds } = useStructureStore();
+
+  // Multi-select: show bulk editor when more than one item is selected
+  if (selectedIds.size > 1) {
+    return <EditorBulk />;
+  }
+
+  if (!activeItemId || !activeItemType) {
+    return (
+      <div className="flex flex-col items-center justify-center h-full gap-4 text-muted-foreground p-8">
+        <div className="flex size-16 items-center justify-center rounded-2xl bg-muted/60">
+          <BookOpen className="size-7 opacity-40" />
+        </div>
+        <div className="text-center space-y-1 max-w-[220px]">
+          <p className="text-sm font-medium text-foreground/70">
+            Nenhum item selecionado
+          </p>
+          <p className="text-xs text-muted-foreground leading-relaxed">
+            {t('detailPanel.emptyHint')}
+          </p>
+        </div>
+        <div className="flex flex-col items-center gap-2 mt-2">
+          <div className="flex items-center gap-1.5 text-[0.65rem] text-muted-foreground">
+            <MousePointerClick className="size-3" />
+            Clique para selecionar
+          </div>
+          <div className="flex items-center gap-1.5 text-[0.65rem] text-muted-foreground">
+            <Keyboard className="size-3" />↑ ↓ para navegar
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  if (activeItemType === 'course') {
+    return <EditorCourse />;
+  }
+
+  if (activeItemType === 'session') {
+    return <EditorSession sessionId={activeItemId} />;
+  }
+
+  if (activeItemType === 'lesson') {
+    return <EditorLesson lessonId={activeItemId} />;
+  }
+
+  return null;
+});