diff --git a/src/components/common/messaging/attachments/Reactions.tsx b/src/components/common/messaging/attachments/Reactions.tsx
index 10abd2e6..9d8f0471 100644
--- a/src/components/common/messaging/attachments/Reactions.tsx
+++ b/src/components/common/messaging/attachments/Reactions.tsx
@@ -4,12 +4,15 @@ import {
shift,
useFloating,
} from "@floating-ui/react-dom-interactions";
+import { Plus } from "@styled-icons/boxicons-regular";
import { observer } from "mobx-react-lite";
import { Message } from "revolt.js";
import styled, { css } from "styled-components";
import { createPortal } from "preact/compat";
-import { useCallback, useRef } from "preact/hooks";
+import { useCallback, useRef, useState } from "preact/hooks";
+
+import { IconButton } from "@revoltchat/ui";
import { emojiDictionary } from "../../../../assets/emojis";
import { useClient } from "../../../../controllers/client/ClientController";
@@ -29,6 +32,14 @@ const List = styled.div`
flex-wrap: wrap;
margin-top: 0.2em;
align-items: center;
+
+ .add {
+ display: none;
+ }
+
+ &:hover .add {
+ display: grid;
+ }
`;
/**
@@ -79,6 +90,7 @@ const Reaction = styled.div<{ active: boolean }>`
*/
export const Reactions = observer(({ message }: Props) => {
const client = useClient();
+ const [showPicker, setPicker] = useState(false);
/**
* Render individual reaction entries
@@ -137,6 +149,16 @@ export const Reactions = observer(({ message }: Props) => {
{Array.from(optional, (id) => (
))}
+ {message.channel?.havePermission("React") && (
+
+
+
+
+
+ )}
);
});