@hed-hog/lms 0.0.306 → 0.0.310

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

@@ -0,0 +1,182 @@
+import type { Course, FlatItem, Lesson, Session } from './types';
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Text Highlight Helpers
+// ─────────────────────────────────────────────────────────────────────────────
+
+export interface TextSegment {
+  text: string;
+  highlight: boolean;
+}
+
+/**
+ * Splits `text` into segments marking the first occurrence of `query`.
+ * Returns a single non-highlighted segment when query is empty or not found.
+ */
+export function getTextSegments(text: string, query: string): TextSegment[] {
+  const q = query.trim();
+  if (!q) return [{ text, highlight: false }];
+
+  const idx = text.toLowerCase().indexOf(q.toLowerCase());
+  if (idx === -1) return [{ text, highlight: false }];
+
+  const segments: TextSegment[] = [];
+  if (idx > 0) segments.push({ text: text.slice(0, idx), highlight: false });
+  segments.push({ text: text.slice(idx, idx + q.length), highlight: true });
+  const tail = text.slice(idx + q.length);
+  if (tail.length > 0) segments.push({ text: tail, highlight: false });
+  return segments;
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Flat Tree Builder
+// ─────────────────────────────────────────────────────────────────────────────
+
+export interface VisibleTreeResult {
+  /** Ordered list of visible tree nodes. */
+  items: FlatItem[];
+  /** IDs of nodes that directly match the search query (for highlighting). */
+  matchedIds: Set<string>;
+  /** Session IDs that are effectively expanded (auto-expanded by search). */
+  expandedBySearch: Set<string>;
+  /** Number of directly matching items. */
+  resultCount: number;
+}
+
+function lessonMatchesQuery(l: Lesson, q: string): boolean {
+  return (
+    l.title.toLowerCase().includes(q) ||
+    l.code.toLowerCase().includes(q) ||
+    l.type.toLowerCase().includes(q)
+  );
+}
+
+function sessionMatchesQuery(s: Session, q: string): boolean {
+  return (
+    s.title.toLowerCase().includes(q) ||
+    s.code.toLowerCase().includes(q)
+  );
+}
+
+function courseMatchesQuery(c: Course, q: string): boolean {
+  return (
+    c.title.toLowerCase().includes(q) ||
+    c.code.toLowerCase().includes(q)
+  );
+}
+
+/**
+ * Builds the ordered, visible flat list of tree nodes.
+ *
+ * - When `query` is empty: uses `expandedIds` for expand/collapse.
+ * - When `query` is active: filters items, auto-expands sessions with results,
+ *   and returns `matchedIds` for highlight + `expandedBySearch` for chevron state.
+ */
+export function buildVisibleItems(
+  course: Course,
+  sessions: Session[],
+  lessons: Lesson[],
+  expandedIds: Set<string>,
+  query: string
+): VisibleTreeResult {
+  const sortedSessions = [...sessions].sort((a, b) => a.order - b.order);
+  const q = query.trim().toLowerCase();
+
+  // ── No active query: normal expand/collapse behaviour ─────────────────────
+  if (!q) {
+    const items: FlatItem[] = [];
+    items.push({ id: course.id, type: 'course', depth: 0, data: course });
+
+    for (const session of sortedSessions) {
+      items.push({ id: session.id, type: 'session', depth: 1, data: session });
+      if (expandedIds.has(session.id)) {
+        const sessionLessons = lessons
+          .filter((l) => l.sessionId === session.id)
+          .sort((a, b) => a.order - b.order);
+        for (const lesson of sessionLessons) {
+          items.push({ id: lesson.id, type: 'lesson', depth: 2, data: lesson });
+        }
+      }
+    }
+
+    return {
+      items,
+      matchedIds: new Set(),
+      expandedBySearch: new Set(),
+      resultCount: 0,
+    };
+  }
+
+  // ── Active query: filter + highlight ──────────────────────────────────────
+  const matchedIds = new Set<string>();
+  const expandedBySearch = new Set<string>();
+
+  // Step 1 — mark all direct matches
+  if (courseMatchesQuery(course, q)) matchedIds.add(course.id);
+
+  for (const session of sortedSessions) {
+    if (sessionMatchesQuery(session, q)) matchedIds.add(session.id);
+
+    const sessionLessons = lessons.filter((l) => l.sessionId === session.id);
+    for (const lesson of sessionLessons) {
+      if (lessonMatchesQuery(lesson, q)) matchedIds.add(lesson.id);
+    }
+  }
+
+  // Step 2 — compute which sessions need to be auto-expanded
+  for (const session of sortedSessions) {
+    const hasMatchingLesson = lessons.some(
+      (l) => l.sessionId === session.id && matchedIds.has(l.id)
+    );
+    if (matchedIds.has(session.id) || hasMatchingLesson) {
+      expandedBySearch.add(session.id);
+    }
+  }
+
+  // Step 3 — build the visible list
+  const items: FlatItem[] = [];
+  const anyMatch = matchedIds.size > 0;
+
+  // Course is always shown if anything matched (ancestor context)
+  if (anyMatch) {
+    items.push({ id: course.id, type: 'course', depth: 0, data: course });
+  }
+
+  for (const session of sortedSessions) {
+    const sessionLessons = lessons
+      .filter((l) => l.sessionId === session.id)
+      .sort((a, b) => a.order - b.order);
+
+    const sessionDirectMatch = matchedIds.has(session.id);
+    const matchingLessons = sessionLessons.filter((l) => matchedIds.has(l.id));
+
+    if (!sessionDirectMatch && matchingLessons.length === 0) continue;
+
+    items.push({ id: session.id, type: 'session', depth: 1, data: session });
+
+    // Show only matching lessons (session match shows all its lessons for context)
+    const lessonsToShow = sessionDirectMatch ? sessionLessons : matchingLessons;
+    for (const lesson of lessonsToShow) {
+      items.push({ id: lesson.id, type: 'lesson', depth: 2, data: lesson });
+    }
+  }
+
+  return {
+    items,
+    matchedIds,
+    expandedBySearch,
+    resultCount: matchedIds.size,
+  };
+}
+
+/**
+ * Returns the total lesson count for each session — keyed by session ID.
+ * Computed once for the whole tree to avoid per-row array scans.
+ */
+export function buildLessonCountMap(lessons: Lesson[]): Map<string, number> {
+  const map = new Map<string, number>();
+  for (const lesson of lessons) {
+    map.set(lesson.sessionId, (map.get(lesson.sessionId) ?? 0) + 1);
+  }
+  return map;
+}

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

@@ -0,0 +1,52 @@
+'use client';
+
+import { cn } from '@/lib/utils';
+import { BookOpen } from 'lucide-react';
+import { HighlightedText } from './highlighted-text';
+import type { Course } from './types';
+
+interface TreeRowCourseProps {
+  data: Course;
+  isSelected: boolean;
+  isActive: boolean;
+  query: string;
+  isMatched: boolean;
+  onClick: (e: React.MouseEvent) => void;
+}
+
+export function TreeRowCourse({
+  data,
+  isSelected,
+  isActive,
+  query,
+  onClick,
+}: TreeRowCourseProps) {
+  return (
+    <div
+      onClick={onClick}
+      role="treeitem"
+      aria-selected={isActive}
+      className={cn(
+        'flex items-center gap-2 px-3 py-1.5 rounded-md cursor-pointer select-none transition-colors text-sm font-semibold h-full',
+        isActive && 'bg-accent text-accent-foreground ring-1 ring-inset ring-primary/20',
+        isSelected && !isActive && 'bg-accent/60',
+        !isActive && !isSelected && 'hover:bg-muted/60'
+      )}
+    >
+      <BookOpen className="size-3.5 shrink-0 text-primary" aria-hidden />
+      <span className="truncate flex-1">
+        <HighlightedText text={data.title} query={query} />
+      </span>
+      <span
+        className={cn(
+          'text-[0.6rem] px-1.5 py-0.5 rounded-full shrink-0 font-medium leading-none',
+          data.published
+            ? 'bg-emerald-500/15 text-emerald-700 dark:text-emerald-400'
+            : 'bg-muted text-muted-foreground'
+        )}
+      >
+        {data.published ? 'Publicado' : 'Rascunho'}
+      </span>
+    </div>
+  );
+}

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

@@ -0,0 +1,271 @@
+'use client';
+
+import { Input } from '@/components/ui/input';
+import { cn } from '@/lib/utils';
+import {
+  ClipboardList,
+  Eye,
+  EyeOff,
+  FileText,
+  Film,
+  HelpCircle,
+  Lock,
+  Paperclip,
+  ScrollText,
+  Video,
+  type LucideIcon,
+} from 'lucide-react';
+import { useEffect, useRef } from 'react';
+import { useUpdateLessonMutation } from '../_data/use-course-structure-mutations';
+import { HighlightedText } from './highlighted-text';
+import { useStructureStore } from './store';
+import type { Lesson, LessonStatus, LessonType, Visibility } from './types';
+import { useTreeDisplaySettings } from './use-tree-display-settings';
+
+// ── Type configs ──────────────────────────────────────────────────────────────
+
+const LESSON_TYPE_CONFIG: Record<
+  LessonType,
+  { icon: LucideIcon; color: string; label: string }
+> = {
+  video: { icon: Video, color: 'text-violet-500', label: 'Vídeo' },
+  post: { icon: FileText, color: 'text-emerald-500', label: 'Post' },
+  questao: { icon: HelpCircle, color: 'text-amber-500', label: 'Quiz' },
+  exercicio: {
+    icon: ClipboardList,
+    color: 'text-rose-500',
+    label: 'Exercício',
+  },
+};
+
+const STATUS_CONFIG: Record<LessonStatus, { label: string; dot: string }> = {
+  preparada: { label: 'Preparada', dot: 'bg-slate-400' },
+  gravada: { label: 'Gravada', dot: 'bg-sky-500' },
+  editada: { label: 'Editada', dot: 'bg-violet-500' },
+  finalizada: { label: 'Finalizada', dot: 'bg-amber-500' },
+  publicada: { label: 'Publicada', dot: 'bg-emerald-500' },
+};
+
+const VISIBILITY_CONFIG: Record<
+  Visibility,
+  { icon: LucideIcon; color: string; label: string }
+> = {
+  publico: { icon: Eye, color: 'text-emerald-500', label: 'Público' },
+  privado: { icon: EyeOff, color: 'text-muted-foreground', label: 'Privado' },
+  restrito: { icon: Lock, color: 'text-amber-500', label: 'Restrito' },
+};
+
+// ── Props ─────────────────────────────────────────────────────────────────────
+
+interface TreeRowLessonProps {
+  data: Lesson;
+  isSelected: boolean;
+  isActive: boolean;
+  query: string;
+  isMatched: boolean;
+  onClick: (e: React.MouseEvent) => void;
+}
+
+// ── Component ─────────────────────────────────────────────────────────────────
+
+export function TreeRowLesson({
+  data,
+  isSelected,
+  isActive,
+  query,
+  onClick,
+}: TreeRowLessonProps) {
+  const cfg = LESSON_TYPE_CONFIG[data.type];
+  const Icon = cfg.icon;
+
+  const statusCfg = data.status ? STATUS_CONFIG[data.status] : null;
+  const visibilityCfg = data.visibility
+    ? VISIBILITY_CONFIG[data.visibility]
+    : null;
+
+  const {
+    showStatusDot,
+    showVisibility,
+    showCode,
+    showVideoIndicator,
+    showResourcesIndicator,
+    showTranscriptionIndicator,
+  } = useTreeDisplaySettings();
+
+  const inlineRenamingId = useStructureStore((s) => s.inlineRenamingId);
+  const cancelRename = useStructureStore((s) => s.cancelRename);
+  const renameItem = useStructureStore((s) => s.renameItem);
+  const startRename = useStructureStore((s) => s.startRename);
+
+  const updateLesson = useUpdateLessonMutation();
+
+  const isRenaming = inlineRenamingId === data.id;
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (isRenaming) {
+      inputRef.current?.focus();
+      inputRef.current?.select();
+    }
+  }, [isRenaming]);
+
+  function commitAndPersist(newTitle: string) {
+    const trimmed = newTitle.trim() || data.title;
+    renameItem(data.id, trimmed);
+    cancelRename();
+    updateLesson.mutate({
+      lessonId: data.id,
+      sessionId: data.sessionId,
+      formValues: {
+        title: trimmed,
+        type: data.type,
+        duration: data.duration,
+        publicDescription: data.publicDescription,
+        privateDescription: data.privateDescription,
+        status: data.status,
+        visibility: data.visibility,
+        videoProvider: data.videoProvider,
+        videoUrl: data.videoUrl,
+        autoDuration: data.autoDuration,
+        transcription: data.transcription,
+        postContent: data.postContent,
+        linkedExam: data.linkedExam,
+      },
+    });
+  }
+
+  function handleKeyDown(e: React.KeyboardEvent<HTMLInputElement>) {
+    e.stopPropagation();
+    if (e.key === 'Enter') {
+      commitAndPersist(inputRef.current?.value ?? data.title);
+    } else if (e.key === 'Escape') {
+      cancelRename();
+    }
+  }
+
+  const durationH = Math.floor(data.duration / 60);
+  const durationM = data.duration % 60;
+  const durationLabel =
+    durationH > 0
+      ? `${durationH}h${durationM > 0 ? `${durationM}m` : ''}`
+      : `${durationM}m`;
+
+  return (
+    <div
+      onClick={isRenaming ? undefined : onClick}
+      onDoubleClick={(e) => {
+        e.stopPropagation();
+        startRename(data.id);
+      }}
+      role="treeitem"
+      aria-selected={isActive}
+      title={`${cfg.label} · ${data.duration}min`}
+      className={cn(
+        'flex items-center gap-1.5 pl-7 pr-2 rounded-md cursor-pointer select-none text-sm h-full group',
+        'transition-colors duration-100',
+        isActive &&
+          'bg-accent text-accent-foreground ring-1 ring-inset ring-primary/20',
+        isSelected && !isActive && 'bg-accent/60',
+        !isActive && !isSelected && 'hover:bg-muted/60'
+      )}
+    >
+      {/* Type icon */}
+      <Icon className={cn('size-3.5 shrink-0', cfg.color)} aria-hidden />
+
+      {/* Inline rename or title */}
+      {isRenaming ? (
+        <Input
+          ref={inputRef}
+          defaultValue={data.title}
+          className="h-5 text-xs px-1 py-0 flex-1 min-w-0"
+          onClick={(e) => e.stopPropagation()}
+          onBlur={(e) => commitAndPersist(e.target.value)}
+          onKeyDown={handleKeyDown}
+          aria-label="Renomear aula"
+        />
+      ) : (
+        <span className="truncate flex-1 text-xs leading-tight">
+          <HighlightedText text={data.title} query={query} />
+        </span>
+      )}
+
+      {/* Meta (hidden during rename) */}
+      {!isRenaming && (
+        <div className="flex items-center gap-1 shrink-0">
+          {/* Code */}
+          {showCode && (
+            <span className="inline-flex items-center rounded border border-border/60 bg-muted/60 px-1 text-[0.6rem] font-mono text-muted-foreground leading-4">
+              {data.code}
+            </span>
+          )}
+          {/* Duration */}
+          <span className="text-[0.6rem] text-muted-foreground tabular-nums">
+            {durationLabel}
+          </span>
+          {/* Visibility icon */}
+          {showVisibility &&
+            visibilityCfg &&
+            (() => {
+              const VisIcon = visibilityCfg.icon;
+              return (
+                <span
+                  title={`Visibilidade: ${visibilityCfg.label}`}
+                  aria-label={`Visibilidade: ${visibilityCfg.label}`}
+                  className="inline-flex items-center"
+                >
+                  <VisIcon
+                    className={cn('size-3 shrink-0', visibilityCfg.color)}
+                  />
+                </span>
+              );
+            })()}
+          {/* Status dot */}
+          {showStatusDot && statusCfg && (
+            <span
+              className={cn('size-1.5 rounded-full shrink-0', statusCfg.dot)}
+              title={`Status: ${statusCfg.label}`}
+              aria-label={`Status: ${statusCfg.label}`}
+            />
+          )}
+          {/* Video linked indicator */}
+          {showVideoIndicator && data.type === 'video' && data.videoUrl && (
+            <span
+              title="Vídeo vinculado"
+              aria-label="Vídeo vinculado"
+              className="inline-flex items-center"
+            >
+              <Film className="size-3 shrink-0 text-violet-500" />
+            </span>
+          )}
+          {/* Resources indicator */}
+          {showResourcesIndicator && data.resources.length > 0 && (
+            <span
+              title={`${data.resources.length} recurso${data.resources.length > 1 ? 's' : ''} para download`}
+              aria-label={`${data.resources.length} recursos`}
+              className="inline-flex items-center gap-0.5"
+            >
+              <Paperclip className="size-3 shrink-0 text-sky-500" />
+              {data.resources.length > 1 && (
+                <span className="text-[0.55rem] text-sky-500 tabular-nums leading-none">
+                  {data.resources.length}
+                </span>
+              )}
+            </span>
+          )}
+          {/* Transcription indicator */}
+          {showTranscriptionIndicator &&
+            data.type === 'video' &&
+            data.transcription && (
+              <span
+                title="Possui transcrição"
+                aria-label="Possui transcrição"
+                className="inline-flex items-center"
+              >
+                <ScrollText className="size-3 shrink-0 text-emerald-500" />
+              </span>
+            )}
+        </div>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,167 @@
+'use client';
+
+import { Input } from '@/components/ui/input';
+import { cn } from '@/lib/utils';
+import { ChevronDown, ChevronRight, Layers } from 'lucide-react';
+import { useEffect, useRef } from 'react';
+import { useUpdateSessionMutation } from '../_data/use-course-structure-mutations';
+import { HighlightedText } from './highlighted-text';
+import { useStructureStore } from './store';
+import type { Session } from './types';
+
+interface TreeRowSessionProps {
+  data: Session;
+  lessonCount: number;
+  isExpanded: boolean;
+  isSelected: boolean;
+  isActive: boolean;
+  query: string;
+  isMatched: boolean;
+  onClick: (e: React.MouseEvent) => void;
+  onToggleExpand: (e: React.MouseEvent) => void;
+}
+
+export function TreeRowSession({
+  data,
+  lessonCount,
+  isExpanded,
+  isSelected,
+  isActive,
+  query,
+  onClick,
+  onToggleExpand,
+}: TreeRowSessionProps) {
+  const inlineRenamingId = useStructureStore((s) => s.inlineRenamingId);
+  const cancelRename = useStructureStore((s) => s.cancelRename);
+  const startRename = useStructureStore((s) => s.startRename);
+  const renameItem = useStructureStore((s) => s.renameItem);
+
+  const updateSession = useUpdateSessionMutation();
+
+  const isRenaming = inlineRenamingId === data.id;
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (isRenaming) {
+      inputRef.current?.focus();
+      inputRef.current?.select();
+    }
+  }, [isRenaming]);
+
+  function commitAndPersist(newTitle: string) {
+    const trimmed = newTitle.trim() || data.title;
+    renameItem(data.id, trimmed);
+    cancelRename();
+    updateSession.mutate({
+      sessionId: data.id,
+      formValues: {
+        title: trimmed,
+        duration: data.duration,
+        code: data.code,
+        description: '',
+        visibility: data.visibility ?? 'publico',
+        published: data.published ?? false,
+      },
+    });
+  }
+
+  function handleKeyDown(e: React.KeyboardEvent<HTMLInputElement>) {
+    e.stopPropagation();
+    if (e.key === 'Enter') {
+      commitAndPersist(inputRef.current?.value ?? data.title);
+    } else if (e.key === 'Escape') {
+      cancelRename();
+    }
+  }
+
+  const durationH = Math.floor((data.duration ?? 0) / 60);
+  const durationM = (data.duration ?? 0) % 60;
+  const durationLabel =
+    durationH > 0
+      ? `${durationH}h${durationM > 0 ? ` ${durationM}m` : ''}`
+      : `${durationM}m`;
+
+  return (
+    <div
+      onClick={isRenaming ? undefined : onClick}
+      onDoubleClick={(e) => {
+        e.stopPropagation();
+        startRename(data.id);
+      }}
+      role="treeitem"
+      aria-expanded={isExpanded}
+      aria-selected={isActive}
+      className={cn(
+        'flex items-center gap-1.5 px-2 py-1.5 rounded-md cursor-pointer select-none text-sm group h-full',
+        'transition-colors duration-100',
+        isActive &&
+          'bg-accent text-accent-foreground ring-1 ring-inset ring-primary/20',
+        isSelected && !isActive && 'bg-accent/60',
+        !isActive && !isSelected && 'hover:bg-muted/60'
+      )}
+    >
+      {/* Expand/collapse chevron */}
+      <button
+        className="shrink-0 text-muted-foreground hover:text-foreground transition-colors p-0.5 rounded focus-visible:ring-1 focus-visible:ring-ring"
+        onClick={onToggleExpand}
+        aria-label={isExpanded ? 'Recolher sessão' : 'Expandir sessão'}
+        tabIndex={-1}
+      >
+        {isExpanded ? (
+          <ChevronDown className="size-3.5" />
+        ) : (
+          <ChevronRight className="size-3.5" />
+        )}
+      </button>
+
+      {/* Session icon */}
+      <Layers
+        className="size-3.5 shrink-0 text-blue-500 dark:text-blue-400"
+        aria-hidden
+      />
+
+      {/* Inline rename or title */}
+      {isRenaming ? (
+        <Input
+          ref={inputRef}
+          defaultValue={data.title}
+          className="h-5 text-xs px-1 py-0 flex-1 min-w-0"
+          onClick={(e) => e.stopPropagation()}
+          onBlur={(e) => commitAndPersist(e.target.value)}
+          onKeyDown={handleKeyDown}
+          aria-label="Renomear sessão"
+        />
+      ) : (
+        <span className="truncate flex-1 font-medium leading-tight">
+          <HighlightedText text={data.title} query={query} />
+        </span>
+      )}
+
+      {/* Meta badges (hidden during rename) */}
+      {!isRenaming && (
+        <div className="flex items-center gap-1 shrink-0">
+          {/* Duration - show on hover */}
+          {data.duration > 0 && (
+            <span className="text-[0.6rem] text-muted-foreground opacity-0 group-hover:opacity-100 transition-opacity tabular-nums">
+              {durationLabel}
+            </span>
+          )}
+          {/* Lesson count - always visible */}
+          <span className="text-[0.62rem] font-medium tabular-nums text-muted-foreground min-w-[1.5rem] text-right">
+            {lessonCount}
+          </span>
+          {/* Published status dot */}
+          <span
+            className={cn(
+              'size-1.5 rounded-full shrink-0',
+              data.published === false
+                ? 'bg-muted-foreground/30'
+                : 'bg-emerald-500'
+            )}
+            title={data.published === false ? 'Rascunho' : 'Publicada'}
+          />
+        </div>
+      )}
+    </div>
+  );
+}