How can I view categories and "latest" on mobile?

[Aurora]

How can I view categories and “latest” on mobile?

Like this?

[Arkshine]

I looked, and they used some custom JS code to force the “categories and latest topics” view.

I did not check if there was a better way; here is what they do (I modernized the code and added some comments):

import { apiInitializer } from "discourse/lib/api";
import CategoriesAndLatestTopics from "discourse/components/categories-and-latest-topics";
import CategoryList from "discourse/models/category-list";
import { MAX_UNOPTIMIZED_CATEGORIES } from "discourse/lib/constants";

export default apiInitializer((api) => {
  // Forces the Categories and latests topic view.
  api.modifyClass(
    "component:discovery/categories-display",
    (Superclass) =>
      class extends Superclass {
        get categoriesComponent() {
          if (this.args.parentCategory) {
            return super.categoriesComponent;
          } else {
            return CategoriesAndLatestTopics;
          }
        }
      }
  );

  // Same as original, minor the "this.site.desktopView" check,
  // so it finds the latest topics for mobile as well.
  api.modifyClass(
    "route:discovery-categories",
    (Superclass) =>
      class extends Superclass {
        async findCategories(parentCategory) {
          let model;

          let style = this.siteSettings.desktop_category_page_style;
          if (this.site.categories.length > MAX_UNOPTIMIZED_CATEGORIES) {
            style = "categories_only";
          }

          if (
            style === "categories_and_latest_topics" ||
            style === "categories_and_latest_topics_created_date"
          ) {
            model = await this._findCategoriesAndTopics(
              "latest",
              parentCategory
            );
          } else if (style === "categories_and_top_topics") {
            model = await this._findCategoriesAndTopics(
              "top",
              parentCategory
            );
          } else {
            PreloadStore.remove("topic_list");
            model = await CategoryList.list(this.store, parentCategory);
          }

          return model;
        }
      }
  );
})

You can try to paste the code into a new component → Edit code → JS tab.
Let me know if it helps.

[Aurora]

Thank you very much. I tried, but it didn’t change anything.

[Arkshine]

I would check the following, make sure:

• Code is in the JS tab (and not others places)
• Your code is enabled (if you created a TC, make sure it’s attached to the theme)
• You have the desktop_category_page_style site setting to categories_and_latest_topics
• If you have errors in the browser’s console

Let’s see if we can figure out why nothing happens.

[Aurora]

I think I did it all that way. Is it correct copied?

[Arkshine]

You can remove the duplicate. That’s likely the reason it doesn’t work (these 5 lines):

[Aurora]

Now something is coming! But not when I use “modern category and group” Thing.