FEATURE: Demote muted categories on category list (#9226)

app/assets/javascripts/discourse/templates/components/categories-boxes-with-topics.hbs

@@ -1,14 +1,16 @@
 {{#each categories as |c|}}
-  <div class='category category-box category-box-{{c.slug}}' style={{border-color c.color}}>
+  <div data-notification-level={{c.notificationLevelString}} class='category category-box category-box-{{c.slug}} {{if c.isMuted "muted"}}' style={{border-color c.color}}>
     <div class='category-box-inner'>
       <div class='category-box-heading'>
         <a href={{c.url}}>
+          {{#unless c.isMuted}}
           {{#if c.uploaded_logo.url}}
             {{cdn-img src=c.uploaded_logo.url
                 class="logo"
                 width=c.uploaded_logo.width
                 height=c.uploaded_logo.height}}
           {{/if}}
+          {{/unless}}
 
           <h3>
             {{category-title-before category=c}}
@@ -20,6 +22,7 @@
         </a>
       </div>
 
+      {{#unless c.isMuted}}
       <div class='featured-topics'>
         {{#if c.topics}}
           <ul>
@@ -29,6 +32,7 @@
           </ul>
         {{/if}}
       </div>
+      {{/unless}}
     </div>
   </div>
 {{/each}}

app/assets/javascripts/discourse/templates/components/categories-boxes.hbs

@@ -1,7 +1,8 @@
 {{#each categories as |c|}}
-  <div class='category category-box category-box-{{c.slug}}' style={{border-color c.color}} data-category-id={{c.id}} data-notification-level={{c.notificationLevelString}}
+  <div class='category category-box category-box-{{c.slug}} {{if c.isMuted "muted"}}' style={{border-color c.color}} data-category-id={{c.id}} data-notification-level={{c.notificationLevelString}}
    data-url={{c.url}}>
     <div class='category-box-inner'>
+      {{#unless c.isMuted}}
       <div class="category-logo">
         {{#if c.uploaded_logo.url}}
           {{cdn-img
@@ -11,6 +12,7 @@
               height=c.uploaded_logo.height}}
         {{/if}}
       </div>
+      {{/unless}}
       <div class="category-details">
         <div class='category-box-heading'>
           <a class="parent-box-link" href={{c.url}}>
@@ -23,6 +25,7 @@
           </a>
         </div>
 
+        {{#unless c.isMuted}}
         <div class='description'>
           {{text-overflow class="overflow" text=c.description_excerpt}}
         </div>
@@ -62,6 +65,7 @@
             {{/each}}
           </div>
         {{/if}}
+        {{/unless}}
       </div>
     </div>
   </div>

app/assets/javascripts/discourse/templates/components/categories-only.hbs

@@ -12,8 +12,9 @@
     <tbody aria-labelledby="categories-only-category">
       {{#each categories as |c|}}
         <tr data-category-id={{c.id}} data-notification-level={{c.notificationLevelString}} class="{{if c.description_excerpt 'has-description' 'no-description'}} {{if c.uploaded_logo.url 'has-logo' 'no-logo'}}">
-          <td class="category" style={{border-color c.color}}>
+          <td class="category {{if c.isMuted 'muted'}}" style={{border-color c.color}}>
             {{category-title-link category=c}}
+            {{#unless c.isMuted}}
             {{#if c.description_excerpt}}
               <div class="category-description">
                 {{dir-span c.description_excerpt}}
@@ -67,11 +68,13 @@
                 {{/each}}
               </div>
             {{/if}}
+            {{/unless}}
           </td>
           <td class="topics">
             <div title={{c.statTitle}}>{{html-safe c.stat}}</div>
             {{category-unread category=c tagName="div" class="unread-new"}}
           </td>
+          {{#unless c.isMuted}}
           {{#if showTopics}}
             <td class="latest">
               {{#each c.featuredTopics as |t|}}
@@ -79,6 +82,7 @@
               {{/each}}
             </td>
           {{/if}}
+          {{/unless}}
         </tr>
       {{/each}}
     </tbody>

app/assets/javascripts/discourse/templates/mobile/components/categories-only.hbs

@@ -1,7 +1,7 @@
 {{#if categories}}
   <div class="category-list {{if showTopics 'with-topics'}}">
     {{#each categories as |c|}}
-      <div data-category-id={{c.id}} class='category-list-item category' style={{border-color c.color}}>
+      <div data-category-id={{c.id}} data-notification-level={{c.notificationLevelString}} class='category-list-item category {{if c.isMuted "muted"}}' style={{border-color c.color}}>
         <table class='topic-list'>
           <tbody>
             <tr>
@@ -10,6 +10,7 @@
               </th>
             </tr>
 
+            {{#unless c.isMuted}}
             {{#if c.description_excerpt}}
               <tr class="category-description">
                 <td colspan="3">
@@ -57,6 +58,7 @@
                 </td>
               </tr>
             {{/if}}
+            {{/unless}}
           </tbody>
         </table>
         <footer class="clearfix">

app/assets/stylesheets/common/base/category-list.scss

@@ -316,3 +316,11 @@
     --max-height: 75px;
   }
 }
+
+.categories-list .category.muted {
+  font-size: $font-down-1;
+  h3,
+  .category-name {
+    color: $primary-medium;
+  }
+}

app/models/category_list.rb

@@ -23,6 +23,7 @@ class CategoryList
     find_user_data
     sort_unpinned
     trim_results
+    demote_muted
 
     if preloaded_topic_custom_fields.present?
       displayable_topics = @categories.map(&:displayable_topics)
@@ -162,6 +163,12 @@ class CategoryList
     end
   end
 
+  def demote_muted
+    muted_categories = @categories.select { |category| category.notification_level == 0 }
+    @categories = @categories.reject { |category| category.notification_level == 0 }
+    @categories.concat muted_categories
+  end
+
   def trim_results
     @categories.each do |c|
       next if c.displayable_topics.blank?

spec/models/category_list_spec.rb

@@ -220,6 +220,22 @@ describe CategoryList do
         expect(category_ids_admin).to eq([public_cat2.id, public_cat.id])
       end
     end
+
+    context 'some categories are muted' do
+      let!(:cat1) { Fabricate(:category_with_definition) }
+      let!(:muted_cat) { Fabricate(:category_with_definition) }
+      let!(:cat3) { Fabricate(:category_with_definition) }
+
+      before do
+        CategoryUser.set_notification_level_for_category(user, NotificationLevels.all[:muted], muted_cat.id)
+      end
+
+      it "returns muted categories at the end of the list" do
+        category_list = CategoryList.new(Guardian.new user).categories.pluck(:id)
+
+        expect(category_list).to eq([SiteSetting.uncategorized_category_id, cat1.id, cat3.id, muted_cat.id])
+      end
+    end
   end
 
 end