@hed-hog/lms 0.0.314 → 0.0.315

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

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