From a30678bfd2d969545e25b754ee7597bc13e9def5 Mon Sep 17 00:00:00 2001
From: Michel Roux <xefir@crystalyx.net>
Date: Sat, 17 Aug 2024 17:56:12 +0200
Subject: [PATCH] feat: :sparkles: add favorites (missing homepage)

---
 src/components/Discover/Search.vue       |  4 +-
 src/components/Feed/Banner.vue           |  4 +-
 src/components/Settings/Filters.vue      |  7 ----
 src/components/Sidebar/Item.vue          | 48 +++++++++++++++++++++++-
 src/components/Sidebar/Subscriptions.vue |  9 ++---
 src/router.js                            |  5 +++
 src/store/settings.js                    | 29 ++++++++++----
 src/store/subscriptions.js               | 18 ++++++++-
 src/views/Home.vue                       |  7 ++++
 9 files changed, 102 insertions(+), 29 deletions(-)
 create mode 100644 src/views/Home.vue

diff --git a/src/components/Discover/Search.vue b/src/components/Discover/Search.vue
index 0dc987a..967827c 100644
--- a/src/components/Discover/Search.vue
+++ b/src/components/Discover/Search.vue
@@ -19,7 +19,7 @@
 				</template>
 				<template #actions>
 					<NcActionButton
-						v-if="!subscriptions.includes(feed.link)"
+						v-if="!subs.includes(feed.link)"
 						:aria-label="t('repod', 'Subscribe')"
 						:name="t('repod', 'Subscribe')"
 						:title="t('repod', 'Subscribe')"
@@ -69,7 +69,7 @@ export default {
 		}
 	},
 	computed: {
-		...mapState(useSubscriptions, ['subscriptions']),
+		...mapState(useSubscriptions, ['subs']),
 	},
 	watch: {
 		value() {
diff --git a/src/components/Feed/Banner.vue b/src/components/Feed/Banner.vue
index 9172808..382d300 100644
--- a/src/components/Feed/Banner.vue
+++ b/src/components/Feed/Banner.vue
@@ -23,7 +23,7 @@
 					<SafeHtml :source="description" />
 				</div>
 				<NcAppNavigationNew
-					v-if="!subscriptions.includes(url)"
+					v-if="!subs.includes(url)"
 					:text="t('repod', 'Subscribe')"
 					@click="addSubscription">
 					<template #icon>
@@ -79,7 +79,7 @@ export default {
 		},
 	},
 	computed: {
-		...mapState(useSubscriptions, ['subscriptions']),
+		...mapState(useSubscriptions, ['subs']),
 		url() {
 			return decodeUrl(this.$route.params.url)
 		},
diff --git a/src/components/Settings/Filters.vue b/src/components/Settings/Filters.vue
index ee71862..f5b7ba2 100644
--- a/src/components/Settings/Filters.vue
+++ b/src/components/Settings/Filters.vue
@@ -44,7 +44,6 @@ import { NcActionCheckbox, NcAppNavigationItem } from '@nextcloud/vue'
 import { mapActions, mapState } from 'pinia'
 import FilterIcon from 'vue-material-design-icons/Filter.vue'
 import FilterSettingsIcon from 'vue-material-design-icons/FilterSettings.vue'
-import { getCookie } from '../../utils/cookies.js'
 import { useSettings } from '../../store/settings.js'
 
 export default {
@@ -65,12 +64,6 @@ export default {
 			)
 		},
 	},
-	mounted() {
-		try {
-			const filters = getCookie('repod.filters')
-			this.filters = JSON.parse(filters)
-		} catch {}
-	},
 	methods: {
 		...mapActions(useSettings, ['setFilters']),
 	},
diff --git a/src/components/Sidebar/Item.vue b/src/components/Sidebar/Item.vue
index 9f4e485..576b3c9 100644
--- a/src/components/Sidebar/Item.vue
+++ b/src/components/Sidebar/Item.vue
@@ -4,6 +4,17 @@
 		:name="feed ? feed.title : url"
 		:to="hash">
 		<template #actions>
+			<NcActionButton
+				:aria-label="t('repod', 'Favorite')"
+				:model-value="isFavorite"
+				:name="t('repod', 'Favorite')"
+				:title="t('repod', 'Favorite')"
+				@update:modelValue="switchFavorite($event)">
+				<template #icon>
+					<StarPlusIcon v-if="!isFavorite" :size="20" />
+					<StarRemoveIcon v-if="isFavorite" :size="20" />
+				</template>
+			</NcActionButton>
 			<NcActionButton
 				:aria-label="t(`core`, 'Delete')"
 				:name="t(`core`, 'Delete')"
@@ -20,6 +31,7 @@
 				:display-name="feed.author || feed.title"
 				:is-no-user="true"
 				:url="feed.imageUrl" />
+			<StarIcon v-if="feed && isFavorite" class="star" :size="20" />
 			<AlertIcon v-if="failed" />
 		</template>
 	</NcAppNavigationItem>
@@ -27,11 +39,14 @@
 
 <script>
 import { NcActionButton, NcAppNavigationItem, NcAvatar } from '@nextcloud/vue'
+import { mapActions, mapState } from 'pinia'
 import AlertIcon from 'vue-material-design-icons/Alert.vue'
 import DeleteIcon from 'vue-material-design-icons/Delete.vue'
+import StarIcon from 'vue-material-design-icons/Star.vue'
+import StarPlusIcon from 'vue-material-design-icons/StarPlus.vue'
+import StarRemoveIcon from 'vue-material-design-icons/StarRemove.vue'
 import axios from '@nextcloud/axios'
 import { generateUrl } from '@nextcloud/router'
-import { mapActions } from 'pinia'
 import { showError } from '../../utils/toast.js'
 import { toUrl } from '../../utils/url.js'
 import { useSubscriptions } from '../../store/subscriptions.js'
@@ -44,6 +59,9 @@ export default {
 		NcActionButton,
 		NcAppNavigationItem,
 		NcAvatar,
+		StarIcon,
+		StarPlusIcon,
+		StarRemoveIcon,
 	},
 	props: {
 		url: {
@@ -59,9 +77,13 @@ export default {
 		}
 	},
 	computed: {
+		...mapState(useSubscriptions, ['favorites']),
 		hash() {
 			return toUrl(this.url)
 		},
+		isFavorite() {
+			return this.favorites.includes(this.url)
+		},
 	},
 	async mounted() {
 		try {
@@ -82,7 +104,7 @@ export default {
 		}
 	},
 	methods: {
-		...mapActions(useSubscriptions, ['fetch']),
+		...mapActions(useSubscriptions, ['fetch', 'addFavorite', 'removeFavorite']),
 		async deleteSubscription() {
 			if (
 				confirm(
@@ -99,11 +121,33 @@ export default {
 					console.error(e)
 					showError(t('repod', 'Error while removing the feed'))
 				} finally {
+					this.removeFavorite(this.url)
 					this.loading = false
 					this.fetch()
 				}
 			}
 		},
+		switchFavorite(value) {
+			if (value) {
+				if (this.favorites.length >= 10) {
+					showError(t('repod', 'You can only have 10 favorites'))
+					return
+				}
+
+				this.addFavorite(this.url)
+			} else {
+				this.removeFavorite(this.url)
+			}
+		},
 	},
 }
 </script>
+
+<style scoped>
+.star {
+	bottom: 2px;
+	color: yellow;
+	left: 22px;
+	position: absolute;
+}
+</style>
diff --git a/src/components/Sidebar/Subscriptions.vue b/src/components/Sidebar/Subscriptions.vue
index b373187..514a09b 100644
--- a/src/components/Sidebar/Subscriptions.vue
+++ b/src/components/Sidebar/Subscriptions.vue
@@ -2,7 +2,7 @@
 	<AppNavigation>
 		<template #list>
 			<NcAppContentList>
-				<router-link to="/">
+				<router-link to="/discover">
 					<NcAppNavigationNew :text="t('repod', 'Add a podcast')">
 						<template #icon>
 							<PlusIcon :size="20" />
@@ -11,10 +11,7 @@
 				</router-link>
 				<Loading v-if="loading" />
 				<NcAppNavigationList v-if="!loading">
-					<Item
-						v-for="subscriptionUrl of subscriptions"
-						:key="subscriptionUrl"
-						:url="subscriptionUrl" />
+					<Item v-for="url of subs" :key="url" :url="url" />
 				</NcAppNavigationList>
 			</NcAppContentList>
 		</template>
@@ -57,7 +54,7 @@ export default {
 		}
 	},
 	computed: {
-		...mapState(useSubscriptions, ['subscriptions']),
+		...mapState(useSubscriptions, ['subs']),
 	},
 	async mounted() {
 		try {
diff --git a/src/router.js b/src/router.js
index b41ebd9..7efda3d 100644
--- a/src/router.js
+++ b/src/router.js
@@ -1,6 +1,7 @@
 import { createRouter, createWebHashHistory } from 'vue-router'
 import Discover from './views/Discover.vue'
 import Feed from './views/Feed.vue'
+import Home from './views/Home.vue'
 import { generateUrl } from '@nextcloud/router'
 
 const router = createRouter({
@@ -8,6 +9,10 @@ const router = createRouter({
 	routes: [
 		{
 			path: '/',
+			component: Home,
+		},
+		{
+			path: '/discover',
 			component: Discover,
 		},
 		{
diff --git a/src/store/settings.js b/src/store/settings.js
index a64f283..36a0f10 100644
--- a/src/store/settings.js
+++ b/src/store/settings.js
@@ -1,14 +1,27 @@
+import { getCookie, setCookie } from '../utils/cookies.js'
 import { defineStore } from 'pinia'
-import { setCookie } from '../utils/cookies.js'
 
 export const useSettings = defineStore('settings', {
-	state: () => ({
-		filters: {
-			listened: true,
-			listening: true,
-			unlistened: true,
-		},
-	}),
+	state: () => {
+		try {
+			const filters = JSON.parse(getCookie('repod.filters'))
+			return {
+				filters: {
+					listened: filters.listened,
+					listening: filters.listening,
+					unlistened: filters.unlistened,
+				},
+			}
+		} catch {
+			return {
+				filters: {
+					listened: true,
+					listening: true,
+					unlistened: true,
+				},
+			}
+		}
+	},
 	actions: {
 		setFilters(filters) {
 			this.filters = { ...this.filters, ...filters }
diff --git a/src/store/subscriptions.js b/src/store/subscriptions.js
index a2d7731..757c6f2 100644
--- a/src/store/subscriptions.js
+++ b/src/store/subscriptions.js
@@ -1,10 +1,12 @@
+import { getCookie, setCookie } from '../utils/cookies.js'
 import axios from '@nextcloud/axios'
 import { defineStore } from 'pinia'
 import { generateUrl } from '@nextcloud/router'
 
 export const useSubscriptions = defineStore('subscriptions', {
 	state: () => ({
-		subscriptions: [],
+		subs: [],
+		favorites: [],
 	}),
 	actions: {
 		async fetch() {
@@ -14,7 +16,19 @@ export const useSubscriptions = defineStore('subscriptions', {
 			const subs = [...metrics.data.subscriptions].sort(
 				(a, b) => b.listenedSeconds - a.listenedSeconds,
 			)
-			this.subscriptions = subs.map((sub) => sub.url)
+			this.subs = subs.map((sub) => sub.url)
+
+			try {
+				this.favorites = JSON.parse(getCookie('repod.favorites')) || []
+			} catch {}
+		},
+		addFavorite(url) {
+			this.favorites.push(url)
+			setCookie('repod.favorites', JSON.stringify(this.favorites), 365)
+		},
+		removeFavorite(url) {
+			this.favorites = this.favorites.filter((favorite) => favorite !== url)
+			setCookie('repod.favorites', JSON.stringify(this.favorites), 365)
 		},
 	},
 })
diff --git a/src/views/Home.vue b/src/views/Home.vue
new file mode 100644
index 0000000..f9ca238
--- /dev/null
+++ b/src/views/Home.vue
@@ -0,0 +1,7 @@
+<template><div /></template>
+
+<script>
+export default {
+	name: 'Home',
+}
+</script>