Add notification quick-filter bar in the frontend app (#9399)

* create FilterBar componer and its container, unstyled

* introduce basic styling for FilterBar

* add selection css

* allow FilterBar to display active CSS with js

* connect the FilterBar to the Redux state

* change getNotifications to use filter

* remove temporary comments

* add an option to turn the FilterBar off in settings

* fix showFilterBar data type to boolean

* fix eslint errors

* add English and Polish translations

* allowed filter bar overflow to accomodate for longer languages

* fix mispelled translation key

* add unified CSS look

* replace text in FilterBar with icons

* add tooltips

* replace text @ with an icon

* introduce simple and advanced filtering view

* add ability to toggle the advanced view

* add Polish translations

* change Advanced View description to be more clear

* make each filter flush notifications and load new ones, fixing pagination

* simplify getNotifications once frontend filtering is not needed for FilterBar

* add a semicolon

* Revert "simplify getNotifications once frontend filtering is not needed for FilterBar"

This reverts commit 9f4be7857135b0327814bd22a3e8a4e7b546f7cc.

* reset filter to 'all' when turning off FilterBar

1 files changed, 8 insertions, 0 deletions

diff --git a/app/javascript/mastodon/reducers/settings.js b/app/javascript/mastodon/reducers/settings.js
index 12bcc2583..2e1878cf7 100644
--- a/app/javascript/mastodon/reducers/settings.js
+++ b/app/javascript/mastodon/reducers/settings.js
@@ -1,4 +1,5 @@
 import { SETTING_CHANGE, SETTING_SAVE } from '../actions/settings';
+import { NOTIFICATIONS_FILTER_SET } from '../actions/notifications';
 import { COLUMN_ADD, COLUMN_REMOVE, COLUMN_MOVE, COLUMN_PARAMS_CHANGE } from '../actions/columns';
 import { STORE_HYDRATE } from '../actions/store';
 import { EMOJI_USE } from '../actions/emojis';
@@ -32,6 +33,12 @@ const initialState = ImmutableMap({
       mention: true,
     }),
 
+    quickFilter: ImmutableMap({
+      active: 'all',
+      show: true,
+      advanced: false,
+    }),
+
     shows: ImmutableMap({
       follow: true,
       favourite: true,
@@ -112,6 +119,7 @@ export default function settings(state = initialState, action) {
   switch(action.type) {
   case STORE_HYDRATE:
     return hydrate(state, action.state.get('settings'));
+  case NOTIFICATIONS_FILTER_SET:
   case SETTING_CHANGE:
     return state
       .setIn(action.path, action.value)