1 files changed, 91 insertions, 0 deletions
diff --git a/src/components/routes/Unread.vue b/src/components/routes/Unread.vue
new file mode 100644
index 000000000..b71a724cb
--- /dev/null
+++ b/src/components/routes/Unread.vue
@@ -0,0 +1,91 @@
+<template>
+	<div class="route-container">
+		<div class="header">
+			{{ t('news', 'Unread Articles') }}
+			<NcCounterBubble class="counter-bubble">
+				{{ items.unreadCount }}
+			</NcCounterBubble>
+		</div>
+
+		<FeedItemDisplayList v-if="unread()"
+			:items="unread()"
+			:fetch-key="'unread'"
+			:config="{ unreadFilter: false }"
+			@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'
+
+type UnreadItemState = {
+	// need cache so we aren't always removing items when they get read
+	unreadCache?: FeedItem[]
+}
+
+export default Vue.extend({
+	components: {
+		NcCounterBubble,
+		FeedItemDisplayList,
+	},
+	data() {
+		return {
+			unreadCache: undefined,
+		} as UnreadItemState
+	},
+	computed: {
+		...mapState(['items']),
+	},
+	created() {
+		this.$store.commit(MUTATIONS.SET_SELECTED_ITEM, { id: undefined })
+		if (this.unread() === undefined) {
+			this.$store.dispatch(ACTIONS.FETCH_UNREAD)
+		}
+	},
+	methods: {
+		unread() {
+			if (!this.unreadCache) {
+				if (this.$store.getters.unread.length > 0) {
+					this.unreadCache = this.$store.getters.unread
+				}
+			} else if (this.$store.getters.unread.length > (this.unreadCache?.length)) {
+				for (const item of this.$store.getters.unread) {
+					if (this.unreadCache.find((unread: FeedItem) => unread.id === item.id) === undefined) {
+						this.unreadCache.push(item)
+					}
+				}
+			}
+
+			return this.unreadCache
+		},
+		async fetchMore() {
+			if (this.unreadCache && !this.$store.state.items.fetchingItems.unread) {
+			  this.$store.dispatch(ACTIONS.FETCH_UNREAD)
+			}
+		},
+	},
+})
+</script>
+
+<style scoped>
+	.header {
+		padding-left: 50px;
+		position: absolute;
+		top: 1em;
+		font-weight: 700;
+	}
+
+	.counter-bubble {
+		display: inline-block;
+		vertical-align: sub;
+		margin-left: 10px;
+	}
+</style>