feat(poll): improve poll card and dialog UI by DorraJaouad · Pull Request #16137 · nextcloud/spreed

DorraJaouad · 2025-10-12T19:54:30Z

☑️ Resolves

It may not be obvious for users if the poll is anonymous nor if it is multiple choice (only after trying to select more)
It is hard to visually detect if the poll is open.

Improvement for upstream lib regarding NcChip: nextcloud-libraries/nextcloud-vue#7652

add variant prop values to showcase success, warningm error state like we have for other components
It lacks inline end space

⚠️ A problem: due to the fact that we don't have a trigger to update poll data (someone voted) when poll is anonymous, moderators are not able to see the number of voters until they reload.

🖌️ UI Checklist

🖼️ Screenshots / Screencasts

🏚️ Not voted	🏡 voted	🏁 closed

🏁 Checklist

src/components/MessagesList/MessagesGroup/Message/MessagePart/PollCard.vue

src/components/PollViewer/PollViewer.vue

Antreesy

Otherwise ok

src/components/MessagesList/MessagesGroup/Message/MessagePart/PollCard.vue

Antreesy · 2025-11-20T16:16:07Z

src/components/MessagesList/MessagesGroup/Message/MessagePart/PollCard.vue

 		},
+
+		showPollStatus() {
+			return this.poll && Object.keys(this.poll).length > 0 && this.poll.status !== POLL.STATUS.DRAFT


Suggested change

return this.poll && Object.keys(this.poll).length > 0 && this.poll.status !== POLL.STATUS.DRAFT

return this.poll?.status && this.poll.status !== POLL.STATUS.DRAFT

I'm still thinking this can be done better. this.poll can not be an empty object {} to capture this case, and poll status is a mandatory field. Maybe

Suggested change

return this.poll && Object.keys(this.poll).length > 0 && this.poll.status !== POLL.STATUS.DRAFT

return this.poll && this.poll.status !== POLL.STATUS.DRAFT

src/components/MessagesList/MessagesGroup/Message/MessagePart/PollCard.vue

src/components/PollViewer/PollViewer.vue

Antreesy

First commit has some comments, otherwise fine.

Second commit is good, I would even backport to 33 (after fixing votedSelf issue)

src/components/MessagesList/MessagesGroup/Message/MessagePart/PollCard.vue

Antreesy · 2026-02-10T10:15:32Z

src/components/MessagesList/MessagesGroup/Message/MessagePart/PollCard.vue

 		overflow-wrap: anywhere;

 		&--draft {
+			display: flex;


Something went off here

Current As before

Still needs align-items: center;

src/components/MessagesList/MessagesGroup/Message/MessagePart/PollCard.vue

src/components/PollViewer/PollViewer.vue

Signed-off-by: Dorra Jaouad <dorra.jaoued7@gmail.com>

Antreesy · 2026-02-16T15:14:15Z

src/stores/polls.ts

-			this.polls[token][poll.id] = poll
+
+			if (this.polls[token][poll.id]) {
+				Object.assign(this.polls[token][poll.id], poll)


Not sure it's going to work well with Pinia internals. Better would be to:

// Some comment on why it's needed e.g. for chat-relay this.polls[token][poll.id] = Object.assign({}, this.polls[token][poll.id], poll)

Antreesy · 2026-02-16T15:18:34Z

src/store/messagesStore.js

-					context.dispatch('updateConversationLastMessage', { token, lastMessage: message })
+				if (fromRealtime) {
+					const pollsStore = usePollsStore()
+					if (message.poll?.id) {


It's going to complain later at TS

Suggested change

if (message.poll?.id) {

if ('poll' in message && message.poll.id) {

Antreesy · 2026-02-16T15:18:57Z

src/store/messagesStore.js

-				token,
-				pollId: message.messageParameters.poll.id,
-			})
+			if (message.poll?.id) {


It's going to complain later at TS

Suggested change

if (message.poll?.id) {

if ('poll' in message && message.poll.id) {

Antreesy · 2026-02-16T15:26:54Z

src/components/MessagesList/MessagesGroup/Message/MessagePart/PollCard.vue

 		pollFooterText() {
-			if (this.poll?.status === POLL.STATUS.OPEN) {
+			if (this.isPollOpen) {
 				return this.poll?.votedSelf.length > 0


consider that it's also used three times, I'd also move it to separate computed for perf and readability:

Suggested change

return this.poll?.votedSelf.length > 0

selfHasVoted() {

return this.poll?.votedSelf?.length > 0

},

Antreesy · 2026-02-16T15:40:03Z

src/components/MessagesList/MessagesGroup/Message/MessagePart/PollCard.vue

 		},
+
+		showPollStatus() {
+			return this.poll && Object.keys(this.poll).length > 0 && this.poll.status !== POLL.STATUS.DRAFT


I'm still thinking this can be done better. this.poll can not be an empty object {} to capture this case, and poll status is a mandatory field. Maybe

Suggested change

return this.poll && Object.keys(this.poll).length > 0 && this.poll.status !== POLL.STATUS.DRAFT

return this.poll && this.poll.status !== POLL.STATUS.DRAFT

Antreesy · 2026-02-16T15:43:08Z

src/components/MessagesList/MessagesGroup/Message/MessagePart/PollCard.vue

 		overflow-wrap: anywhere;

 		&--draft {
+			display: flex;


Still needs align-items: center;

Antreesy · 2026-02-16T15:48:58Z

src/components/PollViewer/PollViewer.vue

 			return calculateVotePercentage(votes, this.poll.numVoters)
 		},
+
+		pollImportance() {


Nitpick: is it really important? Maybe we can go with more neutral pollChipVariant?

DorraJaouad added this to the 🍏 Next Major (33) milestone Oct 12, 2025

DorraJaouad requested review from Antreesy and nimishavijay October 12, 2025 19:54

DorraJaouad self-assigned this Oct 12, 2025

DorraJaouad added enhancement feature: frontend 🖌️ "Web UI" client feature: polls 📊 labels Oct 12, 2025

This comment was marked as resolved.

Sign in to view

DorraJaouad mentioned this pull request Oct 14, 2025

feat(NcChip): add error, success and warning variants nextcloud-libraries/nextcloud-vue#7652

Merged

3 tasks

Antreesy reviewed Oct 20, 2025

View reviewed changes

DorraJaouad force-pushed the feat/noid/enhance-poll-layout branch from 2f7924b to 966f993 Compare October 21, 2025 08:58

DorraJaouad force-pushed the feat/noid/enhance-poll-layout branch from 966f993 to 3aebb75 Compare November 20, 2025 15:05

DorraJaouad requested a review from Antreesy November 20, 2025 15:07

Antreesy reviewed Nov 20, 2025

View reviewed changes

This comment was marked as resolved.

Sign in to view

nickvergessen modified the milestones: v23.0.0-beta.1, 🍏 Next Beta (33), v23.0.0-beta.2, 🍏 Next RC (33) Jan 9, 2026

nickvergessen modified the milestones: v23.0.0-rc.1, 🏖️ Next Major (34) Jan 22, 2026

DorraJaouad force-pushed the feat/noid/enhance-poll-layout branch 2 times, most recently from a8501ed to 8eb3ce1 Compare February 4, 2026 07:56

DorraJaouad mentioned this pull request Feb 5, 2026

[FOLLOW-UP] Additional message processing from chat-relay #16630

Open

8 tasks

Antreesy reviewed Feb 10, 2026

View reviewed changes

DorraJaouad added 3 commits February 11, 2026 09:16

feat(poll): improve poll card and dialog UI

f4730fe

Signed-off-by: Dorra Jaouad <dorra.jaoued7@gmail.com>

fix(Polls): reduce server requests to fetch poll data

5c7d1d5

Signed-off-by: Dorra Jaouad <dorra.jaoued7@gmail.com>

fixup! feat(poll): improve poll card and dialog UI

cd97ec1

fixup! fix(Polls): reduce server requests to fetch poll data

0cbf6d5

DorraJaouad force-pushed the feat/noid/enhance-poll-layout branch from 8eb3ce1 to 0cbf6d5 Compare February 11, 2026 08:49

Antreesy reviewed Feb 16, 2026

View reviewed changes

	return this.poll && Object.keys(this.poll).length > 0 && this.poll.status !== POLL.STATUS.DRAFT
	return this.poll?.status && this.poll.status !== POLL.STATUS.DRAFT

	return this.poll && Object.keys(this.poll).length > 0 && this.poll.status !== POLL.STATUS.DRAFT
	return this.poll && this.poll.status !== POLL.STATUS.DRAFT

	if (message.poll?.id) {
	if ('poll' in message && message.poll.id) {

-				return this.poll?.votedSelf.length > 0
+			selfHasVoted() {
+				return this.poll?.votedSelf?.length > 0
+			},

Comments

Conversation

DorraJaouad commented Oct 12, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

☑️ Resolves

🖌️ UI Checklist

🖼️ Screenshots / Screencasts

🏁 Checklist

Uh oh!

This comment was marked as resolved.

This comment was marked as resolved.

Uh oh!

This comment was marked as resolved.

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Antreesy left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

This comment was marked as resolved.

Antreesy left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

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!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

DorraJaouad commented Oct 12, 2025 •

edited

Loading

Antreesy left a comment •

edited

Loading