@hed-hog/lms 0.0.306 → 0.0.310

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

@@ -0,0 +1,174 @@
+'use client';
+
+import { Badge } from '@/components/ui/badge';
+import { Separator } from '@/components/ui/separator';
+import { cn } from '@/lib/utils';
+import {
+  Clock,
+  FileText,
+  HelpCircle,
+  Layers,
+  Video,
+  type LucideIcon,
+} from 'lucide-react';
+import { useStructureStore } from './store';
+import type { Lesson, LessonType } from './types';
+
+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'    },
+};
+
+interface DetailSessionProps {
+  sessionId: string;
+}
+
+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 selectItem = useStructureStore((s) => s.selectItem);
+
+  if (!session) return null;
+
+  const totalMinutes = lessons.reduce((sum, l) => sum + l.duration, 0);
+  const hours = Math.floor(totalMinutes / 60);
+  const minutes = totalMinutes % 60;
+
+  const typeCounts = lessons.reduce<Partial<Record<LessonType, number>>>(
+    (acc, l) => ({ ...acc, [l.type]: (acc[l.type] ?? 0) + 1 }),
+    {}
+  );
+
+  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-muted shrink-0">
+          <Layers className="size-5 text-muted-foreground" />
+        </div>
+        <div className="min-w-0 flex-1">
+          <h2 className="text-base font-semibold truncate">{session.title}</h2>
+          <p className="text-xs text-muted-foreground">{session.code}</p>
+        </div>
+      </div>
+
+      <div className="flex flex-col gap-5 p-4">
+        {/* Stats */}
+        <div className="grid grid-cols-2 gap-3">
+          <StatCard label="Aulas" value={lessons.length} />
+          <StatCard
+            label="Duração"
+            value={hours > 0 ? `${hours}h ${minutes}m` : `${minutes}m`}
+          />
+        </div>
+
+        {/* Type breakdown */}
+        {Object.entries(typeCounts).length > 0 && (
+          <>
+            <Separator />
+            <div>
+              <p className="text-xs font-medium text-muted-foreground mb-2">
+                Tipos de aula
+              </p>
+              <div className="flex flex-wrap gap-2">
+                {(Object.entries(typeCounts) as [LessonType, number][]).map(
+                  ([type, count]) => {
+                    const cfg = LESSON_TYPE_CONFIG[type];
+                    const Icon = cfg.icon;
+                    return (
+                      <div
+                        key={type}
+                        className={cn(
+                          'flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs',
+                          cfg.bg
+                        )}
+                      >
+                        <Icon className={cn('size-3', cfg.color)} />
+                        <span className={cfg.color}>{cfg.label}</span>
+                        <span className="font-semibold">{count}</span>
+                      </div>
+                    );
+                  }
+                )}
+              </div>
+            </div>
+          </>
+        )}
+
+        {/* Lesson list */}
+        {lessons.length > 0 && (
+          <>
+            <Separator />
+            <div>
+              <p className="text-xs font-medium text-muted-foreground mb-2">
+                Aulas
+              </p>
+              <div className="flex flex-col gap-0.5">
+                {lessons.map((lesson) => (
+                  <LessonListItem
+                    key={lesson.id}
+                    lesson={lesson}
+                    onSelect={() => selectItem(lesson.id, 'lesson')}
+                  />
+                ))}
+              </div>
+            </div>
+          </>
+        )}
+
+        {lessons.length === 0 && (
+          <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">
+              Esta sessão ainda não tem aulas.
+            </p>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function LessonListItem({
+  lesson,
+  onSelect,
+}: {
+  lesson: Lesson;
+  onSelect: () => void;
+}) {
+  const cfg = LESSON_TYPE_CONFIG[lesson.type];
+  const Icon = cfg.icon;
+
+  return (
+    <button
+      onClick={onSelect}
+      className="flex items-center gap-2 px-2 py-1.5 rounded-md hover:bg-muted/60 cursor-pointer transition-colors text-left w-full"
+    >
+      <Icon className={cn('size-3.5 shrink-0', cfg.color)} />
+      <span className="text-sm flex-1 truncate">{lesson.title}</span>
+      <div className="flex items-center gap-1 shrink-0">
+        <Clock className="size-3 text-muted-foreground" />
+        <span className="text-[0.6rem] text-muted-foreground">
+          {lesson.duration}min
+        </span>
+      </div>
+      <Badge variant="outline" className="text-[0.55rem] px-1 py-0 h-4 shrink-0">
+        {lesson.code}
+      </Badge>
+    </button>
+  );
+}
+
+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>
+  );
+}

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

@@ -0,0 +1,58 @@
+'use client';
+
+import { cn } from '@/lib/utils';
+import type { DraggableAttributes } from '@dnd-kit/core';
+import type { SyntheticListenerMap } from '@dnd-kit/core/dist/hooks/utilities';
+import { GripVertical } from 'lucide-react';
+
+interface DragHandleProps {
+  listeners?: SyntheticListenerMap;
+  attributes?: DraggableAttributes;
+  disabled?: boolean;
+  className?: string;
+}
+
+/**
+ * Grip handle for drag-and-drop.
+ * Attach the dnd-kit `listeners` and `attributes` to this element so that
+ * clicking elsewhere (expand button, context menu, etc.) does NOT start a drag.
+ */
+export function DragHandle({
+  listeners,
+  attributes,
+  disabled,
+  className,
+}: DragHandleProps) {
+  if (disabled) {
+    return (
+      <span
+        className={cn(
+          'shrink-0 size-5 flex items-center justify-center opacity-20 cursor-not-allowed',
+          className
+        )}
+        title="Limpe a busca para reordenar"
+      >
+        <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="Arrastar para reordenar"
+      // Prevent click events from bubbling to the row selection handler
+      onClick={(e) => e.stopPropagation()}
+    >
+      <GripVertical className="size-3.5" />
+    </span>
+  );
+}

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

@@ -0,0 +1,52 @@
+'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 type { FlatItem } from './types';
+
+interface DragOverlayContentProps {
+  item: FlatItem;
+}
+
+function DragOverlayContent({ item }: DragOverlayContentProps) {
+  const isSession = item.type === 'session';
+  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" />,
+  } as const;
+
+  return (
+    <div
+      className={cn(
+        'flex items-center gap-1.5 px-2 py-1.5 rounded-md text-sm',
+        'bg-card border shadow-lg ring-1 ring-primary/20',
+        'opacity-95 max-w-[260px]',
+        isLesson && 'pl-4'
+      )}
+    >
+      <GripVertical className="size-3.5 text-muted-foreground/60 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>
+    </div>
+  );
+}
+
+interface TreeDragOverlayProps {
+  activeItem: FlatItem | null;
+}
+
+export function TreeDragOverlay({ activeItem }: TreeDragOverlayProps) {
+  return (
+    <DndDragOverlay dropAnimation={{ duration: 150, easing: 'ease' }}>
+      {activeItem ? <DragOverlayContent item={activeItem} /> : null}
+    </DndDragOverlay>
+  );
+}

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

@@ -0,0 +1,276 @@
+'use client';
+
+import {
+  Eye,
+  EyeOff,
+  FolderInput,
+  Layers,
+  Lock,
+  Save,
+  Video,
+  X,
+} from 'lucide-react';
+import { useState } from 'react';
+import { toast } from 'sonner';
+
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { ScrollArea } from '@/components/ui/scroll-area';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { Separator } from '@/components/ui/separator';
+import { cn } from '@/lib/utils';
+
+import { useStructureStore } from './store';
+import type { LessonStatus, Visibility } from './types';
+
+// ── Config ────────────────────────────────────────────────────────────────────
+
+const STATUS_LABELS: Record<LessonStatus, string> = {
+  preparada: 'Preparada',
+  gravada: 'Gravada',
+  editada: 'Editada',
+  finalizada: 'Finalizada',
+  publicada: 'Publicada',
+};
+
+// ── Component ─────────────────────────────────────────────────────────────────
+
+export function EditorBulk() {
+  const selectedIds = useStructureStore((s) => s.selectedIds);
+  const sessions = useStructureStore((s) => s.sessions);
+  const lessons = useStructureStore((s) => s.lessons);
+  const clearSelection = useStructureStore((s) => s.clearSelection);
+
+  const selectedArray = [...selectedIds];
+  const lessonIds = selectedArray.filter((id) =>
+    lessons.some((l) => l.id === id)
+  );
+  const sessionIds = selectedArray.filter((id) =>
+    sessions.some((s) => s.id === id)
+  );
+
+  const allLessons = lessonIds.length === selectedArray.length;
+  const allSessions = sessionIds.length === selectedArray.length;
+
+  // Local form state (mock — not wired to store actions yet)
+  const [status, setStatus] = useState<LessonStatus | ''>('');
+  const [visibility, setVisibility] = useState<Visibility | ''>('');
+  const [targetSession, setTargetSession] = useState<string>('');
+
+  function handleSave() {
+    const lines: string[] = [];
+    if (status) lines.push(`status → ${STATUS_LABELS[status as LessonStatus]}`);
+    if (visibility) lines.push(`visibilidade → ${visibility}`);
+    if (targetSession)
+      lines.push(
+        `mover para sessão ${sessions.find((s) => s.id === targetSession)?.title ?? targetSession}`
+      );
+    toast.success(
+      lines.length
+        ? `Edição em massa: ${lines.join(', ')} (mock)`
+        : 'Nenhuma alteração selecionada'
+    );
+  }
+
+  return (
+    <div 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-primary/10 shrink-0">
+          {allLessons ? (
+            <Video className="size-4 text-primary" />
+          ) : allSessions ? (
+            <Layers className="size-4 text-primary" />
+          ) : (
+            <Layers className="size-4 text-primary" />
+          )}
+        </div>
+        <div className="flex-1 min-w-0">
+          <p className="text-sm font-semibold">Edição em massa</p>
+          <p className="text-[0.65rem] text-muted-foreground">
+            {selectedIds.size}{' '}
+            {allLessons ? 'aulas' : allSessions ? 'sessões' : 'itens'}{' '}
+            selecionados
+          </p>
+        </div>
+        <Button
+          variant="ghost"
+          size="icon"
+          className="size-7 shrink-0"
+          onClick={clearSelection}
+          title="Limpar seleção"
+        >
+          <X className="size-3.5" />
+        </Button>
+      </div>
+
+      {/* ── Body ─────────────────────────────────────────────────────────── */}
+      <ScrollArea className="flex-1 min-h-0">
+        <div className="flex flex-col gap-3 p-3">
+          {/* Badges dos itens selecionados */}
+          <div className="flex flex-wrap gap-1">
+            {selectedArray.slice(0, 12).map((id) => {
+              const lesson = lessons.find((l) => l.id === id);
+              const session = sessions.find((s) => s.id === id);
+              const label = lesson?.code ?? session?.code ?? id;
+              const isLesson = !!lesson;
+              return (
+                <Badge
+                  key={id}
+                  variant="secondary"
+                  className={cn(
+                    'text-[0.65rem] h-5',
+                    isLesson
+                      ? 'bg-blue-100 text-blue-700 dark:bg-blue-900 dark:text-blue-300'
+                      : 'bg-muted'
+                  )}
+                >
+                  {label}
+                </Badge>
+              );
+            })}
+            {selectedArray.length > 12 && (
+              <Badge variant="outline" className="text-[0.65rem] h-5">
+                +{selectedArray.length - 12} mais
+              </Badge>
+            )}
+          </div>
+
+          {/* Status — só mostra para aulas */}
+          {(allLessons || (!allSessions && lessonIds.length > 0)) && (
+            <Card>
+              <CardHeader className="px-3 pt-3 pb-2">
+                <CardTitle className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
+                  Status de produção
+                </CardTitle>
+              </CardHeader>
+              <CardContent className="px-3 pb-3">
+                <Select
+                  value={status}
+                  onValueChange={(v) => setStatus(v as LessonStatus)}
+                >
+                  <SelectTrigger className="h-8 text-xs w-full">
+                    <SelectValue placeholder="Manter atual" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="preparada">Preparada</SelectItem>
+                    <SelectItem value="gravada">Gravada</SelectItem>
+                    <SelectItem value="editada">Editada</SelectItem>
+                    <SelectItem value="finalizada">Finalizada</SelectItem>
+                    <SelectItem value="publicada">Publicada</SelectItem>
+                  </SelectContent>
+                </Select>
+              </CardContent>
+            </Card>
+          )}
+
+          {/* Visibilidade */}
+          <Card>
+            <CardHeader className="px-3 pt-3 pb-2">
+              <CardTitle className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
+                Visibilidade
+              </CardTitle>
+            </CardHeader>
+            <CardContent className="px-3 pb-3">
+              <Select
+                value={visibility}
+                onValueChange={(v) => setVisibility(v as Visibility)}
+              >
+                <SelectTrigger className="h-8 text-xs w-full">
+                  <SelectValue placeholder="Manter atual" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="publico">
+                    <span className="flex items-center gap-1.5">
+                      <Eye className="size-3" /> Público
+                    </span>
+                  </SelectItem>
+                  <SelectItem value="privado">
+                    <span className="flex items-center gap-1.5">
+                      <EyeOff className="size-3" /> Privado
+                    </span>
+                  </SelectItem>
+                  <SelectItem value="restrito">
+                    <span className="flex items-center gap-1.5">
+                      <Lock className="size-3" /> Restrito
+                    </span>
+                  </SelectItem>
+                </SelectContent>
+              </Select>
+            </CardContent>
+          </Card>
+
+          {/* Mover para sessão — só para aulas */}
+          {(allLessons || lessonIds.length > 0) && (
+            <Card>
+              <CardHeader className="px-3 pt-3 pb-2">
+                <CardTitle className="text-xs font-medium text-muted-foreground uppercase tracking-wider flex items-center gap-1.5">
+                  <FolderInput className="size-3" />
+                  Mover para sessão
+                </CardTitle>
+              </CardHeader>
+              <CardContent className="px-3 pb-3">
+                <Select value={targetSession} onValueChange={setTargetSession}>
+                  <SelectTrigger className="h-8 text-xs w-full">
+                    <SelectValue placeholder="Selecionar sessão…" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {sessions.map((s) => (
+                      <SelectItem key={s.id} value={s.id}>
+                        <span className="font-mono mr-1 text-muted-foreground">
+                          {s.code}
+                        </span>
+                        {s.title}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </CardContent>
+            </Card>
+          )}
+
+          <div className="rounded-md border border-amber-200 bg-amber-50/60 dark:border-amber-800 dark:bg-amber-950/30 px-3 py-2">
+            <p className="text-[0.65rem] text-amber-700 dark:text-amber-400">
+              As alterações em massa ainda não estão integradas com a API.
+              Clique em salvar para ver a pré-visualização.
+            </p>
+          </div>
+        </div>
+      </ScrollArea>
+
+      {/* ── Footer ───────────────────────────────────────────────────────── */}
+      <div className="shrink-0 border-t bg-background">
+        <Separator />
+        <div className="flex items-center gap-2 px-3 py-2">
+          <Button
+            type="button"
+            variant="ghost"
+            size="sm"
+            className="h-7 text-xs"
+            onClick={clearSelection}
+          >
+            <X className="size-3 mr-1" />
+            Limpar seleção
+          </Button>
+          <div className="flex-1" />
+          <Button
+            type="button"
+            size="sm"
+            className="h-7 text-xs"
+            onClick={handleSave}
+          >
+            <Save className="size-3 mr-1" />
+            Aplicar (mock)
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}