Improve authors view with changesets and ordering

src/paths/index/components/changes/AuthorItem.js

@@ -7,11 +7,15 @@ export default class AuthorItem extends LitElement {
           /** Colors and variables **/
           :host {
             --item-border-color: #fcfcfa;
+            --changes-type-color-hover: #2862cd;
+            --changes-type-color-active: #2054b5;
           }
 
           @media (prefers-color-scheme: dark) {
             :host {
               --item-border-color: #0d1117;
+              --changes-type-color-hover: #5b87de;
+              --changes-type-color-active: #6b9aea;
             }
           }
 
@@ -31,7 +35,9 @@ export default class AuthorItem extends LitElement {
           }
 
           :host .item-title {
-            display: inline-block;
+            display: inline-flex;
+            align-items: center;
+            gap: 8px;
             font-size: 20px;
             margin-top: 6px;
             margin-bottom: 12px;
@@ -42,6 +48,14 @@ export default class AuthorItem extends LitElement {
             word-break: break-word;
           }
 
+          :host .item-title-avatar {
+            background-size: cover;
+            border-radius: 4px;
+            display: inline-block;
+            width: 20px;
+            height: 20px;
+          }
+
           :host .item-meta {
             color: var(--dimmed-font-color);
             display: flex;
@@ -51,11 +65,50 @@ export default class AuthorItem extends LitElement {
             font-size: 13px;
           }
 
+          :host .item-changes-types {
+            display: flex;
+            flex-direction: row;
+            gap: 16px;
+          }
+
+          :host .item-changes-type {
+            color: var(--light-font-color);
+            cursor: pointer;
+          }
+          :host .item-changes-type:hover {
+            color: var(--link-font-color-hover);
+          }
+          :host .item-changes-type.item-changes--active {
+            color: var(--changes-type-color-active);
+            text-decoration: underline;
+          }
+          :host .item-changes-type.item-changes--active:hover {
+            color: var(--changes-type-color-hover);
+          }
+
+          :host .item-changes-list {
+            display: none;
+            padding-left: 20px;
+          }
+          :host .item-changes-list.item-changes--active {
+            display: block;
+          }
+
+          :host .item-changes-link:before {
+            content: "[";
+            color: var(--dimmed-font-color);
+          }
+          :host .item-changes-link:after {
+            content: "]";
+            color: var(--dimmed-font-color);
+          }
+
           :host .item-links {
             display: flex;
             flex-direction: column;
             gap: 2px;
             text-align: right;
+            white-space: nowrap;
           }
 
           @media only screen and (max-width: 900px) {
@@ -82,18 +135,93 @@ export default class AuthorItem extends LitElement {
 
     @property({ type: String, reflect: true }) id = '';
     @property({ type: String }) user = '';
+    @property({ type: String }) avatar = '';
+
+    @property({ type: Array }) commits = [];
+    @property({ type: Array }) pulls = [];
 
     @property({ type: String }) repository = '';
 
+    constructor() {
+        super();
+
+        this._changesMode = "commits";
+    }
+
+    _onModeClicked(type) {
+        if (type === this._changesMode) {
+            return;
+        }
+
+        this._changesMode = type;
+        this.requestUpdate();
+    }
+
     render(){
         return html`
             <div class="item-container">
                 <div class="item-title">
+                    <span
+                        class="item-title-avatar"
+                        style="background-image: url('${this.avatar}')"
+                    ></span>
                     <span class="item-title-name">${this.user}</span>
                 </div>
 
                 <div class="item-meta">
-                    <div></div>
+                    <div class="item-changes">
+                        <div class="item-changes-types">
+                            <span
+                                class="item-changes-type ${(this._changesMode === "commits" ? "item-changes--active" : "")}"
+                                @click="${this._onModeClicked.bind(this, "commits")}"
+                            >
+                                ${this.commits.length} ${(this.commits.length === 1 ? "commit" : "commits")}
+                            </span>
+                            <span
+                                class="item-changes-type ${(this._changesMode === "pulls" ? "item-changes--active" : "")}"
+                                @click="${this._onModeClicked.bind(this, "pulls")}"
+                            >
+                                ${this.pulls.length} ${(this.pulls.length === 1 ? "PR" : "PRs")}
+                            </span>
+                        </div>
+                        <ul class="item-changes-list ${(this._changesMode === "commits" ? "item-changes--active" : "")}">
+                            ${this.commits.map((item) => {
+                                return html`
+                                    <li>
+                                        <code>
+                                            <a
+                                                class="item-changes-link"
+                                                href="https://github.com/${this.repository}/commit/${item.hash}"
+                                                target="_blank"
+                                            >${item.hash.substring(0, 9)}</a>
+                                        </code>
+                                        <span>
+                                            ${item.summary}
+                                        </span>
+                                    </li>
+                                `;
+                            })}
+                        </ul>
+                        <ul class="item-changes-list ${(this._changesMode === "pulls" ? "item-changes--active" : "")}">
+                            ${this.pulls.map((item) => {
+                                return html`
+                                    <li>
+                                        <code>
+                                            <a
+                                                class="item-changes-link"
+                                                href="https://github.com/${this.repository}/pull/${item.public_id}"
+                                                target="_blank"
+                                            >GH-${item.public_id}</a>
+                                        </code>
+                                        <span>
+                                            ${item.title}
+                                        </span>
+                                    </li>
+                                `;
+                            })}
+                        </ul>
+                    </div>
+
                     <div class="item-links">
                         <div>
                             <span>${this.user} </span>

src/paths/index/components/changes/ChangesList.js

@@ -125,6 +125,17 @@ export default class ChangesList extends LitElement {
                 this._appendPull(pull);
             }
         });
+
+        this._filtered_authors.sort((a, b) => {
+            // Sort by contributions first (DESC).
+            if (a.commits.length > b.commits.length) return -1;
+            if (a.commits.length < b.commits.length) return 1;
+            // Then sort by name (ASC).
+            if (a.author.user > b.author.user) return 1;
+            if (a.author.user < b.author.user) return -1;
+
+            return 0;
+        });
     }
 
     _appendCommit(commit, originalCommit) {
@@ -142,7 +153,7 @@ export default class ChangesList extends LitElement {
         filteredCommit.authors = this._getAuthors(authorIds);
 
         this._filtered_commits.push(filteredCommit);
-        this._appendAuthors(filteredCommit.authors);
+        this._appendAuthors(filteredCommit.authors, commit);
     }
 
     _appendPull(pull) {
@@ -165,17 +176,17 @@ export default class ChangesList extends LitElement {
         filteredPull.authors = this._getAuthors(authorIds);
 
         this._filtered_pulls.push(filteredPull);
-        this._appendAuthors(filteredPull.authors);
+        this._appendAuthors(filteredPull.authors, null, pull);
     }
 
-    _appendAuthors(authors) {
+    _appendAuthors(authors, commit = null, pull = null) {
         authors.forEach((item) => {
-            this._appendAuthor(item);
+            this._appendAuthor(item, commit, pull);
         });
     }
 
-    _appendAuthor(author) {
-        const existing = this._filtered_authors.find((item) => {
+    _appendAuthor(author, commit = null, pull = null) {
+        let existing = this._filtered_authors.find((item) => {
             return item.author === author;
         });
 
@@ -187,6 +198,14 @@ export default class ChangesList extends LitElement {
             }
 
             this._filtered_authors.push(filteredAuthor);
+            existing = filteredAuthor;
+        }
+
+        if (commit) {
+            existing.commits.push(commit);
+        }
+        if (pull && existing.pulls.indexOf(pull) < 0) {
+            existing.pulls.push(pull);
         }
     }
 
@@ -301,6 +320,9 @@ export default class ChangesList extends LitElement {
                         <gr-author-item
                             .id="${author.id}"
                             .user="${author.user}"
+                            .avatar="${author.avatar}"
+                            .commits="${item.commits}"
+                            .pulls="${item.pulls}"
                             .repository="${this.selectedRepository}"
                         />
                     `;