Add course tree, lesson actions, and module description schema

- CourseTree: expandable module/lesson overview with Eye/Video icons
- SortableLessons: Kinescope ID in create form, published toggle, move-to-module dropdown
- Actions: toggleLessonPublished, moveLessonToModule, updateModule with description
- Schema: add description field to Module model + migration

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

prisma/migrations/20260408200000_add_module_description/migration.sql

@@ -0,0 +1 @@
+ALTER TABLE "Module" ADD COLUMN "description" TEXT;

prisma/schema.prisma

@@ -108,12 +108,13 @@ model Course {
 }
 
 model Module {
-  id        String   @id @default(cuid())
+  id          String   @id @default(cuid())
-  courseId  String
+  courseId    String
-  title     String
+  title       String
-  order     Int      @default(0)
+  description String?
-  createdAt DateTime @default(now())
+  order       Int      @default(0)
-  updatedAt DateTime @updatedAt
+  createdAt   DateTime @default(now())
+  updatedAt   DateTime @updatedAt
 
   course  Course   @relation(fields: [courseId], references: [id], onDelete: Cascade)
   lessons Lesson[]

src/app/admin/courses/[courseId]/actions.ts

@@ -27,7 +27,8 @@ export async function createModule(courseId: string, formData: FormData) {
 export async function updateModule(moduleId: string, courseId: string, formData: FormData) {
   await requireAdmin();
   const title = formData.get("title") as string;
-  await prisma.module.update({ where: { id: moduleId }, data: { title } });
+  const description = (formData.get("description") as string | null)?.trim() || null;
+  await prisma.module.update({ where: { id: moduleId }, data: { title, description } });
   revalidatePath(`/admin/courses/${courseId}`);
 }
 

src/app/admin/courses/[courseId]/modules/[moduleId]/actions.ts

@@ -14,8 +14,11 @@ async function requireAdmin() {
 export async function createLesson(moduleId: string, courseId: string, formData: FormData) {
   await requireAdmin();
   const title = formData.get("title") as string;
+  const kinescopeId = (formData.get("kinescopeId") as string | null)?.trim() || null;
   const count = await prisma.lesson.count({ where: { moduleId } });
-  const lesson = await prisma.lesson.create({ data: { moduleId, title, order: count } });
+  const lesson = await prisma.lesson.create({
+    data: { moduleId, title, kinescopeId, order: count },
+  });
   revalidatePath(`/admin/courses/${courseId}/modules/${moduleId}`);
   redirect(`/admin/courses/${courseId}/modules/${moduleId}/lessons/${lesson.id}`);
 }
@@ -42,3 +45,46 @@ export async function reorderLessons(moduleId: string, courseId: string, ordered
   );
   revalidatePath(`/admin/courses/${courseId}/modules/${moduleId}`);
 }
+
+export async function toggleLessonPublished(
+  lessonId: string,
+  courseId: string,
+  moduleId: string,
+  currentValue: boolean
+) {
+  await requireAdmin();
+  await prisma.lesson.update({
+    where: { id: lessonId },
+    data: { published: !currentValue },
+  });
+  revalidatePath(`/admin/courses/${courseId}/modules/${moduleId}`);
+  revalidatePath(`/admin/courses/${courseId}`);
+}
+
+export async function moveLessonToModule(
+  lessonId: string,
+  targetModuleId: string,
+  courseId: string,
+  sourceModuleId: string
+) {
+  await requireAdmin();
+  // verify target module belongs to same course
+  const target = await prisma.module.findFirst({
+    where: { id: targetModuleId, courseId },
+  });
+  if (!target) throw new Error("Module not found");
+
+  const maxOrder = await prisma.lesson.aggregate({
+    where: { moduleId: targetModuleId },
+    _max: { order: true },
+  });
+
+  await prisma.lesson.update({
+    where: { id: lessonId },
+    data: { moduleId: targetModuleId, order: (maxOrder._max.order ?? -1) + 1 },
+  });
+
+  revalidatePath(`/admin/courses/${courseId}/modules/${sourceModuleId}`);
+  revalidatePath(`/admin/courses/${courseId}/modules/${targetModuleId}`);
+  revalidatePath(`/admin/courses/${courseId}`);
+}

src/components/admin/course-tree.tsx

@@ -0,0 +1,173 @@
+"use client";
+
+import { useState } from "react";
+import Link from "next/link";
+import { ChevronDown, ChevronRight, Video, FileText, Eye, EyeOff } from "lucide-react";
+
+type Lesson = {
+  id: string;
+  title: string;
+  published: boolean;
+  kinescopeId: string | null;
+};
+
+type Module = {
+  id: string;
+  title: string;
+  description: string | null;
+  lessons: Lesson[];
+};
+
+export function CourseTree({
+  courseId,
+  modules,
+}: {
+  courseId: string;
+  modules: Module[];
+}) {
+  // All modules expanded by default
+  const [expanded, setExpanded] = useState<Set<string>>(
+    () => new Set(modules.map((m) => m.id))
+  );
+
+  function toggle(id: string) {
+    setExpanded((prev) => {
+      const next = new Set(prev);
+      next.has(id) ? next.delete(id) : next.add(id);
+      return next;
+    });
+  }
+
+  const totalLessons = modules.reduce((s, m) => s + m.lessons.length, 0);
+  const publishedLessons = modules.reduce(
+    (s, m) => s + m.lessons.filter((l) => l.published).length,
+    0
+  );
+
+  return (
+    <div>
+      {/* Summary bar */}
+      <div className="flex items-center gap-4 mb-4 text-xs" style={{ color: "var(--muted-foreground)" }}>
+        <span>{modules.length} модулей · {totalLessons} уроков</span>
+        <span
+          className="px-2 py-0.5"
+          style={{ border: "1px solid var(--border)" }}
+        >
+          <Eye size={10} className="inline mr-1" />
+          {publishedLessons} / {totalLessons} опубликовано
+        </span>
+        <button
+          type="button"
+          className="hover:underline"
+          onClick={() => setExpanded(new Set(modules.map((m) => m.id)))}
+        >
+          Развернуть все
+        </button>
+        <button
+          type="button"
+          className="hover:underline"
+          onClick={() => setExpanded(new Set())}
+        >
+          Свернуть все
+        </button>
+      </div>
+
+      <div className="space-y-1">
+        {modules.map((mod, mi) => {
+          const isOpen = expanded.has(mod.id);
+          const modPublished = mod.lessons.filter((l) => l.published).length;
+          return (
+            <div key={mod.id} style={{ border: "2px solid var(--border)" }}>
+              {/* Module header */}
+              <button
+                type="button"
+                onClick={() => toggle(mod.id)}
+                className="w-full flex items-center gap-2 px-4 py-2.5 text-left"
+                style={{ background: "var(--background)" }}
+              >
+                <span style={{ color: "var(--muted-foreground)", width: 16, flexShrink: 0 }}>
+                  {isOpen ? <ChevronDown size={14} /> : <ChevronRight size={14} />}
+                </span>
+                <span className="text-xs font-bold uppercase tracking-widest" style={{ color: "var(--muted-foreground)", minWidth: 20 }}>
+                  {mi + 1}
+                </span>
+                <span className="flex-1 font-medium text-sm">{mod.title}</span>
+                {mod.description && (
+                  <span className="text-xs hidden sm:block max-w-xs truncate" style={{ color: "var(--muted-foreground)" }}>
+                    {mod.description}
+                  </span>
+                )}
+                <span className="text-xs shrink-0" style={{ color: "var(--muted-foreground)" }}>
+                  {modPublished}/{mod.lessons.length} уроков
+                </span>
+                <Link
+                  href={`/admin/courses/${courseId}/modules/${mod.id}`}
+                  onClick={(e) => e.stopPropagation()}
+                  className="text-xs shrink-0 hover:underline ml-2"
+                  style={{ color: "var(--muted-foreground)" }}
+                >
+                  Редактировать →
+                </Link>
+              </button>
+
+              {/* Lessons list */}
+              {isOpen && (
+                <div style={{ borderTop: "1px solid var(--border)" }}>
+                  {mod.lessons.length === 0 ? (
+                    <p className="px-10 py-2 text-xs" style={{ color: "var(--muted-foreground)" }}>
+                      Уроков нет
+                    </p>
+                  ) : (
+                    mod.lessons.map((lesson, li) => (
+                      <div
+                        key={lesson.id}
+                        className="flex items-center gap-2 px-4 py-1.5"
+                        style={{
+                          borderTop: li > 0 ? "1px solid var(--border)" : undefined,
+                          background: "var(--background)",
+                        }}
+                      >
+                        {/* Indent */}
+                        <span className="w-5 shrink-0" />
+                        {/* Index */}
+                        <span className="text-xs w-6 shrink-0 text-right" style={{ color: "var(--muted-foreground)" }}>
+                          {li + 1}
+                        </span>
+                        {/* Published indicator */}
+                        <span
+                          className="shrink-0"
+                          title={lesson.published ? "Опубликован" : "Черновик"}
+                          style={{ color: lesson.published ? "#3A6A3A" : "var(--muted-foreground)" }}
+                        >
+                          {lesson.published ? <Eye size={13} /> : <EyeOff size={13} />}
+                        </span>
+                        {/* Kinescope indicator */}
+                        <span
+                          className="shrink-0"
+                          title={lesson.kinescopeId ? "Видео прикреплено" : "Без видео"}
+                          style={{ color: lesson.kinescopeId ? "#3A6A3A" : "var(--border)" }}
+                        >
+                          {lesson.kinescopeId ? <Video size={13} /> : <FileText size={13} />}
+                        </span>
+                        {/* Title */}
+                        <span className="flex-1 text-sm truncate">{lesson.title}</span>
+                        {/* Edit link */}
+                        <Link
+                          href={`/admin/courses/${courseId}/modules/${mod.id}/lessons/${lesson.id}`}
+                          className="text-xs shrink-0 hover:underline"
+                          style={{ color: "var(--muted-foreground)" }}
+                        >
+                          Ред. →
+                        </Link>
+                      </div>
+                    ))
+                  )}
+                </div>
+              )}
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

src/components/admin/sortable-lessons.tsx

@@ -17,23 +17,39 @@ import {
 } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
 import Link from "next/link";
-import { createLesson, deleteLesson, updateLesson, reorderLessons } from "@/app/admin/courses/[courseId]/modules/[moduleId]/actions";
+import { Eye, EyeOff, Video } from "lucide-react";
+import {
+  createLesson,
+  deleteLesson,
+  updateLesson,
+  reorderLessons,
+  toggleLessonPublished,
+  moveLessonToModule,
+} from "@/app/admin/courses/[courseId]/modules/[moduleId]/actions";
 
 interface Lesson {
   id: string;
   title: string;
   order: number;
   published: boolean;
+  kinescopeId: string | null;
+}
+
+interface OtherModule {
+  id: string;
+  title: string;
 }
 
 function SortableLesson({
   lesson,
   courseId,
   moduleId,
+  otherModules,
 }: {
   lesson: Lesson;
   courseId: string;
   moduleId: string;
+  otherModules: OtherModule[];
 }) {
   const [editing, setEditing] = useState(false);
   const [editValue, setEditValue] = useState(lesson.title);
@@ -59,23 +75,42 @@ function SortableLesson({
     startTransition(() => deleteLesson(lesson.id, courseId, moduleId));
   }
 
+  function handleTogglePublished() {
+    startTransition(() => toggleLessonPublished(lesson.id, courseId, moduleId, lesson.published));
+  }
+
+  function handleMove(targetModuleId: string) {
+    if (!targetModuleId) return;
+    startTransition(() => moveLessonToModule(lesson.id, targetModuleId, courseId, moduleId));
+  }
+
   return (
     <div
       ref={setNodeRef}
-      style={{ ...style, border: "2px solid var(--border)", background: "var(--color-surface)" }}
+      style={{ ...style, border: "2px solid var(--border)", background: "var(--color-surface)", opacity: pending ? 0.5 : 1 }}
-      className="flex items-center gap-3 px-4 py-3"
+      className="flex items-center gap-2 px-3 py-2.5"
     >
+      {/* Drag handle */}
       <button
         type="button"
         {...attributes}
         {...listeners}
-        className="cursor-grab active:cursor-grabbing text-lg select-none"
+        className="cursor-grab active:cursor-grabbing text-lg select-none shrink-0"
         style={{ color: "var(--muted-foreground)" }}
         aria-label="Перетащить"
       >
         ⠿
       </button>
 
+      {/* Kinescope indicator */}
+      <span
+        title={lesson.kinescopeId ? `Kinescope: ${lesson.kinescopeId}` : "Без видео"}
+        className="shrink-0"
+        style={{ color: lesson.kinescopeId ? "#3A6A3A" : "var(--border)" }}
+      >
+        <Video size={13} />
+      </span>
+
       {editing ? (
         <form onSubmit={handleUpdate} className="flex items-center gap-2 flex-1">
           <input
@@ -101,36 +136,72 @@ function SortableLesson({
         </form>
       ) : (
         <>
-          <span className="flex-1 font-medium text-sm">{lesson.title}</span>
+          <span className="flex-1 text-sm truncate">{lesson.title}</span>
-          <span
+
-            className="text-xs px-2 py-0.5"
+          {/* Published toggle */}
+          <button
+            type="button"
+            onClick={handleTogglePublished}
+            disabled={pending}
+            title={lesson.published ? "Скрыть" : "Опубликовать"}
+            className="shrink-0 flex items-center gap-1 text-xs px-2 py-0.5 transition-opacity hover:opacity-70"
             style={{
               border: "1px solid var(--border)",
-              color: lesson.published ? "var(--foreground)" : "var(--muted-foreground)",
               background: lesson.published ? "var(--accent)" : "transparent",
+              color: lesson.published ? "var(--foreground)" : "var(--muted-foreground)",
             }}
           >
-            {lesson.published ? "Опубликован" : "Черновик"}
+            {lesson.published ? <Eye size={11} /> : <EyeOff size={11} />}
-          </span>
+            {lesson.published ? "Опубл." : "Черновик"}
+          </button>
+
+          {/* Edit */}
           <Link
             href={`/admin/courses/${courseId}/modules/${moduleId}/lessons/${lesson.id}`}
-            className="btn-aubade text-xs px-3 py-1"
+            className="btn-aubade text-xs px-3 py-1 shrink-0"
           >
-            Редактировать →
+            Ред. →
           </Link>
+
+          {/* Rename */}
           <button
             type="button"
             onClick={() => setEditing(true)}
-            className="text-xs"
+            className="text-xs shrink-0"
             style={{ color: "var(--muted-foreground)" }}
           >
-            Переименовать
+            Переим.
           </button>
+
+          {/* Move to module */}
+          {otherModules.length > 0 && (
+            <select
+              defaultValue=""
+              onChange={(e) => handleMove(e.target.value)}
+              className="text-xs shrink-0"
+              style={{
+                border: "1px solid var(--border)",
+                background: "var(--background)",
+                color: "var(--muted-foreground)",
+                padding: "2px 4px",
+                cursor: "pointer",
+                maxWidth: 120,
+              }}
+              title="Переместить в модуль"
+            >
+              <option value="" disabled>Переместить…</option>
+              {otherModules.map((m) => (
+                <option key={m.id} value={m.id}>{m.title}</option>
+              ))}
+            </select>
+          )}
+
+          {/* Delete */}
           <button
             type="button"
             onClick={handleDelete}
             disabled={pending}
-            className="text-xs"
+            className="text-xs shrink-0"
             style={{ color: "oklch(0.577 0.245 27.325)" }}
           >
             Удалить
@@ -145,10 +216,12 @@ export function SortableLessons({
   courseId,
   moduleId,
   lessons,
+  otherModules = [],
 }: {
   courseId: string;
   moduleId: string;
   lessons: Lesson[];
+  otherModules?: OtherModule[];
 }) {
   const [items, setItems] = useState(lessons);
   const [creating, startTransition] = useTransition();
@@ -158,7 +231,6 @@ export function SortableLessons({
   function handleDragEnd(event: DragEndEvent) {
     const { active, over } = event;
     if (!over || active.id === over.id) return;
-
     const oldIndex = items.findIndex((l) => l.id === active.id);
     const newIndex = items.findIndex((l) => l.id === over.id);
     const newItems = arrayMove(items, oldIndex, newIndex);
@@ -178,7 +250,13 @@ export function SortableLessons({
       <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={handleDragEnd}>
         <SortableContext items={items.map((l) => l.id)} strategy={verticalListSortingStrategy}>
           {items.map((lesson) => (
-            <SortableLesson key={lesson.id} lesson={lesson} courseId={courseId} moduleId={moduleId} />
+            <SortableLesson
+              key={lesson.id}
+              lesson={lesson}
+              courseId={courseId}
+              moduleId={moduleId}
+              otherModules={otherModules}
+            />
           ))}
         </SortableContext>
       </DndContext>
@@ -189,20 +267,32 @@ export function SortableLessons({
         </p>
       )}
 
-      <form onSubmit={handleCreate} className="flex gap-2 pt-3">
+      {/* Quick create form */}
-        <input
+      <form onSubmit={handleCreate} className="pt-3 space-y-2">
-          name="title"
+        <div className="flex gap-2">
-          placeholder="Название нового урока"
+          <input
-          required
+            name="title"
-          disabled={creating}
+            placeholder="Название урока"
-          className="flex-1 max-w-xs px-3 py-2 text-sm"
+            required
-          style={{ border: "2px solid var(--border)", background: "var(--background)", outline: "none" }}
+            disabled={creating}
-          onFocus={(e) => (e.currentTarget.style.borderColor = "var(--foreground)")}
+            className="flex-1 max-w-xs px-3 py-2 text-sm"
-          onBlur={(e) => (e.currentTarget.style.borderColor = "var(--border)")}
+            style={{ border: "2px solid var(--border)", background: "var(--background)", outline: "none" }}
-        />
+            onFocus={(e) => (e.currentTarget.style.borderColor = "var(--foreground)")}
-        <button type="submit" disabled={creating} className="btn-aubade text-xs px-4 py-2">
+            onBlur={(e) => (e.currentTarget.style.borderColor = "var(--border)")}
-          {creating ? "Создание..." : "+ Урок"}
+          />
-        </button>
+          <input
+            name="kinescopeId"
+            placeholder="Kinescope ID (опционально)"
+            disabled={creating}
+            className="flex-1 max-w-xs px-3 py-2 text-sm font-mono"
+            style={{ border: "2px solid var(--border)", background: "var(--background)", outline: "none" }}
+            onFocus={(e) => (e.currentTarget.style.borderColor = "var(--foreground)")}
+            onBlur={(e) => (e.currentTarget.style.borderColor = "var(--border)")}
+          />
+          <button type="submit" disabled={creating} className="btn-aubade text-xs px-4 py-2 shrink-0">
+            {creating ? "Создание..." : "+ Урок"}
+          </button>
+        </div>
       </form>
     </div>
   );