@hed-hog/lms 0.0.314 → 0.0.315

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

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