From 14da36b8064455636e65b2181c28d0f67f63dafe Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=A2u=20Cao?= <raucao@kosmos.org>
Date: Sun, 16 Feb 2025 14:21:51 +0400
Subject: [PATCH] Only show top 10 contributors by default

Don't waste so much screen real estate. Add button to show all to the
end of the toplist.
---
 app/components/contributor-list/component.js | 33 ++++++++++++++++++--
 app/components/contributor-list/template.hbs |  9 +++++-
 2 files changed, 39 insertions(+), 3 deletions(-)

diff --git a/app/components/contributor-list/component.js b/app/components/contributor-list/component.js
index f39632b..925647e 100644
--- a/app/components/contributor-list/component.js
+++ b/app/components/contributor-list/component.js
@@ -1,14 +1,43 @@
 import Component from '@glimmer/component';
 import { action } from '@ember/object';
 import { inject as service } from '@ember/service';
+import { tracked } from '@glimmer/tracking';
 
 export default class ContributorComponent extends Component {
   @service router;
 
-  selectedContributorId = null;
+  @tracked selectedContributorId = null;
+  @tracked showToplistOnly = true;
+
+  get contributorList () {
+    return this.args.contributorList;
+  }
+
+  get contributorTop10 () {
+    return this.contributorList ?
+      this.contributorList.slice(0, 10) : [];
+  }
+
+  get contributors () {
+    return this.showToplistOnly ?
+      this.contributorTop10 : this.contributorList;
+  }
+
+  get hiddenContributorsAmount () {
+    return this.contributorList.length - 10;
+  }
+
+  get showAllButtonText () {
+    return `Show ${this.hiddenContributorsAmount} more contributors`;
+  }
 
   @action
-  openContributorDetails(contributor) {
+  openContributorDetails (contributor) {
     this.router.transitionTo('dashboard.contributors.show', contributor);
   }
+
+  @action
+  showAllContributors () {
+    this.showToplistOnly = false;
+  }
 }
diff --git a/app/components/contributor-list/template.hbs b/app/components/contributor-list/template.hbs
index 0f105d9..e51aee0 100644
--- a/app/components/contributor-list/template.hbs
+++ b/app/components/contributor-list/template.hbs
@@ -2,7 +2,7 @@
   <thead>
   </thead>
   <tbody>
-    {{#each @contributorList as |c|}}
+    {{#each this.contributors as |c|}}
       <tr role="button"
           onclick={{action "openContributorDetails" c.contributor}}
           class="{{if (is-current-user c.contributor) "current-user"}} {{if (eq c.contributor.id @selectedContributorId) "selected"}}">
@@ -21,5 +21,12 @@
         </td>
       </tr>
     {{/each}}
+    {{#if this.showToplistOnly}}
+      <tr role="button" onclick={{action "showAllContributors"}}>
+        <td colspan="2">
+          {{this.showAllButtonText}}
+        </td>
+      </tr>
+    {{/if}}
   </tbody>
 </table>