Feature: Add “Continue” button and badge for selected path

app/components/paths/select_button_component.html.erb

@@ -1,6 +1,6 @@
 <% if current_user.on_path?(path) %>
-  <%= button_to path_url(path), method: :get, class: "button button--primary #{classes}", data: { test_id: "#{path.title.downcase}-resume-path-btn" } do %>
-    Resume
+  <%= button_to path_url(path), method: :get, class: "button button--primary #{classes}", data: { test_id: "#{path.title.downcase}-continue-path-btn" } do %>
+    Continue
   <% end %>
 <% else %>
   <%= button_to users_paths_path(path_id: path.id), class: "button button--primary #{classes}", data: { test_id: "#{path.title.downcase}-select-path-btn" } do %>

app/components/paths/view_button_component.rb

@@ -6,6 +6,10 @@ def initialize(current_user:, path:, classes: '')
       @classes = classes
     end
 
+    def render?
+      current_user.blank? || !current_user.on_path?(path)
+    end
+
     private
 
     attr_reader :current_user, :path, :classes

app/views/paths/index.html.erb

@@ -4,7 +4,7 @@
   <div class="max-w-4xl mx-auto">
     <h1 class="page-heading-title">All Paths</h1>
 
-    <%= render CardComponent.new do |card| %>
+    <%= render CardComponent.new(classes: 'relative') do |card| %>
       <% card.with_header(classes: 'md:pb-6 md:border-b border-gray-200 dark:border-gray-600') do %>
         <div class=" flex justify-between items-center flex-col sm:flex-row space-y-4 sm:space-y-0">
           <div class="flex flex-col space-y-5 sm:space-x-6 sm:space-y-0 sm:flex-row items-center">
@@ -16,6 +16,13 @@
                 <h2 class="text-3xl font-medium text-gray-800 dark:text-gray-300">Foundations</h2>
               <% end %>
             </div>
+            <% if current_user.present? && current_user.on_path?(@foundations) %>
+              <div class="absolute top-3.5 right-3.5 !mt-0 md:static">
+                <%= render Ui::BadgeComponent.new(color: 'green') do %>
+                  Selected
+                <% end %>
+              </div>
+            <% end %>
           </div>
 
           <div class="space-x-6 justify-center hidden md:flex">
@@ -49,8 +56,15 @@
     <div class="flex gap-x-10 gap-y-6 flex-col md:flex-row">
       <% @fullstack_paths.each do |path| %>
 
-        <%= render CardComponent.new(classes: 'flex flex-col') do |card| %>
+        <%= render CardComponent.new(classes: 'flex flex-col relative') do |card| %>
           <% card.with_header(classes: 'flex flex-col justify-between items-center') do %>
+            <div class="absolute top-3.5 right-3.5">
+              <% if current_user.present? && current_user.on_path?(path) %>
+                <%= render Ui::BadgeComponent.new(color: 'green') do %>
+                  Selected
+                <% end %>
+              <% end %>
+            </div>
             <%= link_to path_path(path), class: 'p-2 dark:bg-gray-700/50 rounded-full' do %>
               <%= image_tag path.badge_uri, alt: path.title, class: 'w-24 h-24' %>
             <% end %>

spec/components/paths/select_button_component_spec.rb

@@ -2,14 +2,14 @@
 
 RSpec.describe Paths::SelectButtonComponent, type: :component do
   context 'when leaner is on the path' do
-    it 'renders the resume button' do
+    it 'renders the continue button' do
       path = create(:path)
       current_user = create(:user, path:)
       component = described_class.new(current_user:, path:)
 
       render_inline(component)
 
-      expect(page).to have_button('Resume')
+      expect(page).to have_button('Continue')
     end
   end
 

spec/system/select_path_spec.rb

@@ -13,7 +13,7 @@
     it 'allows a user to select a path' do
       visit paths_path
 
-      expect(find(:test_id, 'foundations-resume-path-btn').text).to eq('Resume')
+      expect(find(:test_id, 'foundations-continue-path-btn').text).to eq('Continue')
       expect(find(:test_id, 'rails-select-path-btn').text).to eq('Select')
 
       find(:test_id, 'rails-select-path-btn').click