Show voters of option

CHANGELOG.md

@@ -8,6 +8,7 @@ All notable changes to this project will be documented in this file.
 ## [unreleased]
 ### Added
  - Show locale date as tooltip for relative date time information
+ - Add popover to counter to show voters by answer
 
 ## [8.5.0] - 2025-10-03
 ### Fixed

src/components/Options/Counter.vue

@@ -11,6 +11,8 @@ import CheckboxMarkedOutlinedIcon from 'vue-material-design-icons/CheckboxMarked
 import { usePollStore } from '../../stores/poll'
 
 import type { Option } from '../../stores/options.types'
+import VotersList from '../VoteTable/VotersList.vue'
+import { NcPopover } from '@nextcloud/vue'
 
 const pollStore = usePollStore()
 interface Props {
@@ -19,25 +21,33 @@ interface Props {
 }
 
 const { option, showMaybe = false } = defineProps<Props>()
+const showList =
+	pollStore.permissions.seeResults && pollStore.permissions.seeUsernames
 </script>
 
 <template>
 	<div v-if="option.confirmed && pollStore.status.isExpired" class="counter">
 		<CheckboxMarkedOutlinedIcon :size="20" />
 	</div>
 	<div v-else class="counter">
-		<div class="yes">
-			<YesCounterIcon
-				fill-color="var(--color-polls-foreground-yes)"
-				:size="20" />
-			<span>{{ option.votes.yes }}</span>
-		</div>
-		<div v-show="showMaybe" class="maybe">
-			<MaybeCounterIcon
-				fill-color="var(--color-polls-foreground-maybe)"
-				:size="20" />
-			<span>{{ option.votes.maybe }}</span>
-		</div>
+		<NcPopover no-focus-trap class="yes">
+			<template #trigger>
+				<YesCounterIcon
+					fill-color="var(--color-polls-foreground-yes)"
+					:size="20" />
+				<span>{{ option.votes.yes }}</span>
+			</template>
+			<VotersList v-if="showList" :option="option" answer-filter="yes" />
+		</NcPopover>
+		<NcPopover v-show="showMaybe" no-focus-trap class="maybe">
+			<template #trigger>
+				<MaybeCounterIcon
+					fill-color="var(--color-polls-foreground-maybe)"
+					:size="20" />
+				<span>{{ option.votes.maybe }}</span>
+			</template>
+			<VotersList v-if="showList" :option="option" answer-filter="maybe" />
+		</NcPopover>
 	</div>
 </template>
 

src/components/User/UserItem.vue

@@ -21,6 +21,7 @@ interface Props {
 	tag?: string
 	virtualUserType?: VirtualUserItemType
 	user?: User
+	itemStyle?: Record<string, string | number>
 }
 
 const {
@@ -32,6 +33,7 @@ const {
 	tag = 'div',
 	virtualUserType,
 	user = createDefault<User>(),
+	itemStyle = {},
 } = defineProps<Props>()
 
 const computedRoleType = computed<UserType | VirtualUserItemType>(
@@ -105,7 +107,7 @@ const componentClass = computed(() => [
 </script>
 
 <template>
-	<component :is="tag" :class="componentClass">
+	<component :is="tag" :class="componentClass" :style="itemStyle">
 		<div class="avatar-wrapper">
 			<UserAvatar
 				v-bind="$attrs"

src/components/VoteTable/VoteTable.vue

@@ -143,7 +143,9 @@ function isVotable(participant: User, option: Option) {
 					confirmed: option.confirmed && pollStore.status.isExpired,
 				}"
 				:sticky-top="pollStore.viewMode === 'table-view'"
-				:activate-bottom-shadow="!downPage">
+				:activate-bottom-shadow="
+					pollStore.viewMode === 'table-view' && !downPage
+				">
 				<OptionItem :option="option" />
 			</StickyDiv>
 
@@ -156,7 +158,6 @@ function isVotable(participant: User, option: Option) {
 				}"
 				:show-maybe="pollStore.configuration.allowMaybe"
 				:option="option" />
-
 			<div
 				v-for="participant in votesStore.chunkedParticipants"
 				:key="participant.id"
@@ -193,6 +194,9 @@ function isVotable(participant: User, option: Option) {
 	margin: auto;
 	& > div {
 		border-inline-start: 1px solid var(--color-border);
+		&.participant {
+			border-inline-start: none;
+		}
 	}
 	.vote-cell {
 		padding: 0.4rem;

src/components/VoteTable/VotersList.vue

@@ -0,0 +1,97 @@
+<!--
+  - SPDX-FileCopyrightText: 2018 Nextcloud contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import { useVotesStore } from '../../stores/votes'
+
+import type { Option } from '../../stores/options.types'
+import UserItem from '../User/UserItem.vue'
+import { t } from '@nextcloud/l10n'
+
+interface Props {
+	option: Option
+	answerFilter: 'yes' | 'maybe' | 'no' | '' | null
+}
+
+const { option, answerFilter = null } = defineProps<Props>()
+
+const votesStore = useVotesStore()
+
+const voters = computed(() =>
+	votesStore.getVotersByOptionAndAnswer({
+		optionText: option.text,
+		answer: answerFilter,
+	}),
+)
+</script>
+
+<template>
+	<div v-if="voters.length === 0" class="no-voters">
+		<strong>{{ t('polls', 'No voters') }}</strong>
+	</div>
+	<div v-else class="voters-grid">
+		<UserItem
+			v-for="(voter, index) in voters"
+			:key="voter.id"
+			condensed
+			:user="voter"
+			:item-style="{ '--i': index }" />
+	</div>
+	<strong v-if="voters.length > 4" class="more-voters">
+		+{{ voters.length - 4 }} {{ t('polls', 'more') }}
+	</strong>
+</template>
+
+<style lang="scss">
+.voters-grid {
+	--step: 16px;
+	display: grid;
+	grid-template-columns: repeat(4, auto);
+	padding-inline-end: calc(2 * var(--step));
+
+	.user-item {
+		grid-column: 1/2;
+		grid-row: 1/2;
+		translate: calc(var(--i, 0) * var(--step)) 0;
+
+		&:nth-child(n + 5) {
+			display: none;
+		}
+
+		.user-item__name {
+			display: none;
+		}
+	}
+
+	&:hover {
+		padding-inline-end: 0;
+		.user-item {
+			grid-column: auto;
+			grid-row: auto;
+			--step: 0;
+
+			&:nth-child(n + 5) {
+				display: flex;
+			}
+
+			.user-item__name {
+				display: initial;
+			}
+		}
+
+		.more-voters {
+			display: none;
+		}
+	}
+}
+
+.no-voters,
+.more-voters {
+	text-align: center;
+	padding: 1rem;
+}
+</style>

src/stores/votes.ts

@@ -214,6 +214,32 @@ export const useVotesStore = defineStore('votes', {
 			return this.votes.filter((vote) => vote.answer === answer).length
 		},
 
+		getVotersByOptionAndAnswer(payload: {
+			optionText: string
+			answer: Answer | null
+		}): User[] {
+			const matchingAnswer = payload.answer
+				? [payload.answer]
+				: ['yes', 'maybe', 'no']
+
+			return this.votes
+				.filter(
+					(vote) =>
+						vote.optionText === payload.optionText
+						&& matchingAnswer.includes(vote.answer),
+				)
+				.map((vote) => vote.user)
+				.sort((aUser, bUser) => {
+					if (aUser.displayName < bUser.displayName) {
+						return -1
+					}
+					if (aUser.displayName > bUser.displayName) {
+						return 1
+					}
+					return 0
+				})
+		},
+
 		getVote(payload: { user: User; option: Option }): Vote {
 			const found = this.sortedVotes.find(
 				(vote: Vote) =>