UX: Make category section link icons consistent with Sidebar's interface (#17922)

Instead of relying on another help to generate the icons, we want to
rely on the interface for adding prefix icons. This ensures that prefix
icons are consistent across the section links in Sidebar

app/assets/javascripts/discourse/app/lib/sidebar/categories-section/category-section-link.js

@@ -1,10 +1,8 @@
 import I18n from "I18n";
 
-import { htmlSafe } from "@ember/template";
-
 import { tracked } from "@glimmer/tracking";
+
 import { bind } from "discourse-common/utils/decorators";
-import { categoryBadgeHTML } from "discourse/helpers/category-link";
 import Category from "discourse/models/category";
 
 export default class CategorySectionLink {
@@ -47,9 +45,25 @@ export default class CategorySectionLink {
   }
 
   get text() {
-    return htmlSafe(
-      categoryBadgeHTML(this.category, { link: false, categoryStyle: "bullet" })
-    );
+    return this.category.name;
+  }
+
+  get prefixType() {
+    return "icon";
+  }
+
+  get prefixValue() {
+    return "square-full";
+  }
+
+  get prefixColor() {
+    return this.category.color;
+  }
+
+  get prefixBadge() {
+    if (this.category.read_restricted) {
+      return "lock";
+    }
   }
 
   get badgeText() {

app/assets/javascripts/discourse/app/templates/components/sidebar/categories-section.hbs

@@ -17,7 +17,11 @@
         @content={{sectionLink.text}}
         @currentWhen={{sectionLink.currentWhen}}
         @model={{sectionLink.model}}
-        @badgeText={{sectionLink.badgeText}} >
+        @badgeText={{sectionLink.badgeText}}
+        @prefixBadge={{sectionLink.prefixBadge}}
+        @prefixType={{sectionLink.prefixType}}
+        @prefixValue={{sectionLink.prefixValue}}
+        @prefixColor={{sectionLink.prefixColor}} >
       </Sidebar::SectionLink>
     {{/each}}
   {{else}}

app/assets/javascripts/discourse/app/templates/components/sidebar/section-link.hbs

@@ -14,7 +14,7 @@
       @current-when={{@currentWhen}}
       @title={{@title}}
     >
-      {{#if @prefixValue }}
+      {{#if @prefixValue}}
         <span class="sidebar-section-link-prefix {{@prefixType}} {{@prefixCSSClass}}" style={{this.prefixCSS}}>
           {{#if (eq @prefixType "image")}}
             <img src={{@prefixValue}} class="prefix-image">

app/assets/javascripts/discourse/tests/acceptance/sidebar-categories-section-test.js

@@ -84,8 +84,13 @@ acceptance("Sidebar - Categories Section", function (needs) {
     const categories = Site.current().categories;
     const category1 = categories[0];
     const category2 = categories[1];
-    updateCurrentUser({ sidebar_category_ids: [category1.id, category2.id] });
-    return { category1, category2 };
+    const category3 = categories[5];
+
+    updateCurrentUser({
+      sidebar_category_ids: [category1.id, category2.id, category3.id],
+    });
+
+    return { category1, category2, category3 };
   };
 
   test("clicking on section header link", async function (assert) {
@@ -144,34 +149,29 @@ acceptance("Sidebar - Categories Section", function (needs) {
     );
   });
 
-  test("category section links uses the bullet style even when category_style site setting has been configured", async function (assert) {
-    this.siteSettings.category_style = "box";
-    const { category1 } = setupUserSidebarCategories();
-
-    await visit("/");
-
-    assert.ok(
-      exists(
-        `.sidebar-section-categories .sidebar-section-link-${category1.slug} .badge-wrapper.bullet`
-      ),
-      "category badge uses the bullet style"
-    );
-  });
-
   test("category section links", async function (assert) {
-    const { category1, category2 } = setupUserSidebarCategories();
+    const { category1, category2, category3 } = setupUserSidebarCategories();
 
     await visit("/");
 
     assert.strictEqual(
       count(".sidebar-section-categories .sidebar-section-link"),
-      2,
-      "there should only be two section link under the section"
+      3,
+      "there should only be 3 section link under the section"
     );
 
     assert.ok(
-      exists(`.sidebar-section-link-${category1.slug} .badge-category`),
-      "category1 section link is rendered with category badge"
+      exists(
+        `.sidebar-section-link-${category1.slug} .prefix-icon.d-icon-square-full`
+      ),
+      "category1 section link is rendered with right prefix icon"
+    );
+
+    assert.ok(
+      exists(
+        `.sidebar-section-link-${category1.slug} .sidebar-section-link-prefix[style="color: #${category1.color}"]`
+      ),
+      "category1 section link is rendered with right prefix icon color"
     );
 
     assert.strictEqual(
@@ -217,6 +217,13 @@ acceptance("Sidebar - Categories Section", function (needs) {
       exists(`.sidebar-section-link-${category2.slug}.active`),
       "the category2 section link is marked as active"
     );
+
+    assert.ok(
+      exists(
+        `.sidebar-section-link-${category3.slug} .sidebar-section-link-prefix .prefix-badge.d-icon-lock`
+      ),
+      "category3 section link is rendered with lock prefix badge icon as it is read restricted"
+    );
   });
 
   test("visiting category discovery new route", async function (assert) {

app/assets/javascripts/discourse/tests/fixtures/site-fixtures.js

@@ -61,7 +61,7 @@ export default {
         {
           id: 3,
           name: "meta",
-          color: "aaa",
+          color: "aaaaaa",
           text_color: "FFFFFF",
           slug: "meta",
           topic_count: 122,

app/assets/stylesheets/common/base/sidebar-section-link.scss

@@ -92,11 +92,15 @@
 
     &.icon {
       position: relative;
-      margin-right: 0.75em;
+      margin-right: 0.5em;
+
+      svg {
+        font-size: var(--font-down-1);
+      }
 
       svg.prefix-badge {
         position: absolute;
-        background-color: var(--primary-very-low);
+        background-color: transparent;
         border-radius: 50%;
         padding: 2px 2px 3px;
         color: var(--primary-high);

lib/svg_sprite.rb

@@ -181,6 +181,7 @@ module SvgSprite
     "sign-out-alt",
     "signal",
     "sliders-h",
+    "square-full",
     "star",
     "step-backward",
     "step-forward",