repod/src/views/Home.vue

<template>
	<AppContent>
		<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 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,
		Item,
		NcEmptyContent,
		StarOffIcon,
	},
	computed: {
		...mapState(useSubscriptions, ['favs']),
	},
}
</script>

<style scoped>
.empty {
	height: 100%;
}
</style>