FEATURE: add new setting to select view for category page on mobile (#30519)

app/assets/javascripts/discourse/app/components/discovery/categories-display.gjs

@@ -13,11 +13,6 @@ import PluginOutlet from "discourse/components/plugin-outlet";
 import SubcategoriesWithFeaturedTopics from "discourse/components/subcategories-with-featured-topics";
 import { MAX_UNOPTIMIZED_CATEGORIES } from "discourse/lib/constants";
 
-const mobileCompatibleViews = [
-  "categories_with_featured_topics",
-  "subcategories_with_featured_topics",
-];
-
 const subcategoryComponents = {
   boxes_with_featured_topics: CategoriesBoxesWithTopics,
   boxes: CategoriesBoxes,
@@ -57,8 +52,8 @@ export default class CategoriesDisplay extends Component {
 
   get style() {
     let style = this.siteSettings.desktop_category_page_style;
-    if (this.site.mobileView && !mobileCompatibleViews.includes(style)) {
-      style = mobileCompatibleViews[0];
+    if (this.site.mobileView) {
+      style = this.siteSettings.mobile_category_page_style;
     }
     if (this.site.categories.length > MAX_UNOPTIMIZED_CATEGORIES) {
       style = "categories_only";

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

@@ -107,7 +107,7 @@ acceptance(
   function (needs) {
     needs.mobileView();
     needs.settings({
-      desktop_category_page_style: "subcategories_with_featured_topics",
+      mobile_category_page_style: "subcategories_with_featured_topics",
     });
 
     test("basic functionality", async function (assert) {
@@ -127,6 +127,30 @@ acceptance(
   }
 );
 
+acceptance(
+  "Categories - 'categories_boxes_with_topics' (mobile)",
+  function (needs) {
+    needs.mobileView();
+    needs.settings({
+      mobile_category_page_style: "categories_boxes_with_topics",
+    });
+
+    test("basic functionality", async function (assert) {
+      await visit("/categories");
+      assert
+        .dom(
+          "div.category-box-inner .category-box-heading a.parent-box-link[href='/c/dev/7']"
+        )
+        .exists("shows boxes for top-level category");
+      assert
+        .dom(
+          "div.category-box-inner .featured-topics li[data-topic-id='11994']"
+        )
+        .exists("shows featured topics in boxes");
+    });
+  }
+);
+
 acceptance("Categories - preloadStore handling", function () {
   const styles = [
     "categories_only",

app/controllers/categories_controller.rb

@@ -621,15 +621,19 @@ class CategoriesController < ApplicationController
       end
 
     include_topics =
-      view_context.mobile_view? || params[:include_topics] ||
+      params[:include_topics] ||
         (parent_category && parent_category.subcategory_list_includes_topics?) ||
         SiteSetting.desktop_category_page_style == "categories_with_featured_topics" ||
         SiteSetting.desktop_category_page_style == "subcategories_with_featured_topics" ||
         SiteSetting.desktop_category_page_style == "categories_boxes_with_topics" ||
-        SiteSetting.desktop_category_page_style == "categories_with_top_topics"
+        SiteSetting.desktop_category_page_style == "categories_with_top_topics" ||
+        SiteSetting.mobile_category_page_style == "categories_with_featured_topics" ||
+        SiteSetting.mobile_category_page_style == "categories_boxes_with_topics" ||
+        SiteSetting.mobile_category_page_style == "subcategories_with_featured_topics"
 
     include_subcategories =
       SiteSetting.desktop_category_page_style == "subcategories_with_featured_topics" ||
+        SiteSetting.mobile_category_page_style == "subcategories_with_featured_topics" ||
         params[:include_subcategories] == "true"
 
     category_options = {

app/models/mobile_category_page_style.rb

@@ -0,0 +1,32 @@
+# frozen_string_literal: true
+
+require "enum_site_setting"
+
+class MobileCategoryPageStyle < EnumSiteSetting
+  def self.valid_value?(val)
+    values.any? { |v| v[:value].to_s == val.to_s }
+  end
+
+  def self.values
+    @values ||= [
+      { name: "category_page_style.categories_only", value: "categories_only" },
+      {
+        name: "category_page_style.categories_with_featured_topics",
+        value: "categories_with_featured_topics",
+      },
+      { name: "category_page_style.categories_boxes", value: "categories_boxes" },
+      {
+        name: "category_page_style.categories_boxes_with_topics",
+        value: "categories_boxes_with_topics",
+      },
+      {
+        name: "category_page_style.subcategories_with_featured_topics",
+        value: "subcategories_with_featured_topics",
+      },
+    ]
+  end
+
+  def self.translate_names?
+    true
+  end
+end

config/locales/server.en.yml

@@ -2237,6 +2237,7 @@ en:
     min_title_similar_length: "The minimum length of a title before it will be checked for similar topics."
 
     desktop_category_page_style: "This setting determines the visual layout of the /categories page on desktop. It includes options such as displaying subcategories with featured topics, showing the latest topics, or presenting top topics. The chosen style will influence how users interact and navigate through categories on the site."
+    mobile_category_page_style: "This setting determines the visual layout of the /categories page on mobile."
     category_colors: "A list of hexadecimal color values allowed for categories."
     default_dark_mode_color_scheme_id: "The color palette used when in dark mode."
     dark_mode_none: "None"
@@ -3017,6 +3018,7 @@ en:
       delete_user_max_post_age: ""
       delete_user_self_max_post_count: ""
       desktop_category_page_style: ""
+      mobile_category_page_style: ""
       detailed_404: ""
       detect_custom_avatars: ""
       digest_logo: ""

config/site_settings.yml

@@ -283,6 +283,10 @@ basic:
     client: true
     enum: "CategoryPageStyle"
     default: "categories_and_latest_topics"
+  mobile_category_page_style:
+    client: true
+    enum: "MobileCategoryPageStyle"
+    default: "categories_with_featured_topics"
   category_colors:
     client: true
     type: list