From 6d1e199ace9f9d44d6af60c4911a9c803d85139a Mon Sep 17 00:00:00 2001
From: Wolfgang <github@linux-dude.de>
Date: Sat, 26 Oct 2024 14:28:32 +0200
Subject: [PATCH 1/7] fix: call filterSortedItems only when items change

Actual filterSortedItems() is called multiple times through different events where it is not necessary (mark read, starred) and it is called extra every time using key navigation.

Signed-off-by: Wolfgang <github@linux-dude.de>
---
 CHANGELOG.md                                  |  1 +
 .../feed-display/FeedItemDisplayList.vue      | 22 ++++++++++++++++---
 src/store/item.ts                             |  2 +-
 3 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index a7eaefb17..9b42a2fc4 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,7 @@ You can also check [on GitHub](https://github.com/nextcloud/news/releases), the
 # Unreleased
 ## [25.x.x]
 ### Changed
+- Performance improvements on item list
 
 ### Fixed
 
diff --git a/src/components/feed-display/FeedItemDisplayList.vue b/src/components/feed-display/FeedItemDisplayList.vue
index b21fd374c..06f979feb 100644
--- a/src/components/feed-display/FeedItemDisplayList.vue
+++ b/src/components/feed-display/FeedItemDisplayList.vue
@@ -53,7 +53,7 @@
 				:fetch-key="fetchKey"
 				@load-more="fetchMore()">
 				<template v-if="items && items.length > 0">
-					<template v-for="item in filterSortedItems()">
+					<template v-for="item in filteredItemcache">
 						<FeedItemRow :key="item.id"
 							:ref="'feedItemRow' + item.id"
 							:item="item"
@@ -153,6 +153,7 @@ export default Vue.extend({
 				}
 			},
 			cache: [] as FeedItem[] | undefined,
+			filteredItemcache: [] as FeedItem,
 			selectedItem: undefined as FeedItem | undefined,
 		}
 	},
@@ -174,6 +175,14 @@ export default Vue.extend({
 		fetchKey() {
 			this.cache = undefined
 		},
+		// rebuild filtered item list only when items has changed
+		items: {
+			handler() {
+				this.refreshItemList()
+			},
+			immediate: true,
+			deep: false,
+		},
 	},
 	created() {
 		this.loadFilter()
@@ -182,6 +191,11 @@ export default Vue.extend({
 		this.mounted = true
 	},
 	methods: {
+		refreshItemList() {
+			if (this.items.length > 0) {
+				this.filteredItemcache = this.filterSortedItems()
+			}
+		},
 		storeFilter() {
 			try {
 				let filterString = 'noFilter'
@@ -244,6 +258,7 @@ export default Vue.extend({
 			}
 
 			this.storeFilter()
+			this.refreshItemList()
 		},
 		filterSortedItems(): FeedItem[] {
 			let response = [...this.items] as FeedItem[]
@@ -304,7 +319,7 @@ export default Vue.extend({
 			return this.selectedItem ? items.findIndex((item: FeedItem) => item.id === this.selectedItem.id) || 0 : -1
 		},
 		jumpToPreviousItem() {
-			const items = this.filterSortedItems()
+			const items = this.filteredItemcache
 			let currentIndex = this.currentIndex(items)
 			// Prepare to jump to the first item, if none was selected
 			if (currentIndex === -1) {
@@ -316,8 +331,9 @@ export default Vue.extend({
 				this.clickItem(previousItem)
 			}
 		},
+
 		jumpToNextItem() {
-			const items = this.filterSortedItems()
+			const items = this.filteredItemcache
 			const currentIndex = this.currentIndex(items)
 			// Jump to the first item, if none was selected, otherwise jump to the next item
 			if (currentIndex === -1 || (currentIndex < items.length - 1)) {
diff --git a/src/store/item.ts b/src/store/item.ts
index b36e96b65..d204f999d 100644
--- a/src/store/item.ts
+++ b/src/store/item.ts
@@ -365,7 +365,7 @@ export const mutations = {
 		{ item }: { item: FeedItem },
 	) {
 		const idx = state.allItems.findIndex((it) => it.id === item.id)
-		state.allItems.splice(idx, 1, item)
+		state.allItems[idx] = { ...state.allItems[idx], ...item }
 	},
 
 	[FEED_ITEM_MUTATION_TYPES.SET_FETCHING](

From 0b83b21fbee7f0f1fc439a41afbf403332a9ccf1 Mon Sep 17 00:00:00 2001
From: Wolfgang <github@linux-dude.de>
Date: Sun, 27 Oct 2024 12:57:38 +0100
Subject: [PATCH 2/7] fix: ordering rework and itemlist refresh fixes

* prevent first items api call using incorrect ordering
* use out of scope filter also in feed view
* refresh itemlist and show correct items when changing feed or global sort order

Signed-off-by: Wolfgang <github@linux-dude.de>
---
 CHANGELOG.md                                  |  2 +
 src/components/Sidebar.vue                    |  2 +-
 .../feed-display/FeedItemDisplayList.vue      | 69 ++++++++++++++-----
 src/components/routes/Feed.vue                | 19 +++--
 src/dataservices/item.service.ts              |  6 +-
 src/store/feed.ts                             |  7 ++
 src/store/item.ts                             | 27 +++-----
 7 files changed, 83 insertions(+), 49 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 9b42a2fc4..67957f90a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -8,8 +8,10 @@ You can also check [on GitHub](https://github.com/nextcloud/news/releases), the
 ## [25.x.x]
 ### Changed
 - Performance improvements on item list
+- Rework feed and global sort ordering
 
 ### Fixed
+- starred items in a feed can prevent further scrolling
 
 # Releases
 ## [25.0.0-alpha12] - 2024-10-23
diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue
index baa493a51..6e65a1b8c 100644
--- a/src/components/Sidebar.vue
+++ b/src/components/Sidebar.vue
@@ -282,8 +282,8 @@ export default Vue.extend({
 
 			},
 			set(newValue) {
+				this.$store.dispatch(ACTIONS.RESET_LAST_ITEM_LOADED)
 				this.saveSetting('oldestFirst', newValue)
-				this.$store.dispatch(ACTIONS.RESET_ITEMS)
 			},
 		},
 		preventReadOnScroll: {
diff --git a/src/components/feed-display/FeedItemDisplayList.vue b/src/components/feed-display/FeedItemDisplayList.vue
index 06f979feb..1d9cb642b 100644
--- a/src/components/feed-display/FeedItemDisplayList.vue
+++ b/src/components/feed-display/FeedItemDisplayList.vue
@@ -133,23 +133,10 @@ export default Vue.extend({
 
 			// Determine the sorting order
 			sort: (a: FeedItem, b: FeedItem) => {
-				let oldestFirst
-				switch (this.config.ordering) {
-				case FEED_ORDER.OLDEST:
-					oldestFirst = true
-					break
-				case FEED_ORDER.NEWEST:
-					oldestFirst = false
-					break
-				case FEED_ORDER.DEFAULT:
-				default:
-					oldestFirst = this.$store.getters.oldestFirst
-				}
-
 				if (a.id > b.id) {
-					return oldestFirst ? 1 : -1
+					return this.listOrdering ? 1 : -1
 				} else {
-					return oldestFirst ? -1 : 1
+					return this.listOrdering ? -1 : 1
 				}
 			},
 			cache: [] as FeedItem[] | undefined,
@@ -167,12 +154,28 @@ export default Vue.extend({
 		getSelectedItem() {
 			return this.$store.getters.selected
 		},
+		changedFeedOrdering() {
+			if (this.fetchKey.startsWith('feed-')) {
+				return this.$store.state.feeds.ordering[this.fetchKey]
+			}
+			return 0
+		},
+		changedGlobalOrdering() {
+			return this.$store.getters.oldestFirst
+		},
+		changedOrdering() {
+			return {
+			        feedOrdering: this.changedFeedOrdering,
+			        globalOrdering: this.changedGlobalOrdering,
+		      }
+		},
 	},
 	watch: {
 		getSelectedItem(newVal) {
 			this.selectedItem = newVal
 		},
 		fetchKey() {
+			this.listOrdering = this.getListOrdering()
 			this.cache = undefined
 		},
 		// rebuild filtered item list only when items has changed
@@ -183,8 +186,19 @@ export default Vue.extend({
 			immediate: true,
 			deep: false,
 		},
+		// ordering has changed rebuild item list
+		changedOrdering() {
+			this.listOrdering = this.getListOrdering()
+			// make sure the first items from this ordering are loaded
+			this.fetchMore()
+			this.cache = undefined
+			// refresh the list with the new ordering
+			this.refreshItemList()
+			this.$refs.virtualScroll.scrollTop = 0
+		},
 	},
 	created() {
+		this.listOrdering = this.getListOrdering()
 		this.loadFilter()
 	},
 	mounted() {
@@ -196,6 +210,25 @@ export default Vue.extend({
 				this.filteredItemcache = this.filterSortedItems()
 			}
 		},
+		getListOrdering(): boolean {
+			if (!this.fetchKey.startsWith('feed-')) {
+				return this.$store.getters.oldestFirst
+			}
+			// this.config.ordering is only defined in feed route
+			let oldestFirst
+			switch (this.$store.state.feeds.ordering[this.fetchKey]) {
+			case FEED_ORDER.OLDEST:
+				oldestFirst = true
+				break
+			case FEED_ORDER.NEWEST:
+				oldestFirst = false
+				break
+			case FEED_ORDER.DEFAULT:
+			default:
+				oldestFirst = this.$store.getters.oldestFirst
+			}
+			return oldestFirst
+		},
 		storeFilter() {
 			try {
 				let filterString = 'noFilter'
@@ -245,7 +278,7 @@ export default Vue.extend({
 		},
 		outOfScopeFilter(item: FeedItem): boolean {
 			const lastItemLoaded = this.$store.state.items.lastItemLoaded[this.fetchKey]
-			return (this.$store.getters.oldestFirst ? lastItemLoaded >= item.id : lastItemLoaded <= item.id)
+			return (this.listOrdering ? lastItemLoaded >= item.id : lastItemLoaded <= item.id)
 		},
 		toggleFilter(filter: (item: FeedItem) => boolean) {
 			if (this.filter === filter) {
@@ -289,8 +322,8 @@ export default Vue.extend({
 				response = response.filter(this.filter)
 			}
 
-			// filter items that are already loaded but do not yet match the current view (unread, all, folder...)
-			if (!this.fetchKey.startsWith('feed-') && this.$store.state.items.lastItemLoaded[this.fetchKey] > 0) {
+			// filter items that are already loaded but do not yet match the current view
+			if (this.$store.state.items.lastItemLoaded[this.fetchKey] > 0) {
 				response = response.filter(this.outOfScopeFilter)
 			}
 
diff --git a/src/components/routes/Feed.vue b/src/components/routes/Feed.vue
index 77e87b052..7a299b721 100644
--- a/src/components/routes/Feed.vue
+++ b/src/components/routes/Feed.vue
@@ -1,6 +1,6 @@
 <template>
-	<ContentTemplate :items="items"
-		:config="{ ordering: feed?.ordering || FEED_ORDER.NEWEST }"
+	<ContentTemplate v-if="!loading"
+		:items="items"
 		:fetch-key="'feed-' + feedId"
 		@load-more="fetchMore()">
 		<template #header>
@@ -23,7 +23,6 @@ import ContentTemplate from '../ContentTemplate.vue'
 import { FeedItem } from '../../types/FeedItem'
 import { ACTIONS, MUTATIONS } from '../../store'
 import { Feed } from '../../types/Feed'
-import { FEED_ORDER } from '../../dataservices/feed.service'
 
 export default Vue.extend({
 	components: {
@@ -37,13 +36,10 @@ export default Vue.extend({
 		},
 	},
 	computed: {
-		FEED_ORDER() {
-			return FEED_ORDER
-		},
 		...mapState(['items', 'feeds']),
-		feed(): Feed | null {
+		feed(): Feed {
 			const feeds = this.$store.getters.feeds
-			return feeds ? feeds.find((feed: Feed) => feed.id === this.id) : null
+			return feeds.find((feed: Feed) => feed.id === this.id)
 		},
 		items(): FeedItem[] {
 			return this.$store.state.items.allItems.filter((item: FeedItem) => {
@@ -53,6 +49,9 @@ export default Vue.extend({
 		id(): number {
 			return Number(this.feedId)
 		},
+		loading() {
+			return this.$store.getters.loading
+		},
 	},
 	created() {
 		this.$store.commit(MUTATIONS.SET_SELECTED_ITEM, { id: undefined })
@@ -61,8 +60,8 @@ export default Vue.extend({
 	},
 	methods: {
 		async fetchMore() {
-			if (!this.$store.state.items.fetchingItems['feed-' + this.feedId]) {
-			  this.$store.dispatch(ACTIONS.FETCH_FEED_ITEMS, { feedId: this.id, ordering: this.feed?.ordering || 0 })
+			if (!this.loading && !this.$store.state.items.fetchingItems['feed-' + this.feedId]) {
+			  this.$store.dispatch(ACTIONS.FETCH_FEED_ITEMS, { feedId: this.id })
 			}
 		},
 	},
diff --git a/src/dataservices/item.service.ts b/src/dataservices/item.service.ts
index 5cd98f6e9..617a1cdf8 100644
--- a/src/dataservices/item.service.ts
+++ b/src/dataservices/item.service.ts
@@ -2,6 +2,7 @@ import _ from 'lodash'
 import { AxiosResponse } from 'axios'
 import axios from '@nextcloud/axios'
 import store from './../store/app'
+import feedstore from './../store/feed'
 
 import { API_ROUTES } from '../types/ApiRoutes'
 import { FeedItem } from '../types/FeedItem'
@@ -85,12 +86,11 @@ export class ItemService {
 	 *
 	 * @param feedId id number of feed to retrieve items for
 	 * @param start (id of last unread item loaded)
-	 * @param ordering (0 = NEWEST, 1 = OLDEST, 2 = DEFAULT)
 	 * @return {AxiosResponse} response object containing backend request response
 	 */
-	static async fetchFeedItems(feedId: number, start?: number, ordering?: number): Promise<AxiosResponse> {
+	static async fetchFeedItems(feedId: number, start?: number): Promise<AxiosResponse> {
 		let oldestFirst
-		switch (ordering) {
+		switch (feedstore.state.ordering['feed-' + feedId]) {
 		case FEED_ORDER.OLDEST:
 			oldestFirst = true
 			break
diff --git a/src/store/feed.ts b/src/store/feed.ts
index 8b5ed0a17..1a86f6989 100644
--- a/src/store/feed.ts
+++ b/src/store/feed.ts
@@ -27,11 +27,13 @@ export const FEED_ACTION_TYPES = {
 export type FeedState = {
 	feeds: Feed[];
 	unreadCount: number;
+	ordering: { [key: string]: number };
 }
 
 const state: FeedState = {
 	feeds: [],
 	unreadCount: 0,
+	ordering: {},
 }
 
 const getters = {
@@ -140,6 +142,8 @@ export const actions = {
 		{ commit }: ActionParams<FeedState>,
 		{ feed, ordering }: { feed: Feed, ordering: FEED_ORDER },
 	) {
+		state.ordering = { ...state.ordering, ['feed-' + feed.id]: ordering }
+		commit(FEED_ITEM_MUTATION_TYPES.SET_LAST_ITEM_LOADED, { key: 'feed-' + feed.id, lastItem: undefined })
 		await FeedService.updateFeed({ feedId: feed.id as number, ordering })
 
 		commit(FEED_MUTATION_TYPES.UPDATE_FEED, { id: feed.id, ordering })
@@ -205,6 +209,9 @@ export const mutations = {
 	) {
 		feeds.forEach(it => {
 			state.feeds.push(it)
+			if (it.ordering) {
+				state.ordering['feed-' + it.id] = it.ordering
+			}
 		})
 	},
 
diff --git a/src/store/item.ts b/src/store/item.ts
index d204f999d..88ac98f86 100644
--- a/src/store/item.ts
+++ b/src/store/item.ts
@@ -16,7 +16,7 @@ export const FEED_ITEM_ACTION_TYPES = {
 	FETCH_FEED_ITEMS: 'FETCH_FEED_ITEMS',
 	FETCH_FOLDER_FEED_ITEMS: 'FETCH_FOLDER_FEED_ITEMS',
 	FETCH_ITEMS: 'FETCH_ITEMS',
-	RESET_ITEMS: 'RESET_ITEMS',
+	RESET_LAST_ITEM_LOADED: 'RESET_LAST_ITEM_LOADED',
 }
 
 export type ItemState = {
@@ -159,14 +159,13 @@ export const actions = {
 	 * @param param1 ActionArgs
 	 * @param param1.start Start data
 	 * @param param1.feedId ID of the feed
-	 * @param param1.ordering Ordering of the feed
 	 */
 	async [FEED_ITEM_ACTION_TYPES.FETCH_FEED_ITEMS](
 		{ commit }: ActionParams<ItemState>,
-		{ feedId, start, ordering }: { feedId: number; start: number; ordering: number },
+		{ feedId, start }: { feedId: number; start: number },
 	) {
 		commit(FEED_ITEM_MUTATION_TYPES.SET_FETCHING, { key: 'feed-' + feedId, fetching: true })
-		const response = await ItemService.debounceFetchFeedItems(feedId, start || state.lastItemLoaded['feed-' + feedId], ordering)
+		const response = await ItemService.debounceFetchFeedItems(feedId, start || state.lastItemLoaded['feed-' + feedId])
 		commit(FEED_ITEM_MUTATION_TYPES.SET_ITEMS, response?.data.items)
 		if (response?.data.items.length < 40) {
 			commit(FEED_ITEM_MUTATION_TYPES.SET_ALL_LOADED, { key: 'feed-' + feedId, loaded: true })
@@ -292,22 +291,16 @@ export const actions = {
 	},
 
 	/**
-	 * Remove all loaded items from memory and reset ItemsLoaded counters
+	 * Reset lastItemsLoaded counters
 	 *
 	 * @param param0 ActionParams
-	 * @param param0.dispatch Dispatch
-	 * @param param1 ActionArgs
-	 * @param param1.start Start data
+	 * @param param0.commit Commit action
+	 * @param param0.state ItemState
 	 */
-	[FEED_ITEM_ACTION_TYPES.RESET_ITEMS](
-		{ dispatch }: ActionParams<ItemState>,
-		{ start }: { start: number } = { start: 0 },
-	) {
-		state.allItems.splice(start, state.allItems.length - start)
-		state.allItemsLoaded = {}
-		state.lastItemLoaded = {}
-		dispatch(FEED_ITEM_ACTION_TYPES.FETCH_STARRED, 0)
-		dispatch(FEED_ITEM_ACTION_TYPES.FETCH_ITEMS, 0)
+	[FEED_ITEM_ACTION_TYPES.RESET_LAST_ITEM_LOADED]({ commit, state }: ActionParams<ItemState>) {
+		Object.entries(state.lastItemLoaded).forEach(([key]) => {
+			commit(FEED_ITEM_MUTATION_TYPES.SET_LAST_ITEM_LOADED, { key, lastItem: undefined })
+		})
 	},
 }
 

From f21fbb43666fe09b96f649e683053848d6ac0814 Mon Sep 17 00:00:00 2001
From: Wolfgang <github@linux-dude.de>
Date: Sun, 27 Oct 2024 13:02:40 +0100
Subject: [PATCH 3/7] fix: Feed ordering uses wrong values

Signed-off-by: Wolfgang <github@linux-dude.de>
---
 CHANGELOG.md                     | 1 +
 src/dataservices/feed.service.ts | 4 ++--
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 67957f90a..77c3288b1 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -12,6 +12,7 @@ You can also check [on GitHub](https://github.com/nextcloud/news/releases), the
 
 ### Fixed
 - starred items in a feed can prevent further scrolling
+- Feed ordering uses wrong values (#2846)
 
 # Releases
 ## [25.0.0-alpha12] - 2024-10-23
diff --git a/src/dataservices/feed.service.ts b/src/dataservices/feed.service.ts
index f9fef01da..a1deffa21 100644
--- a/src/dataservices/feed.service.ts
+++ b/src/dataservices/feed.service.ts
@@ -4,9 +4,9 @@ import axios from '@nextcloud/axios'
 import { API_ROUTES } from '../types/ApiRoutes'
 
 export enum FEED_ORDER {
+	DEFAULT = 0,
 	OLDEST = 1,
-	NEWEST = 0,
-	DEFAULT = 2,
+	NEWEST = 2,
 }
 
 export enum FEED_UPDATE_MODE {

From 387e40222b8cef0baf4c64b67c7821822122e221 Mon Sep 17 00:00:00 2001
From: Wolfgang <github@linux-dude.de>
Date: Sat, 26 Oct 2024 14:43:47 +0200
Subject: [PATCH 4/7] fix: don't call mark read if item is already marked read

Signed-off-by: Wolfgang <github@linux-dude.de>
---
 src/components/feed-display/FeedItemRow.vue                     | 2 +-
 .../javascript/unit/components/feed-display/FeedItemRow.spec.ts | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/feed-display/FeedItemRow.vue b/src/components/feed-display/FeedItemRow.vue
index b7e9b8692..8582476e6 100644
--- a/src/components/feed-display/FeedItemRow.vue
+++ b/src/components/feed-display/FeedItemRow.vue
@@ -141,7 +141,7 @@ export default Vue.extend({
 			return this.$store.getters.feeds.find((feed: Feed) => feed.id === id) || {}
 		},
 		markRead(item: FeedItem): void {
-			if (!this.keepUnread) {
+			if (!this.keepUnread && item.unread) {
 				this.$store.dispatch(ACTIONS.MARK_READ, { item })
 			}
 		},
diff --git a/tests/javascript/unit/components/feed-display/FeedItemRow.spec.ts b/tests/javascript/unit/components/feed-display/FeedItemRow.spec.ts
index 8c4b23042..62cc63835 100644
--- a/tests/javascript/unit/components/feed-display/FeedItemRow.spec.ts
+++ b/tests/javascript/unit/components/feed-display/FeedItemRow.spec.ts
@@ -12,6 +12,7 @@ describe('FeedItemRow.vue', () => {
 		feedId: 1,
 		title: 'feed item',
 		pubDate: Date.now() / 1000,
+		unread: true,
 	}
 	const mockFeed = {
 		id: 1,

From 186b0dc087950f73dfb0beeddabf2f1ad37d481a Mon Sep 17 00:00:00 2001
From: Wolfgang <github@linux-dude.de>
Date: Mon, 28 Oct 2024 23:16:35 +0100
Subject: [PATCH 5/7] fix: j shortcut doesn't load more items in infinite
 scroll

Signed-off-by: Wolfgang <github@linux-dude.de>
---
 CHANGELOG.md                                        |  1 +
 src/components/feed-display/FeedItemDisplayList.vue | 13 +++++++++++--
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 77c3288b1..83d22d7ca 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -12,6 +12,7 @@ You can also check [on GitHub](https://github.com/nextcloud/news/releases), the
 
 ### Fixed
 - starred items in a feed can prevent further scrolling
+- j shortcut doesn't load more items in infinite scroll (#2847)
 - Feed ordering uses wrong values (#2846)
 
 # Releases
diff --git a/src/components/feed-display/FeedItemDisplayList.vue b/src/components/feed-display/FeedItemDisplayList.vue
index 1d9cb642b..43270c812 100644
--- a/src/components/feed-display/FeedItemDisplayList.vue
+++ b/src/components/feed-display/FeedItemDisplayList.vue
@@ -142,6 +142,7 @@ export default Vue.extend({
 			cache: [] as FeedItem[] | undefined,
 			filteredItemcache: [] as FeedItem,
 			selectedItem: undefined as FeedItem | undefined,
+			debouncedClickItem: null,
 		}
 	},
 	computed: {
@@ -203,6 +204,7 @@ export default Vue.extend({
 	},
 	mounted() {
 		this.mounted = true
+		this.setupDebouncedClick()
 	},
 	methods: {
 		refreshItemList() {
@@ -329,6 +331,12 @@ export default Vue.extend({
 
 			return response.sort(this.sort)
 		},
+		// debounce clicks to prevent multiple api calls when on the end of the actual loaded list
+		setupDebouncedClick() {
+			this.debouncedClickItem = _.debounce((Item) => {
+				this.clickItem(Item)
+			}, 20, { leading: true })
+		},
 		// Trigger the click event programmatically to benefit from the item handling inside the FeedItemRow component
 		clickItem(item: FeedItem) {
 			if (!item) {
@@ -361,7 +369,8 @@ export default Vue.extend({
 			// Jump to the previous item
 			if (currentIndex > 0) {
 				const previousItem = items[currentIndex - 1]
-				this.clickItem(previousItem)
+				this.debouncedClickItem(previousItem)
+
 			}
 		},
 
@@ -371,7 +380,7 @@ export default Vue.extend({
 			// Jump to the first item, if none was selected, otherwise jump to the next item
 			if (currentIndex === -1 || (currentIndex < items.length - 1)) {
 				const nextItem = items[currentIndex + 1]
-				this.clickItem(nextItem)
+				this.debouncedClickItem(nextItem)
 			}
 		},
 	},

From 421da281c82bed6c0d9d2ce1af2bc06947868812 Mon Sep 17 00:00:00 2001
From: Wolfgang <github@linux-dude.de>
Date: Mon, 28 Oct 2024 23:28:42 +0100
Subject: [PATCH 6/7] fix: refresh item list when toggle showAll

Signed-off-by: Wolfgang <github@linux-dude.de>
---
 src/components/feed-display/FeedItemDisplayList.vue | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/src/components/feed-display/FeedItemDisplayList.vue b/src/components/feed-display/FeedItemDisplayList.vue
index 43270c812..7b59daaaa 100644
--- a/src/components/feed-display/FeedItemDisplayList.vue
+++ b/src/components/feed-display/FeedItemDisplayList.vue
@@ -170,6 +170,9 @@ export default Vue.extend({
 			        globalOrdering: this.changedGlobalOrdering,
 		      }
 		},
+		changedShowAll() {
+			return this.$store.getters.showAll
+		},
 	},
 	watch: {
 		getSelectedItem(newVal) {
@@ -197,6 +200,11 @@ export default Vue.extend({
 			this.refreshItemList()
 			this.$refs.virtualScroll.scrollTop = 0
 		},
+		// showAll has changed rebuild item list
+		changedShowAll() {
+			this.cache = undefined
+			this.refreshItemList()
+		},
 	},
 	created() {
 		this.listOrdering = this.getListOrdering()

From 38a1ea29d7bf18cc2676af2b4b3fce7a6160297d Mon Sep 17 00:00:00 2001
From: Wolfgang <github@linux-dude.de>
Date: Tue, 29 Oct 2024 20:42:19 +0100
Subject: [PATCH 7/7] fix: mark read and toggle starred in the content pane are
 not reflected in the item list

This is a follow up fix for the change to the filtered sorted item list

Signed-off-by: Wolfgang <github@linux-dude.de>
---
 src/store/item.ts | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/store/item.ts b/src/store/item.ts
index 88ac98f86..1748cd453 100644
--- a/src/store/item.ts
+++ b/src/store/item.ts
@@ -358,7 +358,15 @@ export const mutations = {
 		{ item }: { item: FeedItem },
 	) {
 		const idx = state.allItems.findIndex((it) => it.id === item.id)
-		state.allItems[idx] = { ...state.allItems[idx], ...item }
+		// Since spread-syntax doesn't work here properly with vue2, update
+		// each property on its own as workaround to prevent rebuilding
+		// the whole item list when changing the unread or starred status
+		// state.allItems[idx] = { ...state.allItems[idx], ...item }
+		state.allItems[idx].starred = item.starred
+		state.allItems[idx].unread = item.unread
+		// UPDATE_ITEM currently only used when toggle starred and unread
+		// add title to make js-test happy
+		state.allItems[idx].title = item.title
 	},
 
 	[FEED_ITEM_MUTATION_TYPES.SET_FETCHING](