Add silent message badge and polls by Antouto · Pull Request #86 · discohook/discohook

Antouto · 2026-04-19T15:56:17Z

Before:

After:

Antouto · 2026-04-20T19:38:00Z

Adds polls to the editor and preview 😁
I'll leave flows, restore command, share links, backups, code gen etc. up to you.

Antouto · 2026-04-20T19:44:55Z

shayypy · 2026-04-22T16:00:49Z

Don't have time to review yet but would it be possible for you to split polls into a separate PR since they require extra work?
Looks great so far though!

shayypy

For some reason my git client is checking out 84 when I try to check out 86, so I can't actually make any changes myself right now, but these are the things I noticed while looking this over on GH

shayypy · 2026-04-24T14:38:15Z

+          <span className="truncate">
+            {`Answer ${index + 1}`}
+            {previewText ? ` - ${previewText}` : ""}
+          </span>


This should be localized: react, i18n

shayypy · 2026-04-24T14:41:04Z

+          <p className="truncate">
+            Poll
+            {previewText ? ` - ${previewText}` : ""}
+          </p>


Should also be localized, see comment on answer component

shayypy · 2026-04-24T14:41:30Z

+        <div className="space-y-2">
+          {disabled && (
+            <InfoBox severity="blue" icon="Info">
+              Polls cannot be edited for existing messages.


Suggested change

Polls cannot be edited for existing messages.

{t("pollsImmutable")}

Add to i18n

shayypy · 2026-04-24T14:43:09Z

+          {disabled && (
+            <InfoBox severity="blue" icon="Info">
+              Polls cannot be edited for existing messages.
+            </InfoBox>
+          )}


Suggested change

{disabled && (

<InfoBox severity="blue" icon="Info">

Polls cannot be edited for existing messages.

</InfoBox>

)}

{disabled ? (

<InfoBox severity="blue" icon="Info">

Polls cannot be edited for existing messages.

</InfoBox>

) : null}

I prefer to use a ternary operator these days but it's not a huge deal since disabled is a bool

shayypy · 2026-04-24T14:46:23Z

+                  const answers = [...poll.answers];
+                  answers.splice(index, 1, updatedAnswer);
+                  updatePoll({ ...poll, answers });


Not sure if the double spread is necessary. You aren't duplicating poll (otherwise you'd use structuredClone) so I think just the one spread in updatePoll would be fine, splicing the original array to update the answer, unless I do something else in another example. Ditto for the other callbacks here of course

shayypy · 2026-04-24T15:00:33Z

+    return (
+      <img
+        src={cdn.emoji(emoji.id, emoji.animated ? "gif" : "webp")}
+        className="h-[22px] w-[22px] shrink-0 object-contain"


Suggested change

className="h-[22px] w-[22px] shrink-0 object-contain"

className="size-[22px] shrink-0 object-contain"

shayypy · 2026-04-24T15:00:48Z

+    return (
+      <Twemoji
+        emoji={emoji.name}
+        className="h-[22px] w-[22px] shrink-0 align-middle"


Suggested change

className="h-[22px] w-[22px] shrink-0 align-middle"

className="size-[22px] shrink-0 align-middle"

shayypy · 2026-04-24T15:01:27Z

+        {poll.question.text}
+      </h4>
+      <div className="mt-1 text-muted dark:text-muted-dark text-[14px]">
+        Select one answer


Suggested change

Select one answer

{t("selectOneAnswer")}

shayypy · 2026-04-24T15:01:52Z

+  poll: NonNullable<QueryData["messages"][number]["data"]["poll"]>;
+}> = ({ poll }) => {


Suggested change

poll: NonNullable<QueryData["messages"][number]["data"]["poll"]>;

}> = ({ poll }) => {

t: TFunction;

poll: NonNullable<QueryData["messages"][number]["data"]["poll"]>;

}> = ({ t, poll }) => {

It would probably be fine to call useTranslation in this component but I think I usually simply pass it to preview components like this

shayypy · 2026-04-24T15:07:13Z

+          <div className="text-[#28282d] dark:text-[#fbfbfb] hover:underline cursor-pointer">
+            0 votes
+          </div>
+          <div className="before:mx-2 before:text-[20px] before:leading-none before:content-['\2219'] text-muted dark:text-muted-dark" />
+          <div className="text-muted dark:text-muted-dark">
+            {poll.duration ?? 24}h left
+          </div>
+        </div>
+        <div className="flex items-center gap-4">
+          <div className="text-[#28282d] dark:text-[#fbfbfb] hover:underline cursor-pointer text-[14px]">
+            Show results
+          </div>
+          <Button disabled>Vote</Button>


Suggested change

<div className="text-[#28282d] dark:text-[#fbfbfb] hover:underline cursor-pointer">

0 votes

</div>

<div className="before:mx-2 before:text-[20px] before:leading-none before:content-['\2219'] text-muted dark:text-muted-dark" />

<div className="text-muted dark:text-muted-dark">

{poll.duration ?? 24}h left

</div>

</div>

<div className="flex items-center gap-4">

<div className="text-[#28282d] dark:text-[#fbfbfb] hover:underline cursor-pointer text-[14px]">

Show results

</div>

<Button disabled>Vote</Button>

<div className="text-[#28282d] dark:text-[#fbfbfb] hover:underline cursor-pointer">

{t("nVotes", { count: 0 })}

</div>

<div className="before:mx-2 before:text-[20px] before:leading-none before:content-['\2219'] text-muted dark:text-muted-dark" />

<div className="text-muted dark:text-muted-dark">

{t("pollDurationLeft", { values: { hours: poll.duration ?? 24 } })}

</div>

</div>

<div className="flex items-center gap-4">

<div className="text-[#28282d] dark:text-[#fbfbfb] hover:underline cursor-pointer text-[14px]">

{t("showResults")}

</div>

<Button disabled>{t("vote")}</Button>

Polls in Discord actually change the unit based on the amount of time remaining and do not only show hours. I'd like to do that here as well, a la timestamp.relative.*

The localization w/ count for a constant 0 votes might seem weird but I'd rather it be more "realistic" so to speak. Also, I may implement a feature to fetch vote data for the preview, so we want a real localized count there.

shayypy · 2026-04-24T15:12:58Z

Another thing, don't bother with splitting polls into a new PR, I'll just merge this and then mark it as an experiment so I can keep working on it.

Antouto added 4 commits April 19, 2026 17:55

Add silent message badge

77d575f

Add poll

ef7e687

Prevent poll from being edited

cd59b9d

Fix light mode styles

b08c5ab

Antouto changed the title ~~Add silent message badge~~ Add silent message badge and polls Apr 20, 2026

Add answer emojis in preview

8b88710

shayypy requested changes Apr 24, 2026

View reviewed changes

Merge branch 'main' into main

1fd5a5a

	Polls cannot be edited for existing messages.
	{t("pollsImmutable")}

	className="h-[22px] w-[22px] shrink-0 object-contain"
	className="size-[22px] shrink-0 object-contain"

	className="h-[22px] w-[22px] shrink-0 align-middle"
	className="size-[22px] shrink-0 align-middle"

		poll: NonNullable<QueryData["messages"][number]["data"]["poll"]>;
		}> = ({ poll }) => {

Conversation

Antouto commented Apr 19, 2026

Uh oh!

Antouto commented Apr 20, 2026

Uh oh!

Antouto commented Apr 20, 2026

Uh oh!

shayypy commented Apr 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

shayypy left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

shayypy commented Apr 24, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

shayypy commented Apr 22, 2026 •

edited

Loading