@hed-hog/lms 0.0.306 → 0.0.310

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

@@ -0,0 +1,443 @@
+'use client';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import {
+  CircleDot,
+  Clock,
+  Eye,
+  EyeOff,
+  Layers,
+  Loader2,
+  Lock,
+  Plus,
+  Save,
+  Trash2,
+  Undo2,
+  Video,
+} from 'lucide-react';
+import { useEffect, useMemo } from 'react';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form';
+import { Input } from '@/components/ui/input';
+import { ScrollArea } from '@/components/ui/scroll-area';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { Separator } from '@/components/ui/separator';
+import { Switch } from '@/components/ui/switch';
+import { Textarea } from '@/components/ui/textarea';
+
+import {
+  useCreateLessonMutation,
+  useDeleteSessionMutation,
+  useUpdateSessionMutation,
+} from '../_data/use-course-structure-mutations';
+import { useStructureStore } from './store';
+import type { Visibility } from './types';
+
+// ── Schema ────────────────────────────────────────────────────────────────────
+
+const schema = z.object({
+  code: z.string().min(1, 'Código obrigatório'),
+  title: z.string().min(1, 'Título obrigatório'),
+  description: z.string(),
+  duration: z.coerce.number().min(0),
+  visibility: z.enum(['publico', 'privado', 'restrito'] as const),
+  published: z.boolean(),
+});
+
+type FormValues = z.infer<typeof schema>;
+
+// ── Component ─────────────────────────────────────────────────────────────────
+
+interface EditorSessionProps {
+  sessionId: string;
+}
+
+export function EditorSession({ sessionId }: EditorSessionProps) {
+  const session = useStructureStore((s) =>
+    s.sessions.find((ss) => ss.id === sessionId)
+  );
+  const allLessons = useStructureStore((s) => s.lessons);
+  const lessons = useMemo(
+    () => allLessons.filter((l) => l.sessionId === sessionId),
+    [allLessons, sessionId]
+  );
+  const showConfirm = useStructureStore((s) => s.showConfirm);
+
+  const updateSession = useUpdateSessionMutation();
+  const createLesson = useCreateLessonMutation();
+  const deleteSession = useDeleteSessionMutation();
+
+  const totalMinutes = lessons.reduce((sum, l) => sum + l.duration, 0);
+  const hours = Math.floor(totalMinutes / 60);
+  const minutes = totalMinutes % 60;
+
+  const defaultValues: FormValues = {
+    code: session?.code ?? '',
+    title: session?.title ?? '',
+    description: session?.description ?? '',
+    duration: session?.duration ?? 0,
+    visibility: (session?.visibility ?? 'publico') as Visibility,
+    published: session?.published ?? true,
+  };
+
+  const form = useForm<FormValues>({
+    resolver: zodResolver(schema),
+    defaultValues,
+  });
+
+  const { isDirty } = form.formState;
+
+  useEffect(() => {
+    if (!session) return;
+    form.reset({
+      code: session.code,
+      title: session.title,
+      description: session.description ?? '',
+      duration: session.duration,
+      visibility: session.visibility ?? 'publico',
+      published: session.published ?? true,
+    });
+  }, [session?.id]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  if (!session) return null;
+
+  function onSubmit(values: FormValues) {
+    updateSession.mutate({ sessionId, formValues: values });
+    form.reset(values);
+  }
+
+  function handleDelete() {
+    showConfirm({
+      title: `Excluir sessão "${session!.title}"?`,
+      description:
+        'A sessão e todas as suas aulas serão excluídas permanentemente.',
+      onConfirm: () => deleteSession.mutate({ sessionId }),
+    });
+  }
+
+  return (
+    <Form {...form}>
+      <form
+        onSubmit={form.handleSubmit(onSubmit)}
+        className="flex flex-col h-full min-h-0"
+      >
+        {/* ── Header ───────────────────────────────────────────────────────── */}
+        <div className="flex items-center gap-3 px-4 py-3 border-b bg-muted/30 shrink-0">
+          <div className="flex size-9 items-center justify-center rounded-lg bg-muted shrink-0">
+            <Layers className="size-4 text-muted-foreground" />
+          </div>
+          <div className="flex-1 min-w-0">
+            <div className="flex items-center gap-1.5">
+              <span className="text-sm font-semibold truncate">Sessão</span>
+              {isDirty && (
+                <CircleDot className="size-3 text-amber-500 shrink-0" />
+              )}
+            </div>
+            <p className="text-[0.65rem] text-muted-foreground truncate">
+              {session.code}
+            </p>
+          </div>
+          <Badge
+            variant={session.published ? 'default' : 'secondary'}
+            className="shrink-0 text-xs"
+          >
+            {session.published ? 'Publicada' : 'Oculta'}
+          </Badge>
+          <Button
+            type="button"
+            variant="ghost"
+            size="icon"
+            className="size-7 text-destructive/60 hover:text-destructive shrink-0"
+            title="Excluir sessão"
+            aria-label="Excluir sessão"
+            disabled={deleteSession.isPending}
+            onClick={handleDelete}
+          >
+            {deleteSession.isPending ? (
+              <Loader2 className="size-3.5 animate-spin" />
+            ) : (
+              <Trash2 className="size-3.5" />
+            )}
+          </Button>
+        </div>
+
+        {/* ── Scrollable body ───────────────────────────────────────────────── */}
+        <ScrollArea className="flex-1 min-h-0">
+          <div className="flex flex-col gap-3 p-3">
+            {/* ── Stats ────────────────────────────────────────────────────── */}
+            <div className="grid grid-cols-2 gap-2">
+              <StatChip
+                icon={<Video className="size-3" />}
+                label="Aulas"
+                value={lessons.length}
+              />
+              <StatChip
+                icon={<Clock className="size-3" />}
+                label="Duração"
+                value={hours > 0 ? `${hours}h ${minutes}m` : `${minutes}m`}
+              />
+            </div>
+
+            {/* ── Dados ────────────────────────────────────────────────────── */}
+            <Card className="bg-muted/20 py-2 gap-2">
+              <CardHeader className="px-3 pt-2 pb-1">
+                <CardTitle className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
+                  Dados
+                </CardTitle>
+              </CardHeader>
+              <CardContent className="px-3 pb-2 flex flex-col gap-3">
+                <div className="grid grid-cols-2 gap-2">
+                  <FormField
+                    control={form.control}
+                    name="code"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel className="text-xs">Código</FormLabel>
+                        <FormControl>
+                          <Input {...field} className="h-8 text-xs font-mono" />
+                        </FormControl>
+                        <FormMessage className="text-xs" />
+                      </FormItem>
+                    )}
+                  />
+                  <FormField
+                    control={form.control}
+                    name="duration"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel className="text-xs">Duração (min)</FormLabel>
+                        <FormControl>
+                          <Input
+                            {...field}
+                            type="number"
+                            className="h-8 text-xs"
+                          />
+                        </FormControl>
+                        <FormMessage className="text-xs" />
+                      </FormItem>
+                    )}
+                  />
+                </div>
+
+                <FormField
+                  control={form.control}
+                  name="title"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel className="text-xs">Título</FormLabel>
+                      <FormControl>
+                        <Input {...field} className="h-8 text-sm" />
+                      </FormControl>
+                      <FormMessage className="text-xs" />
+                    </FormItem>
+                  )}
+                />
+
+                <FormField
+                  control={form.control}
+                  name="description"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel className="text-xs">Descrição</FormLabel>
+                      <FormControl>
+                        <Textarea
+                          {...field}
+                          rows={3}
+                          className="text-sm resize-none"
+                          placeholder="Descrição opcional da sessão…"
+                        />
+                      </FormControl>
+                      <FormMessage className="text-xs" />
+                    </FormItem>
+                  )}
+                />
+              </CardContent>
+            </Card>
+
+            {/* ── Publicação ───────────────────────────────────────────────── */}
+            <Card className="bg-muted/20 py-2 gap-2">
+              <CardHeader className="px-3 pt-2 pb-1">
+                <CardTitle className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
+                  Publicação
+                </CardTitle>
+              </CardHeader>
+              <CardContent className="px-3 pb-2">
+                <div className="grid grid-cols-2 gap-2 items-end">
+                  <FormField
+                    control={form.control}
+                    name="visibility"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel className="text-xs">Visibilidade</FormLabel>
+                        <Select
+                          value={field.value}
+                          onValueChange={field.onChange}
+                        >
+                          <FormControl>
+                            <SelectTrigger className="h-8 text-xs w-full">
+                              <SelectValue />
+                            </SelectTrigger>
+                          </FormControl>
+                          <SelectContent>
+                            <SelectItem value="publico">
+                              <span className="flex items-center gap-1.5">
+                                <Eye className="size-3" /> Público
+                              </span>
+                            </SelectItem>
+                            <SelectItem value="privado">
+                              <span className="flex items-center gap-1.5">
+                                <EyeOff className="size-3" /> Privado
+                              </span>
+                            </SelectItem>
+                            <SelectItem value="restrito">
+                              <span className="flex items-center gap-1.5">
+                                <Lock className="size-3" /> Restrito
+                              </span>
+                            </SelectItem>
+                          </SelectContent>
+                        </Select>
+                        <FormMessage className="text-xs" />
+                      </FormItem>
+                    )}
+                  />
+
+                  <FormField
+                    control={form.control}
+                    name="published"
+                    render={({ field }) => (
+                      <FormItem className="flex items-center justify-between gap-3 rounded-md border px-3 h-8">
+                        <FormLabel className="text-xs cursor-pointer">
+                          Publicada
+                        </FormLabel>
+                        <FormControl>
+                          <Switch
+                            checked={field.value}
+                            onCheckedChange={field.onChange}
+                          />
+                        </FormControl>
+                      </FormItem>
+                    )}
+                  />
+                </div>
+              </CardContent>
+            </Card>
+
+            {/* ── Aulas da sessão ───────────────────────────────────────────── */}
+            {lessons.length === 0 && (
+              <div className="flex flex-col items-center gap-2 py-6 px-2 rounded-lg border border-dashed text-center">
+                <Video className="size-5 text-muted-foreground/40" />
+                <p className="text-xs text-muted-foreground leading-relaxed">
+                  Esta sessão ainda não tem aulas.
+                </p>
+                <Button
+                  type="button"
+                  variant="outline"
+                  size="sm"
+                  className="h-7 text-xs gap-1.5"
+                  disabled={createLesson.isPending}
+                  onClick={() => createLesson.mutate({ sessionId })}
+                >
+                  {createLesson.isPending ? (
+                    <Loader2 className="size-3 animate-spin" />
+                  ) : (
+                    <Plus className="size-3" />
+                  )}
+                  Adicionar aula
+                </Button>
+              </div>
+            )}
+          </div>
+        </ScrollArea>
+
+        {/* ── Footer ───────────────────────────────────────────────────────── */}
+        <div className="shrink-0 border-t bg-background">
+          <Separator />
+          <div className="flex items-center gap-2 px-3 py-2">
+            <Button
+              type="button"
+              variant="ghost"
+              size="sm"
+              className="h-7 text-xs"
+              disabled={!isDirty || updateSession.isPending}
+              onClick={() => form.reset()}
+            >
+              <Undo2 className="size-3 mr-1" />
+              Cancelar
+            </Button>
+            <div className="flex-1" />
+            <Button
+              type="button"
+              variant="outline"
+              size="sm"
+              className="h-7 text-xs"
+              disabled={createLesson.isPending}
+              onClick={() => createLesson.mutate({ sessionId })}
+            >
+              {createLesson.isPending ? (
+                <Loader2 className="size-3 mr-1 animate-spin" />
+              ) : (
+                <Plus className="size-3 mr-1" />
+              )}
+              Nova aula
+            </Button>
+            <Button
+              type="submit"
+              size="sm"
+              className="h-7 text-xs"
+              disabled={!isDirty || updateSession.isPending}
+            >
+              {updateSession.isPending ? (
+                <Loader2 className="size-3 mr-1 animate-spin" />
+              ) : (
+                <Save className="size-3 mr-1" />
+              )}
+              Salvar
+            </Button>
+          </div>
+        </div>
+      </form>
+    </Form>
+  );
+}
+
+// ── Helpers ───────────────────────────────────────────────────────────────────
+
+function StatChip({
+  icon,
+  label,
+  value,
+}: {
+  icon: React.ReactNode;
+  label: string;
+  value: string | number;
+}) {
+  return (
+    <div className="flex items-center gap-2 rounded-md border bg-muted/20 px-2.5 py-2">
+      <span className="text-muted-foreground shrink-0">{icon}</span>
+      <div className="min-w-0">
+        <p className="text-[0.65rem] text-muted-foreground truncate">{label}</p>
+        <p className="text-sm font-semibold tabular-nums leading-none">
+          {value}
+        </p>
+      </div>
+    </div>
+  );
+}

package/hedhog/frontend/app/courses/[id]/structure/_components/highlighted-text.tsx.ejs

@@ -0,0 +1,41 @@
+'use client';
+
+import { cn } from '@/lib/utils';
+import { getTextSegments } from './tree-helpers';
+
+interface HighlightedTextProps {
+  text: string;
+  query: string;
+  className?: string;
+}
+
+/**
+ * Renders `text` with the first occurrence of `query` visually highlighted.
+ * Falls back to plain text when query is empty or no match is found.
+ */
+export function HighlightedText({ text, query, className }: HighlightedTextProps) {
+  const segments = getTextSegments(text, query);
+
+  if (segments.length === 1 && !segments[0]?.highlight) {
+    return <span className={className}>{text}</span>;
+  }
+
+  return (
+    <span className={className}>
+      {segments.map((seg, i) =>
+        seg.highlight ? (
+          <mark
+            key={i}
+            className={cn(
+              'bg-yellow-300/70 dark:bg-yellow-500/40 text-current rounded-[2px] px-[1px]'
+            )}
+          >
+            {seg.text}
+          </mark>
+        ) : (
+          <span key={i}>{seg.text}</span>
+        )
+      )}
+    </span>
+  );
+}

package/hedhog/frontend/app/courses/[id]/structure/_components/mock-data.ts.ejs

@@ -0,0 +1,184 @@
+/**
+ * Mock Data — LMS Course Structure
+ *
+ * ⚠️  TEMPORARY — replace when integrating with the real API.
+ *
+ * TODO[API]: Remove this file entirely once `useCourseStructure` fetches data
+ *            from GET /lms/courses/:id/structure. The Zustand store should then
+ *            be seeded with the server response instead of these constants.
+ */
+
+import type {
+  Course,
+  Lesson,
+  LessonStatus,
+  LessonType,
+  Session,
+  VideoProvider,
+  Visibility,
+} from './types';
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Mock Data — LMS Course Structure
+// ─────────────────────────────────────────────────────────────────────────────
+
+export const MOCK_COURSE: Course = {
+  id: 'course-1',
+  code: 'REACT-ADV',
+  title: 'React Avancado',
+  description:
+    'Domine os conceitos avancados do React: hooks, patterns, performance e gerenciamento de estado moderno.',
+  slug: 'react-avancado',
+  published: true,
+};
+
+// Session config: title + how many lessons each gets
+const SESSION_CONFIG: { title: string; lessonCount: number }[] = [
+  { title: 'Boas-vindas ao curso', lessonCount: 5 },
+  { title: 'Hooks Avancados useReducer e useContext', lessonCount: 32 },
+  { title: 'Patterns de Composicao', lessonCount: 31 },
+  { title: 'Gerenciamento de Estado com Zustand', lessonCount: 8 },
+  { title: 'Performance e Otimizacao', lessonCount: 30 },
+  { title: 'React Server Components', lessonCount: 10 },
+  { title: 'Data Fetching Moderno', lessonCount: 9 },
+  { title: 'Roteamento Avancado com Next.js', lessonCount: 7 },
+  { title: 'Formularios e Validacao com RHF', lessonCount: 11 },
+  { title: 'Autenticacao e Seguranca', lessonCount: 9 },
+  { title: 'Testing com React Testing Library', lessonCount: 12 },
+  { title: 'Acessibilidade a11y', lessonCount: 6 },
+  { title: 'Internacionalizacao i18n', lessonCount: 7 },
+  { title: 'Animacoes com Framer Motion', lessonCount: 8 },
+  { title: 'Arquitetura de Projetos Escalaveis', lessonCount: 10 },
+  { title: 'Design Systems e Storybook', lessonCount: 8 },
+  { title: 'Deploy CI/CD e DevOps', lessonCount: 7 },
+  { title: 'Monorepos e Micro-frontends', lessonCount: 6 },
+  { title: 'Debugging Avancado', lessonCount: 6 },
+  { title: 'Projeto Final App Completo', lessonCount: 5 },
+];
+
+export const MOCK_SESSIONS: Session[] = SESSION_CONFIG.map((s, i) => ({
+  id: `s${i + 1}`,
+  code: `S${String(i + 1).padStart(2, '0')}`,
+  title: s.title,
+  duration: s.lessonCount * 12,
+  order: i,
+}));
+
+// Lesson title patterns
+const TITLE_PATTERNS = [
+  'Introducao e objetivos',
+  'Conceitos fundamentais',
+  'Configuracao do ambiente',
+  'Pratica guiada passo a passo',
+  'Exercicio: implementacao',
+  'Quiz de revisao',
+  'Caso de uso real',
+  'Implementacao completa',
+  'Debugging e troubleshooting',
+  'Otimizacoes e boas praticas',
+  'Desafio pratico',
+  'Revisao do modulo',
+  'Q e A e duvidas frequentes',
+  'Proximos passos',
+];
+
+const LESSON_STATUSES: LessonStatus[] = [
+  'preparada',
+  'gravada',
+  'editada',
+  'finalizada',
+  'publicada',
+];
+
+const VISIBILITIES: Visibility[] = [
+  'publico',
+  'publico',
+  'privado',
+  'restrito',
+];
+
+const LESSON_TYPES: LessonType[] = [
+  'video',
+  'video',
+  'video',
+  'post',
+  'video',
+  'video',
+  'questao',
+  'exercicio',
+];
+const PROVIDERS: VideoProvider[] = [
+  'youtube',
+  'vimeo',
+  'bunny',
+  'youtube',
+  'youtube',
+];
+
+let _lid = 0;
+
+export const MOCK_LESSONS: Lesson[] = SESSION_CONFIG.flatMap((s, si) =>
+  Array.from({ length: s.lessonCount }, (_, li) => {
+    _lid += 1;
+    const type = LESSON_TYPES[_lid % LESSON_TYPES.length] as LessonType;
+    const isVideo = type === 'video';
+    const provider = PROVIDERS[_lid % PROVIDERS.length] as VideoProvider;
+    const baseTitle = TITLE_PATTERNS[li % TITLE_PATTERNS.length] as string;
+    const title =
+      li < TITLE_PATTERNS.length
+        ? baseTitle
+        : baseTitle +
+          ' parte ' +
+          String(Math.floor(li / TITLE_PATTERNS.length) + 1);
+
+    const hasResource = li % 4 === 0;
+
+    const status = LESSON_STATUSES[
+      _lid % LESSON_STATUSES.length
+    ] as LessonStatus;
+    const visibility = VISIBILITIES[_lid % VISIBILITIES.length] as Visibility;
+
+    const lesson: Lesson = {
+      id: `l${_lid}`,
+      code: `A${String(_lid).padStart(3, '0')}`,
+      title,
+      type,
+      status,
+      visibility,
+      duration: 8 + (_lid % 32),
+      publicDescription: `Aprenda ${s.title.toLowerCase()} de forma pratica nesta aula.`,
+      privateDescription: li % 7 === 0 ? 'Revisar antes de publicar.' : '',
+      sessionId: `s${si + 1}`,
+      order: li,
+      resources: hasResource
+        ? [
+            {
+              id: `r${_lid}`,
+              name: `material-${String(_lid).padStart(3, '0')}.pdf`,
+              size: `${1 + (_lid % 5)}.${_lid % 9} MB`,
+              type: 'application/pdf',
+              public: _lid % 2 === 0,
+              url: `https://www.w3.org/WAI/WCAG21/Techniques/pdf/PDF1.pdf`,
+            },
+          ]
+        : [],
+    };
+
+    if (isVideo) {
+      lesson.videoProvider = provider;
+      lesson.videoUrl = `https://example.com/video/${_lid}`;
+      lesson.autoDuration = _lid % 3 !== 0;
+      if (li === 0) {
+        lesson.transcription = `Transcricao completa da primeira aula de "${s.title}". Lorem ipsum dolor sit amet, consectetur adipiscing elit.`;
+      }
+    }
+    if (type === 'questao') {
+      lesson.linkedExam = `exam-${_lid}`;
+    }
+    if (type === 'post') {
+      lesson.postContent = `Conteudo detalhado sobre ${s.title.toLowerCase()}...`;
+    }
+
+    return lesson;
+  })
+);