@hed-hog/lms 0.0.306 → 0.0.309

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

@@ -0,0 +1,108 @@
+'use client';
+
+import { useCallback } from 'react';
+
+import { useStructureStore } from './store';
+import { TreeContextMenu } from './tree-context-menu';
+import { TreeRowCourse } from './tree-row-course';
+import { TreeRowLesson } from './tree-row-lesson';
+import { TreeRowSession } from './tree-row-session';
+import type { FlatItem, Lesson, Session } from './types';
+
+interface TreeRowProps {
+  item: FlatItem;
+  isActive: boolean;
+  isSelected: boolean;
+  query: string;
+  isMatched: boolean;
+  isEffectivelyExpanded: boolean;
+  lessonCountMap: Map<string, number>;
+  /** Full ordered visible list — required for SHIFT-range selection. */
+  visibleItems: FlatItem[];
+}
+
+export function TreeRow({
+  item,
+  isActive,
+  isSelected,
+  query,
+  isMatched,
+  isEffectivelyExpanded,
+  lessonCountMap,
+  visibleItems,
+}: TreeRowProps) {
+  const selectItem = useStructureStore((s) => s.selectItem);
+  const toggleExpand = useStructureStore((s) => s.toggleExpand);
+  const setMobileSheetOpen = useStructureStore((s) => s.setMobileSheetOpen);
+
+  const handleClick = useCallback(
+    (e: React.MouseEvent) => {
+      e.stopPropagation();
+      const modifiers = {
+        ctrl: e.ctrlKey || e.metaKey,
+        shift: e.shiftKey,
+      };
+      selectItem(item.id, item.type, modifiers, visibleItems);
+      // Close mobile sheet only on non-session items (sessions expand in-place)
+      if (item.type !== 'session' && !modifiers.ctrl && !modifiers.shift) {
+        setMobileSheetOpen(false);
+      }
+    },
+    [item.id, item.type, selectItem, setMobileSheetOpen, visibleItems]
+  );
+
+  const handleToggleExpand = useCallback(
+    (e: React.MouseEvent) => {
+      e.stopPropagation();
+      toggleExpand(item.id);
+    },
+    [item.id, toggleExpand]
+  );
+
+  if (item.type === 'course') {
+    return (
+      <TreeContextMenu item={item}>
+        <TreeRowCourse
+          data={item.data}
+          isSelected={isSelected}
+          isActive={isActive}
+          query={query}
+          isMatched={isMatched}
+          onClick={handleClick}
+        />
+      </TreeContextMenu>
+    );
+  }
+
+  if (item.type === 'session') {
+    const lessonCount = lessonCountMap.get(item.id) ?? 0;
+    return (
+      <TreeContextMenu item={item}>
+        <TreeRowSession
+          data={item.data as Session}
+          lessonCount={lessonCount}
+          isExpanded={isEffectivelyExpanded}
+          isSelected={isSelected}
+          isActive={isActive}
+          query={query}
+          isMatched={isMatched}
+          onClick={handleClick}
+          onToggleExpand={handleToggleExpand}
+        />
+      </TreeContextMenu>
+    );
+  }
+
+  return (
+    <TreeContextMenu item={item}>
+      <TreeRowLesson
+        data={item.data as Lesson}
+        isSelected={isSelected}
+        isActive={isActive}
+        query={query}
+        isMatched={isMatched}
+        onClick={handleClick}
+      />
+    </TreeContextMenu>
+  );
+}

package/hedhog/frontend/app/courses/[id]/structure/_components/types.ts.ejs

@@ -0,0 +1,122 @@
+// ─────────────────────────────────────────────────────────────────────────────
+// Types — LMS Course Structure TreeView
+// ─────────────────────────────────────────────────────────────────────────────
+
+export type LessonType = 'video' | 'questao' | 'post' | 'exercicio';
+export type VideoProvider = 'youtube' | 'vimeo' | 'bunny' | 'custom';
+export type ItemType = 'course' | 'session' | 'lesson';
+
+export type LessonStatus =
+  | 'preparada'
+  | 'gravada'
+  | 'editada'
+  | 'finalizada'
+  | 'publicada';
+
+export type Visibility = 'publico' | 'privado' | 'restrito';
+
+// ── Domain models ─────────────────────────────────────────────────────────────
+
+export interface Course {
+  id: string;
+  name: string;
+  title: string;
+  description: string;
+  slug: string;
+  published: boolean;
+}
+
+export interface Session {
+  id: string;
+  code: string;
+  title: string;
+  description?: string;
+  duration: number;
+  order: number;
+  visibility?: Visibility;
+  published?: boolean;
+}
+
+export interface Resource {
+  id: string;
+  name: string;
+  size: string;
+  type: string;
+  public: boolean;
+  /** Blob URL (for newly uploaded files) or remote URL for preview/download */
+  url?: string;
+}
+
+export interface LessonInstructor {
+  id: string;
+  role?: 'lead' | 'assistant';
+  name?: string;
+}
+
+export interface Lesson {
+  id: string;
+  code: string;
+  title: string;
+  publicDescription: string;
+  privateDescription: string;
+  type: LessonType;
+  duration: number;
+  sessionId: string;
+  order: number;
+  status?: LessonStatus;
+  visibility?: Visibility;
+  // Video
+  videoProvider?: VideoProvider;
+  videoUrl?: string;
+  autoDuration?: boolean;
+  transcription?: string;
+  // Questão
+  linkedExam?: string;
+  // Post
+  postContent?: string;
+  // Relations
+  resources: Resource[];
+  instructors?: LessonInstructor[];
+}
+
+// ── Flat tree node (used by virtualizer) ──────────────────────────────────────
+
+export type FlatItem =
+  | { id: string; type: 'course'; depth: 0; data: Course }
+  | { id: string; type: 'session'; depth: 1; data: Session }
+  | { id: string; type: 'lesson'; depth: 2; data: Lesson };
+
+// ── Form value shapes ─────────────────────────────────────────────────────────
+
+export type SessionFormValues = {
+  code: string;
+  title: string;
+  description: string;
+  duration: number;
+  visibility: Visibility;
+  published: boolean;
+};
+
+export type LessonFormValues = {
+  code: string;
+  title: string;
+  publicDescription: string;
+  privateDescription: string;
+  type: LessonType;
+  duration: number;
+  status: LessonStatus;
+  visibility: Visibility;
+  videoProvider?: VideoProvider;
+  videoUrl?: string;
+  autoDuration?: boolean;
+  linkedExam?: string;
+  postContent?: string;
+};
+
+export type CourseFormValues = {
+  name: string;
+  title: string;
+  description: string;
+  slug: string;
+  published: boolean;
+};

package/hedhog/frontend/app/courses/[id]/structure/_components/use-course-structure-shortcuts.ts.ejs

@@ -0,0 +1,318 @@
+'use client';
+
+import { useCallback, useEffect, useRef } from 'react';
+import { toast } from 'sonner';
+
+import type { SearchFilterHandle } from './search-filter';
+import { useStructureStore } from './store';
+import { buildVisibleItems } from './tree-helpers';
+
+/**
+ * Checks whether keyboard shortcut handling should be suppressed
+ * (the user is typing in a form control or rich-text editor).
+ */
+function isEditingTarget(el: Element | null): boolean {
+  if (!el) return false;
+  const tag = (el as HTMLElement).tagName.toLowerCase();
+  if (tag === 'input' || tag === 'textarea' || tag === 'select') return true;
+  // contenteditable (Tiptap, etc.)
+  if ((el as HTMLElement).isContentEditable) return true;
+  // shadcn Select portal, combobox, etc. — has [role=combobox] or [role=listbox]
+  const role = (el as HTMLElement).getAttribute('role');
+  if (role === 'combobox' || role === 'listbox' || role === 'option')
+    return true;
+  return false;
+}
+
+interface UseCourseStructureShortcutsOptions {
+  /** Ref to the SearchFilter imperative handle so Ctrl+F / Escape can focus/clear it. */
+  searchRef: React.RefObject<SearchFilterHandle | null>;
+  /** Ref to the detail panel wrapper div (for Enter key focusing). */
+  detailPanelRef: React.RefObject<HTMLDivElement | null>;
+  /** Callback to open/close the shortcuts help sheet. */
+  onToggleHelp: () => void;
+  /** API-backed duplicate (session or lesson based on active item). */
+  onDuplicate?: () => void;
+  /** API-backed paste (lesson or session clipboard). */
+  onPaste?: () => void;
+}
+
+export function useCourseStructureShortcuts({
+  searchRef,
+  detailPanelRef,
+  onToggleHelp,
+  onDuplicate,
+  onPaste,
+}: UseCourseStructureShortcutsOptions) {
+  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 selectedIds = useStructureStore((s) => s.selectedIds);
+
+  const activeItemId = useStructureStore((s) => s.activeItemId);
+  const activeItemType = useStructureStore((s) => s.activeItemType);
+
+  const selectItem = useStructureStore((s) => s.selectItem);
+  const clearSelection = useStructureStore((s) => s.clearSelection);
+  const setFilter = useStructureStore((s) => s.setFilter);
+  const toggleExpand = useStructureStore((s) => s.toggleExpand);
+  const copyItems = useStructureStore((s) => s.copyItems);
+  const addSession = useStructureStore((s) => s.addSession);
+  const addLesson = useStructureStore((s) => s.addLesson);
+  const deleteSession = useStructureStore((s) => s.deleteSession);
+  const deleteLesson = useStructureStore((s) => s.deleteLesson);
+  const deleteSelected = useStructureStore((s) => s.deleteSelected);
+  const duplicateSelected = useStructureStore((s) => s.duplicateSelected);
+  const showConfirm = useStructureStore((s) => s.showConfirm);
+
+  // Keep a stable ref to store values so handlers don't stale-close
+  const stateRef = useRef({
+    course,
+    sessions,
+    lessons,
+    expandedIds,
+    filterQuery,
+    selectedIds,
+    activeItemId,
+    activeItemType,
+    selectItem,
+    clearSelection,
+    setFilter,
+    toggleExpand,
+    copyItems,
+    addSession,
+    addLesson,
+    deleteSession,
+    deleteLesson,
+    deleteSelected,
+    duplicateSelected,
+    showConfirm,
+  });
+
+  useEffect(() => {
+    stateRef.current = {
+      course,
+      sessions,
+      lessons,
+      expandedIds,
+      filterQuery,
+      selectedIds,
+      activeItemId,
+      activeItemType,
+      selectItem,
+      clearSelection,
+      setFilter,
+      toggleExpand,
+      copyItems,
+      addSession,
+      addLesson,
+      deleteSession,
+      deleteLesson,
+      deleteSelected,
+      duplicateSelected,
+      showConfirm,
+    };
+  });
+
+  const handleKeyDown = useCallback(
+    (e: KeyboardEvent) => {
+      const target = document.activeElement;
+      const ctrl = e.ctrlKey || e.metaKey;
+
+      // ── Ctrl/Cmd + ? always work (help, search) ──────────────────────────
+      if (ctrl && e.key === '/') {
+        e.preventDefault();
+        onToggleHelp();
+        return;
+      }
+
+      if (ctrl && e.key.toLowerCase() === 'f') {
+        e.preventDefault();
+        searchRef.current?.focus();
+        return;
+      }
+
+      // ── Ctrl/Cmd + S — save active detail panel form ──────────────────────
+      if (ctrl && e.key.toLowerCase() === 's') {
+        e.preventDefault();
+        if (detailPanelRef.current) {
+          const submitBtn =
+            detailPanelRef.current.querySelector<HTMLButtonElement>(
+              'button[type="submit"]'
+            );
+          submitBtn?.click();
+        }
+        return;
+      }
+
+      // ── Suppress all other shortcuts when editing ─────────────────────────
+      if (isEditingTarget(target)) return;
+
+      const s = stateRef.current;
+
+      // Build the current visible list (same logic as the tree)
+      const { items } = buildVisibleItems(
+        s.course,
+        s.sessions,
+        s.lessons,
+        s.expandedIds,
+        s.filterQuery
+      );
+
+      const currentIdx = items.findIndex((i) => i.id === s.activeItemId);
+      const current = currentIdx !== -1 ? items[currentIdx] : null;
+
+      // ── Arrow navigation ──────────────────────────────────────────────────
+      if (e.key === 'ArrowDown') {
+        e.preventDefault();
+        const next = items[currentIdx + 1];
+        if (next) s.selectItem(next.id, next.type, {}, items);
+        return;
+      }
+
+      if (e.key === 'ArrowUp') {
+        e.preventDefault();
+        const prev = items[currentIdx - 1];
+        if (prev) s.selectItem(prev.id, prev.type, {}, items);
+        return;
+      }
+
+      if (e.key === 'ArrowRight') {
+        e.preventDefault();
+        if (current?.type === 'session' && !s.expandedIds.has(current.id)) {
+          s.toggleExpand(current.id);
+        }
+        return;
+      }
+
+      if (e.key === 'ArrowLeft') {
+        e.preventDefault();
+        if (current?.type === 'session' && s.expandedIds.has(current.id)) {
+          s.toggleExpand(current.id);
+        } else if (current?.type === 'lesson') {
+          // Go to parent session
+          const parent = items.find(
+            (i) => i.type === 'session' && i.id === current.data.sessionId
+          );
+          if (parent) s.selectItem(parent.id, 'session', {}, items);
+        }
+        return;
+      }
+
+      // ── Enter — focus first detail field ─────────────────────────────────
+      if (e.key === 'Enter') {
+        e.preventDefault();
+        if (detailPanelRef.current) {
+          const firstInput = detailPanelRef.current.querySelector<HTMLElement>(
+            'input:not([disabled]),textarea:not([disabled])'
+          );
+          firstInput?.focus();
+        }
+        return;
+      }
+
+      // ── Escape ────────────────────────────────────────────────────────────
+      if (e.key === 'Escape') {
+        e.preventDefault();
+        if (s.filterQuery) {
+          s.setFilter('');
+          searchRef.current?.clear();
+        } else if (s.selectedIds.size > 1) {
+          s.clearSelection();
+        } else {
+          (document.activeElement as HTMLElement)?.blur();
+        }
+        return;
+      }
+
+      // ── Delete ────────────────────────────────────────────────────────────
+      if (e.key === 'Delete') {
+        e.preventDefault();
+        const ids = [...s.selectedIds].filter(
+          (key) => key !== `course:${s.course.id}`
+        );
+        if (!ids.length) return;
+        const count = ids.length;
+        s.showConfirm({
+          title: `Excluir ${count > 1 ? count + ' itens' : 'item selecionado'}?`,
+          description: 'Esta ação não pode ser desfeita.',
+          onConfirm: () => {
+            s.deleteSelected();
+            toast.success(
+              count > 1 ? `${count} itens excluídos` : 'Item excluído'
+            );
+          },
+        });
+        return;
+      }
+
+      // ── Ctrl/Cmd + C ─────────────────────────────────────────────────────
+      if (ctrl && e.key.toLowerCase() === 'c') {
+        e.preventDefault();
+        const selectedKeys = [...s.selectedIds].filter(
+          (key) => key.startsWith('lesson:') || key.startsWith('session:')
+        );
+        if (!selectedKeys.length) return;
+        const firstKey = selectedKeys[0]!;
+        const type = firstKey.startsWith('lesson:') ? 'lesson' : 'session';
+        const ids = selectedKeys.map((key) => key.slice(key.indexOf(':') + 1));
+        s.copyItems(ids, type);
+        toast.success(
+          `${ids.length > 1 ? ids.length + ' itens copiados' : 'Item copiado'}`
+        );
+        return;
+      }
+
+      // ── Ctrl/Cmd + D — duplicate ──────────────────────────────────────────
+      if (ctrl && e.key.toLowerCase() === 'd') {
+        e.preventDefault();
+        if (onDuplicate) {
+          onDuplicate();
+        } else {
+          s.duplicateSelected();
+          toast.success('Item duplicado');
+        }
+        return;
+      }
+
+      // ── Ctrl/Cmd + V — paste ──────────────────────────────────────────────
+      if (ctrl && e.key.toLowerCase() === 'v') {
+        e.preventDefault();
+        if (onPaste) {
+          onPaste();
+        } else {
+          toast('Nada para colar');
+        }
+        return;
+      }
+
+      // ── Ctrl/Cmd + N — new item ───────────────────────────────────────────
+      if (ctrl && e.key.toLowerCase() === 'n') {
+        e.preventDefault();
+        if (s.activeItemType === 'course') {
+          s.addSession();
+          toast.success('Nova sessão criada');
+        } else if (s.activeItemType === 'session' && s.activeItemId) {
+          s.addLesson(s.activeItemId);
+          toast.success('Nova aula criada');
+        } else if (s.activeItemType === 'lesson') {
+          // Find parent session and add there
+          const lesson = s.lessons.find((l) => l.id === s.activeItemId);
+          if (lesson) {
+            s.addLesson(lesson.sessionId);
+            toast.success('Nova aula criada na mesma sessão');
+          }
+        }
+        return;
+      }
+    },
+    [onToggleHelp, searchRef, detailPanelRef, onDuplicate, onPaste]
+  );
+
+  useEffect(() => {
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [handleKeyDown]);
+}

package/hedhog/frontend/app/courses/[id]/structure/_components/use-tree-display-settings.ts.ejs

@@ -0,0 +1,97 @@
+'use client';
+
+import { create } from 'zustand';
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Types
+// ─────────────────────────────────────────────────────────────────────────────
+
+export interface TreeDisplaySettings {
+  /** Show a colored dot indicating lesson production status */
+  showStatusDot: boolean;
+  /** Show a visibility icon (público / privado / restrito) */
+  showVisibility: boolean;
+  /** Show the lesson code inline */
+  showCode: boolean;
+  /** Show a video indicator icon when a video lesson has a video URL set */
+  showVideoIndicator: boolean;
+  /** Show a paperclip icon when the lesson has downloadable resources */
+  showResourcesIndicator: boolean;
+  /** Show a transcription icon when a video lesson has transcription text */
+  showTranscriptionIndicator: boolean;
+}
+
+interface TreeDisplaySettingsStore extends TreeDisplaySettings {
+  update: (partial: Partial<TreeDisplaySettings>) => void;
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Constants
+// ─────────────────────────────────────────────────────────────────────────────
+
+const LS_KEY = 'lms:tree-display-settings';
+
+const DEFAULTS: TreeDisplaySettings = {
+  showStatusDot: true,
+  showVisibility: false,
+  showCode: false,
+  showVideoIndicator: false,
+  showResourcesIndicator: false,
+  showTranscriptionIndicator: false,
+};
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Store
+// ─────────────────────────────────────────────────────────────────────────────
+
+export const useTreeDisplaySettings = create<TreeDisplaySettingsStore>(
+  (set, get) => ({
+    ...DEFAULTS,
+
+    update: (partial) => {
+      set(partial);
+      if (typeof window !== 'undefined') {
+        try {
+          const s = get();
+          const toSave: TreeDisplaySettings = {
+            showStatusDot: s.showStatusDot,
+            showVisibility: s.showVisibility,
+            showCode: s.showCode,
+            showVideoIndicator: s.showVideoIndicator,
+            showResourcesIndicator: s.showResourcesIndicator,
+            showTranscriptionIndicator: s.showTranscriptionIndicator,
+            ...partial,
+          };
+          localStorage.setItem(LS_KEY, JSON.stringify(toSave));
+        } catch {
+          // ignore
+        }
+      }
+    },
+  })
+);
+
+// ── Hydrate from localStorage (client-only, runs once at module load) ─────────
+if (typeof window !== 'undefined') {
+  try {
+    const saved = JSON.parse(
+      localStorage.getItem(LS_KEY) ?? '{}'
+    ) as Partial<TreeDisplaySettings>;
+    if (Object.keys(saved).length > 0) {
+      useTreeDisplaySettings.setState({
+        showStatusDot: saved.showStatusDot ?? DEFAULTS.showStatusDot,
+        showVisibility: saved.showVisibility ?? DEFAULTS.showVisibility,
+        showCode: saved.showCode ?? DEFAULTS.showCode,
+        showVideoIndicator:
+          saved.showVideoIndicator ?? DEFAULTS.showVideoIndicator,
+        showResourcesIndicator:
+          saved.showResourcesIndicator ?? DEFAULTS.showResourcesIndicator,
+        showTranscriptionIndicator:
+          saved.showTranscriptionIndicator ??
+          DEFAULTS.showTranscriptionIndicator,
+      });
+    }
+  } catch {
+    // ignore — use defaults
+  }
+}