feature/Remove language tag and add folder tag

Author: LewisYoul

app/assets/stylesheets/_sidebar.scss

@@ -19,11 +19,11 @@
   }
 
   &--icon {
-    
+    margin-left: 12px;
   }
 
   &--name {
-    margin-left: 18px;
+    margin-left: 14px;
   }
 
   &--item {

app/assets/stylesheets/folders.scss

@@ -100,6 +100,16 @@
   display: inline-block;
 }
 
+.folder-tag {
+  display: flex;
+  align-items: center;
+  font-size: 11px;
+  background-color: $color-primary;
+  padding: 2px 6px;
+  border-radius: 4px;
+  color: white;
+}
+
 .date-tag {
   font-size: 11px;
   padding: 2px 0px;

app/assets/stylesheets/helpers.scss

@@ -35,7 +35,13 @@
 .no-margin-top { margin-top: 0px; }
 .margin-top { margin-top: 16px }
 .margin-top { margin-top: 16px }
-.margin-left { margin-left: 16px }
+.margin-left {
+  margin-left: 16px;
+
+  &--tiny {
+    margin-left: 4px;
+  }
+}
 .margin-right { margin-right: 16px }
 
 .text-center { text-align: center; }

app/controllers/snippets_controller.rb

@@ -9,7 +9,7 @@ def index
     @page_title = "Snippets"
     @user = User.find_by(id: params[:user_id]) || current_user
     @display_popover = true
-    @snippets = @user.filed_snippets.includes(:user)
+    @snippets = @user.filed_snippets.includes(:user, :folders)
 
     # TODO: Extract this logic to model/service
     @snippets = @snippets.where('description ILIKE ?', "%#{params[:search]}%") if params[:search]

app/models/snippet.rb

@@ -10,6 +10,10 @@ class Snippet < ApplicationRecord
 
   attr_accessor :folder_id
 
+  def folder_for_user(user)
+    folders.find_by(user_id: user.id)
+  end
+
   # TODO: Don't call serializers from model - just instantiate in controller
   def serializable(current_user)
     SnippetSerializer.new(self, scope: current_user)

app/views/snippets/_snippet.html.erb

@@ -1,3 +1,5 @@
+<% folder = snippet.folder_for_user(current_user) %>
+
 <div
   id="<%= snippet.client_id %>"
   data-controller="snippets"
@@ -10,7 +12,12 @@
     <div>
       <div style="display: flex; flex-direction: column;">
         <div style="display: flex; justify-content: flex-end; margin-bottom: 8px; align-items: center;">
-          <span class="language-tag"><%= snippet.language %></span>
+          <% if folder %>
+            <div class="folder-tag">
+              <img src="/icons/icons8-folder-white.svg" width="12">
+              <span class="block margin-left--tiny"><%= folder.name %></span>
+            </div>
+          <% end%>
           <% if @display_popover %>
             <%= render partial: 'shared/popover_trigger', locals: { popover_path: popover_snippet_path(snippet) } %>
           <% end %>

app/views/snippets/_snippet_preview.html.erb

@@ -1,16 +1,22 @@
+<% folder = snippet.folder_for_user(current_user) %>
+
 <div
   id="<%= snippet.client_id %>"
   data-controller="snippets"
   data-action="click->snippets#view_snippet"
   data-snippet-url="<%= snippet_path(snippet) %>"
-  class="card--container card--container-padding snippet--container-preview"
->
+  class="card--container card--container-padding snippet--container-preview">
   <div class="snippet--author-wrapper">
     <%= render partial: 'users/preview', locals: { user: snippet.user, resource: snippet } %>
     <div>
       <div style="display: flex; flex-direction: column;">
         <div style="display: flex; justify-content: flex-end; margin-bottom: 8px; align-items: center;">
-          <span class="language-tag"><%= snippet.language %></span>
+          <% if folder %>
+            <div class="folder-tag">
+              <img src="/icons/icons8-folder-white.svg" width="12">
+              <span class="block margin-left--tiny"><%= folder.name %></span>
+            </div>
+          <% end%>
           <% if @display_popover %>
             <%= render partial: 'shared/popover_trigger', locals: { popover_path: popover_snippet_path(snippet) } %>
           <% end %>