Stage 1: Course/Module/Lesson CRUD admin UI with TipTap editor

components.json

@@ -0,0 +1,25 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "base-nova",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/app/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "iconLibrary": "lucide",
+  "rtl": false,
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "menuColor": "default",
+  "menuAccent": "subtle",
+  "registries": {}
+}

package.json

@@ -13,17 +13,36 @@
     "seed": "ts-node --project tsconfig.json prisma/seed.ts"
   },
   "dependencies": {
+    "@aws-sdk/client-s3": "^3.1025.0",
+    "@aws-sdk/s3-request-presigner": "^3.1025.0",
+    "@base-ui/react": "^1.3.0",
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
     "@prisma/adapter-pg": "^7.6.0",
     "@prisma/client": "^7.6.0",
+    "@tailwindcss/typography": "^0.5.19",
+    "@tiptap/extension-image": "^3.22.2",
+    "@tiptap/extension-link": "^3.22.2",
+    "@tiptap/extension-placeholder": "^3.22.2",
+    "@tiptap/pm": "^3.22.2",
+    "@tiptap/react": "^3.22.2",
+    "@tiptap/starter-kit": "^3.22.2",
     "bcryptjs": "^3.0.3",
     "better-auth": "^1.6.0",
+    "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "lucide-react": "^1.7.0",
     "next": "16.2.2",
+    "next-themes": "^0.4.6",
     "pg": "^8.20.0",
     "react": "19.2.4",
     "react-dom": "19.2.4",
     "resend": "^6.10.0",
+    "shadcn": "^4.1.2",
+    "sonner": "^2.0.7",
     "tailwind-merge": "^3.5.0",
+    "tw-animate-css": "^1.4.0",
     "zod": "^4.3.6"
   },
   "devDependencies": {

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

@@ -0,0 +1,64 @@
+"use server";
+
+import { prisma } from "@/lib/prisma";
+import { headers } from "next/headers";
+import { auth } from "@/lib/auth";
+import { revalidatePath } from "next/cache";
+
+async function requireAdmin() {
+  const session = await auth.api.getSession({ headers: await headers() });
+  if (!session || session.user.role !== "admin") throw new Error("Forbidden");
+}
+
+// ── Modules ──────────────────────────────────────────────────────────────────
+
+export async function createModule(courseId: string, formData: FormData) {
+  await requireAdmin();
+  const title = formData.get("title") as string;
+  const count = await prisma.module.count({ where: { courseId } });
+  await prisma.module.create({ data: { courseId, title, order: count } });
+  revalidatePath(`/admin/courses/${courseId}`);
+}
+
+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 } });
+  revalidatePath(`/admin/courses/${courseId}`);
+}
+
+export async function deleteModule(moduleId: string, courseId: string) {
+  await requireAdmin();
+  await prisma.module.delete({ where: { id: moduleId } });
+  revalidatePath(`/admin/courses/${courseId}`);
+}
+
+export async function reorderModules(courseId: string, orderedIds: string[]) {
+  await requireAdmin();
+  await Promise.all(
+    orderedIds.map((id, index) =>
+      prisma.module.update({ where: { id }, data: { order: index } })
+    )
+  );
+  revalidatePath(`/admin/courses/${courseId}`);
+}
+
+// ── Enrollment ───────────────────────────────────────────────────────────────
+
+export async function grantAccess(courseId: string, userId: string) {
+  await requireAdmin();
+  await prisma.courseEnrollment.upsert({
+    where: { userId_courseId: { userId, courseId } },
+    update: {},
+    create: { userId, courseId },
+  });
+  revalidatePath(`/admin/courses/${courseId}`);
+}
+
+export async function revokeAccess(courseId: string, userId: string) {
+  await requireAdmin();
+  await prisma.courseEnrollment.delete({
+    where: { userId_courseId: { userId, courseId } },
+  });
+  revalidatePath(`/admin/courses/${courseId}`);
+}

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

@@ -0,0 +1,43 @@
+"use server";
+
+import { prisma } from "@/lib/prisma";
+import { headers } from "next/headers";
+import { auth } from "@/lib/auth";
+import { revalidatePath } from "next/cache";
+
+async function requireAdmin() {
+  const session = await auth.api.getSession({ headers: await headers() });
+  if (!session || session.user.role !== "admin") throw new Error("Forbidden");
+}
+
+export async function createLesson(moduleId: string, courseId: string, formData: FormData) {
+  await requireAdmin();
+  const title = formData.get("title") as string;
+  const count = await prisma.lesson.count({ where: { moduleId } });
+  const lesson = await prisma.lesson.create({ data: { moduleId, title, order: count } });
+  revalidatePath(`/admin/courses/${courseId}/modules/${moduleId}`);
+  return lesson.id;
+}
+
+export async function updateLesson(lessonId: string, courseId: string, moduleId: string, formData: FormData) {
+  await requireAdmin();
+  const title = formData.get("title") as string;
+  await prisma.lesson.update({ where: { id: lessonId }, data: { title } });
+  revalidatePath(`/admin/courses/${courseId}/modules/${moduleId}`);
+}
+
+export async function deleteLesson(lessonId: string, courseId: string, moduleId: string) {
+  await requireAdmin();
+  await prisma.lesson.delete({ where: { id: lessonId } });
+  revalidatePath(`/admin/courses/${courseId}/modules/${moduleId}`);
+}
+
+export async function reorderLessons(moduleId: string, courseId: string, orderedIds: string[]) {
+  await requireAdmin();
+  await Promise.all(
+    orderedIds.map((id, index) =>
+      prisma.lesson.update({ where: { id }, data: { order: index } })
+    )
+  );
+  revalidatePath(`/admin/courses/${courseId}/modules/${moduleId}`);
+}

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

@@ -0,0 +1,36 @@
+"use server";
+
+import { prisma } from "@/lib/prisma";
+import { headers } from "next/headers";
+import { auth } from "@/lib/auth";
+import { revalidatePath } from "next/cache";
+
+async function requireAdmin() {
+  const session = await auth.api.getSession({ headers: await headers() });
+  if (!session || session.user.role !== "admin") throw new Error("Forbidden");
+}
+
+export async function saveLesson(
+  lessonId: string,
+  courseId: string,
+  moduleId: string,
+  data: {
+    title: string;
+    kinescopeId: string;
+    content: object;
+    published: boolean;
+  }
+) {
+  await requireAdmin();
+  await prisma.lesson.update({
+    where: { id: lessonId },
+    data: {
+      title: data.title,
+      kinescopeId: data.kinescopeId || null,
+      content: data.content,
+      published: data.published,
+    },
+  });
+  revalidatePath(`/admin/courses/${courseId}/modules/${moduleId}`);
+  revalidatePath(`/admin/courses/${courseId}/modules/${moduleId}/lessons/${lessonId}`);
+}

src/app/admin/courses/[courseId]/modules/[moduleId]/lessons/[lessonId]/page.tsx

@@ -0,0 +1,53 @@
+import { prisma } from "@/lib/prisma";
+import { notFound } from "next/navigation";
+import Link from "next/link";
+import { LessonEditor } from "@/components/admin/lesson-editor";
+
+interface Props {
+  params: Promise<{ courseId: string; moduleId: string; lessonId: string }>;
+}
+
+export default async function LessonEditorPage({ params }: Props) {
+  const { courseId, moduleId, lessonId } = await params;
+
+  const lesson = await prisma.lesson.findUnique({
+    where: { id: lessonId },
+    include: {
+      module: {
+        include: { course: { select: { title: true } } },
+      },
+    },
+  });
+
+  if (!lesson || lesson.moduleId !== moduleId) notFound();
+
+  return (
+    <div className="p-8 max-w-4xl">
+      <nav className="text-sm text-slate-400 mb-6">
+        <Link href="/admin/courses" className="hover:text-slate-600">Курсы</Link>
+        <span className="mx-2">/</span>
+        <Link href={`/admin/courses/${courseId}`} className="hover:text-slate-600">
+          {lesson.module.course.title}
+        </Link>
+        <span className="mx-2">/</span>
+        <Link href={`/admin/courses/${courseId}/modules/${moduleId}`} className="hover:text-slate-600">
+          {lesson.module.title}
+        </Link>
+        <span className="mx-2">/</span>
+        <span className="text-slate-700">{lesson.title}</span>
+      </nav>
+
+      <LessonEditor
+        lesson={{
+          id: lesson.id,
+          title: lesson.title,
+          kinescopeId: lesson.kinescopeId ?? "",
+          content: lesson.content as object ?? {},
+          published: lesson.published,
+        }}
+        courseId={courseId}
+        moduleId={moduleId}
+      />
+    </div>
+  );
+}

src/app/admin/courses/[courseId]/modules/[moduleId]/page.tsx

@@ -0,0 +1,46 @@
+import { prisma } from "@/lib/prisma";
+import { notFound } from "next/navigation";
+import Link from "next/link";
+import { Badge } from "@/components/ui/badge";
+import { SortableLessons } from "@/components/admin/sortable-lessons";
+
+interface Props {
+  params: Promise<{ courseId: string; moduleId: string }>;
+}
+
+export default async function ModulePage({ params }: Props) {
+  const { courseId, moduleId } = await params;
+
+  const module = await prisma.module.findUnique({
+    where: { id: moduleId },
+    include: {
+      course: { select: { title: true } },
+      lessons: { orderBy: { order: "asc" } },
+    },
+  });
+
+  if (!module || module.courseId !== courseId) notFound();
+
+  return (
+    <div className="p-8 max-w-3xl">
+      <nav className="text-sm text-slate-400 mb-6">
+        <Link href="/admin/courses" className="hover:text-slate-600">Курсы</Link>
+        <span className="mx-2">/</span>
+        <Link href={`/admin/courses/${courseId}`} className="hover:text-slate-600">{module.course.title}</Link>
+        <span className="mx-2">/</span>
+        <span className="text-slate-700">{module.title}</span>
+      </nav>
+
+      <div className="flex items-center justify-between mb-6">
+        <div>
+          <h1 className="text-2xl font-semibold text-slate-800">{module.title}</h1>
+          <p className="text-slate-500 text-sm mt-0.5">{module.lessons.length} уроков</p>
+        </div>
+      </div>
+
+      <section className="bg-white border border-slate-200 rounded-2xl p-6">
+        <SortableLessons courseId={courseId} moduleId={moduleId} lessons={module.lessons} />
+      </section>
+    </div>
+  );
+}

src/app/admin/courses/[courseId]/page.tsx

@@ -0,0 +1,72 @@
+import { prisma } from "@/lib/prisma";
+import { notFound } from "next/navigation";
+import Link from "next/link";
+import { CourseEditForm } from "@/components/admin/course-edit-form";
+import { SortableModules } from "@/components/admin/sortable-modules";
+import { EnrollmentManager } from "@/components/admin/enrollment-manager";
+
+interface Props {
+  params: Promise<{ courseId: string }>;
+}
+
+export default async function CourseDetailPage({ params }: Props) {
+  const { courseId } = await params;
+
+  const [course, allStudents] = await Promise.all([
+    prisma.course.findUnique({
+      where: { id: courseId },
+      include: {
+        modules: {
+          orderBy: { order: "asc" },
+          include: { _count: { select: { lessons: true } } },
+        },
+        enrollments: { include: { user: { select: { id: true, name: true, email: true } } } },
+      },
+    }),
+    prisma.user.findMany({
+      where: { role: "student" },
+      select: { id: true, name: true, email: true },
+      orderBy: { name: "asc" },
+    }),
+  ]);
+
+  if (!course) notFound();
+
+  const enrolledIds = new Set(course.enrollments.map((e) => e.userId));
+
+  return (
+    <div className="p-8 max-w-4xl">
+      {/* Breadcrumb */}
+      <nav className="text-sm text-slate-400 mb-6">
+        <Link href="/admin/courses" className="hover:text-slate-600">Курсы</Link>
+        <span className="mx-2">/</span>
+        <span className="text-slate-700">{course.title}</span>
+      </nav>
+
+      {/* Course metadata */}
+      <section className="bg-white border border-slate-200 rounded-2xl p-6 mb-6">
+        <h2 className="text-base font-semibold text-slate-700 mb-4">Основная информация</h2>
+        <CourseEditForm course={course} />
+      </section>
+
+      {/* Modules */}
+      <section className="bg-white border border-slate-200 rounded-2xl p-6 mb-6">
+        <div className="flex items-center justify-between mb-4">
+          <h2 className="text-base font-semibold text-slate-700">Модули</h2>
+          <span className="text-sm text-slate-400">{course.modules.length} модулей</span>
+        </div>
+        <SortableModules courseId={courseId} modules={course.modules} />
+      </section>
+
+      {/* Access management */}
+      <section className="bg-white border border-slate-200 rounded-2xl p-6">
+        <h2 className="text-base font-semibold text-slate-700 mb-4">Доступ к курсу</h2>
+        <EnrollmentManager
+          courseId={courseId}
+          allStudents={allStudents}
+          enrolledIds={[...enrolledIds]}
+        />
+      </section>
+    </div>
+  );
+}

src/app/admin/courses/actions.ts

@@ -0,0 +1,62 @@
+"use server";
+
+import { prisma } from "@/lib/prisma";
+import { headers } from "next/headers";
+import { auth } from "@/lib/auth";
+import { redirect } from "next/navigation";
+import { revalidatePath } from "next/cache";
+
+async function requireAdmin() {
+  const session = await auth.api.getSession({ headers: await headers() });
+  if (!session || session.user.role !== "admin") throw new Error("Forbidden");
+}
+
+function slugify(str: string): string {
+  const map: Record<string, string> = {
+    а:"a",б:"b",в:"v",г:"g",д:"d",е:"e",ё:"yo",ж:"zh",з:"z",и:"i",й:"y",
+    к:"k",л:"l",м:"m",н:"n",о:"o",п:"p",р:"r",с:"s",т:"t",у:"u",ф:"f",
+    х:"kh",ц:"ts",ч:"ch",ш:"sh",щ:"shch",ъ:"",ы:"y",ь:"",э:"e",ю:"yu",я:"ya",
+  };
+  return str.toLowerCase()
+    .replace(/[а-яё]/g, (c) => map[c] ?? c)
+    .replace(/[^a-z0-9]+/g, "-")
+    .replace(/^-|-$/g, "");
+}
+
+export async function createCourse(formData: FormData) {
+  await requireAdmin();
+  const title = formData.get("title") as string;
+  const slug = (formData.get("slug") as string).trim() || slugify(title);
+  const description = (formData.get("description") as string) || null;
+
+  const course = await prisma.course.create({
+    data: { title, slug, description },
+  });
+
+  revalidatePath("/admin/courses");
+  redirect(`/admin/courses/${course.id}`);
+}
+
+export async function updateCourse(courseId: string, formData: FormData) {
+  await requireAdmin();
+  const title = formData.get("title") as string;
+  const slug = formData.get("slug") as string;
+  const description = (formData.get("description") as string) || null;
+  const published = formData.get("published") === "true";
+  const coverImage = (formData.get("coverImage") as string) || null;
+
+  await prisma.course.update({
+    where: { id: courseId },
+    data: { title, slug, description, published, coverImage },
+  });
+
+  revalidatePath("/admin/courses");
+  revalidatePath(`/admin/courses/${courseId}`);
+}
+
+export async function deleteCourse(courseId: string) {
+  await requireAdmin();
+  await prisma.course.delete({ where: { id: courseId } });
+  revalidatePath("/admin/courses");
+  redirect("/admin/courses");
+}

src/app/admin/courses/page.tsx

@@ -0,0 +1,56 @@
+import { prisma } from "@/lib/prisma";
+import Link from "next/link";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { CreateCourseDialog } from "@/components/admin/create-course-dialog";
+
+export default async function CoursesPage() {
+  const courses = await prisma.course.findMany({
+    orderBy: { order: "asc" },
+    include: { _count: { select: { modules: true, enrollments: true } } },
+  });
+
+  return (
+    <div className="p-8">
+      <div className="flex items-center justify-between mb-6">
+        <div>
+          <h1 className="text-2xl font-semibold text-slate-800">Курсы</h1>
+          <p className="text-slate-500 text-sm mt-0.5">{courses.length} курсов</p>
+        </div>
+        <CreateCourseDialog />
+      </div>
+
+      {courses.length === 0 ? (
+        <div className="bg-white border border-slate-200 rounded-2xl p-12 text-center">
+          <p className="text-4xl mb-3">📚</p>
+          <p className="text-slate-600 font-medium">Курсов пока нет</p>
+          <p className="text-slate-400 text-sm mt-1">Создайте первый курс</p>
+        </div>
+      ) : (
+        <div className="space-y-2">
+          {courses.map((course) => (
+            <Link
+              key={course.id}
+              href={`/admin/courses/${course.id}`}
+              className="flex items-center justify-between bg-white border border-slate-200 rounded-xl px-5 py-4 hover:border-amber-300 transition-colors group"
+            >
+              <div className="flex items-center gap-3">
+                <div>
+                  <p className="font-medium text-slate-800 group-hover:text-amber-700">{course.title}</p>
+                  <p className="text-xs text-slate-400 mt-0.5">/{course.slug}</p>
+                </div>
+              </div>
+              <div className="flex items-center gap-4">
+                <span className="text-sm text-slate-400">{course._count.modules} модулей</span>
+                <span className="text-sm text-slate-400">{course._count.enrollments} учеников</span>
+                <Badge variant={course.published ? "default" : "secondary"}>
+                  {course.published ? "Опубликован" : "Черновик"}
+                </Badge>
+              </div>
+            </Link>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

src/app/admin/dashboard/page.tsx

@@ -1,46 +1,27 @@
-import { headers } from "next/headers";
-import { auth } from "@/lib/auth";
-import { redirect } from "next/navigation";
-import { LogoutButton } from "@/components/layout/logout-button";
-
-export default async function AdminDashboard() {
-  const session = await auth.api.getSession({ headers: await headers() });
-
-  if (!session) redirect("/login");
-  if (session.user.role !== "admin") redirect("/dashboard");
+import Link from "next/link";
 
+export default function AdminDashboard() {
   return (
-    <div className="min-h-screen bg-slate-50">
-      <header className="bg-white border-b border-slate-200 px-6 py-4 flex items-center justify-between">
-        <h1 className="text-xl font-bold text-slate-900">Second Brain — Админ</h1>
-        <div className="flex items-center gap-4">
-          <span className="text-sm text-gray-600">{session.user.name}</span>
-          <LogoutButton />
-        </div>
-      </header>
-      <main className="max-w-5xl mx-auto px-6 py-10">
-        <h2 className="text-2xl font-semibold text-gray-800 mb-2">
-          Панель администратора
-        </h2>
-        <p className="text-gray-500 mb-8">Управление платформой Second Brain.</p>
+    <div className="p-8">
+      <h1 className="text-2xl font-semibold text-slate-800 mb-1">Обзор</h1>
+      <p className="text-slate-500 mb-8">Управление платформой Second Brain.</p>
       <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
-          <div className="bg-white rounded-2xl border border-slate-200 p-6">
+        <Link href="/admin/courses" className="bg-white rounded-2xl border border-slate-200 p-6 hover:border-amber-300 transition-colors">
           <p className="text-3xl mb-2">📚</p>
-            <p className="font-medium text-gray-800">Курсы</p>
-            <p className="text-sm text-gray-400 mt-1">CRUD — Этап 1</p>
-          </div>
-          <div className="bg-white rounded-2xl border border-slate-200 p-6">
+          <p className="font-medium text-slate-800">Курсы</p>
+          <p className="text-sm text-slate-400 mt-1">Управление контентом</p>
+        </Link>
+        <Link href="/admin/users" className="bg-white rounded-2xl border border-slate-200 p-6 hover:border-amber-300 transition-colors">
           <p className="text-3xl mb-2">👥</p>
-            <p className="font-medium text-gray-800">Пользователи</p>
-            <p className="text-sm text-gray-400 mt-1">Управление — Этап 1</p>
-          </div>
-          <div className="bg-white rounded-2xl border border-slate-200 p-6">
+          <p className="font-medium text-slate-800">Пользователи</p>
+          <p className="text-sm text-slate-400 mt-1">Управление доступом</p>
+        </Link>
+        <div className="bg-white rounded-2xl border border-slate-200 p-6 opacity-50">
           <p className="text-3xl mb-2">📊</p>
-            <p className="font-medium text-gray-800">Аналитика</p>
-            <p className="text-sm text-gray-400 mt-1">Этап 10</p>
+          <p className="font-medium text-slate-800">Аналитика</p>
+          <p className="text-sm text-slate-400 mt-1">Этап 10</p>
         </div>
       </div>
-      </main>
     </div>
   );
 }

src/app/admin/layout.tsx

@@ -0,0 +1,30 @@
+import { headers } from "next/headers";
+import { auth } from "@/lib/auth";
+import { redirect } from "next/navigation";
+import { AdminNav } from "@/components/admin/admin-nav";
+import { LogoutButton } from "@/components/layout/logout-button";
+
+export default async function AdminLayout({ children }: { children: React.ReactNode }) {
+  const session = await auth.api.getSession({ headers: await headers() });
+  if (!session) redirect("/login");
+  if (session.user.role !== "admin") redirect("/dashboard");
+
+  return (
+    <div className="min-h-screen flex bg-slate-50">
+      <aside className="w-56 bg-slate-900 text-white flex flex-col shrink-0 fixed h-full z-10">
+        <div className="px-5 py-5 border-b border-slate-800">
+          <p className="font-bold text-amber-400 text-base">Second Brain</p>
+          <p className="text-xs text-slate-400 mt-0.5">Админ-панель</p>
+        </div>
+        <nav className="flex-1 p-3 space-y-0.5 overflow-y-auto">
+          <AdminNav />
+        </nav>
+        <div className="p-4 border-t border-slate-800">
+          <p className="text-xs text-slate-400 mb-3 truncate">{session.user.name}</p>
+          <LogoutButton />
+        </div>
+      </aside>
+      <div className="ml-56 flex-1 min-h-screen">{children}</div>
+    </div>
+  );
+}

src/app/admin/users/page.tsx

@@ -0,0 +1,70 @@
+import { prisma } from "@/lib/prisma";
+import { Badge } from "@/components/ui/badge";
+
+const roleLabel: Record<string, string> = {
+  admin: "Администратор",
+  curator: "Куратор",
+  student: "Ученик",
+};
+
+const roleVariant: Record<string, "default" | "secondary" | "outline"> = {
+  admin: "default",
+  curator: "secondary",
+  student: "outline",
+};
+
+export default async function UsersPage() {
+  const users = await prisma.user.findMany({
+    orderBy: { createdAt: "desc" },
+    include: { _count: { select: { enrollments: true } } },
+  });
+
+  return (
+    <div className="p-8">
+      <div className="mb-6">
+        <h1 className="text-2xl font-semibold text-slate-800">Пользователи</h1>
+        <p className="text-slate-500 text-sm mt-0.5">{users.length} пользователей</p>
+      </div>
+
+      <div className="bg-white border border-slate-200 rounded-2xl overflow-hidden">
+        <table className="w-full">
+          <thead>
+            <tr className="border-b border-slate-100 bg-slate-50">
+              <th className="text-left px-5 py-3 text-xs font-medium text-slate-500 uppercase">Пользователь</th>
+              <th className="text-left px-5 py-3 text-xs font-medium text-slate-500 uppercase">Роль</th>
+              <th className="text-left px-5 py-3 text-xs font-medium text-slate-500 uppercase">Курсов</th>
+              <th className="text-left px-5 py-3 text-xs font-medium text-slate-500 uppercase">Email подтверждён</th>
+              <th className="text-left px-5 py-3 text-xs font-medium text-slate-500 uppercase">Зарегистрирован</th>
+            </tr>
+          </thead>
+          <tbody>
+            {users.map((user) => (
+              <tr key={user.id} className="border-b border-slate-50 last:border-0 hover:bg-slate-50">
+                <td className="px-5 py-3">
+                  <p className="font-medium text-slate-800">{user.name}</p>
+                  <p className="text-xs text-slate-400">{user.email}</p>
+                </td>
+                <td className="px-5 py-3">
+                  <Badge variant={roleVariant[user.role] ?? "outline"}>
+                    {roleLabel[user.role] ?? user.role}
+                  </Badge>
+                </td>
+                <td className="px-5 py-3 text-sm text-slate-600">
+                  {user._count.enrollments}
+                </td>
+                <td className="px-5 py-3">
+                  <span className={`text-xs font-medium ${user.emailVerified ? "text-green-600" : "text-slate-400"}`}>
+                    {user.emailVerified ? "Да" : "Нет"}
+                  </span>
+                </td>
+                <td className="px-5 py-3 text-sm text-slate-400">
+                  {new Date(user.createdAt).toLocaleDateString("ru-RU")}
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}

src/app/api/admin/upload/route.ts

@@ -0,0 +1,23 @@
+import { NextRequest, NextResponse } from "next/server";
+import { headers } from "next/headers";
+import { auth } from "@/lib/auth";
+import { uploadFile } from "@/lib/s3";
+import { randomUUID } from "crypto";
+
+export async function POST(req: NextRequest) {
+  const session = await auth.api.getSession({ headers: await headers() });
+  if (!session || session.user.role !== "admin") {
+    return NextResponse.json({ error: "Forbidden" }, { status: 403 });
+  }
+
+  const form = await req.formData();
+  const file = form.get("file") as File | null;
+  if (!file) return NextResponse.json({ error: "No file" }, { status: 400 });
+
+  const ext = file.name.split(".").pop() ?? "bin";
+  const key = `uploads/${randomUUID()}.${ext}`;
+  const buffer = Buffer.from(await file.arrayBuffer());
+
+  const url = await uploadFile(key, buffer, file.type);
+  return NextResponse.json({ url, key });
+}

src/app/globals.css

@@ -1,26 +1,131 @@
 @import "tailwindcss";
+@import "tw-animate-css";
+@import "shadcn/tailwind.css";
+@plugin "@tailwindcss/typography";
 
-:root {
-  --background: #ffffff;
-  --foreground: #171717;
-}
+@custom-variant dark (&:is(.dark *));
 
 @theme inline {
   --color-background: var(--background);
   --color-foreground: var(--foreground);
-  --font-sans: var(--font-geist-sans);
+  --font-sans: var(--font-sans);
   --font-mono: var(--font-geist-mono);
+  --font-heading: var(--font-sans);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar: var(--sidebar);
+  --color-chart-5: var(--chart-5);
+  --color-chart-4: var(--chart-4);
+  --color-chart-3: var(--chart-3);
+  --color-chart-2: var(--chart-2);
+  --color-chart-1: var(--chart-1);
+  --color-ring: var(--ring);
+  --color-input: var(--input);
+  --color-border: var(--border);
+  --color-destructive: var(--destructive);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent: var(--accent);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-muted: var(--muted);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary: var(--secondary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary: var(--primary);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-popover: var(--popover);
+  --color-card-foreground: var(--card-foreground);
+  --color-card: var(--card);
+  --radius-sm: calc(var(--radius) * 0.6);
+  --radius-md: calc(var(--radius) * 0.8);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) * 1.4);
+  --radius-2xl: calc(var(--radius) * 1.8);
+  --radius-3xl: calc(var(--radius) * 2.2);
+  --radius-4xl: calc(var(--radius) * 2.6);
 }
 
-@media (prefers-color-scheme: dark) {
 :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
-  }
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.87 0 0);
+  --chart-2: oklch(0.556 0 0);
+  --chart-3: oklch(0.439 0 0);
+  --chart-4: oklch(0.371 0 0);
+  --chart-5: oklch(0.269 0 0);
+  --radius: 0.625rem;
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
 }
 
-body {
-  background: var(--background);
-  color: var(--foreground);
-  font-family: Arial, Helvetica, sans-serif;
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.87 0 0);
+  --chart-2: oklch(0.556 0 0);
+  --chart-3: oklch(0.439 0 0);
+  --chart-4: oklch(0.371 0 0);
+  --chart-5: oklch(0.269 0 0);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+  html {
+    @apply font-sans;
+  }
 }

src/components/admin/admin-nav.tsx

@@ -0,0 +1,34 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { cn } from "@/lib/utils";
+
+const links = [
+  { href: "/admin/dashboard", label: "Обзор" },
+  { href: "/admin/courses", label: "Курсы" },
+  { href: "/admin/users", label: "Пользователи" },
+];
+
+export function AdminNav() {
+  const pathname = usePathname();
+
+  return (
+    <>
+      {links.map(({ href, label }) => (
+        <Link
+          key={href}
+          href={href}
+          className={cn(
+            "block px-3 py-2 rounded-lg text-sm transition-colors",
+            pathname === href || (href !== "/admin/dashboard" && pathname.startsWith(href))
+              ? "bg-slate-700 text-white"
+              : "text-slate-300 hover:bg-slate-800 hover:text-white"
+          )}
+        >
+          {label}
+        </Link>
+      ))}
+    </>
+  );
+}

src/components/admin/course-edit-form.tsx

@@ -0,0 +1,99 @@
+"use client";
+
+import { useState, useTransition } from "react";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import { Button } from "@/components/ui/button";
+import { updateCourse, deleteCourse } from "@/app/admin/courses/actions";
+
+interface Course {
+  id: string;
+  title: string;
+  slug: string;
+  description: string | null;
+  coverImage: string | null;
+  published: boolean;
+}
+
+export function CourseEditForm({ course }: { course: Course }) {
+  const [published, setPublished] = useState(course.published);
+  const [coverImage, setCoverImage] = useState(course.coverImage ?? "");
+  const [uploading, setUploading] = useState(false);
+  const [pending, startTransition] = useTransition();
+
+  async function handleImageUpload(e: React.ChangeEvent<HTMLInputElement>) {
+    const file = e.target.files?.[0];
+    if (!file) return;
+    setUploading(true);
+    const fd = new FormData();
+    fd.append("file", file);
+    const res = await fetch("/api/admin/upload", { method: "POST", body: fd });
+    const data = await res.json();
+    if (data.url) setCoverImage(data.url);
+    setUploading(false);
+  }
+
+  function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
+    e.preventDefault();
+    const fd = new FormData(e.currentTarget);
+    fd.set("published", String(published));
+    fd.set("coverImage", coverImage);
+    startTransition(() => updateCourse(course.id, fd));
+  }
+
+  function handleDelete() {
+    if (!confirm("Удалить курс? Это действие нельзя отменить.")) return;
+    startTransition(() => deleteCourse(course.id));
+  }
+
+  return (
+    <form onSubmit={handleSubmit} className="space-y-4">
+      <div className="grid grid-cols-2 gap-4">
+        <div className="space-y-1.5">
+          <Label htmlFor="title">Название</Label>
+          <Input id="title" name="title" defaultValue={course.title} required />
+        </div>
+        <div className="space-y-1.5">
+          <Label htmlFor="slug">Slug</Label>
+          <Input id="slug" name="slug" defaultValue={course.slug} required />
+        </div>
+      </div>
+      <div className="space-y-1.5">
+        <Label htmlFor="description">Описание</Label>
+        <Textarea id="description" name="description" defaultValue={course.description ?? ""} rows={3} />
+      </div>
+      <div className="space-y-1.5">
+        <Label>Обложка</Label>
+        <div className="flex items-center gap-3">
+          {coverImage && (
+            // eslint-disable-next-line @next/next/no-img-element
+            <img src={coverImage} alt="cover" className="w-16 h-10 object-cover rounded-md border" />
+          )}
+          <Input type="file" accept="image/*" onChange={handleImageUpload} disabled={uploading} className="max-w-xs" />
+          {uploading && <span className="text-sm text-slate-400">Загрузка...</span>}
+        </div>
+      </div>
+      <div className="flex items-center gap-2">
+        <button
+          type="button"
+          role="switch"
+          aria-checked={published}
+          onClick={() => setPublished(!published)}
+          className={`relative w-10 h-6 rounded-full transition-colors ${published ? "bg-green-500" : "bg-slate-300"}`}
+        >
+          <span className={`absolute top-1 left-1 w-4 h-4 bg-white rounded-full shadow transition-transform ${published ? "translate-x-4" : ""}`} />
+        </button>
+        <span className="text-sm text-slate-600">{published ? "Опубликован" : "Черновик"}</span>
+      </div>
+      <div className="flex justify-between pt-2">
+        <Button type="button" variant="destructive" onClick={handleDelete} disabled={pending}>
+          Удалить курс
+        </Button>
+        <Button type="submit" disabled={pending || uploading}>
+          {pending ? "Сохранение..." : "Сохранить"}
+        </Button>
+      </div>
+    </form>
+  );
+}

src/components/admin/create-course-dialog.tsx

@@ -0,0 +1,52 @@
+"use client";
+
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { createCourse } from "@/app/admin/courses/actions";
+
+export function CreateCourseDialog() {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        <Button>+ Создать курс</Button>
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Новый курс</DialogTitle>
+        </DialogHeader>
+        <form action={createCourse} className="space-y-4">
+          <div className="space-y-1.5">
+            <Label htmlFor="title">Название</Label>
+            <Input id="title" name="title" placeholder="Obsidian PKM" required />
+          </div>
+          <div className="space-y-1.5">
+            <Label htmlFor="slug">Slug (URL)</Label>
+            <Input id="slug" name="slug" placeholder="obsidian-pkm (авто если пусто)" />
+          </div>
+          <div className="space-y-1.5">
+            <Label htmlFor="description">Описание</Label>
+            <Textarea id="description" name="description" placeholder="Краткое описание курса" rows={3} />
+          </div>
+          <div className="flex justify-end gap-2">
+            <Button type="button" variant="outline" onClick={() => setOpen(false)}>
+              Отмена
+            </Button>
+            <Button type="submit">Создать</Button>
+          </div>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}

src/components/admin/enrollment-manager.tsx

@@ -0,0 +1,98 @@
+"use client";
+
+import { useState, useTransition } from "react";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { grantAccess, revokeAccess } from "@/app/admin/courses/[courseId]/actions";
+
+interface Student {
+  id: string;
+  name: string;
+  email: string;
+}
+
+interface Props {
+  courseId: string;
+  allStudents: Student[];
+  enrolledIds: string[];
+}
+
+export function EnrollmentManager({ courseId, allStudents, enrolledIds }: Props) {
+  const [enrolled, setEnrolled] = useState(new Set(enrolledIds));
+  const [search, setSearch] = useState("");
+  const [pending, startTransition] = useTransition();
+
+  const filtered = allStudents.filter(
+    (s) =>
+      s.name.toLowerCase().includes(search.toLowerCase()) ||
+      s.email.toLowerCase().includes(search.toLowerCase())
+  );
+
+  function toggle(userId: string) {
+    if (enrolled.has(userId)) {
+      setEnrolled((prev) => { const s = new Set(prev); s.delete(userId); return s; });
+      startTransition(() => revokeAccess(courseId, userId));
+    } else {
+      setEnrolled((prev) => new Set(prev).add(userId));
+      startTransition(() => grantAccess(courseId, userId));
+    }
+  }
+
+  const enrolledStudents = allStudents.filter((s) => enrolled.has(s.id));
+
+  return (
+    <div className="space-y-4">
+      {enrolledStudents.length > 0 && (
+        <div>
+          <p className="text-sm text-slate-500 mb-2">Доступ открыт ({enrolledStudents.length}):</p>
+          <div className="flex flex-wrap gap-2">
+            {enrolledStudents.map((s) => (
+              <Badge key={s.id} variant="secondary" className="gap-1.5 py-1 pr-1">
+                {s.name}
+                <button
+                  onClick={() => toggle(s.id)}
+                  disabled={pending}
+                  className="ml-1 text-slate-400 hover:text-red-500"
+                >
+                  ✕
+                </button>
+              </Badge>
+            ))}
+          </div>
+        </div>
+      )}
+
+      <div>
+        <p className="text-sm text-slate-500 mb-2">Добавить ученика:</p>
+        <Input
+          placeholder="Поиск по имени или email..."
+          value={search}
+          onChange={(e) => setSearch(e.target.value)}
+          className="max-w-sm mb-3"
+        />
+        <div className="space-y-1.5 max-h-48 overflow-y-auto">
+          {filtered.map((student) => (
+            <div key={student.id} className="flex items-center justify-between px-3 py-2 rounded-lg border border-slate-100 bg-slate-50">
+              <div>
+                <p className="text-sm font-medium text-slate-700">{student.name}</p>
+                <p className="text-xs text-slate-400">{student.email}</p>
+              </div>
+              <Button
+                size="sm"
+                variant={enrolled.has(student.id) ? "destructive" : "outline"}
+                onClick={() => toggle(student.id)}
+                disabled={pending}
+              >
+                {enrolled.has(student.id) ? "Убрать" : "Дать доступ"}
+              </Button>
+            </div>
+          ))}
+          {filtered.length === 0 && (
+            <p className="text-sm text-slate-400 py-2">Студентов не найдено</p>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/admin/lesson-editor.tsx

@@ -0,0 +1,183 @@
+"use client";
+
+import { useState, useCallback, useTransition } from "react";
+import { useEditor, EditorContent } from "@tiptap/react";
+import StarterKit from "@tiptap/starter-kit";
+import Image from "@tiptap/extension-image";
+import Link from "@tiptap/extension-link";
+import Placeholder from "@tiptap/extension-placeholder";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Button } from "@/components/ui/button";
+import { saveLesson } from "@/app/admin/courses/[courseId]/modules/[moduleId]/lessons/[lessonId]/actions";
+
+interface LessonData {
+  id: string;
+  title: string;
+  kinescopeId: string;
+  content: object;
+  published: boolean;
+}
+
+export function LessonEditor({
+  lesson,
+  courseId,
+  moduleId,
+}: {
+  lesson: LessonData;
+  courseId: string;
+  moduleId: string;
+}) {
+  const [title, setTitle] = useState(lesson.title);
+  const [kinescopeId, setKinescopeId] = useState(lesson.kinescopeId);
+  const [published, setPublished] = useState(lesson.published);
+  const [uploading, setUploading] = useState(false);
+  const [saved, setSaved] = useState(false);
+  const [pending, startTransition] = useTransition();
+
+  const editor = useEditor({
+    extensions: [
+      StarterKit,
+      Image.configure({ inline: false }),
+      Link.configure({ openOnClick: false }),
+      Placeholder.configure({ placeholder: "Начните писать текст урока..." }),
+    ],
+    content: Object.keys(lesson.content).length ? lesson.content : undefined,
+    editorProps: {
+      attributes: {
+        class: "prose prose-slate max-w-none min-h-[300px] focus:outline-none p-4",
+      },
+    },
+  });
+
+  const uploadImage = useCallback(async () => {
+    const input = document.createElement("input");
+    input.type = "file";
+    input.accept = "image/*";
+    input.onchange = async () => {
+      const file = input.files?.[0];
+      if (!file || !editor) return;
+      setUploading(true);
+      const fd = new FormData();
+      fd.append("file", file);
+      const res = await fetch("/api/admin/upload", { method: "POST", body: fd });
+      const data = await res.json();
+      if (data.url) editor.chain().focus().setImage({ src: data.url }).run();
+      setUploading(false);
+    };
+    input.click();
+  }, [editor]);
+
+  function handleSave() {
+    if (!editor) return;
+    startTransition(async () => {
+      await saveLesson(lesson.id, courseId, moduleId, {
+        title,
+        kinescopeId,
+        content: editor.getJSON(),
+        published,
+      });
+      setSaved(true);
+      setTimeout(() => setSaved(false), 2000);
+    });
+  }
+
+  return (
+    <div className="space-y-5">
+      {/* Header controls */}
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-3">
+          <button
+            type="button"
+            role="switch"
+            aria-checked={published}
+            onClick={() => setPublished(!published)}
+            className={`relative w-10 h-6 rounded-full transition-colors ${published ? "bg-green-500" : "bg-slate-300"}`}
+          >
+            <span className={`absolute top-1 left-1 w-4 h-4 bg-white rounded-full shadow transition-transform ${published ? "translate-x-4" : ""}`} />
+          </button>
+          <span className="text-sm text-slate-600">{published ? "Опубликован" : "Черновик"}</span>
+        </div>
+        <Button onClick={handleSave} disabled={pending || uploading}>
+          {pending ? "Сохранение..." : saved ? "✓ Сохранено" : "Сохранить урок"}
+        </Button>
+      </div>
+
+      {/* Title */}
+      <div className="space-y-1.5">
+        <Label htmlFor="lesson-title">Заголовок урока</Label>
+        <Input
+          id="lesson-title"
+          value={title}
+          onChange={(e) => setTitle(e.target.value)}
+          className="text-lg font-medium"
+        />
+      </div>
+
+      {/* Kinescope ID */}
+      <div className="space-y-1.5">
+        <Label htmlFor="kinescope-id">Kinescope ID</Label>
+        <Input
+          id="kinescope-id"
+          value={kinescopeId}
+          onChange={(e) => setKinescopeId(e.target.value)}
+          placeholder="Оставьте пустым если видео нет"
+          className="font-mono text-sm"
+        />
+      </div>
+
+      {/* TipTap Editor */}
+      <div className="space-y-1.5">
+        <Label>Содержимое урока</Label>
+
+        {/* Toolbar */}
+        <div className="flex flex-wrap gap-1 p-2 bg-slate-50 border border-slate-200 rounded-t-lg border-b-0">
+          <ToolBtn onClick={() => editor?.chain().focus().toggleBold().run()} active={editor?.isActive("bold")}>Ж</ToolBtn>
+          <ToolBtn onClick={() => editor?.chain().focus().toggleItalic().run()} active={editor?.isActive("italic")}><em>К</em></ToolBtn>
+          <ToolBtn onClick={() => editor?.chain().focus().toggleHeading({ level: 2 }).run()} active={editor?.isActive("heading", { level: 2 })}>H2</ToolBtn>
+          <ToolBtn onClick={() => editor?.chain().focus().toggleHeading({ level: 3 }).run()} active={editor?.isActive("heading", { level: 3 })}>H3</ToolBtn>
+          <div className="w-px bg-slate-200 mx-1" />
+          <ToolBtn onClick={() => editor?.chain().focus().toggleBulletList().run()} active={editor?.isActive("bulletList")}>• Список</ToolBtn>
+          <ToolBtn onClick={() => editor?.chain().focus().toggleOrderedList().run()} active={editor?.isActive("orderedList")}>1. Список</ToolBtn>
+          <ToolBtn onClick={() => editor?.chain().focus().toggleBlockquote().run()} active={editor?.isActive("blockquote")}>&ldquo;&rdquo;</ToolBtn>
+          <ToolBtn onClick={() => editor?.chain().focus().toggleCodeBlock().run()} active={editor?.isActive("codeBlock")}>{'</>'}</ToolBtn>
+          <div className="w-px bg-slate-200 mx-1" />
+          <ToolBtn onClick={uploadImage} disabled={uploading}>{uploading ? "Загрузка..." : "🖼 Фото"}</ToolBtn>
+          <div className="w-px bg-slate-200 mx-1" />
+          <ToolBtn onClick={() => editor?.chain().focus().undo().run()}>↩</ToolBtn>
+          <ToolBtn onClick={() => editor?.chain().focus().redo().run()}>↪</ToolBtn>
+        </div>
+
+        {/* Editor content */}
+        <div className="border border-slate-200 rounded-b-lg bg-white">
+          <EditorContent editor={editor} />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function ToolBtn({
+  onClick,
+  active,
+  disabled,
+  children,
+}: {
+  onClick: () => void;
+  active?: boolean;
+  disabled?: boolean;
+  children: React.ReactNode;
+}) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      disabled={disabled}
+      className={`px-2 py-1 text-sm rounded transition-colors ${
+        active ? "bg-slate-700 text-white" : "hover:bg-slate-200 text-slate-700"
+      } disabled:opacity-50`}
+    >
+      {children}
+    </button>
+  );
+}

src/components/admin/sortable-lessons.tsx

@@ -0,0 +1,151 @@
+"use client";
+
+import { useState, useTransition } from "react";
+import {
+  DndContext,
+  closestCenter,
+  PointerSensor,
+  useSensor,
+  useSensors,
+  DragEndEvent,
+} from "@dnd-kit/core";
+import {
+  SortableContext,
+  verticalListSortingStrategy,
+  useSortable,
+  arrayMove,
+} from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import Link from "next/link";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { createLesson, deleteLesson, updateLesson, reorderLessons } from "@/app/admin/courses/[courseId]/modules/[moduleId]/actions";
+
+interface Lesson {
+  id: string;
+  title: string;
+  order: number;
+  published: boolean;
+}
+
+function SortableLesson({
+  lesson,
+  courseId,
+  moduleId,
+}: {
+  lesson: Lesson;
+  courseId: string;
+  moduleId: string;
+}) {
+  const [editing, setEditing] = useState(false);
+  const [pending, startTransition] = useTransition();
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } =
+    useSortable({ id: lesson.id });
+
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    opacity: isDragging ? 0.5 : 1,
+  };
+
+  function handleUpdate(e: React.FormEvent<HTMLFormElement>) {
+    e.preventDefault();
+    const fd = new FormData(e.currentTarget);
+    startTransition(() => updateLesson(lesson.id, courseId, moduleId, fd));
+    setEditing(false);
+  }
+
+  function handleDelete() {
+    if (!confirm(`Удалить урок "${lesson.title}"?`)) return;
+    startTransition(() => deleteLesson(lesson.id, courseId, moduleId));
+  }
+
+  return (
+    <div ref={setNodeRef} style={style} className="flex items-center gap-3 bg-slate-50 border border-slate-200 rounded-xl px-4 py-3">
+      <button type="button" {...attributes} {...listeners} className="text-slate-300 hover:text-slate-500 cursor-grab active:cursor-grabbing">
+        ⋮⋮
+      </button>
+      {editing ? (
+        <form onSubmit={handleUpdate} className="flex items-center gap-2 flex-1">
+          <Input name="title" defaultValue={lesson.title} autoFocus className="h-8 text-sm" />
+          <Button type="submit" size="sm" disabled={pending}>Сохранить</Button>
+          <Button type="button" variant="ghost" size="sm" onClick={() => setEditing(false)}>Отмена</Button>
+        </form>
+      ) : (
+        <>
+          <span className="flex-1 font-medium text-slate-700">{lesson.title}</span>
+          <Badge variant={lesson.published ? "default" : "secondary"} className="text-xs">
+            {lesson.published ? "Опубликован" : "Черновик"}
+          </Badge>
+          <Link
+            href={`/admin/courses/${courseId}/modules/${moduleId}/lessons/${lesson.id}`}
+            className="text-xs text-amber-600 hover:underline"
+          >
+            Редактировать
+          </Link>
+          <button type="button" onClick={() => setEditing(true)} className="text-xs text-slate-500 hover:text-slate-700">
+            Переименовать
+          </button>
+          <button type="button" onClick={handleDelete} disabled={pending} className="text-xs text-red-400 hover:text-red-600">
+            Удалить
+          </button>
+        </>
+      )}
+    </div>
+  );
+}
+
+export function SortableLessons({
+  courseId,
+  moduleId,
+  lessons,
+}: {
+  courseId: string;
+  moduleId: string;
+  lessons: Lesson[];
+}) {
+  const [items, setItems] = useState(lessons);
+  const [, startTransition] = useTransition();
+
+  const sensors = useSensors(useSensor(PointerSensor));
+
+  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);
+    setItems(newItems);
+    startTransition(() => reorderLessons(moduleId, courseId, newItems.map((l) => l.id)));
+  }
+
+  function handleCreate(e: React.FormEvent<HTMLFormElement>) {
+    e.preventDefault();
+    const fd = new FormData(e.currentTarget);
+    e.currentTarget.reset();
+    startTransition(() => createLesson(moduleId, courseId, fd));
+  }
+
+  return (
+    <div className="space-y-3">
+      <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} />
+          ))}
+        </SortableContext>
+      </DndContext>
+
+      {items.length === 0 && (
+        <p className="text-sm text-slate-400 py-2">Уроков пока нет. Добавьте первый.</p>
+      )}
+
+      <form onSubmit={handleCreate} className="flex gap-2 pt-2">
+        <Input name="title" placeholder="Название нового урока" required className="max-w-xs" />
+        <Button type="submit">+ Урок</Button>
+      </form>
+    </div>
+  );
+}

src/components/admin/sortable-modules.tsx

@@ -0,0 +1,138 @@
+"use client";
+
+import { useState, useTransition } from "react";
+import {
+  DndContext,
+  closestCenter,
+  PointerSensor,
+  useSensor,
+  useSensors,
+  DragEndEvent,
+} from "@dnd-kit/core";
+import {
+  SortableContext,
+  verticalListSortingStrategy,
+  useSortable,
+  arrayMove,
+} from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import Link from "next/link";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { createModule, deleteModule, updateModule, reorderModules } from "@/app/admin/courses/[courseId]/actions";
+
+interface Module {
+  id: string;
+  title: string;
+  order: number;
+  _count: { lessons: number };
+}
+
+function SortableModule({
+  mod,
+  courseId,
+}: {
+  mod: Module;
+  courseId: string;
+}) {
+  const [editing, setEditing] = useState(false);
+  const [pending, startTransition] = useTransition();
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } =
+    useSortable({ id: mod.id });
+
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    opacity: isDragging ? 0.5 : 1,
+  };
+
+  function handleUpdate(e: React.FormEvent<HTMLFormElement>) {
+    e.preventDefault();
+    const fd = new FormData(e.currentTarget);
+    startTransition(() => updateModule(mod.id, courseId, fd));
+    setEditing(false);
+  }
+
+  function handleDelete() {
+    if (!confirm(`Удалить модуль "${mod.title}"? Все уроки будут удалены.`)) return;
+    startTransition(() => deleteModule(mod.id, courseId));
+  }
+
+  return (
+    <div ref={setNodeRef} style={style} className="flex items-center gap-3 bg-slate-50 border border-slate-200 rounded-xl px-4 py-3">
+      <button type="button" {...attributes} {...listeners} className="text-slate-300 hover:text-slate-500 cursor-grab active:cursor-grabbing">
+        ⋮⋮
+      </button>
+      {editing ? (
+        <form onSubmit={handleUpdate} className="flex items-center gap-2 flex-1">
+          <Input name="title" defaultValue={mod.title} autoFocus className="h-8 text-sm" />
+          <Button type="submit" size="sm" disabled={pending}>Сохранить</Button>
+          <Button type="button" variant="ghost" size="sm" onClick={() => setEditing(false)}>Отмена</Button>
+        </form>
+      ) : (
+        <>
+          <span className="flex-1 font-medium text-slate-700">{mod.title}</span>
+          <span className="text-sm text-slate-400">{mod._count.lessons} уроков</span>
+          <Link
+            href={`/admin/courses/${courseId}/modules/${mod.id}`}
+            className="text-xs text-amber-600 hover:underline"
+          >
+            Уроки
+          </Link>
+          <button type="button" onClick={() => setEditing(true)} className="text-xs text-slate-500 hover:text-slate-700">
+            Переименовать
+          </button>
+          <button type="button" onClick={handleDelete} disabled={pending} className="text-xs text-red-400 hover:text-red-600">
+            Удалить
+          </button>
+        </>
+      )}
+    </div>
+  );
+}
+
+export function SortableModules({ courseId, modules }: { courseId: string; modules: Module[] }) {
+  const [items, setItems] = useState(modules);
+  const [, startTransition] = useTransition();
+
+  const sensors = useSensors(useSensor(PointerSensor));
+
+  function handleDragEnd(event: DragEndEvent) {
+    const { active, over } = event;
+    if (!over || active.id === over.id) return;
+
+    const oldIndex = items.findIndex((m) => m.id === active.id);
+    const newIndex = items.findIndex((m) => m.id === over.id);
+    const newItems = arrayMove(items, oldIndex, newIndex);
+    setItems(newItems);
+    startTransition(() => reorderModules(courseId, newItems.map((m) => m.id)));
+  }
+
+  function handleCreate(e: React.FormEvent<HTMLFormElement>) {
+    e.preventDefault();
+    const fd = new FormData(e.currentTarget);
+    e.currentTarget.reset();
+    startTransition(() => createModule(courseId, fd));
+  }
+
+  return (
+    <div className="space-y-3">
+      <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={handleDragEnd}>
+        <SortableContext items={items.map((m) => m.id)} strategy={verticalListSortingStrategy}>
+          {items.map((mod) => (
+            <SortableModule key={mod.id} mod={mod} courseId={courseId} />
+          ))}
+        </SortableContext>
+      </DndContext>
+
+      {items.length === 0 && (
+        <p className="text-sm text-slate-400 py-2">Модулей пока нет. Добавьте первый.</p>
+      )}
+
+      <form onSubmit={handleCreate} className="flex gap-2 pt-2">
+        <Input name="title" placeholder="Название нового модуля" required className="max-w-xs" />
+        <Button type="submit">+ Модуль</Button>
+      </form>
+    </div>
+  );
+}

src/components/ui/alert-dialog.tsx

@@ -0,0 +1,187 @@
+"use client"
+
+import * as React from "react"
+import { AlertDialog as AlertDialogPrimitive } from "@base-ui/react/alert-dialog"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+
+function AlertDialog({ ...props }: AlertDialogPrimitive.Root.Props) {
+  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />
+}
+
+function AlertDialogTrigger({ ...props }: AlertDialogPrimitive.Trigger.Props) {
+  return (
+    <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
+  )
+}
+
+function AlertDialogPortal({ ...props }: AlertDialogPrimitive.Portal.Props) {
+  return (
+    <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
+  )
+}
+
+function AlertDialogOverlay({
+  className,
+  ...props
+}: AlertDialogPrimitive.Backdrop.Props) {
+  return (
+    <AlertDialogPrimitive.Backdrop
+      data-slot="alert-dialog-overlay"
+      className={cn(
+        "fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogContent({
+  className,
+  size = "default",
+  ...props
+}: AlertDialogPrimitive.Popup.Props & {
+  size?: "default" | "sm"
+}) {
+  return (
+    <AlertDialogPortal>
+      <AlertDialogOverlay />
+      <AlertDialogPrimitive.Popup
+        data-slot="alert-dialog-content"
+        data-size={size}
+        className={cn(
+          "group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-popover p-4 text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+          className
+        )}
+        {...props}
+      />
+    </AlertDialogPortal>
+  )
+}
+
+function AlertDialogHeader({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-header"
+      className={cn(
+        "grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-4 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogFooter({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-footer"
+      className={cn(
+        "-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t bg-muted/50 p-4 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogMedia({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-media"
+      className={cn(
+        "mb-2 inline-flex size-10 items-center justify-center rounded-md bg-muted sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-6",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
+  return (
+    <AlertDialogPrimitive.Title
+      data-slot="alert-dialog-title"
+      className={cn(
+        "font-heading text-base font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
+  return (
+    <AlertDialogPrimitive.Description
+      data-slot="alert-dialog-description"
+      className={cn(
+        "text-sm text-balance text-muted-foreground md:text-pretty *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogAction({
+  className,
+  ...props
+}: React.ComponentProps<typeof Button>) {
+  return (
+    <Button
+      data-slot="alert-dialog-action"
+      className={cn(className)}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogCancel({
+  className,
+  variant = "outline",
+  size = "default",
+  ...props
+}: AlertDialogPrimitive.Close.Props &
+  Pick<React.ComponentProps<typeof Button>, "variant" | "size">) {
+  return (
+    <AlertDialogPrimitive.Close
+      data-slot="alert-dialog-cancel"
+      className={cn(className)}
+      render={<Button variant={variant} size={size} />}
+      {...props}
+    />
+  )
+}
+
+export {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogMedia,
+  AlertDialogOverlay,
+  AlertDialogPortal,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+}

src/components/ui/badge.tsx

@@ -0,0 +1,52 @@
+import { mergeProps } from "@base-ui/react/merge-props"
+import { useRender } from "@base-ui/react/use-render"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const badgeVariants = cva(
+  "group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
+        secondary:
+          "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
+        destructive:
+          "bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20",
+        outline:
+          "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground",
+        ghost:
+          "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Badge({
+  className,
+  variant = "default",
+  render,
+  ...props
+}: useRender.ComponentProps<"span"> & VariantProps<typeof badgeVariants>) {
+  return useRender({
+    defaultTagName: "span",
+    props: mergeProps<"span">(
+      {
+        className: cn(badgeVariants({ variant }), className),
+      },
+      props
+    ),
+    render,
+    state: {
+      slot: "badge",
+      variant,
+    },
+  })
+}
+
+export { Badge, badgeVariants }

src/components/ui/button.tsx

@@ -0,0 +1,58 @@
+import { Button as ButtonPrimitive } from "@base-ui/react/button"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
+        outline:
+          "border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
+        ghost:
+          "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
+        destructive:
+          "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default:
+          "h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+        lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        icon: "size-8",
+        "icon-xs":
+          "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm":
+          "size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
+        "icon-lg": "size-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  ...props
+}: ButtonPrimitive.Props & VariantProps<typeof buttonVariants>) {
+  return (
+    <ButtonPrimitive
+      data-slot="button"
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Button, buttonVariants }

src/components/ui/dialog.tsx

@@ -0,0 +1,160 @@
+"use client"
+
+import * as React from "react"
+import { Dialog as DialogPrimitive } from "@base-ui/react/dialog"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { XIcon } from "lucide-react"
+
+function Dialog({ ...props }: DialogPrimitive.Root.Props) {
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />
+}
+
+function DialogTrigger({ ...props }: DialogPrimitive.Trigger.Props) {
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
+}
+
+function DialogPortal({ ...props }: DialogPrimitive.Portal.Props) {
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
+}
+
+function DialogClose({ ...props }: DialogPrimitive.Close.Props) {
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
+}
+
+function DialogOverlay({
+  className,
+  ...props
+}: DialogPrimitive.Backdrop.Props) {
+  return (
+    <DialogPrimitive.Backdrop
+      data-slot="dialog-overlay"
+      className={cn(
+        "fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}: DialogPrimitive.Popup.Props & {
+  showCloseButton?: boolean
+}) {
+  return (
+    <DialogPortal>
+      <DialogOverlay />
+      <DialogPrimitive.Popup
+        data-slot="dialog-content"
+        className={cn(
+          "fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-popover p-4 text-sm text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        {showCloseButton && (
+          <DialogPrimitive.Close
+            data-slot="dialog-close"
+            render={
+              <Button
+                variant="ghost"
+                className="absolute top-2 right-2"
+                size="icon-sm"
+              />
+            }
+          >
+            <XIcon
+            />
+            <span className="sr-only">Close</span>
+          </DialogPrimitive.Close>
+        )}
+      </DialogPrimitive.Popup>
+    </DialogPortal>
+  )
+}
+
+function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-header"
+      className={cn("flex flex-col gap-2", className)}
+      {...props}
+    />
+  )
+}
+
+function DialogFooter({
+  className,
+  showCloseButton = false,
+  children,
+  ...props
+}: React.ComponentProps<"div"> & {
+  showCloseButton?: boolean
+}) {
+  return (
+    <div
+      data-slot="dialog-footer"
+      className={cn(
+        "-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t bg-muted/50 p-4 sm:flex-row sm:justify-end",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      {showCloseButton && (
+        <DialogPrimitive.Close render={<Button variant="outline" />}>
+          Close
+        </DialogPrimitive.Close>
+      )}
+    </div>
+  )
+}
+
+function DialogTitle({ className, ...props }: DialogPrimitive.Title.Props) {
+  return (
+    <DialogPrimitive.Title
+      data-slot="dialog-title"
+      className={cn(
+        "font-heading text-base leading-none font-medium",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogDescription({
+  className,
+  ...props
+}: DialogPrimitive.Description.Props) {
+  return (
+    <DialogPrimitive.Description
+      data-slot="dialog-description"
+      className={cn(
+        "text-sm text-muted-foreground *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+}

src/components/ui/input.tsx

@@ -0,0 +1,20 @@
+import * as React from "react"
+import { Input as InputPrimitive } from "@base-ui/react/input"
+
+import { cn } from "@/lib/utils"
+
+function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+  return (
+    <InputPrimitive
+      type={type}
+      data-slot="input"
+      className={cn(
+        "h-8 w-full min-w-0 rounded-lg border border-input bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Input }

src/components/ui/label.tsx

@@ -0,0 +1,20 @@
+"use client"
+
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Label({ className, ...props }: React.ComponentProps<"label">) {
+  return (
+    <label
+      data-slot="label"
+      className={cn(
+        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Label }

src/components/ui/select.tsx

@@ -0,0 +1,201 @@
+"use client"
+
+import * as React from "react"
+import { Select as SelectPrimitive } from "@base-ui/react/select"
+
+import { cn } from "@/lib/utils"
+import { ChevronDownIcon, CheckIcon, ChevronUpIcon } from "lucide-react"
+
+const Select = SelectPrimitive.Root
+
+function SelectGroup({ className, ...props }: SelectPrimitive.Group.Props) {
+  return (
+    <SelectPrimitive.Group
+      data-slot="select-group"
+      className={cn("scroll-my-1 p-1", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectValue({ className, ...props }: SelectPrimitive.Value.Props) {
+  return (
+    <SelectPrimitive.Value
+      data-slot="select-value"
+      className={cn("flex flex-1 text-left", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectTrigger({
+  className,
+  size = "default",
+  children,
+  ...props
+}: SelectPrimitive.Trigger.Props & {
+  size?: "sm" | "default"
+}) {
+  return (
+    <SelectPrimitive.Trigger
+      data-slot="select-trigger"
+      data-size={size}
+      className={cn(
+        "flex w-fit items-center justify-between gap-1.5 rounded-lg border border-input bg-transparent py-2 pr-2 pl-2.5 text-sm whitespace-nowrap transition-colors outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <SelectPrimitive.Icon
+        render={
+          <ChevronDownIcon className="pointer-events-none size-4 text-muted-foreground" />
+        }
+      />
+    </SelectPrimitive.Trigger>
+  )
+}
+
+function SelectContent({
+  className,
+  children,
+  side = "bottom",
+  sideOffset = 4,
+  align = "center",
+  alignOffset = 0,
+  alignItemWithTrigger = true,
+  ...props
+}: SelectPrimitive.Popup.Props &
+  Pick<
+    SelectPrimitive.Positioner.Props,
+    "align" | "alignOffset" | "side" | "sideOffset" | "alignItemWithTrigger"
+  >) {
+  return (
+    <SelectPrimitive.Portal>
+      <SelectPrimitive.Positioner
+        side={side}
+        sideOffset={sideOffset}
+        align={align}
+        alignOffset={alignOffset}
+        alignItemWithTrigger={alignItemWithTrigger}
+        className="isolate z-50"
+      >
+        <SelectPrimitive.Popup
+          data-slot="select-content"
+          data-align-trigger={alignItemWithTrigger}
+          className={cn("relative isolate z-50 max-h-(--available-height) w-(--anchor-width) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[align-trigger=true]:animate-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className )}
+          {...props}
+        >
+          <SelectScrollUpButton />
+          <SelectPrimitive.List>{children}</SelectPrimitive.List>
+          <SelectScrollDownButton />
+        </SelectPrimitive.Popup>
+      </SelectPrimitive.Positioner>
+    </SelectPrimitive.Portal>
+  )
+}
+
+function SelectLabel({
+  className,
+  ...props
+}: SelectPrimitive.GroupLabel.Props) {
+  return (
+    <SelectPrimitive.GroupLabel
+      data-slot="select-label"
+      className={cn("px-1.5 py-1 text-xs text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectItem({
+  className,
+  children,
+  ...props
+}: SelectPrimitive.Item.Props) {
+  return (
+    <SelectPrimitive.Item
+      data-slot="select-item"
+      className={cn(
+        "relative flex w-full cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+        className
+      )}
+      {...props}
+    >
+      <SelectPrimitive.ItemText className="flex flex-1 shrink-0 gap-2 whitespace-nowrap">
+        {children}
+      </SelectPrimitive.ItemText>
+      <SelectPrimitive.ItemIndicator
+        render={
+          <span className="pointer-events-none absolute right-2 flex size-4 items-center justify-center" />
+        }
+      >
+        <CheckIcon className="pointer-events-none" />
+      </SelectPrimitive.ItemIndicator>
+    </SelectPrimitive.Item>
+  )
+}
+
+function SelectSeparator({
+  className,
+  ...props
+}: SelectPrimitive.Separator.Props) {
+  return (
+    <SelectPrimitive.Separator
+      data-slot="select-separator"
+      className={cn("pointer-events-none -mx-1 my-1 h-px bg-border", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectScrollUpButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollUpArrow>) {
+  return (
+    <SelectPrimitive.ScrollUpArrow
+      data-slot="select-scroll-up-button"
+      className={cn(
+        "top-0 z-10 flex w-full cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <ChevronUpIcon
+      />
+    </SelectPrimitive.ScrollUpArrow>
+  )
+}
+
+function SelectScrollDownButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollDownArrow>) {
+  return (
+    <SelectPrimitive.ScrollDownArrow
+      data-slot="select-scroll-down-button"
+      className={cn(
+        "bottom-0 z-10 flex w-full cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <ChevronDownIcon
+      />
+    </SelectPrimitive.ScrollDownArrow>
+  )
+}
+
+export {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+}

src/components/ui/sonner.tsx

@@ -0,0 +1,49 @@
+"use client"
+
+import { useTheme } from "next-themes"
+import { Toaster as Sonner, type ToasterProps } from "sonner"
+import { CircleCheckIcon, InfoIcon, TriangleAlertIcon, OctagonXIcon, Loader2Icon } from "lucide-react"
+
+const Toaster = ({ ...props }: ToasterProps) => {
+  const { theme = "system" } = useTheme()
+
+  return (
+    <Sonner
+      theme={theme as ToasterProps["theme"]}
+      className="toaster group"
+      icons={{
+        success: (
+          <CircleCheckIcon className="size-4" />
+        ),
+        info: (
+          <InfoIcon className="size-4" />
+        ),
+        warning: (
+          <TriangleAlertIcon className="size-4" />
+        ),
+        error: (
+          <OctagonXIcon className="size-4" />
+        ),
+        loading: (
+          <Loader2Icon className="size-4 animate-spin" />
+        ),
+      }}
+      style={
+        {
+          "--normal-bg": "var(--popover)",
+          "--normal-text": "var(--popover-foreground)",
+          "--normal-border": "var(--border)",
+          "--border-radius": "var(--radius)",
+        } as React.CSSProperties
+      }
+      toastOptions={{
+        classNames: {
+          toast: "cn-toast",
+        },
+      }}
+      {...props}
+    />
+  )
+}
+
+export { Toaster }

src/components/ui/textarea.tsx

@@ -0,0 +1,18 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
+  return (
+    <textarea
+      data-slot="textarea"
+      className={cn(
+        "flex field-sizing-content min-h-16 w-full rounded-lg border border-input bg-transparent px-2.5 py-2 text-base transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Textarea }

src/lib/utils.ts

@@ -1,6 +1,6 @@
-import { type ClassValue, clsx } from "clsx";
-import { twMerge } from "tailwind-merge";
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
 
 export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs));
+  return twMerge(clsx(inputs))
 }