Improve announcements design (#12954)

* Move announcements above scroll container; add button to temporarily hide them

* Remove interface for dismissing announcements

* Display number of unread announcements

* Count unread announcements accurately

* Fix size of announcement box not fitting the currently displayed announcement

* Fix announcement box background color to match button color

1 files changed, 22 insertions, 6 deletions

diff --git a/app/javascript/mastodon/reducers/announcements.js b/app/javascript/mastodon/reducers/announcements.js
index aa674e516..1cfb598fb 100644
--- a/app/javascript/mastodon/reducers/announcements.js
+++ b/app/javascript/mastodon/reducers/announcements.js
@@ -3,18 +3,20 @@ import {
   ANNOUNCEMENTS_FETCH_SUCCESS,
   ANNOUNCEMENTS_FETCH_FAIL,
   ANNOUNCEMENTS_UPDATE,
-  ANNOUNCEMENTS_DISMISS,
   ANNOUNCEMENTS_REACTION_UPDATE,
   ANNOUNCEMENTS_REACTION_ADD_REQUEST,
   ANNOUNCEMENTS_REACTION_ADD_FAIL,
   ANNOUNCEMENTS_REACTION_REMOVE_REQUEST,
   ANNOUNCEMENTS_REACTION_REMOVE_FAIL,
+  ANNOUNCEMENTS_TOGGLE_SHOW,
 } from '../actions/announcements';
-import { Map as ImmutableMap, List as ImmutableList, fromJS } from 'immutable';
+import { Map as ImmutableMap, List as ImmutableList, Set as ImmutableSet, fromJS } from 'immutable';
 
 const initialState = ImmutableMap({
   items: ImmutableList(),
   isLoading: false,
+  show: true,
+  unread: ImmutableSet(),
 });
 
 const updateReaction = (state, id, name, updater) => state.update('items', list => list.map(announcement => {
@@ -43,21 +45,35 @@ const addReaction = (state, id, name) => updateReaction(state, id, name, x => x.
 
 const removeReaction = (state, id, name) => updateReaction(state, id, name, x => x.set('me', false).update('count', y => y - 1));
 
+const addUnread = (state, items) => {
+  if (state.get('show')) return state;
+
+  const newIds = ImmutableSet(items.map(x => x.get('id')));
+  const oldIds = ImmutableSet(state.get('items').map(x => x.get('id')));
+  return state.update('unread', unread => unread.union(newIds.subtract(oldIds)));
+};
+
 export default function announcementsReducer(state = initialState, action) {
   switch(action.type) {
+  case ANNOUNCEMENTS_TOGGLE_SHOW:
+    return state.withMutations(map => {
+      if (!map.get('show')) map.set('unread', ImmutableSet());
+      map.set('show', !map.get('show'));
+    });
   case ANNOUNCEMENTS_FETCH_REQUEST:
     return state.set('isLoading', true);
   case ANNOUNCEMENTS_FETCH_SUCCESS:
     return state.withMutations(map => {
-      map.set('items', fromJS(action.announcements));
+      const items = fromJS(action.announcements);
+      map.set('unread', ImmutableSet());
+      addUnread(map, items);
+      map.set('items', items);
       map.set('isLoading', false);
     });
   case ANNOUNCEMENTS_FETCH_FAIL:
     return state.set('isLoading', false);
   case ANNOUNCEMENTS_UPDATE:
-    return state.update('items', list => list.unshift(fromJS(action.announcement)).sortBy(announcement => announcement.get('starts_at')));
-  case ANNOUNCEMENTS_DISMISS:
-    return state.update('items', list => list.filterNot(announcement => announcement.get('id') === action.id));
+    return addUnread(state, [fromJS(action.announcement)]).update('items', list => list.unshift(fromJS(action.announcement)).sortBy(announcement => announcement.get('starts_at')));
   case ANNOUNCEMENTS_REACTION_UPDATE:
     return updateReactionCount(state, action.reaction);
   case ANNOUNCEMENTS_REACTION_ADD_REQUEST: