experimenting

Decorators on object literal properties are unsupported in most modern JS tooling, including ts/glint and Prettier 3.0. Using the new native-class-based modifyClass syntax means we can use decorators safely

.discourse-compatibility

@@ -1,2 +1,6 @@
+< 3.5.0.beta1-dev: 72af869d92500fd4971817fc31a57593416ef832
+< 3.4.0.beta2-dev: 533c97fc4fbf65310bdd7d3d13eebefddc4d5ffd
+< 3.4.0.beta1-dev: 195e853216558cdc16db598656619aa08abf8927
+< 3.3.0.beta1-dev: 4d7491226a4eac33f5a57ebd67f292ef91c8c51e
 3.1.999: 6942afd56f4cf43e643bbafe1782aa055fadc7bc
 2.8.0.beta1: d9ed154f9887dcf48e648d7fa8af76c65caa5006

.eslintrc

@@ -1,8 +0,0 @@
-{
-  "extends": "eslint-config-discourse",
-  "ignorePatterns": ["javascripts/vendor/*"],
-  "globals": {
-    "settings": "readonly",
-    "themePrefix": "readonly"
-  }
-}

.npmrc

@@ -0,0 +1,2 @@
+engine-strict = true
+auto-install-peers = false

.prettierrc

@@ -1 +0,0 @@
-{}

.prettierrc.cjs

@@ -0,0 +1 @@
+module.exports = require("@discourse/lint-configs/prettier");

.rubocop.yml

@@ -0,0 +1,2 @@
+inherit_gem:
+  rubocop-discourse: stree-compat.yml

.streerc

@@ -0,0 +1,2 @@
+--print-width=100
+--plugins=plugin/trailing_comma,plugin/disable_auto_ternary

.template-lintrc.cjs

@@ -0,0 +1 @@
+module.exports = require("@discourse/lint-configs/template-lint");

.template-lintrc.js

@@ -1,4 +0,0 @@
-module.exports = {
-  plugins: ["ember-template-lint-plugin-discourse"],
-  extends: "discourse:recommended",
-};

Gemfile

@@ -0,0 +1,8 @@
+# frozen_string_literal: true
+
+source "https://rubygems.org"
+
+group :development do
+  gem "rubocop-discourse"
+  gem "syntax_tree"
+end

Gemfile.lock

@@ -0,0 +1,101 @@
+GEM
+  remote: https://rubygems.org/
+  specs:
+    activesupport (8.0.2)
+      base64
+      benchmark (>= 0.3)
+      bigdecimal
+      concurrent-ruby (~> 1.0, >= 1.3.1)
+      connection_pool (>= 2.2.5)
+      drb
+      i18n (>= 1.6, < 2)
+      logger (>= 1.4.2)
+      minitest (>= 5.1)
+      securerandom (>= 0.3)
+      tzinfo (~> 2.0, >= 2.0.5)
+      uri (>= 0.13.1)
+    ast (2.4.2)
+    base64 (0.2.0)
+    benchmark (0.4.0)
+    bigdecimal (3.1.9)
+    concurrent-ruby (1.3.5)
+    connection_pool (2.5.0)
+    drb (2.2.1)
+    i18n (1.14.7)
+      concurrent-ruby (~> 1.0)
+    json (2.10.2)
+    language_server-protocol (3.17.0.4)
+    lint_roller (1.1.0)
+    logger (1.6.6)
+    minitest (5.25.5)
+    parallel (1.26.3)
+    parser (3.3.7.1)
+      ast (~> 2.4.1)
+      racc
+    prettier_print (1.2.1)
+    racc (1.8.1)
+    rack (3.1.12)
+    rainbow (3.1.1)
+    regexp_parser (2.10.0)
+    rubocop (1.74.0)
+      json (~> 2.3)
+      language_server-protocol (~> 3.17.0.2)
+      lint_roller (~> 1.1.0)
+      parallel (~> 1.10)
+      parser (>= 3.3.0.2)
+      rainbow (>= 2.2.2, < 4.0)
+      regexp_parser (>= 2.9.3, < 3.0)
+      rubocop-ast (>= 1.38.0, < 2.0)
+      ruby-progressbar (~> 1.7)
+      unicode-display_width (>= 2.4.0, < 4.0)
+    rubocop-ast (1.39.0)
+      parser (>= 3.3.1.0)
+    rubocop-capybara (2.22.1)
+      lint_roller (~> 1.1)
+      rubocop (~> 1.72, >= 1.72.1)
+    rubocop-discourse (3.12.1)
+      activesupport (>= 6.1)
+      lint_roller (>= 1.1.0)
+      rubocop (>= 1.73.2)
+      rubocop-capybara (>= 2.22.0)
+      rubocop-factory_bot (>= 2.27.0)
+      rubocop-rails (>= 2.30.3)
+      rubocop-rspec (>= 3.0.1)
+      rubocop-rspec_rails (>= 2.31.0)
+    rubocop-factory_bot (2.27.1)
+      lint_roller (~> 1.1)
+      rubocop (~> 1.72, >= 1.72.1)
+    rubocop-rails (2.30.3)
+      activesupport (>= 4.2.0)
+      lint_roller (~> 1.1)
+      rack (>= 1.1)
+      rubocop (>= 1.72.1, < 2.0)
+      rubocop-ast (>= 1.38.0, < 2.0)
+    rubocop-rspec (3.5.0)
+      lint_roller (~> 1.1)
+      rubocop (~> 1.72, >= 1.72.1)
+    rubocop-rspec_rails (2.31.0)
+      lint_roller (~> 1.1)
+      rubocop (~> 1.72, >= 1.72.1)
+      rubocop-rspec (~> 3.5)
+    ruby-progressbar (1.13.0)
+    securerandom (0.4.1)
+    syntax_tree (6.2.0)
+      prettier_print (>= 1.2.0)
+    tzinfo (2.0.6)
+      concurrent-ruby (~> 1.0)
+    unicode-display_width (3.1.4)
+      unicode-emoji (~> 4.0, >= 4.0.4)
+    unicode-emoji (4.0.4)
+    uri (1.0.3)
+
+PLATFORMS
+  arm64-darwin-23
+  ruby
+
+DEPENDENCIES
+  rubocop-discourse
+  syntax_tree
+
+BUNDLED WITH
+   2.6.6

LICENSE

@@ -1,6 +1,6 @@
-MIT License
+The MIT License (MIT)
 
-Copyright (c) 2022 Discourse
+Copyright (c) Civilized Discourse Construction Kit, Inc.
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

about.json

@@ -2,12 +2,15 @@
   "name": "User Card Directory",
   "component": true,
   "about_url": "https://meta.discourse.org/t/user-card-directory/144479",
-  "license_url": null,
+  "license_url": "https://github.com/discourse/discourse-user-card-directory/blob/main/LICENSE",
   "authors": "David Taylor",
   "minimum_discourse_version": "2.5.0.beta2",
   "assets": {},
   "color_schemes": {},
   "modifiers": {
-    "svg_icons": ["id-card", "th-list"]
+    "svg_icons": [
+      "id-card",
+      "table-list"
+    ]
   }
 }

common/common.scss

@@ -40,8 +40,9 @@
 
 .user-card-directory {
   display: grid;
-
   grid-template-columns: 1fr;
+  grid-gap: 60px 20px;
+  margin-top: 60px;
 
   @media only screen and (min-width: 500px) {
     grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
@@ -49,19 +50,12 @@
 
   .user-card-container {
     margin: 60px 20px;
+    margin-bottom: auto;
+    width: 100%;
+    background-color: var(--secondary);
+    box-shadow: var(--shadow-card);
   }
 
-  @supports (display: grid) {
-    display: grid;
-
-    .user-card-container {
-      margin: 0;
-    }
-  }
-
-  grid-gap: 60px 20px;
-  margin-top: 60px;
-
   .user-card {
     z-index: z("base");
     position: relative;
@@ -78,14 +72,6 @@
     display: none;
   }
 
-  .user-card-container {
-    width: 100%;
-
-    background-color: var(--secondary);
-    box-shadow: var(--shadow-card);
-    margin-bottom: auto;
-  }
-
   .user-card-directory-footer {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(5em, 1fr));
@@ -110,6 +96,7 @@
 
       .label {
         font-size: var(--font-down-2);
+
         .d-icon {
           margin-right: 0.2em;
           color: var(--primary-medium);
@@ -125,8 +112,10 @@
           justify-content: center;
           width: 100%;
           min-width: 0;
+
           span {
             min-width: 0;
+
             @include ellipsis;
           }
         }

eslint.config.mjs

@@ -0,0 +1,3 @@
+import DiscourseRecommendedTheme from "@discourse/lint-configs/eslint-theme";
+
+export default [...DiscourseRecommendedTheme];

javascripts/discourse/components/user-card-directory-toggle.gjs

@@ -0,0 +1,32 @@
+import Component from "@glimmer/component";
+import { action } from "@ember/object";
+import { service } from "@ember/service";
+import DButton from "discourse/components/d-button";
+
+export default class UserCardDirectoryToggle extends Component {
+  @service router;
+
+  get showingCards() {
+    const { cards } = this.router.currentRoute.queryParams;
+
+    return (
+      cards === "yes" ||
+      (cards === undefined && settings.default_view === "cards")
+    );
+  }
+
+  @action
+  toggleCards() {
+    const newValue = this.showingCards ? "no" : "yes";
+    this.router.transitionTo({ queryParams: { cards: newValue } });
+  }
+
+  <template>
+    <DButton
+      @action={{this.toggleCards}}
+      @icon={{if this.showingCards "table-list" "id-card"}}
+      @title={{themePrefix (if this.showingCards "show_table" "show_cards")}}
+      class="btn-default open-edit-columns-btn toggle-cards-button"
+    />
+  </template>
+}

javascripts/discourse/components/user-card-directory-toggle.hbs

@@ -1,6 +0,0 @@
-{{d-button
-  icon=(if showingCards "th-list" "id-card")
-  action=(action "toggleCards")
-  title=(theme-prefix (if showingCards "show_table" "show_cards"))
-  class="btn-default open-edit-columns-btn toggle-cards-button"
-}}

javascripts/discourse/components/user-card-directory-toggle.js

@@ -1,23 +0,0 @@
-import Component from "@ember/component";
-import { inject as service } from "@ember/service";
-import discourseComputed from "discourse-common/utils/decorators";
-
-export default Component.extend({
-  router: service("router"),
-  tagName: "",
-
-  @discourseComputed("router.currentRoute.queryParams.cards")
-  showingCards(cardsParam) {
-    return (
-      cardsParam === "yes" ||
-      (cardsParam === undefined && settings.default_view === "cards")
-    );
-  },
-
-  actions: {
-    toggleCards() {
-      const newValue = this.showingCards ? "no" : "yes";
-      this.router.transitionTo({ queryParams: { cards: newValue } });
-    },
-  },
-});

javascripts/discourse/components/user-card-static.js

@@ -1,18 +1,21 @@
-import UserCardContents from "discourse/components/user-card-contents";
 import { action } from "@ember/object";
+import UserCardContents from "discourse/components/user-card-contents";
+
+export default class UserCardStaticContents extends UserCardContents {
+  layoutName = "components/user-card-contents";
+  elementId = null;
 
-export default UserCardContents.extend({
-  layoutName: "components/user-card-contents",
-  elementId: null,
   // Overriding functions which cause the user card to show/hide based on mouse/keyboard events:
-  cleanUp() {},
-  didInsertElement() {},
-  willDestroyElement() {},
-  keyUp() {},
+  cleanUp() {}
+
+  didInsertElement() {}
+
+  willDestroyElement() {}
+  keyUp() {}
 
   // need to override this to work with the loading slider
   @action
   handleShowUser() {
     return;
-  },
-});
+  }
+}

javascripts/discourse/connectors/users-directory-controls/user-card-directory-toggle.hbs

@@ -1 +1 @@
-{{user-card-directory-toggle}}
+<UserCardDirectoryToggle />

javascripts/discourse/initializers/user-card-directory.js

@@ -1,8 +1,7 @@
-import { withPluginApi } from "discourse/lib/plugin-api";
-import discourseComputed from "discourse-common/utils/decorators";
-import User from "discourse/models/user";
 import EmberObject, { action } from "@ember/object";
 import { ajax } from "discourse/lib/ajax";
+import discourseComputed from "discourse/lib/decorators";
+import { withPluginApi } from "discourse/lib/plugin-api";
 import DiscourseURL, { userPath } from "discourse/lib/url";
 
 export default {
@@ -12,6 +11,11 @@ export default {
       api.modifyClass("route:users", {
         pluginId: "user-card-directory",
 
+        init() {
+          this._super(...arguments);
+          this.queryParams.cards = { refreshModel: true };
+        },
+
         get templateName() {
           if (this.modelFor("users")?.showAsCards) {
             return "users-as-card-directory";
@@ -27,10 +31,6 @@ export default {
           }
         },
 
-        queryParams: {
-          cards: { refreshModel: true },
-        },
-
         model(params) {
           return this._super(params).then((model) => {
             model.showAsCards =
@@ -42,14 +42,14 @@ export default {
         },
       });
 
-      api.modifyClass("controller:users", {
-        pluginId: "user-card-directory",
-        cachedUserCardInfo: null,
-
+      api.modifyClass(
+        "controller:users",
+        (Superclass) =>
+          class extends Superclass {
             init() {
               this.set("cachedUserCardInfo", {});
-          this._super(...arguments);
-        },
+              super.init(...arguments);
+            }
 
             @discourseComputed("model.content.@each")
             userCards(allUsers) {
@@ -60,7 +60,6 @@ export default {
               if (settings.hide_current_user && this.currentUser) {
                 allUsers = allUsers.filter((u) => u.id !== this.currentUser.id);
               }
-
               const filteredUsers = allUsers.filter(u => u.user.user_fields["3"] === "true");
               const userCardInfos = filteredUsers.map((u) => {
                 if (this.cachedUserCardInfo[u.id]) {
@@ -69,7 +68,7 @@ export default {
 
                 const userCardInfo = (this.cachedUserCardInfo[u.id] =
                   EmberObject.create({
-                user: User.create(u.user),
+                    user: this.store.createRecord("user", u.user),
                     directoryItem: u,
                     loading: true,
                   }));
@@ -84,7 +83,9 @@ export default {
               while (toLoad.length > 0) {
                 const thisBatch = toLoad.splice(0, loadMax);
                 const promise = ajax("/user-cards.json", {
-              data: { user_ids: thisBatch.map((uc) => uc.user.id).join(",") },
+                  data: {
+                    user_ids: thisBatch.map((uc) => uc.user.id).join(","),
+                  },
                 });
                 thisBatch.forEach((uc) => {
                   // Each user card expects its own promise
@@ -107,13 +108,22 @@ export default {
               window.scrollBy(0, -5);
 
               return userCardInfos;
-        },
+            }
 
             @action
             userCardShowUser(user) {
               DiscourseURL.routeTo(userPath(user.username_lower));
-        },
+            }
+
+            @action
+            updateOrder(field, asc) {
+              this.setProperties({
+                order: field,
+                asc,
               });
+            }
+          }
+      );
     });
   },
 };

javascripts/discourse/templates/users-as-card-directory.hbs

@@ -1,8 +1,13 @@
-{{#d-section pageClass="users"}}
-  {{#load-more
-    selector=".user-card-directory .user-card-container"
-    action=(action "loadMore")
-  }}
+{{#if this.model.canLoadMore}}
+  {{hide-application-footer}}
+{{/if}}
+
+{{body-class "users-page"}}
+<section>
+  <LoadMore
+    @selector=".user-card-directory .user-card-container"
+    @action={{action "loadMore"}}
+  >
     <div class="container">
       <div class="users-directory directory">
         <PluginOutlet
@@ -12,48 +17,45 @@
         />
         <div class="directory-controls">
           <div class="period-controls">
-            {{period-chooser
-              period=period
-              onChange=(action (mut period))
-              fullDay=false
-            }}
-            {{#if lastUpdatedAt}}
+            <PeriodChooser
+              @period={{this.period}}
+              @onChange={{fn (mut this.period)}}
+              @fullDay={{false}}
+            />
+            {{#if this.lastUpdatedAt}}
               <div class="directory-last-updated">
                 {{i18n "directory.last_updated"}}
-                {{lastUpdatedAt}}
+                {{this.lastUpdatedAt}}
               </div>
             {{/if}}
           </div>
           <div class="inline-form">
             <label class="total-rows">
-              {{#if model.totalRows}}
-                {{i18n "directory.total_rows" count=model.totalRows}}
+              {{#if this.model.totalRows}}
+                {{i18n "directory.total_rows" count=this.model.totalRows}}
               {{/if}}
             </label>
             <Input
-              @value={{readonly emailInput}}
-              placeholder={{I18n "directory.filter_name"}}
+              @value={{readonly this.emailInput}}
+              placeholder={{i18n "directory.filter_name"}}
               class="filter-name no-blur"
-              {{on
-                "input"
-                (action "onUsernameFilterChanged" value="target.value")
-              }}
+              {{on "input" (with-event-value this.onUsernameFilterChanged)}}
             />
-            {{#if showGroupFilter}}
-              {{combo-box
+            {{#if this.showGroupFilter}}
+              <ComboBox
+                @value={{this.group}}
+                @content={{this.groupOptions}}
+                @onChange={{this.groupChanged}}
+                @options={{hash none="directory.group.all"}}
                 class="directory-group-selector"
-                value=group
-                content=groupOptions
-                onChange=(action groupChanged)
-                options=(hash none="directory.group.all")
-              }}
+              />
             {{/if}}
-            {{#if currentUser.staff}}
-              {{d-button
-                icon="wrench"
-                action=(action "showEditColumnsModal")
+            {{#if this.currentUser.staff}}
+              <DButton
+                @icon="wrench"
+                @action={{this.showEditColumnsModal}}
                 class="btn-default open-edit-columns-btn"
-              }}
+              />
             {{/if}}
             <PluginOutlet
               @name="users-directory-controls"
@@ -62,21 +64,21 @@
           </div>
         </div>
 
-        {{#conditional-loading-spinner condition=isLoading}}
-          {{#if userCards.length}}
+        <ConditionalLoadingSpinner @condition={{this.isLoading}}>
+          {{#if this.userCards.length}}
             <div class="user-card-directory">
-              {{#each userCards as |userCard|}}
+              {{#each this.userCards as |userCard|}}
                 <div class="user-card-container">
-                  {{user-card-static
-                    user=userCard.user
-                    visible=true
-                    loading=userCard.loading
-                    username=userCard.user.username
-                    showUser=this.userCardShowUser
-                  }}
+                  <UserCardStatic
+                    @user={{userCard.user}}
+                    @visible={{true}}
+                    @loading={{userCard.loading}}
+                    @username={{userCard.user.username}}
+                    @showUser={{this.userCardShowUser}}
+                  />
                   {{#if (theme-setting "show_stats")}}
                     <div class="user-card-directory-footer">
-                      {{#each columns as |column|}}
+                      {{#each this.columns as |column|}}
                         <span
                           class="stat stat-{{dasherize column.name}}
                             stat-type-{{column.type}}"
@@ -97,17 +99,18 @@
                             {{/if}}
                           </span>
                           <span class="label">
-                            {{table-header-toggle
-                              field=column.name
-                              icon=column.icon
-                              order=order
-                              asc=asc
-                              automatic=(directory-column-is-automatic
+                            <TableHeaderToggle
+                              @onToggle={{this.updateOrder}}
+                              @field={{column.name}}
+                              @icon={{column.icon}}
+                              @order={{this.order}}
+                              @asc={{this.asc}}
+                              @automatic={{directory-column-is-automatic
                                 column=column
-                              )
-                              translated=column.user_field_id
-                              onActiveRender=setActiveHeader
                               }}
+                              @translated={{column.user_field_id}}
+                              @onActiveRender={{this.setActiveHeader}}
+                            />
                           </span>
                         </span>
                       {{/each}}
@@ -116,14 +119,29 @@
                 </div>
               {{/each}}
             </div>
-            {{conditional-loading-spinner condition=model.loadingMore}}
+            <ConditionalLoadingSpinner @condition={{this.model.loadingMore}} />
           {{else}}
-            <div class="clearfix"></div>
-            <p>{{i18n "directory.no_results"}}</p>
+            <div class="empty-state">
+              <div class="empty-state-body">
+                <p>
+                  {{#if this.name}}
+                    {{i18n "directory.no_results_with_search"}}
+                  {{else}}
+                    {{i18n "directory.no_results.body"}}
+                    {{#if this.currentUser.staff}}
+                      {{html-safe
+                        (i18n
+                          "directory.no_results.extra_body" basePath=(base-path)
+                        )
+                      }}
                     {{/if}}
-        {{/conditional-loading-spinner}}
-
+                  {{/if}}
+                </p>
               </div>
             </div>
-  {{/load-more}}
-{{/d-section}}
+          {{/if}}
+        </ConditionalLoadingSpinner>
+      </div>
+    </div>
+  </LoadMore>
+</section>

locales/ar.yml

@@ -0,0 +1,14 @@
+# WARNING: Never edit this file.
+# It will be overwritten when translations are pulled from Crowdin.
+#
+# To work with us on translations, join this project:
+# https://translate.discourse.org/
+
+ar:
+  theme_metadata:
+    description: يستبدل دليل المستخدم بشبكة من بطاقات المستخدم
+    settings:
+      hide_current_user: إخفاء المستخدم الحالي من الشبكة دائمًا
+      show_stats: عرض الإحصائيات أسفل كل بطاقة مستخدم
+  show_cards: العرض في بطاقات
+  show_table: العرض في جدول

locales/be.yml

@@ -0,0 +1,7 @@
+# WARNING: Never edit this file.
+# It will be overwritten when translations are pulled from Crowdin.
+#
+# To work with us on translations, join this project:
+# https://translate.discourse.org/
+
+be:

locales/bg.yml

@@ -0,0 +1,7 @@
+# WARNING: Never edit this file.
+# It will be overwritten when translations are pulled from Crowdin.
+#
+# To work with us on translations, join this project:
+# https://translate.discourse.org/
+
+bg:

locales/bs_BA.yml

@@ -0,0 +1,7 @@
+# WARNING: Never edit this file.
+# It will be overwritten when translations are pulled from Crowdin.
+#
+# To work with us on translations, join this project:
+# https://translate.discourse.org/
+
+bs_BA:

locales/ca.yml

@@ -0,0 +1,7 @@
+# WARNING: Never edit this file.
+# It will be overwritten when translations are pulled from Crowdin.
+#
+# To work with us on translations, join this project:
+# https://translate.discourse.org/
+
+ca:

locales/cs.yml

@@ -0,0 +1,7 @@
+# WARNING: Never edit this file.
+# It will be overwritten when translations are pulled from Crowdin.
+#
+# To work with us on translations, join this project:
+# https://translate.discourse.org/
+
+cs:

locales/da.yml

@@ -0,0 +1,7 @@
+# WARNING: Never edit this file.
+# It will be overwritten when translations are pulled from Crowdin.
+#
+# To work with us on translations, join this project:
+# https://translate.discourse.org/
+
+da:

locales/de.yml

@@ -0,0 +1,14 @@
+# WARNING: Never edit this file.
+# It will be overwritten when translations are pulled from Crowdin.
+#
+# To work with us on translations, join this project:
+# https://translate.discourse.org/
+
+de:
+  theme_metadata:
+    description: Ersetzt das Benutzerverzeichnis durch ein Raster aus Benutzerkarten
+    settings:
+      hide_current_user: Den aktuellen Benutzer immer aus dem Raster ausblenden
+      show_stats: Statistiken unter jeder Benutzerkarte anzeigen
+  show_cards: Als Karten anzeigen
+  show_table: Als Tabelle anzeigen

locales/el.yml

@@ -0,0 +1,7 @@
+# WARNING: Never edit this file.
+# It will be overwritten when translations are pulled from Crowdin.
+#
+# To work with us on translations, join this project:
+# https://translate.discourse.org/
+
+el:

locales/en_GB.yml

@@ -0,0 +1,7 @@
+# WARNING: Never edit this file.
+# It will be overwritten when translations are pulled from Crowdin.
+#
+# To work with us on translations, join this project:
+# https://translate.discourse.org/
+
+en_GB:

locales/es.yml

@@ -0,0 +1,14 @@
+# WARNING: Never edit this file.
+# It will be overwritten when translations are pulled from Crowdin.
+#
+# To work with us on translations, join this project:
+# https://translate.discourse.org/
+
+es:
+  theme_metadata:
+    description: Sustituye el directorio de usuarios por una cuadrícula de tarjetas de usuario
+    settings:
+      hide_current_user: Ocultar siempre al usuario actual de la cuadrícula
+      show_stats: Mostrar estadísticas debajo de cada tarjeta de usuario
+  show_cards: Mostrar como tarjetas
+  show_table: Mostrar como tabla

locales/et.yml

@@ -0,0 +1,7 @@
+# WARNING: Never edit this file.
+# It will be overwritten when translations are pulled from Crowdin.
+#
+# To work with us on translations, join this project:
+# https://translate.discourse.org/
+
+et:

locales/fa_IR.yml

@@ -0,0 +1,7 @@
+# WARNING: Never edit this file.
+# It will be overwritten when translations are pulled from Crowdin.
+#
+# To work with us on translations, join this project:
+# https://translate.discourse.org/
+
+fa_IR:

locales/fi.yml

@@ -0,0 +1,14 @@
+# WARNING: Never edit this file.
+# It will be overwritten when translations are pulled from Crowdin.
+#
+# To work with us on translations, join this project:
+# https://translate.discourse.org/
+
+fi:
+  theme_metadata:
+    description: Korvaa käyttäjähakemiston käyttäjäkorttien ruudukolla
+    settings:
+      hide_current_user: Piilota aina nykyinen käyttäjä ruudukosta
+      show_stats: Näytä tilastot kunkin käyttäjäkortin alla
+  show_cards: Näytä kortteina
+  show_table: Näytä taulukkona

locales/fr.yml

@@ -0,0 +1,14 @@
+# WARNING: Never edit this file.
+# It will be overwritten when translations are pulled from Crowdin.
+#
+# To work with us on translations, join this project:
+# https://translate.discourse.org/
+
+fr:
+  theme_metadata:
+    description: Remplace le répertoire des utilisateurs par une grille de cartes d'utilisateur
+    settings:
+      hide_current_user: Toujours masquer l'utilisateur actuel de la grille
+      show_stats: Afficher les statistiques sous chaque carte d'utilisateur
+  show_cards: Afficher sous forme de cartes
+  show_table: Afficher sous forme de tableau

locales/gl.yml

@@ -0,0 +1,7 @@
+# WARNING: Never edit this file.
+# It will be overwritten when translations are pulled from Crowdin.
+#
+# To work with us on translations, join this project:
+# https://translate.discourse.org/
+
+gl:

locales/he.yml

@@ -0,0 +1,14 @@
+# WARNING: Never edit this file.
+# It will be overwritten when translations are pulled from Crowdin.
+#
+# To work with us on translations, join this project:
+# https://translate.discourse.org/
+
+he:
+  theme_metadata:
+    description: החלפת ספריית המשתמשים ברשת של כרטיסים משתמשים
+    settings:
+      hide_current_user: תמיד להסתיר את המשתמש הנוכחי מהרשת
+      show_stats: הצגת סטטיסטיקה תחת כל כרטיס משתמש
+  show_cards: הצגה ככרטיסים
+  show_table: הצגה כטבלה

locales/hr.yml

@@ -0,0 +1,7 @@
+# WARNING: Never edit this file.
+# It will be overwritten when translations are pulled from Crowdin.
+#
+# To work with us on translations, join this project:
+# https://translate.discourse.org/
+
+hr:

locales/hu.yml

@@ -0,0 +1,7 @@
+# WARNING: Never edit this file.
+# It will be overwritten when translations are pulled from Crowdin.
+#
+# To work with us on translations, join this project:
+# https://translate.discourse.org/
+
+hu:

locales/hy.yml

@@ -0,0 +1,7 @@
+# WARNING: Never edit this file.
+# It will be overwritten when translations are pulled from Crowdin.
+#
+# To work with us on translations, join this project:
+# https://translate.discourse.org/
+
+hy:

locales/id.yml

@@ -0,0 +1,7 @@
+# WARNING: Never edit this file.
+# It will be overwritten when translations are pulled from Crowdin.
+#
+# To work with us on translations, join this project:
+# https://translate.discourse.org/
+
+id:

locales/it.yml

@@ -0,0 +1,14 @@
+# WARNING: Never edit this file.
+# It will be overwritten when translations are pulled from Crowdin.
+#
+# To work with us on translations, join this project:
+# https://translate.discourse.org/
+
+it:
+  theme_metadata:
+    description: Sostituisce la directory utente con una griglia di schede utente
+    settings:
+      hide_current_user: Nascondi sempre l'utente attuale dalla griglia
+      show_stats: Mostra le statistiche sotto ogni scheda utente
+  show_cards: Mostra come schede
+  show_table: Mostra come tabella

locales/ja.yml

@@ -0,0 +1,14 @@
+# WARNING: Never edit this file.
+# It will be overwritten when translations are pulled from Crowdin.
+#
+# To work with us on translations, join this project:
+# https://translate.discourse.org/
+
+ja:
+  theme_metadata:
+    description: ユーザーディレクトリをユーザーカードのグリッドに置き換えます
+    settings:
+      hide_current_user: 現在のユーザーをグリッドから常に非表示にします
+      show_stats: 各ユーザーカードの下に統計情報を表示する
+  show_cards: カードとして表示
+  show_table: テーブルとして表示

locales/ko.yml

@@ -0,0 +1,7 @@
+# WARNING: Never edit this file.
+# It will be overwritten when translations are pulled from Crowdin.
+#
+# To work with us on translations, join this project:
+# https://translate.discourse.org/
+
+ko:

locales/lt.yml

@@ -0,0 +1,7 @@
+# WARNING: Never edit this file.
+# It will be overwritten when translations are pulled from Crowdin.
+#
+# To work with us on translations, join this project:
+# https://translate.discourse.org/
+
+lt:

locales/lv.yml

@@ -0,0 +1,7 @@
+# WARNING: Never edit this file.
+# It will be overwritten when translations are pulled from Crowdin.
+#
+# To work with us on translations, join this project:
+# https://translate.discourse.org/
+
+lv:

locales/nb_NO.yml

@@ -0,0 +1,7 @@
+# WARNING: Never edit this file.
+# It will be overwritten when translations are pulled from Crowdin.
+#
+# To work with us on translations, join this project:
+# https://translate.discourse.org/
+
+nb_NO:

locales/nl.yml

@@ -0,0 +1,14 @@
+# WARNING: Never edit this file.
+# It will be overwritten when translations are pulled from Crowdin.
+#
+# To work with us on translations, join this project:
+# https://translate.discourse.org/
+
+nl:
+  theme_metadata:
+    description: Vervangt de gebruikerslijst door een raster van gebruikerskaarten
+    settings:
+      hide_current_user: Huidige gebruiker altijd verbergen in het raster
+      show_stats: Statistieken weergeven onder elke gebruikerskaart
+  show_cards: Weergeven als kaarten
+  show_table: Weergeven als tabel

locales/pl_PL.yml

@@ -0,0 +1,7 @@
+# WARNING: Never edit this file.
+# It will be overwritten when translations are pulled from Crowdin.
+#
+# To work with us on translations, join this project:
+# https://translate.discourse.org/
+
+pl_PL:

locales/pt.yml

@@ -0,0 +1,7 @@
+# WARNING: Never edit this file.
+# It will be overwritten when translations are pulled from Crowdin.
+#
+# To work with us on translations, join this project:
+# https://translate.discourse.org/
+
+pt:

locales/pt_BR.yml

@@ -0,0 +1,14 @@
+# WARNING: Never edit this file.
+# It will be overwritten when translations are pulled from Crowdin.
+#
+# To work with us on translations, join this project:
+# https://translate.discourse.org/
+
+pt_BR:
+  theme_metadata:
+    description: Substitui o diretório do(a) usuário(a) por uma grade com cartões dos(as) usuários(as)
+    settings:
+      hide_current_user: Sempre ocultar o(a) usuário(a) da grade
+      show_stats: Mostrar estatísticas sob o cartão de cada usuário(a)
+  show_cards: Mostrar como cartões
+  show_table: Mostrar como tabela

locales/ro.yml

@@ -0,0 +1,7 @@
+# WARNING: Never edit this file.
+# It will be overwritten when translations are pulled from Crowdin.
+#
+# To work with us on translations, join this project:
+# https://translate.discourse.org/
+
+ro:

locales/ru.yml

@@ -0,0 +1,14 @@
+# WARNING: Never edit this file.
+# It will be overwritten when translations are pulled from Crowdin.
+#
+# To work with us on translations, join this project:
+# https://translate.discourse.org/
+
+ru:
+  theme_metadata:
+    description: Заменяет каталог пользователей таблицей карточек пользователей
+    settings:
+      hide_current_user: Всегда скрывать текущего пользователя из таблицы
+      show_stats: Показывать статистику под каждой карточкой пользователя
+  show_cards: Показывать в виде карточек
+  show_table: Показывать в виде таблицы

locales/sk.yml

@@ -0,0 +1,7 @@
+# WARNING: Never edit this file.
+# It will be overwritten when translations are pulled from Crowdin.
+#
+# To work with us on translations, join this project:
+# https://translate.discourse.org/
+
+sk:

locales/sl.yml

@@ -0,0 +1,7 @@
+# WARNING: Never edit this file.
+# It will be overwritten when translations are pulled from Crowdin.
+#
+# To work with us on translations, join this project:
+# https://translate.discourse.org/
+
+sl:

locales/sq.yml

@@ -0,0 +1,7 @@
+# WARNING: Never edit this file.
+# It will be overwritten when translations are pulled from Crowdin.
+#
+# To work with us on translations, join this project:
+# https://translate.discourse.org/
+
+sq:

locales/sr.yml

@@ -0,0 +1,7 @@
+# WARNING: Never edit this file.
+# It will be overwritten when translations are pulled from Crowdin.
+#
+# To work with us on translations, join this project:
+# https://translate.discourse.org/
+
+sr:

locales/sv.yml

@@ -0,0 +1,7 @@
+# WARNING: Never edit this file.
+# It will be overwritten when translations are pulled from Crowdin.
+#
+# To work with us on translations, join this project:
+# https://translate.discourse.org/
+
+sv:

locales/sw.yml

@@ -0,0 +1,7 @@
+# WARNING: Never edit this file.
+# It will be overwritten when translations are pulled from Crowdin.
+#
+# To work with us on translations, join this project:
+# https://translate.discourse.org/
+
+sw:

locales/te.yml

@@ -0,0 +1,7 @@
+# WARNING: Never edit this file.
+# It will be overwritten when translations are pulled from Crowdin.
+#
+# To work with us on translations, join this project:
+# https://translate.discourse.org/
+
+te:

locales/th.yml

@@ -0,0 +1,7 @@
+# WARNING: Never edit this file.
+# It will be overwritten when translations are pulled from Crowdin.
+#
+# To work with us on translations, join this project:
+# https://translate.discourse.org/
+
+th:

locales/tr_TR.yml

@@ -0,0 +1,14 @@
+# WARNING: Never edit this file.
+# It will be overwritten when translations are pulled from Crowdin.
+#
+# To work with us on translations, join this project:
+# https://translate.discourse.org/
+
+tr_TR:
+  theme_metadata:
+    description: Kullanıcı dizinini kullanıcı kartlarından oluşan bir ızgarayla değiştirir
+    settings:
+      hide_current_user: Mevcut kullanıcıyı her zaman ızgaradan gizle
+      show_stats: Her kullanıcı kartının altında istatistikleri göster
+  show_cards: Kart olarak göster
+  show_table: Tablo olarak göster

locales/ug.yml

@@ -0,0 +1,7 @@
+# WARNING: Never edit this file.
+# It will be overwritten when translations are pulled from Crowdin.
+#
+# To work with us on translations, join this project:
+# https://translate.discourse.org/
+
+ug:

locales/uk.yml

@@ -0,0 +1,7 @@
+# WARNING: Never edit this file.
+# It will be overwritten when translations are pulled from Crowdin.
+#
+# To work with us on translations, join this project:
+# https://translate.discourse.org/
+
+uk:

locales/ur.yml

@@ -0,0 +1,7 @@
+# WARNING: Never edit this file.
+# It will be overwritten when translations are pulled from Crowdin.
+#
+# To work with us on translations, join this project:
+# https://translate.discourse.org/
+
+ur:

locales/vi.yml

@@ -0,0 +1,7 @@
+# WARNING: Never edit this file.
+# It will be overwritten when translations are pulled from Crowdin.
+#
+# To work with us on translations, join this project:
+# https://translate.discourse.org/
+
+vi:

locales/zh_CN.yml

@@ -0,0 +1,14 @@
+# WARNING: Never edit this file.
+# It will be overwritten when translations are pulled from Crowdin.
+#
+# To work with us on translations, join this project:
+# https://translate.discourse.org/
+
+zh_CN:
+  theme_metadata:
+    description: 使用用户卡片网格替换用户目录
+    settings:
+      hide_current_user: 始终在网格中隐藏当前用户
+      show_stats: 在每个用户卡片下显示统计信息
+  show_cards: 以卡片形式显示
+  show_table: 以表形式显示

locales/zh_TW.yml

@@ -0,0 +1,7 @@
+# WARNING: Never edit this file.
+# It will be overwritten when translations are pulled from Crowdin.
+#
+# To work with us on translations, join this project:
+# https://translate.discourse.org/
+
+zh_TW:

package.json

@@ -1,10 +1,17 @@
 {
-  "name": "discourse-user-card-directory",
-  "version": "1.0.0",
-  "repository": "https://github.com/discourse/discourse-user-card-directory",
-  "author": "Discourse",
-  "license": "MIT",
+  "private": true,
   "devDependencies": {
-    "eslint-config-discourse": "^3.2.0"
-  }
+    "@discourse/lint-configs": "2.11.1",
+    "ember-template-lint": "7.0.1",
+    "eslint": "9.22.0",
+    "prettier": "3.5.3",
+    "stylelint": "16.16.0"
+  },
+  "engines": {
+    "node": ">= 22",
+    "npm": "please-use-pnpm",
+    "yarn": "please-use-pnpm",
+    "pnpm": "9.x"
+  },
+  "packageManager": "pnpm@9.15.5"
 }

stylelint.config.mjs

@@ -0,0 +1,3 @@
+export default {
+  extends: ["@discourse/lint-configs/stylelint"],
+};

test/acceptance/users-test.js

@@ -1,6 +1,6 @@
-import { acceptance, count } from "discourse/tests/helpers/qunit-helpers";
+import { click, currentURL, visit } from "@ember/test-helpers";
 import { test } from "qunit";
-import { click, visit } from "@ember/test-helpers";
+import { acceptance } from "discourse/tests/helpers/qunit-helpers";
 
 acceptance("User Card Directory", function (needs) {
   needs.pretender((server, helper) => {
@@ -132,33 +132,41 @@ acceptance("User Card Directory", function (needs) {
 
   test("Displays table when cards=no", async function (assert) {
     await visit("/u?cards=no");
-    assert.ok($("body.users-page").length, "has the body class");
-    assert.equal(
-      count(".directory .directory-table__row"),
-      2,
-      "has a list of users"
-    );
+    assert.dom(document.body).hasClass(/users-page/);
+    assert
+      .dom(".directory .directory-table__row")
+      .exists({ count: 2 }, "has a list of users");
   });
 
   test("Displays cards when cards=yes", async function (assert) {
     await visit("/u?cards=yes");
-    assert.equal(count(".user-card-avatar"), 2, "has two cards showing");
+    assert
+      .dom(".user-card-avatar")
+      .exists({ count: 2 }, "has two cards showing");
+  });
+
+  test("Updates the order when column is clicked", async function (assert) {
+    await visit("/u?order=post_count&period=yearly");
+    await click("#table-header-toggle-post_count");
+    assert.equal(
+      currentURL(),
+      "/u?asc=true&order=post_count&period=yearly",
+      "sorts by topic count"
+    );
   });
 
   test("Can toggle between views", async function (assert) {
     await visit("/u?cards=no");
-    assert.equal(
-      count(".directory .directory-table__row"),
-      2,
-      "has two table rows"
-    );
+    assert
+      .dom(".directory .directory-table__row")
+      .exists({ count: 2 }, "has two table rows");
+
     await click(".toggle-cards-button");
-    assert.equal(count(".user-card-avatar"), 2, "has two cards");
+    assert.dom(".user-card-avatar").exists({ count: 2 }, "has two cards");
+
     await click(".toggle-cards-button");
-    assert.equal(
-      count(".directory .directory-table__row"),
-      2,
-      "has two table rows"
-    );
+    assert
+      .dom(".directory .directory-table__row")
+      .exists({ count: 2 }, "has two table rows");
   });
 });

translator.yml

@@ -0,0 +1,5 @@
+# Configuration file for discourse-translator-bot
+
+files:
+- source_path: locales/en.yml
+  destination_path: translations.yml