FEATURE: adds a filter for all/unread/read on user's notifications page (#9535)

app/assets/javascripts/select-kit/components/notifications-filter.js

@@ -0,0 +1,25 @@
+import DropdownSelectBoxComponent from "select-kit/components/dropdown-select-box";
+import { computed } from "@ember/object";
+
+export default DropdownSelectBoxComponent.extend({
+  classNames: ["notifications-filter"],
+  content: computed(function() {
+    return [
+      {
+        id: "all",
+        label: I18n.t("user.user_notifications.filters.all")
+      },
+      {
+        id: "read",
+        label: I18n.t("user.user_notifications.filters.read")
+      },
+      {
+        id: "unread",
+        label: I18n.t("user.user_notifications.filters.unread")
+      }
+    ];
+  }),
+  selectKitOptions: {
+    headerComponent: "notifications-filter/notifications-filter-header"
+  }
+});

app/assets/javascripts/select-kit/components/notifications-filter/notifications-filter-header.js

@@ -0,0 +1,18 @@
+import DropdownSelectBoxHeaderComponent from "select-kit/components/dropdown-select-box/dropdown-select-box-header";
+import discourseComputed from "discourse-common/utils/decorators";
+
+export default DropdownSelectBoxHeaderComponent.extend({
+  layoutName:
+    "select-kit/templates/components/notifications-filter/notifications-filter-header",
+  classNames: ["notifications-filter-header"],
+
+  @discourseComputed("value")
+  label(value) {
+    return `user.user_notifications.filters.${value}`;
+  },
+
+  @discourseComputed("selectKit.isExpanded")
+  caretIcon(isExpanded) {
+    return isExpanded ? "caret-up" : "caret-down";
+  }
+});

app/assets/javascripts/select-kit/templates/components/notifications-filter/notifications-filter-header.hbs

@@ -0,0 +1,7 @@
+<label class="filter-text">
+  {{i18n "user.user_notifications.filters.filter_by"}}
+</label>
+<label class="header-text">
+  {{i18n label}}
+</label>
+{{d-icon caretIcon class="caret-icon"}}