UX: Sort categories alphabetically in Sidebar (#17958)

app/assets/javascripts/discourse/app/models/user.js

@@ -337,16 +337,18 @@ const User = RestModel.extend({
       return [];
     }
 
-    return Site.current().categoriesList.filter((category) => {
-      if (
-        this.siteSettings.suppress_uncategorized_badge &&
-        category.isUncategorizedCategory
-      ) {
-        return false;
-      }
+    return Site.current()
+      .categoriesList.filter((category) => {
+        if (
+          this.siteSettings.suppress_uncategorized_badge &&
+          category.isUncategorizedCategory
+        ) {
+          return false;
+        }
 
-      return sidebarCategoryIds.includes(category.id);
-    });
+        return sidebarCategoryIds.includes(category.id);
+      })
+      .sort((a, b) => a.name.localeCompare(b.name));
   },
 
   changeUsername(new_username) {

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

@@ -7,6 +7,7 @@ import {
   exists,
   publishToMessageBus,
   query,
+  queryAll,
   updateCurrentUser,
 } from "discourse/tests/helpers/qunit-helpers";
 
@@ -149,6 +150,32 @@ acceptance("Sidebar - Categories Section", function (needs) {
     );
   });
 
+  test("category section links are sorted by category name alphabetically", async function (assert) {
+    const { category1, category2, category3 } = setupUserSidebarCategories();
+
+    category3.set("name", "aBC");
+    category2.set("name", "abc");
+    category1.set("name", "efg");
+
+    await visit("/");
+
+    const categorySectionLinks = queryAll(
+      ".sidebar-section-categories .sidebar-section-link"
+    );
+
+    const categoryNames = [];
+
+    categorySectionLinks.each((_index, categorySectionLink) => {
+      categoryNames.push(categorySectionLink.textContent.trim());
+    });
+
+    assert.deepEqual(
+      categoryNames,
+      ["abc", "aBC", "efg"],
+      "category section links are displayed in the right order"
+    );
+  });
+
   test("category section links", async function (assert) {
     const { category1, category2, category3 } = setupUserSidebarCategories();