DEV: Remove prefixElementColors args for section link component (#21653)

The less arguments we have the less complicated it is to use the
component

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

@@ -14,7 +14,6 @@
       @prefixType={{sectionLink.prefixType}}
       @prefixValue={{sectionLink.prefixValue}}
       @prefixColor={{sectionLink.prefixColor}}
-      @prefixElementColors={{sectionLink.prefixElementColors}}
       data-category-id={{sectionLink.category.id}}
     />
   {{/each}}

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

@@ -7,30 +7,24 @@
     }}
     style={{if @prefixColor (html-safe (concat "color: " @prefixColor))}}
   >
+
     {{#if (eq @prefixType "image")}}
-      <img src={{@prefixValue}} class="prefix-image" />
-    {{/if}}
-
-    {{#if (eq @prefixType "text")}}
+      <img src={{this.prefixValue}} class="prefix-image" />
+    {{else if (eq @prefixType "text")}}
       <span class="prefix-text">
-        {{@prefixValue}}
+        {{this.prefixValue}}
       </span>
-    {{/if}}
-
-    {{#if (eq @prefixType "icon")}}
-      {{d-icon @prefixValue class="prefix-icon"}}
-    {{/if}}
-
-    {{#if (eq @prefixType "span")}}
+    {{else if (eq @prefixType "icon")}}
+      {{d-icon this.prefixValue class="prefix-icon"}}
+    {{else if (eq @prefixType "span")}}
       <span
         style={{html-safe
-          (concat
-            "background: linear-gradient(90deg, " @prefixElementColors ")"
-          )
+          (concat "background: linear-gradient(90deg, " this.prefixValue ")")
         }}
         class="prefix-span"
       ></span>
     {{/if}}
+
     {{#if @prefixBadge}}
       {{d-icon @prefixBadge class="prefix-badge"}}
     {{/if}}

app/assets/javascripts/discourse/app/components/sidebar/section-link-prefix.js

@@ -0,0 +1,31 @@
+import Component from "@glimmer/component";
+
+export default class extends Component {
+  get prefixValue() {
+    if (!this.args.prefixType && !this.args.prefixValue) {
+      return;
+    }
+
+    switch (this.args.prefixType) {
+      case "span":
+        let hexValues = this.args.prefixValue;
+
+        hexValues = hexValues.reduce((acc, color) => {
+          if (color?.match(/^([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/)) {
+            acc.push(`#${color} 50%`);
+          }
+
+          return acc;
+        }, []);
+
+        if (hexValues.length === 1) {
+          hexValues.push(hexValues[0]);
+        }
+
+        return hexValues.join(", ");
+        break;
+      default:
+        return this.args.prefixValue;
+    }
+  }
+}

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

@@ -18,7 +18,6 @@
           @prefixValue={{@prefixValue}}
           @prefixCSSClass={{@prefixCSSClass}}
           @prefixColor={{this.prefixColor}}
-          @prefixElementColors={{this.prefixElementColors}}
           @prefixBadge={{@prefixBadge}}
         />
 
@@ -43,7 +42,6 @@
           @prefixValue={{@prefixValue}}
           @prefixCSSClass={{@prefixCSSClass}}
           @prefixColor={{this.prefixColor}}
-          @prefixElementColors={{this.prefixElementColors}}
           @prefixBadge={{@prefixBadge}}
         />
 

app/assets/javascripts/discourse/app/components/sidebar/section-link.js

@@ -61,20 +61,4 @@ export default class SectionLink extends Component {
 
     return "#" + color;
   }
-
-  get prefixElementColors() {
-    if (!this.args.prefixElementColors) {
-      return;
-    }
-
-    const prefixElementColors = this.args.prefixElementColors.filter((color) =>
-      color?.slice(0, 6)
-    );
-
-    if (prefixElementColors.length === 1) {
-      prefixElementColors.push(prefixElementColors[0]);
-    }
-
-    return prefixElementColors.map((color) => `#${color} 50%`).join(", ");
-  }
 }

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

@@ -27,7 +27,6 @@
             @prefixType={{sectionLink.prefixType}}
             @prefixValue={{sectionLink.prefixValue}}
             @prefixColor={{sectionLink.prefixColor}}
-            @prefixElementColors={{sectionLink.prefixElementColors}}
             @suffixCSSClass={{sectionLink.suffixCSSClass}}
             @suffixValue={{sectionLink.suffixValue}}
             @suffixType={{sectionLink.suffixType}}

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

@@ -169,8 +169,12 @@ export default class CategorySectionLink {
     return "span";
   }
 
-  get prefixElementColors() {
-    return [this.category.parentCategory?.color, this.category.color];
+  get prefixValue() {
+    if (this.category.parentCategory?.color) {
+      return [this.category.parentCategory?.color, this.category.color];
+    } else {
+      return [this.category.color];
+    }
   }
 
   get prefixColor() {