Updated mentions dashboard widget design

refs https://github.com/TryGhost/Team/issues/2481

ghost/admin/app/components/dashboard/charts/mentions.hbs

@@ -0,0 +1,26 @@
+<section class="gh-dashboard-section gh-dashboard-mentions" {{did-insert this.loadData}}>
+    <article class="gh-dashboard-box">
+            {{#if (feature 'webmentions')}}
+                {{!-- Recent mentions --}}
+                <h3 class="gh-dashboard-mentions-header">Mentions</h3>
+                <div class="gh-dashboard-mentions-list">
+                    {{#if this.mentions}}
+                        {{#each this.mentions as |mention|}}
+                            <a href="{{mention.source}}" class="gh-dashboard-mention" rel="noreferrer noopener" target="_blank">
+                                <img src="{{mention.sourceFavicon}}" alt="{{mention.sourceSiteTitle}}" class="w5 h5 mr2 flex-shrink-0" />
+                                <span class="gh-dashboard-mention-title">{{if mention.sourceTitle mention.sourceTitle mention.source}}</span>
+                                <span class="gh-dashboard-mention-timestamp">{{moment-from-now mention.timestamp}}</span>
+                            </a>
+                        {{/each}}
+                    {{else}}
+                        <div>
+                            <p>No mentions yet.</p>
+                        </div>
+                    {{/if}}
+                </div>
+                <div class="gh-dashboard-list-footer">
+                    <LinkTo @route="mentions">View all mentions &rarr;</LinkTo>
+                </div>
+            {{/if}}
+    </article>
+</section>

ghost/admin/app/components/dashboard/charts/mentions.js

@@ -0,0 +1,16 @@
+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 Recents extends Component {
+    @service store;
+    @service dashboardStats;
+
+    @tracked mentions = [];
+
+    @action 
+    async loadData() {
+        this.mentions = await this.store.query('mention', {limit: 4, order: 'created_at desc'});
+    }
+}

ghost/admin/app/components/dashboard/charts/recents.hbs

@@ -11,12 +11,6 @@
                         @label="Member activity" />
                 </button>
             {{/if}}
-            {{#if (feature 'webmentions')}}
-                <button type="button" class="gh-dashboard-tab {{if this.mentionsTabSelected 'is-selected'}}" {{on "click" this.changeTabToMentions}}>
-                    <Dashboard::Parts::Metric
-                        @label="Mentions" />
-                </button>
-            {{/if}}
         </div>
         {{#if this.postsTabSelected}}
             <div class="gh-dashboard-recents-posts gh-dashboard-list {{unless this.areNewslettersEnabled 'is-single'}}">
@@ -138,48 +132,6 @@
                     <LinkTo @route="members-activity" @query={{reset-query-params "members-activity"}}>View all member activity &rarr;</LinkTo>
                 </div>
             </div>
-        {{else}}
-            {{#if (feature 'webmentions')}}
-                {{!-- Recent mentions --}}
-                <div class="gh-dashboard-recents-mentions gh-dashboard-list">
-                    <div class="gh-dashboard-list-header">
-                        <div class="gh-dashboard-list-title">Publication</div>
-                        <div class="gh-dashboard-list-title">Mentioned</div>
-                        <div class="gh-dashboard-list-title">Time</div>
-                    </div>
-                    <div class="gh-dashboard-list-body">
-                        {{#if this.mentions}}
-                            {{#each this.mentions as |mention|}}
-                                <a href="#" class="gh-dashboard-list-item permalink">
-                                    <div class="gh-dashboard-list-item-sub">
-                                        <img src="{{mention.sourceFavicon}}" alt="{{mention.sourceSiteTitle}}" class="w5 h5 mr2 flex-shrink-0" />
-                                        <span class="gh-dashboard-list-text">{{if mention.sourceSiteTitle mention.sourceSiteTitle mention.source}}</span>
-                                    </div>
-                                    <div class="gh-dashboard-list-item-sub">
-                                        <span class="gh-dashboard-list-subtext gh-dashboard-recent-mentioned">
-                                            {{#if mention.resource}}
-                                                {{mention.resource.name}}
-                                            {{else}}
-                                                {{mention.target}}
-                                            {{/if}}
-                                        </span>
-                                    </div>
-                                    <div class="gh-dashboard-list-item-sub gh-dashboard-list gh-dashboard-list-item-date">
-                                        <span class="gh-dashboard-list-subtext" title={{gh-format-post-time mention.timestamp}}>{{moment-from-now mention.timestamp}}</span>
-                                    </div>
-                                </a>
-                            {{/each}}
-                        {{else}}
-                            <div class="gh-dashboard-list-empty">
-                                <p>No mentions yet.</p>
-                            </div>
-                        {{/if}}
-                    </div>
-                    <div class="gh-dashboard-list-footer">
-                        <LinkTo @route="mentions">View all mentions &rarr;</LinkTo>
-                    </div>
-                </div>
-            {{/if}}
         {{/if}}
     </article>
 </section>

ghost/admin/app/styles/layouts/dashboard.css

@@ -2561,3 +2561,63 @@ Dashboard No Data */
     font-size: 1.3rem;
     margin-bottom: 46px;
 }
+
+/* ---------------------------------
+Dashboard Mentions */
+
+.gh-dashboard-mentions {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+}
+
+.gh-dashboard-mentions-list {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-evenly;
+}
+
+.gh-dashboard-mentions-header {
+    font-size: 1.55rem;
+    font-weight: 700;
+    line-height: 1em;
+    margin: 0 0 8px;
+    padding: 0;
+    color: var(--darkgrey);
+    white-space: nowrap;
+    letter-spacing: -.3px;
+}
+
+.gh-dashboard-mention {
+    display: grid;
+    grid-template-columns: 20px auto;
+    grid-template-rows: 20px auto;
+    grid-column-gap: 8px;
+    padding: 4px 0;
+    flex-direction: column;
+    padding: 10px 0;
+}
+
+.gh-dashboard-mention-title {
+    color: var(--darkgrey);
+    font-size: 1.5rem;
+    font-weight: 600;
+    line-height: 1.3;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+
+.gh-dashboard-mention-timestamp {
+    color: var(--midlightgrey);
+    font-size: 1.3rem;
+    font-weight: 500;
+    padding-left: 28px;
+    white-space: nowrap;
+}
+
+.gh-dashboard-mentions .gh-dashboard-list-footer {
+    margin-top: auto;
+}

ghost/admin/app/templates/dashboard.hbs

@@ -71,7 +71,10 @@
                     </div>
                 {{/if}}
 
-                <Dashboard::Charts::Recents />
+                <div class="{{if (feature 'webmentions') "gh-dashboard-split"}}">
+                    <Dashboard::Charts::Recents />
+                    <Dashboard::Charts::Mentions />
+                </div>
 
                 <div class="gh-dashboard-split gh-dashboard-box is-secondary">
                     <Dashboard::Resources::Resources />