[FR-263] Polls

src/Content/Poll/Answer.tsx

@@ -0,0 +1,43 @@
+import React from "react";
+import type { APIPollAnswer } from "discord-api-types/v10";
+import * as Styles from "./style";
+import { getEmojiUrl } from "../../utils/getEmojiUrl";
+import { t } from "i18next";
+
+interface AnswerProps {
+  answer: APIPollAnswer;
+  votes: number;
+  percentage: number;
+}
+
+export function Answer({ answer, votes, percentage }: AnswerProps) {
+  return (
+    <Styles.Answer>
+      <Styles.AnswerBar
+        style={{
+          width: `${percentage}%`,
+        }}
+      />
+      {answer.poll_media.emoji && (
+        <Styles.AnswerEmoji
+          emojiName={answer.poll_media.emoji.name ?? "Unknown"}
+          src={
+            answer.poll_media.emoji.id
+              ? getEmojiUrl({
+                  id: answer.poll_media.emoji.id,
+                  animated: answer.poll_media.emoji.animated ?? false,
+                })
+              : undefined
+          }
+        />
+      )}
+      <Styles.AnswerName>{answer.poll_media.text}</Styles.AnswerName>
+      <Styles.AnswerVotes>
+        {t("polls.n_votes", { count: votes })}
+      </Styles.AnswerVotes>
+      <Styles.AnswerPercentage>
+        {t("polls.vote_percentage", { percentage })}
+      </Styles.AnswerPercentage>
+    </Styles.Answer>
+  );
+}

src/Content/Poll/index.tsx

@@ -0,0 +1,57 @@
+import React, { useMemo } from "react";
+import type { APIPoll } from "discord-api-types/v10";
+import * as Styles from "./style";
+import { Answer } from "./Answer";
+import { t } from "i18next";
+
+interface PollProps {
+  poll: APIPoll;
+}
+
+export function Poll({ poll }: PollProps) {
+  const timeLeft =
+    (new Date(poll.expiry).getTime() - new Date().getTime()) / 1000;
+
+  const isClosed = timeLeft <= 0;
+
+  const nVotes = useMemo(() => {
+    if (!poll.results?.answer_counts) return 0;
+
+    return poll.results.answer_counts.reduce(
+      (acc, { count }) => acc + count,
+      0
+    );
+  }, [poll.results?.answer_counts]);
+
+  const voteCountsPerAnswer = poll.results?.answer_counts
+    .map((answer) => ({
+      [answer.id]: {
+        count: answer.count,
+        percentage: Math.floor((answer.count / nVotes) * 100),
+      },
+    }))
+    .reduce((acc, answer) => ({ ...acc, ...answer }), {});
+
+  return (
+    <Styles.Poll>
+      <Styles.Name>{poll.question.text}</Styles.Name>
+      <Styles.Answers>
+        {poll.answers.map((answer) => (
+          <Answer
+            key={answer.answer_id}
+            answer={answer}
+            votes={voteCountsPerAnswer?.[answer.answer_id]?.count ?? 0}
+            percentage={
+              voteCountsPerAnswer?.[answer.answer_id]?.percentage ?? 0
+            }
+          />
+        ))}
+      </Styles.Answers>
+      <Styles.Footer>
+        {t("polls.n_votes", { count: nVotes })}
+        <Styles.FooterSeparator>•</Styles.FooterSeparator>
+        {isClosed ? t("polls.closed") : t("polls.time_left", { timeLeft })}
+      </Styles.Footer>
+    </Styles.Poll>
+  );
+}

src/Content/Poll/style.ts

@@ -0,0 +1,126 @@
+import {
+  commonComponentId,
+  styled,
+  theme,
+} from "../../Stitches/stitches.config";
+import Emoji from "../../Emoji";
+
+export const Poll = styled.withConfig({
+  displayName: "poll",
+  componentId: commonComponentId,
+})("div", {
+  padding: theme.space.xxl,
+  backgroundColor: theme.colors.backgroundSecondary,
+  borderRadius: theme.radii.sm,
+  maxWidth: 440,
+  minWidth: 270,
+  width: "100%",
+  boxSizing: "border-box",
+});
+
+export const Name = styled.withConfig({
+  displayName: "name",
+  componentId: commonComponentId,
+})("span", {
+  color: theme.colors.textNormal,
+  fontSize: theme.fontSizes.l,
+  fontWeight: 500,
+});
+
+export const Answers = styled.withConfig({
+  displayName: "answers",
+  componentId: commonComponentId,
+})("div", {
+  display: "flex",
+  flexDirection: "column",
+  gap: theme.space.large,
+  marginTop: theme.space.large,
+  marginBottom: theme.space.xxl,
+});
+
+export const Answer = styled.withConfig({
+  displayName: "answer",
+  componentId: commonComponentId,
+})("div", {
+  padding: `${theme.space.large} ${theme.space.xxl}`,
+  borderRadius: theme.radii.sm,
+  backgroundColor: theme.colors.pollBackground,
+  display: "flex",
+  gap: theme.space.large,
+  flex: "1 0 auto",
+  minHeight: 50,
+  boxSizing: "border-box",
+  alignItems: "center",
+  position: "relative",
+  overflow: "hidden",
+});
+
+const ANSWER_BAR_Z_INDEX = 1;
+const ANSWER_CONTENTS_Z_INDEX = ANSWER_BAR_Z_INDEX + 1;
+
+export const AnswerBar = styled.withConfig({
+  displayName: "answer-bar",
+  componentId: commonComponentId,
+})("div", {
+  position: "absolute",
+  top: 0,
+  bottom: 0,
+  left: 0,
+  backgroundColor: theme.colors.backgroundModifier,
+  zIndex: ANSWER_BAR_Z_INDEX,
+});
+
+export const AnswerName = styled.withConfig({
+  displayName: "answer-name",
+  componentId: commonComponentId,
+})("span", {
+  color: theme.colors.textNormal,
+  fontSize: theme.fontSizes.m,
+  fontWeight: 600,
+  marginRight: "auto",
+  zIndex: ANSWER_CONTENTS_Z_INDEX,
+});
+
+export const AnswerVotes = styled.withConfig({
+  displayName: "answer-votes",
+  componentId: commonComponentId,
+})("span", {
+  color: theme.colors.primaryOpacity100,
+  fontWeight: 600,
+  fontSize: theme.fontSizes.s,
+  zIndex: ANSWER_CONTENTS_Z_INDEX,
+});
+
+export const AnswerPercentage = styled.withConfig({
+  displayName: "answer-percentage",
+  componentId: commonComponentId,
+})("span", {
+  color: theme.colors.textNormal,
+  fontWeight: 600,
+  fontSize: theme.fontSizes.l,
+  zIndex: ANSWER_CONTENTS_Z_INDEX,
+});
+
+export const AnswerEmoji = styled.withConfig({
+  displayName: "answer-emoji",
+  componentId: commonComponentId,
+})(Emoji, {
+  width: 24,
+  height: 24,
+  zIndex: ANSWER_CONTENTS_Z_INDEX,
+});
+
+export const Footer = styled.withConfig({
+  displayName: "footer",
+  componentId: commonComponentId,
+})("div", {
+  fontSize: theme.fontSizes.m,
+  color: theme.colors.textMuted,
+});
+
+export const FooterSeparator = styled.withConfig({
+  displayName: "footer-separator",
+  componentId: commonComponentId,
+})("span", {
+  margin: `0 ${theme.space.medium}`,
+});

src/Content/index.tsx

@@ -17,6 +17,7 @@ import Components from "../Message/Components";
 import getDisplayName from "../utils/getDisplayName";
 import { useTranslation } from "react-i18next";
 import type { ChatMessage } from "../types";
+import { Poll } from "./Poll";
 
 interface EditedProps {
   editedAt: string;
@@ -245,9 +246,11 @@ function Content(props: ContentProps) {
             (props.message.sticker_items?.length ?? 0) > 0 ||
             props.message.thread !== undefined ||
             props.message.embeds?.length > 0 ||
-            (props.message.components?.length ?? 0) > 0
+            (props.message.components?.length ?? 0) > 0 ||
+            props.message.poll !== undefined
           }
         >
+          {props.message.poll && <Poll poll={props.message.poll} />}
           {props.message.attachments.map((attachment) => (
             <Attachment key={attachment.url} attachment={attachment} />
           ))}

src/Message/Components/ButtonComponent.tsx

@@ -11,6 +11,7 @@ import Emoji from "../../Emoji";
 import { useConfig } from "../../core/ConfigContext";
 import ExternalLink from "../../ExternalLink";
 import type { ChatMessage } from "../../types";
+import { getEmojiUrl } from "../../utils/getEmojiUrl";
 
 const buttonStyleMap: Record<
   ButtonStyle,
@@ -52,9 +53,10 @@ function ButtonComponent({ button, message }: ButtonComponentProps) {
               emojiName={button.emoji.name}
               src={
                 button.emoji.id &&
-                `https://cdn.discordapp.com/emojis/${button.emoji.id}.${
-                  button.emoji.animated ? "gif" : "png"
-                }`
+                getEmojiUrl({
+                  id: button.emoji.id,
+                  animated: button.emoji.animated ?? false,
+                })
               }
             />
           )}
@@ -76,9 +78,10 @@ function ButtonComponent({ button, message }: ButtonComponentProps) {
             emojiName={button.emoji.name}
             src={
               button.emoji.id &&
-              `https://cdn.discordapp.com/emojis/${button.emoji.id}.${
-                button.emoji.animated ? "gif" : "png"
-              }`
+              getEmojiUrl({
+                id: button.emoji.id,
+                animated: button.emoji.animated ?? false,
+              })
             }
           />
         )}

src/Stitches/stitches.config.tsx

@@ -16,6 +16,7 @@ const stitches = createStitches({
       primaryDark: "#72767d",
       systemMessageDark: "#999999",
       textMuted: "rgb(163, 166, 170)",
+      textNormal: "rgb(219, 222, 225)",
       interactiveNormal: "#dcddde",
       accent: "#5865f2",
       background: "#36393f",
@@ -49,6 +50,8 @@ const stitches = createStitches({
       automodMatchedWord: "rgba(240, 177, 50, 0.3)",
       automodMessageBackground: "rgb(43, 45, 49)",
       automodDot: "rgba(78, 80, 88, 0.48)",
+      pollBackground: "rgba(78, 80, 88, 0.3)",
+      backgroundModifier: "rgba(77, 80, 88, 0.48)",
     },
     fonts: {
       main: "Open Sans, sans-serif",
@@ -78,6 +81,9 @@ const stitches = createStitches({
     borderWidths: {
       spines: "2px",
     },
+    radii: {
+      sm: "8px",
+    },
   },
 });