Add frontend refresh features

CHANGELOG.md

@@ -9,11 +9,16 @@
 ### Changed
 - Performance improvements on item list
 - Rework feed and global sort ordering
+- Add 'r' shortkey to refresh feed and item list
+- Show automatically new news items on VueJS implementation (#2502)
+- Show when feeds and folder have errors
+- Add keyboard shortcuts 'd', 'f', 'c' and 'v' to switch between feeds and folders
 
 ### 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)
+- Unread Counter becomes negative (#2839)
 
 # Releases
 ## [25.0.0-alpha12] - 2024-10-23

lib/Controller/PageController.php

@@ -61,7 +61,7 @@
         if (class_exists('\OCP\ServerVersion')) {
             $version = (new \OCP\ServerVersion())->getMajorVersion();
         } else {
             $version = Util::getVersion()[0];
         }
 
         $response = new TemplateResponse(
@@ -81,7 +81,8 @@
             'oldestFirst',
             'showAll',
             'lastViewedFeedId',
-            'lastViewedFeedType'
+            'lastViewedFeedType',
+            'disableRefresh'
         ];
 
         foreach ($usersettings as $setting) {
@@ -155,21 +156,24 @@
      * @param bool $preventReadOnScroll
      * @param bool $oldestFirst
      * @param bool $compactExpand
+     * @param bool $disableRefresh
      */
     #[NoAdminRequired]
     public function updateSettings(
         bool $showAll,
         bool $compact,
         bool $preventReadOnScroll,
         bool $oldestFirst,
-        bool $compactExpand
+        bool $compactExpand,
+        bool $disableRefresh
     ): void {
         $settings = [
             'showAll'             => $showAll,
             'compact'             => $compact,
             'preventReadOnScroll' => $preventReadOnScroll,
             'oldestFirst'         => $oldestFirst,
             'compactExpand'       => $compactExpand,
+            'disableRefresh'      => $disableRefresh,
         ];
 
         foreach ($settings as $setting => $value) {

src/components/MoveFeed.vue

@@ -61,8 +61,8 @@
 			return this.$store.state.folders.folders
 		},
 		disableMoveFeed(): boolean {
 			console.log('feed', this.feed)
 			console.log('this.folder', this.folder)
 			return (this.folder !== undefined && this.folder.id === this.feed.folderId)
 		},
 	},
@@ -73,31 +73,13 @@
 		async moveFeed() {
 			const data = {
 				feedId: this.feed.id,
-				folderId: this.folder ? this.folder.id : null,
+				folderId: this.folder ? this.folder.id : 0,
 			}
 			await this.$store.dispatch(ACTIONS.MOVE_FEED, data)
-			await this.reloadFeeds()
+			await this.$store.dispatch(ACTIONS.FETCH_FEEDS)
 
 			this.$emit('close')
 		},
-		async reloadFeeds() {
-			// Clear feeds and folders
-			const currentState = this.$store.state
-			const newState = {
-				...currentState,
-				folders: {
-					folders: [],
-				},
-				feeds: {
-					feeds: [],
-				},
-			}
-			this.$store.replaceState(newState)
-
-			// Fetch feeds and folders
-			await this.$store.dispatch(ACTIONS.FETCH_FOLDERS)
-			await this.$store.dispatch(ACTIONS.FETCH_FEEDS)
-		},
 	},
 })
 

src/components/Sidebar.vue

@@ -29,12 +29,12 @@
 					<EyeIcon />
 				</template>
 				<template #counter>
-					<NcCounterBubble v-if="items.unreadCount > 0">
+					<NcCounterBubble v-show="items.unreadCount > 0">
 						{{ items.unreadCount }}
 					</NcCounterBubble>
 				</template>
 			</NcAppNavigationItem>
-			<NcAppNavigationItem v-if="showAll"
+			<NcAppNavigationItem v-show="showAll"
 				:name="t('news', 'All articles')"
 				icon="icon-rss"
 				:to="{ name: ROUTES.ALL }">
@@ -53,7 +53,9 @@
 			</template>
 			<template v-else>
 				<NcAppNavigationItem v-for="topLevelItem in topLevelNav"
+					v-show="showItem(topLevelItem)"
 					:key="topLevelItem.name || topLevelItem.title"
+					:ref="isFolder(topLevelItem) ? 'folder-' + topLevelItem.id : 'feed-' + topLevelItem.id"
 					:name="topLevelItem.name || topLevelItem.title"
 					:icon="''"
 					:open="topLevelItem.opened"
@@ -62,7 +64,9 @@
 					:force-menu="true"
 					@update:open="toggleFolderState(topLevelItem)">
 					<template v-for="feed in topLevelItem.feeds">
-						<NcAppNavigationItem :key="feed.name"
+						<NcAppNavigationItem v-show="showItem(feed)"
+							:key="feed.name"
+							:ref="'feed-' + feed.id"
 							:name="feed.title"
 							:icon="''"
 							:to="{ name: ROUTES.FEED, params: { feedId: feed.id.toString() } }">
@@ -71,7 +75,13 @@
 								<span v-if="feed.faviconLink" style="width: 16px; height: 16px; background-size: contain;" :style="{ 'backgroundImage': 'url(' + feed.faviconLink + ')' }" />
 							</template>
 							<template #counter>
-								<NcCounterBubble v-if="feed.unreadCount > 0">
+								<NcCounterBubble v-show="feed.updateErrorCount > 0"
+									v-tooltip="feed.lastUpdateError"
+									type="highlighted"
+									style="background-color: red">
+									{{ feed.updateErrorCount }}
+								</NcCounterBubble>
+								<NcCounterBubble v-show="feed.unreadCount > 0">
 									{{ feed.unreadCount }}
 								</NcCounterBubble>
 							</template>
@@ -82,15 +92,22 @@
 						</NcAppNavigationItem>
 					</template>
 					<template #icon>
-						<FolderIcon v-if="topLevelItem.feedCount !== undefined" style="width:22px" />
-						<RssIcon v-if="topLevelItem.feedCount === undefined && !topLevelItem.faviconLink" />
-						<span v-if="topLevelItem.feedCount === undefined && topLevelItem.faviconLink" style="height: 16px; width: 16px; background-size: contain;" :style="{ 'backgroundImage': 'url(' + topLevelItem.faviconLink + ')' }" />
+						<FolderAlertIcon v-if="isFolder(topLevelItem) && hasErrorFeeds(topLevelItem)" v-tooltip="t('news', 'Has feeds with errors!')" style="width: 22px; color: red" />
+						<FolderIcon v-if="isFolder(topLevelItem) && !hasErrorFeeds(topLevelItem)" style="width:22px" />
+						<RssIcon v-if="!isFolder(topLevelItem) && !topLevelItem.faviconLink" />
+						<span v-if="!isFolder(topLevelItem) && topLevelItem.faviconLink" style="height: 16px; width: 16px; background-size: contain;" :style="{ 'backgroundImage': 'url(' + topLevelItem.faviconLink + ')' }" />
 					</template>
 					<template #counter>
-						<NcCounterBubble v-if="topLevelItem.feedCount > 0">
+						<NcCounterBubble v-if="topLevelItem.updateErrorCount > 0"
+							v-tooltip="topLevelItem.lastUpdateError"
+							type="highlighted"
+							style="background-color: red">
+							{{ topLevelItem.updateErrorCount }}
+						</NcCounterBubble>
+						<NcCounterBubble v-show="topLevelItem.feedCount > 0">
 							{{ topLevelItem.feedCount }}
 						</NcCounterBubble>
-						<NcCounterBubble v-if="topLevelItem.unreadCount > 0">
+						<NcCounterBubble v-show="topLevelItem.unreadCount > 0">
 							{{ topLevelItem.unreadCount }}
 						</NcCounterBubble>
 					</template>
@@ -119,6 +136,10 @@
 					<EarthIcon />
 				</template>
 			</NcAppNavigationItem>
+			<button v-shortkey="['d']" class="hidden" @shortkey="nextFeed('prev')" />
+			<button v-shortkey="['f']" class="hidden" @shortkey="nextFeed('next')" />
+			<button v-shortkey="['c']" class="hidden" @shortkey="nextFolder('prev')" />
+			<button v-shortkey="['v']" class="hidden" @shortkey="nextFolder('next')" />
 		</template>
 		<template #footer>
 			<NcAppNavigationSettings :name="t('news', 'Settings')">
@@ -154,6 +175,15 @@
 							{{ t('news', 'Reverse ordering (oldest on top)') }}
 						</label>
 					</div>
+					<div>
+						<input id="toggle-disableRefresh"
+							v-model="disableRefresh"
+							type="checkbox"
+							class="checkbox">
+						<label for="toggle-disableRefresh">
+							{{ t('news', 'Disable automatic refresh') }}
+						</label>
+					</div>
 				</div>
 			</NcAppNavigationSettings>
 		</template>
@@ -183,6 +213,7 @@ import FolderIcon from 'vue-material-design-icons/Folder.vue'
 import EyeIcon from 'vue-material-design-icons/Eye.vue'
 import EarthIcon from 'vue-material-design-icons/Earth.vue'
 import FolderPlusIcon from 'vue-material-design-icons/FolderPlus.vue'
+import FolderAlertIcon from 'vue-material-design-icons/FolderAlert.vue'
 import PlusIcon from 'vue-material-design-icons/Plus.vue'
 
 import { ROUTES } from '../routes'
@@ -210,6 +241,7 @@ export default Vue.extend({
 		FolderIcon,
 		EyeIcon,
 		EarthIcon,
+		FolderAlertIcon,
 		FolderPlusIcon,
 		PlusIcon,
 		SidebarFeedLinkActions,
@@ -220,37 +252,28 @@ export default Vue.extend({
 			showAddFeed: false,
 			ROUTES,
 			showHelp: false,
+			polling: null,
+			errorFolder: new Map(),
 		}
 	},
 	computed: {
 		...mapState(['feeds', 'folders', 'items']),
 		topLevelNav(): (Feed | Folder)[] {
-			const showAll = this.$store.getters.showAll
-
-			const feeds: { pinned: Feed[], visible: Feed[], ungrouped: Feed[] } = this.$store.getters.feeds.reduce((result, feed: Feed) => {
+			const feeds: { pinned: Feed[], ungrouped: Feed[] } = this.$store.getters.feeds.reduce((result, feed: Feed) => {
 				if (feed.pinned) result.pinned.push(feed)
-				if (showAll || feed.unreadCount > 0) {
-					result.visible.push(feed)
-					if (feed.folderId === undefined || feed.folderId === null) {
-						result.ungrouped.push(feed)
-					}
+				if (feed.updateErrorCount > 0) this.errorFolder.set('folder-' + feed.folderId, true)
+				if (feed.folderId === undefined || feed.folderId === null) {
+					result.ungrouped.push(feed)
 				}
 				return result
-			}, { pinned: [], visible: [], ungrouped: [] })
+			}, { pinned: [], ungrouped: [] })
 
-			const visibleFolders = this.$store.getters.folders
-				.filter((folder: Folder) => {
-					return showAll || feeds.visible.some((feed: Feed) => feed.folderId === folder.id)
-				})
-				.map((folder: Folder) => {
-					folder.feeds = feeds.visible.filter((feed: Feed) => feed.folderId === folder.id)
-					return folder
-				})
+			const folders = this.$store.getters.folders
 
 			const navItems: (Feed | Folder)[] = [
 				...feeds.pinned,
 				...feeds.ungrouped,
-				...visibleFolders,
+				...folders,
 			]
 
 			return navItems
@@ -304,17 +327,54 @@ export default Vue.extend({
 				this.saveSetting('showAll', newValue)
 			},
 		},
+		disableRefresh: {
+			get() {
+				return this.$store.getters.disableRefresh
+
+			},
+			set(newValue) {
+				if (!newValue) {
+					// refresh feeds every minute
+					this.polling = setInterval(() => {
+						this.$store.dispatch(ACTIONS.FETCH_FEEDS)
+					}, 60000)
+				} else {
+					clearInterval(this.polling)
+				}
+				this.saveSetting('disableRefresh', newValue)
+			},
+		},
+		navFolder() {
+			return this.topLevelNav.filter(item => item.name !== undefined && this.showItem(item))
+		},
+		navFeeds() {
+			return this.navFolder
+				.filter(folder => folder.opened)
+				.reduce((result, folder) => {
+					return result.concat(folder.feeds)
+				}, [])
+				.filter(item => this.showItem(item))
+		},
 	},
 	created() {
 		if (this.$route.query.subscribe_to) {
 			this.showAddFeed = true
 		}
+		if (!this.disableRefresh) {
+			// refresh feeds every minute
+			this.polling = setInterval(() => {
+				this.$store.dispatch(ACTIONS.FETCH_FEEDS)
+			}, 60000)
+		}
 	},
 	mounted() {
 		subscribe('news:global:toggle-help-dialog', () => {
 			this.showHelp = !this.showHelp
 		})
 	},
+	beforeDestroy() {
+		clearInterval(this.polling)
+	},
 	methods: {
 		async saveSetting(key, value) {
 			this.$store.commit(key, { value })
@@ -398,6 +458,77 @@ export default Vue.extend({
 			this.$set(folder, 'opened', !folder.opened)
 			this.$store.dispatch(ACTIONS.FOLDER_OPEN_STATE, { folder })
 		},
+		isActiveFeed(feed) {
+			return this.$route.name === 'feed' ? feed.id === Number(this.$route.params?.feedId) : false
+		},
+		isActiveFolder(folder) {
+			return this.$route.name === 'folder' ? folder.id === Number(this.$route.params?.folderId) : false
+		},
+		hasActiveFeeds(folder) {
+			return folder.feeds.some(item => this.isActiveFeed(item))
+		},
+		hasErrorFeeds(folder) {
+			return this.errorFolder.has('folder-' + folder.id)
+		},
+		showItem(item: Feed | Folder) {
+			if (this.showAll) {
+				return true
+			}
+			if (this.isFolder(item)) {
+				return item.feedCount > 0 || this.isActiveFolder(item) || this.hasActiveFeeds(item) || this.hasErrorFeeds(item)
+			} else {
+				return item.pinned || item.unreadCount > 0 || item.updateErrorCount > 0 || this.isActiveFeed(item)
+			}
+		},
+		getFeedIndex(direction) {
+			if (this.$route.name === 'feed') {
+				const feedIndex = this.navFeeds.findIndex((it) => it.id === Number(this.$route.params.feedId))
+				return direction === 'prev' ? feedIndex - 1 : feedIndex + 1
+			} else {
+				// get current folder index
+				const folderIndex = this.getFolderIndex(direction)
+				// search for the nearest feed
+				if (direction === 'next') {
+					return this.navFeeds.findIndex((feed) => {
+						const feedFolderIndex = this.navFolder.findIndex(folder => folder.id === feed.folderId)
+						return feedFolderIndex >= folderIndex - 1
+					})
+				} else {
+					return this.navFeeds.findLastIndex((feed) => {
+						const feedFolderIndex = this.navFolder.findIndex(folder => folder.id === feed.folderId)
+						return feedFolderIndex <= folderIndex
+					})
+				}
+			}
+		},
+		getFolderIndex(direction) {
+			if (this.$route.name === 'feed') {
+				// use folder id from feed when the active item is a feed
+				const feed = this.navFeeds.find((feed: Feed) => this.isActiveFeed(feed))
+				const folderIndex = feed ? this.navFolder.findIndex((it) => it.id === feed.folderId) : -1
+				return direction === 'prev' ? folderIndex : folderIndex + 1
+			} else {
+				const folderIndex = this.navFolder.findIndex((it) => it.id === Number(this.$route.params.folderId))
+				return direction === 'prev' ? folderIndex - 1 : folderIndex + 1
+			}
+		},
+		nextFeed(direction) {
+			const newIndex = this.getFeedIndex(direction)
+			if (newIndex >= 0 && newIndex < this.navFeeds.length) {
+				const feedId = this.navFeeds[newIndex].id.toString()
+				this.$router.push({ name: 'feed', params: { feedId } })
+				this.$refs['feed-' + feedId][0].$el.scrollIntoView({ behavior: 'auto', block: 'nearest' })
+
+			}
+		},
+		nextFolder(direction) {
+			const newIndex = this.getFolderIndex(direction)
+			if (newIndex >= 0 && newIndex < this.navFolder.length) {
+				const folderId = this.navFolder[newIndex].id.toString()
+				this.$router.push({ name: 'folder', params: { folderId } })
+				this.$refs['folder-' + folderId][0].$el.scrollIntoView({ behavior: 'auto', block: 'nearest' })
+			}
+		},
 	},
 })