feature/add popular snippets

Author: Lewis Youl

app/controllers/application_controller.rb

@@ -3,7 +3,7 @@ class ApplicationController < ActionController::Base
   serialization_scope :view_context
   before_action :configure_permitted_parameters, if: :devise_controller?
   before_action :set_toast_message, if: -> { params[:notice].present? || params[:alert].present? }
-  before_action :assign_users_for_connect
+  before_action :assign_users_for_connect, :assign_popular_snippets
 
   UNAUTHORIZED = 'You do not have access to this page'.freeze
 
@@ -38,4 +38,8 @@ def assign_users_for_connect
 
     @users_for_connect = user_base.order(Arel.sql('RANDOM()')).limit(3)
   end
+
+  def assign_popular_snippets
+    @popular_snippets = Snippet.popular.limit(3)
+  end
 end

app/models/snippet.rb

@@ -14,6 +14,7 @@ class Snippet < ApplicationRecord
 
   scope :public_snippets, -> { where(public: true) }
   scope :private_snippets, -> { where(public: false) }
+  scope :popular, -> { order(likes_count: :desc) }
 
   def folder_for_user(user)
     folders.find_by(user_id: user&.id)

app/views/shared/_sidebar.html.erb

@@ -16,7 +16,33 @@
 
     <%= render partial: 'shared/connect' %>
 
-    
+    <%= render 'shared/cards/card_no_padding' do %>
+      <h4 class="text-center pt-2">Popular</h4>
+
+      <ul class="divide-y divide-gray-200" data-infinite-scroll-window-target="entries" data-action="scroll@window->infinite-scroll-window#scroll">
+        <% @popular_snippets.each do |snippet| %>
+          <li
+            class="cursor-pointer hover:bg-gray-50 group transition pt-4 pb-4 px-4"
+            data-controller="navigation"
+            data-navigation-url-value="<%= snippet_path(snippet) %>"
+            data-action="click->navigation#navigate"
+          >
+            <div class="flex justify-between">
+              <div class="flex">
+                <%= render partial: 'shared/icons/heart', locals: { width: 5, height: 5, color: 'text-red-500' } %>
+                <% if snippet.likes? %>
+                  <span class="inline-block text-sm text-gray-500 ml-1 -mb-0.5"><%= snippet.likes_count %></span>
+                <% end %>
+              </div>
+              <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-yellow-100 text-yellow-800">
+                <%= snippet.language.name %>
+              </span>
+            </div>
+            <p class="mt-2 font-normal group-hover:underline"><%= snippet.description %></p>
+          </li>
+        <% end %>
+      </ul>
+    <% end %>
 
   </div>
 </aside>

app/views/snippets/_snippet.html.erb

@@ -10,9 +10,9 @@
             <% if snippet.private? %>
               <%= render partial: 'shared/icons/lock_closed', locals: { height: 4, width: 4, color: 'text-yellow-500 mr-1' } %>
             <% end %>
-            <div class="rounded-sm bg-gray-100 px-2 py-1 text-gray-500">
-              <span class="block text-xs"><%= snippet.language.name %></span>
-            </div>
+            <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-yellow-100 text-yellow-800">
+              <%= snippet.language.name %>
+            </span>
             <% if @display_popover %>
               <%= render partial: 'shared/popover_trigger', locals: { popover_path: popover_snippet_path(snippet) } %>
             <% end %>

app/views/snippets/_snippet_preview.html.erb

@@ -9,9 +9,9 @@
               <% if snippet.private? %>
                 <%= render partial: 'shared/icons/lock_closed', locals: { height: 4, width: 4, color: 'text-yellow-500 mr-1' } %>
               <% end %>
-              <div class="rounded-sm bg-gray-100 px-2 py-1 text-gray-500">
-                <span class="block text-xs"><%= snippet.language.name %></span>
-              </div>
+                <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-yellow-100 text-yellow-800">
+                  <%= snippet.language.name %>
+                </span>
               <% if @display_popover %>
                 <%= render partial: 'shared/popover_trigger', locals: { popover_path: popover_snippet_path(snippet) } %>
               <% end %>

app/views/users/_connect.html.erb

@@ -1,8 +1,9 @@
-<li class="cursor-pointer hover:bg-gray-50 transition pt-4 pb-4 px-4"
-    data-controller="navigation"
-    data-navigation-url-value="<%= user_path(user) %>"
-    data-action="click->navigation#navigate"
-  >
+<li
+  class="group cursor-pointer hover:bg-gray-50 transition pt-4 pb-4 px-4"
+  data-controller="navigation"
+  data-navigation-url-value="<%= user_path(user) %>"
+  data-action="click->navigation#navigate"
+>
     <div class="relative">
       <div class="relative flex items-start space-x-3">
         <%= render partial: 'notifications/user_avatar', locals: { user: user } %>