UX: improve categories page subcategory layout (#27612)

app/assets/javascripts/discourse/app/components/category-list-item.js

@@ -36,4 +36,9 @@ export default Component.extend({
   newTopicsCount() {
     return this.category.newTopicsCount;
   },
+
+  @discourseComputed("category.path")
+  slugPath(categoryPath) {
+    return categoryPath.substring("/c/".length);
+  },
 });

app/assets/javascripts/discourse/app/components/category-unread.js

@@ -1,4 +1,5 @@
 import Component from "@ember/component";
 export default Component.extend({
   tagName: "span",
+  classNames: ["category__badges"],
 });

app/assets/javascripts/discourse/app/components/parent-category-row.hbs

@@ -57,10 +57,14 @@
             />
           {{/each}}
           {{#if (gt this.category.unloadedSubcategoryCount 0)}}
-            {{i18n
-              "category_row.subcategory_count"
-              count=this.category.unloadedSubcategoryCount
-            }}
+            <div class="subcategories__more-subcategories">
+              <LinkTo @route="discovery.subcategories" @model={{this.slugPath}}>
+                {{i18n
+                  "category_row.subcategory_count"
+                  count=this.category.unloadedSubcategoryCount
+                }}
+              </LinkTo>
+            </div>
           {{/if}}
         </div>
       {{/if}}

app/assets/javascripts/discourse/tests/integration/components/select-kit/category-selector-test.js

@@ -50,7 +50,7 @@ module(
       );
       assert.equal(
         this.subject.rowByIndex(1).el().innerText.replaceAll("\n", " "),
-        "Parent Category × 95 + 2 subcategories"
+        "Parent Category × 95 +2 subcategories"
       );
     });
   }

app/assets/stylesheets/desktop/category-list.scss

@@ -47,22 +47,44 @@
       display: block;
       text-align: right;
       padding-right: 0;
-      margin-top: 5px;
+      &:first-child {
+        margin-top: 0.75em;
+      }
     }
   }
 
   .subcategories {
-    margin-top: 0.25em;
-    clear: both;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.15em 0.75em;
+    margin-top: 0.5em;
     .subcategory {
       display: inline-flex;
       align-items: baseline;
-      margin-right: 0.3em;
+      gap: 0.25em;
+      @include ellipsis;
+      .badge-category {
+        min-width: 0;
+      }
+    }
+    .category__badges {
+      display: flex;
+      gap: 0.25em;
+      .badge-notification {
+        top: 0;
+        padding: 0;
+      }
     }
     .badge-notification.unread-posts {
       display: block;
       padding: 0;
     }
+    &__more-subcategories {
+      font-size: var(--font-down-1);
+      a {
+        color: var(--primary-high);
+      }
+    }
   }
 
   .featured-topic {

config/locales/client.en.yml

@@ -2406,8 +2406,8 @@ en:
 
     category_row:
       subcategory_count:
-        one: "+ %{count} subcategory"
-        other: "+ %{count} subcategories"
+        one: "+%{count} subcategory"
+        other: "+%{count} subcategories"
       topic_count:
         one: "%{count} topic in this category"
         other: "%{count} topics in this category"