Feature: Add “Continue” button and badge for selected path (#4513)

<!-- Thank you for taking the time to contribute to The Odin Project. In
order to get this pull request (PR) merged in a reasonable amount of
time, you must complete this entire template. -->

## Because
<!-- Summarize the purpose or reasons for this PR, e.g. what problem it
solves or what benefit it provides. -->
A user might get confused about the current behavior of the "Resume"
button in [All Paths](https://www.theodinproject.com/paths) (#3230,
#4495).

## This PR
<!-- A bullet point list of one or more items describing the specific
changes. -->
Helps to differentiate a selected path from the rest by:
- Adding a "Selected" badge to the currently selected path.
- Keeping only one "Continue" button instead of "Resume" and "View"
buttons to selected path.

**Note:** User needs to be logged in.

#### Before (Foundations path selected)


![image](https://github.com/TheOdinProject/theodinproject/assets/52906616/b0251b6f-fa08-45e3-9a22-b78d7fe2c79e)


![image](https://github.com/TheOdinProject/theodinproject/assets/52906616/fb3460ce-d909-485f-9d70-66b2a8f11770)


#### After (Foundations path selected)


![image](https://github.com/TheOdinProject/theodinproject/assets/52906616/882a002d-730b-463e-99dd-53b92aff6b9e)


![image](https://github.com/TheOdinProject/theodinproject/assets/52906616/3fc8be70-e5eb-42f7-8a53-c898f9903e34)

#### Before (Ruby on Rails path selected)


![image](https://github.com/TheOdinProject/theodinproject/assets/52906616/f1bee462-53c5-4d00-8576-5171da3b595e)

#### After (Ruby on Rails path selected)


![image](https://github.com/TheOdinProject/theodinproject/assets/52906616/8367b998-f2ba-427f-a0f6-711c2d9f2b61)

#### Before (Javascript path selected)


![image](https://github.com/TheOdinProject/theodinproject/assets/52906616/fe341e54-5149-4872-97a3-3515b5a64e00)

#### After (Javascript path selected)


![image](https://github.com/TheOdinProject/theodinproject/assets/52906616/f15d043a-1ef5-4685-9c40-3e512e78fad6)

## Issue
<!--
If this PR closes an open issue in this repo, replace the XXXXX below
with the issue number, e.g. Closes #2013.

If this PR closes an open issue in another TOP repo, replace the #XXXXX
with the URL of the issue, e.g. Closes
https://github.com/TheOdinProject/curriculum/issues/XXXXX

If this PR does not close, but is related to another issue or PR, you
can link it as above without the 'Closes' keyword, e.g. 'Related to
#2013'.
-->
Closes #4495

## Pull Request Requirements
<!-- Replace the whitespace between the square brackets with an 'x',
e.g. [x]. After you create the PR, they will become checkboxes that you
can click on. -->
- [x] I have thoroughly read and understand [The Odin Project
Contributing
Guide](https://github.com/TheOdinProject/theodinproject/blob/main/CONTRIBUTING.md)
- [x] The title of this PR follows the `keyword: brief description of
change` format, using one of the following keywords:
    - `Feature` - adds new or amends existing user-facing behavior
- `Chore` - changes that have no user-facing value, refactors,
dependency bumps, etc
    - `Fix` - bug fixes
-   [x] The `Because` section summarizes the reason for this PR
- [x] The `This PR` section has a bullet point list describing the
changes in this PR
- [x] I have verified all tests and linters pass after making these
changes.
- [x] If this PR addresses an open issue, it is linked in the `Issue`
section
-   [x] If applicable, this PR includes new or updated automated tests

---------

Co-authored-by: Josh Smith <jmsmith1018@gmail.com>

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