@hed-hog/lms 0.0.306 → 0.0.309

package/hedhog/frontend/app/courses/[id]/structure/_components/confirm-dialog.tsx.ejs

@@ -0,0 +1,45 @@
+'use client';
+
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '@/components/ui/alert-dialog';
+import { useStructureStore } from './store';
+
+export function ConfirmDialog() {
+  const confirmDialog = useStructureStore((s) => s.confirmDialog);
+  const closeConfirm  = useStructureStore((s) => s.closeConfirm);
+
+  function handleConfirm() {
+    confirmDialog.onConfirm?.();
+    closeConfirm();
+  }
+
+  return (
+    <AlertDialog open={confirmDialog.open} onOpenChange={(open) => !open && closeConfirm()}>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>{confirmDialog.title}</AlertDialogTitle>
+          {confirmDialog.description && (
+            <AlertDialogDescription>{confirmDialog.description}</AlertDialogDescription>
+          )}
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel onClick={closeConfirm}>Cancelar</AlertDialogCancel>
+          <AlertDialogAction
+            onClick={handleConfirm}
+            className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+          >
+            Excluir
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+}

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

@@ -0,0 +1,362 @@
+'use client';
+
+import {
+  closestCenter,
+  DndContext,
+  KeyboardSensor,
+  PointerSensor,
+  useSensor,
+  useSensors,
+  type DragEndEvent,
+  type DragStartEvent,
+} from '@dnd-kit/core';
+import {
+  arrayMove,
+  SortableContext,
+  sortableKeyboardCoordinates,
+  verticalListSortingStrategy,
+} from '@dnd-kit/sortable';
+import { useCallback, useMemo, useState } from 'react';
+import { toast } from 'sonner';
+
+import { Button } from '@/components/ui/button';
+import { Layers, Loader2, Plus, SearchX } from 'lucide-react';
+import {
+  useCreateSessionMutation,
+  useMoveLessonMutation,
+  useReorderLessonsMutation,
+  useReorderSessionsMutation,
+} from '../_data/use-course-structure-mutations';
+import { TreeDragOverlay } from './drag-overlay';
+import { SortableTreeRow } from './sortable-tree-row';
+import { useStructureStore } from './store';
+import { buildLessonCountMap, buildVisibleItems } from './tree-helpers';
+import type { FlatItem } from './types';
+
+const ROW_HEIGHT: Record<FlatItem['type'], number> = {
+  course: 34,
+  session: 32,
+  lesson: 28,
+};
+
+/**
+ * DnD-aware tree that wraps the virtualised list with dnd-kit context.
+ * NOTE: Because dnd-kit and react-virtual don't share a single scroll ref,
+ * we use a standard overflow list here (the virtual approach is kept intact
+ * in the non-DnD path inside CourseTree).
+ * For typical course sizes (< 500 items) this renders fine.
+ */
+export function CourseTreeDnd() {
+  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 reorderSessions = useStructureStore((s) => s.reorderSessions);
+  const moveLesson = useStructureStore((s) => s.moveLesson);
+
+  const reorderSessionsMutation = useReorderSessionsMutation();
+  const reorderLessonsMutation = useReorderLessonsMutation();
+  const moveLessonMutation = useMoveLessonMutation();
+  const createSession = useCreateSessionMutation();
+
+  const [draggingItem, setDraggingItem] = useState<FlatItem | null>(null);
+
+  const { items, matchedIds, expandedBySearch, resultCount } = useMemo(
+    () =>
+      buildVisibleItems(course, sessions, lessons, expandedIds, filterQuery),
+    [course, sessions, lessons, expandedIds, filterQuery]
+  );
+
+  const lessonCountMap = useMemo(() => buildLessonCountMap(lessons), [lessons]);
+
+  const sortedSessions = useMemo(
+    () => [...sessions].sort((a, b) => a.order - b.order),
+    [sessions]
+  );
+
+  const isSearchActive = filterQuery.trim().length > 0;
+  const dragDisabled = isSearchActive;
+
+  // ── Sensors ──────────────────────────────────────────────────────────────
+  const sensors = useSensors(
+    useSensor(PointerSensor, {
+      activationConstraint: { distance: 6 },
+    }),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates,
+    })
+  );
+
+  // ── Drag handlers ────────────────────────────────────────────────────────
+  const handleDragStart = useCallback(
+    (event: DragStartEvent) => {
+      const item = items.find(
+        (i) => `${i.type}:${i.id}` === String(event.active.id)
+      );
+      setDraggingItem(item ?? null);
+    },
+    [items]
+  );
+
+  const handleDragEnd = useCallback(
+    (event: DragEndEvent) => {
+      setDraggingItem(null);
+      const { active, over } = event;
+      if (!over || active.id === over.id) return;
+
+      const activeItem = items.find(
+        (i) => `${i.type}:${i.id}` === String(active.id)
+      );
+      const overItem = items.find(
+        (i) => `${i.type}:${i.id}` === String(over.id)
+      );
+      if (!activeItem || !overItem) return;
+
+      // ── Session reorder ───────────────────────────────────────────────────
+      if (activeItem.type === 'session' && overItem.type === 'session') {
+        const fromIdx = sortedSessions.findIndex(
+          (s) => s.id === activeItem.data.id
+        );
+        const toIdx = sortedSessions.findIndex(
+          (s) => s.id === overItem.data.id
+        );
+        if (fromIdx === -1 || toIdx === -1) return;
+
+        // Snapshot before store mutation (optimistic)
+        const previousSessions = [...sessions];
+
+        // Compute new order locally to pass as API payload
+        const reorderedIds = arrayMove(sortedSessions, fromIdx, toIdx).map(
+          (s) => String(s.id)
+        );
+
+        // Optimistic store update
+        reorderSessions(fromIdx, toIdx);
+
+        // Persist in background; onError rolls back
+        reorderSessionsMutation.mutate({
+          orderedIds: reorderedIds,
+          previousSessions,
+        });
+        toast.success(
+          `Sessão "${activeItem.data.title}" movida para posição ${toIdx + 1}`
+        );
+        return;
+      }
+
+      // ── Lesson reorder / move ────────────────────────────────────────────
+      if (activeItem.type === 'lesson') {
+        const lessonData = activeItem.data;
+
+        // Determine target session and index
+        let toSessionId: string;
+        let toIndex: number;
+
+        if (overItem.type === 'lesson') {
+          toSessionId = overItem.data.sessionId;
+          // Position relative to lessons in the target session (visible order)
+          const destLessons = items.filter(
+            (i) =>
+              i.type === 'lesson' &&
+              i.data.sessionId === toSessionId &&
+              i.id !== active.id
+          );
+          toIndex = destLessons.findIndex((i) => i.id === over.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
+          );
+          toIndex = destLessons.length;
+        } else {
+          return;
+        }
+
+        const didChangeSession = lessonData.sessionId !== toSessionId;
+
+        // Snapshot before store mutation (optimistic)
+        const previousLessons = [...lessons];
+
+        // Optimistic store update
+        moveLesson(String(activeItem.data.id), toSessionId, toIndex);
+
+        if (didChangeSession) {
+          // Cross-session move
+          const targetSession = sessions.find((s) => s.id === toSessionId);
+          moveLessonMutation.mutate({
+            lessonId: String(activeItem.data.id),
+            fromSessionId: lessonData.sessionId,
+            toSessionId,
+            toIndex,
+            previousLessons,
+          });
+          toast.success(
+            `Aula "${lessonData.title}" movida para "${targetSession?.title ?? toSessionId}"`
+          );
+        } else {
+          // Reorder within same session — compute new ordered IDs
+          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 orderedIds = arrayMove(
+            sessionLessons,
+            fromLessonIdx,
+            toIndex
+          ).map((l) => l.id);
+
+          reorderLessonsMutation.mutate({
+            sessionId: toSessionId,
+            orderedIds,
+            previousLessons,
+          });
+          toast(`Aula "${lessonData.title}" reordenada`);
+        }
+      }
+    },
+    [
+      items,
+      sortedSessions,
+      lessons,
+      sessions,
+      reorderSessions,
+      moveLesson,
+      reorderSessionsMutation,
+      reorderLessonsMutation,
+      moveLessonMutation,
+    ]
+  );
+
+  const isEmpty = items.length === 0;
+
+  const isSavingOrder =
+    reorderSessionsMutation.isPending ||
+    reorderLessonsMutation.isPending ||
+    moveLessonMutation.isPending;
+
+  return (
+    <DndContext
+      sensors={sensors}
+      collisionDetection={closestCenter}
+      onDragStart={handleDragStart}
+      onDragEnd={handleDragEnd}
+    >
+      <SortableContext
+        items={items.map((i) => `${i.type}:${i.id}`)}
+        strategy={verticalListSortingStrategy}
+      >
+        <div className="flex flex-col h-full min-h-0">
+          {/* Saving-order progress indicator */}
+          {isSavingOrder && (
+            <div className="flex items-center gap-1.5 px-3 py-1 shrink-0 border-b bg-primary/5">
+              <Loader2 className="size-3 animate-spin text-primary/60 shrink-0" />
+              <span className="text-[0.65rem] text-primary/70">
+                Salvando ordem…
+              </span>
+            </div>
+          )}
+
+          {/* Search result count */}
+          {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>
+          )}
+
+          {/* Search disabled-drag notice */}
+          {isSearchActive && (
+            <div className="px-3 py-1 shrink-0 border-b bg-amber-50 dark:bg-amber-950/30">
+              <span className="text-[0.65rem] text-amber-700 dark:text-amber-400">
+                Limpe a busca para reordenar itens
+              </span>
+            </div>
+          )}
+
+          {/* Empty state */}
+          {isEmpty && !isSearchActive && (
+            <div className="flex flex-col items-center justify-center gap-3 py-12 px-4 text-center">
+              <div className="flex size-12 items-center justify-center rounded-xl bg-muted/50">
+                <Layers className="size-5 text-muted-foreground/40" />
+              </div>
+              <div className="space-y-1">
+                <p className="text-sm font-medium text-foreground/70">
+                  Nenhuma sessão
+                </p>
+                <p className="text-xs text-muted-foreground leading-relaxed max-w-[180px]">
+                  Adicione a primeira sessão para começar a organizar o conteúdo
+                  do curso.
+                </p>
+              </div>
+              <Button
+                size="sm"
+                variant="outline"
+                className="h-7 text-xs gap-1.5 mt-1"
+                disabled={createSession.isPending}
+                onClick={() => createSession.mutate()}
+              >
+                {createSession.isPending ? (
+                  <Loader2 className="size-3 animate-spin" />
+                ) : (
+                  <Plus className="size-3" />
+                )}
+                Nova sessão
+              </Button>
+            </div>
+          )}
+
+          {isEmpty && isSearchActive && (
+            <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">
+                Nenhum resultado para &ldquo;{filterQuery.trim()}&rdquo;
+              </p>
+            </div>
+          )}
+
+          {/* Scrollable flat list */}
+          {!isEmpty && (
+            <div className="overflow-y-auto flex-1 min-h-0 px-1 py-1 space-y-px">
+              {items.map((item) => (
+                <div
+                  key={`${item.type}:${item.id}`}
+                  style={{ height: `${ROW_HEIGHT[item.type]}px` }}
+                >
+                  <SortableTreeRow
+                    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}
+                    dragDisabled={dragDisabled}
+                  />
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      </SortableContext>
+
+      <TreeDragOverlay activeItem={draggingItem} />
+    </DndContext>
+  );
+}

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

@@ -0,0 +1,111 @@
+'use client';
+
+import { Button } from '@/components/ui/button';
+import { cn } from '@/lib/utils';
+import { ChevronsDownUp, ChevronsUpDown, Loader2, Plus } from 'lucide-react';
+import { forwardRef, useMemo } from 'react';
+import { useCreateSessionMutation } from '../_data/use-course-structure-mutations';
+import { CourseTreeDnd } from './course-tree-dnd';
+import { MultiSelectBar } from './multi-select-bar';
+import { SearchFilter, type SearchFilterHandle } from './search-filter';
+import { useStructureStore } from './store';
+import { buildVisibleItems } from './tree-helpers';
+
+export const CourseTreePanel = forwardRef<SearchFilterHandle>((_, ref) => {
+  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 expandAll = useStructureStore((s) => s.expandAll);
+  const collapseAll = useStructureStore((s) => s.collapseAll);
+
+  const createSession = useCreateSessionMutation();
+
+  const allExpanded =
+    sessions.length > 0 && sessions.every((s) => expandedIds.has(s.id));
+
+  const isFiltering = filterQuery.trim().length > 0;
+
+  // Compute result count only when filter is active (avoids re-work when idle)
+  const resultCount = useMemo(() => {
+    if (!isFiltering) return undefined;
+    const { resultCount: rc } = buildVisibleItems(
+      course,
+      sessions,
+      lessons,
+      expandedIds,
+      filterQuery
+    );
+    return rc;
+  }, [isFiltering, course, sessions, lessons, expandedIds, filterQuery]);
+
+  return (
+    <div className="flex flex-col h-full min-h-0">
+      {/* Toolbar */}
+      <div className="flex items-center gap-1 px-2 pt-2 pb-1.5 border-b shrink-0">
+        <div className="flex-1 min-w-0">
+          <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={
+            allExpanded
+              ? 'Recolher tudo (Ctrl+Shift+E)'
+              : 'Expandir tudo (Ctrl+Shift+E)'
+          }
+          aria-label={allExpanded ? 'Recolher tudo' : 'Expandir tudo'}
+          onClick={allExpanded ? collapseAll : expandAll}
+          disabled={isFiltering}
+        >
+          {allExpanded ? (
+            <ChevronsDownUp className="size-3.5" />
+          ) : (
+            <ChevronsUpDown className="size-3.5" />
+          )}
+        </Button>
+
+        <Button
+          variant="ghost"
+          size="icon"
+          className="size-8 shrink-0"
+          title="Nova sessão"
+          aria-label="Nova sessão"
+          disabled={createSession.isPending}
+          onClick={() => createSession.mutate()}
+        >
+          {createSession.isPending ? (
+            <Loader2 className="size-3.5 animate-spin" />
+          ) : (
+            <Plus className="size-3.5" />
+          )}
+        </Button>
+      </div>
+
+      {/* Search results hint */}
+      {isFiltering && resultCount !== undefined && (
+        <div className="px-3 py-1 text-[0.65rem] text-muted-foreground bg-muted/30 border-b shrink-0">
+          {resultCount === 0
+            ? 'Nenhum resultado encontrado'
+            : `${resultCount} resultado${resultCount === 1 ? '' : 's'} encontrado${resultCount === 1 ? '' : 's'}`}
+        </div>
+      )}
+
+      {/* Multi-select action bar (visible when 2+ items selected) */}
+      <MultiSelectBar />
+
+      {/* Virtualised / DnD tree */}
+      <div className="flex-1 min-h-0 overflow-hidden">
+        <CourseTreeDnd />
+      </div>
+    </div>
+  );
+});
+
+CourseTreePanel.displayName = 'CourseTreePanel';

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

@@ -0,0 +1,64 @@
+import { Skeleton } from '@/components/ui/skeleton';
+
+/**
+ * CourseTreeSkeleton
+ *
+ * Displayed in the tree panel while the course structure is loading from
+ * the API. Mimics the visual shape of session headers and lesson rows.
+ */
+export function CourseTreeSkeleton() {
+  return (
+    <div
+      className="flex flex-col gap-1 p-3"
+      aria-busy="true"
+      aria-label="Carregando estrutura do curso"
+    >
+      {/* Course header row */}
+      <div className="flex items-center gap-2 px-2 py-1.5">
+        <Skeleton className="size-4 rounded" />
+        <Skeleton className="h-4 w-40" />
+      </div>
+
+      {/* Session 1 */}
+      <div className="mt-2 flex flex-col gap-1">
+        <div className="flex items-center gap-2 px-2 py-1.5">
+          <Skeleton className="size-3 rounded" />
+          <Skeleton className="h-3.5 w-32" />
+          <Skeleton className="ml-auto h-3 w-10" />
+        </div>
+        {[1, 2, 3].map((i) => (
+          <div key={i} className="flex items-center gap-2 pl-7 pr-2 py-1">
+            <Skeleton className="size-3 rounded" />
+            <Skeleton className="h-3 w-28" />
+            <Skeleton className="ml-auto h-3 w-8" />
+          </div>
+        ))}
+      </div>
+
+      {/* Session 2 */}
+      <div className="mt-2 flex flex-col gap-1">
+        <div className="flex items-center gap-2 px-2 py-1.5">
+          <Skeleton className="size-3 rounded" />
+          <Skeleton className="h-3.5 w-24" />
+          <Skeleton className="ml-auto h-3 w-10" />
+        </div>
+        {[1, 2].map((i) => (
+          <div key={i} className="flex items-center gap-2 pl-7 pr-2 py-1">
+            <Skeleton className="size-3 rounded" />
+            <Skeleton className="h-3 w-36" />
+            <Skeleton className="ml-auto h-3 w-8" />
+          </div>
+        ))}
+      </div>
+
+      {/* Session 3 — collapsed (no lessons) */}
+      <div className="mt-2 flex flex-col gap-1">
+        <div className="flex items-center gap-2 px-2 py-1.5">
+          <Skeleton className="size-3 rounded" />
+          <Skeleton className="h-3.5 w-28" />
+          <Skeleton className="ml-auto h-3 w-10" />
+        </div>
+      </div>
+    </div>
+  );
+}