From 1c85e84b4e7da5ab0a0f22b742fb0ec9a72c1499 Mon Sep 17 00:00:00 2001
From: ThibG <thib@sitedethib.com>
Date: Sat, 25 Jan 2020 18:19:24 +0100
Subject: [PATCH 1/2] Fix spurious error and incorrect state change when adding
 a reaction twice (#12957)

* Fix spurious error and incorrect state change when adding a reaction twice

* Remove superfluous top border for announcements box
---
 .../mastodon/actions/announcements.js         | 21 ++++++++++++++++---
 .../styles/mastodon/components.scss           |  1 -
 2 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/app/javascript/mastodon/actions/announcements.js b/app/javascript/mastodon/actions/announcements.js
index 64bf5ef91b..53b19a6fda 100644
--- a/app/javascript/mastodon/actions/announcements.js
+++ b/app/javascript/mastodon/actions/announcements.js
@@ -56,12 +56,27 @@ export const updateAnnouncements = announcement => ({
 });
 
 export const addReaction = (announcementId, name) => (dispatch, getState) => {
-  dispatch(addReactionRequest(announcementId, name));
+  const announcement = getState().getIn(['announcements', 'items']).find(x => x.get('id') === announcementId);
+
+  let alreadyAdded = false;
+
+  if (announcement) {
+    const reaction = announcement.get('reactions').find(x => x.get('name') === name);
+    if (reaction && reaction.get('me')) {
+      alreadyAdded = true;
+    }
+  }
+
+  if (!alreadyAdded) {
+    dispatch(addReactionRequest(announcementId, name, alreadyAdded));
+  }
 
   api(getState).put(`/api/v1/announcements/${announcementId}/reactions/${name}`).then(() => {
-    dispatch(addReactionSuccess(announcementId, name));
+    dispatch(addReactionSuccess(announcementId, name, alreadyAdded));
   }).catch(err => {
-    dispatch(addReactionFail(announcementId, name, err));
+    if (!alreadyAdded) {
+      dispatch(addReactionFail(announcementId, name, err));
+    }
   });
 };
 
diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
index e4fafc091a..6946971cdc 100644
--- a/app/javascript/styles/mastodon/components.scss
+++ b/app/javascript/styles/mastodon/components.scss
@@ -6632,7 +6632,6 @@ noscript {
 
 .announcements {
   background: lighten($ui-base-color, 8%);
-  border-top: 1px solid $ui-base-color;
   font-size: 13px;
   display: flex;
   align-items: flex-end;

From 234f1be486916124e9f991ec6702d3338eb3289d Mon Sep 17 00:00:00 2001
From: ThibG <thib@sitedethib.com>
Date: Sat, 25 Jan 2020 19:40:36 +0100
Subject: [PATCH 2/2] =?UTF-8?q?Fix=20=E2=80=9Cnew=20items=20glow=E2=80=9D?=
 =?UTF-8?q?=20being=20displayed=20above=20settings=20and=20announcements?=
 =?UTF-8?q?=20(#12958)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../mastodon/components/column_header.js           |  5 ++++-
 .../mastodon/features/home_timeline/index.js       |  3 +--
 app/javascript/styles/mastodon/components.scss     | 14 +++++++++++---
 3 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/app/javascript/mastodon/components/column_header.js b/app/javascript/mastodon/components/column_header.js
index 0038995c8b..ea82f9ef9d 100644
--- a/app/javascript/mastodon/components/column_header.js
+++ b/app/javascript/mastodon/components/column_header.js
@@ -33,6 +33,7 @@ class ColumnHeader extends React.PureComponent {
     onPin: PropTypes.func,
     onMove: PropTypes.func,
     onClick: PropTypes.func,
+    appendContent: PropTypes.node,
   };
 
   state = {
@@ -81,7 +82,7 @@ class ColumnHeader extends React.PureComponent {
   }
 
   render () {
-    const { title, icon, active, children, pinned, multiColumn, extraButton, showBackButton, intl: { formatMessage }, placeholder } = this.props;
+    const { title, icon, active, children, pinned, multiColumn, extraButton, showBackButton, intl: { formatMessage }, placeholder, appendContent } = this.props;
     const { collapsed, animating } = this.state;
 
     const wrapperClassName = classNames('column-header__wrapper', {
@@ -172,6 +173,8 @@ class ColumnHeader extends React.PureComponent {
             {(!collapsed || animating) && collapsedContent}
           </div>
         </div>
+
+        {appendContent}
       </div>
     );
 
diff --git a/app/javascript/mastodon/features/home_timeline/index.js b/app/javascript/mastodon/features/home_timeline/index.js
index c7de8c9cbf..2bad22bc1d 100644
--- a/app/javascript/mastodon/features/home_timeline/index.js
+++ b/app/javascript/mastodon/features/home_timeline/index.js
@@ -143,12 +143,11 @@ class HomeTimeline extends React.PureComponent {
           pinned={pinned}
           multiColumn={multiColumn}
           extraButton={announcementsButton}
+          appendContent={hasAnnouncements && showAnnouncements && <AnnouncementsContainer />}
         >
           <ColumnSettingsContainer />
         </ColumnHeader>
 
-        {hasAnnouncements && showAnnouncements && <AnnouncementsContainer />}
-
         <StatusListContainer
           trackScroll={!pinned}
           scrollKey={`home_timeline-${columnId}`}
diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
index 6946971cdc..7edd0ba149 100644
--- a/app/javascript/styles/mastodon/components.scss
+++ b/app/javascript/styles/mastodon/components.scss
@@ -3224,13 +3224,16 @@ a.status-card.compact:hover {
 .column-header__wrapper {
   position: relative;
   flex: 0 0 auto;
+  z-index: 1;
 
   &.active {
+    box-shadow: 0 1px 0 rgba($highlight-text-color, 0.3);
+
     &::before {
       display: block;
       content: "";
       position: absolute;
-      top: 35px;
+      bottom: -13px;
       left: 0;
       right: 0;
       margin: 0 auto;
@@ -3241,6 +3244,11 @@ a.status-card.compact:hover {
       background: radial-gradient(ellipse, rgba($ui-highlight-color, 0.23) 0%, rgba($ui-highlight-color, 0) 60%);
     }
   }
+
+  .announcements {
+    z-index: 1;
+    position: relative;
+  }
 }
 
 .column-header {
@@ -3273,8 +3281,6 @@ a.status-card.compact:hover {
   }
 
   &.active {
-    box-shadow: 0 1px 0 rgba($highlight-text-color, 0.3);
-
     .column-header__icon {
       color: $highlight-text-color;
       text-shadow: 0 0 10px rgba($highlight-text-color, 0.4);
@@ -3330,6 +3336,8 @@ a.status-card.compact:hover {
   color: $darker-text-color;
   transition: max-height 150ms ease-in-out, opacity 300ms linear;
   opacity: 1;
+  z-index: 1;
+  position: relative;
 
   &.collapsed {
     max-height: 0;