Merge branch 'develop' into 'public-favourites'

# Conflicts:
#   app/soapbox/features/favourited_statuses/index.js

app/soapbox/components/__tests__/__snapshots__/autosuggest_emoji-test.js.snap

@@ -20,7 +20,11 @@ exports[`<AutosuggestEmoji /> renders native emoji 1`] = `
   <img
     alt="💙"
     className="emojione"
-    src="/emoji/1f499.svg"
+    src={
+      Object {
+        "process": [Function],
+      }
+    }
   />
   :foobar:
 </div>

app/soapbox/components/__tests__/__snapshots__/emoji_selector-test.js.snap

@@ -15,7 +15,7 @@ exports[`<EmojiSelector /> renders correctly 1`] = `
       className="emoji-react-selector__emoji"
       dangerouslySetInnerHTML={
         Object {
-          "__html": "<img draggable=\\"false\\" class=\\"emojione\\" alt=\\"👍\\" title=\\":+1:\\" src=\\"/emoji/1f44d.svg\\" />",
+          "__html": "<img draggable=\\"false\\" class=\\"emojione\\" alt=\\"👍\\" title=\\":+1:\\" src=\\"[object Object]\\" />",
         }
       }
       onClick={[Function]}
@@ -26,7 +26,7 @@ exports[`<EmojiSelector /> renders correctly 1`] = `
       className="emoji-react-selector__emoji"
       dangerouslySetInnerHTML={
         Object {
-          "__html": "<img draggable=\\"false\\" class=\\"emojione\\" alt=\\"❤\\" title=\\":heart:\\" src=\\"/emoji/2764.svg\\" />",
+          "__html": "<img draggable=\\"false\\" class=\\"emojione\\" alt=\\"❤\\" title=\\":heart:\\" src=\\"[object Object]\\" />",
         }
       }
       onClick={[Function]}
@@ -37,7 +37,7 @@ exports[`<EmojiSelector /> renders correctly 1`] = `
       className="emoji-react-selector__emoji"
       dangerouslySetInnerHTML={
         Object {
-          "__html": "<img draggable=\\"false\\" class=\\"emojione\\" alt=\\"😆\\" title=\\":laughing:\\" src=\\"/emoji/1f606.svg\\" />",
+          "__html": "<img draggable=\\"false\\" class=\\"emojione\\" alt=\\"😆\\" title=\\":laughing:\\" src=\\"[object Object]\\" />",
         }
       }
       onClick={[Function]}
@@ -48,7 +48,7 @@ exports[`<EmojiSelector /> renders correctly 1`] = `
       className="emoji-react-selector__emoji"
       dangerouslySetInnerHTML={
         Object {
-          "__html": "<img draggable=\\"false\\" class=\\"emojione\\" alt=\\"😮\\" title=\\":open_mouth:\\" src=\\"/emoji/1f62e.svg\\" />",
+          "__html": "<img draggable=\\"false\\" class=\\"emojione\\" alt=\\"😮\\" title=\\":open_mouth:\\" src=\\"[object Object]\\" />",
         }
       }
       onClick={[Function]}
@@ -59,7 +59,7 @@ exports[`<EmojiSelector /> renders correctly 1`] = `
       className="emoji-react-selector__emoji"
       dangerouslySetInnerHTML={
         Object {
-          "__html": "<img draggable=\\"false\\" class=\\"emojione\\" alt=\\"😢\\" title=\\":cry:\\" src=\\"/emoji/1f622.svg\\" />",
+          "__html": "<img draggable=\\"false\\" class=\\"emojione\\" alt=\\"😢\\" title=\\":cry:\\" src=\\"[object Object]\\" />",
         }
       }
       onClick={[Function]}
@@ -70,7 +70,7 @@ exports[`<EmojiSelector /> renders correctly 1`] = `
       className="emoji-react-selector__emoji"
       dangerouslySetInnerHTML={
         Object {
-          "__html": "<img draggable=\\"false\\" class=\\"emojione\\" alt=\\"😩\\" title=\\":weary:\\" src=\\"/emoji/1f629.svg\\" />",
+          "__html": "<img draggable=\\"false\\" class=\\"emojione\\" alt=\\"😩\\" title=\\":weary:\\" src=\\"[object Object]\\" />",
         }
       }
       onClick={[Function]}

app/styles/accounts.scss

@@ -216,6 +216,13 @@
 .account__avatar-wrapper {
   float: left;
   margin-right: 12px;
+
+  .emoji-react__emoji {
+    position: absolute;
+    top: 36px;
+    left: 32px;
+    z-index: 1;
+  }
 }
 
 .account__avatar {

app/styles/components/emoji-reacts.scss

@@ -1,6 +1,8 @@
 .emoji-react {
   display: inline-block;
   transition: 0.1s;
+  color: var(--primary-text-color--faint);
+  text-decoration: none;
 
   &__emoji {
     img {
@@ -20,8 +22,6 @@
 }
 
 .emoji-react--reblogs {
-  color: var(--primary-text-color--faint);
-  text-decoration: none;
   vertical-align: middle;
   display: inline-flex;
 

app/styles/ui.scss

@@ -613,7 +613,8 @@
 
 .notification__filter-bar,
 .search__filter-bar,
-.account__section-headline {
+.account__section-headline,
+.reaction__filter-bar {
   border-bottom: 1px solid var(--brand-color--faint);
   cursor: default;
   display: flex;
@@ -663,6 +664,17 @@
   }
 }
 
+.reaction__filter-bar {
+  overflow-x: auto;
+  overflow-y: hidden;
+
+  a {
+    flex: unset;
+    padding: 15px 24px;
+    min-width: max-content;
+  }
+}
+
 ::-webkit-scrollbar-thumb {
   border-radius: 0;
 }

package.json

@@ -92,6 +92,7 @@
     "intl-messageformat-parser": "^6.0.0",
     "intl-pluralrules": "^1.3.0",
     "is-nan": "^1.2.1",
+    "jest-transform-stub": "^2.0.0",
     "jsdoc": "~3.6.7",
     "lodash": "^4.7.11",
     "mark-loader": "^0.1.6",

yarn.lock

@@ -7239,6 +7239,11 @@ jest-snapshot@^27.1.0:
     pretty-format "^27.1.0"
     semver "^7.3.2"
 
+jest-transform-stub@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/jest-transform-stub/-/jest-transform-stub-2.0.0.tgz#19018b0851f7568972147a5d60074b55f0225a7d"
+  integrity sha512-lspHaCRx/mBbnm3h4uMMS3R5aZzMwyNpNIJLXj4cEsV0mIUtS4IjYJLSoyjRCtnxb6RIGJ4NL2quZzfIeNhbkg==
+
 jest-util@^27.0.0:
   version "27.0.6"
   resolved "https://registry.yarnpkg.com/jest-util/-/jest-util-27.0.6.tgz#e8e04eec159de2f4d5f57f795df9cdc091e50297"