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

@@ -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;
+  }
 }

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>