118 lines
3.3 KiB
TypeScript
118 lines
3.3 KiB
TypeScript
import {
|
|
DotsHorizontalRounded,
|
|
Edit,
|
|
Reply,
|
|
Trash,
|
|
} from "@styled-icons/boxicons-regular";
|
|
import { observer } from "mobx-react-lite";
|
|
import { ChannelPermission } from "revolt.js";
|
|
import { Message as MessageObject } from "revolt.js/dist/maps/Messages";
|
|
import styled from "styled-components";
|
|
|
|
import { openContextMenu } from "preact-context-menu";
|
|
|
|
import { internalEmit } from "../../../../lib/eventEmitter";
|
|
|
|
import { QueuedMessage } from "../../../../mobx/stores/MessageQueue";
|
|
|
|
import {
|
|
Screen,
|
|
useIntermediate,
|
|
} from "../../../../context/intermediate/Intermediate";
|
|
import { useClient } from "../../../../context/revoltjs/RevoltClient";
|
|
|
|
import IconButton from "../../../ui/IconButton";
|
|
|
|
interface Props {
|
|
message: MessageObject;
|
|
queued?: QueuedMessage;
|
|
}
|
|
|
|
const OverlayBar = styled.div`
|
|
display: inline-flex;
|
|
position: absolute;
|
|
justify-self: end;
|
|
align-self: end;
|
|
align-content: center;
|
|
justify-content: center;
|
|
|
|
right: 0;
|
|
top: -18px;
|
|
z-index: 0;
|
|
overflow: hidden;
|
|
|
|
border-radius: 5px;
|
|
background: var(--primary-header);
|
|
border: 1px sold var(--background);
|
|
`;
|
|
|
|
const Entry = styled.div`
|
|
padding: 4px;
|
|
flex-shrink: 0;
|
|
cursor: pointer;
|
|
transition: 0.2s ease background-color;
|
|
|
|
&:hover {
|
|
background: var(--secondary-header);
|
|
}
|
|
`;
|
|
|
|
export const MessageOverlayBar = observer(({ message, queued }: Props) => {
|
|
const client = useClient();
|
|
const { openScreen } = useIntermediate();
|
|
const isAuthor = message.author_id === client.user!._id;
|
|
|
|
return (
|
|
<OverlayBar>
|
|
<Entry onClick={() => internalEmit("ReplyBar", "add", message)}>
|
|
<IconButton>
|
|
<Reply size={24} />
|
|
</IconButton>
|
|
</Entry>
|
|
{isAuthor && (
|
|
<Entry
|
|
onClick={() =>
|
|
internalEmit(
|
|
"MessageRenderer",
|
|
"edit_message",
|
|
message._id,
|
|
)
|
|
}>
|
|
<IconButton>
|
|
<Edit size={24} />
|
|
</IconButton>
|
|
</Entry>
|
|
)}
|
|
{isAuthor ||
|
|
(message.channel &&
|
|
message.channel.permission &
|
|
ChannelPermission.ManageMessages) ? (
|
|
<Entry
|
|
onClick={() =>
|
|
openScreen({
|
|
id: "special_prompt",
|
|
type: "delete_message",
|
|
target: message,
|
|
} as unknown as Screen)
|
|
}>
|
|
<IconButton>
|
|
<Trash size={24} />
|
|
</IconButton>
|
|
</Entry>
|
|
) : undefined}
|
|
<Entry
|
|
onClick={() =>
|
|
openContextMenu("Menu", {
|
|
message,
|
|
contextualChannel: message.channel_id,
|
|
queued,
|
|
})
|
|
}>
|
|
<IconButton>
|
|
<DotsHorizontalRounded size={24} />
|
|
</IconButton>
|
|
</Entry>
|
|
</OverlayBar>
|
|
);
|
|
});
|