From 72f2f7984582c5c5bac49b78b556686896e4c682 Mon Sep 17 00:00:00 2001
From: dartcafe <github@dartcafe.de>
Date: Sun, 5 Oct 2025 14:48:10 +0200
Subject: [PATCH 1/4] initial attempt

Signed-off-by: dartcafe <github@dartcafe.de>
---
 src/components/Options/Counter.vue      | 32 +++++----
 src/components/User/UserItem.vue        |  4 +-
 src/components/VoteTable/VoteTable.vue  |  8 ++-
 src/components/VoteTable/VotersList.vue | 96 +++++++++++++++++++++++++
 src/stores/votes.ts                     | 26 +++++++
 5 files changed, 151 insertions(+), 15 deletions(-)
 create mode 100644 src/components/VoteTable/VotersList.vue

diff --git a/src/components/Options/Counter.vue b/src/components/Options/Counter.vue
index 78b8f91835..66f0b0ebf2 100644
--- a/src/components/Options/Counter.vue
+++ b/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 {
@@ -26,18 +28,24 @@ const { option, showMaybe = false } = defineProps<Props>()
 		<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 :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 :option="option" answer-filter="maybe" />
+		</NcPopover>
 	</div>
 </template>
 
diff --git a/src/components/User/UserItem.vue b/src/components/User/UserItem.vue
index 4f6d3d2c0d..9e90bdf9f1 100644
--- a/src/components/User/UserItem.vue
+++ b/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"
diff --git a/src/components/VoteTable/VoteTable.vue b/src/components/VoteTable/VoteTable.vue
index fefe9326f5..93f89300e6 100644
--- a/src/components/VoteTable/VoteTable.vue
+++ b/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;
diff --git a/src/components/VoteTable/VotersList.vue b/src/components/VoteTable/VotersList.vue
new file mode 100644
index 0000000000..b1862f468e
--- /dev/null
+++ b/src/components/VoteTable/VotersList.vue
@@ -0,0 +1,96 @@
+<!--
+  - 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 {
+	display: grid;
+	grid-template-columns: repeat(4, auto);
+	gap: 0.5rem 1rem;
+
+	.user-item {
+		grid-column: 1/2;
+		grid-row: 1/2;
+		--step: 16px;
+		translate: calc(var(--i, 0) * var(--step)) 0;
+
+		&:nth-child(n + 5) {
+			display: none;
+		}
+
+		.user-item__name {
+			display: none;
+		}
+	}
+
+	&:hover {
+		.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>
diff --git a/src/stores/votes.ts b/src/stores/votes.ts
index ded0d86140..4b67fb59d9 100644
--- a/src/stores/votes.ts
+++ b/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) =>

From ae608a8c960b711c65e2958e686e49e723a391b8 Mon Sep 17 00:00:00 2001
From: dartcafe <github@dartcafe.de>
Date: Sun, 5 Oct 2025 21:44:22 +0200
Subject: [PATCH 2/4] only show voters list if it makes sense

Signed-off-by: dartcafe <github@dartcafe.de>
---
 src/components/Options/Counter.vue | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/components/Options/Counter.vue b/src/components/Options/Counter.vue
index 66f0b0ebf2..4de424876a 100644
--- a/src/components/Options/Counter.vue
+++ b/src/components/Options/Counter.vue
@@ -21,6 +21,8 @@ interface Props {
 }
 
 const { option, showMaybe = false } = defineProps<Props>()
+const showList =
+	pollStore.permissions.seeResults && pollStore.permissions.seeUsernames
 </script>
 
 <template>
@@ -35,7 +37,7 @@ const { option, showMaybe = false } = defineProps<Props>()
 					:size="20" />
 				<span>{{ option.votes.yes }}</span>
 			</template>
-			<VotersList :option="option" answer-filter="yes" />
+			<VotersList v-if="showList" :option="option" answer-filter="yes" />
 		</NcPopover>
 		<NcPopover v-show="showMaybe" no-focus-trap class="maybe">
 			<template #trigger>
@@ -44,7 +46,7 @@ const { option, showMaybe = false } = defineProps<Props>()
 					:size="20" />
 				<span>{{ option.votes.maybe }}</span>
 			</template>
-			<VotersList :option="option" answer-filter="maybe" />
+			<VotersList v-if="showList" :option="option" answer-filter="maybe" />
 		</NcPopover>
 	</div>
 </template>

From 04ef81b574fef2e2deae529e4ad9b3be12befe79 Mon Sep 17 00:00:00 2001
From: dartcafe <github@dartcafe.de>
Date: Sun, 5 Oct 2025 23:50:17 +0200
Subject: [PATCH 3/4] changelog

Signed-off-by: dartcafe <github@dartcafe.de>
---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index fc5e1bf00c..d4a260df9b 100644
--- a/CHANGELOG.md
+++ b/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

From c5321d1f7a74b7221812e1729223fa8d49f1e4b1 Mon Sep 17 00:00:00 2001
From: dartcafe <github@dartcafe.de>
Date: Wed, 8 Oct 2025 07:39:46 +0200
Subject: [PATCH 4/4] adjust items layout

Signed-off-by: dartcafe <github@dartcafe.de>
---
 src/components/VoteTable/VotersList.vue | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/VoteTable/VotersList.vue b/src/components/VoteTable/VotersList.vue
index b1862f468e..cc0572dbf8 100644
--- a/src/components/VoteTable/VotersList.vue
+++ b/src/components/VoteTable/VotersList.vue
@@ -48,14 +48,14 @@ const voters = computed(() =>
 
 <style lang="scss">
 .voters-grid {
+	--step: 16px;
 	display: grid;
 	grid-template-columns: repeat(4, auto);
-	gap: 0.5rem 1rem;
+	padding-inline-end: calc(2 * var(--step));
 
 	.user-item {
 		grid-column: 1/2;
 		grid-row: 1/2;
-		--step: 16px;
 		translate: calc(var(--i, 0) * var(--step)) 0;
 
 		&:nth-child(n + 5) {
@@ -68,6 +68,7 @@ const voters = computed(() =>
 	}
 
 	&:hover {
+		padding-inline-end: 0;
 		.user-item {
 			grid-column: auto;
 			grid-row: auto;