Add feature to Group starred Items per Feed

src/components/Sidebar.vue

@@ -41,7 +41,23 @@
 					<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, index) 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>{{ group.items.length }}</NcCounterBubble>
+						</template>
+					</NcAppNavigationItem>
+				</template>
 				<template #counter>
 					<NcCounterBubble :count="items.starredCount" />
 				</template>
@@ -283,6 +299,7 @@
 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 +388,23 @@
 
 			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

@@ -25,9 +25,18 @@
 		ContentTemplate,
 		NcCounterBubble,
 	},
+	props: {
+		feedId: {
+			type: String,
+			required: false,
+		},
+	},
 	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',
@@ -36,6 +37,9 @@ const getInitialRoute = function() {
 		}
 	case '2':
 		return { name: ROUTES.STARRED }
+	case '2.5':
+		params.feedId = store.state.lastViewedFeedId
+		return { name: ROUTES.STARREDFEED, params }
 	case '3':
 		return { name: ROUTES.ALL }
 	case '5':
@@ -65,6 +69,12 @@ const routes = [
 		component: StarredPanel,
 		props: true,
 	},
+	{
+		name: ROUTES.STARREDFEED,
+		path: '/starredfeeds/:feedId',
+		component: StarredPanel,
+		props: true,
+	},
 	{
 		name: ROUTES.UNREAD,
 		path: '/unread',