Add feature to Group starred Items per Feed

CHANGELOG.md

@@ -4,6 +4,10 @@ The format is mostly based on [Keep a Changelog](https://keepachangelog.com/en/1
 
 You can also check [on GitHub](https://github.com/nextcloud/news/releases), the release notes there are generated automatically and include every pull request.
 
+# Unreleased
+### Changed
+- Add feature to Group starred Items per Feed
+
 # Unreleased
 ## [26.x.x]
 ### Changed

src/components/Sidebar.vue

@@ -41,7 +41,26 @@
 					<RssIcon />
 				</template>
 			</NcAppNavigationItem>
-			<NcAppNavigationItem :name="t('news', 'Starred')" icon="icon-starred" :to="{ name: ROUTES.STARRED }">
+			<NcAppNavigationItem :name="t('news', 'Starred')"
+				icon="icon-starred"
+				:to="{ name: ROUTES.STARRED }"
+				:allow-collapse="true"
+				:force-menu="true">
+				<template v-for="(group) in GroupedStars">
+					<NcAppNavigationItem :key="group.feed.name"
+						:ref="'starredfeed-' + group.feed.id"
+						:name="group.feed.title"
+						:icon="''"
+						:to="{ name: ROUTES.STARREDFEED, params: { feedId: group.feed.id.toString() } }">
+						<template #icon>
+							<RssIcon v-if="!group.feed.faviconLink" />
+							<span v-if="group.feed.faviconLink" style="width: 16px; height: 16px; background-size: contain;" :style="{ 'backgroundImage': 'url(' + group.feed.faviconLink + ')' }" />
+						</template>
+						<template #counter>
+							<NcCounterBubble :count="group.items.length" />
+						</template>
+					</NcAppNavigationItem>
+				</template>
 				<template #counter>
 					<NcCounterBubble :count="items.starredCount" />
 				</template>
@@ -283,6 +302,7 @@ import HelpModal from './modals/HelpModal.vue'
 import FeedInfoTable from './modals/FeedInfoTable.vue'
 import { Folder } from '../types/Folder'
 import { Feed } from '../types/Feed'
+import { FeedItem } from '../types/FeedItem'
 
 export default Vue.extend({
 	components: {
@@ -371,6 +391,24 @@ export default Vue.extend({
 
 			return navItems
 		},
+		GroupedStars(): Array<FeedItem> {
+			const GroupedStars = this.$store.getters.starred.reduce((groups, item: FeedItem) => {
+				const groupKey = item.feedId
+				if (!groups[groupKey]) {
+					let feed: Feed = this.$store.getters.feeds.find((feed: Feed) => feed.id === groupKey)
+					if (feed === undefined) {
+						feed = {
+							id: groupKey,
+							title: t('news', 'Unknown feed'),
+						}
+					}
+					groups[groupKey] = { items: [], feed }
+				}
+				groups[groupKey].items.push(item)
+				return groups
+			}, {})
+			return Object.values(GroupedStars)
+		},
 		loading: {
 			get() {
 				return this.$store.getters.loading

src/components/routes/Starred.vue

@@ -4,7 +4,7 @@
 		@load-more="fetchMore()">
 		<template #header>
 			{{ t('news', 'Starred') }}
-			<NcCounterBubble class="counter-bubble" :count="items.starredCount" />
+			<NcCounterBubble class="counter-bubble" :count="feedId ? starred.length : items.starredCount" />
 		</template>
 	</ContentTemplate>
 </template>
@@ -25,9 +25,19 @@ export default Vue.extend({
 		ContentTemplate,
 		NcCounterBubble,
 	},
+	props: {
+		feedId: {
+			type: String,
+			required: false,
+			default: undefined,
+		},
+	},
 	computed: {
 		...mapState(['items']),
 		starred(): FeedItem[] {
+			if (this.feedId) {
+				return this.$store.getters.starred.filter((item: FeedItem) => item.feedId === Number(this.feedId))
+			}
 			return this.$store.getters.starred
 		},
 	},

src/routes/index.ts

@@ -12,6 +12,7 @@ import store from './../store/app'
 export const ROUTES = {
 	EXPLORE: 'explore',
 	STARRED: 'starred',
+	STARREDFEED: 'starredfeed',
 	UNREAD: 'unread',
 	FEED: 'feed',
 	FOLDER: 'folder',
@@ -65,6 +66,12 @@ const routes = [
 		component: StarredPanel,
 		props: true,
 	},
+	{
+		name: ROUTES.STARREDFEED,
+		path: '/starredfeeds/:feedId',
+		component: StarredPanel,
+		props: true,
+	},
 	{
 		name: ROUTES.UNREAD,
 		path: '/unread',