FIX: Missing category badge for category with color stored as 3-digit hex code (#18579)

On the server side, the only limitation for `Category#color` is a length
limit of 6. Therefore, we cannot assume on the client side that the hex
code is always 6 digits.

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

@@ -53,11 +53,13 @@ export default class SectionLink extends Component {
 
   get prefixElementColors() {
     const prefixElementColors = this.args.prefixElementColors.filter((color) =>
-      color?.match(/^\w{6}$/)
+      color?.slice(0, 6)
     );
+
     if (prefixElementColors.length === 1) {
       prefixElementColors.push(prefixElementColors[0]);
     }
+
     return prefixElementColors.map((color) => `#${color} 50%`).join(", ");
   }
 }

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

@@ -291,6 +291,20 @@ acceptance("Sidebar - Logged on user - Categories Section", function (needs) {
     );
   });
 
+  test("category section link for category with 3-digit hex code for color", async function (assert) {
+    const { category1 } = setupUserSidebarCategories();
+    category1.set("color", "888");
+
+    await visit("/");
+
+    assert.ok(
+      exists(
+        `.sidebar-section-link-${category1.slug} .sidebar-section-link-prefix .prefix-span[style="background: linear-gradient(90deg, #888 50%, #888 50%)"]`
+      ),
+      "category1 section link is rendered with the right solid prefix icon color"
+    );
+  });
+
   test("category section link have the right title", async function (assert) {
     const categories = Site.current().categories;