From d37a0d401ceca044002fd640be3745de643a3f2a Mon Sep 17 00:00:00 2001
From: Bianca Nenciu <nbianca@users.noreply.github.com>
Date: Thu, 24 Oct 2024 13:46:42 +0300
Subject: [PATCH] FEATURE: Introduce an optimized style for category page
 (#29239)

The new style is called `categories_only_optimized` and it is designed
to show only the parent categories, without any subcategories. This
works best for communities with many categories (over a thousand).
---
 .../components/categories-only-optimized.hbs  | 83 +++++++++++++++++++
 .../components/categories-only-optimized.js   | 56 +++++++++++++
 .../discovery/categories-display.gjs          | 10 ++-
 .../parent-category-row-optimized.hbs         | 46 ++++++++++
 .../parent-category-row-optimized.js          |  3 +
 .../components/categories-only-optimized.hbs  | 36 ++++++++
 .../parent-category-row-optimized.hbs         | 29 +++++++
 app/assets/stylesheets/mobile/topic-list.scss | 10 +++
 app/models/category_list.rb                   |  3 +-
 app/models/category_page_style.rb             |  1 +
 config/locales/client.en.yml                  |  1 +
 spec/requests/categories_controller_spec.rb   | 14 +++-
 12 files changed, 289 insertions(+), 3 deletions(-)
 create mode 100644 app/assets/javascripts/discourse/app/components/categories-only-optimized.hbs
 create mode 100644 app/assets/javascripts/discourse/app/components/categories-only-optimized.js
 create mode 100644 app/assets/javascripts/discourse/app/components/parent-category-row-optimized.hbs
 create mode 100644 app/assets/javascripts/discourse/app/components/parent-category-row-optimized.js
 create mode 100644 app/assets/javascripts/discourse/app/templates/mobile/components/categories-only-optimized.hbs
 create mode 100644 app/assets/javascripts/discourse/app/templates/mobile/components/parent-category-row-optimized.hbs

diff --git a/app/assets/javascripts/discourse/app/components/categories-only-optimized.hbs b/app/assets/javascripts/discourse/app/components/categories-only-optimized.hbs
new file mode 100644
index 00000000000..6c36c1c6106
--- /dev/null
+++ b/app/assets/javascripts/discourse/app/components/categories-only-optimized.hbs
@@ -0,0 +1,83 @@
+<PluginOutlet
+  @name="categories-only-wrapper"
+  @outletArgs={{hash categories=this.categories}}
+>
+  {{#if this.categories}}
+    {{#if this.filteredCategories}}
+      <table
+        class="category-list optimized {{if this.showTopics 'with-topics'}}"
+      >
+        <thead>
+          <tr>
+            <th class="category"><span
+                role="heading"
+                aria-level="2"
+                id="categories-only-category"
+              >{{i18n "categories.category"}}</span></th>
+            <th class="topics">{{i18n "categories.topics"}}</th>
+            {{#if this.showTopics}}
+              <th class="latest">{{i18n "categories.latest"}}</th>
+            {{/if}}
+          </tr>
+        </thead>
+        <tbody aria-labelledby="categories-only-category">
+          {{#each this.categories as |category|}}
+            <ParentCategoryRowOptimized
+              @category={{category}}
+              @showTopics={{this.showTopics}}
+            />
+          {{/each}}
+        </tbody>
+      </table>
+    {{/if}}
+
+    {{#if this.mutedCategories}}
+      <div class="muted-categories">
+        <a
+          href
+          class="muted-categories-link"
+          {{on "click" this.toggleShowMuted}}
+        >
+          <h3 class="muted-categories-heading">{{i18n "categories.muted"}}</h3>
+          {{#if this.mutedToggleIcon}}
+            {{d-icon this.mutedToggleIcon}}
+          {{/if}}
+        </a>
+        <table
+          class="category-list optimized
+            {{if this.showTopics 'with-topics'}}
+            {{unless this.showMutedCategories 'hidden'}}"
+        >
+          <thead>
+            <tr>
+              <th class="category"><span
+                  role="heading"
+                  aria-level="2"
+                  id="categories-only-category-muted"
+                >{{i18n "categories.category"}}</span></th>
+              <th class="topics">{{i18n "categories.topics"}}</th>
+              {{#if this.showTopics}}
+                <th class="latest">{{i18n "categories.latest"}}</th>
+              {{/if}}
+            </tr>
+          </thead>
+          <tbody aria-labelledby="categories-only-category-muted">
+            {{#each this.categories as |category|}}
+              <ParentCategoryRowOptimized
+                @category={{category}}
+                @showTopics={{this.showTopics}}
+                @listType="muted"
+              />
+            {{/each}}
+          </tbody>
+        </table>
+      </div>
+    {{/if}}
+  {{/if}}
+</PluginOutlet>
+
+<PluginOutlet
+  @name="below-categories-only"
+  @connectorTagName="div"
+  @outletArgs={{hash categories=this.categories showTopics=this.showTopics}}
+/>
\ No newline at end of file
diff --git a/app/assets/javascripts/discourse/app/components/categories-only-optimized.js b/app/assets/javascripts/discourse/app/components/categories-only-optimized.js
new file mode 100644
index 00000000000..992c588e272
--- /dev/null
+++ b/app/assets/javascripts/discourse/app/components/categories-only-optimized.js
@@ -0,0 +1,56 @@
+import Component from "@ember/component";
+import { action } from "@ember/object";
+import { tagName } from "@ember-decorators/component";
+import discourseComputed from "discourse-common/utils/decorators";
+
+@tagName("")
+export default class CategoriesOnlyOptimized extends Component {
+  showMuted = false;
+
+  @discourseComputed("showMutedCategories", "filteredCategories.length")
+  mutedToggleIcon(showMutedCategories, filteredCategoriesLength) {
+    if (filteredCategoriesLength === 0) {
+      return;
+    }
+
+    if (showMutedCategories) {
+      return "minus";
+    }
+
+    return "plus";
+  }
+
+  @discourseComputed("showMuted", "filteredCategories.length")
+  showMutedCategories(showMuted, filteredCategoriesLength) {
+    return showMuted || filteredCategoriesLength === 0;
+  }
+
+  @discourseComputed("categories", "categories.length")
+  filteredCategories(categories, categoriesLength) {
+    if (!categories || categoriesLength === 0) {
+      return [];
+    }
+
+    return categories.filter((cat) => !cat.isHidden);
+  }
+
+  @discourseComputed("categories", "categories.length")
+  mutedCategories(categories, categoriesLength) {
+    if (!categories || categoriesLength === 0) {
+      return [];
+    }
+
+    // hide in single category pages
+    if (categories.firstObject.parent_category_id) {
+      return [];
+    }
+
+    return categories.filterBy("hasMuted");
+  }
+
+  @action
+  toggleShowMuted(event) {
+    event?.preventDefault();
+    this.toggleProperty("showMuted");
+  }
+}
diff --git a/app/assets/javascripts/discourse/app/components/discovery/categories-display.gjs b/app/assets/javascripts/discourse/app/components/discovery/categories-display.gjs
index e1e0bd8d6ce..1837f591583 100644
--- a/app/assets/javascripts/discourse/app/components/discovery/categories-display.gjs
+++ b/app/assets/javascripts/discourse/app/components/discovery/categories-display.gjs
@@ -6,6 +6,7 @@ import CategoriesAndTopTopics from "discourse/components/categories-and-top-topi
 import CategoriesBoxes from "discourse/components/categories-boxes";
 import CategoriesBoxesWithTopics from "discourse/components/categories-boxes-with-topics";
 import CategoriesOnly from "discourse/components/categories-only";
+import CategoriesOnlyOptimized from "discourse/components/categories-only-optimized";
 import CategoriesWithFeaturedTopics from "discourse/components/categories-with-featured-topics";
 import ConditionalLoadingSpinner from "discourse/components/conditional-loading-spinner";
 import LoadMore from "discourse/components/load-more";
@@ -15,6 +16,7 @@ import SubcategoriesWithFeaturedTopics from "discourse/components/subcategories-
 const mobileCompatibleViews = [
   "categories_with_featured_topics",
   "subcategories_with_featured_topics",
+  "categories_only_optimized",
 ];
 
 const subcategoryComponents = {
@@ -31,6 +33,7 @@ const globalComponents = {
   categories_boxes_with_topics: CategoriesBoxesWithTopics,
   categories_boxes: CategoriesBoxes,
   categories_only: CategoriesOnly,
+  categories_only_optimized: CategoriesOnlyOptimized,
   categories_with_featured_topics: CategoriesWithFeaturedTopics,
   subcategories_with_featured_topics: SubcategoriesWithFeaturedTopics,
 };
@@ -81,7 +84,12 @@ export default class CategoriesDisplay extends Component {
   }
 
   get canLoadMore() {
-    return this.site.lazy_load_categories && this.args.loadMore;
+    return (
+      this.args.loadMore &&
+      (this.site.lazy_load_categories ||
+        this.siteSettings.desktop_category_page_style ===
+          "categories_only_optimized")
+    );
   }
 
   <template>
diff --git a/app/assets/javascripts/discourse/app/components/parent-category-row-optimized.hbs b/app/assets/javascripts/discourse/app/components/parent-category-row-optimized.hbs
new file mode 100644
index 00000000000..42446a24e46
--- /dev/null
+++ b/app/assets/javascripts/discourse/app/components/parent-category-row-optimized.hbs
@@ -0,0 +1,46 @@
+{{#unless this.isHidden}}
+  <PluginOutlet
+    @name="category-list-above-each-category"
+    @outletArgs={{hash category=this.category}}
+  />
+  <tr
+    data-category-id={{this.category.id}}
+    data-notification-level={{this.category.notificationLevelString}}
+    class="{{if
+        this.category.description_excerpt
+        'has-description'
+        'no-description'
+      }}
+      {{if this.category.uploaded_logo.url 'has-logo' 'no-logo'}}"
+  >
+    <td
+      class="category {{if this.isMuted 'muted'}}"
+      style={{category-color-variable this.category.color}}
+    >
+      <CategoryTitleLink @category={{this.category}} />
+      <PluginOutlet
+        @name="below-category-title-link"
+        @connectorTagName="div"
+        @outletArgs={{hash category=this.category}}
+      />
+      {{#if this.category.description_excerpt}}
+        <div class="category-description">
+          {{dir-span this.category.description_excerpt htmlSafe="true"}}
+        </div>
+      {{/if}}
+    </td>
+
+    <td class="topics">
+      <div title={{this.category.statTitle}}>{{html-safe
+          this.category.stat
+        }}</div>
+      <CategoryUnread
+        @category={{this.category}}
+        @tagName="div"
+        @unreadTopicsCount={{this.unreadTopicsCount}}
+        @newTopicsCount={{this.newTopicsCount}}
+        class="unread-new"
+      />
+    </td>
+  </tr>
+{{/unless}}
\ No newline at end of file
diff --git a/app/assets/javascripts/discourse/app/components/parent-category-row-optimized.js b/app/assets/javascripts/discourse/app/components/parent-category-row-optimized.js
new file mode 100644
index 00000000000..ca7e2e4e44b
--- /dev/null
+++ b/app/assets/javascripts/discourse/app/components/parent-category-row-optimized.js
@@ -0,0 +1,3 @@
+import CategoryListItem from "discourse/components/category-list-item";
+
+export default class ParentCategoryRowOptimized extends CategoryListItem {}
diff --git a/app/assets/javascripts/discourse/app/templates/mobile/components/categories-only-optimized.hbs b/app/assets/javascripts/discourse/app/templates/mobile/components/categories-only-optimized.hbs
new file mode 100644
index 00000000000..3bff12c547f
--- /dev/null
+++ b/app/assets/javascripts/discourse/app/templates/mobile/components/categories-only-optimized.hbs
@@ -0,0 +1,36 @@
+{{#if this.categories}}
+  {{#if this.filteredCategories}}
+    <div class="category-list optimized {{if this.showTopics 'with-topics'}}">
+      {{#each this.filteredCategories as |c|}}
+        <ParentCategoryRowOptimized
+          @category={{c}}
+          @showTopics={{this.showTopics}}
+        />
+      {{/each}}
+    </div>
+  {{/if}}
+
+  {{#if this.mutedCategories}}
+    <div class="muted-categories">
+      <a href class="muted-categories-link" {{on "click" this.toggleShowMuted}}>
+        <h3 class="muted-categories-heading">{{i18n "categories.muted"}}</h3>
+        {{#if this.mutedToggleIcon}}
+          {{d-icon this.mutedToggleIcon}}
+        {{/if}}
+      </a>
+      <div
+        class="category-list optimized
+          {{if this.showTopics 'with-topics'}}
+          {{unless this.showMutedCategories 'hidden'}}"
+      >
+        {{#each this.mutedCategories as |c|}}
+          <ParentCategoryRowOptimized
+            @category={{c}}
+            @showTopics={{this.showTopics}}
+            @listType="muted"
+          />
+        {{/each}}
+      </div>
+    </div>
+  {{/if}}
+{{/if}}
\ No newline at end of file
diff --git a/app/assets/javascripts/discourse/app/templates/mobile/components/parent-category-row-optimized.hbs b/app/assets/javascripts/discourse/app/templates/mobile/components/parent-category-row-optimized.hbs
new file mode 100644
index 00000000000..904676369e5
--- /dev/null
+++ b/app/assets/javascripts/discourse/app/templates/mobile/components/parent-category-row-optimized.hbs
@@ -0,0 +1,29 @@
+{{#unless this.isHidden}}
+  <PluginOutlet
+    @name="category-list-above-each-category"
+    @outletArgs={{hash category=this.category}}
+  />
+  <div
+    data-category-id={{this.category.id}}
+    data-notification-level={{this.category.notificationLevelString}}
+    style={{border-color this.category.color}}
+    class="category-list-item category {{if this.isMuted 'muted'}}"
+  >
+    <table class="topic-list">
+      <tbody>
+        <tr>
+          <th class="main-link">
+            <CategoryTitleLink @category={{this.category}} />
+          </th>
+        </tr>
+        {{#if this.category.description_excerpt}}
+          <tr class="category-description">
+            <td colspan="3">
+              {{html-safe this.category.description_excerpt}}
+            </td>
+          </tr>
+        {{/if}}
+      </tbody>
+    </table>
+  </div>
+{{/unless}}
\ No newline at end of file
diff --git a/app/assets/stylesheets/mobile/topic-list.scss b/app/assets/stylesheets/mobile/topic-list.scss
index 36a97cde37e..042e242d6a2 100644
--- a/app/assets/stylesheets/mobile/topic-list.scss
+++ b/app/assets/stylesheets/mobile/topic-list.scss
@@ -144,6 +144,16 @@
       border-left: 6px solid;
     }
   }
+
+  &.optimized {
+    tr {
+      border: none;
+    }
+
+    th {
+      padding: 10px 0 10px;
+    }
+  }
 }
 
 .category-list-item.category {
diff --git a/app/models/category_list.rb b/app/models/category_list.rb
index 53224a8e475..3e0f58b0229 100644
--- a/app/models/category_list.rb
+++ b/app/models/category_list.rb
@@ -140,7 +140,8 @@ class CategoryList
     end
 
     page = [1, @options[:page].to_i].max
-    if @guardian.can_lazy_load_categories?
+    if SiteSetting.desktop_category_page_style == "categories_only_optimized" ||
+         @guardian.can_lazy_load_categories?
       query = query.limit(CATEGORIES_PER_PAGE).offset((page - 1) * CATEGORIES_PER_PAGE)
     elsif page > 1
       # Pagination is supported only when lazy load is enabled. If it is not,
diff --git a/app/models/category_page_style.rb b/app/models/category_page_style.rb
index fe8c5d41978..8acb3360bf0 100644
--- a/app/models/category_page_style.rb
+++ b/app/models/category_page_style.rb
@@ -10,6 +10,7 @@ class CategoryPageStyle < EnumSiteSetting
   def self.values
     @values ||= [
       { name: "category_page_style.categories_only", value: "categories_only" },
+      { name: "category_page_style.categories_only_optimized", value: "categories_only_optimized" },
       {
         name: "category_page_style.categories_with_featured_topics",
         value: "categories_with_featured_topics",
diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml
index 21d7563004c..8849870871e 100644
--- a/config/locales/client.en.yml
+++ b/config/locales/client.en.yml
@@ -2513,6 +2513,7 @@ en:
 
     category_page_style:
       categories_only: "Categories Only"
+      categories_only_optimized: "Categories Only (Optimized)"
       categories_with_featured_topics: "Categories with Featured Topics"
       categories_and_latest_topics: "Categories and Latest Topics"
       categories_and_latest_topics_created_date: "Categories and Latest Topics (sort by topic created date)"
diff --git a/spec/requests/categories_controller_spec.rb b/spec/requests/categories_controller_spec.rb
index d8fb02aac1a..d4ebd02fcef 100644
--- a/spec/requests/categories_controller_spec.rb
+++ b/spec/requests/categories_controller_spec.rb
@@ -416,7 +416,19 @@ RSpec.describe CategoriesController do
         expect(response.parsed_body["category_list"]["categories"].count).to eq(2)
       end
 
-      it "does not paginate results when lazy_load_categories is disabled" do
+      it "paginates results wihen desktop_category_page_style is categories_only_optimized" do
+        SiteSetting.desktop_category_page_style = "categories_only_optimized"
+
+        stub_const(CategoryList, "CATEGORIES_PER_PAGE", 2) { get "/categories.json?page=1" }
+        expect(response.status).to eq(200)
+        expect(response.parsed_body["category_list"]["categories"].count).to eq(2)
+
+        stub_const(CategoryList, "CATEGORIES_PER_PAGE", 2) { get "/categories.json?page=2" }
+        expect(response.status).to eq(200)
+        expect(response.parsed_body["category_list"]["categories"].count).to eq(2)
+      end
+
+      it "does not paginate results by default" do
         stub_const(CategoryList, "CATEGORIES_PER_PAGE", 2) { get "/categories.json?page=1" }
         expect(response.status).to eq(200)
         expect(response.parsed_body["category_list"]["categories"].count).to eq(4)