From 5e5dcf5559690794b83f9414a8350026bbf9f310 Mon Sep 17 00:00:00 2001
From: Devlin Junker <devlin.junker@gmail.com>
Date: Fri, 25 Aug 2023 07:42:12 -0700
Subject: [PATCH 1/2] add Feed component and filtering in FeedItemDisplayList

Signed-off-by: Devlin Junker <devlin.junker@gmail.com>
---
 src/components/Feed.vue                |  85 +++++++++++++++
 src/components/FeedItemDisplay.vue     |   9 +-
 src/components/FeedItemDisplayList.vue | 145 ++++++++++++++++++++++---
 src/components/FeedItemRow.vue         |  12 +-
 src/components/Sidebar.vue             |  28 +++--
 src/components/Starred.vue             |  40 ++++---
 src/components/Unread.vue              |  30 +++--
 src/dataservices/item.service.ts       |  23 ++++
 src/routes/index.ts                    |   8 ++
 src/store/item.ts                      |  11 ++
 src/types/FeedItem.ts                  |   1 +
 11 files changed, 321 insertions(+), 71 deletions(-)
 create mode 100644 src/components/Feed.vue

diff --git a/src/components/Feed.vue b/src/components/Feed.vue
new file mode 100644
index 000000000..33c5ed6dd
--- /dev/null
+++ b/src/components/Feed.vue
@@ -0,0 +1,85 @@
+<template>
+	<div class="route-container">
+		<div class="header">
+			{{ feed ? feed.title : '' }}
+			<NcCounterBubble v-if="feed" class="counter-bubble">
+				{{ feed.unreadCount }}
+			</NcCounterBubble>
+		</div>
+
+		<FeedItemDisplayList :items="items" :fetch-key="'feed-'+feedId" @load-more="fetchMore()" />
+	</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+import { mapState } from 'vuex'
+
+import NcCounterBubble from '@nextcloud/vue/dist/Components/NcCounterBubble.js'
+
+import FeedItemDisplayList from './FeedItemDisplayList.vue'
+
+import { FeedItem } from '../types/FeedItem'
+import { ACTIONS, MUTATIONS } from '../store'
+import { Feed } from '../types/Feed'
+
+export default Vue.extend({
+	components: {
+		NcCounterBubble,
+		FeedItemDisplayList,
+	},
+	props: {
+		feedId: {
+			type: String,
+			required: true,
+		},
+	},
+	computed: {
+		...mapState(['items', 'feeds']),
+		feed(): Feed {
+			return this.$store.getters.feeds.find((feed: Feed) => feed.id === this.id)
+		},
+		items(): FeedItem[] {
+			return this.$store.state.items.allItems.filter((item: FeedItem) => {
+				return item.feedId === this.id
+			}) || []
+		},
+		id(): number {
+			return Number(this.feedId)
+		},
+	},
+	created() {
+		this.$store.commit(MUTATIONS.SET_SELECTED_ITEM, { id: undefined })
+		this.fetchMore()
+		this.$watch(() => this.$route.params, this.fetchMore)
+
+	},
+	methods: {
+		async fetchMore() {
+			if (!this.$store.state.items.fetchingItems['feed-' + this.feedId]) {
+			  this.$store.dispatch(ACTIONS.FETCH_FEED_ITEMS, { feedId: this.id, start: this.items && this.items.length > 0 ? this.items[this.items.length - 1].id : 0 })
+			}
+		},
+	},
+})
+</script>
+
+<style scoped>
+.route-container {
+	height: 100%;
+}
+
+.header {
+	padding-left: 50px;
+	position: absolute;
+	top: 1em;
+	font-weight: 700;
+}
+
+.counter-bubble {
+	display: inline-block;
+	vertical-align: sub;
+	margin-left: 10px;
+}
+
+</style>
diff --git a/src/components/FeedItemDisplay.vue b/src/components/FeedItemDisplay.vue
index 5818fad51..1d7d5a843 100644
--- a/src/components/FeedItemDisplay.vue
+++ b/src/components/FeedItemDisplay.vue
@@ -183,7 +183,7 @@ export default Vue.extend({
 
 </script>
 
-<style>
+<style scoped>
 	.feed-item-display {
 		max-height: 100%;
 		overflow-y: hidden;
@@ -228,11 +228,10 @@ export default Vue.extend({
 	.article h1 {
 		font-weight: bold;
     font-size: 17px;
-		margin-top: 25px;
 	}
 
 	.action-bar {
-		padding: 20px;
+		padding: 0px 20px 0px 20px;
 
 		display: flex;
 		justify-content: right
@@ -242,4 +241,8 @@ export default Vue.extend({
 		cursor: pointer;
 		margin: 5px;
 	}
+
+	.action-bar .material-design-icon:hover {
+		color: var(--color-text-light);
+	}
 </style>
diff --git a/src/components/FeedItemDisplayList.vue b/src/components/FeedItemDisplayList.vue
index e86aa93c1..11be6266a 100644
--- a/src/components/FeedItemDisplayList.vue
+++ b/src/components/FeedItemDisplayList.vue
@@ -1,17 +1,44 @@
 <template>
-	<div class="feed-item-display-container">
-		<VirtualScroll :reached-end="reachedEnd"
-			:fetch-key="fetchKey"
-			@load-more="fetchMore()">
-			<template v-if="items && items.length > 0">
-				<template v-for="item in items">
-					<FeedItemRow :key="item.id" :item="item" />
+	<div>
+		<div style="justify-content: right; display: flex">
+			<NcActions class="filter-container" :force-menu="true">
+				<template #icon>
+					<FilterIcon />
 				</template>
-			</template>
-		</VirtualScroll>
+				<NcActionButton v-if="config.unreadFilter" @click="toggleFilter(unreadFilter)">
+					<template #default>
+						{{ t("news", "Unread") }}
+					</template>
+					<template #icon>
+						<EyeIcon v-if="filter !== unreadFilter" />
+						<EyeCheckIcon v-if="filter === unreadFilter" />
+					</template>
+				</NcActionButton>
+				<NcActionButton v-if="config.starFilter" @click="toggleFilter(starFilter)">
+					<template #default>
+						{{ t("news", "Starred") }}
+					</template>
+					<template #icon>
+						<StarIcon v-if="filter !== starFilter" />
+						<StarCheckIcon v-if="filter === starFilter" />
+					</template>
+				</NcActionButton>
+			</NcActions>
+		</div>
+		<div class="feed-item-display-container">
+			<VirtualScroll :reached-end="reachedEnd"
+				:fetch-key="fetchKey"
+				@load-more="fetchMore()">
+				<template v-if="items && items.length > 0">
+					<template v-for="item in filterSortedItems()">
+						<FeedItemRow :key="item.id" :item="item" />
+					</template>
+				</template>
+			</VirtualScroll>
 
-		<div v-if="selected !== undefined" class="feed-item-container">
-			<FeedItemDisplay :item="selected" />
+			<div v-if="selected !== undefined" class="feed-item-container">
+				<FeedItemDisplay :item="selected" />
+			</div>
 		</div>
 	</div>
 </template>
@@ -19,6 +46,15 @@
 <script lang="ts">
 import Vue from 'vue'
 
+import FilterIcon from 'vue-material-design-icons/Filter.vue'
+import StarIcon from 'vue-material-design-icons/Star.vue'
+import StarCheckIcon from 'vue-material-design-icons/StarCheck.vue'
+import EyeIcon from 'vue-material-design-icons/Eye.vue'
+import EyeCheckIcon from 'vue-material-design-icons/EyeCheck.vue'
+
+import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
+import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
+
 import VirtualScroll from './VirtualScroll.vue'
 import FeedItemRow from './FeedItemRow.vue'
 import FeedItemDisplay from './FeedItemDisplay.vue'
@@ -30,20 +66,49 @@ export default Vue.extend({
 		VirtualScroll,
 		FeedItemRow,
 		FeedItemDisplay,
+		FilterIcon,
+		StarIcon,
+		StarCheckIcon,
+		EyeIcon,
+		EyeCheckIcon,
+		NcActions,
+		NcActionButton,
 	},
 	props: {
 		items: {
-			type: Array,
+			type: Array<FeedItem>,
 			required: true,
 		},
 		fetchKey: {
 			type: String,
 			required: true,
 		},
+		config: {
+			type: Object,
+			default: () => {
+				return {
+					unreadFilter: true,
+					starFilter: true,
+				}
+			},
+		},
 	},
 	data() {
 		return {
 			mounted: false,
+
+			// no filter to start
+			filter: () => { return true as boolean },
+
+			// Always want to sort by date (most recent first)
+			sort: (a: FeedItem, b: FeedItem) => {
+				if (a.pubDate > b.pubDate) {
+					return -1
+				} else {
+					return 1
+				}
+			},
+			cache: [] as FeedItem[] | undefined,
 		}
 	},
 	computed: {
@@ -61,22 +126,70 @@ export default Vue.extend({
 		fetchMore() {
 			this.$emit('load-more')
 		},
+		noFilter(): boolean {
+			return true
+		},
+		starFilter(item: FeedItem): boolean {
+			return item.starred
+		},
+		unreadFilter(item: FeedItem): boolean {
+			return item.unread
+		},
+		toggleFilter(filter: () => boolean) {
+			if (this.filter === filter) {
+				this.filter = this.noFilter
+				if (filter === this.unreadFilter) {
+					this.cache = undefined
+				}
+			} else {
+				this.filter = filter as () => boolean
+			}
+		},
+		filterSortedItems(): FeedItem[] {
+			let response = [...this.items] as FeedItem[]
+
+			// if we're filtering on unread, we want to cache the unread items when the user presses the filter button
+			// that way when the user opens an item, it won't be removed from the displayed list of items (once it's no longer unread)
+			if (this.filter === this.unreadFilter) {
+				if (!this.cache) {
+					if (this.items.length > 0) {
+						this.cache = this.items.filter(this.unreadFilter)
+					}
+				} else if (this.items.length > (this.cache?.length)) {
+					for (const item of this.items) {
+						if (item.unread && this.cache.find((unread: FeedItem) => unread.id === item.id) === undefined) {
+							this.cache.push(item)
+						}
+					}
+				}
+				response = [...this.cache as FeedItem[]]
+			} else {
+				response = response.filter(this.filter)
+			}
+
+			return response.sort(this.sort)
+		},
 	},
 })
 </script>
 
 <style scoped>
+	.virtual-scroll {
+		border-top: 1px solid var(--color-border);
+		width: 100%;
+	}
+
 	.feed-item-display-container {
 		display: flex;
 		height: 100%;
 	}
 
-	.virtual-scroll {
-		width: 100%;
-	}
-
 	.feed-item-container {
 		max-width: 50%;
 		overflow-y: hidden;
 	}
+
+	.filter-container {
+		padding: 5px;
+	}
 </style>
diff --git a/src/components/FeedItemRow.vue b/src/components/FeedItemRow.vue
index c7fcfd6ec..6d436ba01 100644
--- a/src/components/FeedItemRow.vue
+++ b/src/components/FeedItemRow.vue
@@ -210,23 +210,23 @@ export default Vue.extend({
     height: 30px;
 	}
 
-	.material-design-icon {
+	.feed-item-row .button-container .material-design-icon {
 		color: var(--color-text-lighter)
 	}
 
-	.material-design-icon:hover {
+	.feed-item-row .button-container .material-design-icon:hover {
 		color: var(--color-text-light);
 	}
 
-	.material-design-icon.rss-icon:hover {
+	.feed-item-row .button-container .material-design-icon.rss-icon:hover {
 		color: #555555;
 	}
 
 	.material-design-icon.starred {
-		color: rgb(255, 204, 0);
+		color: rgb(255, 204, 0) !important;
 	}
 
-	.material-design-icon.keep-unread {
+	.feed-item-row .button-container .material-design-icon.keep-unread {
 		color: var(--color-main-text);
 	}
 
@@ -234,7 +234,7 @@ export default Vue.extend({
 		color: #555555;
 	}
 
-	.eye-check-icon {
+	.feed-item-row .button-container .eye-check-icon {
 		color: var(--color-primary-light);
 	}
 </style>
diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue
index c5499c585..9a3f97bfb 100644
--- a/src/components/Sidebar.vue
+++ b/src/components/Sidebar.vue
@@ -36,17 +36,17 @@
 			<NcAppNavigationItem v-for="topLevelItem in topLevelNav"
 				:key="topLevelItem.name || topLevelItem.title"
 				:title="topLevelItem.name || topLevelItem.title"
-				:icon="topLevelItem.name !== undefined ? 'icon-folder': ''"
+				:icon="isFolder(topLevelItem) ? 'icon-folder': ''"
+				:to="isFolder(topLevelItem) ? {} : { name: ROUTES.FEED, params: { feedId: topLevelItem.id.toString() } }"
 				:allow-collapse="true">
 				<template #default>
 					<NcAppNavigationItem v-for="feed in topLevelItem.feeds"
 						:key="feed.name"
-						:title="feed.title">
+						:title="feed.title"
+						:to="{ name: ROUTES.FEED, props: { feedId: feed.id } }">
 						<template #icon>
-							<img v-if="feed.faviconLink"
-								:src="feed.faviconLink"
-								alt="feedIcon">
-							<div v-if="!feed.faviconLink" class="icon-rss" />
+							<RssIcon v-if="!feed.faviconLink" />
+							<span v-if="feed.faviconLink" style="width: 24px; background-size: contain;" :style="{ 'backgroundImage': 'url(' + feed.faviconLink + ')' }" />
 						</template>
 						<template #actions>
 							<NcActionButton icon="icon-checkmark"
@@ -100,8 +100,17 @@
 						</template>
 					</NcAppNavigationItem>
 				</template>
-				<template v-if="topLevelItem.feedCount > 0" #counter>
-					<NcCounterBubble>{{ topLevelItem.feedCount }}</NcCounterBubble>
+				<template #icon>
+					<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 + ')' }" />
+				</template>
+				<template #counter>
+					<NcCounterBubble v-if="topLevelItem.feedCount > 0">
+						{{ topLevelItem.feedCount }}
+					</NcCounterBubble>
+					<NcCounterBubble v-if="topLevelItem.unreadCount > 0">
+						{{ topLevelItem.unreadCount }}
+					</NcCounterBubble>
 				</template>
 				<template #actions>
 					<NcActionButton icon="icon-checkmark" @click="alert('TODO: Mark read')">
@@ -199,6 +208,9 @@ export default Vue.extend({
 		alert(msg: string) {
 			window.alert(msg)
 		},
+		isFolder(item: Feed | Folder) {
+			return (item as Folder).name !== undefined
+		},
 	},
 })
 
diff --git a/src/components/Starred.vue b/src/components/Starred.vue
index 29e7d3bf3..3d5845484 100644
--- a/src/components/Starred.vue
+++ b/src/components/Starred.vue
@@ -7,7 +7,10 @@
 			</NcCounterBubble>
 		</div>
 
-		<FeedItemDisplayList :items="starred" :fetch-key="'starred'" @load-more="fetchMore()" />
+		<FeedItemDisplayList :items="starred"
+			:fetch-key="'starred'"
+			:config="{ unreadFilter: true }"
+			@load-more="fetchMore()" />
 	</div>
 </template>
 
@@ -47,26 +50,21 @@ export default Vue.extend({
 })
 </script>
 
-<style>
-.route-container {
-	height: 100%;
-}
+<style scoped>
+	.route-container {
+		height: 100%;
+	}
 
-.header {
-	padding-left: 50px;
-	position: absolute;
-	top: 1em;
-	font-weight: 700;
-}
+	.header {
+		padding-left: 50px;
+		position: absolute;
+		top: 1em;
+		font-weight: 700;
+	}
 
-.counter-bubble {
-	display: inline-block;
-	vertical-align: sub;
-	margin-left: 10px;
-}
-
-.virtual-scroll {
-	margin-top: 50px;
-	border-top: 1px solid var(--color-border);
-}
+	.counter-bubble {
+		display: inline-block;
+		vertical-align: sub;
+		margin-left: 10px;
+	}
 </style>
diff --git a/src/components/Unread.vue b/src/components/Unread.vue
index 9a59f529b..d012ca43b 100644
--- a/src/components/Unread.vue
+++ b/src/components/Unread.vue
@@ -10,6 +10,7 @@
 		<FeedItemDisplayList v-if="unread()"
 			:items="unread()"
 			:fetch-key="'unread'"
+			:config="{ starFilter: true }"
 			@load-more="fetchMore()" />
 	</div>
 </template>
@@ -74,22 +75,17 @@ export default Vue.extend({
 })
 </script>
 
-<style>
-.header {
-	padding-left: 50px;
-	position: absolute;
-	top: 1em;
-	font-weight: 700;
-}
-
-.counter-bubble {
-	display: inline-block;
-	vertical-align: sub;
-	margin-left: 10px;
-}
+<style scoped>
+	.header {
+		padding-left: 50px;
+		position: absolute;
+		top: 1em;
+		font-weight: 700;
+	}
 
-.virtual-scroll {
-	margin-top: 50px;
-	border-top: 1px solid var(--color-border);
-}
+	.counter-bubble {
+		display: inline-block;
+		vertical-align: sub;
+		margin-left: 10px;
+	}
 </style>
diff --git a/src/dataservices/item.service.ts b/src/dataservices/item.service.ts
index cddd1e978..6d4aabdb4 100644
--- a/src/dataservices/item.service.ts
+++ b/src/dataservices/item.service.ts
@@ -6,6 +6,7 @@ import { API_ROUTES } from '../types/ApiRoutes'
 import { FeedItem } from '../types/FeedItem'
 
 export const ITEM_TYPES = {
+	ALL: 0,
 	STARRED: 2,
 	UNREAD: 6,
 }
@@ -14,6 +15,7 @@ export class ItemService {
 
 	static debounceFetchStarred = _.debounce(ItemService.fetchStarred, 400, { leading: true })
 	static debounceFetchUnread = _.debounce(ItemService.fetchUnread, 400, { leading: true })
+	static debounceFetchFeedItems = _.debounce(ItemService.fetchFeedItems, 400, { leading: true })
 
 	/**
 	 * Makes backend call to retrieve starred items
@@ -53,6 +55,27 @@ export class ItemService {
 		})
 	}
 
+	/**
+	 * Makes backend call to retrieve items from a specific feed
+	 *
+	 * @param feedId id number of feed to retrieve items for
+	 * @param start (id of last unread item loaded)
+	 * @return {AxiosResponse} response object containing backend request response
+	 */
+	static async fetchFeedItems(feedId: number, start: number): Promise<AxiosResponse> {
+		return await axios.get(API_ROUTES.ITEMS, {
+			params: {
+				limit: 40,
+				oldestFirst: false,
+				search: '',
+				showAll: false,
+				type: ITEM_TYPES.ALL,
+				offset: start,
+				id: feedId,
+			},
+		})
+	}
+
 	/**
 	 * Makes backend call to mark item as read/unread in DB
 	 *
diff --git a/src/routes/index.ts b/src/routes/index.ts
index b572742c8..0a67042b7 100644
--- a/src/routes/index.ts
+++ b/src/routes/index.ts
@@ -3,11 +3,13 @@ import VueRouter from 'vue-router'
 import ExplorePanel from '../components/Explore.vue'
 import StarredPanel from '../components/Starred.vue'
 import UnreadPanel from '../components/Unread.vue'
+import FeedPanel from '../components/Feed.vue'
 
 export const ROUTES = {
 	EXPLORE: 'explore',
 	STARRED: 'starred',
 	UNREAD: 'unread',
+	FEED: 'feeed',
 }
 
 const getInitialRoute = function() {
@@ -41,6 +43,12 @@ const routes = [
 		component: UnreadPanel,
 		props: true,
 	},
+	{
+		name: ROUTES.FEED,
+		path: '/feed/:feedId',
+		component: FeedPanel,
+		props: true,
+	},
 ]
 
 export default new VueRouter({
diff --git a/src/store/item.ts b/src/store/item.ts
index 982e75979..f409305f1 100644
--- a/src/store/item.ts
+++ b/src/store/item.ts
@@ -11,6 +11,7 @@ export const FEED_ITEM_ACTION_TYPES = {
 	MARK_UNREAD: 'MARK_UNREAD',
 	STAR_ITEM: 'STAR_ITEM',
 	UNSTAR_ITEM: 'UNSTAR_ITEM',
+	FETCH_FEED_ITEMS: 'FETCH_FEED_ITEMS',
 }
 
 export type ItemState = {
@@ -77,6 +78,16 @@ export const actions = {
 		}
 		commit(FEED_ITEM_MUTATION_TYPES.SET_FETCHING, { key: 'starred', fetching: false })
 	},
+	async [FEED_ITEM_ACTION_TYPES.FETCH_FEED_ITEMS]({ commit }: ActionParams, { 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)
+
+		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 })
+		}
+		commit(FEED_ITEM_MUTATION_TYPES.SET_FETCHING, { key: 'feed-' + feedId, fetching: false })
+	},
 	[FEED_ITEM_ACTION_TYPES.MARK_READ]({ commit }: ActionParams, { item }: { item: FeedItem}) {
 		ItemService.markRead(item, true)
 
diff --git a/src/types/FeedItem.ts b/src/types/FeedItem.ts
index dcd8c255a..879a663f4 100644
--- a/src/types/FeedItem.ts
+++ b/src/types/FeedItem.ts
@@ -5,4 +5,5 @@ export type FeedItem = {
   starred: boolean;
   feedId: number;
   guidHash: string;
+  pubDate: number;
 };

From 5c44d913a87341d5300ddcf80debb7c88329caa7 Mon Sep 17 00:00:00 2001
From: Devlin Junker <devlin.junker@gmail.com>
Date: Sat, 26 Aug 2023 22:31:24 -0700
Subject: [PATCH 2/2] basic unit tests

Signed-off-by: Devlin Junker <devlin.junker@gmail.com>
---
 src/components/FeedItemDisplayList.vue        | 18 +++--
 src/components/Sidebar.vue                    |  3 +
 src/components/{ => routes}/Explore.vue       |  6 +-
 src/components/{ => routes}/Feed.vue          |  9 +--
 src/components/{ => routes}/Starred.vue       |  8 +-
 src/components/{ => routes}/Unread.vue        |  8 +-
 src/routes/index.ts                           | 10 +--
 .../components/{ => routes}/Explore.spec.ts   |  2 +-
 .../unit/components/routes/Feed.spec.ts       | 75 +++++++++++++++++++
 .../components/{ => routes}/Starred.spec.ts   |  4 +-
 .../components/{ => routes}/Unread.spec.ts    |  4 +-
 .../unit/services/item.service.spec.ts        | 19 ++++-
 tests/javascript/unit/store/item.spec.ts      | 15 ++++
 13 files changed, 147 insertions(+), 34 deletions(-)
 rename src/components/{ => routes}/Explore.vue (93%)
 rename src/components/{ => routes}/Feed.vue (89%)
 rename src/components/{ => routes}/Starred.vue (86%)
 rename src/components/{ => routes}/Unread.vue (90%)
 rename tests/javascript/unit/components/{ => routes}/Explore.spec.ts (90%)
 create mode 100644 tests/javascript/unit/components/routes/Feed.spec.ts
 rename tests/javascript/unit/components/{ => routes}/Starred.spec.ts (87%)
 rename tests/javascript/unit/components/{ => routes}/Unread.spec.ts (89%)

diff --git a/src/components/FeedItemDisplayList.vue b/src/components/FeedItemDisplayList.vue
index 11be6266a..f7ba8d3ab 100644
--- a/src/components/FeedItemDisplayList.vue
+++ b/src/components/FeedItemDisplayList.vue
@@ -5,7 +5,7 @@
 				<template #icon>
 					<FilterIcon />
 				</template>
-				<NcActionButton v-if="config.unreadFilter" @click="toggleFilter(unreadFilter)">
+				<NcActionButton v-if="cfg.unreadFilter" @click="toggleFilter(unreadFilter)">
 					<template #default>
 						{{ t("news", "Unread") }}
 					</template>
@@ -14,7 +14,7 @@
 						<EyeCheckIcon v-if="filter === unreadFilter" />
 					</template>
 				</NcActionButton>
-				<NcActionButton v-if="config.starFilter" @click="toggleFilter(starFilter)">
+				<NcActionButton v-if="cfg.starFilter" @click="toggleFilter(starFilter)">
 					<template #default>
 						{{ t("news", "Starred") }}
 					</template>
@@ -45,6 +45,7 @@
 
 <script lang="ts">
 import Vue from 'vue'
+import _ from 'lodash'
 
 import FilterIcon from 'vue-material-design-icons/Filter.vue'
 import StarIcon from 'vue-material-design-icons/Star.vue'
@@ -61,6 +62,11 @@ import FeedItemDisplay from './FeedItemDisplay.vue'
 
 import { FeedItem } from '../types/FeedItem'
 
+const DEFAULT_DISPLAY_LIST_CONFIG = {
+	starFilter: true,
+	unreadFilter: true,
+}
+
 export default Vue.extend({
 	components: {
 		VirtualScroll,
@@ -86,10 +92,7 @@ export default Vue.extend({
 		config: {
 			type: Object,
 			default: () => {
-				return {
-					unreadFilter: true,
-					starFilter: true,
-				}
+				return DEFAULT_DISPLAY_LIST_CONFIG
 			},
 		},
 	},
@@ -118,6 +121,9 @@ export default Vue.extend({
 		reachedEnd(): boolean {
 			return this.mounted && this.$store.state.items.allItemsLoaded[this.fetchKey] === true
 		},
+		cfg() {
+			return _.defaults({ ...this.config }, DEFAULT_DISPLAY_LIST_CONFIG)
+		},
 	},
 	mounted() {
 		this.mounted = true
diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue
index 9a3f97bfb..eedead3b0 100644
--- a/src/components/Sidebar.vue
+++ b/src/components/Sidebar.vue
@@ -149,6 +149,8 @@ import NcAppNavigationNewItem from '@nextcloud/vue/dist/Components/NcAppNavigati
 import NcCounterBubble from '@nextcloud/vue/dist/Components/NcCounterBubble.js'
 import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
 
+import RssIcon from 'vue-material-design-icons/Rss.vue'
+
 import { ROUTES } from '../routes'
 import { ACTIONS, AppState } from '../store'
 
@@ -179,6 +181,7 @@ export default Vue.extend({
 		NcCounterBubble,
 		NcActionButton,
 		AddFeed,
+		RssIcon,
 	},
 	data: () => {
 		return {
diff --git a/src/components/Explore.vue b/src/components/routes/Explore.vue
similarity index 93%
rename from src/components/Explore.vue
rename to src/components/routes/Explore.vue
index 067dd61b3..5edca3dfe 100644
--- a/src/components/Explore.vue
+++ b/src/components/routes/Explore.vue
@@ -38,10 +38,10 @@ import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import axios from '@nextcloud/axios'
 import * as router from '@nextcloud/router'
 
-import AddFeed from './AddFeed.vue'
+import AddFeed from '../AddFeed.vue'
 
-import { ExploreSite } from '../types/ExploreSite'
-import { Feed } from '../types/Feed'
+import { ExploreSite } from '../../types/ExploreSite'
+import { Feed } from '../../types/Feed'
 
 const ExploreComponent = Vue.extend({
 	components: {
diff --git a/src/components/Feed.vue b/src/components/routes/Feed.vue
similarity index 89%
rename from src/components/Feed.vue
rename to src/components/routes/Feed.vue
index 33c5ed6dd..6f8f9c922 100644
--- a/src/components/Feed.vue
+++ b/src/components/routes/Feed.vue
@@ -17,11 +17,11 @@ import { mapState } from 'vuex'
 
 import NcCounterBubble from '@nextcloud/vue/dist/Components/NcCounterBubble.js'
 
-import FeedItemDisplayList from './FeedItemDisplayList.vue'
+import FeedItemDisplayList from '../FeedItemDisplayList.vue'
 
-import { FeedItem } from '../types/FeedItem'
-import { ACTIONS, MUTATIONS } from '../store'
-import { Feed } from '../types/Feed'
+import { FeedItem } from '../../types/FeedItem'
+import { ACTIONS, MUTATIONS } from '../../store'
+import { Feed } from '../../types/Feed'
 
 export default Vue.extend({
 	components: {
@@ -52,7 +52,6 @@ export default Vue.extend({
 		this.$store.commit(MUTATIONS.SET_SELECTED_ITEM, { id: undefined })
 		this.fetchMore()
 		this.$watch(() => this.$route.params, this.fetchMore)
-
 	},
 	methods: {
 		async fetchMore() {
diff --git a/src/components/Starred.vue b/src/components/routes/Starred.vue
similarity index 86%
rename from src/components/Starred.vue
rename to src/components/routes/Starred.vue
index 3d5845484..d3df5a89f 100644
--- a/src/components/Starred.vue
+++ b/src/components/routes/Starred.vue
@@ -9,7 +9,7 @@
 
 		<FeedItemDisplayList :items="starred"
 			:fetch-key="'starred'"
-			:config="{ unreadFilter: true }"
+			:config="{ starFilter: false }"
 			@load-more="fetchMore()" />
 	</div>
 </template>
@@ -20,10 +20,10 @@ import { mapState } from 'vuex'
 
 import NcCounterBubble from '@nextcloud/vue/dist/Components/NcCounterBubble.js'
 
-import FeedItemDisplayList from './FeedItemDisplayList.vue'
+import FeedItemDisplayList from '../FeedItemDisplayList.vue'
 
-import { FeedItem } from '../types/FeedItem'
-import { ACTIONS, MUTATIONS } from '../store'
+import { FeedItem } from '../../types/FeedItem'
+import { ACTIONS, MUTATIONS } from '../../store'
 
 export default Vue.extend({
 	components: {
diff --git a/src/components/Unread.vue b/src/components/routes/Unread.vue
similarity index 90%
rename from src/components/Unread.vue
rename to src/components/routes/Unread.vue
index d012ca43b..230a8ea04 100644
--- a/src/components/Unread.vue
+++ b/src/components/routes/Unread.vue
@@ -10,7 +10,7 @@
 		<FeedItemDisplayList v-if="unread()"
 			:items="unread()"
 			:fetch-key="'unread'"
-			:config="{ starFilter: true }"
+			:config="{ unreadFilter: false }"
 			@load-more="fetchMore()" />
 	</div>
 </template>
@@ -21,10 +21,10 @@ import { mapState } from 'vuex'
 
 import NcCounterBubble from '@nextcloud/vue/dist/Components/NcCounterBubble.js'
 
-import FeedItemDisplayList from './FeedItemDisplayList.vue'
+import FeedItemDisplayList from '../FeedItemDisplayList.vue'
 
-import { FeedItem } from '../types/FeedItem'
-import { ACTIONS, MUTATIONS } from '../store'
+import { FeedItem } from '../../types/FeedItem'
+import { ACTIONS, MUTATIONS } from '../../store'
 
 type UnreadItemState = {
 	// need cache so we aren't always removing items when they get read
diff --git a/src/routes/index.ts b/src/routes/index.ts
index 0a67042b7..fb0f7742a 100644
--- a/src/routes/index.ts
+++ b/src/routes/index.ts
@@ -1,15 +1,15 @@
 import VueRouter from 'vue-router'
 
-import ExplorePanel from '../components/Explore.vue'
-import StarredPanel from '../components/Starred.vue'
-import UnreadPanel from '../components/Unread.vue'
-import FeedPanel from '../components/Feed.vue'
+import ExplorePanel from '../components/routes/Explore.vue'
+import StarredPanel from '../components/routes/Starred.vue'
+import UnreadPanel from '../components/routes/Unread.vue'
+import FeedPanel from '../components/routes/Feed.vue'
 
 export const ROUTES = {
 	EXPLORE: 'explore',
 	STARRED: 'starred',
 	UNREAD: 'unread',
-	FEED: 'feeed',
+	FEED: 'feed',
 }
 
 const getInitialRoute = function() {
diff --git a/tests/javascript/unit/components/Explore.spec.ts b/tests/javascript/unit/components/routes/Explore.spec.ts
similarity index 90%
rename from tests/javascript/unit/components/Explore.spec.ts
rename to tests/javascript/unit/components/routes/Explore.spec.ts
index b2ab052d5..04c7d6508 100644
--- a/tests/javascript/unit/components/Explore.spec.ts
+++ b/tests/javascript/unit/components/routes/Explore.spec.ts
@@ -3,7 +3,7 @@ import { shallowMount, createLocalVue } from '@vue/test-utils'
 
 import * as router from '@nextcloud/router'
 
-import Explore from '../../../../src/components/Explore.vue'
+import Explore from '../../../../../src/components/routes/Explore.vue'
 
 jest.mock('@nextcloud/axios')
 
diff --git a/tests/javascript/unit/components/routes/Feed.spec.ts b/tests/javascript/unit/components/routes/Feed.spec.ts
new file mode 100644
index 000000000..4e0e69f2b
--- /dev/null
+++ b/tests/javascript/unit/components/routes/Feed.spec.ts
@@ -0,0 +1,75 @@
+import Vuex, { Store } from 'vuex'
+import { shallowMount, createLocalVue, Wrapper } from '@vue/test-utils'
+
+import Feed from '../../../../../src/components/routes/Feed.vue'
+import FeedItemDisplayList from '../../../../../src/components/FeedItemDisplayList.vue'
+
+jest.mock('@nextcloud/axios')
+
+describe('Feed.vue', () => {
+	'use strict'
+	const localVue = createLocalVue()
+	localVue.use(Vuex)
+	let wrapper: Wrapper<Feed>
+
+	const mockFeed = {
+		id: 123,
+		title: 'feed name',
+		unreadCount: 2,
+	}
+
+	let store: Store<any>
+	beforeAll(() => {
+		store = new Vuex.Store({
+			state: {
+				items: {
+					fetchingItems: {
+						'feed-123': false,
+					},
+					allItems: [{
+						feedId: 123,
+						title: 'feed item',
+					}, {
+						feedId: 123,
+						title: 'feed item 2',
+					}],
+				},
+			},
+			actions: {
+			},
+			getters: {
+				feeds: () => [mockFeed],
+			},
+		})
+
+		store.dispatch = jest.fn()
+		store.commit = jest.fn()
+
+		wrapper = shallowMount(Feed, {
+			propsData: {
+				feedId: '123',
+			},
+			mocks: {
+				$route: {
+					params: {},
+				},
+			},
+			localVue,
+			store,
+		})
+	})
+
+	it('should display feed title and unread count', () => {
+		expect(wrapper.find('.header').text()).toContain(mockFeed.title)
+		expect(wrapper.find('.header').text()).toContain(mockFeed.unreadCount.toString())
+	})
+
+	it('should get starred items from state', () => {
+		expect((wrapper.findComponent(FeedItemDisplayList)).props().items.length).toEqual(2)
+	})
+
+	it('should dispatch FETCH_FEED_ITEMS action if not fetchingItems.starred', () => {
+		(wrapper.vm as any).fetchMore()
+		expect(store.dispatch).toBeCalled()
+	})
+})
diff --git a/tests/javascript/unit/components/Starred.spec.ts b/tests/javascript/unit/components/routes/Starred.spec.ts
similarity index 87%
rename from tests/javascript/unit/components/Starred.spec.ts
rename to tests/javascript/unit/components/routes/Starred.spec.ts
index 4f09f4e3c..44c9acd75 100644
--- a/tests/javascript/unit/components/Starred.spec.ts
+++ b/tests/javascript/unit/components/routes/Starred.spec.ts
@@ -1,8 +1,8 @@
 import Vuex, { Store } from 'vuex'
 import { shallowMount, createLocalVue, Wrapper } from '@vue/test-utils'
 
-import Starred from '../../../../src/components/Starred.vue'
-import FeedItemDisplayList from '../../../../src/components/FeedItemDisplayList.vue'
+import Starred from '../../../../../src/components/routes/Starred.vue'
+import FeedItemDisplayList from '../../../../../src/components/FeedItemDisplayList.vue'
 
 jest.mock('@nextcloud/axios')
 
diff --git a/tests/javascript/unit/components/Unread.spec.ts b/tests/javascript/unit/components/routes/Unread.spec.ts
similarity index 89%
rename from tests/javascript/unit/components/Unread.spec.ts
rename to tests/javascript/unit/components/routes/Unread.spec.ts
index 6de4d8565..149fc015f 100644
--- a/tests/javascript/unit/components/Unread.spec.ts
+++ b/tests/javascript/unit/components/routes/Unread.spec.ts
@@ -1,8 +1,8 @@
 import Vuex, { Store } from 'vuex'
 import { shallowMount, createLocalVue, Wrapper } from '@vue/test-utils'
 
-import Unread from '../../../../src/components/Unread.vue'
-import FeedItemDisplayList from '../../../../src/components/FeedItemDisplayList.vue'
+import Unread from '../../../../../src/components/routes/Unread.vue'
+import FeedItemDisplayList from '../../../../../src/components/FeedItemDisplayList.vue'
 
 jest.mock('@nextcloud/axios')
 
diff --git a/tests/javascript/unit/services/item.service.spec.ts b/tests/javascript/unit/services/item.service.spec.ts
index 29de8f1a3..005248709 100644
--- a/tests/javascript/unit/services/item.service.spec.ts
+++ b/tests/javascript/unit/services/item.service.spec.ts
@@ -12,7 +12,7 @@ describe('item.service.ts', () => {
 	})
 
 	describe('fetchStarred', () => {
-		it('should call GET with offset set to start param', async () => {
+		it('should call GET with offset set to start param and STARRED item type', async () => {
 			(axios as any).get.mockResolvedValue({ data: { feeds: [] } })
 
 			await ItemService.fetchStarred(0)
@@ -26,7 +26,7 @@ describe('item.service.ts', () => {
 	})
 
 	describe('fetchUnread', () => {
-		it('should call GET with offset set to start param', async () => {
+		it('should call GET with offset set to start param and UNREAD item type', async () => {
 			(axios as any).get.mockResolvedValue({ data: { feeds: [] } })
 
 			await ItemService.fetchUnread(2)
@@ -39,6 +39,21 @@ describe('item.service.ts', () => {
 		})
 	})
 
+	describe('fetchFeedItems', () => {
+		it('should call GET with offset set to start param, UNREAD item type, and id set to feedId', async () => {
+			(axios as any).get.mockResolvedValue({ data: { feeds: [] } })
+
+			await ItemService.fetchFeedItems(123, 0)
+
+			expect(axios.get).toBeCalled()
+			const queryParams = (axios.get as any).mock.calls[0][1].params
+
+			expect(queryParams.id).toEqual(123)
+			expect(queryParams.offset).toEqual(0)
+			expect(queryParams.type).toEqual(ITEM_TYPES.ALL)
+		})
+	})
+
 	describe('markRead', () => {
 		it('should call POST with item id in URL and read param', async () => {
 			await ItemService.markRead({ id: 123 } as any, true)
diff --git a/tests/javascript/unit/store/item.spec.ts b/tests/javascript/unit/store/item.spec.ts
index c393a03f4..84869c4d8 100644
--- a/tests/javascript/unit/store/item.spec.ts
+++ b/tests/javascript/unit/store/item.spec.ts
@@ -37,6 +37,21 @@ describe('item.ts', () => {
 			})
 		})
 
+		describe('FETCH_FEED_ITEMS', () => {
+			it('should call ItemService and commit items to state', async () => {
+				const mockItems = [{ id: 123, title: 'feed item' }]
+				const fetchMock = jest.fn()
+				fetchMock.mockResolvedValue({ data: { items: mockItems } })
+				ItemService.debounceFetchFeedItems = fetchMock as any
+				const commit = jest.fn()
+
+				await (actions[FEED_ITEM_ACTION_TYPES.FETCH_FEED_ITEMS] as any)({ commit }, { feedId: 123 })
+
+				expect(fetchMock).toBeCalled()
+				expect(commit).toBeCalledWith(FEED_ITEM_MUTATION_TYPES.SET_ITEMS, mockItems)
+			})
+		})
+
 		it('MARK_READ should call GET and commit returned feeds to state', async () => {
 			const item = { id: 1 }
 			const commit = jest.fn()