diff --git a/app/gabsocial/features/status/components/status_interaction_bar.js b/app/gabsocial/features/status/components/status_interaction_bar.js
new file mode 100644
index 000000000..9ce614253
--- /dev/null
+++ b/app/gabsocial/features/status/components/status_interaction_bar.js
@@ -0,0 +1,47 @@
+import React from 'react';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import emojify from 'gabsocial/features/emoji/emoji';
+
+// https://emojipedia.org/facebook/
+const ALLOWED_EMOJI = [
+ '👍',
+ '❤️',
+ '😂',
+ '😯',
+ '😢',
+ '😡',
+];
+
+export class StatusInteractionBar extends React.Component {
+
+ propTypes = {
+ status: ImmutablePropTypes.map,
+ }
+
+ sortEmoji = emojiReacts => (
+ emojiReacts // TODO: Sort
+ );
+
+ mergeEmoji = emojiReacts => (
+ emojiReacts // TODO: Merge similar emoji
+ );
+
+ filterEmoji = emojiReacts => (
+ emojiReacts.filter(emojiReact => (
+ ALLOWED_EMOJI.includes(emojiReact.get('name'))
+ )))
+
+ render() {
+ const { status } = this.props;
+ const emojiReacts = status.getIn(['pleroma', 'emoji_reactions']);
+
+ return (
+ <>
+ {this.filterEmoji(emojiReacts).map(e =>
+
+ )}
+ >
+ );
+ }
+
+}
diff --git a/app/gabsocial/features/status/index.js b/app/gabsocial/features/status/index.js
index 4b9fc2436..424dda420 100644
--- a/app/gabsocial/features/status/index.js
+++ b/app/gabsocial/features/status/index.js
@@ -43,6 +43,7 @@ import { attachFullscreenListener, detachFullscreenListener, isFullscreen } from
import { textForScreenReader, defaultMediaVisibility } from '../../components/status';
import Icon from 'gabsocial/components/icon';
import { getSettings } from 'gabsocial/actions/settings';
+import { StatusInteractionBar } from './components/status_interaction_bar';
const messages = defineMessages({
deleteConfirm: { id: 'confirmations.delete.confirm', defaultMessage: 'Delete' },
@@ -492,6 +493,8 @@ class Status extends ImmutablePureComponent {
onToggleMediaVisibility={this.handleToggleMediaVisibility}
/>
+
+