From a75f97360a21b4a4afdd85463b1d1a69134d9636 Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Fri, 11 Apr 2025 19:00:25 +0100
Subject: [PATCH] Responsiveness of actions

---
 .../GenerateCourse/AICourseContent.tsx          |  7 +++++--
 .../GenerateCourse/AICourseLesson.tsx           | 17 +++++++++++++++--
 .../GenerateCourse/ForkCourseAlert.tsx          | 14 ++++++++++----
 .../GenerateCourse/RegenerateLesson.tsx         |  2 +-
 4 files changed, 31 insertions(+), 9 deletions(-)

diff --git a/src/components/GenerateCourse/AICourseContent.tsx b/src/components/GenerateCourse/AICourseContent.tsx
index e2abc32dc..462404049 100644
--- a/src/components/GenerateCourse/AICourseContent.tsx
+++ b/src/components/GenerateCourse/AICourseContent.tsx
@@ -248,7 +248,10 @@ export function AICourseContent(props: AICourseContentProps) {
             aria-label="Back to generator"
           >
             <ChevronLeft className="size-4" strokeWidth={2.5} />
-            Back {isViewingLesson ? 'to Outline' : 'to AI Tutor'}
+            Back{' '}
+            <span className="hidden lg:inline">
+              {isViewingLesson ? 'to Outline' : 'to AI Tutor'}
+            </span>
           </a>
           <div className="flex items-center gap-2">
             <div className="flex flex-row lg:hidden">
@@ -439,7 +442,6 @@ export function AICourseContent(props: AICourseContentProps) {
             courseSlug &&
             (viewMode === 'outline' || viewMode === 'roadmap') && (
               <ForkCourseAlert
-                courseSlug={courseSlug}
                 creatorId={creatorId}
                 onForkCourse={() => {
                   setIsForkingCourse(true);
@@ -459,6 +461,7 @@ export function AICourseContent(props: AICourseContentProps) {
           {viewMode === 'module' && (
             <AICourseLesson
               courseSlug={courseSlug!}
+              creatorId={creatorId}
               progress={aiCourseProgress}
               activeModuleIndex={activeModuleIndex}
               totalModules={totalModules}
diff --git a/src/components/GenerateCourse/AICourseLesson.tsx b/src/components/GenerateCourse/AICourseLesson.tsx
index 3a10b5680..dd4a443a2 100644
--- a/src/components/GenerateCourse/AICourseLesson.tsx
+++ b/src/components/GenerateCourse/AICourseLesson.tsx
@@ -3,6 +3,7 @@ import {
   CheckIcon,
   ChevronLeft,
   ChevronRight,
+  GitForkIcon,
   Loader2Icon,
   LockIcon,
   MessageCircleIcon,
@@ -55,6 +56,7 @@ function getQuestionsFromResult(result: string) {
 type AICourseLessonProps = {
   courseSlug: string;
   progress: string[];
+  creatorId?: string;
 
   activeModuleIndex: number;
   totalModules: number;
@@ -79,6 +81,7 @@ export function AICourseLesson(props: AICourseLessonProps) {
   const {
     courseSlug,
     progress = [],
+    creatorId,
 
     activeModuleIndex,
     totalModules,
@@ -298,13 +301,13 @@ export function AICourseLesson(props: AICourseLessonProps) {
                 </div>
               )}
 
-              <div className="mb-4 flex items-center justify-between">
+              <div className="mb-4 flex max-sm:flex-col-reverse justify-between">
                 <div className="text-sm text-gray-500">
                   Lesson {activeLessonIndex + 1} of {totalLessons}
                 </div>
 
                 {!isGenerating && !isLoading && (
-                  <div className="absolute top-2 right-2 flex items-center justify-between gap-2 lg:top-6 lg:right-6">
+                  <div className="md:absolute top-2 right-2 flex items-center max-sm:justify-end gap-2 lg:top-6 lg:right-6 mb-3">
                     <button
                       onClick={() => setIsAIChatsOpen(!isAIChatsOpen)}
                       className="rounded-full p-1 text-gray-400 hover:text-black max-lg:hidden"
@@ -323,6 +326,16 @@ export function AICourseLesson(props: AICourseLessonProps) {
                       isForkable={isForkable}
                       onForkCourse={onForkCourse}
                     />
+
+                    {isForkable && (
+                      <button
+                        onClick={onForkCourse}
+                        className="flex items-center gap-1.5 rounded-full border bg-gray-100 py-1 pr-4 pl-3 text-sm text-black hover:bg-gray-200 disabled:opacity-50 max-lg:text-xs"
+                      >
+                        <GitForkIcon className="size-3.5" />
+                        Fork Course
+                      </button>
+                    )}
                     <button
                       disabled={isLoading || isTogglingDone}
                       className={cn(
diff --git a/src/components/GenerateCourse/ForkCourseAlert.tsx b/src/components/GenerateCourse/ForkCourseAlert.tsx
index 7f3f7b0dc..01fdfc8c3 100644
--- a/src/components/GenerateCourse/ForkCourseAlert.tsx
+++ b/src/components/GenerateCourse/ForkCourseAlert.tsx
@@ -1,14 +1,15 @@
 import { GitForkIcon } from 'lucide-react';
 import { getUser } from '../../lib/jwt';
+import { cn } from '../../lib/classname';
 
 type ForkCourseAlertProps = {
-  courseSlug: string;
+  className?: string;
   creatorId?: string;
   onForkCourse: () => void;
 };
 
 export function ForkCourseAlert(props: ForkCourseAlertProps) {
-  const { courseSlug, creatorId, onForkCourse } = props;
+  const { creatorId, onForkCourse, className = '' } = props;
 
   const currentUser = getUser();
 
@@ -17,13 +18,18 @@ export function ForkCourseAlert(props: ForkCourseAlertProps) {
   }
 
   return (
-    <div className="mb-3.5 lg:-mt-2.5 max-w-5xl mx-auto flex items-center justify-between gap-2 rounded-lg bg-yellow-200 p-3 text-black">
+    <div
+      className={cn(
+        'mx-auto mb-3.5 flex max-w-5xl items-center justify-between gap-2 rounded-lg bg-yellow-200 p-3 text-black lg:-mt-2.5',
+        className,
+      )}
+    >
       <p className="text-sm text-balance">
         To start tracking your progress, you can fork the course.
       </p>
 
       <button
-        className="flex shrink-0 items-center gap-2 rounded-md bg-yellow-400 py-1.5 px-3 text-sm text-black"
+        className="flex shrink-0 items-center gap-2 rounded-md bg-yellow-400 px-3 py-1.5 text-sm text-black"
         onClick={onForkCourse}
       >
         <GitForkIcon className="size-3.5" />
diff --git a/src/components/GenerateCourse/RegenerateLesson.tsx b/src/components/GenerateCourse/RegenerateLesson.tsx
index 2427c119c..507d106b9 100644
--- a/src/components/GenerateCourse/RegenerateLesson.tsx
+++ b/src/components/GenerateCourse/RegenerateLesson.tsx
@@ -49,7 +49,7 @@ export function RegenerateLesson(props: RegenerateLessonProps) {
         />
       )}
 
-      <div className="relative mr-2 flex items-center" ref={ref}>
+      <div className="relative lg:mr-1 flex items-center" ref={ref}>
         <button
           className={cn('rounded-full p-1 text-gray-400 hover:text-black', {
             'text-black': isDropdownVisible,