From c6185017be4a6512b8aae64771ee02f40927f55a Mon Sep 17 00:00:00 2001
From: Djordje Vlaisavljevic <dzvlais@gmail.com>
Date: Thu, 2 Mar 2023 20:06:00 +0000
Subject: [PATCH] Added mentions widget empty state

refs https://github.com/TryGhost/Team/issues/2608
---
 ghost/admin/app/styles/layouts/dashboard.css | 17 +++++++++----
 ghost/admin/app/templates/dashboard.hbs      | 25 +++++++++++---------
 2 files changed, 26 insertions(+), 16 deletions(-)

diff --git a/ghost/admin/app/styles/layouts/dashboard.css b/ghost/admin/app/styles/layouts/dashboard.css
index f80d1a0a0f..414e1c6e81 100644
--- a/ghost/admin/app/styles/layouts/dashboard.css
+++ b/ghost/admin/app/styles/layouts/dashboard.css
@@ -2627,7 +2627,7 @@ Dashboard Mentions */
 .gh-dashboard-mentions {
     min-width: 300px;
     max-width: 400px;
-    padding: 20px;
+    padding-bottom: 20px;
 }
 
 .gh-dashboard-mentions-header {
@@ -2635,9 +2635,9 @@ Dashboard Mentions */
     align-items: center;
     justify-content: space-between;
     line-height: 1;
-    margin-bottom: 16px;
-    border-bottom: 1px solid var(--whitegrey);
     padding-bottom: 16px;
+    border-bottom: 1px solid var(--whitegrey);
+    margin: 20px 20px 16px 20px;
 }
 
 .gh-dashboard-mentions {
@@ -2677,12 +2677,15 @@ Dashboard Mentions */
     align-items: flex-start; */
     /* display: grid; */
     display: block;
-    padding: 4px 0;
-    padding: 6px 0;
+    padding: 6px 20px;
     font-size: 1.4rem;
     line-height: 1.2;
 }
 
+.gh-dashboard-mention:hover {
+    background: color-mod(var(--whitegrey) a(60%) s(-12%));
+}
+
 .gh-dashboard-mention-content {
     width: 100%;
     display: grid;
@@ -2729,4 +2732,8 @@ Dashboard Mentions */
 
 .gh-dashboard-mentions .gh-dashboard-list-footer {
     margin-top: auto;
+}
+
+.gh-dashboard-mentions .gh-mentions-list-cta {
+    padding: 20px;
 }
\ No newline at end of file
diff --git a/ghost/admin/app/templates/dashboard.hbs b/ghost/admin/app/templates/dashboard.hbs
index feb4e7a7b0..1b769fc5f2 100644
--- a/ghost/admin/app/templates/dashboard.hbs
+++ b/ghost/admin/app/templates/dashboard.hbs
@@ -9,8 +9,6 @@
                 <div class="gh-dashboard-select">
                     <div {{did-insert this.loadMentions}}>
                         {{#if (feature 'webmentions')}}
-                        {{!-- Mentions widget using a GhBasicDropdown component --}}
-
                         <GhBasicDropdown @horizontalPosition="right" @verticalPosition="below" @onOpen={{this.markMentionsRead}} as |dropdown|>
                             <dropdown.Trigger class="outline-0 pointer">
                                 <button type="button" class="gh-dashboard-mentions-icon">
@@ -24,32 +22,37 @@
 
                             <dropdown.Content class="gh-dashboard-mentions-container">
                                 <div class="gh-dashboard-mentions">
-                                    <div class="gh-dashboard-mentions-header">
-                                        <h2 class="gh-dashboard-mentions-heading">Mentions</h2>
-                                        <LinkTo @route="mentions" class="gh-dashboard-mentions-see-all">View all mentions &rarr;</LinkTo>
-                                    </div>
+                                    {{#if this.mentions}}
+                                        <div class="gh-dashboard-mentions-header">
+                                            <h2 class="gh-dashboard-mentions-heading">Mentions</h2>
+                                            <LinkTo @route="mentions" class="gh-dashboard-mentions-see-all">View all mentions &rarr;</LinkTo>
+                                        </div>
+                                    {{/if}}
                                     <div>
                                         {{#if this.mentions}}
                                             {{#each this.mentions as |mention|}}
                                                 <a href="{{mention.source}}" class="gh-dashboard-mention" rel="noreferrer noopener" target="_blank">
                                                     <div class="gh-dashboard-mention-content">
-                                                        <img src="{{ or mention.sourceFavicon 'assets/img/orb-squircle.png'}}" alt="{{mention.sourceSiteTitle}}" class="w5 h5 mr2 flex-shrink-0">
-                                                        <span class="gh-dashboard-mention-title">{{or mention.sourceSiteTitle mention.sourceSiteTitle}}</span>
-                                                        {{!-- <span>mentioned</span> --}}
+                                                        <img src="{{mention.sourceFavicon}}" alt="{{mention.sourceSiteTitle}}" class="w5 h5 mr2 flex-shrink-0">
+                                                        <span class="gh-dashboard-mention-title">{{or mention.sourceSiteTitle mention.sourceTitle}}</span>
                                                         <div class="gh-mention-link-icon">
                                                             {{svg-jar "twitter-link"}}
                                                         </div>
                                                         {{#if (gt mention.mentions.length 1) }}
                                                             <span class="gh-dashboard-mention-target">{{mention.mentions.length}} links</span>
                                                         {{else}}
-                                                            <span class="gh-dashboard-mention-target">{{if mention.resource mention.resource.name 'a link'}}</span>
+                                                            <span class="gh-dashboard-mention-target">{{if mention.resource mention.resource.name mention.target}}</span>
                                                         {{/if}}
                                                         <span class="gh-dashboard-mention-timestamp">{{moment-from-now mention.timestamp}}</span>
                                                     </div>
                                                 </a>
                                             {{/each}}
                                         {{else}}
-                                        Empty state
+                                            <div class="gh-mentions-list-cta">
+                                                {{svg-jar "email-love-letter" class="love-letter"}}
+                                                <h4>No mentions yet</h4>
+                                                <p>When other sites mention your posts or pages, they'll appear here.</p>
+                                            </div>
                                         {{/if}}
                                     </div>
                                 </div>