@hed-hog/lms 0.0.314 → 0.0.316

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

@@ -1,52 +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>
-  );
+'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

@@ -1,276 +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>
-  );
-}
+'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>
+  );
+}