src/components/Home/Item.vue

@@ -0,0 +1,33 @@
+<template>
+	<div>
+		<Loading v-if="!currentFavoriteData" class="loading" />
+		<NcAvatar v-if="currentFavoriteData" />
+	</div>
+</template>
+
+<script>
+import { mapState } from 'pinia';
+import Loading from '../Atoms/Loading.vue'
+import { NcAvatar } from '@nextcloud/vue'
+import { useSubscriptions } from '../../store/subscriptions';
+
+export default {
+	name: 'Item',
+	components: {
+		Loading,
+		NcAvatar,
+	},
+	props: {
+		url: {
+			type: String,
+			required: true,
+		},
+	},
+    computed: {
+        ...mapState(useSubscriptions, ['favs']),
+        currentFavoriteData() {
+            return this.favs.find((fav) => fav.url === this.url)?.data
+        },
+    }
+}
+</script>

src/components/Sidebar/Item.vue

@@ -75,12 +75,12 @@ export default {
 		feed: null,
 	}),
 	computed: {
-		...mapState(useSubscriptions, ['favorites']),
+		...mapState(useSubscriptions, ['favs']),
 		hash() {
 			return toUrl(this.url)
 		},
 		isFavorite() {
-			return this.favorites.includes(this.url)
+			return this.favs.map((fav) => fav.url).includes(this.url)
 		},
 	},
 	async mounted() {
@@ -94,6 +94,7 @@ export default {
 				),
 			)
 			this.feed = podcastData.data.data
+			this.editFavoriteData(this.url, podcastData.data.data)
 		} catch (e) {
 			this.failed = true
 			console.error(e)
@@ -102,7 +103,7 @@ export default {
 		}
 	},
 	methods: {
-		...mapActions(useSubscriptions, ['fetch', 'addFavorite', 'removeFavorite']),
+		...mapActions(useSubscriptions, ['fetch', 'addFavorite', 'editFavoriteData', 'removeFavorite']),
 		async deleteSubscription() {
 			if (
 				confirm(
@@ -127,7 +128,7 @@ export default {
 		},
 		switchFavorite(value) {
 			if (value) {
-				if (this.favorites.length >= 10) {
+				if (this.favs.length >= 10) {
 					showError(t('repod', 'You can only have 10 favorites'))
 					return
 				}

src/components/Sidebar/Subscriptions.vue

@@ -11,7 +11,18 @@
 				</router-link>
 				<Loading v-if="loading" />
 				<NcAppNavigationList v-if="!loading">
-					<Item v-for="url of subs" :key="url" :url="url" />
+					<Item
+						v-for="url of favs
+							.sort((fav) => fav.lastPub)
+							.map((fav) => fav.url)"
+						:key="url"
+						:url="url" />
+					<Item
+						v-for="url of subs.filter(
+							(sub) => !favs.map((fav) => fav.url).includes(sub),
+						)"
+						:key="url"
+						:url="url" />
 				</NcAppNavigationList>
 			</NcAppContentList>
 		</template>
@@ -52,7 +63,7 @@ export default {
 		loading: true,
 	}),
 	computed: {
-		...mapState(useSubscriptions, ['subs']),
+		...mapState(useSubscriptions, ['subs', 'favs']),
 	},
 	async mounted() {
 		try {

src/store/subscriptions.js

@@ -6,7 +6,7 @@ import { generateUrl } from '@nextcloud/router'
 export const useSubscriptions = defineStore('subscriptions', {
 	state: () => ({
 		subs: [],
-		favorites: [],
+		favs: [],
 	}),
 	actions: {
 		async fetch() {
@@ -19,16 +19,30 @@ export const useSubscriptions = defineStore('subscriptions', {
 			this.subs = subs.map((sub) => sub.url)
 
 			try {
-				this.favorites = JSON.parse(getCookie('repod.favorites')) || []
+				const favs = JSON.parse(getCookie('repod.favorites')) || []
+				this.favs = favs.map((url) => ({ url }))
 			} catch {}
 		},
 		addFavorite(url) {
-			this.favorites.push(url)
+			this.favs.push({ url })
-			setCookie('repod.favorites', JSON.stringify(this.favorites), 365)
+			setCookie(
+				'repod.favorites',
+				JSON.stringify(this.favs.map((fav) => fav.url)),
+				365,
+			)
+		},
+		editFavoriteData(url, data) {
+			this.favs = this.favs.map((fav) =>
+				fav.url === url ? { ...fav, ...data } : fav,
+			)
 		},
 		removeFavorite(url) {
-			this.favorites = this.favorites.filter((favorite) => favorite !== url)
+			this.favs = this.favs.filter((fav) => fav.url !== url)
-			setCookie('repod.favorites', JSON.stringify(this.favorites), 365)
+			setCookie(
+				'repod.favorites',
+				JSON.stringify(this.favs.map((fav) => fav.url)),
+				365,
+			)
 		},
 	},
 })

src/views/Home.vue

@@ -1,23 +1,50 @@
 <template>
-	<AppContent class="content">
+	<AppContent>
-		<Loading />
+		<NcEmptyContent
+			v-if="!favs.length"
+			class="empty"
+			:description="
+				t('repod', 'Pin some subscriptions to see their latest updates')
+			"
+			:name="t('repod', 'No favorites')">
+			<template #icon>
+				<StarOffIcon :size="20" />
+			</template>
+		</NcEmptyContent>
+		<ul v-if="favs.length">
+			<li
+				v-for="url in favs.sort((fav) => fav.lastPub).map((fav) => fav.url)"
+				:key="url">
+				<Item :url="url" />
+			</li>
+		</ul>
 	</AppContent>
 </template>
 
 <script>
 import AppContent from '../components/Atoms/AppContent.vue'
-import Loading from '../components/Atoms/Loading.vue'
+import Item from '../components/Home/Item.vue'
+import { NcEmptyContent } from '@nextcloud/vue'
+import StarOffIcon from 'vue-material-design-icons/StarOff.vue'
+import { mapState } from 'pinia'
+import { useSubscriptions } from '../store/subscriptions.js'
 
 export default {
 	name: 'Home',
 	components: {
 		AppContent,
-		Loading,
+		Item,
+		NcEmptyContent,
+		StarOffIcon,
 	},
-	data() {
+	computed: {
-		return {
+		...mapState(useSubscriptions, ['favs']),
-			loading: true,
-		}
 	},
 }
 </script>
+
+<style scoped>
+.empty {
+	height: 100%;
+}
+</style>