From 9a2252781b99f7f394d4d9d29b208febb295729f Mon Sep 17 00:00:00 2001
From: Devlin Junker <devlin.junker@gmail.com>
Date: Tue, 8 Aug 2023 22:55:03 -0700
Subject: [PATCH 1/9] started on fetching starred items from backend and
 displaying with for loop

Signed-off-by: Devlin Junker <devlin.junker@gmail.com>
---
 src/components/Starred.vue | 24 +++++++++++-----
 src/store/folder.ts        |  4 +--
 src/store/index.ts         |  8 ++++--
 src/store/item.ts          | 56 ++++++++++++++++++++++++++++++++++++++
 src/types/ApiRoutes.ts     |  1 +
 src/types/MutationTypes.ts |  4 +++
 6 files changed, 86 insertions(+), 11 deletions(-)
 create mode 100644 src/store/item.ts

diff --git a/src/components/Starred.vue b/src/components/Starred.vue
index d1117d1372..d0f51ab458 100644
--- a/src/components/Starred.vue
+++ b/src/components/Starred.vue
@@ -1,20 +1,30 @@
 <template>
-	<div id="starred">
-		Starred Items Here
+	<div>
+		Starred Items:
+		<div v-for="item in items.starredItems" :key="item.id">
+			{{ item.title }}
+		</div>
 	</div>
 </template>
 
-<script>
-// import axios from "@nextcloud/axios";
-// import { generateUrl } from "@nextcloud/router";
+<script lang="ts">
+import { FEED_ITEM_ACTION_TYPES } from '../store/item'
+import { mapState } from 'vuex'
+
 export default {
 	components: {
 	},
 	props: {
 
 	},
-	created() {
-		// this.fetchStarred();
+	computed: {
+		...mapState(['items']),
+		// starred(): any[] {
+		// return this.$store.state.items.starredItems
+		// },
+	},
+	async created() {
+		await this.$store.dispatch(FEED_ITEM_ACTION_TYPES.FETCH_STARRED)
 	},
 	methods: {
 		async fetchStarred() {
diff --git a/src/store/folder.ts b/src/store/folder.ts
index b1ae2e59d0..bf8bc09222 100644
--- a/src/store/folder.ts
+++ b/src/store/folder.ts
@@ -58,7 +58,7 @@ export const mutations = {
 	},
 	[FEED_MUTATION_TYPES.SET_FEEDS](state: AppState, feeds: Feed[]) {
 		feeds.forEach(it => {
-			const folder = state.folders.find(folder => folder.id === it.folderId)
+			const folder = state.folders.find((folder: Folder) => { return folder.id === it.folderId })
 			if (folder) {
 				folder.feeds.push(it)
 				folder.feedCount += it.unreadCount
@@ -66,7 +66,7 @@ export const mutations = {
 		})
 	},
 	[FEED_MUTATION_TYPES.ADD_FEED](state: AppState, feed: Feed) {
-		const folder = state.folders.find(folder => folder.id === feed.folderId)
+		const folder = state.folders.find((folder: Folder) => { return folder.id === feed.folderId })
 		if (folder) {
 			folder.feeds.push(feed)
 			folder.feedCount += feed.unreadCount
diff --git a/src/store/index.ts b/src/store/index.ts
index 539a1b2dea..489cceac44 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -2,16 +2,19 @@ import { Folder } from '../types/Folder'
 import { Feed } from '../types/Feed'
 import feeds, { FEED_ACTION_TYPES } from './feed'
 import folders, { FOLDER_ACTION_TYPES } from './folder'
-import { FOLDER_MUTATION_TYPES, FEED_MUTATION_TYPES } from '../types/MutationTypes'
+import { FOLDER_MUTATION_TYPES, FEED_MUTATION_TYPES, FEED_ITEM_MUTATION_TYPES } from '../types/MutationTypes'
+import items, { FEED_ITEM_ACTION_TYPES, ItemState } from './item'
 
 export const MUTATIONS = {
 	...FEED_MUTATION_TYPES,
 	...FOLDER_MUTATION_TYPES,
+	...FEED_ITEM_MUTATION_TYPES,
 }
 
 export const ACTIONS = {
 	...FEED_ACTION_TYPES,
 	...FOLDER_ACTION_TYPES,
+	...FEED_ITEM_ACTION_TYPES,
 }
 
 type Func = (name: string, value: unknown) => void;
@@ -20,11 +23,12 @@ export type ActionParams = { commit: Func };
 export type AppState = {
   feeds: Feed[];
   folders: Folder[];
-}
+} & ItemState;
 
 export default {
 	modules: {
 		feeds,
 		folders,
+		items,
 	},
 }
diff --git a/src/store/item.ts b/src/store/item.ts
new file mode 100644
index 0000000000..09a6b6f968
--- /dev/null
+++ b/src/store/item.ts
@@ -0,0 +1,56 @@
+import axios from '@nextcloud/axios'
+
+import { ActionParams } from '../store'
+import { FEED_ITEM_MUTATION_TYPES } from '../types/MutationTypes'
+import { API_ROUTES } from '../types/ApiRoutes'
+
+export const FEED_ITEM_ACTION_TYPES = {
+	FETCH_STARRED: 'FETCH_STARRED',
+}
+
+export type ItemState = {
+	allItems: any[];
+	starredItems: any[];
+}
+
+const state: ItemState = {
+	allItems: [],
+	starredItems: [],
+}
+
+const getters = {
+	starred(state: ItemState) {
+		return state.starredItems
+	},
+}
+
+export const actions = {
+	async [FEED_ITEM_ACTION_TYPES.FETCH_STARRED]({ commit }: ActionParams) {
+		const response = await axios.get(API_ROUTES.ITEMS, {
+			params: {
+				limit: 40,
+				oldestFirst: false,
+				search: '',
+				showAll: false,
+				type: 2,
+			},
+		})
+
+		commit(FEED_ITEM_MUTATION_TYPES.SET_STARRED, response.data.items)
+	},
+}
+
+export const mutations = {
+	[FEED_ITEM_MUTATION_TYPES.SET_STARRED](state: ItemState, items: any[]) {
+		items.forEach(it => {
+			state.starredItems.push(it)
+		})
+	},
+}
+
+export default {
+	state,
+	getters,
+	actions,
+	mutations,
+}
diff --git a/src/types/ApiRoutes.ts b/src/types/ApiRoutes.ts
index c05a5f7166..fbaaa6dd13 100644
--- a/src/types/ApiRoutes.ts
+++ b/src/types/ApiRoutes.ts
@@ -3,4 +3,5 @@ import { generateUrl } from '@nextcloud/router'
 export const API_ROUTES = {
 	FOLDER: generateUrl('/apps/news/folders'),
 	FEED: generateUrl('/apps/news/feeds'),
+	ITEMS: generateUrl('/apps/news/items'),
 }
diff --git a/src/types/MutationTypes.ts b/src/types/MutationTypes.ts
index 294deaffdb..9149da0599 100644
--- a/src/types/MutationTypes.ts
+++ b/src/types/MutationTypes.ts
@@ -7,3 +7,7 @@ export const FOLDER_MUTATION_TYPES = {
 	SET_FOLDERS: 'SET_FOLDERS',
 	DELETE_FOLDER: 'DELETE_FOLDER',
 }
+
+export const FEED_ITEM_MUTATION_TYPES = {
+	SET_STARRED: 'SET_STARRED',
+}

From 1aa043ee9b225b4f0fb45c4f50e246c1820d7d5c Mon Sep 17 00:00:00 2001
From: Devlin Junker <devlin.junker@gmail.com>
Date: Mon, 14 Aug 2023 19:18:42 -0700
Subject: [PATCH 2/9] basic starred items list with VirtualScroll component

Signed-off-by: Devlin Junker <devlin.junker@gmail.com>
---
 src/App.vue                      |   1 +
 src/components/FeedItem.vue      |  56 +++++++++++++
 src/components/ItemSkeleton.vue  |  28 +++++++
 src/components/Starred.vue       |  20 +++--
 src/components/VirtualScroll.vue | 135 +++++++++++++++++++++++++++++++
 src/store/item.ts                |  20 ++++-
 src/types/FeedItem.ts            |   4 +
 7 files changed, 254 insertions(+), 10 deletions(-)
 create mode 100644 src/components/FeedItem.vue
 create mode 100644 src/components/ItemSkeleton.vue
 create mode 100644 src/components/VirtualScroll.vue
 create mode 100644 src/types/FeedItem.ts

diff --git a/src/App.vue b/src/App.vue
index 0f5c1a0dcb..98c3e393c2 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -24,6 +24,7 @@ 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/FeedItem.vue b/src/components/FeedItem.vue
new file mode 100644
index 0000000000..880178e16e
--- /dev/null
+++ b/src/components/FeedItem.vue
@@ -0,0 +1,56 @@
+<template>
+	<div style="padding: 5px 10px; display: flex;" @click="expand()">
+		<div style="padding: 0px 5px;">
+			<EarthIcon />
+		</div>
+		<div style="flex-grow: 1; overflow: hidden; text-overflow: ellipsis;">
+			<span style="text-overflow: ellipsis;" :style="{ 'white-space': !isExpanded ? 'nowrap' : 'normal' }">
+				{{ item.title }}
+			</span>
+		</div>
+		<div class="button-container" style="display: flex; flex-direction: row;">
+			<StarIcon />
+			<EyeOutline />
+			<ShareVariant />
+		</div>
+	</div>
+</template>
+
+<script>
+import EarthIcon from 'vue-material-design-icons/Earth.vue'
+import StarIcon from 'vue-material-design-icons/Star.vue'
+import EyeOutline from 'vue-material-design-icons/EyeOutline.vue'
+import ShareVariant from 'vue-material-design-icons/ShareVariant.vue'
+
+export default {
+	name: 'FeedItem',
+	components: {
+		EarthIcon,
+		StarIcon,
+		EyeOutline,
+		ShareVariant,
+	},
+	props: {
+		item: {
+			type: Object,
+			required: true,
+		},
+	},
+	data: () => {
+		return {
+			expanded: false,
+		}
+	},
+	computed: {
+		isExpanded() {
+			return this.expanded
+		},
+	},
+	methods: {
+		expand() {
+			this.expanded = !this.expanded
+		},
+	},
+}
+
+</script>
diff --git a/src/components/ItemSkeleton.vue b/src/components/ItemSkeleton.vue
new file mode 100644
index 0000000000..3b3b3f50cc
--- /dev/null
+++ b/src/components/ItemSkeleton.vue
@@ -0,0 +1,28 @@
+<!--
+  - Copyright (c) 2020. The Nextcloud Bookmarks contributors.
+  -
+  - This file is licensed under the Affero General Public License version 3 or later. See the COPYING file.
+  -->
+
+<template>
+	<div :class="{
+			item: true,
+		}"
+		:style="{ background: 'var(--color-placeholder-dark)', height: '45px'}">
+		<div class="item__labels" />
+		<div class="item__actions" />
+	</div>
+</template>
+<script>
+
+export default {
+	name: 'ItemSkeleton',
+	components: {
+	},
+	computed: {
+		viewMode() {
+			return this.$store.state.settings.viewMode
+		},
+	},
+}
+</script>
diff --git a/src/components/Starred.vue b/src/components/Starred.vue
index d0f51ab458..b35e472d1a 100644
--- a/src/components/Starred.vue
+++ b/src/components/Starred.vue
@@ -1,18 +1,24 @@
 <template>
-	<div>
-		Starred Items:
-		<div v-for="item in items.starredItems" :key="item.id">
-			{{ item.title }}
-		</div>
+	<div style="margin-top: 40px;">
+		<VirtualScroll :reached-end="items.starredLoaded">
+			<template v-if="items.starredItems && items.starredItems.length > 0">
+				<template v-for="item in items.starredItems">
+					<FeedItem :key="item.id" :item="item" />
+				</template>
+			</template>
+		</VirtualScroll>
 	</div>
 </template>
 
 <script lang="ts">
-import { FEED_ITEM_ACTION_TYPES } from '../store/item'
 import { mapState } from 'vuex'
+import FeedItem from './FeedItem.vue'
+import VirtualScroll from './VirtualScroll.vue'
 
 export default {
 	components: {
+		VirtualScroll,
+		FeedItem,
 	},
 	props: {
 
@@ -24,7 +30,7 @@ export default {
 		// },
 	},
 	async created() {
-		await this.$store.dispatch(FEED_ITEM_ACTION_TYPES.FETCH_STARRED)
+		// TODO: ?
 	},
 	methods: {
 		async fetchStarred() {
diff --git a/src/components/VirtualScroll.vue b/src/components/VirtualScroll.vue
new file mode 100644
index 0000000000..cf5aeb24e7
--- /dev/null
+++ b/src/components/VirtualScroll.vue
@@ -0,0 +1,135 @@
+<!--
+  - Copyright (c) 2022. The Nextcloud Bookmarks contributors.
+  -
+  - This file is licensed under the Affero General Public License version 3 or later. See the COPYING file.
+  -->
+<script>
+import ItemSkeleton from './ItemSkeleton.vue'
+
+const GRID_ITEM_HEIGHT = 200 + 10
+// const GRID_ITEM_WIDTH = 250 + 10
+const LIST_ITEM_HEIGHT = 45 + 1
+
+export default {
+	name: 'VirtualScroll',
+	props: {
+		reachedEnd: {
+			type: Boolean,
+			required: true,
+		},
+	},
+	data() {
+		return {
+			viewport: { width: 0, height: 0 },
+			scrollTop: 0,
+			scrollHeight: 500,
+			initialLoadingSkeleton: false,
+			initialLoadingTimeout: null,
+		}
+	},
+	computed: {
+		fetching() {
+			return this.$store.state.items.fetchingItems
+		},
+	},
+	watch: {
+		newBookmark() {
+			this.$el.scrollTop = 0
+		},
+		newFolder() {
+			this.$el.scrollTop = 0
+		},
+	},
+	mounted() {
+		this.onScroll()
+		window.addEventListener('resize', this.onScroll)
+	},
+	destroyed() {
+		window.removeEventListener('resize', this.onScroll)
+	},
+	methods: {
+		onScroll() {
+			this.scrollTop = this.$el.scrollTop
+			this.scrollHeight = this.$el.scrollHeight
+		},
+	},
+	render(h) {
+		let children = []
+		let renderedItems = 0
+		let upperPaddingItems = 0
+		let lowerPaddingItems = 0
+		let itemHeight = 1
+		const padding = GRID_ITEM_HEIGHT
+		if (this.$slots.default && this.$el && this.$el.getBoundingClientRect) {
+			const childComponents = this.$slots.default.filter(child => !!child.componentOptions)
+			const viewport = this.$el.getBoundingClientRect()
+			itemHeight = LIST_ITEM_HEIGHT
+			renderedItems = Math.floor((viewport.height + padding + padding) / itemHeight)
+			upperPaddingItems = Math.floor(Math.max(this.scrollTop - padding, 0) / itemHeight)
+			children = childComponents.slice(upperPaddingItems, upperPaddingItems + renderedItems)
+			renderedItems = children.length
+			lowerPaddingItems = Math.max(childComponents.length - upperPaddingItems - renderedItems, 0)
+		}
+
+		if (!this.reachedEnd && lowerPaddingItems === 0) {
+			if (!this.fetching) {
+				this.$emit('load-more')
+			}
+			if (upperPaddingItems + renderedItems + lowerPaddingItems === 0) {
+				if (!this.initialLoadingSkeleton) {
+					// The first 350ms don't display skeletons
+					this.initialLoadingTimeout = setTimeout(() => {
+						this.initialLoadingSkeleton = true
+						this.$forceUpdate()
+					}, 350)
+					return h('div', { class: 'virtual-scroll' })
+				}
+			}
+
+			children = [...children, ...Array(40).fill(0).map(() =>
+				h(ItemSkeleton),
+			)]
+		}
+
+		if (upperPaddingItems + renderedItems + lowerPaddingItems > 0) {
+			this.initialLoadingSkeleton = false
+			if (this.initialLoadingTimeout) {
+				clearTimeout(this.initialLoadingTimeout)
+			}
+		}
+
+		const scrollTop = this.scrollTop
+		this.$nextTick(() => {
+			this.$el.scrollTop = scrollTop
+		})
+
+		return h('div', {
+			class: 'virtual-scroll',
+			on: { scroll: () => this.onScroll() },
+		},
+		[
+			h('div', { class: 'upper-padding', style: { height: Math.max((upperPaddingItems) * itemHeight, 0) + 'px' } }),
+			h('div', { class: 'container-window', style: { height: Math.max((renderedItems) * itemHeight, 0) + 'px' } }, children),
+			h('div', { class: 'lower-padding', style: { height: Math.max((lowerPaddingItems) * itemHeight, 0) + 'px' } }),
+		])
+	},
+}
+</script>
+
+<style scoped>
+.virtual-scroll {
+	height: calc(100vh - 50px - 50px - 10px);
+	position: relative;
+	overflow-y: scroll;
+}
+
+.bookmarkslist--gridview .container-window {
+	display: flex;
+	flex-direction: row;
+	flex-wrap: wrap;
+	align-content: start;
+	gap: 10px;
+	padding: 0 10px;
+	padding-top: 10px;
+}
+</style>
diff --git a/src/store/item.ts b/src/store/item.ts
index 09a6b6f968..d108e34a7d 100644
--- a/src/store/item.ts
+++ b/src/store/item.ts
@@ -3,17 +3,24 @@ import axios from '@nextcloud/axios'
 import { ActionParams } from '../store'
 import { FEED_ITEM_MUTATION_TYPES } from '../types/MutationTypes'
 import { API_ROUTES } from '../types/ApiRoutes'
+import { FeedItem } from '../types/FeedItem'
 
 export const FEED_ITEM_ACTION_TYPES = {
 	FETCH_STARRED: 'FETCH_STARRED',
 }
 
 export type ItemState = {
-	allItems: any[];
-	starredItems: any[];
+	fetchingItems: boolean;
+	starredLoaded: boolean;
+
+	allItems: FeedItem[];
+	starredItems: FeedItem[];
 }
 
 const state: ItemState = {
+	fetchingItems: false,
+	starredLoaded: false,
+
 	allItems: [],
 	starredItems: [],
 }
@@ -26,6 +33,7 @@ const getters = {
 
 export const actions = {
 	async [FEED_ITEM_ACTION_TYPES.FETCH_STARRED]({ commit }: ActionParams) {
+		state.fetchingItems = true
 		const response = await axios.get(API_ROUTES.ITEMS, {
 			params: {
 				limit: 40,
@@ -33,15 +41,21 @@ export const actions = {
 				search: '',
 				showAll: false,
 				type: 2,
+				offset: 0,
 			},
 		})
 
 		commit(FEED_ITEM_MUTATION_TYPES.SET_STARRED, response.data.items)
+
+		if (response.data.items.length < 40) {
+			state.starredLoaded = true
+		}
+		state.fetchingItems = false
 	},
 }
 
 export const mutations = {
-	[FEED_ITEM_MUTATION_TYPES.SET_STARRED](state: ItemState, items: any[]) {
+	[FEED_ITEM_MUTATION_TYPES.SET_STARRED](state: ItemState, items: FeedItem[]) {
 		items.forEach(it => {
 			state.starredItems.push(it)
 		})
diff --git a/src/types/FeedItem.ts b/src/types/FeedItem.ts
new file mode 100644
index 0000000000..7ffe461c71
--- /dev/null
+++ b/src/types/FeedItem.ts
@@ -0,0 +1,4 @@
+export type FeedItem = {
+  id: string;
+  title: string;
+};

From 9157a885c13c746935236a28bcb5113a3c737669 Mon Sep 17 00:00:00 2001
From: Devlin Junker <devlin.junker@gmail.com>
Date: Mon, 14 Aug 2023 21:40:21 -0700
Subject: [PATCH 3/9] some cleanup and improvements

Signed-off-by: Devlin Junker <devlin.junker@gmail.com>
---
 src/components/FeedItem.vue | 56 +++++++++++++++++++++++++++----------
 src/components/Starred.vue  |  7 +++--
 2 files changed, 46 insertions(+), 17 deletions(-)

diff --git a/src/components/FeedItem.vue b/src/components/FeedItem.vue
index 880178e16e..25d3ccec72 100644
--- a/src/components/FeedItem.vue
+++ b/src/components/FeedItem.vue
@@ -1,25 +1,29 @@
 <template>
-	<div style="padding: 5px 10px; display: flex;" @click="expand()">
-		<div style="padding: 0px 5px;">
-			<EarthIcon />
-		</div>
-		<div style="flex-grow: 1; overflow: hidden; text-overflow: ellipsis;">
-			<span style="text-overflow: ellipsis;" :style="{ 'white-space': !isExpanded ? 'nowrap' : 'normal' }">
-				{{ item.title }}
-			</span>
-		</div>
-		<div class="button-container" style="display: flex; flex-direction: row;">
-			<StarIcon />
-			<EyeOutline />
-			<ShareVariant />
+	<div class="feed-item-container" style="padding: 5px 10px;" @click="expand()">
+		<div style="display: flex;">
+			<div style="padding: 0px 5px;">
+				<EarthIcon />
+			</div>
+			<div style="flex-grow: 1; overflow: hidden; text-overflow: ellipsis;">
+				<span style="text-overflow: ellipsis;" :style="{ 'white-space': !isExpanded ? 'nowrap' : 'normal' }">
+					{{ item.title }}
+				</span>
+			</div>
+			<div class="button-container" style="display: flex; flex-direction: row; align-self: start;">
+				<StarIcon :class="{'starred': item.starred }" />
+				<Eye />
+				<ShareVariant />
+			</div>
 		</div>
+
+		<div v-if="isExpanded" v-html="item.body" />
 	</div>
 </template>
 
 <script>
 import EarthIcon from 'vue-material-design-icons/Earth.vue'
 import StarIcon from 'vue-material-design-icons/Star.vue'
-import EyeOutline from 'vue-material-design-icons/EyeOutline.vue'
+import Eye from 'vue-material-design-icons/Eye.vue'
 import ShareVariant from 'vue-material-design-icons/ShareVariant.vue'
 
 export default {
@@ -27,7 +31,7 @@ export default {
 	components: {
 		EarthIcon,
 		StarIcon,
-		EyeOutline,
+		Eye,
 		ShareVariant,
 	},
 	props: {
@@ -54,3 +58,25 @@ export default {
 }
 
 </script>
+
+<style>
+	.feed-item-container, .feed-item-container * {
+		cursor: pointer;
+	}
+
+	.material-design-icon {
+		color: #555555;
+	}
+
+	.material-design-icon:hover {
+		color: var(--color-main-text);
+	}
+
+	.material-design-icon.starred {
+		color: rgb(255, 204, 0);
+	}
+
+	.material-design-icon.starred:hover {
+		color: #555555;
+	}
+</style>
diff --git a/src/components/Starred.vue b/src/components/Starred.vue
index b35e472d1a..fee219f796 100644
--- a/src/components/Starred.vue
+++ b/src/components/Starred.vue
@@ -1,6 +1,9 @@
 <template>
-	<div style="margin-top: 40px;">
-		<VirtualScroll :reached-end="items.starredLoaded">
+	<div>
+		<div style="padding-left: 50px; position: absolute; top: 1em; font-weight: 700;">
+			Starred
+		</div>
+		<VirtualScroll :reached-end="items.starredLoaded" style="margin-top: 50px; border-top: 1px solid var(--color-border);">
 			<template v-if="items.starredItems && items.starredItems.length > 0">
 				<template v-for="item in items.starredItems">
 					<FeedItem :key="item.id" :item="item" />

From bfb168ecf67231cc26826e96979808f9fdc4ddf8 Mon Sep 17 00:00:00 2001
From: Devlin Junker <devlin.junker@gmail.com>
Date: Tue, 15 Aug 2023 10:41:32 -0700
Subject: [PATCH 4/9] css effects

Signed-off-by: Devlin Junker <devlin.junker@gmail.com>
---
 src/components/FeedItem.vue | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 3 deletions(-)

diff --git a/src/components/FeedItem.vue b/src/components/FeedItem.vue
index 25d3ccec72..2a61c473d6 100644
--- a/src/components/FeedItem.vue
+++ b/src/components/FeedItem.vue
@@ -1,6 +1,6 @@
 <template>
-	<div class="feed-item-container" style="padding: 5px 10px;" @click="expand()">
-		<div style="display: flex;">
+	<div class="feed-item-container" @click="expand()">
+		<div class="feed-item-row" style="display: flex; padding: 5px 10px;">
 			<div style="padding: 0px 5px;">
 				<EarthIcon />
 			</div>
@@ -16,7 +16,10 @@
 			</div>
 		</div>
 
-		<div v-if="isExpanded" v-html="item.body" />
+		<div v-if="isExpanded" style="padding: 5px 10px;">
+			<div class="feed-item-author" v-if="item.author != undefined" v-html="item.author" />
+			<div v-html="item.body" />
+		</div>
 	</div>
 </template>
 
@@ -64,6 +67,14 @@ export default {
 		cursor: pointer;
 	}
 
+	.feed-item-container {
+		border-bottom: 1px solid #222;
+	}
+
+	.feed-item-row:hover {
+		background-color: #222;
+	}
+
 	.material-design-icon {
 		color: #555555;
 	}

From ed9b9dbd888600ee92ed3c29213a5433f9fbe810 Mon Sep 17 00:00:00 2001
From: Devlin Junker <devlin.junker@gmail.com>
Date: Tue, 15 Aug 2023 13:11:22 -0700
Subject: [PATCH 5/9] match style from current app

Signed-off-by: Devlin Junker <devlin.junker@gmail.com>
---
 src/components/FeedItem.vue | 232 +++++++++++++++++++++++++++++++++---
 src/components/Sidebar.vue  |   4 +-
 src/components/Starred.vue  |   9 +-
 src/store/item.ts           |   9 ++
 src/types/MutationTypes.ts  |   1 +
 5 files changed, 237 insertions(+), 18 deletions(-)

diff --git a/src/components/FeedItem.vue b/src/components/FeedItem.vue
index 2a61c473d6..841dc4585b 100644
--- a/src/components/FeedItem.vue
+++ b/src/components/FeedItem.vue
@@ -1,24 +1,118 @@
 <template>
-	<div class="feed-item-container" @click="expand()">
-		<div class="feed-item-row" style="display: flex; padding: 5px 10px;">
-			<div style="padding: 0px 5px;">
-				<EarthIcon />
+	<div class="feed-item-container">
+		<div class="feed-item-row" @click="expand()">
+			<div style="padding-right: 5px; display: flex; flex-direction: row; align-self: start;">
+				<a class="external"
+					target="_blank"
+					rel="noreferrer"
+					:href="item.url"
+					:title="t('news', 'Open website')"
+					@click="markRead(item.id); $event.stopPropagation();">
+					<EarthIcon />
+				</a>
+				<RssIcon v-if="!getFeed(item.feedId).faviconLink" />
+				<span v-if="getFeed(item.feedId).faviconLink" :style="{ 'backgroundImage': 'url(' + Content.getFeed(item.feedId).faviconLink + ')' }" />
 			</div>
-			<div style="flex-grow: 1; overflow: hidden; text-overflow: ellipsis;">
-				<span style="text-overflow: ellipsis;" :style="{ 'white-space': !isExpanded ? 'nowrap' : 'normal' }">
+			<div class="title-container" :class="{ 'unread': item.unread }">
+				<span :style="{ 'white-space': !isExpanded ? 'nowrap' : 'normal' }" :dir="item.rtl && 'rtl'">
 					{{ item.title }}
+					<span v-if="!isExpanded" class="intro" v-html="item.intro" />
 				</span>
 			</div>
-			<div class="button-container" style="display: flex; flex-direction: row; align-self: start;">
-				<StarIcon :class="{'starred': item.starred }" />
-				<Eye />
-				<ShareVariant />
+			<div class="date-container">
+				<time class="date" :title="formatDate(item.pubDate*1000, 'yyyy-MM-dd HH:mm:ss')" :datetime="formatDate(item.pubDate*1000, 'yyyy-MM-ddTHH:mm:ssZ')">
+					{{ getRelativeTimestamp(item.pubDate*1000) }}
+				</time>
+			</div>
+			<div class="button-container" @click="$event.stopPropagation()">
+				<StarIcon :class="{'starred': item.starred }" @click="toggleStarred()" />
+				<Eye :class="{ 'keep-unread': item.keepUnread }" @click="toggleKeepUnread()" />
+				<NcActions :force-menu="true">
+					<template #icon>
+						<ShareVariant />
+					</template>
+					<NcActionButton>
+						<template #default>
+							<!-- TODO: --> TODO
+						</template>
+						<template #icon>
+							<ShareVariant />
+						</template>
+					</NcActionButton>
+				</NcActions>
 			</div>
 		</div>
 
 		<div v-if="isExpanded" style="padding: 5px 10px;">
-			<div class="feed-item-author" v-if="item.author != undefined" v-html="item.author" />
-			<div v-html="item.body" />
+			<div class="article">
+				<!--div class="heading only-in-expanded">
+					<time class="date" :title="formatDate(item.pubDate*1000, 'yyyy-MM-dd HH:mm:ss')" :datetime="formatDate(item.pubDate*1000, 'yyyy-MM-ddTHH:mm:ssZ')">
+						{{ getRelativeTimestamp(item.pubDate*1000) }}
+					</time>
+					<h1 :dir="item.rtl && 'rtl'">
+						<a class="external"
+							target="_blank"
+							rel="noreferrer"
+							:href="item.url"
+							:title="item.title">
+							{{ item.title }}
+						</a>
+					</h1>
+				</div-->
+
+				<div class="subtitle" :dir="item.rtl && 'rtl'">
+					<span v-show="item.author !== undefined" class="author">
+						{{ t('news', 'by') }} {{ item.author }}
+					</span>
+					<span v-if="!item.sharedBy" class="source">{{ t('news', 'from') }}
+						<!-- TODO: Fix this -->
+						<a :href="`#/items/feeds/${item.feedId}/`">
+							{{ getFeed(item.feedId).title }}
+							<img v-if="getFeed(item.feedId).faviconLink && isCompactView()" :src="getFeed(item.feedId).faviconLink" alt="favicon">
+						</a>
+					</span>
+					<span v-if="item.sharedBy">
+						<span v-if="item.author">-</span>
+						{{ t('news', 'shared by') }}
+						{{ item.sharedByDisplayName }}
+					</span>
+				</div>
+
+				<div v-if="getMediaType(item.enclosureMime) == 'audio'" class="enclosure">
+					<button @click="play(item)">
+						{{ t('news', 'Play audio') }}
+						<!--?php p($l->t('Play audio')) ?-->
+					</button>
+					<a class="button"
+						:href="item.enclosureLink"
+						target="_blank"
+						rel="noreferrer">
+						{{ t('news', 'Download audio') }}
+						<!--?php p($l->t('Download audio')) ? -->
+					</a>
+				</div>
+				<div v-if="getMediaType(item.enclosureMime) == 'video'" class="enclosure">
+					<video controls
+						preload="none"
+						news-play-one
+						:src="item.enclosureLink"
+						:type="item.enclosureMime" />
+					<a class="button"
+						:href="item.enclosureLink"
+						target="_blank"
+						rel="noreferrer">
+						{{ t('news', 'Download video') }}
+					</a>
+				</div>
+
+				<div v-if="item.mediaThumbnail" class="enclosure thumbnail">
+					<a :href="item.enclosureLink"><img :src="item.mediaThumbnail" alt=""></a>
+				</div>
+
+				<div v-if="item.mediaDescription" class="enclosure description" v-html="item.mediaDescription" />
+
+				<div class="body" :dir="item.rtl && 'rtl'" v-html="item.body" />
+			</div>
 		</div>
 	</div>
 </template>
@@ -27,7 +121,10 @@
 import EarthIcon from 'vue-material-design-icons/Earth.vue'
 import StarIcon from 'vue-material-design-icons/Star.vue'
 import Eye from 'vue-material-design-icons/Eye.vue'
+import RssIcon from 'vue-material-design-icons/Rss.vue'
 import ShareVariant from 'vue-material-design-icons/ShareVariant.vue'
+import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
+import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
 
 export default {
 	name: 'FeedItem',
@@ -36,6 +133,9 @@ export default {
 		StarIcon,
 		Eye,
 		ShareVariant,
+		RssIcon,
+		NcActions,
+		NcActionButton,
 	},
 	props: {
 		item: {
@@ -57,24 +157,90 @@ export default {
 		expand() {
 			this.expanded = !this.expanded
 		},
+		formatDate() {
+			return 'test'
+		},
+		getRelativeTimestamp() {
+			return 'yesterday'
+		},
+		getFeed(id) {
+			return {}
+		},
+		getMediaType(mime) {
+			return false
+		},
+		play(item) {
+			// TODO: implement this
+		},
+		markRead() {
+			// TODO: implement this
+		},
+		toggleKeepUnread() {
+			// TODO: implement this
+		},
+		toggleStarred() {
+			// TODO: implement this
+		},
 	},
 }
 
 </script>
 
 <style>
-	.feed-item-container, .feed-item-container * {
-		cursor: pointer;
-	}
 
 	.feed-item-container {
 		border-bottom: 1px solid #222;
 	}
 
+	.feed-item-row {
+		display: flex; padding: 5px 10px;
+	}
+
 	.feed-item-row:hover {
 		background-color: #222;
 	}
 
+	.feed-item-row, .feed-item-row * {
+		cursor: pointer;
+	}
+
+	.feed-item-row .title-container {
+		color: var(--color-text-lighter);
+
+		flex-grow: 1;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+
+	.feed-item-row .title-container.unread {
+		color: var(--color-main-text);
+    font-weight: bold;
+	}
+
+	.feed-item-row .intro {
+		color: var(--color-text-lighter);
+    font-size: 10pt;
+    font-weight: normal;
+    margin-left: 20px;
+	}
+
+	.feed-item-row .date-container {
+		padding-left: 4px;
+	}
+
+	.feed-item-row .button-container {
+		display: flex;
+		flex-direction: row;
+		align-self: start;
+	}
+
+	.button-container .action-item .button-vue, .button-container .material-design-icon {
+		width: 30px !important;
+    min-width: 30px;
+    min-height: 30px;
+    height: 30px;
+	}
+
 	.material-design-icon {
 		color: #555555;
 	}
@@ -83,11 +249,47 @@ export default {
 		color: var(--color-main-text);
 	}
 
+	.material-design-icon.rss-icon:hover {
+		color: #555555;
+	}
+
 	.material-design-icon.starred {
 		color: rgb(255, 204, 0);
 	}
 
+	.material-design-icon.keep-unread {
+		color: var(--color-main-text);
+	}
+
 	.material-design-icon.starred:hover {
 		color: #555555;
 	}
+
+	.article {
+		padding: 0 50px 50px 50px;
+	}
+
+	.article .body {
+		color: var(--color-main-text);
+    font-size: 15px;
+	}
+
+	.article a {
+		text-decoration: underline;
+	}
+
+	.article .body a {
+		color: #3a84e4
+	}
+
+	.article .subtitle {
+		color: var(--color-text-lighter);
+    font-size: 15px;
+    padding: 25px 0;
+	}
+
+	.article .author {
+		color: var(--color-text-lighter);
+    font-size: 15px;
+	}
 </style>
diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue
index 5ef486d858..0cad27654d 100644
--- a/src/components/Sidebar.vue
+++ b/src/components/Sidebar.vue
@@ -29,7 +29,7 @@
 			</NcAppNavigationItem>
 			<NcAppNavigationItem :title="t('news', 'Starred')" icon="icon-starred" :to="{ name: ROUTES.STARRED }">
 				<template #counter>
-					<NcCounterBubble>35</NcCounterBubble>
+					<NcCounterBubble>{{ items.starredCount }}</NcCounterBubble>
 				</template>
 			</NcAppNavigationItem>
 
@@ -178,7 +178,7 @@ export default Vue.extend({
 		}
 	},
 	computed: {
-		...mapState(['feeds', 'folders']),
+		...mapState(['feeds', 'folders', 'items']),
 		...mapState(SideBarState),
 	},
 	created() {
diff --git a/src/components/Starred.vue b/src/components/Starred.vue
index fee219f796..60a2ae6bb1 100644
--- a/src/components/Starred.vue
+++ b/src/components/Starred.vue
@@ -2,6 +2,9 @@
 	<div>
 		<div style="padding-left: 50px; position: absolute; top: 1em; font-weight: 700;">
 			Starred
+			<NcCounterBubble style="display: inline-block; vertical-align: sub; margin-left: 10px;">
+				{{ items.starredCount }}
+			</NcCounterBubble>
 		</div>
 		<VirtualScroll :reached-end="items.starredLoaded" style="margin-top: 50px; border-top: 1px solid var(--color-border);">
 			<template v-if="items.starredItems && items.starredItems.length > 0">
@@ -14,12 +17,16 @@
 </template>
 
 <script lang="ts">
+import NcCounterBubble from '@nextcloud/vue/dist/Components/NcCounterBubble.js'
+
 import { mapState } from 'vuex'
-import FeedItem from './FeedItem.vue'
+
 import VirtualScroll from './VirtualScroll.vue'
+import FeedItem from './FeedItem.vue'
 
 export default {
 	components: {
+		NcCounterBubble,
 		VirtualScroll,
 		FeedItem,
 	},
diff --git a/src/store/item.ts b/src/store/item.ts
index d108e34a7d..c10360c040 100644
--- a/src/store/item.ts
+++ b/src/store/item.ts
@@ -13,6 +13,8 @@ export type ItemState = {
 	fetchingItems: boolean;
 	starredLoaded: boolean;
 
+	starredCount: number;
+
 	allItems: FeedItem[];
 	starredItems: FeedItem[];
 }
@@ -21,6 +23,8 @@ const state: ItemState = {
 	fetchingItems: false,
 	starredLoaded: false,
 
+	starredCount: 0,
+
 	allItems: [],
 	starredItems: [],
 }
@@ -46,6 +50,7 @@ export const actions = {
 		})
 
 		commit(FEED_ITEM_MUTATION_TYPES.SET_STARRED, response.data.items)
+		commit(FEED_ITEM_MUTATION_TYPES.SET_STARRED_COUNT, response.data.starred)
 
 		if (response.data.items.length < 40) {
 			state.starredLoaded = true
@@ -60,6 +65,10 @@ export const mutations = {
 			state.starredItems.push(it)
 		})
 	},
+	[FEED_ITEM_MUTATION_TYPES.SET_STARRED_COUNT](state: ItemState, count: number) {
+		state.starredCount = count
+	},
+
 }
 
 export default {
diff --git a/src/types/MutationTypes.ts b/src/types/MutationTypes.ts
index 9149da0599..cb87a1719b 100644
--- a/src/types/MutationTypes.ts
+++ b/src/types/MutationTypes.ts
@@ -10,4 +10,5 @@ export const FOLDER_MUTATION_TYPES = {
 
 export const FEED_ITEM_MUTATION_TYPES = {
 	SET_STARRED: 'SET_STARRED',
+	SET_STARRED_COUNT: 'SET_STARRED_COUNT',
 }

From fd564258e1e41ac55b0d76a1359b210b8ef9c820 Mon Sep 17 00:00:00 2001
From: Devlin Junker <devlin.junker@gmail.com>
Date: Tue, 15 Aug 2023 18:42:47 -0700
Subject: [PATCH 6/9] start on user actions and some more cleanup

Signed-off-by: Devlin Junker <devlin.junker@gmail.com>
---
 src/components/FeedItem.vue      | 197 +++++++++++++++++++------------
 src/components/Starred.vue       |  53 ++++++---
 src/components/VirtualScroll.vue |   2 +
 src/shims-vue.d.ts               |   5 +-
 src/types/Feed.ts                |   1 +
 src/types/FeedItem.ts            |   2 +
 6 files changed, 169 insertions(+), 91 deletions(-)

diff --git a/src/components/FeedItem.vue b/src/components/FeedItem.vue
index 841dc4585b..5eabf30cf2 100644
--- a/src/components/FeedItem.vue
+++ b/src/components/FeedItem.vue
@@ -1,13 +1,13 @@
 <template>
 	<div class="feed-item-container">
 		<div class="feed-item-row" @click="expand()">
-			<div style="padding-right: 5px; display: flex; flex-direction: row; align-self: start;">
+			<div class="link-container">
 				<a class="external"
 					target="_blank"
 					rel="noreferrer"
 					:href="item.url"
 					:title="t('news', 'Open website')"
-					@click="markRead(item.id); $event.stopPropagation();">
+					@click="markRead(item); $event.stopPropagation();">
 					<EarthIcon />
 				</a>
 				<RssIcon v-if="!getFeed(item.feedId).faviconLink" />
@@ -20,13 +20,13 @@
 				</span>
 			</div>
 			<div class="date-container">
-				<time class="date" :title="formatDate(item.pubDate*1000, 'yyyy-MM-dd HH:mm:ss')" :datetime="formatDate(item.pubDate*1000, 'yyyy-MM-ddTHH:mm:ssZ')">
+				<time class="date" :title="formatDate(item.pubDate*1000, 'yyyy-MM-dd HH:mm:ss')" :datetime="formatDatetime(item.pubDate*1000, 'yyyy-MM-ddTHH:mm:ssZ')">
 					{{ getRelativeTimestamp(item.pubDate*1000) }}
 				</time>
 			</div>
 			<div class="button-container" @click="$event.stopPropagation()">
-				<StarIcon :class="{'starred': item.starred }" @click="toggleStarred()" />
-				<Eye :class="{ 'keep-unread': item.keepUnread }" @click="toggleKeepUnread()" />
+				<StarIcon :class="{'starred': item.starred }" @click="toggleStarred(item)" />
+				<Eye :class="{ 'keep-unread': keepUnread }" @click="toggleKeepUnread(item)" />
 				<NcActions :force-menu="true">
 					<template #icon>
 						<ShareVariant />
@@ -43,9 +43,8 @@
 			</div>
 		</div>
 
-		<div v-if="isExpanded" style="padding: 5px 10px;">
-			<div class="article">
-				<!--div class="heading only-in-expanded">
+		<div v-if="isExpanded" class="article">
+			<!--div class="heading only-in-expanded">
 					<time class="date" :title="formatDate(item.pubDate*1000, 'yyyy-MM-dd HH:mm:ss')" :datetime="formatDate(item.pubDate*1000, 'yyyy-MM-ddTHH:mm:ssZ')">
 						{{ getRelativeTimestamp(item.pubDate*1000) }}
 					</time>
@@ -60,73 +59,78 @@
 					</h1>
 				</div-->
 
-				<div class="subtitle" :dir="item.rtl && 'rtl'">
-					<span v-show="item.author !== undefined" class="author">
-						{{ t('news', 'by') }} {{ item.author }}
-					</span>
-					<span v-if="!item.sharedBy" class="source">{{ t('news', 'from') }}
-						<!-- TODO: Fix this -->
-						<a :href="`#/items/feeds/${item.feedId}/`">
-							{{ getFeed(item.feedId).title }}
-							<img v-if="getFeed(item.feedId).faviconLink && isCompactView()" :src="getFeed(item.feedId).faviconLink" alt="favicon">
-						</a>
-					</span>
-					<span v-if="item.sharedBy">
-						<span v-if="item.author">-</span>
-						{{ t('news', 'shared by') }}
-						{{ item.sharedByDisplayName }}
-					</span>
-				</div>
-
-				<div v-if="getMediaType(item.enclosureMime) == 'audio'" class="enclosure">
-					<button @click="play(item)">
-						{{ t('news', 'Play audio') }}
-						<!--?php p($l->t('Play audio')) ?-->
-					</button>
-					<a class="button"
-						:href="item.enclosureLink"
-						target="_blank"
-						rel="noreferrer">
-						{{ t('news', 'Download audio') }}
-						<!--?php p($l->t('Download audio')) ? -->
-					</a>
-				</div>
-				<div v-if="getMediaType(item.enclosureMime) == 'video'" class="enclosure">
-					<video controls
-						preload="none"
-						news-play-one
-						:src="item.enclosureLink"
-						:type="item.enclosureMime" />
-					<a class="button"
-						:href="item.enclosureLink"
-						target="_blank"
-						rel="noreferrer">
-						{{ t('news', 'Download video') }}
+			<div class="subtitle" :dir="item.rtl && 'rtl'">
+				<span v-show="item.author !== undefined" class="author">
+					{{ t('news', 'by') }} {{ item.author }}
+				</span>
+				<span v-if="!item.sharedBy" class="source">{{ t('news', 'from') }}
+					<!-- TODO: Fix this -->
+					<a :href="`#/items/feeds/${item.feedId}/`">
+						{{ getFeed(item.feedId).title }}
+						<img v-if="getFeed(item.feedId).faviconLink && isCompactView()" :src="getFeed(item.feedId).faviconLink" alt="favicon">
 					</a>
-				</div>
-
-				<div v-if="item.mediaThumbnail" class="enclosure thumbnail">
-					<a :href="item.enclosureLink"><img :src="item.mediaThumbnail" alt=""></a>
-				</div>
+				</span>
+				<span v-if="item.sharedBy">
+					<span v-if="item.author">-</span>
+					{{ t('news', 'shared by') }}
+					{{ item.sharedByDisplayName }}
+				</span>
+			</div>
 
-				<div v-if="item.mediaDescription" class="enclosure description" v-html="item.mediaDescription" />
+			<!-- TODO: Test this -->
+			<div v-if="getMediaType(item.enclosureMime) == 'audio'" class="enclosure">
+				<button @click="play(item)">
+					{{ t('news', 'Play audio') }}
+				</button>
+				<a class="button"
+					:href="item.enclosureLink"
+					target="_blank"
+					rel="noreferrer">
+					{{ t('news', 'Download audio') }}
+				</a>
+			</div>
+			<div v-if="getMediaType(item.enclosureMime) == 'video'" class="enclosure">
+				<video controls
+					preload="none"
+					news-play-one
+					:src="item.enclosureLink"
+					:type="item.enclosureMime" />
+				<a class="button"
+					:href="item.enclosureLink"
+					target="_blank"
+					rel="noreferrer">
+					{{ t('news', 'Download video') }}
+				</a>
+			</div>
 
-				<div class="body" :dir="item.rtl && 'rtl'" v-html="item.body" />
+			<div v-if="item.mediaThumbnail" class="enclosure thumbnail">
+				<a :href="item.enclosureLink"><img :src="item.mediaThumbnail" alt=""></a>
 			</div>
+
+			<div v-if="item.mediaDescription" class="enclosure description" v-html="item.mediaDescription" />
+
+			<div class="body" :dir="item.rtl && 'rtl'" v-html="item.body" />
 		</div>
 	</div>
 </template>
 
-<script>
+<script lang="ts">
+import Vue from 'vue'
+import { mapState } from 'vuex'
+
 import EarthIcon from 'vue-material-design-icons/Earth.vue'
 import StarIcon from 'vue-material-design-icons/Star.vue'
 import Eye from 'vue-material-design-icons/Eye.vue'
 import RssIcon from 'vue-material-design-icons/Rss.vue'
 import ShareVariant from 'vue-material-design-icons/ShareVariant.vue'
+
 import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
 import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
 
-export default {
+import { Feed } from '../types/Feed'
+import { FeedItem } from '../types/FeedItem'
+
+export default Vue.extend({
 	name: 'FeedItem',
 	components: {
 		EarthIcon,
@@ -146,48 +150,82 @@ export default {
 	data: () => {
 		return {
 			expanded: false,
+			keepUnread: false,
 		}
 	},
 	computed: {
 		isExpanded() {
 			return this.expanded
 		},
+		...mapState(['feeds']),
 	},
 	methods: {
 		expand() {
 			this.expanded = !this.expanded
+			this.markRead(this.item)
+		},
+		formatDate(epoch: number) {
+			return new Date(epoch).toLocaleString()
 		},
-		formatDate() {
-			return 'test'
+		formatDatetime(epoch: number) {
+			return new Date(epoch).toISOString()
 		},
-		getRelativeTimestamp() {
-			return 'yesterday'
+		getRelativeTimestamp(previous: number) {
+			const current = Date.now()
+
+			const msPerMinute = 60 * 1000
+			const msPerHour = msPerMinute * 60
+			const msPerDay = msPerHour * 24
+			const msPerMonth = msPerDay * 30
+			const msPerYear = msPerDay * 365
+
+			const elapsed = current - previous
+
+			if (elapsed < msPerMinute) {
+				return Math.round(elapsed / 1000) + ' ' + t('news', 'seconds')
+			} else if (elapsed < msPerHour) {
+				return Math.round(elapsed / msPerMinute) + ' ' + t('news', 'minutes ago')
+			} else if (elapsed < msPerDay) {
+				return Math.round(elapsed / msPerHour) + ' ' + t('news', 'hours ago')
+			} else if (elapsed < msPerMonth) {
+				return Math.round(elapsed / msPerDay) + ' ' + t('news', 'days ago')
+			} else if (elapsed < msPerYear) {
+				return Math.round(elapsed / msPerMonth) + ' ' + t('news', 'months ago')
+			} else {
+				return Math.round(elapsed / msPerYear) + ' ' + t('news', 'years ago')
+			}
 		},
-		getFeed(id) {
-			return {}
+		getFeed(id: number): Feed {
+			return this.$store.getters.feeds.find((feed: Feed) => feed.id === id)
 		},
-		getMediaType(mime) {
+		getMediaType(mime: any): 'audio' | 'video' | false {
+			// TODO: figure out how to check
 			return false
 		},
-		play(item) {
+		play(item: any) {
 			// TODO: implement this
 		},
-		markRead() {
-			// TODO: implement this
+		markRead(item: FeedItem): void {
+			if (!this.keepUnread) {
+				// TODO: update state
+				item.unread = false
+			}
 		},
-		toggleKeepUnread() {
-			// TODO: implement this
+		toggleKeepUnread(item: FeedItem): void {
+			this.keepUnread = !this.keepUnread
+			// TODO: update state
+			item.unread = true
 		},
-		toggleStarred() {
-			// TODO: implement this
+		toggleStarred(item: FeedItem): void {
+			// TODO: update state
+			item.starred = !item.starred
 		},
 	},
-}
+})
 
 </script>
 
 <style>
-
 	.feed-item-container {
 		border-bottom: 1px solid #222;
 	}
@@ -204,6 +242,13 @@ export default {
 		cursor: pointer;
 	}
 
+	.feed-item-row .link-container {
+		padding-right: 5px;
+		display: flex;
+		flex-direction: row;
+		align-self: start;
+	}
+
 	.feed-item-row .title-container {
 		color: var(--color-text-lighter);
 
@@ -225,7 +270,9 @@ export default {
 	}
 
 	.feed-item-row .date-container {
+		color: var(--color-text-lighter);
 		padding-left: 4px;
+		white-space: nowrap;
 	}
 
 	.feed-item-row .button-container {
diff --git a/src/components/Starred.vue b/src/components/Starred.vue
index 60a2ae6bb1..521ccda1ec 100644
--- a/src/components/Starred.vue
+++ b/src/components/Starred.vue
@@ -1,12 +1,12 @@
 <template>
 	<div>
-		<div style="padding-left: 50px; position: absolute; top: 1em; font-weight: 700;">
+		<div class="header">
 			Starred
-			<NcCounterBubble style="display: inline-block; vertical-align: sub; margin-left: 10px;">
+			<NcCounterBubble class="counter-bubble">
 				{{ items.starredCount }}
 			</NcCounterBubble>
 		</div>
-		<VirtualScroll :reached-end="items.starredLoaded" style="margin-top: 50px; border-top: 1px solid var(--color-border);">
+		<VirtualScroll :reached-end="reachedEnd" @load-more="fetchMore()">
 			<template v-if="items.starredItems && items.starredItems.length > 0">
 				<template v-for="item in items.starredItems">
 					<FeedItem :key="item.id" :item="item" />
@@ -17,35 +17,58 @@
 </template>
 
 <script lang="ts">
-import NcCounterBubble from '@nextcloud/vue/dist/Components/NcCounterBubble.js'
-
+import Vue from 'vue'
 import { mapState } from 'vuex'
 
+import NcCounterBubble from '@nextcloud/vue/dist/Components/NcCounterBubble.js'
+
 import VirtualScroll from './VirtualScroll.vue'
 import FeedItem from './FeedItem.vue'
 
-export default {
+export default Vue.extend({
 	components: {
 		NcCounterBubble,
 		VirtualScroll,
 		FeedItem,
 	},
-	props: {
-
+	data() {
+		return {
+			mounted: false,
+		}
 	},
 	computed: {
 		...mapState(['items']),
-		// starred(): any[] {
-		// return this.$store.state.items.starredItems
-		// },
+		reachedEnd(): boolean {
+			return this.mounted && this.$store.state.items.starredLoaded
+		},
 	},
-	async created() {
-		// TODO: ?
+	mounted() {
+		this.mounted = true
 	},
 	methods: {
-		async fetchStarred() {
+		async fetchMore() {
 			// TODO
 		},
 	},
-}
+})
 </script>
+
+<style>
+.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);
+}
+</style>
diff --git a/src/components/VirtualScroll.vue b/src/components/VirtualScroll.vue
index cf5aeb24e7..2f19e606ea 100644
--- a/src/components/VirtualScroll.vue
+++ b/src/components/VirtualScroll.vue
@@ -4,6 +4,8 @@
   - This file is licensed under the Affero General Public License version 3 or later. See the COPYING file.
   -->
 <script>
+import { h } from 'vue'
+
 import ItemSkeleton from './ItemSkeleton.vue'
 
 const GRID_ITEM_HEIGHT = 200 + 10
diff --git a/src/shims-vue.d.ts b/src/shims-vue.d.ts
index 43c9207946..6ea357570e 100644
--- a/src/shims-vue.d.ts
+++ b/src/shims-vue.d.ts
@@ -9,4 +9,7 @@ declare module '*.vue' {
 // Necessary for All Nextcloud Vue components
 declare module '@nextcloud/vue/dist/Components/*' {
 
-};
\ No newline at end of file
+};
+
+// Necessary to access translate in typescript components
+function t(app, key) { }
\ No newline at end of file
diff --git a/src/types/Feed.ts b/src/types/Feed.ts
index 9e06aca3cf..87de979655 100644
--- a/src/types/Feed.ts
+++ b/src/types/Feed.ts
@@ -5,4 +5,5 @@ export type Feed = {
   title?: string;
   autoDiscover?: boolean;
   faviconLink?: string;
+  id?: number;
 }
diff --git a/src/types/FeedItem.ts b/src/types/FeedItem.ts
index 7ffe461c71..d7dabe75e6 100644
--- a/src/types/FeedItem.ts
+++ b/src/types/FeedItem.ts
@@ -1,4 +1,6 @@
 export type FeedItem = {
   id: string;
   title: string;
+  unread: boolean;
+  starred: boolean;
 };

From fd90f08b49fdad1049209fe894cc002cb9112746 Mon Sep 17 00:00:00 2001
From: Devlin Junker <devlin.junker@gmail.com>
Date: Tue, 15 Aug 2023 21:26:44 -0700
Subject: [PATCH 7/9] connect actions to backend

Signed-off-by: Devlin Junker <devlin.junker@gmail.com>
---
 src/components/FeedItem.vue      | 20 ++++++-------
 src/components/Sidebar.vue       |  3 --
 src/components/Starred.vue       | 17 +++++++----
 src/components/VirtualScroll.vue |  2 --
 src/store/item.ts                | 49 +++++++++++++++++++++++++++-----
 src/types/FeedItem.ts            |  2 ++
 src/types/MutationTypes.ts       |  3 +-
 7 files changed, 66 insertions(+), 30 deletions(-)

diff --git a/src/components/FeedItem.vue b/src/components/FeedItem.vue
index 5eabf30cf2..a789833433 100644
--- a/src/components/FeedItem.vue
+++ b/src/components/FeedItem.vue
@@ -33,7 +33,7 @@
 					</template>
 					<NcActionButton>
 						<template #default>
-							<!-- TODO: --> TODO
+							<!-- TODO: Share Menu --> TODO
 						</template>
 						<template #icon>
 							<ShareVariant />
@@ -64,7 +64,7 @@
 					{{ t('news', 'by') }} {{ item.author }}
 				</span>
 				<span v-if="!item.sharedBy" class="source">{{ t('news', 'from') }}
-					<!-- TODO: Fix this -->
+					<!-- TODO: Fix link to feed -->
 					<a :href="`#/items/feeds/${item.feedId}/`">
 						{{ getFeed(item.feedId).title }}
 						<img v-if="getFeed(item.feedId).faviconLink && isCompactView()" :src="getFeed(item.feedId).faviconLink" alt="favicon">
@@ -77,7 +77,7 @@
 				</span>
 			</div>
 
-			<!-- TODO: Test this -->
+			<!-- TODO: Test audio/video -->
 			<div v-if="getMediaType(item.enclosureMime) == 'audio'" class="enclosure">
 				<button @click="play(item)">
 					{{ t('news', 'Play audio') }}
@@ -129,6 +129,7 @@ import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
 
 import { Feed } from '../types/Feed'
 import { FeedItem } from '../types/FeedItem'
+import { ACTIONS, MUTATIONS } from '../store'
 
 export default Vue.extend({
 	name: 'FeedItem',
@@ -199,26 +200,23 @@ export default Vue.extend({
 			return this.$store.getters.feeds.find((feed: Feed) => feed.id === id)
 		},
 		getMediaType(mime: any): 'audio' | 'video' | false {
-			// TODO: figure out how to check
+			// TODO: figure out how to check media type
 			return false
 		},
 		play(item: any) {
-			// TODO: implement this
+			// TODO: implement play audio/video
 		},
 		markRead(item: FeedItem): void {
 			if (!this.keepUnread) {
-				// TODO: update state
-				item.unread = false
+				this.$store.dispatch(ACTIONS.MARK_READ, { item })
 			}
 		},
 		toggleKeepUnread(item: FeedItem): void {
 			this.keepUnread = !this.keepUnread
-			// TODO: update state
-			item.unread = true
+			this.$store.dispatch(ACTIONS.MARK_UNREAD, { item })
 		},
 		toggleStarred(item: FeedItem): void {
-			// TODO: update state
-			item.starred = !item.starred
+			this.$store.dispatch(item.starred ? ACTIONS.UNSTAR_ITEM : ACTIONS.STAR_ITEM, { item })
 		},
 	},
 })
diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue
index 0cad27654d..a9c128b150 100644
--- a/src/components/Sidebar.vue
+++ b/src/components/Sidebar.vue
@@ -181,9 +181,6 @@ export default Vue.extend({
 		...mapState(['feeds', 'folders', 'items']),
 		...mapState(SideBarState),
 	},
-	created() {
-		// TODO: init?
-	},
 	methods: {
 		newFolder(value: string) {
 			const folderName = value.trim()
diff --git a/src/components/Starred.vue b/src/components/Starred.vue
index 521ccda1ec..4dbfd9f5f5 100644
--- a/src/components/Starred.vue
+++ b/src/components/Starred.vue
@@ -7,9 +7,9 @@
 			</NcCounterBubble>
 		</div>
 		<VirtualScroll :reached-end="reachedEnd" @load-more="fetchMore()">
-			<template v-if="items.starredItems && items.starredItems.length > 0">
-				<template v-for="item in items.starredItems">
-					<FeedItem :key="item.id" :item="item" />
+			<template v-if="starred && starred.length > 0">
+				<template v-for="item in starred">
+					<FeedItemComponent :key="item.id" :item="item" />
 				</template>
 			</template>
 		</VirtualScroll>
@@ -23,13 +23,15 @@ import { mapState } from 'vuex'
 import NcCounterBubble from '@nextcloud/vue/dist/Components/NcCounterBubble.js'
 
 import VirtualScroll from './VirtualScroll.vue'
-import FeedItem from './FeedItem.vue'
+import FeedItemComponent from './FeedItem.vue'
+
+import { FeedItem } from '../types/FeedItem'
 
 export default Vue.extend({
 	components: {
 		NcCounterBubble,
 		VirtualScroll,
-		FeedItem,
+		FeedItemComponent,
 	},
 	data() {
 		return {
@@ -38,6 +40,9 @@ export default Vue.extend({
 	},
 	computed: {
 		...mapState(['items']),
+		starred(): FeedItem[] {
+			return this.$store.getters.starred
+		},
 		reachedEnd(): boolean {
 			return this.mounted && this.$store.state.items.starredLoaded
 		},
@@ -47,7 +52,7 @@ export default Vue.extend({
 	},
 	methods: {
 		async fetchMore() {
-			// TODO
+			// TODO: fetch more starred
 		},
 	},
 })
diff --git a/src/components/VirtualScroll.vue b/src/components/VirtualScroll.vue
index 2f19e606ea..cf5aeb24e7 100644
--- a/src/components/VirtualScroll.vue
+++ b/src/components/VirtualScroll.vue
@@ -4,8 +4,6 @@
   - This file is licensed under the Affero General Public License version 3 or later. See the COPYING file.
   -->
 <script>
-import { h } from 'vue'
-
 import ItemSkeleton from './ItemSkeleton.vue'
 
 const GRID_ITEM_HEIGHT = 200 + 10
diff --git a/src/store/item.ts b/src/store/item.ts
index c10360c040..dbe343cb55 100644
--- a/src/store/item.ts
+++ b/src/store/item.ts
@@ -7,6 +7,10 @@ import { FeedItem } from '../types/FeedItem'
 
 export const FEED_ITEM_ACTION_TYPES = {
 	FETCH_STARRED: 'FETCH_STARRED',
+	MARK_READ: 'MARK_READ',
+	MARK_UNREAD: 'MARK_UNREAD',
+	STAR_ITEM: 'STAR_ITEM',
+	UNSTAR_ITEM: 'UNSTAR_ITEM',
 }
 
 export type ItemState = {
@@ -16,7 +20,6 @@ export type ItemState = {
 	starredCount: number;
 
 	allItems: FeedItem[];
-	starredItems: FeedItem[];
 }
 
 const state: ItemState = {
@@ -26,12 +29,11 @@ const state: ItemState = {
 	starredCount: 0,
 
 	allItems: [],
-	starredItems: [],
 }
 
 const getters = {
 	starred(state: ItemState) {
-		return state.starredItems
+		return state.allItems.filter((item) => item.starred)
 	},
 }
 
@@ -49,7 +51,7 @@ export const actions = {
 			},
 		})
 
-		commit(FEED_ITEM_MUTATION_TYPES.SET_STARRED, response.data.items)
+		commit(FEED_ITEM_MUTATION_TYPES.SET_ITEMS, response.data.items)
 		commit(FEED_ITEM_MUTATION_TYPES.SET_STARRED_COUNT, response.data.starred)
 
 		if (response.data.items.length < 40) {
@@ -57,18 +59,51 @@ export const actions = {
 		}
 		state.fetchingItems = false
 	},
+	[FEED_ITEM_ACTION_TYPES.MARK_READ]({ commit }: ActionParams, { item }: { item: FeedItem}) {
+		axios.post(API_ROUTES.ITEMS + `/${item.id}/read`, {
+			isRead: true,
+		})
+		item.unread = false
+		commit(FEED_ITEM_MUTATION_TYPES.UPDATE_ITEM, { item })
+	},
+	[FEED_ITEM_ACTION_TYPES.MARK_UNREAD]({ commit }: ActionParams, { item }: { item: FeedItem}) {
+		axios.post(API_ROUTES.ITEMS + `/${item.id}/read`, {
+			isRead: false,
+		})
+		item.unread = true
+		commit(FEED_ITEM_MUTATION_TYPES.UPDATE_ITEM, { item })
+	},
+	[FEED_ITEM_ACTION_TYPES.STAR_ITEM]({ commit }: ActionParams, { item }: { item: FeedItem}) {
+		axios.post(API_ROUTES.ITEMS + `/${item.feedId}/${item.guidHash}/star`, {
+			isStarred: true,
+		})
+		item.starred = true
+		commit(FEED_ITEM_MUTATION_TYPES.UPDATE_ITEM, { item })
+		commit(FEED_ITEM_MUTATION_TYPES.SET_STARRED_COUNT, state.starredCount + 1)
+	},
+	[FEED_ITEM_ACTION_TYPES.UNSTAR_ITEM]({ commit }: ActionParams, { item }: { item: FeedItem}) {
+		axios.post(API_ROUTES.ITEMS + `/${item.feedId}/${item.guidHash}/star`, {
+			isStarred: false,
+		})
+		item.starred = false
+		commit(FEED_ITEM_MUTATION_TYPES.UPDATE_ITEM, { item })
+		commit(FEED_ITEM_MUTATION_TYPES.SET_STARRED_COUNT, state.starredCount - 1)
+	},
 }
 
 export const mutations = {
-	[FEED_ITEM_MUTATION_TYPES.SET_STARRED](state: ItemState, items: FeedItem[]) {
+	[FEED_ITEM_MUTATION_TYPES.SET_ITEMS](state: ItemState, items: FeedItem[]) {
 		items.forEach(it => {
-			state.starredItems.push(it)
+			state.allItems.push(it)
 		})
 	},
 	[FEED_ITEM_MUTATION_TYPES.SET_STARRED_COUNT](state: ItemState, count: number) {
 		state.starredCount = count
 	},
-
+	[FEED_ITEM_MUTATION_TYPES.UPDATE_ITEM](state: ItemState, { item }: { item: FeedItem }) {
+		const idx = state.allItems.findIndex((it) => it.id === item.id)
+		state.allItems.splice(idx, 1, item)
+	},
 }
 
 export default {
diff --git a/src/types/FeedItem.ts b/src/types/FeedItem.ts
index d7dabe75e6..dcd8c255af 100644
--- a/src/types/FeedItem.ts
+++ b/src/types/FeedItem.ts
@@ -3,4 +3,6 @@ export type FeedItem = {
   title: string;
   unread: boolean;
   starred: boolean;
+  feedId: number;
+  guidHash: string;
 };
diff --git a/src/types/MutationTypes.ts b/src/types/MutationTypes.ts
index cb87a1719b..8c00e714b4 100644
--- a/src/types/MutationTypes.ts
+++ b/src/types/MutationTypes.ts
@@ -9,6 +9,7 @@ export const FOLDER_MUTATION_TYPES = {
 }
 
 export const FEED_ITEM_MUTATION_TYPES = {
-	SET_STARRED: 'SET_STARRED',
+	SET_ITEMS: 'SET_ITEMS',
 	SET_STARRED_COUNT: 'SET_STARRED_COUNT',
+	UPDATE_ITEM: 'UPDATE_ITEM',
 }

From f60dfa8a0865f046c84b94655e15602500986e01 Mon Sep 17 00:00:00 2001
From: Devlin Junker <devlin.junker@gmail.com>
Date: Tue, 15 Aug 2023 21:51:59 -0700
Subject: [PATCH 8/9] cleanup unused stuff

Signed-off-by: Devlin Junker <devlin.junker@gmail.com>
---
 src/components/FeedItem.vue      |  2 +-
 src/components/VirtualScroll.vue | 10 ----------
 2 files changed, 1 insertion(+), 11 deletions(-)

diff --git a/src/components/FeedItem.vue b/src/components/FeedItem.vue
index a789833433..332754e8e8 100644
--- a/src/components/FeedItem.vue
+++ b/src/components/FeedItem.vue
@@ -129,7 +129,7 @@ import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
 
 import { Feed } from '../types/Feed'
 import { FeedItem } from '../types/FeedItem'
-import { ACTIONS, MUTATIONS } from '../store'
+import { ACTIONS } from '../store'
 
 export default Vue.extend({
 	name: 'FeedItem',
diff --git a/src/components/VirtualScroll.vue b/src/components/VirtualScroll.vue
index cf5aeb24e7..5487a11fbe 100644
--- a/src/components/VirtualScroll.vue
+++ b/src/components/VirtualScroll.vue
@@ -122,14 +122,4 @@ export default {
 	position: relative;
 	overflow-y: scroll;
 }
-
-.bookmarkslist--gridview .container-window {
-	display: flex;
-	flex-direction: row;
-	flex-wrap: wrap;
-	align-content: start;
-	gap: 10px;
-	padding: 0 10px;
-	padding-top: 10px;
-}
 </style>

From d82efe7c5762c6999054259b314ab653bbca32db Mon Sep 17 00:00:00 2001
From: Devlin Junker <devlin.junker@gmail.com>
Date: Wed, 16 Aug 2023 15:28:17 -0700
Subject: [PATCH 9/9] basic unit tests

Signed-off-by: Devlin Junker <devlin.junker@gmail.com>
---
 src/components/FeedItem.vue                   |   2 +-
 src/components/ItemSkeleton.vue               |  22 +--
 src/components/VirtualScroll.vue              |   6 +-
 .../unit/components/AddFeed.spec.ts           |  18 +--
 .../unit/components/FeedItem.spec.ts          | 141 ++++++++++++++++++
 .../unit/components/Starred.spec.ts           |  75 ++++++++++
 tests/javascript/unit/setup.ts                |   1 +
 tests/javascript/unit/store/item.spec.ts      |  96 ++++++++++++
 8 files changed, 340 insertions(+), 21 deletions(-)
 create mode 100644 tests/javascript/unit/components/FeedItem.spec.ts
 create mode 100644 tests/javascript/unit/components/Starred.spec.ts
 create mode 100644 tests/javascript/unit/store/item.spec.ts

diff --git a/src/components/FeedItem.vue b/src/components/FeedItem.vue
index 332754e8e8..3d59b4f921 100644
--- a/src/components/FeedItem.vue
+++ b/src/components/FeedItem.vue
@@ -197,7 +197,7 @@ export default Vue.extend({
 			}
 		},
 		getFeed(id: number): Feed {
-			return this.$store.getters.feeds.find((feed: Feed) => feed.id === id)
+			return this.$store.getters.feeds.find((feed: Feed) => feed.id === id) || {}
 		},
 		getMediaType(mime: any): 'audio' | 'video' | false {
 			// TODO: figure out how to check media type
diff --git a/src/components/ItemSkeleton.vue b/src/components/ItemSkeleton.vue
index 3b3b3f50cc..8762df9712 100644
--- a/src/components/ItemSkeleton.vue
+++ b/src/components/ItemSkeleton.vue
@@ -5,24 +5,28 @@
   -->
 
 <template>
-	<div :class="{
-			item: true,
-		}"
-		:style="{ background: 'var(--color-placeholder-dark)', height: '45px'}">
+	<div class="item-skeleton">
 		<div class="item__labels" />
 		<div class="item__actions" />
 	</div>
 </template>
+
 <script>
+import Vue from 'vue'
 
-export default {
+export default Vue.extend({
 	name: 'ItemSkeleton',
 	components: {
 	},
 	computed: {
-		viewMode() {
-			return this.$store.state.settings.viewMode
-		},
+
 	},
-}
+})
 </script>
+
+<style>
+.item-skeleton {
+	background: 'var(--color-placeholder-dark)';
+	height: '45px';
+}
+</style>
diff --git a/src/components/VirtualScroll.vue b/src/components/VirtualScroll.vue
index 5487a11fbe..7758559695 100644
--- a/src/components/VirtualScroll.vue
+++ b/src/components/VirtualScroll.vue
@@ -4,13 +4,15 @@
   - This file is licensed under the Affero General Public License version 3 or later. See the COPYING file.
   -->
 <script>
+import Vue from 'vue'
+
 import ItemSkeleton from './ItemSkeleton.vue'
 
 const GRID_ITEM_HEIGHT = 200 + 10
 // const GRID_ITEM_WIDTH = 250 + 10
 const LIST_ITEM_HEIGHT = 45 + 1
 
-export default {
+export default Vue.extend({
 	name: 'VirtualScroll',
 	props: {
 		reachedEnd: {
@@ -113,7 +115,7 @@ export default {
 			h('div', { class: 'lower-padding', style: { height: Math.max((lowerPaddingItems) * itemHeight, 0) + 'px' } }),
 		])
 	},
-}
+})
 </script>
 
 <style scoped>
diff --git a/tests/javascript/unit/components/AddFeed.spec.ts b/tests/javascript/unit/components/AddFeed.spec.ts
index ce1a9581d2..daf50329e6 100644
--- a/tests/javascript/unit/components/AddFeed.spec.ts
+++ b/tests/javascript/unit/components/AddFeed.spec.ts
@@ -1,17 +1,17 @@
 import { shallowMount, createLocalVue } from '@vue/test-utils'
 import AddFeed from '../../../../src/components/AddFeed.vue'
-import { FEED_ACTION_TYPES } from '@/store/feed'
+import { FEED_ACTION_TYPES } from '../../../../src/store/feed'
 
 describe('AddFeed.vue', () => {
 	'use strict'
 
-	let mockDispatch = jest.fn();
-	let mockStore = {
+	const mockDispatch = jest.fn()
+	const mockStore = {
 		state: {
 			folders: { folders: [] },
-			feeds: { feeds: [] }
+			feeds: { feeds: [] },
 		},
-		dispatch: mockDispatch
+		dispatch: mockDispatch,
 	}
 
 	let wrapper: any
@@ -38,7 +38,7 @@ describe('AddFeed.vue', () => {
 
 		expect(wrapper.vm.$emit).toBeCalled()
 		expect(mockDispatch).toBeCalled()
-		expect(mockDispatch.mock.calls[0][0]).toEqual(FEED_ACTION_TYPES.ADD_FEED);
+		expect(mockDispatch.mock.calls[0][0]).toEqual(FEED_ACTION_TYPES.ADD_FEED)
 	})
 
 	it('should check if feed url exists and return true', () => {
@@ -53,7 +53,7 @@ describe('AddFeed.vue', () => {
 		expect(response).toBeFalsy()
 
 		wrapper.vm.$data.feedUrl = 'http://test.com'
-		wrapper.vm.$store.state.feeds.feeds = [{ url: 'http://test.com'}]
+		wrapper.vm.$store.state.feeds.feeds = [{ url: 'http://test.com' }]
 		response = wrapper.vm.feedUrlExists()
 
 		expect(response).toBeTruthy()
@@ -71,14 +71,14 @@ describe('AddFeed.vue', () => {
 		expect(response).toBeFalsy()
 
 		wrapper.vm.$data.newFolderName = 'test'
-		wrapper.vm.$store.state.folders.folders = [{ name: 'test'}]
+		wrapper.vm.$store.state.folders.folders = [{ name: 'test' }]
 		response = wrapper.vm.folderNameExists()
 
 		expect(response).toBeFalsy()
 
 		wrapper.vm.$data.newFolderName = 'test'
 		wrapper.vm.$data.createNewFolder = 'test'
-		wrapper.vm.$store.state.folders.folders = [{ name: 'test'}]
+		wrapper.vm.$store.state.folders.folders = [{ name: 'test' }]
 		response = wrapper.vm.folderNameExists()
 
 		expect(response).toBeTruthy()
diff --git a/tests/javascript/unit/components/FeedItem.spec.ts b/tests/javascript/unit/components/FeedItem.spec.ts
new file mode 100644
index 0000000000..88991201fb
--- /dev/null
+++ b/tests/javascript/unit/components/FeedItem.spec.ts
@@ -0,0 +1,141 @@
+import { shallowMount, createLocalVue, Wrapper } from '@vue/test-utils'
+
+import FeedItem from '../../../../src/components/FeedItem.vue'
+import { ACTIONS } from '../../../../src/store'
+
+describe('FeedItem.vue', () => {
+	'use strict'
+	const localVue = createLocalVue()
+	let wrapper: Wrapper<FeedItem>
+
+	const mockItem = {
+		feedId: 1,
+		title: 'feed item',
+		pubDate: Date.now() / 1000,
+	}
+	const mockFeed = {
+		id: 1,
+	}
+
+	const dispatchStub = jest.fn()
+	beforeAll(() => {
+		wrapper = shallowMount(FeedItem, {
+			propsData: {
+				item: mockItem,
+			},
+			localVue,
+			mocks: {
+				$store: {
+					getters: {
+						feeds: [mockFeed],
+					},
+					state: {
+						feeds: [],
+						folders: [],
+					},
+					dispatch: dispatchStub,
+				},
+			},
+		})
+	})
+
+	beforeEach(() => {
+		dispatchStub.mockReset()
+	})
+
+	it('should initialize without expanded and without keepUnread', () => {
+		expect(wrapper.vm.$data.expanded).toBeFalsy()
+		expect(wrapper.vm.$data.keepUnread).toBeFalsy()
+	})
+
+	it('should expand when clicked', async () => {
+		await wrapper.find('.feed-item-row').trigger('click')
+
+		expect(wrapper.vm.$data.expanded).toBe(true)
+	})
+
+	it('should format date correctly', () => {
+		const epoch = Date.now() // Provide an epoch timestamp
+		const formattedDate = (wrapper.vm as any).formatDate(epoch)
+
+		expect(formattedDate).toEqual(new Date(epoch).toLocaleString())
+	})
+
+	it('should format datetime correctly', () => {
+		const epoch = Date.now() // Provide an epoch timestamp
+		const formattedDate = (wrapper.vm as any).formatDatetime(epoch)
+
+		expect(formattedDate).toEqual(new Date(epoch).toISOString())
+	})
+
+	it('should calculate relative timestamp correctly', () => {
+		const currentTimestamp = Date.now()
+		let pastTimestamp = currentTimestamp - 1000 * 10 // 10 seconds ago
+
+		let relativeTimestamp = (wrapper.vm as any).getRelativeTimestamp(pastTimestamp)
+
+		expect(relativeTimestamp).toEqual('10 seconds')
+
+		pastTimestamp = currentTimestamp - 1000 * 60 * 10 // 10 minutes ago
+
+		relativeTimestamp = (wrapper.vm as any).getRelativeTimestamp(pastTimestamp)
+
+		expect(relativeTimestamp).toEqual('10 minutes ago')
+	})
+
+	it('should retrieve feed by ID', () => {
+		const feed = (wrapper.vm as any).getFeed(mockFeed.id)
+
+		expect(feed).toEqual(mockFeed)
+	})
+
+	describe('markRead', () => {
+		it('should mark item as read when keepUnread is false', () => {
+			wrapper.vm.$data.keepUnread = false;
+			(wrapper.vm as any).markRead(wrapper.vm.$props.item)
+
+			expect(dispatchStub).toHaveBeenCalledWith(ACTIONS.MARK_READ, {
+				item: wrapper.vm.$props.item,
+			})
+		})
+
+		it('should not mark item as read when keepUnread is true', () => {
+			wrapper.vm.$data.keepUnread = true;
+			(wrapper.vm as any).markRead(wrapper.vm.$data.item)
+
+			expect(dispatchStub).not.toHaveBeenCalled()
+		})
+	})
+
+	it('toggles keepUnread state', () => {
+		const initialKeepUnread = wrapper.vm.$data.keepUnread;
+		(wrapper.vm as any).toggleKeepUnread(wrapper.vm.$data.item)
+		const updatedKeepUnread = wrapper.vm.$data.keepUnread
+
+		expect(updatedKeepUnread).toBe(!initialKeepUnread)
+	})
+
+	it('toggles starred state', () => {
+		wrapper.vm.$props.item.starred = true;
+
+		(wrapper.vm as any).toggleStarred(wrapper.vm.$props.item)
+		expect(dispatchStub).toHaveBeenCalledWith(ACTIONS.UNSTAR_ITEM, {
+			item: wrapper.vm.$props.item,
+		})
+
+		wrapper.vm.$props.item.starred = false;
+
+		(wrapper.vm as any).toggleStarred(wrapper.vm.$props.item)
+		expect(dispatchStub).toHaveBeenCalledWith(ACTIONS.STAR_ITEM, {
+			item: wrapper.vm.$props.item,
+		})
+	})
+
+	xit('TODO test: getMediaType(mime: any): audio | video | false', () => {
+		// TODO: finish tests after audio/video playback is supported
+	})
+
+	xit('TODO test: play(item: any): void', () => {
+		// TODO: finish tests after audio/video playback is supported
+	})
+})
diff --git a/tests/javascript/unit/components/Starred.spec.ts b/tests/javascript/unit/components/Starred.spec.ts
new file mode 100644
index 0000000000..212c69f6e1
--- /dev/null
+++ b/tests/javascript/unit/components/Starred.spec.ts
@@ -0,0 +1,75 @@
+import Vuex, { Store } from 'vuex'
+import { shallowMount, createLocalVue, Wrapper } from '@vue/test-utils'
+
+import Starred from '../../../../src/components/Starred.vue'
+import VirtualScroll from '../../../../src/components/VirtualScroll.vue'
+import FeedItem from '../../../../src/components/FeedItem.vue'
+
+jest.mock('@nextcloud/axios')
+
+describe('Explore.vue', () => {
+	'use strict'
+	const localVue = createLocalVue()
+	localVue.use(Vuex)
+	let wrapper: Wrapper<Starred>
+
+	const mockItem = {
+		feedId: 1,
+		title: 'feed item',
+		pubDate: Date.now() / 1000,
+	}
+
+	let store: Store<any>
+	beforeAll(() => {
+		store = new Vuex.Store({
+			state: {
+				items: {
+					starredLoaded: false,
+				},
+			},
+			actions: {
+			},
+			getters: {
+				starred: () => [mockItem],
+			},
+		})
+		wrapper = shallowMount(Starred, {
+			propsData: {
+				item: mockItem,
+			},
+			localVue,
+			store,
+		})
+	})
+
+	it('should initialize with mounted flag set', () => {
+		expect(wrapper.vm.$data.mounted).toBeTruthy()
+	})
+
+	it('should get starred items from state', () => {
+		expect((wrapper.findAllComponents(FeedItem).length)).toEqual(1)
+	})
+
+	it('should check starredLoaded and mounted to determine if the virtual scroll has reached end ', () => {
+		wrapper.vm.$store.state.items.starredLoaded = false
+		expect((wrapper.findComponent(VirtualScroll)).props().reachedEnd).toEqual(false)
+
+		wrapper.vm.$store.state.items.starredLoaded = true
+		store.state.items.starredLoaded = true
+
+		wrapper = shallowMount(Starred, {
+			propsData: {
+				item: mockItem,
+			},
+			data: () => {
+				return {
+					mounted: true,
+				}
+			},
+			localVue,
+			store,
+		})
+
+		expect((wrapper.findComponent(VirtualScroll)).props().reachedEnd).toEqual(true)
+	})
+})
diff --git a/tests/javascript/unit/setup.ts b/tests/javascript/unit/setup.ts
index 510e53baad..d6f38128b6 100644
--- a/tests/javascript/unit/setup.ts
+++ b/tests/javascript/unit/setup.ts
@@ -9,6 +9,7 @@ config.mocks.$t = function(_app: any, string: any) {
 	return string
 }
 config.mocks.t = config.mocks.$t
+global.t = config.mocks.$t
 
 config.mocks.$n = function(app: any, singular: any) {
 	return singular
diff --git a/tests/javascript/unit/store/item.spec.ts b/tests/javascript/unit/store/item.spec.ts
new file mode 100644
index 0000000000..614e47c1da
--- /dev/null
+++ b/tests/javascript/unit/store/item.spec.ts
@@ -0,0 +1,96 @@
+import axios from '@nextcloud/axios'
+import { AppState } from '../../../../src/store'
+import { FEED_ITEM_ACTION_TYPES, mutations, actions } from '../../../../src/store/item'
+
+import { FEED_ITEM_MUTATION_TYPES } from '../../../../src/types/MutationTypes'
+import { FeedItem } from '../../../../src/types/FeedItem'
+
+jest.mock('@nextcloud/axios')
+
+describe('feed.ts', () => {
+	'use strict'
+
+	describe('actions', () => {
+		describe('FETCH_STARRED', () => {
+			it('should call GET and commit items and starred count to state', async () => {
+				(axios as any).get.mockResolvedValue({ data: { items: [], starred: 3 } })
+				const commit = jest.fn()
+				await (actions[FEED_ITEM_ACTION_TYPES.FETCH_STARRED] as any)({ commit })
+				expect(axios.get).toBeCalled()
+				expect(commit).toBeCalledWith(FEED_ITEM_MUTATION_TYPES.SET_ITEMS, [])
+				expect(commit).toBeCalledWith(FEED_ITEM_MUTATION_TYPES.SET_STARRED_COUNT, 3)
+			})
+		})
+
+		it('MARK_READ should call GET and commit returned feeds to state', async () => {
+			const item = { id: 1 }
+			const commit = jest.fn()
+			await (actions[FEED_ITEM_ACTION_TYPES.MARK_READ] as any)({ commit }, { item })
+			expect(axios.post).toBeCalled()
+			expect(commit).toBeCalled()
+		})
+
+		it('MARK_UNREAD should call GET and commit returned feeds to state', async () => {
+			const item = { id: 1 }
+			const commit = jest.fn()
+			await (actions[FEED_ITEM_ACTION_TYPES.MARK_UNREAD] as any)({ commit }, { item })
+			expect(axios.post).toBeCalled()
+			expect(commit).toBeCalledWith(FEED_ITEM_MUTATION_TYPES.UPDATE_ITEM, { item })
+		})
+
+		it('STAR_ITEM should call GET and commit returned feeds to state', async () => {
+			const item = { id: 1 };
+			(axios as any).get.mockResolvedValue({ data: { feeds: [] } })
+			const commit = jest.fn()
+			await (actions[FEED_ITEM_ACTION_TYPES.STAR_ITEM] as any)({ commit }, { item })
+			expect(axios.post).toBeCalled()
+			expect(commit).toBeCalled()
+		})
+
+		it('UNSTAR_ITEM should call GET and commit returned feeds to state', async () => {
+			const item = { id: 1 };
+			(axios as any).get.mockResolvedValue({ data: { feeds: [] } })
+			const commit = jest.fn()
+			await (actions[FEED_ITEM_ACTION_TYPES.UNSTAR_ITEM] as any)({ commit }, { item })
+			expect(axios.post).toBeCalled()
+			expect(commit).toBeCalled()
+		})
+	})
+
+	describe('mutations', () => {
+		describe('SET_ITEMS', () => {
+			it('should add feeds to state', () => {
+				const state = { allItems: [] as any } as AppState
+				let items = [] as any
+
+				mutations[FEED_ITEM_MUTATION_TYPES.SET_ITEMS](state, items)
+				expect(state.allItems.length).toEqual(0)
+
+				items = [{ title: 'test' }] as FeedItem[]
+
+				mutations[FEED_ITEM_MUTATION_TYPES.SET_ITEMS](state, items)
+				expect(state.allItems.length).toEqual(1)
+				expect(state.allItems[0]).toEqual(items[0])
+			})
+		})
+
+		describe('SET_STARRED_COUNT', () => {
+			it('should add a single feed to state', () => {
+				const state = { } as AppState
+
+				(mutations[FEED_ITEM_MUTATION_TYPES.SET_STARRED_COUNT] as any)(state, 13)
+				expect(state.starredCount).toEqual(13)
+			})
+		})
+
+		describe('UPDATE_ITEM', () => {
+			it('should add a single feed to state', () => {
+				const state = { allItems: [{ id: 1, title: 'abc' }] as any } as AppState
+				const item = { title: 'test', id: 1 } as any
+
+				(mutations[FEED_ITEM_MUTATION_TYPES.UPDATE_ITEM] as any)(state, { item })
+				expect(state.allItems[0]).toEqual(item)
+			})
+		})
+	})
+})