@hed-hog/lms 0.0.314 → 0.0.316

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

@@ -1,62 +1,62 @@
-'use client';
-
-import { BookOpen, Keyboard, MousePointerClick } from 'lucide-react';
-import { useTranslations } from 'next-intl';
-import { memo } from 'react';
-
-import { EditorBulk } from './editor-bulk';
-import { EditorCourse } from './editor-course';
-import { EditorLesson } from './editor-lesson';
-import { EditorSession } from './editor-session';
-import { useStructureStore } from './store';
-
-export const DetailPanel = memo(function DetailPanel() {
-  const t = useTranslations('lms.CoursesPage.StructurePage');
-  const { activeItemId, activeItemType, selectedIds } = useStructureStore();
-
-  // Multi-select: show bulk editor when more than one item is selected
-  if (selectedIds.size > 1) {
-    return <EditorBulk />;
-  }
-
-  if (!activeItemId || !activeItemType) {
-    return (
-      <div className="flex flex-col items-center justify-center h-full gap-4 text-muted-foreground p-8">
-        <div className="flex size-16 items-center justify-center rounded-2xl bg-muted/60">
-          <BookOpen className="size-7 opacity-40" />
-        </div>
-        <div className="text-center space-y-1 max-w-[220px]">
-          <p className="text-sm font-medium text-foreground/70">
-            Nenhum item selecionado
-          </p>
-          <p className="text-xs text-muted-foreground leading-relaxed">
-            {t('detailPanel.emptyHint')}
-          </p>
-        </div>
-        <div className="flex flex-col items-center gap-2 mt-2">
-          <div className="flex items-center gap-1.5 text-[0.65rem] text-muted-foreground">
-            <MousePointerClick className="size-3" />
-            Clique para selecionar
-          </div>
-          <div className="flex items-center gap-1.5 text-[0.65rem] text-muted-foreground">
-            <Keyboard className="size-3" />↑ ↓ para navegar
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  if (activeItemType === 'course') {
-    return <EditorCourse />;
-  }
-
-  if (activeItemType === 'session') {
-    return <EditorSession sessionId={activeItemId} />;
-  }
-
-  if (activeItemType === 'lesson') {
-    return <EditorLesson lessonId={activeItemId} />;
-  }
-
-  return null;
-});
+'use client';
+
+import { BookOpen, Keyboard, MousePointerClick } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { memo } from 'react';
+
+import { EditorBulk } from './editor-bulk';
+import { EditorCourse } from './editor-course';
+import { EditorLesson } from './editor-lesson';
+import { EditorSession } from './editor-session';
+import { useStructureStore } from './store';
+
+export const DetailPanel = memo(function DetailPanel() {
+  const t = useTranslations('lms.CoursesPage.StructurePage');
+  const { activeItemId, activeItemType, selectedIds } = useStructureStore();
+
+  // Multi-select: show bulk editor when more than one item is selected
+  if (selectedIds.size > 1) {
+    return <EditorBulk />;
+  }
+
+  if (!activeItemId || !activeItemType) {
+    return (
+      <div className="flex flex-col items-center justify-center h-full gap-4 text-muted-foreground p-8">
+        <div className="flex size-16 items-center justify-center rounded-2xl bg-muted/60">
+          <BookOpen className="size-7 opacity-40" />
+        </div>
+        <div className="text-center space-y-1 max-w-[220px]">
+          <p className="text-sm font-medium text-foreground/70">
+            Nenhum item selecionado
+          </p>
+          <p className="text-xs text-muted-foreground leading-relaxed">
+            {t('detailPanel.emptyHint')}
+          </p>
+        </div>
+        <div className="flex flex-col items-center gap-2 mt-2">
+          <div className="flex items-center gap-1.5 text-[0.65rem] text-muted-foreground">
+            <MousePointerClick className="size-3" />
+            Clique para selecionar
+          </div>
+          <div className="flex items-center gap-1.5 text-[0.65rem] text-muted-foreground">
+            <Keyboard className="size-3" />↑ ↓ para navegar
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  if (activeItemType === 'course') {
+    return <EditorCourse />;
+  }
+
+  if (activeItemType === 'session') {
+    return <EditorSession sessionId={activeItemId} />;
+  }
+
+  if (activeItemType === 'lesson') {
+    return <EditorLesson lessonId={activeItemId} />;
+  }
+
+  return null;
+});

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

@@ -1,174 +1,174 @@
-'use client';
-
-import { Badge } from '@/components/ui/badge';
-import { Separator } from '@/components/ui/separator';
-import { cn } from '@/lib/utils';
-import {
-  Clock,
-  FileText,
-  HelpCircle,
-  Layers,
-  Video,
-  type LucideIcon,
-} from 'lucide-react';
-import { useStructureStore } from './store';
-import type { Lesson, LessonType } from './types';
-
-const LESSON_TYPE_CONFIG: Record<
-  LessonType,
-  { icon: LucideIcon; color: string; label: string; bg: string }
-> = {
-  video:     { icon: Video,      color: 'text-blue-500',    label: 'Vídeo',     bg: 'bg-blue-500/10'    },
-  post:      { icon: FileText,   color: 'text-emerald-500', label: 'Post',      bg: 'bg-emerald-500/10' },
-  questao:   { icon: HelpCircle, color: 'text-amber-500',   label: 'Quiz',      bg: 'bg-amber-500/10'   },
-  exercicio: { icon: Layers,     color: 'text-rose-500',    label: 'Exercício', bg: 'bg-rose-500/10'    },
-};
-
-interface DetailSessionProps {
-  sessionId: string;
-}
-
-export function DetailSession({ sessionId }: DetailSessionProps) {
-  const session = useStructureStore((s) => s.sessions.find((ss) => ss.id === sessionId));
-  const lessons = useStructureStore((s) => s.lessons.filter((l) => l.sessionId === sessionId).sort((a, b) => a.order - b.order));
-  const selectItem = useStructureStore((s) => s.selectItem);
-
-  if (!session) return null;
-
-  const totalMinutes = lessons.reduce((sum, l) => sum + l.duration, 0);
-  const hours = Math.floor(totalMinutes / 60);
-  const minutes = totalMinutes % 60;
-
-  const typeCounts = lessons.reduce<Partial<Record<LessonType, number>>>(
-    (acc, l) => ({ ...acc, [l.type]: (acc[l.type] ?? 0) + 1 }),
-    {}
-  );
-
-  return (
-    <div className="flex flex-col overflow-y-auto h-full">
-      {/* Header */}
-      <div className="flex items-center gap-3 px-4 py-4 border-b bg-muted/30 shrink-0">
-        <div className="flex size-10 items-center justify-center rounded-lg bg-muted shrink-0">
-          <Layers className="size-5 text-muted-foreground" />
-        </div>
-        <div className="min-w-0 flex-1">
-          <h2 className="text-base font-semibold truncate">{session.title}</h2>
-          <p className="text-xs text-muted-foreground">{session.code}</p>
-        </div>
-      </div>
-
-      <div className="flex flex-col gap-5 p-4">
-        {/* Stats */}
-        <div className="grid grid-cols-2 gap-3">
-          <StatCard label="Aulas" value={lessons.length} />
-          <StatCard
-            label="Duração"
-            value={hours > 0 ? `${hours}h ${minutes}m` : `${minutes}m`}
-          />
-        </div>
-
-        {/* Type breakdown */}
-        {Object.entries(typeCounts).length > 0 && (
-          <>
-            <Separator />
-            <div>
-              <p className="text-xs font-medium text-muted-foreground mb-2">
-                Tipos de aula
-              </p>
-              <div className="flex flex-wrap gap-2">
-                {(Object.entries(typeCounts) as [LessonType, number][]).map(
-                  ([type, count]) => {
-                    const cfg = LESSON_TYPE_CONFIG[type];
-                    const Icon = cfg.icon;
-                    return (
-                      <div
-                        key={type}
-                        className={cn(
-                          'flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs',
-                          cfg.bg
-                        )}
-                      >
-                        <Icon className={cn('size-3', cfg.color)} />
-                        <span className={cfg.color}>{cfg.label}</span>
-                        <span className="font-semibold">{count}</span>
-                      </div>
-                    );
-                  }
-                )}
-              </div>
-            </div>
-          </>
-        )}
-
-        {/* Lesson list */}
-        {lessons.length > 0 && (
-          <>
-            <Separator />
-            <div>
-              <p className="text-xs font-medium text-muted-foreground mb-2">
-                Aulas
-              </p>
-              <div className="flex flex-col gap-0.5">
-                {lessons.map((lesson) => (
-                  <LessonListItem
-                    key={lesson.id}
-                    lesson={lesson}
-                    onSelect={() => selectItem(lesson.id, 'lesson')}
-                  />
-                ))}
-              </div>
-            </div>
-          </>
-        )}
-
-        {lessons.length === 0 && (
-          <div className="flex flex-col items-center gap-2 py-8 text-center">
-            <Layers className="size-8 text-muted-foreground/40" />
-            <p className="text-sm text-muted-foreground">
-              Esta sessão ainda não tem aulas.
-            </p>
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}
-
-function LessonListItem({
-  lesson,
-  onSelect,
-}: {
-  lesson: Lesson;
-  onSelect: () => void;
-}) {
-  const cfg = LESSON_TYPE_CONFIG[lesson.type];
-  const Icon = cfg.icon;
-
-  return (
-    <button
-      onClick={onSelect}
-      className="flex items-center gap-2 px-2 py-1.5 rounded-md hover:bg-muted/60 cursor-pointer transition-colors text-left w-full"
-    >
-      <Icon className={cn('size-3.5 shrink-0', cfg.color)} />
-      <span className="text-sm flex-1 truncate">{lesson.title}</span>
-      <div className="flex items-center gap-1 shrink-0">
-        <Clock className="size-3 text-muted-foreground" />
-        <span className="text-[0.6rem] text-muted-foreground">
-          {lesson.duration}min
-        </span>
-      </div>
-      <Badge variant="outline" className="text-[0.55rem] px-1 py-0 h-4 shrink-0">
-        {lesson.code}
-      </Badge>
-    </button>
-  );
-}
-
-function StatCard({ label, value }: { label: string; value: string | number }) {
-  return (
-    <div className="flex flex-col items-center rounded-lg border bg-muted/30 py-3 gap-0.5">
-      <span className="text-lg font-bold tabular-nums">{value}</span>
-      <span className="text-[0.65rem] text-muted-foreground">{label}</span>
-    </div>
-  );
+'use client';
+
+import { Badge } from '@/components/ui/badge';
+import { Separator } from '@/components/ui/separator';
+import { cn } from '@/lib/utils';
+import {
+  Clock,
+  FileText,
+  HelpCircle,
+  Layers,
+  Video,
+  type LucideIcon,
+} from 'lucide-react';
+import { useStructureStore } from './store';
+import type { Lesson, LessonType } from './types';
+
+const LESSON_TYPE_CONFIG: Record<
+  LessonType,
+  { icon: LucideIcon; color: string; label: string; bg: string }
+> = {
+  video:     { icon: Video,      color: 'text-blue-500',    label: 'Vídeo',     bg: 'bg-blue-500/10'    },
+  post:      { icon: FileText,   color: 'text-emerald-500', label: 'Post',      bg: 'bg-emerald-500/10' },
+  questao:   { icon: HelpCircle, color: 'text-amber-500',   label: 'Quiz',      bg: 'bg-amber-500/10'   },
+  exercicio: { icon: Layers,     color: 'text-rose-500',    label: 'Exercício', bg: 'bg-rose-500/10'    },
+};
+
+interface DetailSessionProps {
+  sessionId: string;
+}
+
+export function DetailSession({ sessionId }: DetailSessionProps) {
+  const session = useStructureStore((s) => s.sessions.find((ss) => ss.id === sessionId));
+  const lessons = useStructureStore((s) => s.lessons.filter((l) => l.sessionId === sessionId).sort((a, b) => a.order - b.order));
+  const selectItem = useStructureStore((s) => s.selectItem);
+
+  if (!session) return null;
+
+  const totalMinutes = lessons.reduce((sum, l) => sum + l.duration, 0);
+  const hours = Math.floor(totalMinutes / 60);
+  const minutes = totalMinutes % 60;
+
+  const typeCounts = lessons.reduce<Partial<Record<LessonType, number>>>(
+    (acc, l) => ({ ...acc, [l.type]: (acc[l.type] ?? 0) + 1 }),
+    {}
+  );
+
+  return (
+    <div className="flex flex-col overflow-y-auto h-full">
+      {/* Header */}
+      <div className="flex items-center gap-3 px-4 py-4 border-b bg-muted/30 shrink-0">
+        <div className="flex size-10 items-center justify-center rounded-lg bg-muted shrink-0">
+          <Layers className="size-5 text-muted-foreground" />
+        </div>
+        <div className="min-w-0 flex-1">
+          <h2 className="text-base font-semibold truncate">{session.title}</h2>
+          <p className="text-xs text-muted-foreground">{session.code}</p>
+        </div>
+      </div>
+
+      <div className="flex flex-col gap-5 p-4">
+        {/* Stats */}
+        <div className="grid grid-cols-2 gap-3">
+          <StatCard label="Aulas" value={lessons.length} />
+          <StatCard
+            label="Duração"
+            value={hours > 0 ? `${hours}h ${minutes}m` : `${minutes}m`}
+          />
+        </div>
+
+        {/* Type breakdown */}
+        {Object.entries(typeCounts).length > 0 && (
+          <>
+            <Separator />
+            <div>
+              <p className="text-xs font-medium text-muted-foreground mb-2">
+                Tipos de aula
+              </p>
+              <div className="flex flex-wrap gap-2">
+                {(Object.entries(typeCounts) as [LessonType, number][]).map(
+                  ([type, count]) => {
+                    const cfg = LESSON_TYPE_CONFIG[type];
+                    const Icon = cfg.icon;
+                    return (
+                      <div
+                        key={type}
+                        className={cn(
+                          'flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs',
+                          cfg.bg
+                        )}
+                      >
+                        <Icon className={cn('size-3', cfg.color)} />
+                        <span className={cfg.color}>{cfg.label}</span>
+                        <span className="font-semibold">{count}</span>
+                      </div>
+                    );
+                  }
+                )}
+              </div>
+            </div>
+          </>
+        )}
+
+        {/* Lesson list */}
+        {lessons.length > 0 && (
+          <>
+            <Separator />
+            <div>
+              <p className="text-xs font-medium text-muted-foreground mb-2">
+                Aulas
+              </p>
+              <div className="flex flex-col gap-0.5">
+                {lessons.map((lesson) => (
+                  <LessonListItem
+                    key={lesson.id}
+                    lesson={lesson}
+                    onSelect={() => selectItem(lesson.id, 'lesson')}
+                  />
+                ))}
+              </div>
+            </div>
+          </>
+        )}
+
+        {lessons.length === 0 && (
+          <div className="flex flex-col items-center gap-2 py-8 text-center">
+            <Layers className="size-8 text-muted-foreground/40" />
+            <p className="text-sm text-muted-foreground">
+              Esta sessão ainda não tem aulas.
+            </p>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function LessonListItem({
+  lesson,
+  onSelect,
+}: {
+  lesson: Lesson;
+  onSelect: () => void;
+}) {
+  const cfg = LESSON_TYPE_CONFIG[lesson.type];
+  const Icon = cfg.icon;
+
+  return (
+    <button
+      onClick={onSelect}
+      className="flex items-center gap-2 px-2 py-1.5 rounded-md hover:bg-muted/60 cursor-pointer transition-colors text-left w-full"
+    >
+      <Icon className={cn('size-3.5 shrink-0', cfg.color)} />
+      <span className="text-sm flex-1 truncate">{lesson.title}</span>
+      <div className="flex items-center gap-1 shrink-0">
+        <Clock className="size-3 text-muted-foreground" />
+        <span className="text-[0.6rem] text-muted-foreground">
+          {lesson.duration}min
+        </span>
+      </div>
+      <Badge variant="outline" className="text-[0.55rem] px-1 py-0 h-4 shrink-0">
+        {lesson.code}
+      </Badge>
+    </button>
+  );
+}
+
+function StatCard({ label, value }: { label: string; value: string | number }) {
+  return (
+    <div className="flex flex-col items-center rounded-lg border bg-muted/30 py-3 gap-0.5">
+      <span className="text-lg font-bold tabular-nums">{value}</span>
+      <span className="text-[0.65rem] text-muted-foreground">{label}</span>
+    </div>
+  );
 }

package/hedhog/frontend/app/courses/[id]/structure/_components/drag-handle.tsx.ejs

@@ -1,58 +1,58 @@
-'use client';
-
-import { cn } from '@/lib/utils';
-import type { DraggableAttributes } from '@dnd-kit/core';
-import type { SyntheticListenerMap } from '@dnd-kit/core/dist/hooks/utilities';
-import { GripVertical } from 'lucide-react';
-
-interface DragHandleProps {
-  listeners?: SyntheticListenerMap;
-  attributes?: DraggableAttributes;
-  disabled?: boolean;
-  className?: string;
-}
-
-/**
- * Grip handle for drag-and-drop.
- * Attach the dnd-kit `listeners` and `attributes` to this element so that
- * clicking elsewhere (expand button, context menu, etc.) does NOT start a drag.
- */
-export function DragHandle({
-  listeners,
-  attributes,
-  disabled,
-  className,
-}: DragHandleProps) {
-  if (disabled) {
-    return (
-      <span
-        className={cn(
-          'shrink-0 size-5 flex items-center justify-center opacity-20 cursor-not-allowed',
-          className
-        )}
-        title="Limpe a busca para reordenar"
-      >
-        <GripVertical className="size-3.5" />
-      </span>
-    );
-  }
-
-  return (
-    <span
-      {...listeners}
-      {...attributes}
-      className={cn(
-        'shrink-0 size-5 flex items-center justify-center rounded',
-        'text-muted-foreground/40 hover:text-muted-foreground',
-        'cursor-grab active:cursor-grabbing',
-        'transition-colors touch-none',
-        className
-      )}
-      title="Arrastar para reordenar"
-      // Prevent click events from bubbling to the row selection handler
-      onClick={(e) => e.stopPropagation()}
-    >
-      <GripVertical className="size-3.5" />
-    </span>
-  );
-}
+'use client';
+
+import { cn } from '@/lib/utils';
+import type { DraggableAttributes } from '@dnd-kit/core';
+import type { SyntheticListenerMap } from '@dnd-kit/core/dist/hooks/utilities';
+import { GripVertical } from 'lucide-react';
+
+interface DragHandleProps {
+  listeners?: SyntheticListenerMap;
+  attributes?: DraggableAttributes;
+  disabled?: boolean;
+  className?: string;
+}
+
+/**
+ * Grip handle for drag-and-drop.
+ * Attach the dnd-kit `listeners` and `attributes` to this element so that
+ * clicking elsewhere (expand button, context menu, etc.) does NOT start a drag.
+ */
+export function DragHandle({
+  listeners,
+  attributes,
+  disabled,
+  className,
+}: DragHandleProps) {
+  if (disabled) {
+    return (
+      <span
+        className={cn(
+          'shrink-0 size-5 flex items-center justify-center opacity-20 cursor-not-allowed',
+          className
+        )}
+        title="Limpe a busca para reordenar"
+      >
+        <GripVertical className="size-3.5" />
+      </span>
+    );
+  }
+
+  return (
+    <span
+      {...listeners}
+      {...attributes}
+      className={cn(
+        'shrink-0 size-5 flex items-center justify-center rounded',
+        'text-muted-foreground/40 hover:text-muted-foreground',
+        'cursor-grab active:cursor-grabbing',
+        'transition-colors touch-none',
+        className
+      )}
+      title="Arrastar para reordenar"
+      // Prevent click events from bubbling to the row selection handler
+      onClick={(e) => e.stopPropagation()}
+    >
+      <GripVertical className="size-3.5" />
+    </span>
+  );
+}