Feature: Replace lesson View Course button with Previous Lesson

Because:
With the new course-contents sidebar on the lesson page providing a
"Back to course" link on both mobile and desktop, the View Course
button at the bottom of the lesson was redundant. Swapping it for a
Previous Lesson button gives users a natural pair with the existing
Next Lesson button for sequential navigation through a course.

This PR:
- Adds Course#previous_lesson and refactors Course#next_lesson to share the same range-based query style
- Replaces the "View Course" button in app/views/lessons/_lesson_buttons.html.erb with a conditional Previous Lesson button that is hidden on the first lesson
- Reworks the lesson button row from `flex justify-between` to a 3-column grid on md+ so Complete stays centered and Previous/Next stay anchored to the row edges regardless of which neighbours render; mobile keeps the existing full-width stacked layout via `display: contents` on the slot wrappers

Author: KevinMulhern

app/models/course.rb

@@ -18,6 +18,10 @@ def progress_for(user)
   end
 
   def next_lesson(lesson)
-    lessons.where('lessons.position > ?', lesson.position).first
+    lessons.where(lessons: { position: lesson.position.next.. }).order(:position).first
+  end
+
+  def previous_lesson(lesson)
+    lessons.where(lessons: { position: ...lesson.position }).order(position: :desc).first
   end
 end

app/views/lessons/_lesson_buttons.html.erb

@@ -1,29 +1,43 @@
-<div class="flex flex-col justify-between max-w-sm mx-auto space-y-6 md:max-w-full md:space-y-0 md:flex-row md:space-x-7">
-  <%= link_to path_course_path(course.path, course), class: 'button button--secondary px-4 py-2 font-medium', data: { test_id: 'view-course-btn' } do %>
-    <%= inline_svg_tag 'icons/academic-cap.svg', class: 'h-8 w-8 pr-2', aria: true, title: 'View course', desc: 'Go to course page' %>
-    View Course
-  <% end %>
-
-  <% if user_signed_in? %>
-    <%= render Complete::ButtonComponent.new(lesson:) %>
+<div class="flex flex-col gap-y-6 max-w-sm mx-auto md:grid md:grid-cols-3 md:gap-x-7 md:gap-y-0 md:max-w-full md:items-center">
+  <% if course.previous_lesson(lesson).present? %>
+    <div class="contents md:block md:justify-self-start">
+      <%= link_to lesson_path(course.previous_lesson(lesson)), class: 'button button--secondary px-4 py-2 font-medium', data: { test_id: 'previous-lesson-btn' } do %>
+        <%= inline_svg_tag 'icons/arrow-left-circle.svg', class: 'h-8 w-8 pr-2', aria: true, title: 'Previous lesson', desc: 'Go to previous lesson' %>
+        Previous Lesson
+      <% end %>
+    </div>
   <% else %>
-    <%= link_to(
-          'Sign in to track progress',
-          sign_in_path,
-          class: 'button button--primary',
-          data: { test_id: 'sign_in_button' }
-        ) %>
+    <div class="hidden md:block" aria-hidden="true"></div>
   <% end %>
 
-  <% if course.next_lesson(lesson).present? %>
-    <%= link_to lesson_path(course.next_lesson(lesson)), class: 'button button--secondary px-4 py-2 font-medium', data: { test_id: 'next-lesson-btn' } do %>
-      <%= inline_svg_tag 'icons/arrow-right-circle.svg', class: 'h-8 w-8 pr-2', aria: true, title: 'Next lesson', desc: 'Go to next lesson' %>
-      Next Lesson
+  <div class="contents md:block md:justify-self-center">
+    <% if user_signed_in? %>
+      <%= render Complete::ButtonComponent.new(lesson:) %>
+    <% else %>
+      <%= link_to(
+            'Sign in to track progress',
+            sign_in_path,
+            class: 'button button--primary',
+            data: { test_id: 'sign_in_button' }
+          ) %>
     <% end %>
+  </div>
+
+  <% if course.next_lesson(lesson).present? %>
+    <div class="contents md:block md:justify-self-end">
+      <%= link_to lesson_path(course.next_lesson(lesson)), class: 'button button--secondary px-4 py-2 font-medium', data: { test_id: 'next-lesson-btn' } do %>
+        <%= inline_svg_tag 'icons/arrow-right-circle.svg', class: 'h-8 w-8 pr-2', aria: true, title: 'Next lesson', desc: 'Go to next lesson' %>
+        Next Lesson
+      <% end %>
+    </div>
   <% elsif lesson.choose_path_lesson? %>
-    <%= link_to paths_url, class: 'button button--secondary px-4 font-medium', data: { test_id: 'choose-path-lesson-btn' } do %>
-      <%= inline_svg_tag 'icons/map.svg', class: 'h-8 w-8 pr-2', aria: true, title: 'Choose path', desc: 'Go to paths page' %>
-      Choose Path
-    <% end %>
+    <div class="contents md:block md:justify-self-end">
+      <%= link_to paths_url, class: 'button button--secondary px-4 font-medium', data: { test_id: 'choose-path-lesson-btn' } do %>
+        <%= inline_svg_tag 'icons/map.svg', class: 'h-8 w-8 pr-2', aria: true, title: 'Choose path', desc: 'Go to paths page' %>
+        Choose Path
+      <% end %>
+    </div>
+  <% else %>
+    <div class="hidden md:block" aria-hidden="true"></div>
   <% end %>
 </div>

spec/models/course_spec.rb

@@ -37,20 +37,45 @@
       it 'returns the next lesson' do
         course = create(:course)
         section = create(:section, course:)
-        lesson_one = create(:lesson, position: 1, section:)
-        lesson_two = create(:lesson, position: 2, section:)
+        next_lesson = create(:lesson, position: 3, section:)
+        current_lesson = create(:lesson, position: 2, section:)
+        _previous_lesson = create(:lesson, position: 1, section:)
 
-        expect(course.next_lesson(lesson_one)).to eql(lesson_two)
+        expect(course.next_lesson(current_lesson)).to eql(next_lesson)
       end
     end
 
     context 'when there is no next lesson' do
       it 'returns nothing' do
         course = create(:course)
         section = create(:section, course:)
-        lesson_one = create(:lesson, position: 1, section:)
+        current_lesson = create(:lesson, position: 1, section:)
 
-        expect(course.next_lesson(lesson_one)).to be_nil
+        expect(course.next_lesson(current_lesson)).to be_nil
+      end
+    end
+  end
+
+  describe '#previous_lesson' do
+    context 'when there is a previous lesson' do
+      it 'returns the previous lesson' do
+        course = create(:course)
+        section = create(:section, course:)
+        current_lesson = create(:lesson, position: 2, section:)
+        previous_lesson = create(:lesson, position: 1, section:)
+        _next_lesson = create(:lesson, position: 3, section:)
+
+        expect(course.previous_lesson(current_lesson)).to eql(previous_lesson)
+      end
+    end
+
+    context 'when there is no previous lesson' do
+      it 'returns nothing' do
+        course = create(:course)
+        section = create(:section, course:)
+        current_lesson = create(:lesson, position: 1, section:)
+
+        expect(course.previous_lesson(current_lesson)).to be_nil
       end
     end
   end

spec/system/lesson_navigation_spec.rb

@@ -44,15 +44,37 @@
     end
   end
 
-  describe 'the View Course button' do
-    it 'directs to the course view' do
-      visit lesson_path(lesson)
-      find(:test_id, 'view-course-btn').click
+  describe 'the previous lesson button' do
+    context 'when the previous lesson is within the same section' do
+      let!(:current_lesson) { create(:lesson, position: 2, section:) }
 
-      expect(find(:test_id, 'course-title-header')).to have_text(/#{course.title}/i)
+      it 'moves to the previous lesson in the section when clicked' do
+        visit lesson_path(current_lesson)
+        find(:test_id, 'previous-lesson-btn').click
 
-      within '[data-test-id="lesson-list"]', match: :first do
-        expect(page).to have_text(/#{lesson.title}/i)
+        expect(find(:test_id, 'lesson-title-header')).to have_text(/#{lesson.title}/i)
+      end
+    end
+
+    context 'when on the first lesson of a section' do
+      let!(:next_section) { create(:section, position: 2, course:) }
+      let!(:next_section_lesson) { create(:lesson, position: 2, section: next_section) }
+
+      it 'moves to the last lesson in the previous section when clicked' do
+        visit lesson_path(next_section_lesson)
+        find(:test_id, 'previous-lesson-btn').click
+
+        expect(find(:test_id, 'lesson-title-header')).to have_text(/#{lesson.title}/i)
+      end
+    end
+
+    context 'when on the first lesson in the course' do
+      it 'is not present' do
+        visit lesson_path(lesson)
+
+        expect(page).to have_css('[data-test-id]')
+
+        expect(page).to have_no_css('[data-test-id="previous-lesson-btn"]')
       end
     end
   end