@hed-hog/lms 0.0.306 → 0.0.309

package/hedhog/frontend/app/courses/[id]/structure/_components/multi-select-bar.tsx.ejs

@@ -0,0 +1,264 @@
+'use client';
+
+import { Button } from '@/components/ui/button';
+import { Separator } from '@/components/ui/separator';
+import { cn } from '@/lib/utils';
+import { Copy, FolderOpen, Loader2, Trash2, X } from 'lucide-react';
+import { toast } from 'sonner';
+import {
+  useBulkDeleteMutation,
+  useDuplicateLessonMutation,
+  useDuplicateSessionMutation,
+  useMoveLessonsMutation,
+} from '../_data/use-course-structure-mutations';
+import { useStructureStore } from './store';
+
+/**
+ * Compact action bar shown when 2+ items are selected.
+ * Fixed below the search toolbar inside CourseTreePanel.
+ */
+export function MultiSelectBar() {
+  const selectedIds = useStructureStore((s) => s.selectedIds);
+  const lessons = useStructureStore((s) => s.lessons);
+  const sessions = useStructureStore((s) => s.sessions);
+  const clearSelection = useStructureStore((s) => s.clearSelection);
+  const copyItems = useStructureStore((s) => s.copyItems);
+  const showConfirm = useStructureStore((s) => s.showConfirm);
+  const showSessionPicker = useStructureStore((s) => s.showSessionPicker);
+
+  const bulkDelete = useBulkDeleteMutation();
+  const duplicateLessonMutation = useDuplicateLessonMutation();
+  const duplicateSessionMutation = useDuplicateSessionMutation();
+  const moveLessonsMutation = useMoveLessonsMutation();
+
+  const isDuplicating =
+    duplicateLessonMutation.isPending || duplicateSessionMutation.isPending;
+  const isMoving = moveLessonsMutation.isPending;
+
+  const count = selectedIds.size;
+  if (count <= 1) return null;
+
+  const selectedLessonIds = lessons
+    .filter((l) => selectedIds.has(`lesson:${l.id}`))
+    .map((l) => l.id);
+  const selectedSessionIds = sessions
+    .filter((ss) => selectedIds.has(`session:${ss.id}`))
+    .map((ss) => ss.id);
+
+  const allAreLessons = selectedLessonIds.length === count;
+  const allAreSessions = selectedSessionIds.length === count;
+
+  const label = allAreLessons
+    ? `${count} aulas`
+    : allAreSessions
+      ? `${count} sessões`
+      : `${count} itens`;
+
+  const canMove = allAreLessons && sessions.length > 1;
+
+  function handleCopy() {
+    if (allAreLessons) {
+      copyItems(selectedLessonIds, 'lesson');
+      toast.success(`${count} aulas copiadas`);
+    } else if (allAreSessions) {
+      copyItems(selectedSessionIds, 'session');
+      toast.success(`${count} sessões copiadas`);
+    } else {
+      toast('Selecione apenas aulas ou apenas sessões para copiar.');
+    }
+  }
+
+  function handleDuplicate() {
+    if (allAreLessons) {
+      // Duplicate each lesson sequentially
+      const duplicateNext = (index: number) => {
+        if (index >= selectedLessonIds.length) return;
+        const lessonId = selectedLessonIds[index]!;
+        const lesson = lessons.find((l) => l.id === lessonId);
+        if (!lesson) return;
+        duplicateLessonMutation.mutate(
+          { sessionId: lesson.sessionId, lessonId },
+          { onSettled: () => duplicateNext(index + 1) }
+        );
+      };
+      duplicateNext(0);
+      toast.success(`${count} aulas sendo duplicadas...`);
+    } else if (allAreSessions) {
+      const duplicateNext = (index: number) => {
+        if (index >= selectedSessionIds.length) return;
+        duplicateSessionMutation.mutate(
+          { sessionId: selectedSessionIds[index]! },
+          { onSettled: () => duplicateNext(index + 1) }
+        );
+      };
+      duplicateNext(0);
+      toast.success(`${count} sessões sendo duplicadas...`);
+    }
+  }
+
+  function handleMove() {
+    if (!allAreLessons) return;
+    const parentSessionIds = new Set(
+      lessons
+        .filter((l) => selectedLessonIds.includes(l.id))
+        .map((l) => l.sessionId)
+    );
+    const excludeSessionId =
+      parentSessionIds.size === 1 ? ([...parentSessionIds][0] ?? null) : null;
+
+    showSessionPicker({
+      title: `Mover ${count} aulas para`,
+      excludeSessionId,
+      onPick: (targetId) => {
+        const previousLessons = [...lessons];
+        const movingLessons = selectedLessonIds
+          .map((id) => lessons.find((l) => l.id === id))
+          .filter(Boolean) as import('./types').Lesson[];
+        const moves = movingLessons.map((l, i) => ({
+          lessonId: l.id,
+          fromSessionId: l.sessionId,
+          toSessionId: targetId,
+          toIndex: i,
+        }));
+        // Optimistic
+        useStructureStore.getState().moveLessons(selectedLessonIds, targetId);
+        moveLessonsMutation.mutate({ moves, previousLessons });
+        toast.success(`${count} aulas movidas`);
+      },
+    });
+  }
+
+  function handleDelete() {
+    // Compute the split: sessions + orphan lessons (lessons whose session is NOT deleted)
+    const sessionIdSet = new Set(selectedSessionIds);
+    const orphanLessons = lessons
+      .filter(
+        (l) =>
+          selectedIds.has(`lesson:${l.id}`) && !sessionIdSet.has(l.sessionId)
+      )
+      .map((l) => ({ lessonId: l.id, sessionId: l.sessionId }));
+
+    showConfirm({
+      title: `Excluir ${label}?`,
+      description: allAreSessions
+        ? 'As sessões e todas as suas aulas serão excluídas permanentemente.'
+        : 'Esta ação não pode ser desfeita.',
+      onConfirm: () =>
+        bulkDelete.mutate({
+          sessionIds: selectedSessionIds,
+          lessons: orphanLessons,
+        }),
+    });
+  }
+
+  return (
+    <div
+      role="toolbar"
+      aria-label={`${count} itens selecionados — ações`}
+      className={cn(
+        'flex items-center gap-0.5 px-2 py-1 shrink-0 border-b',
+        'bg-primary/5 dark:bg-primary/10'
+      )}
+    >
+      {/* Count chip */}
+      <span
+        className={cn(
+          'text-[0.65rem] font-semibold px-1.5 py-0.5 rounded-md mr-1 shrink-0',
+          'bg-primary/15 text-primary leading-none'
+        )}
+      >
+        {label}
+      </span>
+
+      <div className="flex-1" />
+
+      {/* Copy */}
+      <Button
+        variant="ghost"
+        size="icon"
+        className="size-6 text-muted-foreground hover:text-foreground"
+        title="Copiar selecionados (Ctrl+C)"
+        aria-label="Copiar selecionados"
+        onClick={handleCopy}
+      >
+        <Copy className="size-3" />
+      </Button>
+
+      {/* Duplicate */}
+      <Button
+        variant="ghost"
+        size="icon"
+        className="size-6 text-muted-foreground hover:text-foreground"
+        title="Duplicar selecionados (Ctrl+D)"
+        aria-label="Duplicar selecionados"
+        disabled={isDuplicating}
+        onClick={handleDuplicate}
+      >
+        {isDuplicating ? (
+          <Loader2 className="size-3 animate-spin" />
+        ) : (
+          <svg
+            viewBox="0 0 24 24"
+            className="size-3 fill-none stroke-current stroke-2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            aria-hidden
+          >
+            <rect x="9" y="9" width="13" height="13" rx="2" />
+            <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
+          </svg>
+        )}
+      </Button>
+
+      {/* Move (lessons only) */}
+      {canMove && (
+        <Button
+          variant="ghost"
+          size="icon"
+          className="size-6 text-muted-foreground hover:text-foreground"
+          title="Mover para outra sessão"
+          aria-label="Mover para outra sessão"
+          disabled={isMoving}
+          onClick={handleMove}
+        >
+          {isMoving ? (
+            <Loader2 className="size-3 animate-spin" />
+          ) : (
+            <FolderOpen className="size-3" />
+          )}
+        </Button>
+      )}
+
+      {/* Delete */}
+      <Button
+        variant="ghost"
+        size="icon"
+        className="size-6 text-destructive/60 hover:text-destructive"
+        title="Excluir selecionados (Delete)"
+        aria-label="Excluir selecionados"
+        disabled={bulkDelete.isPending}
+        onClick={handleDelete}
+      >
+        {bulkDelete.isPending ? (
+          <Loader2 className="size-3 animate-spin" />
+        ) : (
+          <Trash2 className="size-3" />
+        )}
+      </Button>
+
+      <Separator orientation="vertical" className="mx-0.5 h-3.5" />
+
+      {/* Deselect */}
+      <Button
+        variant="ghost"
+        size="icon"
+        className="size-6 text-muted-foreground hover:text-foreground"
+        title="Limpar seleção (Escape)"
+        aria-label="Limpar seleção"
+        onClick={clearSelection}
+      >
+        <X className="size-3" />
+      </Button>
+    </div>
+  );
+}

package/hedhog/frontend/app/courses/[id]/structure/_components/search-filter.tsx.ejs

@@ -0,0 +1,96 @@
+'use client';
+
+import { Search, X } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import {
+  forwardRef,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+  useState,
+} from 'react';
+
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { cn } from '@/lib/utils';
+import { useDebounce } from '@/hooks/use-debounce';
+import { useStructureStore } from './store';
+
+export interface SearchFilterHandle {
+  focus(): void;
+  clear(): void;
+}
+
+interface SearchFilterProps {
+  /** Number of matching items to show alongside the input. */
+  resultCount?: number;
+}
+
+export const SearchFilter = forwardRef<SearchFilterHandle, SearchFilterProps>(
+  ({ resultCount }, ref) => {
+    const t = useTranslations('lms.CoursesPage.StructurePage');
+    const setFilter = useStructureStore((s) => s.setFilter);
+    const [value, setValue] = useState('');
+    const debounced = useDebounce(value, 250);
+    const inputRef = useRef<HTMLInputElement>(null);
+
+    useEffect(() => {
+      setFilter(debounced);
+    }, [debounced, setFilter]);
+
+    useImperativeHandle(ref, () => ({
+      focus() {
+        inputRef.current?.focus();
+        inputRef.current?.select();
+      },
+      clear() {
+        setValue('');
+      },
+    }));
+
+    const isActive = value.trim().length > 0;
+
+    return (
+      <div className="relative">
+        <Search
+          className={cn(
+            'absolute left-2.5 top-1/2 -translate-y-1/2 size-3.5 pointer-events-none transition-colors',
+            isActive ? 'text-primary' : 'text-muted-foreground'
+          )}
+          aria-hidden
+        />
+        <Input
+          ref={inputRef}
+          value={value}
+          onChange={(e) => setValue(e.target.value)}
+          placeholder={t('search.placeholder')}
+          className={cn(
+            'pl-8 h-8 text-sm transition-colors',
+            isActive ? 'pr-16 ring-1 ring-primary/30' : 'pr-2'
+          )}
+          aria-label="Buscar sessões e aulas"
+        />
+        {isActive && (
+          <div className="absolute right-1 top-1/2 -translate-y-1/2 flex items-center gap-1">
+            {resultCount !== undefined && (
+              <span className="text-[0.6rem] text-muted-foreground tabular-nums leading-none">
+                {resultCount}
+              </span>
+            )}
+            <Button
+              variant="ghost"
+              size="icon"
+              className="size-5 rounded-sm shrink-0"
+              onClick={() => setValue('')}
+              aria-label="Limpar busca"
+            >
+              <X className="size-3" />
+            </Button>
+          </div>
+        )}
+      </div>
+    );
+  }
+);
+
+SearchFilter.displayName = 'SearchFilter';

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

@@ -0,0 +1,74 @@
+'use client';
+
+import { FolderOpen } from 'lucide-react';
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { ScrollArea } from '@/components/ui/scroll-area';
+import { cn } from '@/lib/utils';
+import { useStructureStore } from './store';
+
+export function SessionPickerDialog() {
+  const sessions           = useStructureStore((s) => s.sessions);
+  const lessons            = useStructureStore((s) => s.lessons);
+  const sessionPickerDialog = useStructureStore((s) => s.sessionPickerDialog);
+  const closeSessionPicker = useStructureStore((s) => s.closeSessionPicker);
+
+  const sorted = [...sessions].sort((a, b) => a.order - b.order);
+  const visibleSessions = sorted.filter(
+    (ss) => ss.id !== sessionPickerDialog.excludeSessionId
+  );
+
+  function handlePick(sessionId: string) {
+    sessionPickerDialog.onPick?.(sessionId);
+    closeSessionPicker();
+  }
+
+  return (
+    <Dialog
+      open={sessionPickerDialog.open}
+      onOpenChange={(open) => !open && closeSessionPicker()}
+    >
+      <DialogContent className="max-w-xs p-0 gap-0">
+        <DialogHeader className="px-4 py-3 border-b">
+          <DialogTitle className="text-sm flex items-center gap-2">
+            <FolderOpen className="size-4 text-muted-foreground" />
+            {sessionPickerDialog.title}
+          </DialogTitle>
+        </DialogHeader>
+
+        <ScrollArea className="max-h-72">
+          <div className="flex flex-col p-2 gap-0.5">
+            {visibleSessions.length === 0 && (
+              <p className="text-xs text-muted-foreground text-center py-4">
+                Nenhuma sessão disponível.
+              </p>
+            )}
+            {visibleSessions.map((ss) => {
+              const count = lessons.filter((l) => l.sessionId === ss.id).length;
+              return (
+                <button
+                  key={ss.id}
+                  onClick={() => handlePick(ss.id)}
+                  className={cn(
+                    'flex items-center gap-2 px-2.5 py-2 rounded-md text-left text-sm',
+                    'hover:bg-accent transition-colors cursor-pointer'
+                  )}
+                >
+                  <FolderOpen className="size-3.5 shrink-0 text-muted-foreground" />
+                  <span className="flex-1 truncate font-medium">{ss.title}</span>
+                  <span className="text-[0.65rem] text-muted-foreground shrink-0">
+                    {count} aulas
+                  </span>
+                </button>
+              );
+            })}
+          </div>
+        </ScrollArea>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/hedhog/frontend/app/courses/[id]/structure/_components/shortcuts-help.tsx.ejs

@@ -0,0 +1,136 @@
+'use client';
+
+import { Keyboard } from 'lucide-react';
+
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Separator } from '@/components/ui/separator';
+
+// ── Data ──────────────────────────────────────────────────────────────────────
+
+const SHORTCUT_GROUPS: {
+  heading: string;
+  items: { keys: string[]; description: string }[];
+}[] = [
+  {
+    heading: 'Navegação',
+    items: [
+      { keys: ['↑', '↓'], description: 'Navegar entre itens' },
+      { keys: ['→'], description: 'Expandir sessão selecionada' },
+      { keys: ['←'], description: 'Recolher sessão / ir para pai' },
+      { keys: ['Enter'], description: 'Focar primeiro campo do editor' },
+    ],
+  },
+  {
+    heading: 'Ações',
+    items: [
+      { keys: ['Ctrl', 'S'], description: 'Salvar formulário do painel' },
+      { keys: ['Ctrl', 'N'], description: 'Criar nova sessão ou aula' },
+      { keys: ['Ctrl', 'C'], description: 'Copiar item selecionado' },
+      { keys: ['Ctrl', 'V'], description: 'Colar no contexto atual' },
+      { keys: ['Ctrl', 'D'], description: 'Duplicar item' },
+      { keys: ['Delete'], description: 'Excluir item(ns) selecionado(s)' },
+    ],
+  },
+  {
+    heading: 'Busca & Interface',
+    items: [
+      { keys: ['Ctrl', 'F'], description: 'Focar campo de busca' },
+      { keys: ['Ctrl', '/'], description: 'Abrir ajuda de atalhos' },
+      { keys: ['Esc'], description: 'Limpar busca / seleção / foco' },
+    ],
+  },
+];
+
+// ── Component ─────────────────────────────────────────────────────────────────
+
+interface ShortcutsHelpProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+export function ShortcutsHelp({ open, onOpenChange }: ShortcutsHelpProps) {
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-sm">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <Keyboard className="size-4" />
+            Atalhos de teclado
+          </DialogTitle>
+        </DialogHeader>
+
+        <div className="flex flex-col gap-4 mt-1">
+          {SHORTCUT_GROUPS.map((group, gi) => (
+            <div key={gi}>
+              <p className="text-[0.65rem] font-semibold uppercase tracking-wider text-muted-foreground mb-2">
+                {group.heading}
+              </p>
+              <div className="flex flex-col gap-1.5">
+                {group.items.map(({ keys, description }, ki) => (
+                  <div
+                    key={ki}
+                    className="flex items-center justify-between gap-3"
+                  >
+                    <span className="text-sm text-muted-foreground">
+                      {description}
+                    </span>
+                    <div className="flex items-center gap-1 shrink-0">
+                      {keys.map((k, i) => (
+                        <Badge
+                          key={i}
+                          variant="outline"
+                          className="h-5 px-1.5 text-[0.65rem] font-mono font-medium"
+                        >
+                          {k}
+                        </Badge>
+                      ))}
+                    </div>
+                  </div>
+                ))}
+              </div>
+              {gi < SHORTCUT_GROUPS.length - 1 && (
+                <Separator className="mt-3" />
+              )}
+            </div>
+          ))}
+        </div>
+
+        <p className="text-[0.65rem] text-muted-foreground mt-1">
+          Atalhos são desativados quando o foco está em inputs, exceto Ctrl+S,
+          Ctrl+F e Ctrl+/ que funcionam em qualquer contexto.
+        </p>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+/**
+ * Convenience trigger button — renders standalone when no external state is needed.
+ */
+export function ShortcutsHelpTrigger({ onOpen }: { onOpen: () => void }) {
+  return (
+    <Button
+      variant="ghost"
+      size="sm"
+      className="h-8 gap-1.5 text-xs text-muted-foreground hover:text-foreground"
+      onClick={onOpen}
+      title="Atalhos de teclado (Ctrl+/)"
+    >
+      <Keyboard className="size-3.5" />
+      Atalhos
+      <Badge
+        variant="outline"
+        className="h-4 px-1 text-[0.6rem] font-mono ml-0.5"
+      >
+        Ctrl+/
+      </Badge>
+    </Button>
+  );
+}

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

@@ -0,0 +1,80 @@
+'use client';
+
+import { useSortable } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+
+import { DragHandle } from './drag-handle';
+import { TreeRow } from './tree-row';
+import type { FlatItem } from './types';
+
+interface SortableTreeRowProps {
+  item: FlatItem;
+  isActive: boolean;
+  isSelected: boolean;
+  query: string;
+  isMatched: boolean;
+  isEffectivelyExpanded: boolean;
+  lessonCountMap: Map<string, number>;
+  visibleItems: FlatItem[];
+  /** When true (filter active) drag is disabled. */
+  dragDisabled: boolean;
+}
+
+export function SortableTreeRow({
+  item,
+  isActive,
+  isSelected,
+  query,
+  isMatched,
+  isEffectivelyExpanded,
+  lessonCountMap,
+  visibleItems,
+  dragDisabled,
+}: SortableTreeRowProps) {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging,
+  } = useSortable({
+    id: `${item.type}:${item.id}`,
+    disabled: dragDisabled || item.type === 'course',
+    data: { item },
+  });
+
+  const style: React.CSSProperties = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    opacity: isDragging ? 0.35 : undefined,
+  };
+
+  return (
+    <div ref={setNodeRef} style={style} className="flex items-stretch h-full">
+      {/* Drag handle — only for sortable types */}
+      {item.type !== 'course' && (
+        <DragHandle
+          listeners={listeners}
+          attributes={attributes}
+          disabled={dragDisabled}
+          className="my-auto"
+        />
+      )}
+
+      {/* Row content fills remaining space */}
+      <div className="flex-1 min-w-0">
+        <TreeRow
+          item={item}
+          isActive={isActive}
+          isSelected={isSelected}
+          query={query}
+          isMatched={isMatched}
+          isEffectivelyExpanded={isEffectivelyExpanded}
+          lessonCountMap={lessonCountMap}
+          visibleItems={visibleItems}
+        />
+      </div>
+    </div>
+  );
+}