From 4d91113d32d69f850a9b452a6b02668886a417a7 Mon Sep 17 00:00:00 2001
From: Devlin Junker <devlin.junker@gmail.com>
Date: Fri, 1 Sep 2023 13:24:16 -0700
Subject: [PATCH 1/3] add routes for folder items and all items

Signed-off-by: Devlin Junker <devlin.junker@gmail.com>
---
 src/components/Sidebar.vue                    |  6 +-
 .../feed-display/FeedItemDisplay.vue          | 18 +++-
 .../feed-display/FeedItemDisplayList.vue      |  3 +-
 src/components/routes/All.vue                 | 63 +++++++++++++
 src/components/routes/Folder.vue              | 94 +++++++++++++++++++
 src/dataservices/item.service.ts              | 52 +++++++++-
 src/routes/index.ts                           | 16 ++++
 src/store/item.ts                             | 51 ++++++++++
 8 files changed, 294 insertions(+), 9 deletions(-)
 create mode 100644 src/components/routes/All.vue
 create mode 100644 src/components/routes/Folder.vue

diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue
index eedead3b0..493eba31e 100644
--- a/src/components/Sidebar.vue
+++ b/src/components/Sidebar.vue
@@ -20,7 +20,7 @@
 					<NcCounterBubble>{{ items.unreadCount }}</NcCounterBubble>
 				</template>
 			</NcAppNavigationItem>
-			<NcAppNavigationItem :title="t('news', 'All articles')" icon="icon-rss">
+			<NcAppNavigationItem :title="t('news', 'All articles')" icon="icon-rss" :to="{ name: ROUTES.ALL }">
 				<template #actions>
 					<ActionButton icon="icon-checkmark" @click="alert('TODO: Edit')">
 						t('news','Mark read')
@@ -37,13 +37,13 @@
 				:key="topLevelItem.name || topLevelItem.title"
 				:title="topLevelItem.name || topLevelItem.title"
 				:icon="isFolder(topLevelItem) ? 'icon-folder': ''"
-				:to="isFolder(topLevelItem) ? {} : { name: ROUTES.FEED, params: { feedId: topLevelItem.id.toString() } }"
+				:to="isFolder(topLevelItem) ? { name: ROUTES.FOLDER, params: { folderId: topLevelItem.id.toString() }} : { 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"
-						:to="{ name: ROUTES.FEED, props: { feedId: feed.id } }">
+						:to="{ name: ROUTES.FEED, params: { feedId: feed.id } }">
 						<template #icon>
 							<RssIcon v-if="!feed.faviconLink" />
 							<span v-if="feed.faviconLink" style="width: 24px; background-size: contain;" :style="{ 'backgroundImage': 'url(' + feed.faviconLink + ')' }" />
diff --git a/src/components/feed-display/FeedItemDisplay.vue b/src/components/feed-display/FeedItemDisplay.vue
index 4eab900ab..8d97e856e 100644
--- a/src/components/feed-display/FeedItemDisplay.vue
+++ b/src/components/feed-display/FeedItemDisplay.vue
@@ -183,7 +183,7 @@ export default Vue.extend({
 
 </script>
 
-<style scoped>
+<style>
 	.feed-item-display {
 		max-height: 100%;
 		overflow-y: hidden;
@@ -210,6 +210,22 @@ export default Vue.extend({
 		color: #3a84e4
 	}
 
+	.article .body ul {
+		margin: 7px 0;
+		padding-left: 14px;
+		list-style-type: disc;
+	}
+
+	.article .body ul li {
+		cursor: default;
+		line-height: 21px;
+	}
+
+	.article .body p {
+		line-height: 1.5;
+		margin: 7px 0 14px 0;
+	}
+
 	.article .subtitle {
 		color: var(--color-text-lighter);
     font-size: 15px;
diff --git a/src/components/feed-display/FeedItemDisplayList.vue b/src/components/feed-display/FeedItemDisplayList.vue
index 8fce1fb25..8fc58281e 100644
--- a/src/components/feed-display/FeedItemDisplayList.vue
+++ b/src/components/feed-display/FeedItemDisplayList.vue
@@ -1,5 +1,5 @@
 <template>
-	<div>
+	<div style="height: 100%; display: flex; flex-direction: column;">
 		<div style="justify-content: right; display: flex">
 			<NcActions class="filter-container" :force-menu="true">
 				<template #icon>
@@ -193,6 +193,7 @@ export default Vue.extend({
 	.feed-item-container {
 		max-width: 50%;
 		overflow-y: hidden;
+		height: calc(100vh - 50px - 50px - 10px)
 	}
 
 	.filter-container {
diff --git a/src/components/routes/All.vue b/src/components/routes/All.vue
new file mode 100644
index 000000000..a1cc52fef
--- /dev/null
+++ b/src/components/routes/All.vue
@@ -0,0 +1,63 @@
+<template>
+	<div class="route-container">
+		<div class="header">
+			{{ t('news', 'All Articles') }}
+		</div>
+
+		<FeedItemDisplayList :items="allItems"
+			:fetch-key="'all'"
+			@load-more="fetchMore()" />
+	</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+import { mapState } from 'vuex'
+
+import FeedItemDisplayList from '../feed-display/FeedItemDisplayList.vue'
+
+import { FeedItem } from '../../types/FeedItem'
+import { ACTIONS, MUTATIONS } from '../../store'
+
+export default Vue.extend({
+	components: {
+		FeedItemDisplayList,
+	},
+	computed: {
+		...mapState(['items']),
+
+		allItems(): FeedItem[] {
+			return this.$store.getters.allItems
+		},
+	},
+	created() {
+		this.$store.commit(MUTATIONS.SET_SELECTED_ITEM, { id: undefined })
+	},
+	methods: {
+		async fetchMore() {
+			if (!this.$store.state.items.fetchingItems.all) {
+			  this.$store.dispatch(ACTIONS.FETCH_ITEMS)
+			}
+		},
+	},
+})
+</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/routes/Folder.vue b/src/components/routes/Folder.vue
new file mode 100644
index 000000000..17fd768c3
--- /dev/null
+++ b/src/components/routes/Folder.vue
@@ -0,0 +1,94 @@
+<template>
+	<div class="route-container">
+		<div class="header">
+			{{ folder ? folder.name : '' }}
+			<NcCounterBubble v-if="folder" class="counter-bubble">
+				{{ unreadCount }}
+			</NcCounterBubble>
+		</div>
+
+		<FeedItemDisplayList :items="items" :fetch-key="'folder-'+folderId" @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 '../feed-display/FeedItemDisplayList.vue'
+
+import { FeedItem } from '../../types/FeedItem'
+import { ACTIONS, MUTATIONS } from '../../store'
+import { Feed } from '../../types/Feed'
+import { Folder } from '../../types/Folder'
+
+export default Vue.extend({
+	components: {
+		NcCounterBubble,
+		FeedItemDisplayList,
+	},
+	props: {
+		folderId: {
+			type: String,
+			required: true,
+		},
+	},
+	computed: {
+		...mapState(['items', 'feeds', 'folders']),
+		folder(): Folder {
+			return this.$store.getters.folders.find((folder: Folder) => folder.id === this.id)
+		},
+		items(): FeedItem[] {
+			const feeds: Array<number> = this.$store.getters.feeds.filter((feed: Feed) => feed.folderId === this.id).map((feed: Feed) => feed.id)
+
+			return this.$store.state.items.allItems.filter((item: FeedItem) => {
+				return feeds.includes(item.feedId)
+			}) || []
+		},
+		id(): number {
+			return Number(this.folderId)
+		},
+		unreadCount(): number {
+			const totalUnread = this.$store.getters.feeds
+				.filter((feed: Feed) => feed.folderId === this.id)
+				.reduce((acc: number, feed: Feed) => { acc += feed.unreadCount; return acc }, 0)
+
+			return totalUnread
+		},
+	},
+	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['folder-' + this.folderId]) {
+			  this.$store.dispatch(ACTIONS.FETCH_FOLDER_FEED_ITEMS, { folderId: this.id })
+			}
+		},
+	},
+})
+</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/dataservices/item.service.ts b/src/dataservices/item.service.ts
index 6d4aabdb4..98b9d9eb3 100644
--- a/src/dataservices/item.service.ts
+++ b/src/dataservices/item.service.ts
@@ -6,16 +6,39 @@ import { API_ROUTES } from '../types/ApiRoutes'
 import { FeedItem } from '../types/FeedItem'
 
 export const ITEM_TYPES = {
-	ALL: 0,
+	FEED: 0,
+	FOLDER: 1,
 	STARRED: 2,
+	ALL: 3,
 	UNREAD: 6,
 }
 
 export class ItemService {
 
+	static debounceFetchAll = _.debounce(ItemService.fetchAll, 400, { leading: true })
 	static debounceFetchStarred = _.debounce(ItemService.fetchStarred, 400, { leading: true })
 	static debounceFetchUnread = _.debounce(ItemService.fetchUnread, 400, { leading: true })
 	static debounceFetchFeedItems = _.debounce(ItemService.fetchFeedItems, 400, { leading: true })
+	static debounceFetchFolderFeedItems = _.debounce(ItemService.fetchFolderItems, 400, { leading: true })
+
+	/**
+	 * Makes backend call to retrieve all items
+	 *
+	 * @param start (id of last starred item loaded)
+	 * @return {AxiosResponse} response object containing backend request response
+	 */
+	static async fetchAll(start: number): Promise<AxiosResponse> {
+		return await axios.get(API_ROUTES.ITEMS, {
+			params: {
+				limit: 40,
+				oldestFirst: false,
+				search: '',
+				showAll: true,
+				type: ITEM_TYPES.ALL,
+				offset: start,
+			},
+		})
+	}
 
 	/**
 	 * Makes backend call to retrieve starred items
@@ -29,7 +52,7 @@ export class ItemService {
 				limit: 40,
 				oldestFirst: false,
 				search: '',
-				showAll: false,
+				showAll: true,
 				type: ITEM_TYPES.STARRED,
 				offset: start,
 			},
@@ -68,14 +91,35 @@ export class ItemService {
 				limit: 40,
 				oldestFirst: false,
 				search: '',
-				showAll: false,
-				type: ITEM_TYPES.ALL,
+				showAll: true,
+				type: ITEM_TYPES.FEED,
 				offset: start,
 				id: feedId,
 			},
 		})
 	}
 
+	/**
+	 * Makes backend call to retrieve items from a specific folder
+	 *
+	 * @param folderId id number of folder to retrieve items for
+	 * @param start (id of last unread item loaded)
+	 * @return {AxiosResponse} response object containing backend request response
+	 */
+	static async fetchFolderItems(folderId: number, start: number): Promise<AxiosResponse> {
+		return await axios.get(API_ROUTES.ITEMS, {
+			params: {
+				limit: 40,
+				oldestFirst: false,
+				search: '',
+				showAll: true,
+				type: ITEM_TYPES.FOLDER,
+				offset: start,
+				id: folderId,
+			},
+		})
+	}
+
 	/**
 	 * Makes backend call to mark item as read/unread in DB
 	 *
diff --git a/src/routes/index.ts b/src/routes/index.ts
index fb0f7742a..b4ed2f757 100644
--- a/src/routes/index.ts
+++ b/src/routes/index.ts
@@ -4,12 +4,16 @@ 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'
+import FolderPanel from '../components/routes/Folder.vue'
+import AllPanel from '../components/routes/All.vue'
 
 export const ROUTES = {
 	EXPLORE: 'explore',
 	STARRED: 'starred',
 	UNREAD: 'unread',
 	FEED: 'feed',
+	FOLDER: 'folder',
+	ALL: 'all',
 }
 
 const getInitialRoute = function() {
@@ -49,6 +53,18 @@ const routes = [
 		component: FeedPanel,
 		props: true,
 	},
+	{
+		name: ROUTES.FOLDER,
+		path: '/folder/:folderId',
+		component: FolderPanel,
+		props: true,
+	},
+	{
+		name: ROUTES.ALL,
+		path: '/all',
+		component: AllPanel,
+		props: true,
+	},
 ]
 
 export default new VueRouter({
diff --git a/src/store/item.ts b/src/store/item.ts
index fe8d5b6c8..4f73bff55 100644
--- a/src/store/item.ts
+++ b/src/store/item.ts
@@ -12,6 +12,8 @@ export const FEED_ITEM_ACTION_TYPES = {
 	STAR_ITEM: 'STAR_ITEM',
 	UNSTAR_ITEM: 'UNSTAR_ITEM',
 	FETCH_FEED_ITEMS: 'FETCH_FEED_ITEMS',
+	FETCH_FOLDER_FEED_ITEMS: 'FETCH_FOLDER_FEED_ITEMS',
+	FETCH_ITEMS: 'FETCH_ITEMS',
 }
 
 export type ItemState = {
@@ -49,6 +51,9 @@ const getters = {
 	selected(state: ItemState) {
 		return state.allItems.find((item: FeedItem) => item.id === state.selectedId)
 	},
+	allItems(state: ItemState) {
+		return state.allItems
+	},
 }
 
 export const actions = {
@@ -76,6 +81,30 @@ export const actions = {
 		commit(FEED_ITEM_MUTATION_TYPES.SET_FETCHING, { key: 'unread', fetching: false })
 	},
 
+	/**
+	 * Fetch All Items from Backend and call commit to update state
+	 *
+	 * @param param0 ActionParams
+	 * @param param0.commit
+	 * @param param1 ActionArgs
+	 * @param param1.start
+	 */
+	async [FEED_ITEM_ACTION_TYPES.FETCH_ITEMS]({ commit }: ActionParams, { start }: { start: number } = { start: 0 }) {
+		commit(FEED_ITEM_MUTATION_TYPES.SET_FETCHING, { key: 'all', fetching: true })
+
+		const response = await ItemService.debounceFetchAll(start || state.lastItemLoaded.all)
+
+		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: 'all', loaded: true })
+		}
+
+		const lastItem = response?.data.items[response?.data.items.length - 1].id
+		commit(FEED_ITEM_MUTATION_TYPES.SET_LAST_ITEM_LOADED, { key: 'all', lastItem })
+		commit(FEED_ITEM_MUTATION_TYPES.SET_FETCHING, { key: 'all', fetching: false })
+	},
+
 	/**
 	 * Fetch Starred Items from Backend and call commit to update state
 	 *
@@ -123,6 +152,28 @@ export const actions = {
 		commit(FEED_ITEM_MUTATION_TYPES.SET_FETCHING, { key: 'feed-' + feedId, fetching: false })
 	},
 
+	/**
+	 * Fetch Folder Items from Backend and call commit to update state
+	 *
+	 * @param param0 ActionParams
+	 * @param param0.commit
+	 * @param param1 ActionArgs
+	 * @param param1.start
+	 * @param param1.folderId
+	 */
+	async [FEED_ITEM_ACTION_TYPES.FETCH_FOLDER_FEED_ITEMS]({ commit }: ActionParams, { folderId, start }: { folderId: number; start: number }) {
+		commit(FEED_ITEM_MUTATION_TYPES.SET_FETCHING, { key: 'folder-' + folderId, fetching: true })
+		const response = await ItemService.debounceFetchFolderFeedItems(folderId, start || state.lastItemLoaded['folder-' + folderId])
+
+		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: 'folder-' + folderId, loaded: true })
+		}
+		const lastItem = response?.data.items[response?.data.items.length - 1].id
+		commit(FEED_ITEM_MUTATION_TYPES.SET_LAST_ITEM_LOADED, { key: 'folder-' + folderId, lastItem })
+		commit(FEED_ITEM_MUTATION_TYPES.SET_FETCHING, { key: 'folder-' + folderId, fetching: false })
+	},
+
 	/**
 	 * Sends message to Backend to mark as read, and then call commit to update state
 	 *

From 6e01494c9baad2ad061f7775a74288a4ac04168f Mon Sep 17 00:00:00 2001
From: Devlin Junker <devlin.junker@gmail.com>
Date: Sun, 3 Sep 2023 11:28:17 -0700
Subject: [PATCH 2/3] cleanup sidebar and translations

Signed-off-by: Devlin Junker <devlin.junker@gmail.com>
---
 src/App.vue                       |  6 +++++
 src/components/Sidebar.vue        | 44 ++++++++++++++++++++++++++-----
 src/components/routes/Starred.vue |  2 +-
 src/components/routes/Unread.vue  |  2 +-
 4 files changed, 45 insertions(+), 9 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 98c3e393c..97383c440 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -28,3 +28,9 @@ export default Vue.extend({
 	},
 })
 </script>
+
+<style>
+	.material-design-icon {
+		color: var(--color-text-lighter)
+	}
+</style>
diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue
index 493eba31e..4c04195fc 100644
--- a/src/components/Sidebar.vue
+++ b/src/components/Sidebar.vue
@@ -4,11 +4,20 @@
 		<NcAppNavigationNew :text="t('news', 'Subscribe')"
 			button-id="new-feed-button"
 			button-class="icon-add"
-			@click="showShowAddFeed()" />
+			:icon="true"
+			@click="showShowAddFeed()">
+			<template #icon>
+				<PlusIcon />
+			</template>
+		</NcAppNavigationNew>
 		<template #list>
 			<NcAppNavigationNewItem :title="t('news', 'New folder')"
-				icon="icon-add-folder"
-				@new-item="newFolder" />
+				:icon="true"
+				@new-item="newFolder">
+				<template #icon>
+					<FolderPlusIcon />
+				</template>
+			</NcAppNavigationNewItem>
 
 			<NcAppNavigationItem :title="t('news', 'Unread articles')" icon="icon-rss" :to="{ name: ROUTES.UNREAD }">
 				<template #actions>
@@ -16,6 +25,9 @@
 						t('news','Mark read')
 					</NcActionButton>
 				</template>
+				<template #icon>
+					<EyeIcon />
+				</template>
 				<template #counter>
 					<NcCounterBubble>{{ items.unreadCount }}</NcCounterBubble>
 				</template>
@@ -26,6 +38,9 @@
 						t('news','Mark read')
 					</ActionButton>
 				</template>
+				<template #icon>
+					<RssIcon />
+				</template>
 			</NcAppNavigationItem>
 			<NcAppNavigationItem :title="t('news', 'Starred')" icon="icon-starred" :to="{ name: ROUTES.STARRED }">
 				<template #counter>
@@ -36,18 +51,20 @@
 			<NcAppNavigationItem v-for="topLevelItem in topLevelNav"
 				:key="topLevelItem.name || topLevelItem.title"
 				:title="topLevelItem.name || topLevelItem.title"
-				:icon="isFolder(topLevelItem) ? 'icon-folder': ''"
+				:icon="true"
 				:to="isFolder(topLevelItem) ? { name: ROUTES.FOLDER, params: { folderId: topLevelItem.id.toString() }} : { 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"
+						:icon="true"
 						:to="{ name: ROUTES.FEED, params: { feedId: feed.id } }">
 						<template #icon>
 							<RssIcon v-if="!feed.faviconLink" />
-							<span v-if="feed.faviconLink" style="width: 24px; background-size: contain;" :style="{ 'backgroundImage': 'url(' + feed.faviconLink + ')' }" />
+							<span v-if="feed.faviconLink" style="width: 16px; height: 16px; background-size: contain;" :style="{ 'backgroundImage': 'url(' + feed.faviconLink + ')' }" />
 						</template>
+
 						<template #actions>
 							<NcActionButton icon="icon-checkmark"
 								@click="alert('TODO: Mark read')">
@@ -101,6 +118,7 @@
 					</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 + ')' }" />
 				</template>
@@ -126,11 +144,14 @@
 			</NcAppNavigationItem>
 
 			<NcAppNavigationItem :title="t('news', 'Explore')"
-				icon="icon-link"
+				icon="true"
 				:to="{ name: ROUTES.EXPLORE }">
 				<template #counter>
 					<NcCounterBubble>35</NcCounterBubble>
 				</template>
+				<template #icon>
+					<EarthIcon />
+				</template>
 			</NcAppNavigationItem>
 		</template>
 	</NcAppNavigation>
@@ -150,6 +171,11 @@ 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 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 PlusIcon from 'vue-material-design-icons/Plus.vue'
 
 import { ROUTES } from '../routes'
 import { ACTIONS, AppState } from '../store'
@@ -177,11 +203,15 @@ export default Vue.extend({
 		NcAppNavigationNew,
 		NcAppNavigationItem,
 		NcAppNavigationNewItem,
-		// AppNavigationCounter,
 		NcCounterBubble,
 		NcActionButton,
 		AddFeed,
 		RssIcon,
+		FolderIcon,
+		EyeIcon,
+		EarthIcon,
+		FolderPlusIcon,
+		PlusIcon,
 	},
 	data: () => {
 		return {
diff --git a/src/components/routes/Starred.vue b/src/components/routes/Starred.vue
index 4dac06d87..730c94039 100644
--- a/src/components/routes/Starred.vue
+++ b/src/components/routes/Starred.vue
@@ -1,7 +1,7 @@
 <template>
 	<div class="route-container">
 		<div class="header">
-			Starred
+			{{ t('news', 'Starred') }}
 			<NcCounterBubble class="counter-bubble">
 				{{ items.starredCount }}
 			</NcCounterBubble>
diff --git a/src/components/routes/Unread.vue b/src/components/routes/Unread.vue
index b7199ea35..b71a724cb 100644
--- a/src/components/routes/Unread.vue
+++ b/src/components/routes/Unread.vue
@@ -1,7 +1,7 @@
 <template>
 	<div class="route-container">
 		<div class="header">
-			Unread
+			{{ t('news', 'Unread Articles') }}
 			<NcCounterBubble class="counter-bubble">
 				{{ items.unreadCount }}
 			</NcCounterBubble>

From 5e8b349e474095a1c1e31767e9acf0284269d2ab Mon Sep 17 00:00:00 2001
From: Devlin Junker <devlin.junker@gmail.com>
Date: Sun, 3 Sep 2023 18:08:21 -0700
Subject: [PATCH 3/3] add unit tests and little more cleanup of uncessary lines

Signed-off-by: Devlin Junker <devlin.junker@gmail.com>
---
 src/App.vue                                   |  1 -
 .../feed-display/FeedItemDisplayList.vue      | 15 +++-
 .../unit/components/routes/All.spec.ts        | 65 ++++++++++++++
 .../unit/components/routes/Folder.spec.ts     | 89 +++++++++++++++++++
 .../unit/services/item.service.spec.ts        | 33 ++++++-
 tests/javascript/unit/store/item.spec.ts      | 15 ++++
 6 files changed, 213 insertions(+), 5 deletions(-)
 create mode 100644 tests/javascript/unit/components/routes/All.spec.ts
 create mode 100644 tests/javascript/unit/components/routes/Folder.spec.ts

diff --git a/src/App.vue b/src/App.vue
index 97383c440..930c8b048 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -24,7 +24,6 @@ export default Vue.extend({
 	async created() {
 		await this.$store.dispatch(ACTIONS.FETCH_FOLDERS)
 		await this.$store.dispatch(ACTIONS.FETCH_FEEDS)
-		await this.$store.dispatch(ACTIONS.FETCH_STARRED)
 	},
 })
 </script>
diff --git a/src/components/feed-display/FeedItemDisplayList.vue b/src/components/feed-display/FeedItemDisplayList.vue
index 8fc58281e..44e4b070a 100644
--- a/src/components/feed-display/FeedItemDisplayList.vue
+++ b/src/components/feed-display/FeedItemDisplayList.vue
@@ -1,6 +1,6 @@
 <template>
-	<div style="height: 100%; display: flex; flex-direction: column;">
-		<div style="justify-content: right; display: flex">
+	<div class="feed-item-display-list">
+		<div class="header">
 			<NcActions class="filter-container" :force-menu="true">
 				<template #icon>
 					<FilterIcon />
@@ -180,6 +180,12 @@ export default Vue.extend({
 </script>
 
 <style scoped>
+	.feed-item-display-list {
+		height: 100%;
+		display: flex;
+		flex-direction: column;
+	}
+
 	.virtual-scroll {
 		border-top: 1px solid var(--color-border);
 		width: 100%;
@@ -196,6 +202,11 @@ export default Vue.extend({
 		height: calc(100vh - 50px - 50px - 10px)
 	}
 
+	.header {
+		justify-content: right;
+		display: flex;
+	}
+
 	.filter-container {
 		padding: 5px;
 	}
diff --git a/tests/javascript/unit/components/routes/All.spec.ts b/tests/javascript/unit/components/routes/All.spec.ts
new file mode 100644
index 000000000..ff9b2b169
--- /dev/null
+++ b/tests/javascript/unit/components/routes/All.spec.ts
@@ -0,0 +1,65 @@
+import Vuex, { Store } from 'vuex'
+import { shallowMount, createLocalVue, Wrapper } from '@vue/test-utils'
+
+import All from '../../../../../src/components/routes/All.vue'
+import FeedItemDisplayList from '../../../../../src/components/feed-display/FeedItemDisplayList.vue'
+
+jest.mock('@nextcloud/axios')
+
+describe('All.vue', () => {
+	'use strict'
+	const localVue = createLocalVue()
+	localVue.use(Vuex)
+	let wrapper: Wrapper<All>
+
+	const mockItem = {
+		feedId: 1,
+		title: 'feed item',
+		pubDate: Date.now() / 1000,
+	}
+
+	let store: Store<any>
+	beforeAll(() => {
+		store = new Vuex.Store({
+			state: {
+				items: {
+					fetchingItems: {
+						all: false,
+					},
+				},
+			},
+			actions: {
+			},
+			getters: {
+				allItems: () => [mockItem, mockItem, mockItem],
+			},
+		})
+
+		store.dispatch = jest.fn()
+		store.commit = jest.fn()
+
+		wrapper = shallowMount(All, {
+			propsData: {
+				item: mockItem,
+			},
+			localVue,
+			store,
+		})
+	})
+
+	it('should get all items from state', () => {
+		expect((wrapper.findComponent(FeedItemDisplayList)).props().items.length).toEqual(3)
+	})
+
+	it('should dispatch FETCH_ITEMS action if not fetchingItems.all', () => {
+		(wrapper.vm as any).$store.state.items.fetchingItems.all = true;
+
+		(wrapper.vm as any).fetchMore()
+		expect(store.dispatch).not.toBeCalled();
+
+		(wrapper.vm as any).$store.state.items.fetchingItems.all = false;
+
+		(wrapper.vm as any).fetchMore()
+		expect(store.dispatch).toBeCalled()
+	})
+})
diff --git a/tests/javascript/unit/components/routes/Folder.spec.ts b/tests/javascript/unit/components/routes/Folder.spec.ts
new file mode 100644
index 000000000..c2c966adb
--- /dev/null
+++ b/tests/javascript/unit/components/routes/Folder.spec.ts
@@ -0,0 +1,89 @@
+import Vuex, { Store } from 'vuex'
+import { shallowMount, createLocalVue, Wrapper } from '@vue/test-utils'
+
+import Folder from '../../../../../src/components/routes/Folder.vue'
+import FeedItemDisplayList from '../../../../../src/components/feed-display/FeedItemDisplayList.vue'
+
+jest.mock('@nextcloud/axios')
+
+describe('Folder.vue', () => {
+	'use strict'
+	const localVue = createLocalVue()
+	localVue.use(Vuex)
+	let wrapper: Wrapper<Folder>
+
+	const mockFeed = {
+		id: 789,
+		title: 'feed name',
+		unreadCount: 2,
+		folderId: 123,
+	}
+
+	const mockFeed2 = {
+		id: 456,
+		title: 'feed name 2',
+		unreadCount: 2,
+		folderId: 123,
+	}
+
+	const mockFolder = {
+		id: 123,
+		name: 'folder name',
+	}
+
+	let store: Store<any>
+	beforeAll(() => {
+		store = new Vuex.Store({
+			state: {
+				items: {
+					fetchingItems: {
+						'folder-123': false,
+					},
+					allItems: [{
+						feedId: 789,
+						title: 'feed item',
+					}, {
+						feedId: 456,
+						title: 'feed item 2',
+					}],
+				},
+			},
+			actions: {
+			},
+			getters: {
+				feeds: () => [mockFeed, mockFeed2],
+				folders: () => [mockFolder],
+			},
+		})
+
+		store.dispatch = jest.fn()
+		store.commit = jest.fn()
+
+		wrapper = shallowMount(Folder, {
+			propsData: {
+				folderId: '123',
+			},
+			mocks: {
+				$route: {
+					params: {},
+				},
+			},
+			localVue,
+			store,
+		})
+	})
+
+	it('should display feed title and unread count', () => {
+		expect(wrapper.find('.header').text()).toContain(mockFolder.name)
+		expect(wrapper.find('.header').text()).toContain((mockFeed.unreadCount + mockFeed2.unreadCount).toString())
+	})
+
+	it('should get folder items from state', () => {
+		expect((wrapper.findComponent(FeedItemDisplayList)).props().items.length).toEqual(2)
+	})
+
+	it('should dispatch FETCH_FOLDER_FEED_ITEMS action on fetchMore', () => {
+		(wrapper.vm as any).fetchMore()
+		expect(store.dispatch).toBeCalled()
+	})
+})
diff --git a/tests/javascript/unit/services/item.service.spec.ts b/tests/javascript/unit/services/item.service.spec.ts
index 005248709..66a5b5484 100644
--- a/tests/javascript/unit/services/item.service.spec.ts
+++ b/tests/javascript/unit/services/item.service.spec.ts
@@ -11,6 +11,20 @@ describe('item.service.ts', () => {
 		(axios.post as any).mockReset()
 	})
 
+	describe('fetchAll', () => {
+		it('should call GET with offset set to start param, ALL item type', async () => {
+			(axios as any).get.mockResolvedValue({ data: { feeds: [] } })
+
+			await ItemService.fetchAll(0)
+
+			expect(axios.get).toBeCalled()
+			const queryParams = (axios.get as any).mock.calls[0][1].params
+
+			expect(queryParams.offset).toEqual(0)
+			expect(queryParams.type).toEqual(ITEM_TYPES.ALL)
+		})
+	})
+
 	describe('fetchStarred', () => {
 		it('should call GET with offset set to start param and STARRED item type', async () => {
 			(axios as any).get.mockResolvedValue({ data: { feeds: [] } })
@@ -40,7 +54,7 @@ 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 () => {
+		it('should call GET with offset set to start param, FEED item type, and id set to feedId', async () => {
 			(axios as any).get.mockResolvedValue({ data: { feeds: [] } })
 
 			await ItemService.fetchFeedItems(123, 0)
@@ -50,7 +64,22 @@ describe('item.service.ts', () => {
 
 			expect(queryParams.id).toEqual(123)
 			expect(queryParams.offset).toEqual(0)
-			expect(queryParams.type).toEqual(ITEM_TYPES.ALL)
+			expect(queryParams.type).toEqual(ITEM_TYPES.FEED)
+		})
+	})
+
+	describe('fetchFolderItems', () => {
+		it('should call GET with offset set to start param, FOLDER item type, and id set to folderId', async () => {
+			(axios as any).get.mockResolvedValue({ data: { feeds: [] } })
+
+			await ItemService.fetchFolderItems(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.FOLDER)
 		})
 	})
 
diff --git a/tests/javascript/unit/store/item.spec.ts b/tests/javascript/unit/store/item.spec.ts
index 7866cff5b..8d22d69a1 100644
--- a/tests/javascript/unit/store/item.spec.ts
+++ b/tests/javascript/unit/store/item.spec.ts
@@ -52,6 +52,21 @@ describe('item.ts', () => {
 			})
 		})
 
+		describe('FETCH_FOLDER_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.debounceFetchFolderFeedItems = fetchMock as any
+				const commit = jest.fn()
+
+				await (actions[FEED_ITEM_ACTION_TYPES.FETCH_FOLDER_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()