From 4183a912e4772de29759b132f60e4e908ea9a275 Mon Sep 17 00:00:00 2001
From: dmitriylaukhin <laukhin@dementiy.com>
Date: Tue, 7 Apr 2026 12:45:30 +0500
Subject: [PATCH] Add save and preview icons to lesson editor

- Save button now shows floppy disk icon (lucide Save)
- New Preview button with eye icon opens lesson in student view (new tab)
- Pass courseSlug through to LessonEditor for preview URL construction

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../[moduleId]/lessons/[lessonId]/page.tsx    |  3 +-
 src/components/admin/lesson-editor.tsx        | 35 ++++++++++++++-----
 2 files changed, 28 insertions(+), 10 deletions(-)

diff --git a/src/app/admin/courses/[courseId]/modules/[moduleId]/lessons/[lessonId]/page.tsx b/src/app/admin/courses/[courseId]/modules/[moduleId]/lessons/[lessonId]/page.tsx
index faa6ab9..363178c 100644
--- a/src/app/admin/courses/[courseId]/modules/[moduleId]/lessons/[lessonId]/page.tsx
+++ b/src/app/admin/courses/[courseId]/modules/[moduleId]/lessons/[lessonId]/page.tsx
@@ -16,7 +16,7 @@ export default async function LessonEditorPage({ params }: Props) {
     include: {
       files: { orderBy: { createdAt: "asc" } },
       module: {
-        include: { course: { select: { title: true } } },
+        include: { course: { select: { title: true, slug: true } } },
       },
     },
   });
@@ -47,6 +47,7 @@ export default async function LessonEditorPage({ params }: Props) {
           }}
           courseId={courseId}
           moduleId={moduleId}
+          courseSlug={lesson.module.course.slug}
         />
       </div>
 
diff --git a/src/components/admin/lesson-editor.tsx b/src/components/admin/lesson-editor.tsx
index f5938af..2d28f46 100644
--- a/src/components/admin/lesson-editor.tsx
+++ b/src/components/admin/lesson-editor.tsx
@@ -6,6 +6,7 @@ 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 { Save, Eye } from "lucide-react";
 import { saveLesson } from "@/app/admin/courses/[courseId]/modules/[moduleId]/lessons/[lessonId]/actions";
 
 interface LessonData {
@@ -20,10 +21,12 @@ export function LessonEditor({
   lesson,
   courseId,
   moduleId,
+  courseSlug,
 }: {
   lesson: LessonData;
   courseId: string;
   moduleId: string;
+  courseSlug: string;
 }) {
   const [title, setTitle] = useState(lesson.title);
   const [kinescopeId, setKinescopeId] = useState(lesson.kinescopeId);
@@ -121,15 +124,29 @@ export function LessonEditor({
           </span>
         </button>
 
-        <button
-          type="button"
-          onClick={handleSave}
-          disabled={pending || uploading}
-          className="btn-aubade btn-aubade-accent px-5 py-2 text-sm"
-          style={{ opacity: pending || uploading ? 0.6 : 1 }}
-        >
-          {pending ? "Сохранение..." : saved ? "✓ Сохранено" : "Сохранить урок"}
-        </button>
+        <div className="flex items-center gap-2">
+          <a
+            href={`/courses/${courseSlug}/lessons/${lesson.id}`}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="btn-aubade flex items-center gap-1.5 px-4 py-2 text-sm"
+            title="Просмотр как студент"
+          >
+            <Eye size={14} />
+            Просмотр
+          </a>
+          <button
+            type="button"
+            onClick={handleSave}
+            disabled={pending || uploading}
+            className="btn-aubade btn-aubade-accent flex items-center gap-1.5 px-4 py-2 text-sm"
+            style={{ opacity: pending || uploading ? 0.6 : 1 }}
+            title="Сохранить урок"
+          >
+            <Save size={14} />
+            {pending ? "Сохранение..." : saved ? "Сохранено" : "Сохранить"}
+          </button>
+        </div>
       </div>
 
       {/* Title */}