FEATURE: Add links to subcategories page on category page (#29474)

This applies only to the optimized category page style.

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

@@ -28,6 +28,16 @@
           {{dir-span this.category.description_excerpt htmlSafe="true"}}
         </div>
       {{/if}}
+      {{#if (gt this.category.subcategories.length 0)}}
+        <div class="category-subcategories">
+          <LinkTo @route="discovery.subcategories" @model={{this.slugPath}}>
+            {{i18n
+              "category_row.subcategory_count"
+              count=this.category.subcategories.length
+            }}
+          </LinkTo>
+        </div>
+      {{/if}}
     </td>
 
     <td class="topics">

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

@@ -23,6 +23,18 @@
             </td>
           </tr>
         {{/if}}
+        {{#if (gt this.category.subcategories.length 0)}}
+          <tr class="category-subcategories">
+            <td colspan="3">
+              <LinkTo @route="discovery.subcategories" @model={{this.slugPath}}>
+                {{i18n
+                  "category_row.subcategory_count"
+                  count=this.category.subcategories.length
+                }}
+              </LinkTo>
+            </td>
+          </tr>
+        {{/if}}
       </tbody>
     </table>
   </div>

app/assets/stylesheets/common/base/category-list.scss

@@ -314,6 +314,14 @@
     overflow: hidden;
     color: var(--primary-high);
   }
+  .category-subcategories {
+    font-size: var(--font-down-1);
+    margin-top: 0.5em;
+
+    a {
+      color: var(--primary-high);
+    }
+  }
   .category-logo.aspect-image {
     margin-top: 0.5em;
   }

app/assets/stylesheets/mobile/topic-list.scss

@@ -265,6 +265,14 @@ tr.category-topic-link {
     padding-bottom: 15px;
   }
 
+  .category-subcategories td {
+    padding-top: 0;
+  }
+
+  .category-description + .category-subcategories td {
+    padding-top: 0;
+  }
+
   .subcategories-list {
     border-bottom: none;
     td {