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