From 6c8fc079093e8c1b0f76faebeb560d725b35c54f Mon Sep 17 00:00:00 2001
From: dartcafe <github@dartcafe.de>
Date: Sun, 13 Jul 2025 11:00:06 +0200
Subject: [PATCH 1/2] move observers to vote page

Signed-off-by: dartcafe <github@dartcafe.de>
---
 src/components/VoteTable/VoteTable.vue | 65 ++------------------------
 src/views/Vote.vue                     | 65 +++++++++++++++++++++++---
 2 files changed, 61 insertions(+), 69 deletions(-)

diff --git a/src/components/VoteTable/VoteTable.vue b/src/components/VoteTable/VoteTable.vue
index 1f6a60858e..cf9fbf3a2b 100644
--- a/src/components/VoteTable/VoteTable.vue
+++ b/src/components/VoteTable/VoteTable.vue
@@ -4,7 +4,7 @@
 -->
 
 <script setup lang="ts">
-import { n, t } from '@nextcloud/l10n'
+import { t } from '@nextcloud/l10n'
 
 import { usePollStore } from '../../stores/poll.ts'
 import { useOptionsStore } from '../../stores/options.ts'
@@ -12,7 +12,7 @@ import { useVotesStore } from '../../stores/votes.ts'
 
 import { NcButton } from '@nextcloud/vue'
 import SortNameIcon from 'vue-material-design-icons/SortAlphabeticalDescending.vue'
-import { computed, nextTick, ref } from 'vue'
+import { computed,ref } from 'vue'
 import { getCurrentUser } from '@nextcloud/auth'
 import Counter from '../Options/Counter.vue'
 import CalendarPeek from '../Calendar/CalendarPeek.vue'
@@ -23,17 +23,13 @@ import { usePreferencesStore } from '../../stores/preferences.ts'
 import SortOptionIcon from 'vue-material-design-icons/SortBoolAscendingVariant.vue'
 import VoteItem from './VoteItem.vue'
 import VoteParticipant from './VoteParticipant.vue'
-import IntersectionObserver from '../Base/modules/IntersectionObserver.vue'
-import { showError } from '@nextcloud/dialogs'
-
-const emit = defineEmits(['headerSticky', 'headerUnSticky'])
 
 const pollStore = usePollStore()
 const optionsStore = useOptionsStore()
 const votesStore = useVotesStore()
 const preferencesStore = usePreferencesStore()
 
-const downPage = defineModel<boolean>('downPage', { default: false })
+const { downPage = false} = defineProps<{downPage: boolean}>()
 
 const chunksLoading = ref(false)
 
@@ -49,31 +45,9 @@ const showCalendarPeek = computed(
 		&& preferencesStore.user.calendarPeek,
 )
 
-/**
- *
- */
-function loadMore() {
-	try {
-		chunksLoading.value = true
-		nextTick(() => {
-			votesStore.addChunk()
-		})
-		nextTick(() => {
-			chunksLoading.value = false
-		})
-	} catch {
-		showError(t('polls', 'Error loading more participants'))
-	}
-}
 </script>
 
 <template>
-	<IntersectionObserver
-		key="top-observer"
-		v-model="downPage"
-		@visible="emit('headerSticky')"
-		@invisible="emit('headerUnSticky')" />
-
 	<TransitionGroup
 		id="vote-table"
 		tag="div"
@@ -154,42 +128,9 @@ function loadMore() {
 			</div>
 		</template>
 	</TransitionGroup>
-	<div
-		v-if="
-			votesStore.countHiddenParticipants > 0
-			&& pollStore.viewMode === 'table-view'
-		"
-		class="observer-container sticky-left">
-		<IntersectionObserver
-			key="bottom-observer"
-			class="observer_section"
-			:loading="chunksLoading"
-			@visible="loadMore">
-			<div class="clickable_load_more" @click="loadMore">
-				{{
-					n(
-						'polls',
-						'%n participant is hidden. Click here to load more',
-						'%n participants are hidden. Click here to load more',
-						votesStore.countHiddenParticipants,
-					)
-				}}
-			</div>
-		</IntersectionObserver>
-	</div>
 </template>
 
 <style lang="scss">
-.observer-container {
-	display: flex;
-	justify-content: center;
-}
-
-.observer_section {
-	position: sticky;
-	left: 70px;
-}
-
 .vote-table {
 	display: grid;
 	grid-template-columns: max-content repeat(
diff --git a/src/views/Vote.vue b/src/views/Vote.vue
index 9b8c2b7750..e19aad46a9 100644
--- a/src/views/Vote.vue
+++ b/src/views/Vote.vue
@@ -4,9 +4,9 @@
 -->
 
 <script setup lang="ts">
-import { computed, onMounted, onUnmounted, ref } from 'vue'
+import { computed, nextTick, onMounted, onUnmounted, ref } from 'vue'
 import { emit, subscribe, unsubscribe } from '@nextcloud/event-bus'
-import { t } from '@nextcloud/l10n'
+import { n, t } from '@nextcloud/l10n'
 
 import NcAppContent from '@nextcloud/vue/components/NcAppContent'
 import NcEmptyContent from '@nextcloud/vue/components/NcEmptyContent'
@@ -34,13 +34,17 @@ import Collapsible from '../components/Base/modules/Collapsible.vue'
 import type { CollapsibleProps } from '../components/Base/modules/Collapsible.vue'
 import { onBeforeRouteLeave, onBeforeRouteUpdate } from 'vue-router'
 import IntersectionObserver from '../components/Base/modules/IntersectionObserver.vue'
+import { useVotesStore } from '../stores/votes.ts'
+import { showError } from '@nextcloud/dialogs'
 
 const pollStore = usePollStore()
 const optionsStore = useOptionsStore()
 const preferencesStore = usePreferencesStore()
+const votesStore = useVotesStore()
 const voteMainId = 'watched-scroll-area'
 const topObserverVisible = ref(false)
-const voteHeaderDownPage = ref(false)
+const tableSticky = ref(false)
+const chunksLoading = ref(false)
 
 const loadingOverlayProps = {
 	name: t('polls', 'Loading poll…'),
@@ -73,6 +77,23 @@ const emptyContentProps = computed(() => {
 	}
 })
 
+async function loadChunks() {
+	if (chunksLoading.value) {
+		return
+	}
+
+	try {
+		chunksLoading.value = true
+		await nextTick()
+		await votesStore.addChunk()
+	} catch {
+		showError(t('polls', 'Error loading more participants'))
+	} finally {
+		await nextTick()
+		chunksLoading.value = false
+	}
+}
+
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 const windowTitle = computed(
 	() => `${t('polls', 'Polls')} - ${pollStore.configuration.title}`,
@@ -96,9 +117,13 @@ const collapsibleProps = computed<CollapsibleProps>(() => ({
 }))
 
 const scrolled = computed(
-	() => !topObserverVisible.value && voteHeaderDownPage.value,
+	() => !topObserverVisible.value && tableSticky.value,
 )
 
+const showBottomObserver = computed(() => (
+		votesStore.countHiddenParticipants > 0
+		&& pollStore.viewMode === 'table-view'
+	))
 onBeforeRouteUpdate(async () => {
 	pollStore.load()
 	emit(Event.TransitionsOff, 500)
@@ -145,6 +170,7 @@ onUnmounted(() => {
 
 		<div class="vote_main">
 			<IntersectionObserver id="top-observer" v-model="topObserverVisible" />
+
 			<Collapsible
 				v-if="pollStore.configuration.description"
 				class="sticky-left"
@@ -154,9 +180,27 @@ onUnmounted(() => {
 
 			<VoteInfoCards class="sticky-left" />
 
-			<VoteTable
-				v-show="optionsStore.options.length"
-				v-model:down-page="voteHeaderDownPage" />
+			<IntersectionObserver id="table-observer" v-model="tableSticky" />
+
+			<VoteTable v-show="optionsStore.options.length" :down-page="tableSticky" />
+
+			<IntersectionObserver
+				v-if="showBottomObserver"
+				id="bottom-observer"
+				class="sticky-left"
+				:loading="chunksLoading"
+				@visible="loadChunks">
+				<div class="clickable_load_more" @click="loadChunks">
+					{{
+						n(
+							'polls',
+							'%n participant is hidden. Click here to load more',
+							'%n participants are hidden. Click here to load more',
+							votesStore.countHiddenParticipants,
+						)
+					}}
+				</div>
+			</IntersectionObserver>
 
 			<NcEmptyContent
 				v-if="!optionsStore.options.length"
@@ -187,6 +231,13 @@ onUnmounted(() => {
 </template>
 
 <style lang="scss">
+#bottom-observer {
+	display: flex;
+	justify-content: center;
+	position: sticky;
+	left: 70px;
+}
+
 .table-view .vote_main {
 	flex: 1;
 	overflow: auto;

From c881a88993d72a23b7cb0a5e0a5e8947a95dcab6 Mon Sep 17 00:00:00 2001
From: dartcafe <github@dartcafe.de>
Date: Sun, 13 Jul 2025 11:01:15 +0200
Subject: [PATCH 2/2] format

Signed-off-by: dartcafe <github@dartcafe.de>
---
 src/components/VoteTable/VoteTable.vue |  5 ++---
 src/views/Vote.vue                     | 15 ++++++++-------
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/components/VoteTable/VoteTable.vue b/src/components/VoteTable/VoteTable.vue
index cf9fbf3a2b..349f4356b3 100644
--- a/src/components/VoteTable/VoteTable.vue
+++ b/src/components/VoteTable/VoteTable.vue
@@ -12,7 +12,7 @@ import { useVotesStore } from '../../stores/votes.ts'
 
 import { NcButton } from '@nextcloud/vue'
 import SortNameIcon from 'vue-material-design-icons/SortAlphabeticalDescending.vue'
-import { computed,ref } from 'vue'
+import { computed, ref } from 'vue'
 import { getCurrentUser } from '@nextcloud/auth'
 import Counter from '../Options/Counter.vue'
 import CalendarPeek from '../Calendar/CalendarPeek.vue'
@@ -29,7 +29,7 @@ const optionsStore = useOptionsStore()
 const votesStore = useVotesStore()
 const preferencesStore = usePreferencesStore()
 
-const { downPage = false} = defineProps<{downPage: boolean}>()
+const { downPage = false } = defineProps<{ downPage: boolean }>()
 
 const chunksLoading = ref(false)
 
@@ -44,7 +44,6 @@ const showCalendarPeek = computed(
 		&& getCurrentUser()
 		&& preferencesStore.user.calendarPeek,
 )
-
 </script>
 
 <template>
diff --git a/src/views/Vote.vue b/src/views/Vote.vue
index e19aad46a9..0565444335 100644
--- a/src/views/Vote.vue
+++ b/src/views/Vote.vue
@@ -116,14 +116,13 @@ const collapsibleProps = computed<CollapsibleProps>(() => ({
 	initialState: pollStore.currentUserStatus.countVotes === 0 ? 'max' : 'min',
 }))
 
-const scrolled = computed(
-	() => !topObserverVisible.value && tableSticky.value,
-)
+const scrolled = computed(() => !topObserverVisible.value && tableSticky.value)
 
-const showBottomObserver = computed(() => (
+const showBottomObserver = computed(
+	() =>
 		votesStore.countHiddenParticipants > 0
-		&& pollStore.viewMode === 'table-view'
-	))
+		&& pollStore.viewMode === 'table-view',
+)
 onBeforeRouteUpdate(async () => {
 	pollStore.load()
 	emit(Event.TransitionsOff, 500)
@@ -182,7 +181,9 @@ onUnmounted(() => {
 
 			<IntersectionObserver id="table-observer" v-model="tableSticky" />
 
-			<VoteTable v-show="optionsStore.options.length" :down-page="tableSticky" />
+			<VoteTable
+				v-show="optionsStore.options.length"
+				:down-page="tableSticky" />
 
 			<IntersectionObserver
 				v-if="showBottomObserver"