UX: Improve copy when no results in bookmarks and notifications quick access panel (#12820)

app/assets/javascripts/discourse/app/widgets/quick-access-bookmarks.js

@@ -1,23 +1,42 @@
+import RawHtml from "discourse/widgets/raw-html";
+import { iconHTML } from "discourse-common/lib/icon-library";
 import QuickAccessPanel from "discourse/widgets/quick-access-panel";
 import UserAction from "discourse/models/user-action";
 import { ajax } from "discourse/lib/ajax";
-import { createWidgetFrom } from "discourse/widgets/widget";
+import { createWidget, createWidgetFrom } from "discourse/widgets/widget";
 import { h } from "virtual-dom";
 import { postUrl } from "discourse/lib/utilities";
+import I18n from "I18n";
 
 const ICON = "bookmark";
 
+createWidget("no-quick-access-bookmarks", {
+  html() {
+    return h("div.empty-state", [
+      h("span.empty-state-title", I18n.t("user.no_bookmarks_title")),
+      h(
+        "div.empty-state-body",
+        new RawHtml({
+          html:
+            "<p>" +
+            I18n.t("user.no_bookmarks_body", {
+              icon: iconHTML(ICON),
+            }).htmlSafe() +
+            "</p>",
+        })
+      ),
+    ]);
+  },
+});
+
 createWidgetFrom(QuickAccessPanel, "quick-access-bookmarks", {
   buildKey: () => "quick-access-bookmarks",
+  emptyStateWidget: "no-quick-access-bookmarks",
 
   showAllHref() {
     return `${this.attrs.path}/activity/bookmarks`;
   },
 
-  emptyStatePlaceholderItem() {
-    return h("li.read", this.state.emptyStatePlaceholderItemText);
-  },
-
   findNewItems() {
     return this.loadBookmarksWithReminders();
   },
@@ -48,12 +67,6 @@ createWidgetFrom(QuickAccessPanel, "quick-access-bookmarks", {
       cache: "false",
     }).then((result) => {
       result = result.user_bookmark_list;
-
-      // The empty state help text for bookmarks page is localized on the
-      // server.
-      if (result.no_results_help) {
-        this.state.emptyStatePlaceholderItemText = result.no_results_help;
-      }
       return result.bookmarks;
     });
   },
@@ -66,10 +79,7 @@ createWidgetFrom(QuickAccessPanel, "quick-access-bookmarks", {
         filter: UserAction.TYPES.bookmarks,
         no_results_help_key: "user_activity.no_bookmarks",
       },
-    }).then(({ user_actions, no_results_help }) => {
+    }).then(({ user_actions }) => {
-      // The empty state help text for bookmarks page is localized on the
-      // server.
-      this.state.emptyStatePlaceholderItemText = no_results_help;
       return user_actions;
     });
   },

app/assets/javascripts/discourse/app/widgets/quick-access-notifications.js

@@ -1,10 +1,37 @@
+import RawHtml from "discourse/widgets/raw-html";
+import { iconHTML } from "discourse-common/lib/icon-library";
+import getURL from "discourse-common/lib/get-url";
 import QuickAccessPanel from "discourse/widgets/quick-access-panel";
 import { ajax } from "discourse/lib/ajax";
-import { createWidgetFrom } from "discourse/widgets/widget";
+import { createWidget, createWidgetFrom } from "discourse/widgets/widget";
+import { h } from "virtual-dom";
+import I18n from "I18n";
+
+const ICON = "bell";
+
+createWidget("no-quick-access-notifications", {
+  html() {
+    return h("div.empty-state", [
+      h("span.empty-state-title", I18n.t("user.no_notifications_title")),
+      h(
+        "div.empty-state-body",
+        new RawHtml({
+          html:
+            "<p>" +
+            I18n.t("user.no_notifications_body", {
+              preferencesUrl: getURL("/my/preferences/notifications"),
+              icon: iconHTML(ICON),
+            }).htmlSafe() +
+            "</p>",
+        })
+      ),
+    ]);
+  },
+});
 
 createWidgetFrom(QuickAccessPanel, "quick-access-notifications", {
   buildKey: () => "quick-access-notifications",
-  emptyStatePlaceholderItemKey: "notifications.empty",
+  emptyStateWidget: "no-quick-access-notifications",
 
   buildAttributes() {
     return { tabindex: -1 };

config/locales/client.en.yml

@@ -1021,6 +1021,14 @@ en:
       no_messages_body: >
         Need to have a direct personal conversation with someone, outside the normal conversational flow? Message them by selecting their avatar and using the %{icon} message button.<br><br>
         If you need help, you can <a href='%{aboutUrl}'>message a staff member</a>.
+      no_bookmarks_title: "You haven’t bookmarked anything yet"
+      no_bookmarks_body: >
+        Start bookmarking posts with the %{icon} button and they will be listed here for easy reference. You can schedule a reminder too!
+      no_notifications_title: "You don’t have any notifications yet"
+      no_notifications_body: >
+        You will be notified in this panel about activity relevant to you, including replies to topics you are watching and when someone <b>@mentions</b> you or responds to you. Notifications will be sent to your email when you haven’t logged in for a while.
+        <br><br>
+        You are in control! Look for the %{icon} button throughout the site to decide which specific topics, categories and tags you want to watch, track or mute. More options available in your <a href='%{preferencesUrl}'>user preferences</a>.
       first_notification: "Your first notification! Select it to begin."
       dynamic_favicon: "Show counts on browser icon"
       skip_new_user_tips: